feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-persona/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-persona
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

node_modules/@fluentui/react-persona/README.md

@@ -0,0 +1,19 @@
+# @fluentui/react-persona
+
+**React Persona components for [Fluent UI React](https://react.fluentui.dev/)**
+
+## Usage
+
+To import Persona:
+
+```js
+import { Persona } from '@fluentui/react-components';
+```
+
+### Examples
+
+```jsx
+const PersonaExample = () => {
+  return <Persona name="Kevin Sturgis" secondaryText="Software Engineer" />;
+};
+```

node_modules/@fluentui/react-persona/dist/index.d.ts

@@ -0,0 +1,130 @@
+import { Avatar } from '@fluentui/react-avatar';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import { PresenceBadge } from '@fluentui/react-badge';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * A Persona is a visual representation of a person or status that showcases an Avatar, PresenceBadge,
+ * or an Avatar with a PresenceBadge.
+ */
+export declare const Persona: ForwardRefComponent<PersonaProps>;
+
+export declare type PersonaBaseProps = ComponentProps<Omit<PersonaSlots, 'avatar' | 'presence'>> & Pick<PersonaProps, 'name'>;
+
+export declare type PersonaBaseState = ComponentState<Omit<PersonaSlots, 'avatar' | 'presence'>> & Pick<PersonaState, 'numTextLines'>;
+
+export declare const personaClassNames: SlotClassNames<PersonaSlots>;
+
+/**
+ * Persona Props
+ */
+export declare type PersonaProps = ComponentProps<PersonaSlots> & {
+    /**
+     * The name of the person or entity represented by the Persona.
+     *
+     * When `primaryText` is not provided, this will be used as the default value for `primaryText`.
+     */
+    name?: string;
+    /**
+     * Whether to display only the presence.
+     *
+     * @default false
+     */
+    presenceOnly?: boolean;
+    /**
+     * The size of a Persona and its text.
+     *
+     * @default medium
+     */
+    size?: 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
+    /**
+     * The position of the text relative to the avatar/presence.
+     *
+     * @default after
+     */
+    textPosition?: 'after' | 'before' | 'below';
+    /**
+     * The vertical alignment of the text relative to the avatar/presence.
+     *
+     * @default start
+     */
+    textAlignment?: 'center' | 'start';
+};
+
+export declare type PersonaSlots = {
+    root: NonNullable<Slot<'div'>>;
+    /**
+     * Avatar to display.
+     *
+     * If a PresenceBadge and an Avatar are provided, the Avatar will display the PresenceBadge as its presence.
+     */
+    avatar?: Slot<typeof Avatar>;
+    /**
+     * PresenceBadge to display.
+     *
+     * If `presenceOnly` is true, the PresenceBadge will be displayed instead of the Avatar.
+     */
+    presence?: Slot<typeof PresenceBadge>;
+    /**
+     * The first line of text in the Persona, larger than the rest of the lines.
+     *
+     * `primaryText` defaults to the `name` prop. We recomend to only use `name`, use `primaryText` when the text is
+     *  different than the `name` prop.
+     */
+    primaryText?: Slot<'span'>;
+    /**
+     * The second line of text in the Persona.
+     */
+    secondaryText?: Slot<'span'>;
+    /**
+     * The third line of text in the Persona.
+     */
+    tertiaryText?: Slot<'span'>;
+    /**
+     * The fourth line of text in the Persona.
+     */
+    quaternaryText?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering Persona
+ */
+export declare type PersonaState = ComponentState<PersonaSlots> & Required<Pick<PersonaProps, 'presenceOnly' | 'size' | 'textAlignment' | 'textPosition'>> & {
+    /**
+     * The number of text lines used.
+     */
+    numTextLines: number;
+};
+
+/**
+ * Render the final JSX of Persona
+ */
+export declare const renderPersona_unstable: (state: PersonaState) => JSXElement;
+
+/**
+ * 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 declare const usePersona_unstable: (props: PersonaProps, ref: React_2.Ref<HTMLElement>) => PersonaState;
+
+/**
+ * Base hook for Persona component, manages state and structure common to all variants of Persona
+ */
+export declare const usePersonaBase_unstable: (props: PersonaBaseProps, ref?: React_2.Ref<HTMLElement>) => PersonaBaseState;
+
+/**
+ * Apply styling to the Persona slots based on the state
+ */
+export declare const usePersonaStyles_unstable: (state: PersonaState) => PersonaState;
+
+export { }

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Persona: function() {
+        return _index.Persona;
+    },
+    personaClassNames: function() {
+        return _index.personaClassNames;
+    },
+    renderPersona_unstable: function() {
+        return _index.renderPersona_unstable;
+    },
+    usePersonaBase_unstable: function() {
+        return _index.usePersonaBase_unstable;
+    },
+    usePersonaStyles_unstable: function() {
+        return _index.usePersonaStyles_unstable;
+    },
+    usePersona_unstable: function() {
+        return _index.usePersona_unstable;
+    }
+});
+const _index = require("./components/Persona/index");

