@fluentui/react-skeleton 9.5.0 → 9.7.0

package/CHANGELOG.md

@@ -1,18 +1,36 @@
 # Change Log - @fluentui/react-skeleton
 
-This log was last generated on Wed, 11 Mar 2026 09:20:37 GMT and should not be manually modified.
+This log was last generated on Thu, 26 Mar 2026 08:10:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.7.0)
+
+Thu, 26 Mar 2026 08:10:42 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.6.0..@fluentui/react-skeleton_v9.7.0)
+
+### Minor changes
+
+- feat: add base hooks for Skeleton ([PR #35809](https://github.com/microsoft/fluentui/pull/35809) by dmytrokirpa@microsoft.com)
+
+## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.6.0)
+
+Tue, 17 Mar 2026 07:57:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.5.0..@fluentui/react-skeleton_v9.6.0)
+
+### Minor changes
+
+- feat: add missing SkeletonItem sizes (14, 22, 52, 92) to match typography line-height scale ([PR #35863](https://github.com/microsoft/fluentui/pull/35863) by copilot@github.com)
+
 ## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.5.0)
 
-Wed, 11 Mar 2026 09:20:37 GMT 
+Wed, 11 Mar 2026 09:22:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.4.15..@fluentui/react-skeleton_v9.5.0)
 
 ### Minor changes
 
 - feat(react-skeleton): Add size and shape props to Skeleton component ([PR #35787](https://github.com/microsoft/fluentui/pull/35787) by v.kozlova13@gmail.com)
-- Bump @fluentui/react-field to v9.4.16 ([PR #35854](https://github.com/microsoft/fluentui/pull/35854) by beachball)
+- Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
 
 ## [9.4.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.4.15)
 

package/dist/index.d.ts

@@ -14,13 +14,23 @@ export declare const renderSkeleton_unstable: (state: SkeletonState, contextValu
 /**
  * Render the final JSX of SkeletonItem
  */
-export declare const renderSkeletonItem_unstable: (state: SkeletonItemState) => JSXElement;
+export declare const renderSkeletonItem_unstable: (state: SkeletonItemBaseState) => JSXElement;
 
 /**
  * Skeleton component - TODO: add more docs
  */
 export declare const Skeleton: ForwardRefComponent<SkeletonProps>;
 
+/**
+ * Skeleton base props, excluding design-related props like animation and appearance.
+ */
+export declare type SkeletonBaseProps = Omit<SkeletonProps, 'animation' | 'appearance'>;
+
+/**
+ * Skeleton base state, excluding design-related state like animation and appearance.
+ */
+export declare type SkeletonBaseState = Omit<SkeletonState, 'animation' | 'appearance' | 'size' | 'shape'>;
+
 export declare const skeletonClassNames: SlotClassNames<SkeletonSlots>;
 
 export declare const SkeletonContextProvider: React_2.Provider<SkeletonContextValue | undefined>;
@@ -38,6 +48,16 @@ declare type SkeletonContextValues = {
 
 export declare const SkeletonItem: ForwardRefComponent<SkeletonItemProps>;
 
+/**
+ * SkeletonItem base props, excluding design-related props like animation, appearance, size, and shape.
+ */
+export declare type SkeletonItemBaseProps = Omit<SkeletonItemProps, 'animation' | 'appearance' | 'size' | 'shape'>;
+
+/**
+ * SkeletonItem base state, excluding design-related state like animation, appearance, size, and shape.
+ */
+export declare type SkeletonItemBaseState = Omit<SkeletonItemState, 'animation' | 'appearance' | 'size' | 'shape'>;
+
 export declare const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots>;
 
 /**
@@ -59,7 +79,7 @@ export declare type SkeletonItemProps = ComponentProps<SkeletonItemSlots> & Pick
 /**
  * Sizes for the SkeletonItem
  */
-declare type SkeletonItemSize = 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 128;
+declare type SkeletonItemSize = 8 | 12 | 14 | 16 | 20 | 22 | 24 | 28 | 32 | 36 | 40 | 48 | 52 | 56 | 64 | 72 | 92 | 96 | 120 | 128;
 
 export declare type SkeletonItemSlots = {
     root: Slot<'div', 'span'>;
@@ -127,6 +147,14 @@ export declare type SkeletonState = ComponentState<SkeletonSlots> & Required<Pic
  */
 export declare const useSkeleton_unstable: (props: SkeletonProps, ref: React_2.Ref<HTMLElement>) => SkeletonState;
 
+/**
+ * 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 declare const useSkeletonBase_unstable: (props: SkeletonBaseProps, ref: React_2.Ref<HTMLDivElement>) => SkeletonBaseState;
+
 export declare const useSkeletonContext: () => SkeletonContextValue;
 
 /**
@@ -140,6 +168,14 @@ export declare const useSkeletonContext: () => SkeletonContextValue;
  */
 export declare const useSkeletonItem_unstable: (props: SkeletonItemProps, ref: React_2.Ref<HTMLElement>) => SkeletonItemState;
 
+/**
+ * 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 declare const useSkeletonItemBase_unstable: (props: SkeletonItemBaseProps, ref: React_2.Ref<HTMLDivElement>) => SkeletonItemBaseState;
+
 /**
  * Apply styling to the SkeletonItem slots based on the state
  */

package/lib/Skeleton.js

@@ -1 +1 @@
-export { Skeleton, renderSkeleton_unstable, skeletonClassNames, useSkeletonContextValues, useSkeletonStyles_unstable, useSkeleton_unstable } from './components/Skeleton/index';
+export { Skeleton, renderSkeleton_unstable, skeletonClassNames, useSkeletonContextValues, useSkeletonStyles_unstable, useSkeleton_unstable, useSkeletonBase_unstable } from './components/Skeleton/index';

package/lib/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Skeleton.ts"],"sourcesContent":["export type {\n  SkeletonContextValues,\n  SkeletonItemSize,\n  SkeletonProps,\n  SkeletonSlots,\n  SkeletonState,\n} from './components/Skeleton/index';\nexport {\n  Skeleton,\n  renderSkeleton_unstable,\n  skeletonClassNames,\n  useSkeletonContextValues,\n  useSkeletonStyles_unstable,\n  useSkeleton_unstable,\n} from './components/Skeleton/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonContextValues","useSkeletonStyles_unstable","useSkeleton_unstable"],"mappings":"AAOA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,wBAAwB,EACxBC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}
+{"version":3,"sources":["../src/Skeleton.ts"],"sourcesContent":["export type {\n  SkeletonBaseProps,\n  SkeletonBaseState,\n  SkeletonContextValues,\n  SkeletonItemSize,\n  SkeletonProps,\n  SkeletonSlots,\n  SkeletonState,\n} from './components/Skeleton/index';\nexport {\n  Skeleton,\n  renderSkeleton_unstable,\n  skeletonClassNames,\n  useSkeletonContextValues,\n  useSkeletonStyles_unstable,\n  useSkeleton_unstable,\n  useSkeletonBase_unstable,\n} from './components/Skeleton/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonContextValues","useSkeletonStyles_unstable","useSkeleton_unstable","useSkeletonBase_unstable"],"mappings":"AASA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,wBAAwB,EACxBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,wBAAwB,QACnB,8BAA8B"}

package/lib/SkeletonItem.js

@@ -1 +1 @@
-export { SkeletonItem, renderSkeletonItem_unstable, skeletonItemClassNames, useSkeletonItemStyles_unstable, useSkeletonItem_unstable } from './components/SkeletonItem/index';
+export { SkeletonItem, renderSkeletonItem_unstable, skeletonItemClassNames, useSkeletonItemStyles_unstable, useSkeletonItem_unstable, useSkeletonItemBase_unstable } from './components/SkeletonItem/index';

package/lib/SkeletonItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/SkeletonItem.ts"],"sourcesContent":["export type { SkeletonItemProps, SkeletonItemSlots, SkeletonItemState } from './components/SkeletonItem/index';\nexport {\n  SkeletonItem,\n  renderSkeletonItem_unstable,\n  skeletonItemClassNames,\n  useSkeletonItemStyles_unstable,\n  useSkeletonItem_unstable,\n} from './components/SkeletonItem/index';\n"],"names":["SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable"],"mappings":"AACA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}
+{"version":3,"sources":["../src/SkeletonItem.ts"],"sourcesContent":["export type {\n  SkeletonItemBaseProps,\n  SkeletonItemBaseState,\n  SkeletonItemProps,\n  SkeletonItemSlots,\n  SkeletonItemState,\n} from './components/SkeletonItem/index';\nexport {\n  SkeletonItem,\n  renderSkeletonItem_unstable,\n  skeletonItemClassNames,\n  useSkeletonItemStyles_unstable,\n  useSkeletonItem_unstable,\n  useSkeletonItemBase_unstable,\n} from './components/SkeletonItem/index';\n"],"names":["SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","useSkeletonItemBase_unstable"],"mappings":"AAOA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,kCAAkC"}

package/lib/components/Skeleton/Skeleton.types.js

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

package/lib/components/Skeleton/Skeleton.types.js.map

@@ -1 +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 = 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 48 | 56 | 64 | 72 | 96 | 120 | 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\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"],"names":[],"mappings":"AAyDA;;CAEC,GACD,WAEwC"}
+{"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"}

package/lib/components/Skeleton/index.js

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

package/lib/components/Skeleton/index.js.map

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

package/lib/components/Skeleton/useSkeleton.js

@@ -12,12 +12,24 @@ import { useSkeletonContext } from '../../contexts/SkeletonContext';
  * @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 } = props;
+    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', {
-        // FIXME:
-        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-        ref: ref,
+        ref,
         role: 'progressbar',
         'aria-busy': true,
         ...props
@@ -25,10 +37,6 @@ import { useSkeletonContext } from '../../contexts/SkeletonContext';
         elementType: 'div'
     });
     return {
-        animation,
-        appearance,
-        size,
-        shape,
         components: {
             root: 'div'
         },

package/lib/components/Skeleton/useSkeleton.js.map

@@ -1 +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 { 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 { animation = contextAnimation ?? 'wave', appearance = contextAppearance ?? 'opaque', size, shape } = props;\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: ref as React.Ref<HTMLDivElement>,\n      role: 'progressbar',\n      'aria-busy': true,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n  return { animation, appearance, size, shape, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","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,EAAEI,YAAYC,6BAAAA,8BAAAA,mBAAoB,MAAM,EAAEC,aAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGP;IAE5G,MAAMQ,OAAOX,KAAKY,MAAM,CACtBb,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACLS,MAAM;QACN,aAAa;QACb,GAAGV,KAAK;IACV,IACA;QAAEW,aAAa;IAAM;IAEvB,OAAO;QAAET;QAAWE;QAAYE;QAAMC;QAAOK,YAAY;YAAEJ,MAAM;QAAM;QAAGA;IAAK;AACjF,EAAE"}
+{"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"}

package/lib/components/SkeletonItem/SkeletonItem.types.js

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

package/lib/components/SkeletonItem/SkeletonItem.types.js.map

@@ -1 +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 * State used in rendering SkeletonItem\n */\nexport type SkeletonItemState = ComponentState<SkeletonItemSlots> &\n  Required<Pick<SkeletonItemProps, 'animation' | 'appearance' | 'size' | 'shape'>>;\n"],"names":[],"mappings":"AAyBA;;CAEC,GACD,WACmF"}
+{"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"}

package/lib/components/SkeletonItem/index.js

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

package/lib/components/SkeletonItem/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SkeletonItem/index.ts"],"sourcesContent":["export { SkeletonItem } from './SkeletonItem';\nexport type { SkeletonItemProps, SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types';\nexport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nexport { useSkeletonItem_unstable } from './useSkeletonItem';\nexport { skeletonItemClassNames, useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\n"],"names":["SkeletonItem","renderSkeletonItem_unstable","useSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}
+{"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"}

package/lib/components/SkeletonItem/renderSkeletonItem.js.map

@@ -1 +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 { SkeletonItemState, SkeletonItemSlots } from './SkeletonItem.types';\n\n/**\n * Render the final JSX of SkeletonItem\n */\nexport const renderSkeletonItem_unstable = (state: SkeletonItemState): 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"}
+{"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"}

package/lib/components/SkeletonItem/useSkeletonItem.js

@@ -12,21 +12,29 @@ import { useSkeletonContext } from '../../contexts/SkeletonContext';
  * @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' } = props;
+    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', {
-        // FIXME:
-        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-        ref: ref,
+        ref,
         ...props
     }), {
         elementType: 'div'
     });
     return {
-        appearance,
-        animation,
-        size,
-        shape,
         components: {
             root: 'div'
         },

package/lib/components/SkeletonItem/useSkeletonItem.js.map

@@ -1 +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 { SkeletonItemProps, SkeletonItemState } 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  } = props;\n\n  const root = slot.always(\n    getIntrinsicElementProps('div', {\n      // FIXME:\n      // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n      // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n      ref: ref as React.Ref<HTMLDivElement>,\n      ...props,\n    }),\n    { elementType: 'div' },\n  );\n  return { appearance, animation, size, shape, components: { root: 'div' }, root };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSkeletonContext","useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","contextSize","shape","contextShape","root","always","elementType","components"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,kBAAkB,QAAQ,iCAAiC;AAGpE;;;;;;;;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,EACpC,GAAGT;IAEJ,MAAMU,OAAOb,KAAKc,MAAM,CACtBf,yBAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FK,KAAKA;QACL,GAAGD,KAAK;IACV,IACA;QAAEY,aAAa;IAAM;IAEvB,OAAO;QAAER;QAAYF;QAAWI;QAAME;QAAOK,YAAY;YAAEH,MAAM;QAAM;QAAGA;IAAK;AACjF,EAAE"}
+{"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"}

package/lib/components/SkeletonItem/useSkeletonItemStyles.styles.js

@@ -89,12 +89,18 @@ const useRectangleStyles = /*#__PURE__*/__styles({
   "12": {
     Bqenvij: "fvblgha"
   },
+  "14": {
+    Bqenvij: "fuesxvb"
+  },
   "16": {
     Bqenvij: "fd461yt"
   },
   "20": {
     Bqenvij: "fjamq6b"
   },
+  "22": {
+    Bqenvij: "f50nw0v"
+  },
   "24": {
     Bqenvij: "frvgh55"
   },
@@ -113,6 +119,9 @@ const useRectangleStyles = /*#__PURE__*/__styles({
   "48": {
     Bqenvij: "ff2sm71"
   },
+  "52": {
+    Bqenvij: "fltz6oj"
+  },
   "56": {
     Bqenvij: "fzki0ko"
   },
@@ -122,6 +131,9 @@ const useRectangleStyles = /*#__PURE__*/__styles({
   "72": {
     Bqenvij: "f1shusfg"
   },
+  "92": {
+    Bqenvij: "f19zsq0h"
+  },
   "96": {
     Bqenvij: "fypu0ge"
   },
@@ -140,7 +152,7 @@ const useRectangleStyles = /*#__PURE__*/__styles({
     Dimara: "ff3glw6"
   }
 }, {
-  d: [".f1x82gua{height:8px;}", ".fvblgha{height:12px;}", ".fd461yt{height:16px;}", ".fjamq6b{height:20px;}", ".frvgh55{height:24px;}", ".fxldao9{height:28px;}", ".f1d2rq10{height:32px;}", ".f8ljn23{height:36px;}", ".fbhnoac{height:40px;}", ".ff2sm71{height:48px;}", ".fzki0ko{height:56px;}", ".f16k9i2m{height:64px;}", ".f1shusfg{height:72px;}", ".fypu0ge{height:96px;}", ".fjr5b71{height:120px;}", ".fele2au{height:128px;}", ".fly5x3f{width:100%;}", [".ff3glw6{border-radius:4px;}", {
+  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
   }]]
 });
@@ -153,6 +165,10 @@ const useSizeStyles = /*#__PURE__*/__styles({
     a9b677: "frx94fk",
     Bqenvij: "fvblgha"
   },
+  "14": {
+    a9b677: "fz18fzn",
+    Bqenvij: "fuesxvb"
+  },
   "16": {
     a9b677: "fjw5fx7",
     Bqenvij: "fd461yt"
@@ -161,6 +177,10 @@ const useSizeStyles = /*#__PURE__*/__styles({
     a9b677: "f64fuq3",
     Bqenvij: "fjamq6b"
   },
+  "22": {
+    a9b677: "f6zmzpu",
+    Bqenvij: "f50nw0v"
+  },
   "24": {
     a9b677: "fq4mcun",
     Bqenvij: "frvgh55"
@@ -185,6 +205,10 @@ const useSizeStyles = /*#__PURE__*/__styles({
     a9b677: "f124akge",
     Bqenvij: "ff2sm71"
   },
+  "52": {
+    a9b677: "f16130wi",
+    Bqenvij: "fltz6oj"
+  },
   "56": {
     a9b677: "f1u66zr1",
     Bqenvij: "fzki0ko"
@@ -197,6 +221,10 @@ const useSizeStyles = /*#__PURE__*/__styles({
     a9b677: "fhcae8x",
     Bqenvij: "f1shusfg"
   },
+  "92": {
+    a9b677: "f78o5r6",
+    Bqenvij: "f19zsq0h"
+  },
   "96": {
     a9b677: "f1kyr2gn",
     Bqenvij: "fypu0ge"
@@ -210,7 +238,7 @@ const useSizeStyles = /*#__PURE__*/__styles({
     Bqenvij: "fele2au"
   }
 }, {
-  d: [".f1o3cbw4{width:8px;}", ".f1x82gua{height:8px;}", ".frx94fk{width:12px;}", ".fvblgha{height:12px;}", ".fjw5fx7{width:16px;}", ".fd461yt{height:16px;}", ".f64fuq3{width:20px;}", ".fjamq6b{height:20px;}", ".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;}", ".f1u66zr1{width:56px;}", ".fzki0ko{height:56px;}", ".fa9ln6p{width:64px;}", ".f16k9i2m{height:64px;}", ".fhcae8x{width:72px;}", ".f1shusfg{height:72px;}", ".f1kyr2gn{width:96px;}", ".fypu0ge{height:96px;}", ".fwfqyga{width:120px;}", ".fjr5b71{height:120px;}", ".f1iksgmy{width:128px;}", ".fele2au{height:128px;}"]
+  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: {

package/lib/components/SkeletonItem/useSkeletonItemStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","Bsft5z2","ap17g6","E3zdtr","By385i5","Eqx8gd","B1piin3","bn5sak","B58onuk","s9ouvv","xr36ep","Bitv4sc","Gt9ir8","Crt7la","wave","De3pzq","Br128sd","h62rwi","b1kco5","Iqrfzq","pulse","Bjyk6c5","translucent","translucentPulse","blockStyling","mc9l5x","d","p","m","k","useRectangleStyles","Bqenvij","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"sources":["useSkeletonItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const skeletonItemClassNames = {\n    root: 'fui-SkeletonItem'\n};\nconst skeletonWaveAnimation = {\n    to: {\n        transform: 'translate(100%)'\n    }\n};\nconst skeletonPulseAnimation = {\n    '0%': {\n        opacity: '1'\n    },\n    '50%': {\n        opacity: '0.4'\n    },\n    '100%': {\n        opacity: '1'\n    }\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'relative',\n        overflow: 'hidden',\n        '::after': {\n            content: '\"\"',\n            display: 'block',\n            position: 'absolute',\n            inset: '0',\n            animationIterationCount: 'infinite',\n            animationDuration: '3s',\n            animationTimingFunction: 'ease-in-out',\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                animationDuration: '0.01ms',\n                animationIterationCount: '1'\n            }\n        }\n    },\n    wave: {\n        backgroundColor: tokens.colorNeutralStencil1,\n        '::after': {\n            animationName: skeletonWaveAnimation,\n            backgroundImage: `linear-gradient(\n        to right,\n        ${tokens.colorNeutralStencil1} 0%,\n        ${tokens.colorNeutralStencil2} 50%,\n        ${tokens.colorNeutralStencil1} 100%)`,\n            transform: 'translate(-100%)',\n            '@media screen and (forced-colors: active)': {\n                backgroundColor: 'WindowText'\n            }\n        }\n    },\n    pulse: {\n        '::after': {\n            animationName: skeletonPulseAnimation,\n            animationDuration: '1s',\n            backgroundColor: tokens.colorNeutralStencil1\n        }\n    },\n    translucent: {\n        backgroundColor: tokens.colorNeutralStencil1Alpha,\n        '::after': {\n            backgroundImage: `linear-gradient(\n      to right,\n      transparent 0%,\n      ${tokens.colorNeutralStencil1Alpha} 50%,\n      transparent 100%)`\n        }\n    },\n    translucentPulse: {\n        backgroundColor: 'none',\n        '::after': {\n            backgroundColor: tokens.colorNeutralStencil1Alpha\n        }\n    },\n    blockStyling: {\n        display: 'block'\n    }\n});\nconst useRectangleStyles = makeStyles({\n    root: {\n        width: '100%',\n        borderRadius: '4px'\n    },\n    8: {\n        height: '8px'\n    },\n    12: {\n        height: '12px'\n    },\n    16: {\n        height: '16px'\n    },\n    20: {\n        height: '20px'\n    },\n    24: {\n        height: '24px'\n    },\n    28: {\n        height: '28px'\n    },\n    32: {\n        height: '32px'\n    },\n    36: {\n        height: '36px'\n    },\n    40: {\n        height: '40px'\n    },\n    48: {\n        height: '48px'\n    },\n    56: {\n        height: '56px'\n    },\n    64: {\n        height: '64px'\n    },\n    72: {\n        height: '72px'\n    },\n    96: {\n        height: '96px'\n    },\n    120: {\n        height: '120px'\n    },\n    128: {\n        height: '128px'\n    }\n});\nconst useSizeStyles = makeStyles({\n    8: {\n        width: '8px',\n        height: '8px'\n    },\n    12: {\n        width: '12px',\n        height: '12px'\n    },\n    16: {\n        width: '16px',\n        height: '16px'\n    },\n    20: {\n        width: '20px',\n        height: '20px'\n    },\n    24: {\n        width: '24px',\n        height: '24px'\n    },\n    28: {\n        width: '28px',\n        height: '28px'\n    },\n    32: {\n        width: '32px',\n        height: '32px'\n    },\n    36: {\n        width: '36px',\n        height: '36px'\n    },\n    40: {\n        width: '40px',\n        height: '40px'\n    },\n    48: {\n        width: '48px',\n        height: '48px'\n    },\n    56: {\n        width: '56px',\n        height: '56px'\n    },\n    64: {\n        width: '64px',\n        height: '64px'\n    },\n    72: {\n        width: '72px',\n        height: '72px'\n    },\n    96: {\n        width: '96px',\n        height: '96px'\n    },\n    120: {\n        width: '120px',\n        height: '120px'\n    },\n    128: {\n        width: '128px',\n        height: '128px'\n    }\n});\nconst useCircleSizeStyles = makeStyles({\n    root: {\n        borderRadius: '50%'\n    }\n});\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */ export const useSkeletonItemStyles_unstable = (state)=>{\n    'use no memo';\n    const { animation, appearance, size, shape } = state;\n    const rootStyles = useStyles();\n    const rectStyles = useRectangleStyles();\n    const sizeStyles = useSizeStyles();\n    const circleStyles = useCircleSizeStyles();\n    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);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,qBAAqB,GAAG;EAC1BC,EAAE,EAAE;IACAC,SAAS,EAAE;EACf;AACJ,CAAC;AACD,MAAMC,sBAAsB,GAAG;EAC3B,IAAI,EAAE;IACFC,OAAO,EAAE;EACb,CAAC;EACD,KAAK,EAAE;IACHA,OAAO,EAAE;EACb,CAAC;EACD,MAAM,EAAE;IACJA,OAAO,EAAE;EACb;AACJ,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGV,QAAA;EAAAI,IAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAJ,OAAA;IAAAN,MAAA;IAAAW,OAAA;EAAA;EAAAC,WAAA;IAAAP,MAAA;IAAAE,MAAA;EAAA;EAAAM,gBAAA;IAAAR,MAAA;IAAAM,OAAA;EAAA;EAAAG,YAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CA2DrB,CAAC;AACF,MAAMC,kBAAkB,gBAAG5C,QAAA;EAAA;IAAA6C,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAA;IAAAA,OAAA;EAAA;EAAAzC,IAAA;IAAA0C,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAX,CAAA;IAAAC,CAAA;EAAA;AAAA,CAqD1B,CAAC;AACF,MAAMW,aAAa,gBAAGpD,QAAA;EAAA;IAAA8C,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;EAAA;IAAAC,MAAA;IAAAD,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAiErB,CAAC;AACF,MAAMa,mBAAmB,gBAAGrD,QAAA;EAAAI,IAAA;IAAA2C,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAX,CAAA;IAAAC,CAAA;EAAA;AAAA,CAI3B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMa,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAM;IAAEC,SAAS;IAAEC,UAAU;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAGJ,KAAK;EACpD,MAAMK,UAAU,GAAGlD,SAAS,CAAC,CAAC;EAC9B,MAAMmD,UAAU,GAAGjB,kBAAkB,CAAC,CAAC;EACvC,MAAMkB,UAAU,GAAGV,aAAa,CAAC,CAAC;EAClC,MAAMW,YAAY,GAAGV,mBAAmB,CAAC,CAAC;EAC1CE,KAAK,CAACnD,IAAI,CAAC4D,SAAS,GAAG/D,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEwD,UAAU,CAACxD,IAAI,EAAEmD,KAAK,CAACnD,IAAI,CAAC6D,EAAE,KAAK,MAAM,IAAIL,UAAU,CAACtB,YAAY,EAAEkB,SAAS,KAAK,MAAM,IAAII,UAAU,CAAChC,IAAI,EAAE4B,SAAS,KAAK,OAAO,IAAII,UAAU,CAAC1B,KAAK,EAAEuB,UAAU,KAAK,aAAa,IAAIG,UAAU,CAACxB,WAAW,EAAEoB,SAAS,KAAK,OAAO,IAAIC,UAAU,KAAK,aAAa,IAAIG,UAAU,CAACvB,gBAAgB,EAAEsB,KAAK,KAAK,WAAW,IAAIE,UAAU,CAACzD,IAAI,EAAEuD,KAAK,KAAK,WAAW,IAAIE,UAAU,CAACH,IAAI,CAAC,EAAEC,KAAK,KAAK,QAAQ,IAAIG,UAAU,CAACJ,IAAI,CAAC,EAAEC,KAAK,KAAK,QAAQ,IAAII,YAAY,CAAC3D,IAAI,EAAEuD,KAAK,KAAK,QAAQ,IAAIG,UAAU,CAACJ,IAAI,CAAC,EAAEH,KAAK,CAACnD,IAAI,CAAC4D,SAAS,CAAC;EAC5kB,OAAOT,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","Bsft5z2","ap17g6","E3zdtr","By385i5","Eqx8gd","B1piin3","bn5sak","B58onuk","s9ouvv","xr36ep","Bitv4sc","Gt9ir8","Crt7la","wave","De3pzq","Br128sd","h62rwi","b1kco5","Iqrfzq","pulse","Bjyk6c5","translucent","translucentPulse","blockStyling","mc9l5x","d","p","m","k","useRectangleStyles","Bqenvij","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"sources":["useSkeletonItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const skeletonItemClassNames = {\n    root: 'fui-SkeletonItem'\n};\nconst skeletonWaveAnimation = {\n    to: {\n        transform: 'translate(100%)'\n    }\n};\nconst skeletonPulseAnimation = {\n    '0%': {\n        opacity: '1'\n    },\n    '50%': {\n        opacity: '0.4'\n    },\n    '100%': {\n        opacity: '1'\n    }\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'relative',\n        overflow: 'hidden',\n        '::after': {\n            content: '\"\"',\n            display: 'block',\n            position: 'absolute',\n            inset: '0',\n            animationIterationCount: 'infinite',\n            animationDuration: '3s',\n            animationTimingFunction: 'ease-in-out',\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                animationDuration: '0.01ms',\n                animationIterationCount: '1'\n            }\n        }\n    },\n    wave: {\n        backgroundColor: tokens.colorNeutralStencil1,\n        '::after': {\n            animationName: skeletonWaveAnimation,\n            backgroundImage: `linear-gradient(\n        to right,\n        ${tokens.colorNeutralStencil1} 0%,\n        ${tokens.colorNeutralStencil2} 50%,\n        ${tokens.colorNeutralStencil1} 100%)`,\n            transform: 'translate(-100%)',\n            '@media screen and (forced-colors: active)': {\n                backgroundColor: 'WindowText'\n            }\n        }\n    },\n    pulse: {\n        '::after': {\n            animationName: skeletonPulseAnimation,\n            animationDuration: '1s',\n            backgroundColor: tokens.colorNeutralStencil1\n        }\n    },\n    translucent: {\n        backgroundColor: tokens.colorNeutralStencil1Alpha,\n        '::after': {\n            backgroundImage: `linear-gradient(\n      to right,\n      transparent 0%,\n      ${tokens.colorNeutralStencil1Alpha} 50%,\n      transparent 100%)`\n        }\n    },\n    translucentPulse: {\n        backgroundColor: 'none',\n        '::after': {\n            backgroundColor: tokens.colorNeutralStencil1Alpha\n        }\n    },\n    blockStyling: {\n        display: 'block'\n    }\n});\nconst useRectangleStyles = makeStyles({\n    root: {\n        width: '100%',\n        borderRadius: '4px'\n    },\n    8: {\n        height: '8px'\n    },\n    12: {\n        height: '12px'\n    },\n    14: {\n        height: '14px'\n    },\n    16: {\n        height: '16px'\n    },\n    20: {\n        height: '20px'\n    },\n    22: {\n        height: '22px'\n    },\n    24: {\n        height: '24px'\n    },\n    28: {\n        height: '28px'\n    },\n    32: {\n        height: '32px'\n    },\n    36: {\n        height: '36px'\n    },\n    40: {\n        height: '40px'\n    },\n    48: {\n        height: '48px'\n    },\n    52: {\n        height: '52px'\n    },\n    56: {\n        height: '56px'\n    },\n    64: {\n        height: '64px'\n    },\n    72: {\n        height: '72px'\n    },\n    92: {\n        height: '92px'\n    },\n    96: {\n        height: '96px'\n    },\n    120: {\n        height: '120px'\n    },\n    128: {\n        height: '128px'\n    }\n});\nconst useSizeStyles = makeStyles({\n    8: {\n        width: '8px',\n        height: '8px'\n    },\n    12: {\n        width: '12px',\n        height: '12px'\n    },\n    14: {\n        width: '14px',\n        height: '14px'\n    },\n    16: {\n        width: '16px',\n        height: '16px'\n    },\n    20: {\n        width: '20px',\n        height: '20px'\n    },\n    22: {\n        width: '22px',\n        height: '22px'\n    },\n    24: {\n        width: '24px',\n        height: '24px'\n    },\n    28: {\n        width: '28px',\n        height: '28px'\n    },\n    32: {\n        width: '32px',\n        height: '32px'\n    },\n    36: {\n        width: '36px',\n        height: '36px'\n    },\n    40: {\n        width: '40px',\n        height: '40px'\n    },\n    48: {\n        width: '48px',\n        height: '48px'\n    },\n    52: {\n        width: '52px',\n        height: '52px'\n    },\n    56: {\n        width: '56px',\n        height: '56px'\n    },\n    64: {\n        width: '64px',\n        height: '64px'\n    },\n    72: {\n        width: '72px',\n        height: '72px'\n    },\n    92: {\n        width: '92px',\n        height: '92px'\n    },\n    96: {\n        width: '96px',\n        height: '96px'\n    },\n    120: {\n        width: '120px',\n        height: '120px'\n    },\n    128: {\n        width: '128px',\n        height: '128px'\n    }\n});\nconst useCircleSizeStyles = makeStyles({\n    root: {\n        borderRadius: '50%'\n    }\n});\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */ export const useSkeletonItemStyles_unstable = (state)=>{\n    'use no memo';\n    const { animation, appearance, size, shape } = state;\n    const rootStyles = useStyles();\n    const rectStyles = useRectangleStyles();\n    const sizeStyles = useSizeStyles();\n    const circleStyles = useCircleSizeStyles();\n    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);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/SkeletonItem/useSkeletonItemStyles.styles.raw.js

@@ -93,12 +93,18 @@ const useRectangleStyles = makeStyles({
     12: {
         height: '12px'
     },
+    14: {
+        height: '14px'
+    },
     16: {
         height: '16px'
     },
     20: {
         height: '20px'
     },
+    22: {
+        height: '22px'
+    },
     24: {
         height: '24px'
     },
@@ -117,6 +123,9 @@ const useRectangleStyles = makeStyles({
     48: {
         height: '48px'
     },
+    52: {
+        height: '52px'
+    },
     56: {
         height: '56px'
     },
@@ -126,6 +135,9 @@ const useRectangleStyles = makeStyles({
     72: {
         height: '72px'
     },
+    92: {
+        height: '92px'
+    },
     96: {
         height: '96px'
     },
@@ -145,6 +157,10 @@ const useSizeStyles = makeStyles({
         width: '12px',
         height: '12px'
     },
+    14: {
+        width: '14px',
+        height: '14px'
+    },
     16: {
         width: '16px',
         height: '16px'
@@ -153,6 +169,10 @@ const useSizeStyles = makeStyles({
         width: '20px',
         height: '20px'
     },
+    22: {
+        width: '22px',
+        height: '22px'
+    },
     24: {
         width: '24px',
         height: '24px'
@@ -177,6 +197,10 @@ const useSizeStyles = makeStyles({
         width: '48px',
         height: '48px'
     },
+    52: {
+        width: '52px',
+        height: '52px'
+    },
     56: {
         width: '56px',
         height: '56px'
@@ -189,6 +213,10 @@ const useSizeStyles = makeStyles({
         width: '72px',
         height: '72px'
     },
+    92: {
+        width: '92px',
+        height: '92px'
+    },
     96: {
         width: '96px',
         height: '96px'