feat: Fluent UI Outlook Lite + connections mockup

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