node_modules/@fluentui/react-persona/lib-commonjs/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":";;;;;;;;;;;;eAQEA,cAAO;;;eACPC,wBAAiB;;;eACjBC,6BAAsB;;;eAGtBG,8BAAuB;;;eAFvBF,gCAAyB;;;eACzBC,0BAAmB;;;uBAEd,6BAA6B"}

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Persona", {
+    enumerable: true,
+    get: function() {
+        return Persona;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _renderPersona = require("./renderPersona");
+const _usePersona = require("./usePersona");
+const _usePersonaStylesstyles = require("./usePersonaStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Persona = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _usePersona.usePersona_unstable)(props, ref);
+    (0, _usePersonaStylesstyles.usePersonaStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('usePersonaStyles_unstable')(state);
+    return (0, _renderPersona.renderPersona_unstable)(state);
+});
+Persona.displayName = 'Persona';

node_modules/@fluentui/react-persona/lib-commonjs/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;;;;;;;;;;;;iEAEuB,QAAQ;+BACQ,kBAAkB;4BACrB,eAAe;wCACT,4BAA4B;qCAG1B,kCAAkC;AAMvE,MAAMK,UAAAA,WAAAA,GAA6CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQP,+BAAAA,EAAoBK,OAAOC;QAEzCL,iDAAAA,EAA0BM;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-persona/lib-commonjs/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":""}

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Persona: function() {
+        return _Persona.Persona;
+    },
+    personaClassNames: function() {
+        return _usePersonaStylesstyles.personaClassNames;
+    },
+    renderPersona_unstable: function() {
+        return _renderPersona.renderPersona_unstable;
+    },
+    usePersonaBase_unstable: function() {
+        return _usePersona.usePersonaBase_unstable;
+    },
+    usePersonaStyles_unstable: function() {
+        return _usePersonaStylesstyles.usePersonaStyles_unstable;
+    },
+    usePersona_unstable: function() {
+        return _usePersona.usePersona_unstable;
+    }
+});
+const _Persona = require("./Persona");
+const _renderPersona = require("./renderPersona");
+const _usePersona = require("./usePersona");
+const _usePersonaStylesstyles = require("./usePersonaStyles.styles");

node_modules/@fluentui/react-persona/lib-commonjs/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":";;;;;;;;;;;;eAASA,gBAAO;;;eAIPI,yCAAiB;;;eAFjBH,qCAAsB;;;eACDE,mCAAuB;;;eACzBE,iDAAyB;;;eAD5CH,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACI,eAAe;wCACf,4BAA4B"}

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

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderPersona_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderPersona_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderPersona_unstable = (state)=>{
+    const { presenceOnly, textPosition } = state;
+    (0, _reactutilities.assertSlots)(state);
+    const coin = presenceOnly ? state.presence && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.presence, {}) : state.avatar && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.avatar, {});
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            (textPosition === 'after' || textPosition === 'below') && coin,
+            state.primaryText && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.primaryText, {}),
+            state.secondaryText && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.secondaryText, {}),
+            state.tertiaryText && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.tertiaryText, {}),
+            state.quaternaryText && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.quaternaryText, {}),
+            textPosition === 'before' && coin
+        ]
+    });
+};

node_modules/@fluentui/react-persona/lib-commonjs/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":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,+BAA+B,CAACC;IACrC,MAAM,EAAEC,YAAY,EAAEC,YAAY,EAAE,GAAGF;QACvCF,2BAAAA,EAA0BE;IAE1B,MAAMG,OAAOF,eAAeD,MAAMI,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACJ,MAAMI,QAAQ,EAAA,CAAA,KAAMJ,MAAMK,MAAM,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,MAAM,EAAA,CAAA;IAEhG,OAAA,WAAA,OACE,gBAAA,EAACL,MAAMM,IAAI,EAAA;;aACPJ,iBAAiB,WAAWA,iBAAiB,OAAA,CAAM,IAAMC;YAC1DH,MAAMO,WAAW,IAAA,WAAA,OAAI,eAAA,EAACP,MAAMO,WAAW,EAAA,CAAA;YACvCP,MAAMQ,aAAa,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,aAAa,EAAA,CAAA;YAC3CR,MAAMS,YAAY,IAAA,WAAA,OAAI,eAAA,EAACT,MAAMS,YAAY,EAAA,CAAA;YACzCT,MAAMU,cAAc,IAAA,WAAA,OAAI,eAAA,EAACV,MAAMU,cAAc,EAAA,CAAA;YAC7CR,iBAAiB,YAAYC;;;AAGpC,EAAE"}

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

