feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-persona/lib/Persona.js

@@ -0,0 +1 @@
+export { Persona, personaClassNames, renderPersona_unstable, usePersonaStyles_unstable, usePersona_unstable, usePersonaBase_unstable } from './components/Persona/index';

node_modules/@fluentui/react-persona/lib/Persona.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/Persona.ts"],"sourcesContent":["export type {\n  PersonaBaseProps,\n  PersonaProps,\n  PersonaSlots,\n  PersonaBaseState,\n  PersonaState,\n} from './components/Persona/index';\nexport {\n  Persona,\n  personaClassNames,\n  renderPersona_unstable,\n  usePersonaStyles_unstable,\n  usePersona_unstable,\n  usePersonaBase_unstable,\n} from './components/Persona/index';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable","usePersonaBase_unstable"],"mappings":"AAOA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,EACnBC,uBAAuB,QAClB,6BAA6B"}

node_modules/@fluentui/react-persona/lib/components/Persona/Persona.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { renderPersona_unstable } from './renderPersona';
+import { usePersona_unstable } from './usePersona';
+import { usePersonaStyles_unstable } from './usePersonaStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,
+ * or an Avatar with a PresenceBadge.
+ */ export const Persona = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = usePersona_unstable(props, ref);
+    usePersonaStyles_unstable(state);
+    useCustomStyleHook_unstable('usePersonaStyles_unstable')(state);
+    return renderPersona_unstable(state);
+});
+Persona.displayName = 'Persona';

node_modules/@fluentui/react-persona/lib/components/Persona/Persona.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Persona/Persona.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderPersona_unstable } from './renderPersona';\nimport { usePersona_unstable } from './usePersona';\nimport { usePersonaStyles_unstable } from './usePersonaStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { PersonaProps } from './Persona.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,\n * or an Avatar with a PresenceBadge.\n */\nexport const Persona: ForwardRefComponent<PersonaProps> = React.forwardRef((props, ref) => {\n  const state = usePersona_unstable(props, ref);\n\n  usePersonaStyles_unstable(state);\n\n  useCustomStyleHook_unstable('usePersonaStyles_unstable')(state);\n\n  return renderPersona_unstable(state);\n});\n\nPersona.displayName = 'Persona';\n"],"names":["React","renderPersona_unstable","usePersona_unstable","usePersonaStyles_unstable","useCustomStyleHook_unstable","Persona","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,wBAA6CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQP,oBAAoBK,OAAOC;IAEzCL,0BAA0BM;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}

node_modules/@fluentui/react-persona/lib/components/Persona/Persona.types.js

@@ -0,0 +1 @@
+export { };

node_modules/@fluentui/react-persona/lib/components/Persona/Persona.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Persona/Persona.types.ts"],"sourcesContent":["import { Avatar } from '@fluentui/react-avatar';\nimport { PresenceBadge } from '@fluentui/react-badge';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type PersonaSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Avatar to display.\n   *\n   * If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.\n   */\n  avatar?: Slot<typeof Avatar>;\n\n  /**\n   * PresenceBadge to display.\n   *\n   * If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.\n   */\n  presence?: Slot<typeof PresenceBadge>;\n\n  /**\n   * The first line of text in the Persona, larger than the rest of the lines.\n   *\n   * `primaryText` defaults to the `name` prop. We recomend to only use `name`, use `primaryText` when the text is\n   *  different than the `name` prop.\n   */\n  primaryText?: Slot<'span'>;\n\n  /**\n   * The second line of text in the Persona.\n   */\n  secondaryText?: Slot<'span'>;\n\n  /**\n   * The third line of text in the Persona.\n   */\n  tertiaryText?: Slot<'span'>;\n\n  /**\n   * The fourth line of text in the Persona.\n   */\n  quaternaryText?: Slot<'span'>;\n};\n\n/**\n * Persona Props\n */\nexport type PersonaProps = ComponentProps<PersonaSlots> & {\n  /**\n   * The name of the person or entity represented by the Persona.\n   *\n   * When `primaryText` is not provided, this will be used as the default value for `primaryText`.\n   */\n  name?: string;\n\n  /**\n   * Whether to display only the presence.\n   *\n   * @default false\n   */\n  presenceOnly?: boolean;\n\n  /**\n   * The size of a Persona and its text.\n   *\n   * @default medium\n   */\n  size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n\n  /**\n   * The position of the text relative to the avatar/presence.\n   *\n   * @default after\n   */\n  textPosition?: 'after' | 'before' | 'below';\n\n  /**\n   * The vertical alignment of the text relative to the avatar/presence.\n   *\n   * @default start\n   */\n  textAlignment?: 'center' | 'start';\n};\n\nexport type PersonaBaseProps = ComponentProps<Omit<PersonaSlots, 'avatar' | 'presence'>> & Pick<PersonaProps, 'name'>;\n\n/**\n * State used in rendering Persona\n */\nexport type PersonaState = ComponentState<PersonaSlots> &\n  Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {\n    /**\n     * The number of text lines used.\n     */\n    numTextLines: number;\n  };\n\nexport type PersonaBaseState = ComponentState<Omit<PersonaSlots, 'avatar' | 'presence'>> &\n  Pick<PersonaState, 'numTextLines'>;\n"],"names":[],"mappings":"AAkGA,WACqC"}

