feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-skeleton/lib-commonjs/components/SkeletonItem/SkeletonItem.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SkeletonItem", {
+    enumerable: true,
+    get: function() {
+        return SkeletonItem;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useSkeletonItem = require("./useSkeletonItem");
+const _renderSkeletonItem = require("./renderSkeletonItem");
+const _useSkeletonItemStylesstyles = require("./useSkeletonItemStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const SkeletonItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useSkeletonItem.useSkeletonItem_unstable)(props, ref);
+    (0, _useSkeletonItemStylesstyles.useSkeletonItemStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSkeletonItemStyles_unstable')(state);
+    return (0, _renderSkeletonItem.renderSkeletonItem_unstable)(state);
+});
+SkeletonItem.displayName = 'SkeletonItem';

node_modules/@fluentui/react-skeleton/lib-commonjs/components/SkeletonItem/SkeletonItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SkeletonItem/SkeletonItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSkeletonItem_unstable } from './useSkeletonItem';\nimport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nimport { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\nimport type { SkeletonItemProps } from './SkeletonItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nexport const SkeletonItem: ForwardRefComponent<SkeletonItemProps> = React.forwardRef((props, ref) => {\n  const state = useSkeletonItem_unstable(props, ref);\n\n  useSkeletonItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useSkeletonItemStyles_unstable')(state);\n\n  return renderSkeletonItem_unstable(state);\n});\n\nSkeletonItem.displayName = 'SkeletonItem';\n"],"names":["React","useSkeletonItem_unstable","renderSkeletonItem_unstable","useSkeletonItemStyles_unstable","useCustomStyleHook_unstable","SkeletonItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCACU,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;qCAGpC,kCAAkC;AAEvE,MAAMK,eAAAA,WAAAA,GAAuDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQR,yCAAAA,EAAyBM,OAAOC;QAE9CL,2DAAAA,EAA+BM;QAC/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOP,+CAAAA,EAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

node_modules/@fluentui/react-skeleton/lib-commonjs/components/SkeletonItem/SkeletonItem.types.js

@@ -0,0 +1,6 @@
+/**
+ * SkeletonItem base state, excluding design-related state like animation, appearance, size, and shape.
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-skeleton/lib-commonjs/components/SkeletonItem/SkeletonItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SkeletonItem/SkeletonItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SkeletonProps } from '../Skeleton/Skeleton.types';\n\nexport type SkeletonItemSlots = {\n  root: Slot<'div', 'span'>;\n};\n\n/**\n * SkeletonItem Props\n */\nexport type SkeletonItemProps = ComponentProps<SkeletonItemSlots> &\n  Pick<SkeletonProps, 'size' | 'shape'> & {\n    /**\n     * Sets the animation of the SkeletonItem\n     * @default wave\n     */\n    animation?: 'wave' | 'pulse';\n\n    /**\n     * Sets the appearance of the SkeletonItem\n     * @default opaque\n     */\n    appearance?: 'opaque' | 'translucent';\n  };\n\n/**\n * SkeletonItem base props, excluding design-related props like animation, appearance, size, and shape.\n */\nexport type SkeletonItemBaseProps = Omit<SkeletonItemProps, 'animation' | 'appearance' | 'size' | 'shape'>;\n\n/**\n * State used in rendering SkeletonItem\n */\nexport type SkeletonItemState = ComponentState<SkeletonItemSlots> &\n  Required<Pick<SkeletonItemProps, 'animation' | 'appearance' | 'size' | 'shape'>>;\n\n/**\n * SkeletonItem base state, excluding design-related state like animation, appearance, size, and shape.\n */\nexport type SkeletonItemBaseState = Omit<SkeletonItemState, 'animation' | 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAA2G"}

node_modules/@fluentui/react-skeleton/lib-commonjs/components/SkeletonItem/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, {
+    SkeletonItem: function() {
+        return _SkeletonItem.SkeletonItem;
+    },
+    renderSkeletonItem_unstable: function() {
+        return _renderSkeletonItem.renderSkeletonItem_unstable;
+    },
+    skeletonItemClassNames: function() {
+        return _useSkeletonItemStylesstyles.skeletonItemClassNames;
+    },
+    useSkeletonItemBase_unstable: function() {
+        return _useSkeletonItem.useSkeletonItemBase_unstable;
+    },
+    useSkeletonItemStyles_unstable: function() {
+        return _useSkeletonItemStylesstyles.useSkeletonItemStyles_unstable;
+    },
+    useSkeletonItem_unstable: function() {
+        return _useSkeletonItem.useSkeletonItem_unstable;
+    }
+});
+const _SkeletonItem = require("./SkeletonItem");
+const _renderSkeletonItem = require("./renderSkeletonItem");
+const _useSkeletonItem = require("./useSkeletonItem");
+const _useSkeletonItemStylesstyles = require("./useSkeletonItemStyles.styles");

