feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-skeleton/lib/components/Skeleton/Skeleton.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useSkeleton_unstable } from './useSkeleton';
+import { renderSkeleton_unstable } from './renderSkeleton';
+import { useSkeletonStyles_unstable } from './useSkeletonStyles.styles';
+import { useSkeletonContextValues } from './useSkeletonContextValues';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Skeleton component - TODO: add more docs
+ */ export const Skeleton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useSkeleton_unstable(props, ref);
+    const contextValues = useSkeletonContextValues(state);
+    useSkeletonStyles_unstable(state);
+    useCustomStyleHook_unstable('useSkeletonStyles_unstable')(state);
+    return renderSkeleton_unstable(state, contextValues);
+});
+Skeleton.displayName = 'Skeleton';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSkeleton_unstable } from './useSkeleton';\nimport { renderSkeleton_unstable } from './renderSkeleton';\nimport { useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\nimport { useSkeletonContextValues } from './useSkeletonContextValues';\nimport type { SkeletonProps } from './Skeleton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Skeleton component - TODO: add more docs\n */\nexport const Skeleton: ForwardRefComponent<SkeletonProps> = React.forwardRef((props, ref) => {\n  const state = useSkeleton_unstable(props, ref);\n  const contextValues = useSkeletonContextValues(state);\n\n  useSkeletonStyles_unstable(state);\n  useCustomStyleHook_unstable('useSkeletonStyles_unstable')(state);\n\n  return renderSkeleton_unstable(state, contextValues);\n});\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["React","useSkeleton_unstable","renderSkeleton_unstable","useSkeletonStyles_unstable","useSkeletonContextValues","useCustomStyleHook_unstable","Skeleton","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AACxE,SAASC,wBAAwB,QAAQ,6BAA6B;AAGtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAC3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * Skeleton base state, excluding design-related state like animation and appearance.
+ */ export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Skeleton/Skeleton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SkeletonContextValue } from '../../contexts/index';\n\nexport type SkeletonSlots = {\n  /**\n   * The root slot of the `Skeleton` is the container that will contain the slots that make up a `Skeleton`\n   * and any data that the `Skeleton` will load. The default html element is a `div`.\n   */\n  root: NonNullable<Slot<'div', 'span'>>;\n};\n\n/**\n * Sizes for the SkeletonItem\n */\nexport type SkeletonItemSize =\n  | 8\n  | 12\n  | 14\n  | 16\n  | 20\n  | 22\n  | 24\n  | 28\n  | 32\n  | 36\n  | 40\n  | 48\n  | 52\n  | 56\n  | 64\n  | 72\n  | 92\n  | 96\n  | 120\n  | 128;\n\n/**\n * Skeleton Props\n */\nexport type SkeletonProps = Omit<ComponentProps<Partial<SkeletonSlots>>, 'width'> & {\n  /**\n   * The animation type for the Skeleton\n   * @defaultValue wave\n   */\n  animation?: 'wave' | 'pulse';\n\n  /**\n   * Sets the appearance of the Skeleton.\n   * @defaultValue opaque\n   */\n  appearance?: 'opaque' | 'translucent';\n\n  /**\n   * Sets the width value of the skeleton wrapper.\n   * @defaultValue 100%\n   * @deprecated Use `className` prop to set width\n   */\n  width?: number | string;\n\n  /**\n   * Sets the size of the SkeletonItems inside the Skeleton in pixels.\n   * Size is restricted to a limited set of values recommended for most uses (see SkeletonItemSize).\n   * This value can be overridden by the individual SkeletonItem's `size` prop.\n   */\n  size?: SkeletonItemSize;\n\n  /**\n   * Sets the shape of the SkeletonItems inside the Skeleton.\n   * This value can be overridden by the individual SkeletonItem's `shape` prop.\n   */\n  shape?: 'circle' | 'square' | 'rectangle';\n};\n\n/**\n * Skeleton base props, excluding design-related props like animation and appearance.\n */\nexport type SkeletonBaseProps = Omit<SkeletonProps, 'animation' | 'appearance'>;\n\nexport type SkeletonContextValues = {\n  skeletonGroup: SkeletonContextValue;\n};\n\n/**\n * State used in rendering Skeleton\n */\nexport type SkeletonState = ComponentState<SkeletonSlots> &\n  Required<Pick<SkeletonProps, 'animation' | 'appearance'>> &\n  Pick<SkeletonProps, 'size' | 'shape'>;\n\n/**\n * Skeleton base state, excluding design-related state like animation and appearance.\n */\nexport type SkeletonBaseState = Omit<SkeletonState, 'animation' | 'appearance' | 'size' | 'shape'>;\n"],"names":[],"mappings":"AAyFA;;CAEC,GACD,WAAmG"}