node_modules/@fluentui/react-persona/lib/components/Persona/index.js

@@ -0,0 +1,4 @@
+export { Persona } from './Persona';
+export { renderPersona_unstable } from './renderPersona';
+export { usePersona_unstable, usePersonaBase_unstable } from './usePersona';
+export { personaClassNames, usePersonaStyles_unstable } from './usePersonaStyles.styles';

node_modules/@fluentui/react-persona/lib/components/Persona/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Persona/index.ts"],"sourcesContent":["export { Persona } from './Persona';\nexport type { PersonaBaseProps, PersonaProps, PersonaSlots, PersonaBaseState, PersonaState } from './Persona.types';\nexport { renderPersona_unstable } from './renderPersona';\nexport { usePersona_unstable, usePersonaBase_unstable } from './usePersona';\nexport { personaClassNames, usePersonaStyles_unstable } from './usePersonaStyles.styles';\n"],"names":["Persona","renderPersona_unstable","usePersona_unstable","usePersonaBase_unstable","personaClassNames","usePersonaStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,EAAEC,uBAAuB,QAAQ,eAAe;AAC5E,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}

node_modules/@fluentui/react-persona/lib/components/Persona/renderPersona.js

@@ -0,0 +1,19 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of Persona
+ */ export const renderPersona_unstable = (state)=>{
+    const { presenceOnly, textPosition } = state;
+    assertSlots(state);
+    const coin = presenceOnly ? state.presence && /*#__PURE__*/ _jsx(state.presence, {}) : state.avatar && /*#__PURE__*/ _jsx(state.avatar, {});
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            (textPosition === 'after' || textPosition === 'below') && coin,
+            state.primaryText && /*#__PURE__*/ _jsx(state.primaryText, {}),
+            state.secondaryText && /*#__PURE__*/ _jsx(state.secondaryText, {}),
+            state.tertiaryText && /*#__PURE__*/ _jsx(state.tertiaryText, {}),
+            state.quaternaryText && /*#__PURE__*/ _jsx(state.quaternaryText, {}),
+            textPosition === 'before' && coin
+        ]
+    });
+};