node_modules/@fluentui/react-skeleton/lib-commonjs/components/SkeletonItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SkeletonItem/index.ts"],"sourcesContent":["export { SkeletonItem } from './SkeletonItem';\nexport type {\n  SkeletonItemBaseProps,\n  SkeletonItemBaseState,\n  SkeletonItemProps,\n  SkeletonItemSlots,\n  SkeletonItemState,\n} from './SkeletonItem.types';\nexport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nexport { useSkeletonItem_unstable, useSkeletonItemBase_unstable } from './useSkeletonItem';\nexport { skeletonItemClassNames, useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\n"],"names":["SkeletonItem","renderSkeletonItem_unstable","useSkeletonItem_unstable","useSkeletonItemBase_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAQZC,+CAA2B;;;eAE3BG,mDAAsB;;;eADID,6CAA4B;;;eAC9BE,2DAA8B;;;eADtDH,yCAAwB;;;8BATJ,iBAAiB;oCAQF,uBAAuB;iCACI,oBAAoB;6CACpB,iCAAiC"}

node_modules/@fluentui/react-skeleton/lib-commonjs/components/SkeletonItem/renderSkeletonItem.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderSkeletonItem_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderSkeletonItem_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderSkeletonItem_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
+};

node_modules/@fluentui/react-skeleton/lib-commonjs/components/SkeletonItem/renderSkeletonItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SkeletonItem/renderSkeletonItem.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 { SkeletonItemBaseState, SkeletonItemSlots } from './SkeletonItem.types';\n\n/**\n * Render the final JSX of SkeletonItem\n */\nexport const renderSkeletonItem_unstable = (state: SkeletonItemBaseState): JSXElement => {\n  assertSlots<SkeletonItemSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderSkeletonItem_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,8BAA8B,CAACC;QAC1CF,2BAAAA,EAA+BE;IAE/B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

node_modules/@fluentui/react-skeleton/lib-commonjs/components/SkeletonItem/useSkeletonItem.js

@@ -0,0 +1,49 @@
+'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, {
+    useSkeletonItemBase_unstable: function() {
+        return useSkeletonItemBase_unstable;
+    },
+    useSkeletonItem_unstable: function() {
+        return useSkeletonItem_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _SkeletonContext = require("../../contexts/SkeletonContext");
+const useSkeletonItem_unstable = (props, ref)=>{
+    const { animation: contextAnimation, appearance: contextAppearance, size: contextSize, shape: contextShape } = (0, _SkeletonContext.useSkeletonContext)();
+    const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size = contextSize !== null && contextSize !== void 0 ? contextSize : 16, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'rectangle', ...baseProps } = props;
+    const baseState = useSkeletonItemBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        animation,
+        appearance,
+        size,
+        shape
+    };
+};
+const useSkeletonItemBase_unstable = (props, ref)=>{
+    const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+        ref,
+        ...props
+    }), {
+        elementType: 'div'
+    });
+    return {
+        components: {
+            root: 'div'
+        },
+        root
+    };
+};