@@ -0,0 +1,117 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    usePersonaBase_unstable: function() {
+        return usePersonaBase_unstable;
+    },
+    usePersona_unstable: function() {
+        return usePersona_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactavatar = require("@fluentui/react-avatar");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactbadge = require("@fluentui/react-badge");
+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: _reactavatar.Avatar,
+            presence: _reactbadge.PresenceBadge
+        },
+        avatar: !presenceOnly ? _reactutilities.slot.optional(avatar, {
+            renderByDefault: true,
+            defaultProps: {
+                name: props.name,
+                badge: presence,
+                size: avatarSizes[size]
+            },
+            elementType: _reactavatar.Avatar
+        }) : undefined,
+        presence: presenceOnly ? _reactutilities.slot.optional(presence, {
+            defaultProps: {
+                size: presenceSizes[size]
+            },
+            elementType: _reactbadge.PresenceBadge
+        }) : undefined
+    };
+};
+const usePersonaBase_unstable = (props, ref)=>{
+    const { name, primaryText: primaryTextProp, secondaryText: secondaryTextProp, tertiaryText: tertiaryTextProp, quaternaryText: quaternaryTextProp, ...rest } = props;
+    const primaryText = _reactutilities.slot.optional(primaryTextProp, {
+        renderByDefault: true,
+        defaultProps: {
+            children: name
+        },
+        elementType: 'span'
+    });
+    const secondaryText = _reactutilities.slot.optional(secondaryTextProp, {
+        elementType: 'span'
+    });
+    const tertiaryText = _reactutilities.slot.optional(tertiaryTextProp, {
+        elementType: 'span'
+    });
+    const quaternaryText = _reactutilities.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: _reactutilities.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-commonjs/components/Persona/usePersonaStyles.styles.js

@@ -0,0 +1,274 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    personaClassNames: function() {
+        return personaClassNames;
+    },
+    usePersonaStyles_unstable: function() {
+        return usePersonaStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+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__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__styles)({
+    small: {
+        Bs1gm4r: "f1e48tse"
+    }
+}, {
+    d: [
+        ".f1e48tse{--fui-Persona__avatar--spacing:var(--spacingHorizontalSNudge);}"
+    ]
+});
+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 = (0, _react.mergeClasses)(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
+    if (state.avatar) {
+        state.avatar.className = (0, _react.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 = (0, _react.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 = (0, _react.mergeClasses)(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
+    }
+    if (state.secondaryText) {
+        state.secondaryText.className = (0, _react.mergeClasses)(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
+    }
+    if (state.tertiaryText) {
+        state.tertiaryText.className = (0, _react.mergeClasses)(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
+    }
+    if (state.quaternaryText) {
+        state.quaternaryText.className = (0, _react.mergeClasses)(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
+    }
+    return state;
+};
+const usePrimaryTextBaseClassName = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__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: (0, _react.mergeClasses)(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
+        optionalTextClassName: (0, _react.mergeClasses)(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
+    };
+};

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

@@ -0,0 +1,214 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    personaClassNames: function() {
+        return personaClassNames;
+    },
+    usePersonaStyles_unstable: function() {
+        return usePersonaStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+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 = (0, _react.makeResetStyles)({
+    display: 'inline-grid',
+    gridAutoRows: 'max-content',
+    gridAutoFlow: 'column',
+    justifyItems: 'start',
+    gridTemplateColumns: 'max-content [middle] auto'
+});
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.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 = (0, _react.makeStyles)({
+    'extra-small': {
+        [avatarSpacing]: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    small: {
+        [avatarSpacing]: _reacttheme.tokens.spacingHorizontalS
+    },
+    medium: {
+        [avatarSpacing]: _reacttheme.tokens.spacingHorizontalS
+    },
+    large: {
+        [avatarSpacing]: _reacttheme.tokens.spacingHorizontalMNudge
+    },
+    'extra-large': {
+        [avatarSpacing]: _reacttheme.tokens.spacingHorizontalMNudge
+    },
+    huge: {
+        [avatarSpacing]: _reacttheme.tokens.spacingHorizontalM
+    },
+    after: {
+        marginRight: `var(${avatarSpacing})`
+    },
+    below: {
+        marginBottom: `var(${avatarSpacing})`
+    },
+    before: {
+        marginLeft: `var(${avatarSpacing})`
+    }
+});
+const usePresenceSpacingStyles = (0, _react.makeStyles)({
+    small: {
+        [avatarSpacing]: _reacttheme.tokens.spacingHorizontalSNudge
+    }
+});
+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 = (0, _react.mergeClasses)(personaClassNames.root, rootClassName, alignBeforeAfterCenter && styles.beforeAfterCenter, styles[textPosition], state.root.className);
+    if (state.avatar) {
+        state.avatar.className = (0, _react.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 = (0, _react.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 = (0, _react.mergeClasses)(personaClassNames.primaryText, alignBeforeAfterCenter && styles.primary, primaryTextClassName, state.primaryText.className);
+    }
+    if (state.secondaryText) {
+        state.secondaryText.className = (0, _react.mergeClasses)(personaClassNames.secondaryText, alignBeforeAfterCenter && styles.secondary, optionalTextClassName, styles.secondLineSpacing, state.secondaryText.className);
+    }
+    if (state.tertiaryText) {
+        state.tertiaryText.className = (0, _react.mergeClasses)(personaClassNames.tertiaryText, alignBeforeAfterCenter && styles.tertiary, optionalTextClassName, state.tertiaryText.className);
+    }
+    if (state.quaternaryText) {
+        state.quaternaryText.className = (0, _react.mergeClasses)(personaClassNames.quaternaryText, alignBeforeAfterCenter && styles.quaternary, optionalTextClassName, state.quaternaryText.className);
+    }
+    return state;
+};
+const usePrimaryTextBaseClassName = (0, _react.makeResetStyles)({
+    display: 'block',
+    color: _reacttheme.tokens.colorNeutralForeground1,
+    ..._reacttheme.typographyStyles.body1
+});
+const useOptionalTextBaseClassName = (0, _react.makeResetStyles)({
+    display: 'block',
+    color: _reacttheme.tokens.colorNeutralForeground2,
+    ..._reacttheme.typographyStyles.caption1
+});
+const useTextStyles = (0, _react.makeStyles)({
+    beforeAlignToPrimary: {
+        gridColumnEnd: 'middle'
+    },
+    afterAlignToPrimary: {
+        gridColumnStart: 'middle'
+    },
+    body1: _reacttheme.typographyStyles.body1,
+    caption1: _reacttheme.typographyStyles.caption1,
+    subtitle2: _reacttheme.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: (0, _react.mergeClasses)(primaryTextBaseClassName, primaryTextSize, alignToPrimaryClassName),
+        optionalTextClassName: (0, _react.mergeClasses)(optionalTextBaseClassName, !presenceOnly && size === 'huge' && textStyles.body1, alignToPrimaryClassName)
+    };
+};

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Persona: function() {
+        return _Persona.Persona;
+    },
+    personaClassNames: function() {
+        return _Persona.personaClassNames;
+    },
+    renderPersona_unstable: function() {
+        return _Persona.renderPersona_unstable;
+    },
+    usePersonaBase_unstable: function() {
+        return _Persona.usePersonaBase_unstable;
+    },
+    usePersonaStyles_unstable: function() {
+        return _Persona.usePersonaStyles_unstable;
+    },
+    usePersona_unstable: function() {
+        return _Persona.usePersona_unstable;
+    }
+});
+const _Persona = require("./Persona");

node_modules/@fluentui/react-persona/lib-commonjs/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":";;;;;;;;;;;;eACEA,gBAAO;;;eACPC,0BAAiB;;;eACjBC,+BAAsB;;;eAGtBG,gCAAuB;;;eAFvBF,kCAAyB;;;eACzBC,4BAAmB;;;yBAEd,YAAY"}

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"}

node_modules/@fluentui/react-persona/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@fluentui/react-persona",
+  "version": "9.7.2",
+  "description": "React components for building web experiences",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "./dist/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@fluentui/react-avatar": "^9.11.0",
+    "@fluentui/react-badge": "^9.5.1",
+    "@fluentui/react-shared-contexts": "^9.26.2",
+    "@fluentui/react-theme": "^9.2.1",
+    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@griffel/react": "^1.5.32",
+    "@swc/helpers": "^0.5.1"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
+  },
+  "beachball": {
+    "disallowedChangeTypes": [
+      "major",
+      "prerelease"
+    ]
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "*.md",
+    "dist/*.d.ts",
+    "lib",
+    "lib-commonjs"
+  ]
+}