node_modules/@fluentui/react-persona/lib/components/Persona/renderPersona.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Persona/renderPersona.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { PersonaState, PersonaSlots } from './Persona.types';\n\n/**\n * Render the final JSX of Persona\n */\nexport const renderPersona_unstable = (state: PersonaState): JSXElement => {\n  const { presenceOnly, textPosition } = state;\n  assertSlots<PersonaSlots>(state);\n\n  const coin = presenceOnly ? state.presence && <state.presence /> : state.avatar && <state.avatar />;\n\n  return (\n    <state.root>\n      {(textPosition === 'after' || textPosition === 'below') && coin}\n      {state.primaryText && <state.primaryText />}\n      {state.secondaryText && <state.secondaryText />}\n      {state.tertiaryText && <state.tertiaryText />}\n      {state.quaternaryText && <state.quaternaryText />}\n      {textPosition === 'before' && coin}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderPersona_unstable","state","presenceOnly","textPosition","coin","presence","avatar","root","primaryText","secondaryText","tertiaryText","quaternaryText"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,YAAY,EAAEC,YAAY,EAAE,GAAGF;IACvCF,YAA0BE;IAE1B,MAAMG,OAAOF,eAAeD,MAAMI,QAAQ,kBAAI,KAACJ,MAAMI,QAAQ,QAAMJ,MAAMK,MAAM,kBAAI,KAACL,MAAMK,MAAM;IAEhG,qBACE,MAACL,MAAMM,IAAI;;YACPJ,CAAAA,iBAAiB,WAAWA,iBAAiB,OAAM,KAAMC;YAC1DH,MAAMO,WAAW,kBAAI,KAACP,MAAMO,WAAW;YACvCP,MAAMQ,aAAa,kBAAI,KAACR,MAAMQ,aAAa;YAC3CR,MAAMS,YAAY,kBAAI,KAACT,MAAMS,YAAY;YACzCT,MAAMU,cAAc,kBAAI,KAACV,MAAMU,cAAc;YAC7CR,iBAAiB,YAAYC;;;AAGpC,EAAE"}

node_modules/@fluentui/react-persona/lib/components/Persona/usePersona.js

@@ -0,0 +1,108 @@
+'use client';
+import * as React from 'react';
+import { Avatar } from '@fluentui/react-avatar';
+import { slot } from '@fluentui/react-utilities';
+import { PresenceBadge } from '@fluentui/react-badge';
+/**
+ * Create the state required to render Persona.
+ *
+ * The returned state can be modified with hooks such as usePersonaStyles_unstable,
+ * before being passed to renderPersona_unstable.
+ *
+ * @param props - props from this instance of Persona
+ * @param ref - reference to root HTMLElement of Persona
+ */ export const usePersona_unstable = (props, ref)=>{
+    const { avatar, presenceOnly = false, size = 'medium', textAlignment = 'start', textPosition = 'after', presence, ...baseProps } = props;
+    const state = usePersonaBase_unstable(baseProps, ref);
+    return {
+        ...state,
+        presenceOnly,
+        size,
+        textAlignment,
+        textPosition,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...state.components,
+            avatar: Avatar,
+            presence: PresenceBadge
+        },
+        avatar: !presenceOnly ? slot.optional(avatar, {
+            renderByDefault: true,
+            defaultProps: {
+                name: props.name,
+                badge: presence,
+                size: avatarSizes[size]
+            },
+            elementType: Avatar
+        }) : undefined,
+        presence: presenceOnly ? slot.optional(presence, {
+            defaultProps: {
+                size: presenceSizes[size]
+            },
+            elementType: PresenceBadge
+        }) : undefined
+    };
+};
+/**
+ * Base hook for Persona component, manages state and structure common to all variants of Persona
+ */ export const usePersonaBase_unstable = (props, ref)=>{
+    const { name, primaryText: primaryTextProp, secondaryText: secondaryTextProp, tertiaryText: tertiaryTextProp, quaternaryText: quaternaryTextProp, ...rest } = props;
+    const primaryText = slot.optional(primaryTextProp, {
+        renderByDefault: true,
+        defaultProps: {
+            children: name
+        },
+        elementType: 'span'
+    });
+    const secondaryText = slot.optional(secondaryTextProp, {
+        elementType: 'span'
+    });
+    const tertiaryText = slot.optional(tertiaryTextProp, {
+        elementType: 'span'
+    });
+    const quaternaryText = slot.optional(quaternaryTextProp, {
+        elementType: 'span'
+    });
+    const numTextLines = [
+        primaryText,
+        secondaryText,
+        tertiaryText,
+        quaternaryText
+    ].filter(Boolean).length;
+    return {
+        numTextLines,
+        components: {
+            root: 'div',
+            primaryText: 'span',
+            secondaryText: 'span',
+            tertiaryText: 'span',
+            quaternaryText: 'span'
+        },
+        root: slot.always({
+            ref: ref,
+            ...rest
+        }, {
+            elementType: 'div'
+        }),
+        primaryText,
+        secondaryText,
+        tertiaryText,
+        quaternaryText
+    };
+};
+const presenceSizes = {
+    'extra-small': 'tiny',
+    small: 'extra-small',
+    medium: 'small',
+    large: 'medium',
+    'extra-large': 'large',
+    huge: 'large'
+};
+const avatarSizes = {
+    'extra-small': 20,
+    small: 28,
+    medium: 32,
+    large: 36,
+    'extra-large': 40,
+    huge: 56
+};

