@fluentui/react-skeleton 9.6.0 → 9.7.1

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-skeleton
 
-This log was last generated on Tue, 17 Mar 2026 07:56:46 GMT and should not be manually modified.
+This log was last generated on Wed, 01 Apr 2026 15:50:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.7.1)
+
+Wed, 01 Apr 2026 15:50:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.7.0..@fluentui/react-skeleton_v9.7.1)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
+
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.7.0)
+
+Thu, 26 Mar 2026 08:12:52 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:56:46 GMT 
+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

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>;
 
 /**
@@ -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 =\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\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":"AA6EA;;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/index.js

@@ -1,3 +1,3 @@
-export { Skeleton, renderSkeleton_unstable, skeletonClassNames, useSkeletonStyles_unstable, useSkeleton_unstable } from './Skeleton';
-export { SkeletonItem, renderSkeletonItem_unstable, skeletonItemClassNames, useSkeletonItemStyles_unstable, useSkeletonItem_unstable } from './SkeletonItem';
+export { Skeleton, renderSkeleton_unstable, skeletonClassNames, useSkeletonStyles_unstable, useSkeleton_unstable, useSkeletonBase_unstable } from './Skeleton';
+export { SkeletonItem, renderSkeletonItem_unstable, skeletonItemClassNames, useSkeletonItemStyles_unstable, useSkeletonItem_unstable, useSkeletonItemBase_unstable } from './SkeletonItem';
 export { SkeletonContextProvider, useSkeletonContext } from './contexts/index';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Skeleton,\n  renderSkeleton_unstable,\n  skeletonClassNames,\n  useSkeletonStyles_unstable,\n  useSkeleton_unstable,\n} from './Skeleton';\nexport type { SkeletonProps, SkeletonSlots, SkeletonState } from './Skeleton';\nexport {\n  SkeletonItem,\n  renderSkeletonItem_unstable,\n  skeletonItemClassNames,\n  useSkeletonItemStyles_unstable,\n  useSkeletonItem_unstable,\n} from './SkeletonItem';\nexport type { SkeletonItemProps, SkeletonItemSlots, SkeletonItemState } from './SkeletonItem';\nexport { SkeletonContextProvider, useSkeletonContext } from './contexts/index';\nexport type { SkeletonContextValue } from './contexts/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonStyles_unstable","useSkeleton_unstable","SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","SkeletonContextProvider","useSkeletonContext"],"mappings":"AAAA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AAEpB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,iBAAiB;AAExB,SAASC,uBAAuB,EAAEC,kBAAkB,QAAQ,mBAAmB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Skeleton,\n  renderSkeleton_unstable,\n  skeletonClassNames,\n  useSkeletonStyles_unstable,\n  useSkeleton_unstable,\n  useSkeletonBase_unstable,\n} from './Skeleton';\nexport type { SkeletonBaseProps, SkeletonProps, SkeletonSlots, SkeletonBaseState, SkeletonState } from './Skeleton';\nexport {\n  SkeletonItem,\n  renderSkeletonItem_unstable,\n  skeletonItemClassNames,\n  useSkeletonItemStyles_unstable,\n  useSkeletonItem_unstable,\n  useSkeletonItemBase_unstable,\n} from './SkeletonItem';\nexport type {\n  SkeletonItemBaseProps,\n  SkeletonItemProps,\n  SkeletonItemSlots,\n  SkeletonItemBaseState,\n  SkeletonItemState,\n} from './SkeletonItem';\nexport { SkeletonContextProvider, useSkeletonContext } from './contexts/index';\nexport type { SkeletonContextValue } from './contexts/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonStyles_unstable","useSkeleton_unstable","useSkeletonBase_unstable","SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","useSkeletonItemBase_unstable","SkeletonContextProvider","useSkeletonContext"],"mappings":"AAAA,SACEA,QAAQ,EACRC,uBAAuB,EACvBC,kBAAkB,EAClBC,0BAA0B,EAC1BC,oBAAoB,EACpBC,wBAAwB,QACnB,aAAa;AAEpB,SACEC,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,EACxBC,4BAA4B,QACvB,iBAAiB;AAQxB,SAASC,uBAAuB,EAAEC,kBAAkB,QAAQ,mBAAmB"}

package/lib-commonjs/Skeleton.js

@@ -18,6 +18,9 @@ _export(exports, {
     skeletonClassNames: function() {
         return _index.skeletonClassNames;
     },
+    useSkeletonBase_unstable: function() {
+        return _index.useSkeletonBase_unstable;
+    },
     useSkeletonContextValues: function() {
         return _index.useSkeletonContextValues;
     },

package/lib-commonjs/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":";;;;;;;;;;;;eAQEA,eAAQ;;;eACRC,8BAAuB;;;eACvBC,yBAAkB;;;eAClBC,+BAAwB;;;eACxBC,iCAA0B;;;eAC1BC,2BAAoB;;;uBACf,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":";;;;;;;;;;;;eAUEA,eAAQ;;;eACRC,8BAAuB;;;eACvBC,yBAAkB;;;eAIlBI,+BAAwB;;;eAHxBH,+BAAwB;;;eACxBC,iCAA0B;;;eAC1BC,2BAAoB;;;uBAEf,8BAA8B"}

package/lib-commonjs/SkeletonItem.js

@@ -18,6 +18,9 @@ _export(exports, {
     skeletonItemClassNames: function() {
         return _index.skeletonItemClassNames;
     },
+    useSkeletonItemBase_unstable: function() {
+        return _index.useSkeletonItemBase_unstable;
+    },
     useSkeletonItemStyles_unstable: function() {
         return _index.useSkeletonItemStyles_unstable;
     },

package/lib-commonjs/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":";;;;;;;;;;;;eAEEA,mBAAY;;;eACZC,kCAA2B;;;eAC3BC,6BAAsB;;;eACtBC,qCAA8B;;;eAC9BC,+BAAwB;;;uBACnB,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":";;;;;;;;;;;;eAQEA,mBAAY;;;eACZC,kCAA2B;;;eAC3BC,6BAAsB;;;eAGtBG,mCAA4B;;;eAF5BF,qCAA8B;;;eAC9BC,+BAAwB;;;uBAEnB,kCAAkC"}

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

@@ -1,5 +1,5 @@
 /**
- * State used in rendering Skeleton
+ * Skeleton base state, excluding design-related state like animation and appearance.
  */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/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 =\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\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":"AA6EA;;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-commonjs/components/Skeleton/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     skeletonClassNames: function() {
         return _useSkeletonStylesstyles.skeletonClassNames;
     },