node_modules/@fluentui/react-skeleton/lib-commonjs/components/SkeletonItem/useSkeletonItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\nimport type {\n  SkeletonItemBaseProps,\n  SkeletonItemBaseState,\n  SkeletonItemProps,\n  SkeletonItemState,\n} from './SkeletonItem.types';\n\n/**\n * Create the state required to render SkeletonItem.\n *\n * The returned state can be modified with hooks such as useSkeletonItemStyles_unstable,\n * before being passed to renderSkeletonItem_unstable.\n *\n * @param props - props from this instance of SkeletonItem\n * @param ref - reference to root HTMLElement of SkeletonItem\n */\nexport const useSkeletonItem_unstable = (props: SkeletonItemProps, ref: React.Ref<HTMLElement>): SkeletonItemState => {\n  const {\n    animation: contextAnimation,\n    appearance: contextAppearance,\n    size: contextSize,\n    shape: contextShape,\n  } = useSkeletonContext();\n  const {\n    animation = contextAnimation ?? 'wave',\n    appearance = contextAppearance ?? 'opaque',\n    size = contextSize ?? 16,\n    shape = contextShape ?? 'rectangle',\n    ...baseProps\n  } = props;\n\n  const baseState = useSkeletonItemBase_unstable(baseProps, ref as React.Ref<HTMLDivElement>);\n\n  return {\n    ...baseState,\n    animation,\n    appearance,\n    size,\n    shape,\n  };\n};\n\n/**\n * Base hook for SkeletonItem component, which manages state related to slots structure.\n *\n * @param props - User provided props to the SkeletonItem component.\n * @param ref - User provided ref to be passed to the SkeletonItem component.\n */\nexport const useSkeletonItemBase_unstable = (\n  props: SkeletonItemBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): SkeletonItemBaseState => {\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      ref,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n  return { components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","contextSize","shape","contextShape","baseProps","baseState","useSkeletonItemBase_unstable","root","always","elementType","components"],"mappings":"AAAA;;;;;;;;;;;;IAqDaiB,4BAAAA;;;4BAhCAb;;;;;iEAnBU,QAAQ;gCACgB,4BAA4B;iCACxC,iCAAiC;AAiB7D,MAAMA,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EACJC,WAAWC,gBAAgB,EAC3BC,YAAYC,iBAAiB,EAC7BC,MAAMC,WAAW,EACjBC,OAAOC,YAAY,EACpB,GAAGX,uCAAAA;IACJ,MAAM,EACJI,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EACtCC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAC1CC,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,EAAE,EACxBC,QAAQC,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,eAAgB,WAAW,EACnC,GAAGC,WACJ,GAAGV;IAEJ,MAAMW,YAAYC,6BAA6BF,WAAWT;IAE1D,OAAO;QACL,GAAGU,SAAS;QACZT;QACAE;QACAE;QACAE;IACF;AACF,EAAE;AAQK,qCAAqC,CAC1CR,OACAC;IAEA,MAAMY,OAAOhB,oBAAAA,CAAKiB,MAAM,KACtBlB,wCAAAA,EAAyB,OAAO;QAC9BK;QACA,GAAGD,KAAK;IACV,IACA;QAAEe,aAAa;IAAM;IAEvB,OAAO;QAAEC,YAAY;YAAEH,MAAM;QAAM;QAAGA;IAAK;AAC7C,EAAE"}

node_modules/@fluentui/react-skeleton/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.styles.js

@@ -0,0 +1,413 @@
+'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, {
+    skeletonItemClassNames: function() {
+        return skeletonItemClassNames;
+    },
+    useSkeletonItemStyles_unstable: function() {
+        return useSkeletonItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const skeletonItemClassNames = {
+    root: 'fui-SkeletonItem'
+};
+const skeletonWaveAnimation = {
+    to: {
+        transform: 'translate(100%)'
+    }
+};
+const skeletonPulseAnimation = {
+    '0%': {
+        opacity: '1'
+    },
+    '50%': {
+        opacity: '0.4'
+    },
+    '100%': {
+        opacity: '1'
+    }
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        qhf8xq: "f10pi13n",
+        B68tc82: 0,
+        Bmxbyg5: 0,
+        Bpg54ce: "f1a3p1vp",
+        Bsft5z2: "f13zj6fq",
+        ap17g6: "f2gz7yw",
+        E3zdtr: "f1mdlcz9",
+        By385i5: 0,
+        Eqx8gd: 0,
+        B1piin3: 0,
+        bn5sak: 0,
+        B58onuk: "f1nt53hs",
+        s9ouvv: "f18xs7ez",
+        xr36ep: "ffm3629",
+        Bitv4sc: "f1f9zsvm",
+        Gt9ir8: "f1evo4vk",
+        Crt7la: "f18va1k3"
+    },
+    wave: {
+        De3pzq: "f1gjxg63",
+        Br128sd: [
+            "f3fo419",
+            "f6m9r4"
+        ],
+        h62rwi: [
+            "ftnv2js",
+            "f12jzhyt"
+        ],
+        b1kco5: [
+            "fig1c6l",
+            "f1rv5y9h"
+        ],
+        Iqrfzq: "f1xjc3a9"
+    },
+    pulse: {
+        Br128sd: "f171zwvm",
+        xr36ep: "fs3pcyf",
+        Bjyk6c5: "f1yu5riq"
+    },
+    translucent: {
+        De3pzq: "f162mh4z",
+        h62rwi: [
+            "flvf4r0",
+            "f1uek97b"
+        ]
+    },
+    translucentPulse: {
+        De3pzq: "flu3bqm",
+        Bjyk6c5: "fxucc0w"
+    },
+    blockStyling: {
+        mc9l5x: "ftgm304"
+    }
+}, {
+    d: [
+        ".f10pi13n{position:relative;}",
+        [
+            ".f1a3p1vp{overflow:hidden;}",
+            {
+                p: -1
+            }
+        ],
+        ".f13zj6fq::after{content:\"\";}",
+        ".f2gz7yw::after{display:block;}",
+        ".f1mdlcz9::after{position:absolute;}",
+        [
+            ".f1nt53hs::after{inset:0;}",
+            {
+                p: -1
+            }
+        ],
+        ".f18xs7ez::after{animation-iteration-count:infinite;}",
+        ".ffm3629::after{animation-duration:3s;}",
+        ".f1f9zsvm::after{animation-timing-function:ease-in-out;}",
+        ".f1gjxg63{background-color:var(--colorNeutralStencil1);}",
+        ".f3fo419::after{animation-name:f1efwx7q;}",
+        ".f6m9r4::after{animation-name:f1kkgpz1;}",
+        ".ftnv2js::after{background-image:linear-gradient(\n        to right,\n        var(--colorNeutralStencil1) 0%,\n        var(--colorNeutralStencil2) 50%,\n        var(--colorNeutralStencil1) 100%);}",
+        ".f12jzhyt::after{background-image:linear-gradient(\n        to left,\n        var(--colorNeutralStencil1) 0%,\n        var(--colorNeutralStencil2) 50%,\n        var(--colorNeutralStencil1) 100%);}",
+        ".fig1c6l::after{transform:translate(-100%);}",
+        ".f1rv5y9h::after{transform:translate(100%);}",
+        ".f171zwvm::after{animation-name:f12o7gg6;}",
+        ".fs3pcyf::after{animation-duration:1s;}",
+        ".f1yu5riq::after{background-color:var(--colorNeutralStencil1);}",
+        ".f162mh4z{background-color:var(--colorNeutralStencil1Alpha);}",
+        ".flvf4r0::after{background-image:linear-gradient(\n      to right,\n      transparent 0%,\n      var(--colorNeutralStencil1Alpha) 50%,\n      transparent 100%);}",
+        ".f1uek97b::after{background-image:linear-gradient(\n      to left,\n      transparent 0%,\n      var(--colorNeutralStencil1Alpha) 50%,\n      transparent 100%);}",
+        ".flu3bqm{background-color:none;}",
+        ".fxucc0w::after{background-color:var(--colorNeutralStencil1Alpha);}",
+        ".ftgm304{display:block;}"
+    ],
+    m: [
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.f1evo4vk::after{animation-duration:0.01ms;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media screen and (prefers-reduced-motion: reduce){.f18va1k3::after{animation-iteration-count:1;}}",
+            {
+                m: "screen and (prefers-reduced-motion: reduce)"
+            }
+        ],
+        [
+            "@media screen and (forced-colors: active){.f1xjc3a9::after{background-color:WindowText;}}",
+            {
+                m: "screen and (forced-colors: active)"
+            }
+        ]
+    ],
+    k: [
+        "@keyframes f1efwx7q{to{transform:translate(100%);}}",
+        "@keyframes f1kkgpz1{to{transform:translate(-100%);}}",
+        "@keyframes f12o7gg6{0%{opacity:1;}50%{opacity:0.4;}100%{opacity:1;}}"
+    ]
+});
+const useRectangleStyles = /*#__PURE__*/ (0, _react.__styles)({
+    "8": {
+        Bqenvij: "f1x82gua"
+    },
+    "12": {
+        Bqenvij: "fvblgha"
+    },
+    "14": {
+        Bqenvij: "fuesxvb"
+    },
+    "16": {
+        Bqenvij: "fd461yt"
+    },
+    "20": {
+        Bqenvij: "fjamq6b"
+    },
+    "22": {
+        Bqenvij: "f50nw0v"
+    },
+    "24": {
+        Bqenvij: "frvgh55"
+    },
+    "28": {
+        Bqenvij: "fxldao9"
+    },
+    "32": {
+        Bqenvij: "f1d2rq10"
+    },
+    "36": {
+        Bqenvij: "f8ljn23"
+    },
+    "40": {
+        Bqenvij: "fbhnoac"
+    },
+    "48": {
+        Bqenvij: "ff2sm71"
+    },
+    "52": {
+        Bqenvij: "fltz6oj"
+    },
+    "56": {
+        Bqenvij: "fzki0ko"
+    },
+    "64": {
+        Bqenvij: "f16k9i2m"
+    },
+    "72": {
+        Bqenvij: "f1shusfg"
+    },
+    "92": {
+        Bqenvij: "f19zsq0h"
+    },
+    "96": {
+        Bqenvij: "fypu0ge"
+    },
+    "120": {
+        Bqenvij: "fjr5b71"
+    },
+    "128": {
+        Bqenvij: "fele2au"
+    },
+    root: {
+        a9b677: "fly5x3f",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "ff3glw6"
+    }
+}, {
+    d: [
+        ".f1x82gua{height:8px;}",
+        ".fvblgha{height:12px;}",
+        ".fuesxvb{height:14px;}",
+        ".fd461yt{height:16px;}",
+        ".fjamq6b{height:20px;}",
+        ".f50nw0v{height:22px;}",
+        ".frvgh55{height:24px;}",
+        ".fxldao9{height:28px;}",
+        ".f1d2rq10{height:32px;}",
+        ".f8ljn23{height:36px;}",
+        ".fbhnoac{height:40px;}",
+        ".ff2sm71{height:48px;}",
+        ".fltz6oj{height:52px;}",
+        ".fzki0ko{height:56px;}",
+        ".f16k9i2m{height:64px;}",
+        ".f1shusfg{height:72px;}",
+        ".f19zsq0h{height:92px;}",
+        ".fypu0ge{height:96px;}",
+        ".fjr5b71{height:120px;}",
+        ".fele2au{height:128px;}",
+        ".fly5x3f{width:100%;}",
+        [
+            ".ff3glw6{border-radius:4px;}",
+            {
+                p: -1
+            }
+        ]
+    ]
+});
+const useSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
+    "8": {
+        a9b677: "f1o3cbw4",
+        Bqenvij: "f1x82gua"
+    },
+    "12": {
+        a9b677: "frx94fk",
+        Bqenvij: "fvblgha"
+    },
+    "14": {
+        a9b677: "fz18fzn",
+        Bqenvij: "fuesxvb"
+    },
+    "16": {
+        a9b677: "fjw5fx7",
+        Bqenvij: "fd461yt"
+    },
+    "20": {
+        a9b677: "f64fuq3",
+        Bqenvij: "fjamq6b"
+    },
+    "22": {
+        a9b677: "f6zmzpu",
+        Bqenvij: "f50nw0v"
+    },
+    "24": {
+        a9b677: "fq4mcun",
+        Bqenvij: "frvgh55"
+    },
+    "28": {
+        a9b677: "f1w9dchk",
+        Bqenvij: "fxldao9"
+    },
+    "32": {
+        a9b677: "f1szoe96",
+        Bqenvij: "f1d2rq10"
+    },
+    "36": {
+        a9b677: "fpdz1er",
+        Bqenvij: "f8ljn23"
+    },
+    "40": {
+        a9b677: "feqmc2u",
+        Bqenvij: "fbhnoac"
+    },
+    "48": {
+        a9b677: "f124akge",
+        Bqenvij: "ff2sm71"
+    },
+    "52": {
+        a9b677: "f16130wi",
+        Bqenvij: "fltz6oj"
+    },
+    "56": {
+        a9b677: "f1u66zr1",
+        Bqenvij: "fzki0ko"
+    },
+    "64": {
+        a9b677: "fa9ln6p",
+        Bqenvij: "f16k9i2m"
+    },
+    "72": {
+        a9b677: "fhcae8x",
+        Bqenvij: "f1shusfg"
+    },
+    "92": {
+        a9b677: "f78o5r6",
+        Bqenvij: "f19zsq0h"
+    },
+    "96": {
+        a9b677: "f1kyr2gn",
+        Bqenvij: "fypu0ge"
+    },
+    "120": {
+        a9b677: "fwfqyga",
+        Bqenvij: "fjr5b71"
+    },
+    "128": {
+        a9b677: "f1iksgmy",
+        Bqenvij: "fele2au"
+    }
+}, {
+    d: [
+        ".f1o3cbw4{width:8px;}",
+        ".f1x82gua{height:8px;}",
+        ".frx94fk{width:12px;}",
+        ".fvblgha{height:12px;}",
+        ".fz18fzn{width:14px;}",
+        ".fuesxvb{height:14px;}",
+        ".fjw5fx7{width:16px;}",
+        ".fd461yt{height:16px;}",
+        ".f64fuq3{width:20px;}",
+        ".fjamq6b{height:20px;}",
+        ".f6zmzpu{width:22px;}",
+        ".f50nw0v{height:22px;}",
+        ".fq4mcun{width:24px;}",
+        ".frvgh55{height:24px;}",
+        ".f1w9dchk{width:28px;}",
+        ".fxldao9{height:28px;}",
+        ".f1szoe96{width:32px;}",
+        ".f1d2rq10{height:32px;}",
+        ".fpdz1er{width:36px;}",
+        ".f8ljn23{height:36px;}",
+        ".feqmc2u{width:40px;}",
+        ".fbhnoac{height:40px;}",
+        ".f124akge{width:48px;}",
+        ".ff2sm71{height:48px;}",
+        ".f16130wi{width:52px;}",
+        ".fltz6oj{height:52px;}",
+        ".f1u66zr1{width:56px;}",
+        ".fzki0ko{height:56px;}",
+        ".fa9ln6p{width:64px;}",
+        ".f16k9i2m{height:64px;}",
+        ".fhcae8x{width:72px;}",
+        ".f1shusfg{height:72px;}",
+        ".f78o5r6{width:92px;}",
+        ".f19zsq0h{height:92px;}",
+        ".f1kyr2gn{width:96px;}",
+        ".fypu0ge{height:96px;}",
+        ".fwfqyga{width:120px;}",
+        ".fjr5b71{height:120px;}",
+        ".f1iksgmy{width:128px;}",
+        ".fele2au{height:128px;}"
+    ]
+});
+const useCircleSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f5q2cvs"
+    }
+}, {
+    d: [
+        [
+            ".f5q2cvs{border-radius:50%;}",
+            {
+                p: -1
+            }
+        ]
+    ]
+});
+const useSkeletonItemStyles_unstable = (state)=>{
+    'use no memo';
+    const { animation, appearance, size, shape } = state;
+    const rootStyles = useStyles();
+    const rectStyles = useRectangleStyles();
+    const sizeStyles = useSizeStyles();
+    const circleStyles = useCircleSizeStyles();
+    state.root.className = (0, _react.mergeClasses)(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);
+    return state;
+};