node_modules/@fluentui/react-skeleton/lib/components/Skeleton/index.js

@@ -0,0 +1,5 @@
+export { Skeleton } from './Skeleton';
+export { renderSkeleton_unstable } from './renderSkeleton';
+export { useSkeleton_unstable, useSkeletonBase_unstable } from './useSkeleton';
+export { useSkeletonContextValues } from './useSkeletonContextValues';
+export { skeletonClassNames, useSkeletonStyles_unstable } from './useSkeletonStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Skeleton/index.ts"],"sourcesContent":["export { Skeleton } from './Skeleton';\nexport type {\n  SkeletonBaseProps,\n  SkeletonBaseState,\n  SkeletonContextValues,\n  SkeletonItemSize,\n  SkeletonProps,\n  SkeletonSlots,\n  SkeletonState,\n} from './Skeleton.types';\nexport { renderSkeleton_unstable } from './renderSkeleton';\nexport { useSkeleton_unstable, useSkeletonBase_unstable } from './useSkeleton';\nexport { useSkeletonContextValues } from './useSkeletonContextValues';\nexport { skeletonClassNames, useSkeletonStyles_unstable } from './useSkeletonStyles.styles';\n"],"names":["Skeleton","renderSkeleton_unstable","useSkeleton_unstable","useSkeletonBase_unstable","useSkeletonContextValues","skeletonClassNames","useSkeletonStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAUtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,EAAEC,wBAAwB,QAAQ,gBAAgB;AAC/E,SAASC,wBAAwB,QAAQ,6BAA6B;AACtE,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

node_modules/@fluentui/react-skeleton/lib/components/Skeleton/renderSkeleton.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { SkeletonContextProvider } from '../../contexts/SkeletonContext';
+/**
+ * Render the final JSX of Skeleton
+ */ export const renderSkeleton_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(SkeletonContextProvider, {
+        value: contextValues.skeletonGroup,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

node_modules/@fluentui/react-skeleton/lib/components/Skeleton/renderSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Skeleton/renderSkeleton.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 { SkeletonContextProvider } from '../../contexts/SkeletonContext';\nimport type { SkeletonContextValues, SkeletonSlots, SkeletonState } from './Skeleton.types';\n\n/**\n * Render the final JSX of Skeleton\n */\nexport const renderSkeleton_unstable = (state: SkeletonState, contextValues: SkeletonContextValues): JSXElement => {\n  assertSlots<SkeletonSlots>(state);\n\n  return (\n    <SkeletonContextProvider value={contextValues.skeletonGroup}>\n      <state.root />\n    </SkeletonContextProvider>\n  );\n};\n"],"names":["assertSlots","SkeletonContextProvider","renderSkeleton_unstable","state","contextValues","value","skeletonGroup","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,uBAAuB,QAAQ,iCAAiC;AAGzE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DJ,YAA2BG;IAE3B,qBACE,KAACF;QAAwBI,OAAOD,cAAcE,aAAa;kBACzD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

node_modules/@fluentui/react-skeleton/lib/components/Skeleton/useSkeleton.js

@@ -0,0 +1,45 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useSkeletonContext } from '../../contexts/SkeletonContext';
+/**
+ * Create the state required to render Skeleton.
+ *
+ * The returned state can be modified with hooks such as useSkeletonStyles_unstable,
+ * before being passed to renderSkeleton_unstable.
+ *
+ * @param props - props from this instance of Skeleton
+ * @param ref - reference to root HTMLElement of Skeleton
+ */ export const useSkeleton_unstable = (props, ref)=>{
+    const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();
+    const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size, shape, ...baseProps } = props;
+    const baseState = useSkeletonBase_unstable(baseProps, ref);
+    return {
+        ...baseState,
+        animation,
+        appearance,
+        size,
+        shape
+    };
+};
+/**
+ * Base hook for Skeleton component, which manages state related to slots structure and ARIA attributes.
+ *
+ * @param props - User provided props to the Skeleton component.
+ * @param ref - User provided ref to be passed to the Skeleton component.
+ */ export const useSkeletonBase_unstable = (props, ref)=>{
+    const root = slot.always(getIntrinsicElementProps('div', {
+        ref,
+        role: 'progressbar',
+        'aria-busy': true,
+        ...props
+    }), {
+        elementType: 'div'
+    });
+    return {
+        components: {
+            root: 'div'
+        },
+        root
+    };
+};