+    useSkeletonBase_unstable: function() {
+        return _useSkeleton.useSkeletonBase_unstable;
+    },
     useSkeletonContextValues: function() {
         return _useSkeletonContextValues.useSkeletonContextValues;
     },

package/lib-commonjs/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":";;;;;;;;;;;;eAASA,kBAAQ;;;eAQRC,uCAAuB;;;eAGvBG,2CAAkB;;;eADlBD,kDAAwB;;;eACJE,mDAA0B;;;eAF9CH,iCAAoB;;;0BATJ,aAAa;gCAQE,mBAAmB;6BACtB,gBAAgB;0CACZ,6BAA6B;yCACP,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":";;;;;;;;;;;IAASA;iCAAQ;;IAURC;sDAAuB;;;eAGvBI,2CAAkB;;;eAFIF,qCAAwB;;;eAC9CC,kDAAwB;;;eACJE,mDAA0B;;;eAF9CJ,iCAAoB;;;0BAXJ,aAAa;gCAUE,mBAAmB;6BACI,gBAAgB;0CACtC,6BAA6B;yCACP,6BAA6B"}

package/lib-commonjs/components/Skeleton/useSkeleton.js

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useSkeleton_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useSkeletonBase_unstable: function() {
+        return useSkeletonBase_unstable;
+    },
+    useSkeleton_unstable: function() {
         return useSkeleton_unstable;
     }
 });