node_modules/@fluentui/react-persona/lib/components/Persona/usePersonaStyles.styles.js

@@ -0,0 +1,222 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const personaClassNames = {
+  root: 'fui-Persona',
+  avatar: 'fui-Persona__avatar',
+  presence: 'fui-Persona__presence',
+  primaryText: 'fui-Persona__primaryText',
+  secondaryText: 'fui-Persona__secondaryText',
+  tertiaryText: 'fui-Persona__tertiaryText',
+  quaternaryText: 'fui-Persona__quaternaryText'
+};
+const avatarSpacing = `--fui-Persona__avatar--spacing`;
+const useRootClassName = /*#__PURE__*/__resetStyles("rlroi9i", null, [".rlroi9i{display:inline-grid;grid-auto-rows:max-content;grid-auto-flow:column;justify-items:start;grid-template-columns:max-content [middle] auto;}"]);
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  beforeAfterCenter: {
+    wkccdc: "f1iantul"
+  },
+  after: {},
+  before: {
+    B7hvi0a: "f1tll2w5",
+    Budl1dq: "ffvkwdr"
+  },
+  below: {
+    Bxotwcr: "f1nkeedh",
+    B7hvi0a: "f1oiokrs",
+    Budl1dq: "f1emgwh2"
+  },
+  media: {
+    Ijaq50: "f1hek2iy"
+  },
+  mediaBeforeAfterCenter: {
+    Ijaq50: "fa4dipu"
+  },
+  start: {
+    qb2dma: "f9h729m"
+  },
+  center: {
+    qb2dma: "f7nlbp4"
+  },
+  afterAlignToPrimary: {
+    qb2dma: "f7nlbp4",
+    Ijaq50: "f1rnkkuc",
+    Bw0ie65: "f1warjpf"
+  },
+  beforeAlignToPrimary: {
+    qb2dma: "f7nlbp4",
+    Ijaq50: "f1rnkkuc",
+    Br312pm: "fwu52yu"
+  },
+  secondLineSpacing: {
+    B6of3ja: "f1ryq6si"
+  },
+  primary: {
+    Ijaq50: "f1q3ipgb"
+  },
+  secondary: {
+    Ijaq50: "f3drtdk"
+  },
+  tertiary: {
+    Ijaq50: "fa1o6s1"
+  },
+  quaternary: {
+    Ijaq50: "f1tuwaia"
+  }
+}, {
+  d: [".f1iantul{grid-template-rows:1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr;}", ".f1tll2w5{justify-items:end;}", ".ffvkwdr{grid-template-columns:auto [middle] max-content;}", ".f1nkeedh{grid-auto-flow:unset;}", ".f1oiokrs{justify-items:center;}", ".f1emgwh2{grid-template-columns:unset;}", ".f1hek2iy{grid-row-start:span 5;}", ".fa4dipu{grid-row-start:span 6;}", ".f9h729m{align-self:start;}", ".f7nlbp4{align-self:center;}", ".f1rnkkuc{grid-row-start:unset;}", ".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".f1ryq6si{margin-top:-2px;}", ".f1q3ipgb{grid-row-start:primary;}", ".f3drtdk{grid-row-start:secondary;}", ".fa1o6s1{grid-row-start:tertiary;}", ".f1tuwaia{grid-row-start:quaternary;}"]
+});
+const useAvatarSpacingStyles = /*#__PURE__*/__styles({
+  "extra-small": {
+    Bs1gm4r: "f1e48tse"
+  },
+  small: {
+    Bs1gm4r: "f18q9vkd"
+  },
+  medium: {
+    Bs1gm4r: "f18q9vkd"
+  },
+  large: {
+    Bs1gm4r: "fx34bi6"
+  },
+  "extra-large": {
+    Bs1gm4r: "fx34bi6"
+  },
+  huge: {
+    Bs1gm4r: "f1o96qtm"
+  },
+  after: {
+    t21cq0: ["f103ycu4", "f1tao51"]
+  },
+  below: {
+    jrapky: "fbo7acy"
+  },
+  before: {
+    Frg6f3: ["f1tao51", "f103ycu4"]
+  }
+}, {
+  d: [".f1e48tse{--fui-Persona__avatar--spacing:var(--spacingHorizontalSNudge);}", ".f18q9vkd{--fui-Persona__avatar--spacing:var(--spacingHorizontalS);}", ".fx34bi6{--fui-Persona__avatar--spacing:var(--spacingHorizontalMNudge);}", ".f1o96qtm{--fui-Persona__avatar--spacing:var(--spacingHorizontalM);}", ".f103ycu4{margin-right:var(--fui-Persona__avatar--spacing);}", ".f1tao51{margin-left:var(--fui-Persona__avatar--spacing);}", ".fbo7acy{margin-bottom:var(--fui-Persona__avatar--spacing);}"]
+});
+const usePresenceSpacingStyles = /*#__PURE__*/__styles({
+  small: {
+    Bs1gm4r: "f1e48tse"
+  }
+}, {
+  d: [".f1e48tse{--fui-Persona__avatar--spacing:var(--spacingHorizontalSNudge);}"]
+});
+/**
+ * Apply styling to the Persona slots based on the state
+ */
+export const usePersonaStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    presenceOnly,
+    size,
+    textAlignment,
+    textPosition
+  } = state;
+  const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
+  const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';
+  const {
+    primaryTextClassName,
+    optionalTextClassName
+  } = useTextClassNames(state, alignToPrimary);
+  const rootClassName = useRootClassName();
+  const styles = useStyles();
+  const avatarSpacingStyles = useAvatarSpacingStyles();
+  const presenceSpacingStyles = {
+    ...avatarSpacingStyles,
+    ...usePresenceSpacingStyles()
+  };
+  state.root.className = mergeClasses(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
+  if (state.avatar) {
+    state.avatar.className = mergeClasses(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
+  }
+  if (state.presence) {
+    state.presence.className = mergeClasses(personaClassNames.presence, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
+  }
+  if (state.primaryText) {
+    state.primaryText.className = mergeClasses(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
+  }
+  if (state.secondaryText) {
+    state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
+  }
+  if (state.tertiaryText) {
+    state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
+  }
+  if (state.quaternaryText) {
+    state.quaternaryText.className = mergeClasses(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
+  }
+  return state;
+};
+const usePrimaryTextBaseClassName = /*#__PURE__*/__resetStyles("rvj41k9", null, [".rvj41k9{display:block;color:var(--colorNeutralForeground1);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);}"]);
+const useOptionalTextBaseClassName = /*#__PURE__*/__resetStyles("rp1pf9e", null, [".rp1pf9e{display:block;color:var(--colorNeutralForeground2);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"]);
+const useTextStyles = /*#__PURE__*/__styles({
+  beforeAlignToPrimary: {
+    Bw0ie65: "f1warjpf"
+  },
+  afterAlignToPrimary: {
+    Br312pm: "fwu52yu"
+  },
+  body1: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  },
+  caption1: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm"
+  },
+  subtitle2: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "faaz57k"
+  }
+}, {
+  d: [".f1warjpf{grid-column-end:middle;}", ".fwu52yu{grid-column-start:middle;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}"]
+});
+const useTextClassNames = (state, alignToPrimary) => {
+  const {
+    presenceOnly,
+    size,
+    textPosition
+  } = state;
+  const primaryTextBaseClassName = usePrimaryTextBaseClassName();
+  const optionalTextBaseClassName = useOptionalTextBaseClassName();
+  const textStyles = useTextStyles();
+  let primaryTextSize;
+  let alignToPrimaryClassName;
+  if (presenceOnly) {
+    if (size === 'extra-small') {
+      primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;
+    } else if (size === 'extra-large' || size === 'huge') {
+      primaryTextSize = textStyles.subtitle2;
+    }
+    if (alignToPrimary) {
+      if (textPosition === 'before') {
+        alignToPrimaryClassName = textStyles.beforeAlignToPrimary;
+      } else if (textPosition === 'after') {
+        alignToPrimaryClassName = textStyles.afterAlignToPrimary;
+      }
+    }
+  } else {
+    if (size === 'huge') {
+      primaryTextSize = textStyles.subtitle2;
+    } else if (size === 'extra-large') {
+      primaryTextSize = textStyles.subtitle2;
+    }
+  }
+  return {
+    primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
+    optionalTextClassName: mergeClasses(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
+  };
+};

node_modules/@fluentui/react-persona/lib/components/Persona/usePersonaStyles.styles.raw.js

@@ -0,0 +1,199 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const personaClassNames = {
+    root: 'fui-Persona',
+    avatar: 'fui-Persona__avatar',
+    presence: 'fui-Persona__presence',
+    primaryText: 'fui-Persona__primaryText',
+    secondaryText: 'fui-Persona__secondaryText',
+    tertiaryText: 'fui-Persona__tertiaryText',
+    quaternaryText: 'fui-Persona__quaternaryText'
+};
+const avatarSpacing = `--fui-Persona__avatar--spacing`;
+const useRootClassName = makeResetStyles({
+    display: 'inline-grid',
+    gridAutoRows: 'max-content',
+    gridAutoFlow: 'column',
+    justifyItems: 'start',
+    gridTemplateColumns: 'max-content [middle] auto'
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    beforeAfterCenter: {
+        // This template is needed to make sure the Avatar is centered when it takes up more space than the text lines
+        gridTemplateRows: '1fr [primary] max-content [secondary] max-content [tertiary] max-content [quaternary] max-content 1fr'
+    },
+    after: {
+    },
+    before: {
+        justifyItems: 'end',
+        gridTemplateColumns: 'auto [middle] max-content'
+    },
+    below: {
+        gridAutoFlow: 'unset',
+        justifyItems: 'center',
+        gridTemplateColumns: 'unset'
+    },
+    media: {
+        gridRowStart: 'span 5'
+    },
+    mediaBeforeAfterCenter: {
+        gridRowStart: 'span 6'
+    },
+    start: {
+        alignSelf: 'start'
+    },
+    center: {
+        alignSelf: 'center'
+    },
+    afterAlignToPrimary: {
+        alignSelf: 'center',
+        gridRowStart: 'unset',
+        gridColumnEnd: 'middle'
+    },
+    beforeAlignToPrimary: {
+        alignSelf: 'center',
+        gridRowStart: 'unset',
+        gridColumnStart: 'middle'
+    },
+    secondLineSpacing: {
+        marginTop: '-2px'
+    },
+    primary: {
+        gridRowStart: 'primary'
+    },
+    secondary: {
+        gridRowStart: 'secondary'
+    },
+    tertiary: {
+        gridRowStart: 'tertiary'
+    },
+    quaternary: {
+        gridRowStart: 'quaternary'
+    }
+});
+const useAvatarSpacingStyles = makeStyles({
+    'extra-small': {
+        [avatarSpacing]: tokens.spacingHorizontalSNudge
+    },
+    small: {
+        [avatarSpacing]: tokens.spacingHorizontalS
+    },
+    medium: {
+        [avatarSpacing]: tokens.spacingHorizontalS
+    },
+    large: {
+        [avatarSpacing]: tokens.spacingHorizontalMNudge
+    },
+    'extra-large': {
+        [avatarSpacing]: tokens.spacingHorizontalMNudge
+    },
+    huge: {
+        [avatarSpacing]: tokens.spacingHorizontalM
+    },
+    after: {
+        marginRight: `var(${avatarSpacing})`
+    },
+    below: {
+        marginBottom: `var(${avatarSpacing})`
+    },
+    before: {
+        marginLeft: `var(${avatarSpacing})`
+    }
+});
+const usePresenceSpacingStyles = makeStyles({
+    small: {
+        [avatarSpacing]: tokens.spacingHorizontalSNudge
+    }
+});
+/**
+ * Apply styling to the Persona slots based on the state
+ */ export const usePersonaStyles_unstable = (state)=>{
+    'use no memo';
+    const { presenceOnly, size, textAlignment, textPosition } = state;
+    const alignToPrimary = presenceOnly && textAlignment === 'start' && size !== 'extra-large' && size !== 'huge';
+    const alignBeforeAfterCenter = textPosition !== 'below' && textAlignment === 'center';
+    const { primaryTextClassName, optionalTextClassName } = useTextClassNames(state, alignToPrimary);
+    const rootClassName = useRootClassName();
+    const styles = useStyles();
+    const avatarSpacingStyles = useAvatarSpacingStyles();
+    const presenceSpacingStyles = {
+        ...avatarSpacingStyles,
+        ...usePresenceSpacingStyles()
+    };
+    state.root.className = mergeClasses(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
+    if (state.avatar) {
+        state.avatar.className = mergeClasses(personaClassNames.avatar, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], avatarSpacingStyles[size], avatarSpacingStyles[textPosition], state.avatar.className);
+    }
+    if (state.presence) {
+        state.presence.className = mergeClasses(personaClassNames.presence, textPosition !== 'below' && styles.media, alignBeforeAfterCenter && styles.mediaBeforeAfterCenter, styles[textAlignment], presenceSpacingStyles[size], presenceSpacingStyles[textPosition], textPosition === 'after' && alignToPrimary && styles.afterAlignToPrimary, textPosition === 'before' && alignToPrimary && styles.beforeAlignToPrimary, state.presence.className);
+    }
+    if (state.primaryText) {
+        state.primaryText.className = mergeClasses(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
+    }
+    if (state.secondaryText) {
+        state.secondaryText.className = mergeClasses(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
+    }
+    if (state.tertiaryText) {
+        state.tertiaryText.className = mergeClasses(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
+    }
+    if (state.quaternaryText) {
+        state.quaternaryText.className = mergeClasses(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
+    }
+    return state;
+};
+const usePrimaryTextBaseClassName = makeResetStyles({
+    display: 'block',
+    color: tokens.colorNeutralForeground1,
+    ...typographyStyles.body1
+});
+const useOptionalTextBaseClassName = makeResetStyles({
+    display: 'block',
+    color: tokens.colorNeutralForeground2,
+    ...typographyStyles.caption1
+});
+const useTextStyles = makeStyles({
+    beforeAlignToPrimary: {
+        gridColumnEnd: 'middle'
+    },
+    afterAlignToPrimary: {
+        gridColumnStart: 'middle'
+    },
+    body1: typographyStyles.body1,
+    caption1: typographyStyles.caption1,
+    subtitle2: typographyStyles.subtitle2
+});
+const useTextClassNames = (state, alignToPrimary)=>{
+    const { presenceOnly, size, textPosition } = state;
+    const primaryTextBaseClassName = usePrimaryTextBaseClassName();
+    const optionalTextBaseClassName = useOptionalTextBaseClassName();
+    const textStyles = useTextStyles();
+    let primaryTextSize;
+    let alignToPrimaryClassName;
+    if (presenceOnly) {
+        if (size === 'extra-small') {
+            primaryTextSize = state.numTextLines <= 1 && textStyles.caption1;
+        } else if (size === 'extra-large' || size === 'huge') {
+            primaryTextSize = textStyles.subtitle2;
+        }
+        if (alignToPrimary) {
+            if (textPosition === 'before') {
+                alignToPrimaryClassName = textStyles.beforeAlignToPrimary;
+            } else if (textPosition === 'after') {
+                alignToPrimaryClassName = textStyles.afterAlignToPrimary;
+            }
+        }
+    } else {
+        if (size === 'huge') {
+            primaryTextSize = textStyles.subtitle2;
+        } else if (size === 'extra-large') {
+            primaryTextSize = textStyles.subtitle2;
+        }
+    }
+    return {
+        primaryTextClassName: mergeClasses(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
+        optionalTextClassName: mergeClasses(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
+    };
+};

node_modules/@fluentui/react-persona/lib/index.js

@@ -0,0 +1 @@
+export { Persona, personaClassNames, renderPersona_unstable, usePersonaStyles_unstable, usePersona_unstable, usePersonaBase_unstable } from './Persona';

node_modules/@fluentui/react-persona/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Persona,\n  personaClassNames,\n  renderPersona_unstable,\n  usePersonaStyles_unstable,\n  usePersona_unstable,\n  usePersonaBase_unstable,\n} from './Persona';\nexport type { PersonaProps, PersonaSlots, PersonaState, PersonaBaseProps, PersonaBaseState } from './Persona';\n"],"names":["Persona","personaClassNames","renderPersona_unstable","usePersonaStyles_unstable","usePersona_unstable","usePersonaBase_unstable"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,EACnBC,uBAAuB,QAClB,YAAY"}