node_modules/@fluentui/react-skeleton/lib/components/Skeleton/useSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SkeletonBaseProps, SkeletonBaseState, SkeletonProps, SkeletonState } from './Skeleton.types';\nimport { useSkeletonContext } from '../../contexts/SkeletonContext';\n\n/**\n * Create the state required to render Skeleton.\n *\n * The returned state can be modified with hooks such as useSkeletonStyles_unstable,\n * before being passed to renderSkeleton_unstable.\n *\n * @param props - props from this instance of Skeleton\n * @param ref - reference to root HTMLElement of Skeleton\n */\nexport const useSkeleton_unstable = (props: SkeletonProps, ref: React.Ref<HTMLElement>): SkeletonState => {\n  const { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n  const {\n    animation = contextAnimation ?? 'wave',\n    appearance = contextAppearance ?? 'opaque',\n    size,\n    shape,\n    ...baseProps\n  } = props;\n\n  const baseState = useSkeletonBase_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 Skeleton component, which manages state related to slots structure and ARIA attributes.\n *\n * @param props - User provided props to the Skeleton component.\n * @param ref - User provided ref to be passed to the Skeleton component.\n */\nexport const useSkeletonBase_unstable = (\n  props: SkeletonBaseProps,\n  ref: React.Ref<HTMLDivElement>,\n): SkeletonBaseState => {\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      ref,\n      role: 'progressbar',\n      'aria-busy': true,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n  return { components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","baseProps","baseState","useSkeletonBase_unstable","root","always","role","elementType","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,GAAGP;IACvE,MAAM,EACJI,YAAYC,6BAAAA,8BAAAA,mBAAoB,MAAM,EACtCC,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CC,IAAI,EACJC,KAAK,EACL,GAAGC,WACJ,GAAGR;IAEJ,MAAMS,YAAYC,yBAAyBF,WAAWP;IAEtD,OAAO;QACL,GAAGQ,SAAS;QACZP;QACAE;QACAE;QACAC;IACF;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,2BAA2B,CACtCV,OACAC;IAEA,MAAMU,OAAOd,KAAKe,MAAM,CACtBhB,yBAAyB,OAAO;QAC9BK;QACAY,MAAM;QACN,aAAa;QACb,GAAGb,KAAK;IACV,IACA;QAAEc,aAAa;IAAM;IAEvB,OAAO;QAAEC,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AAC7C,EAAE"}

node_modules/@fluentui/react-skeleton/lib/components/Skeleton/useSkeletonContextValues.js

@@ -0,0 +1,19 @@
+'use client';
+import * as React from 'react';
+export const useSkeletonContextValues = (state)=>{
+    const { animation, appearance, size, shape } = state;
+    const skeletonGroup = React.useMemo(()=>({
+            animation,
+            appearance,
+            size,
+            shape
+        }), [
+        animation,
+        appearance,
+        size,
+        shape
+    ]);
+    return {
+        skeletonGroup
+    };
+};

node_modules/@fluentui/react-skeleton/lib/components/Skeleton/useSkeletonContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Skeleton/useSkeletonContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { SkeletonContextValues, SkeletonState } from '../Skeleton';\n\nexport const useSkeletonContextValues = (state: SkeletonState): SkeletonContextValues => {\n  const { animation, appearance, size, shape } = state;\n\n  const skeletonGroup = React.useMemo(\n    () => ({\n      animation,\n      appearance,\n      size,\n      shape,\n    }),\n    [animation, appearance, size, shape],\n  );\n\n  return { skeletonGroup };\n};\n"],"names":["React","useSkeletonContextValues","state","animation","appearance","size","shape","skeletonGroup","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,2BAA2B,CAACC;IACvC,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,MAAMK,gBAAgBP,MAAMQ,OAAO,CACjC,IAAO,CAAA;YACLL;YACAC;YACAC;YACAC;QACF,CAAA,GACA;QAACH;QAAWC;QAAYC;QAAMC;KAAM;IAGtC,OAAO;QAAEC;IAAc;AACzB,EAAE"}

node_modules/@fluentui/react-skeleton/lib/components/Skeleton/useSkeletonStyles.styles.js

@@ -0,0 +1,23 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+export const skeletonClassNames = {
+  root: 'fui-Skeleton'
+};
+const useStyles = /*#__PURE__*/__styles({
+  blockStyling: {
+    mc9l5x: "ftgm304"
+  }
+}, {
+  d: [".ftgm304{display:block;}"]
+});
+/**
+ * Apply styling to the Skeleton slots based on the state
+ */
+export const useSkeletonStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-skeleton/lib/components/Skeleton/useSkeletonStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","mc9l5x","d","useSkeletonStyles_unstable","state","styles","className","as"],"sources":["useSkeletonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const skeletonClassNames = {\n    root: 'fui-Skeleton'\n};\nconst useStyles = makeStyles({\n    blockStyling: {\n        display: 'block'\n    }\n});\n/**\n * Apply styling to the Skeleton slots based on the state\n */ export const useSkeletonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAK,YAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,kBAAkB,CAACC,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACS,EAAE,KAAK,MAAM,IAAIF,MAAM,CAACL,YAAY,EAAEI,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EACnI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-skeleton/lib/components/Skeleton/useSkeletonStyles.styles.raw.js

@@ -0,0 +1,18 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const skeletonClassNames = {
+    root: 'fui-Skeleton'
+};
+const useStyles = makeStyles({
+    blockStyling: {
+        display: 'block'
+    }
+});
+/**
+ * Apply styling to the Skeleton slots based on the state
+ */ export const useSkeletonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-skeleton/lib/components/Skeleton/useSkeletonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Skeleton/useSkeletonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonSlots, SkeletonState } from './Skeleton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nexport const skeletonClassNames: SlotClassNames<SkeletonSlots> = {\n  root: 'fui-Skeleton',\n};\n\nconst useStyles = makeStyles({\n  blockStyling: {\n    display: 'block',\n  },\n});\n\n/**\n * Apply styling to the Skeleton slots based on the state\n */\nexport const useSkeletonStyles_unstable = (state: SkeletonState): SkeletonState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    skeletonClassNames.root,\n    state.root.as === 'span' && styles.blockStyling,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","display","useSkeletonStyles_unstable","state","styles","className","as"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BK,cAAc;QACZC,SAAS;IACX;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASL;IAEfI,MAAML,IAAI,CAACO,SAAS,GAAGT,aACrBC,mBAAmBC,IAAI,EACvBK,MAAML,IAAI,CAACQ,EAAE,KAAK,UAAUF,OAAOJ,YAAY,EAC/CG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}

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

@@ -0,0 +1,13 @@
+'use client';
+import * as React from 'react';
+import { useSkeletonItem_unstable } from './useSkeletonItem';
+import { renderSkeletonItem_unstable } from './renderSkeletonItem';
+import { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+export const SkeletonItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useSkeletonItem_unstable(props, ref);
+    useSkeletonItemStyles_unstable(state);
+    useCustomStyleHook_unstable('useSkeletonItemStyles_unstable')(state);
+    return renderSkeletonItem_unstable(state);
+});
+SkeletonItem.displayName = 'SkeletonItem';

node_modules/@fluentui/react-skeleton/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAGhF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CL,+BAA+BM;IAC/BL,4BAA4B,kCAAkCK;IAE9D,OAAOP,4BAA4BO;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * SkeletonItem base state, excluding design-related state like animation, appearance, size, and shape.
+ */ export { };

node_modules/@fluentui/react-skeleton/lib/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/components/SkeletonItem/index.js

@@ -0,0 +1,4 @@
+export { SkeletonItem } from './SkeletonItem';
+export { renderSkeletonItem_unstable } from './renderSkeletonItem';
+export { useSkeletonItem_unstable, useSkeletonItemBase_unstable } from './useSkeletonItem';
+export { skeletonItemClassNames, useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';

node_modules/@fluentui/react-skeleton/lib/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":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAQ9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

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

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of SkeletonItem
+ */ export const renderSkeletonItem_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

node_modules/@fluentui/react-skeleton/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -0,0 +1,43 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useSkeletonContext } from '../../contexts/SkeletonContext';
+/**
+ * Create the state required to render SkeletonItem.
+ *
+ * The returned state can be modified with hooks such as useSkeletonItemStyles_unstable,
+ * before being passed to renderSkeletonItem_unstable.
+ *
+ * @param props - props from this instance of SkeletonItem
+ * @param ref - reference to root HTMLElement of SkeletonItem
+ */ export const useSkeletonItem_unstable = (props, ref)=>{
+    const { animation: contextAnimation, appearance: contextAppearance, size: contextSize, shape: contextShape } = 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
+    };
+};
+/**
+ * Base hook for SkeletonItem component, which manages state related to slots structure.
+ *
+ * @param props - User provided props to the SkeletonItem component.
+ * @param ref - User provided ref to be passed to the SkeletonItem component.
+ */ export const useSkeletonItemBase_unstable = (props, ref)=>{
+    const root = slot.always(getIntrinsicElementProps('div', {
+        ref,
+        ...props
+    }), {
+        elementType: 'div'
+    });
+    return {
+        components: {
+            root: 'div'
+        },
+        root
+    };
+};

node_modules/@fluentui/react-skeleton/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,kBAAkB,QAAQ,iCAAiC;AAQpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EACJC,WAAWC,gBAAgB,EAC3BC,YAAYC,iBAAiB,EAC7BC,MAAMC,WAAW,EACjBC,OAAOC,YAAY,EACpB,GAAGX;IACJ,MAAM,EACJI,YAAYC,6BAAAA,8BAAAA,mBAAoB,MAAM,EACtCC,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAC1CC,OAAOC,wBAAAA,yBAAAA,cAAe,EAAE,EACxBC,QAAQC,yBAAAA,0BAAAA,eAAgB,WAAW,EACnC,GAAGC,WACJ,GAAGV;IAEJ,MAAMW,YAAYC,6BAA6BF,WAAWT;IAE1D,OAAO;QACL,GAAGU,SAAS;QACZT;QACAE;QACAE;QACAE;IACF;AACF,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMI,+BAA+B,CAC1CZ,OACAC;IAEA,MAAMY,OAAOhB,KAAKiB,MAAM,CACtBlB,yBAAyB,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/components/SkeletonItem/useSkeletonItemStyles.styles.js

@@ -0,0 +1,274 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export 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__*/__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__*/__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__*/__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__*/__styles({
+  root: {
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "f5q2cvs"
+  }
+}, {
+  d: [[".f5q2cvs{border-radius:50%;}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the SkeletonItem slots based on the state
+ */
+export 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 = 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/components/SkeletonItem/useSkeletonItemStyles.styles.raw.js

@@ -0,0 +1,249 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export 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 = 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: tokens.colorNeutralStencil1,
+        '::after': {
+            animationName: skeletonWaveAnimation,
+            backgroundImage: `linear-gradient(
+        to right,
+        ${tokens.colorNeutralStencil1} 0%,
+        ${tokens.colorNeutralStencil2} 50%,
+        ${tokens.colorNeutralStencil1} 100%)`,
+            transform: 'translate(-100%)',
+            '@media screen and (forced-colors: active)': {
+                backgroundColor: 'WindowText'
+            }
+        }
+    },
+    pulse: {
+        '::after': {
+            animationName: skeletonPulseAnimation,
+            animationDuration: '1s',
+            backgroundColor: tokens.colorNeutralStencil1
+        }
+    },
+    translucent: {
+        backgroundColor: tokens.colorNeutralStencil1Alpha,
+        '::after': {
+            backgroundImage: `linear-gradient(
+      to right,
+      transparent 0%,
+      ${tokens.colorNeutralStencil1Alpha} 50%,
+      transparent 100%)`
+        }
+    },
+    translucentPulse: {
+        backgroundColor: 'none',
+        '::after': {
+            backgroundColor: tokens.colorNeutralStencil1Alpha
+        }
+    },
+    blockStyling: {
+        display: 'block'
+    }
+});
+const useRectangleStyles = 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 = 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 = makeStyles({
+    root: {
+        borderRadius: '50%'
+    }
+});
+/**
+ * Apply styling to the SkeletonItem slots based on the state
+ */ export 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 = 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;
+};