@@ -15,12 +23,19 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _SkeletonContext = require("../../contexts/SkeletonContext");
 const useSkeleton_unstable = (props, ref)=>{
     const { animation: contextAnimation, appearance: contextAppearance } = (0, _SkeletonContext.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
+    };
+};
+const useSkeletonBase_unstable = (props, ref)=>{
     const root = _reactutilities.slot.always((0, _reactutilities.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
@@ -28,10 +43,6 @@ const useSkeleton_unstable = (props, ref)=>{
         elementType: 'div'
     });
     return {
-        animation,
-        appearance,
-        size,
-        shape,
         components: {
             root: 'div'
         },

package/lib-commonjs/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;;;;;+BAgBaI;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;iCAExC,iCAAiC;AAW7D,6BAA6B,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,OAAGP,mCAAAA;IACvE,MAAM,EAAEI,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EAAEC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGP;IAE5G,MAAMQ,OAAOX,oBAAAA,CAAKY,MAAM,KACtBb,wCAAAA,EAAyB,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;;;;;;;;;;;;IA2Cae,wBAAAA;;;wBA3BAX;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;iCAExC,iCAAiC;AAW7D,MAAMA,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EAAEC,WAAWC,gBAAgB,EAAEC,YAAYC,iBAAiB,EAAE,OAAGP,mCAAAA;IACvE,MAAM,EACJI,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EACtCC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,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;AAQK,iCAAiC,CACtCP,OACAC;IAEA,MAAMU,OAAOd,oBAAAA,CAAKe,MAAM,KACtBhB,wCAAAA,EAAyB,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-commonjs/components/SkeletonItem/SkeletonItem.types.js

@@ -1,5 +1,5 @@
 /**
- * State used in rendering SkeletonItem
+ * SkeletonItem base state, excluding design-related state like animation, appearance, size, and shape.
  */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/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-commonjs/components/SkeletonItem/index.js

@@ -18,6 +18,9 @@ _export(exports, {
     skeletonItemClassNames: function() {
         return _useSkeletonItemStylesstyles.skeletonItemClassNames;
     },
+    useSkeletonItemBase_unstable: function() {
+        return _useSkeletonItem.useSkeletonItemBase_unstable;
+    },
     useSkeletonItemStyles_unstable: function() {
         return _useSkeletonItemStylesstyles.useSkeletonItemStyles_unstable;
     },

package/lib-commonjs/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":";;;;;;;;;;;;eAASA,0BAAY;;;eAEZC,+CAA2B;;;eAE3BE,mDAAsB;;;eAAEC,2DAA8B;;;eADtDF,yCAAwB;;;8BAHJ,iBAAiB;oCAEF,uBAAuB;iCAC1B,oBAAoB;6CACU,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":";;;;;;;;;;;;eAASA,0BAAY;;;eAQZC,+CAA2B;;;eAE3BG,mDAAsB;;;eADID,6CAA4B;;;eAC9BE,2DAA8B;;;eADtDH,yCAAwB;;;8BATJ,iBAAiB;oCAQF,uBAAuB;iCACI,oBAAoB;6CACpB,iCAAiC"}

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

package/lib-commonjs/components/SkeletonItem/useSkeletonItem.js

@@ -3,9 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useSkeletonItem_unstable", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useSkeletonItemBase_unstable: function() {
+        return useSkeletonItemBase_unstable;
+    },
+    useSkeletonItem_unstable: function() {
         return useSkeletonItem_unstable;
     }
 });
@@ -15,21 +23,24 @@ const _reactutilities = require("@fluentui/react-utilities");
 const _SkeletonContext = require("../../contexts/SkeletonContext");
 const useSkeletonItem_unstable = (props, ref)=>{
     const { animation: contextAnimation, appearance: contextAppearance, size: contextSize, shape: contextShape } = (0, _SkeletonContext.useSkeletonContext)();
-    const { animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave', appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque', size = contextSize !== null && contextSize !== void 0 ? contextSize : 16, shape = contextShape !== null && contextShape !== void 0 ? contextShape : 'rectangle' } = 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
+    };
+};
+const useSkeletonItemBase_unstable = (props, ref)=>{
     const root = _reactutilities.slot.always((0, _reactutilities.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-commonjs/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;;;;;+BAgBaI;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;iCACxC,iCAAiC;AAY7D,iCAAiC,CAACC,OAA0BC;IACjE,MAAM,EACJC,WAAWC,gBAAgB,EAC3BC,YAAYC,iBAAiB,EAC7BC,MAAMC,WAAW,EACjBC,OAAOC,YAAY,EACpB,OAAGX,mCAAAA;IACJ,MAAM,EACJI,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EACtCC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAC1CC,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,EAAE,EACxBC,QAAQC,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,eAAgB,WAAW,EACpC,GAAGT;IAEJ,MAAMU,OAAOb,oBAAAA,CAAKc,MAAM,KACtBf,wCAAAA,EAAyB,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;;;;;;;;;;;;IAqDaiB,4BAAAA;;;4BAhCAb;;;;;iEAnBU,QAAQ;gCACgB,4BAA4B;iCACxC,iCAAiC;AAiB7D,MAAMA,2BAA2B,CAACC,OAA0BC;IACjE,MAAM,EACJC,WAAWC,gBAAgB,EAC3BC,YAAYC,iBAAiB,EAC7BC,MAAMC,WAAW,EACjBC,OAAOC,YAAY,EACpB,GAAGX,uCAAAA;IACJ,MAAM,EACJI,YAAYC,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoB,MAAM,EACtCC,aAAaC,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,oBAAqB,QAAQ,EAC1CC,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,EAAE,EACxBC,QAAQC,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,eAAgB,WAAW,EACnC,GAAGC,WACJ,GAAGV;IAEJ,MAAMW,YAAYC,6BAA6BF,WAAWT;IAE1D,OAAO;QACL,GAAGU,SAAS;QACZT;QACAE;QACAE;QACAE;IACF;AACF,EAAE;AAQK,qCAAqC,CAC1CR,OACAC;IAEA,MAAMY,OAAOhB,oBAAAA,CAAKiB,MAAM,KACtBlB,wCAAAA,EAAyB,OAAO;QAC9BK;QACA,GAAGD,KAAK;IACV,IACA;QAAEe,aAAa;IAAM;IAEvB,OAAO;QAAEC,YAAY;YAAEH,MAAM;QAAM;QAAGA;IAAK;AAC7C,EAAE"}

package/lib-commonjs/index.js

@@ -30,9 +30,15 @@ _export(exports, {
     skeletonItemClassNames: function() {
         return _SkeletonItem.skeletonItemClassNames;
     },
+    useSkeletonBase_unstable: function() {
+        return _Skeleton.useSkeletonBase_unstable;
+    },
     useSkeletonContext: function() {
         return _index.useSkeletonContext;
     },
+    useSkeletonItemBase_unstable: function() {
+        return _SkeletonItem.useSkeletonItemBase_unstable;
+    },
     useSkeletonItemStyles_unstable: function() {
         return _SkeletonItem.useSkeletonItemStyles_unstable;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Skeleton,\n  renderSkeleton_unstable,\n  skeletonClassNames,\n  useSkeletonStyles_unstable,\n  useSkeleton_unstable,\n} from './Skeleton';\nexport type { SkeletonProps, SkeletonSlots, SkeletonState } from './Skeleton';\nexport {\n  SkeletonItem,\n  renderSkeletonItem_unstable,\n  skeletonItemClassNames,\n  useSkeletonItemStyles_unstable,\n  useSkeletonItem_unstable,\n} from './SkeletonItem';\nexport type { SkeletonItemProps, SkeletonItemSlots, SkeletonItemState } from './SkeletonItem';\nexport { SkeletonContextProvider, useSkeletonContext } from './contexts/index';\nexport type { SkeletonContextValue } from './contexts/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonStyles_unstable","useSkeleton_unstable","SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","SkeletonContextProvider","useSkeletonContext"],"mappings":";;;;;;;;;;;IACEA;iCAAQ;;2BAesB;eAAvBU;;;eAPPL,0BAAY;;IACZC;wDAA2B;;;eAR3BL,iCAAuB;;;eACvBC,4BAAkB;;;eAQlBK,oCAAsB;;;eAKUI,yBAAkB;;;eAJlDH,4CAA8B;;;eAC9BC,sCAAwB;;IATxBN;mDAA0B;;;eAC1BC,8BAAoB;;;0BACf,aAAa;8BAQb,iBAAiB;uBAEoC,mBAAmB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Skeleton,\n  renderSkeleton_unstable,\n  skeletonClassNames,\n  useSkeletonStyles_unstable,\n  useSkeleton_unstable,\n  useSkeletonBase_unstable,\n} from './Skeleton';\nexport type { SkeletonBaseProps, SkeletonProps, SkeletonSlots, SkeletonBaseState, SkeletonState } from './Skeleton';\nexport {\n  SkeletonItem,\n  renderSkeletonItem_unstable,\n  skeletonItemClassNames,\n  useSkeletonItemStyles_unstable,\n  useSkeletonItem_unstable,\n  useSkeletonItemBase_unstable,\n} from './SkeletonItem';\nexport type {\n  SkeletonItemBaseProps,\n  SkeletonItemProps,\n  SkeletonItemSlots,\n  SkeletonItemBaseState,\n  SkeletonItemState,\n} from './SkeletonItem';\nexport { SkeletonContextProvider, useSkeletonContext } from './contexts/index';\nexport type { SkeletonContextValue } from './contexts/index';\n"],"names":["Skeleton","renderSkeleton_unstable","skeletonClassNames","useSkeletonStyles_unstable","useSkeleton_unstable","useSkeletonBase_unstable","SkeletonItem","renderSkeletonItem_unstable","skeletonItemClassNames","useSkeletonItemStyles_unstable","useSkeletonItem_unstable","useSkeletonItemBase_unstable","SkeletonContextProvider","useSkeletonContext"],"mappings":";;;;;;;;;;;IACEA;iCAAQ;;2BAuBsB;eAAvBY;;;eAdPN,0BAAY;;+BACe;eAA3BC;;;eATAN,iCAAuB;;;eACvBC,4BAAkB;;IASlBM;mDAAsB;;;eANtBH,kCAAwB;;IAkBQQ;wCAAkB;;;eATlDF,0CAA4B;;;eAF5BF,4CAA8B;;;eAC9BC,sCAAwB;;;eAVxBP,oCAA0B;;;eAC1BC,8BAAoB;;;0BAEf,aAAa;8BASb,iBAAiB;uBAQoC,mBAAmB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-skeleton",
-  "version": "9.6.0",
+  "version": "9.7.1",
   "description": "Converged v9 Skeleton Component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,7 +12,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.4.16",
+    "@fluentui/react-field": "^9.5.0",
     "@fluentui/react-jsx-runtime": "^9.4.1",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",