node_modules/@fluentui/react-skeleton/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.styles.raw.js

@@ -0,0 +1,265 @@
+'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, {
+    skeletonItemClassNames: function() {
+        return skeletonItemClassNames;
+    },
+    useSkeletonItemStyles_unstable: function() {
+        return useSkeletonItemStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const skeletonItemClassNames = {
+    root: 'fui-SkeletonItem'
+};
+const skeletonWaveAnimation = {
+    to: {
+        transform: 'translate(100%)'
+    }
+};
+const skeletonPulseAnimation = {
+    '0%': {
+        opacity: '1'
+    },
+    '50%': {
+        opacity: '0.4'
+    },
+    '100%': {
+        opacity: '1'
+    }
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        position: 'relative',
+        overflow: 'hidden',
+        '::after': {
+            content: '""',
+            display: 'block',
+            position: 'absolute',
+            inset: '0',
+            animationIterationCount: 'infinite',
+            animationDuration: '3s',
+            animationTimingFunction: 'ease-in-out',
+            '@media screen and (prefers-reduced-motion: reduce)': {
+                animationDuration: '0.01ms',
+                animationIterationCount: '1'
+            }
+        }
+    },
+    wave: {
+        backgroundColor: _reacttheme.tokens.colorNeutralStencil1,
+        '::after': {
+            animationName: skeletonWaveAnimation,
+            backgroundImage: `linear-gradient(
+        to right,
+        ${_reacttheme.tokens.colorNeutralStencil1} 0%,
+        ${_reacttheme.tokens.colorNeutralStencil2} 50%,
+        ${_reacttheme.tokens.colorNeutralStencil1} 100%)`,
+            transform: 'translate(-100%)',
+            '@media screen and (forced-colors: active)': {
+                backgroundColor: 'WindowText'
+            }
+        }
+    },
+    pulse: {
+        '::after': {
+            animationName: skeletonPulseAnimation,
+            animationDuration: '1s',
+            backgroundColor: _reacttheme.tokens.colorNeutralStencil1
+        }
+    },
+    translucent: {
+        backgroundColor: _reacttheme.tokens.colorNeutralStencil1Alpha,
+        '::after': {
+            backgroundImage: `linear-gradient(
+      to right,
+      transparent 0%,
+      ${_reacttheme.tokens.colorNeutralStencil1Alpha} 50%,
+      transparent 100%)`
+        }
+    },
+    translucentPulse: {
+        backgroundColor: 'none',
+        '::after': {
+            backgroundColor: _reacttheme.tokens.colorNeutralStencil1Alpha
+        }
+    },
+    blockStyling: {
+        display: 'block'
+    }
+});
+const useRectangleStyles = (0, _react.makeStyles)({
+    root: {
+        width: '100%',
+        borderRadius: '4px'
+    },
+    8: {
+        height: '8px'
+    },
+    12: {
+        height: '12px'
+    },
+    14: {
+        height: '14px'
+    },
+    16: {
+        height: '16px'
+    },
+    20: {
+        height: '20px'
+    },
+    22: {
+        height: '22px'
+    },
+    24: {
+        height: '24px'
+    },
+    28: {
+        height: '28px'
+    },
+    32: {
+        height: '32px'
+    },
+    36: {
+        height: '36px'
+    },
+    40: {
+        height: '40px'
+    },
+    48: {
+        height: '48px'
+    },
+    52: {
+        height: '52px'
+    },
+    56: {
+        height: '56px'
+    },
+    64: {
+        height: '64px'
+    },
+    72: {
+        height: '72px'
+    },
+    92: {
+        height: '92px'
+    },
+    96: {
+        height: '96px'
+    },
+    120: {
+        height: '120px'
+    },
+    128: {
+        height: '128px'
+    }
+});
+const useSizeStyles = (0, _react.makeStyles)({
+    8: {
+        width: '8px',
+        height: '8px'
+    },
+    12: {
+        width: '12px',
+        height: '12px'
+    },
+    14: {
+        width: '14px',
+        height: '14px'
+    },
+    16: {
+        width: '16px',
+        height: '16px'
+    },
+    20: {
+        width: '20px',
+        height: '20px'
+    },
+    22: {
+        width: '22px',
+        height: '22px'
+    },
+    24: {
+        width: '24px',
+        height: '24px'
+    },
+    28: {
+        width: '28px',
+        height: '28px'
+    },
+    32: {
+        width: '32px',
+        height: '32px'
+    },
+    36: {
+        width: '36px',
+        height: '36px'
+    },
+    40: {
+        width: '40px',
+        height: '40px'
+    },
+    48: {
+        width: '48px',
+        height: '48px'
+    },
+    52: {
+        width: '52px',
+        height: '52px'
+    },
+    56: {
+        width: '56px',
+        height: '56px'
+    },
+    64: {
+        width: '64px',
+        height: '64px'
+    },
+    72: {
+        width: '72px',
+        height: '72px'
+    },
+    92: {
+        width: '92px',
+        height: '92px'
+    },
+    96: {
+        width: '96px',
+        height: '96px'
+    },
+    120: {
+        width: '120px',
+        height: '120px'
+    },
+    128: {
+        width: '128px',
+        height: '128px'
+    }
+});
+const useCircleSizeStyles = (0, _react.makeStyles)({
+    root: {
+        borderRadius: '50%'
+    }
+});
+const useSkeletonItemStyles_unstable = (state)=>{
+    'use no memo';
+    const { animation, appearance, size, shape } = state;
+    const rootStyles = useStyles();
+    const rectStyles = useRectangleStyles();
+    const sizeStyles = useSizeStyles();
+    const circleStyles = useCircleSizeStyles();
+    state.root.className = (0, _react.mergeClasses)(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);
+    return state;
+};