@fluentui/react-skeleton 9.0.3 → 9.0.5

package/CHANGELOG.json

@@ -2,7 +2,97 @@
   "name": "@fluentui/react-skeleton",
   "entries": [
     {
-      "date": "Thu, 25 May 2023 09:57:45 GMT",
+      "date": "Tue, 20 Jun 2023 12:34:47 GMT",
+      "tag": "@fluentui/react-skeleton_v9.0.5",
+      "version": "9.0.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-skeleton",
+            "commit": "1289febede874642bab144c3f59b0498cbc85d72",
+            "comment": "fix: Add reduced motion styling for Skeleton"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-skeleton",
+            "comment": "Bump @fluentui/react-field to v9.1.7",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-skeleton",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.7",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-skeleton",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.5.1",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-skeleton",
+            "comment": "Bump @fluentui/react-theme to v9.1.9",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-skeleton",
+            "comment": "Bump @fluentui/react-utilities to v9.9.3",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-skeleton",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.23",
+            "commit": "81c9b35e0830297b2aca2cece2ae67b3899c4647"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 31 May 2023 06:46:18 GMT",
+      "tag": "@fluentui/react-skeleton_v9.0.4",
+      "version": "9.0.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-skeleton",
+            "commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
+            "comment": "chore: Update Griffel to v1.5.7."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-skeleton",
+            "comment": "Bump @fluentui/react-field to v9.1.6",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-skeleton",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-skeleton",
+            "comment": "Bump @fluentui/react-utilities to v9.9.2",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-skeleton",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22",
+            "commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 25 May 2023 10:00:48 GMT",
       "tag": "@fluentui/react-skeleton_v9.0.3",
       "version": "9.0.3",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,40 @@
 # Change Log - @fluentui/react-skeleton
 
-This log was last generated on Thu, 25 May 2023 09:57:45 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Jun 2023 12:34:47 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.5)
+
+Tue, 20 Jun 2023 12:34:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.4..@fluentui/react-skeleton_v9.0.5)
+
+### Patches
+
+- fix: Add reduced motion styling for Skeleton ([PR #28086](https://github.com/microsoft/fluentui/pull/28086) by ololubek@microsoft.com)
+- Bump @fluentui/react-field to v9.1.7 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.7 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.5.1 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-theme to v9.1.9 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-utilities to v9.9.3 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.23 ([PR #28229](https://github.com/microsoft/fluentui/pull/28229) by beachball)
+
+## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.4)
+
+Wed, 31 May 2023 06:46:18 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.3..@fluentui/react-skeleton_v9.0.4)
+
+### Patches
+
+- chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-field to v9.1.6 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.6 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.22 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
+
 ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.0.3)
 
-Thu, 25 May 2023 09:57:45 GMT 
+Thu, 25 May 2023 10:00:48 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.0.2..@fluentui/react-skeleton_v9.0.3)
 
 ### Patches

package/lib/Skeleton.js

@@ -1,2 +1 @@
 export * from './components/Skeleton/index';
-//# sourceMappingURL=Skeleton.js.map

package/lib/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../src/Skeleton.ts"],"sourcesContent":["export * from './components/Skeleton/index';\n"],"mappings":"AAAA,cAAc"}
+{"version":3,"sources":["Skeleton.ts"],"sourcesContent":["export * from './components/Skeleton/index';\n"],"names":[],"mappings":"AAAA,cAAc,8BAA8B"}

package/lib/SkeletonItem.js

@@ -1,2 +1 @@
 export * from './components/SkeletonItem/index';
-//# sourceMappingURL=SkeletonItem.js.map

package/lib/SkeletonItem.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../src/SkeletonItem.ts"],"sourcesContent":["export * from './components/SkeletonItem/index';\n"],"mappings":"AAAA,cAAc"}
+{"version":3,"sources":["SkeletonItem.ts"],"sourcesContent":["export * from './components/SkeletonItem/index';\n"],"names":[],"mappings":"AAAA,cAAc,kCAAkC"}

package/lib/components/Skeleton/Skeleton.js

@@ -5,12 +5,10 @@ import { useSkeletonStyles_unstable } from './useSkeletonStyles';
 import { useSkeletonContextValues } from './useSkeletonContextValues';
 /**
  * Skeleton component - TODO: add more docs
- */
-export const Skeleton = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useSkeleton_unstable(props, ref);
-  const contextValues = useSkeletonContextValues(state);
-  useSkeletonStyles_unstable(state);
-  return renderSkeleton_unstable(state, contextValues);
+ */ export const Skeleton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useSkeleton_unstable(props, ref);
+    const contextValues = useSkeletonContextValues(state);
+    useSkeletonStyles_unstable(state);
+    return renderSkeleton_unstable(state, contextValues);
 });
 Skeleton.displayName = 'Skeleton';
-//# sourceMappingURL=Skeleton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useSkeleton_unstable","renderSkeleton_unstable","useSkeletonStyles_unstable","useSkeletonContextValues","Skeleton","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSkeleton_unstable } from './useSkeleton';\nimport { renderSkeleton_unstable } from './renderSkeleton';\nimport { useSkeletonStyles_unstable } from './useSkeletonStyles';\nimport { useSkeletonContextValues } from './useSkeletonContextValues';\nimport type { SkeletonProps } from './Skeleton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Skeleton component - TODO: add more docs\n */\nexport const Skeleton: ForwardRefComponent<SkeletonProps> = React.forwardRef((props, ref) => {\n  const state = useSkeleton_unstable(props, ref);\n  const contextValues = useSkeletonContextValues(state);\n\n  useSkeletonStyles_unstable(state);\n  return renderSkeleton_unstable(state, contextValues);\n});\n\nSkeleton.displayName = 'Skeleton';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,wBAAwB,QAAQ;AAIzC;;;AAGA,OAAO,MAAMC,QAAA,gBAA+CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3F,MAAMC,KAAA,GAAQR,oBAAA,CAAqBM,KAAA,EAAOC,GAAA;EAC1C,MAAME,aAAA,GAAgBN,wBAAA,CAAyBK,KAAA;EAE/CN,0BAAA,CAA2BM,KAAA;EAC3B,OAAOP,uBAAA,CAAwBO,KAAA,EAAOC,aAAA;AACxC;AAEAL,QAAA,CAASM,WAAW,GAAG"}
+{"version":3,"sources":["Skeleton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSkeleton_unstable } from './useSkeleton';\nimport { renderSkeleton_unstable } from './renderSkeleton';\nimport { useSkeletonStyles_unstable } from './useSkeletonStyles';\nimport { useSkeletonContextValues } from './useSkeletonContextValues';\nimport type { SkeletonProps } from './Skeleton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Skeleton component - TODO: add more docs\n */\nexport const Skeleton: ForwardRefComponent<SkeletonProps> = React.forwardRef((props, ref) => {\n  const state = useSkeleton_unstable(props, ref);\n  const contextValues = useSkeletonContextValues(state);\n\n  useSkeletonStyles_unstable(state);\n  return renderSkeleton_unstable(state, contextValues);\n});\n\nSkeleton.displayName = 'Skeleton';\n"],"names":["React","useSkeleton_unstable","renderSkeleton_unstable","useSkeletonStyles_unstable","useSkeletonContextValues","Skeleton","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,QAAQ,6BAA6B;AAItE;;CAEC,GACD,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IAC3F,MAAMC,QAAQR,qBAAqBM,OAAOC;IAC1C,MAAME,gBAAgBN,yBAAyBK;IAE/CN,2BAA2BM;IAC3B,OAAOP,wBAAwBO,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

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

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=Skeleton.types.js.map
+export { };

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

@@ -1 +1 @@
-{"version":3,"names":[],"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'>>;\n};\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   */\n  width?: number | string;\n};\n\nexport type SkeletonContextValues = {\n  skeletonGroup: SkeletonContextValue;\n};\n\n/**\n * State used in rendering Skeleton\n */\nexport type SkeletonState = ComponentState<SkeletonSlots> & Required<Pick<SkeletonProps, 'animation' | 'appearance'>>;\n"],"mappings":"AAAA"}
+{"version":3,"sources":["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'>>;\n};\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   */\n  width?: number | string;\n};\n\nexport type SkeletonContextValues = {\n  skeletonGroup: SkeletonContextValue;\n};\n\n/**\n * State used in rendering Skeleton\n */\nexport type SkeletonState = ComponentState<SkeletonSlots> & Required<Pick<SkeletonProps, 'animation' | 'appearance'>>;\n"],"names":[],"mappings":"AAAA,WAyCsH"}

package/lib/components/Skeleton/index.js

@@ -4,4 +4,3 @@ export * from './renderSkeleton';
 export * from './useSkeleton';
 export * from './useSkeletonContextValues';
 export * from './useSkeletonStyles';
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Skeleton/index.ts"],"sourcesContent":["export * from './Skeleton';\nexport * from './Skeleton.types';\nexport * from './renderSkeleton';\nexport * from './useSkeleton';\nexport * from './useSkeletonContextValues';\nexport * from './useSkeletonStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Skeleton';\nexport * from './Skeleton.types';\nexport * from './renderSkeleton';\nexport * from './useSkeleton';\nexport * from './useSkeletonContextValues';\nexport * from './useSkeletonStyles';\n"],"names":[],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,mBAAmB;AACjC,cAAc,mBAAmB;AACjC,cAAc,gBAAgB;AAC9B,cAAc,6BAA6B;AAC3C,cAAc,sBAAsB"}

package/lib/components/Skeleton/renderSkeleton.js

@@ -1,16 +1,11 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 import { SkeletonContextProvider } from '../../contexts/SkeletonContext';
 /**
  * Render the final JSX of Skeleton
- */
-export const renderSkeleton_unstable = (state, contextValues) => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(SkeletonContextProvider, {
-    value: contextValues.skeletonGroup
-  }, /*#__PURE__*/createElement(slots.root, slotProps.root));
+ */ export const renderSkeleton_unstable = (state, contextValues)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(SkeletonContextProvider, {
+        value: contextValues.skeletonGroup
+    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));
 };
-//# sourceMappingURL=renderSkeleton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","SkeletonContextProvider","renderSkeleton_unstable","state","contextValues","slots","slotProps","value","skeletonGroup","root"],"sources":["../../../src/components/Skeleton/renderSkeleton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { SkeletonContextProvider } from '../../contexts/SkeletonContext';\nimport type { SkeletonContextValues, SkeletonSlots, SkeletonState } from './Skeleton.types';\n\n/**\n * Render the final JSX of Skeleton\n */\nexport const renderSkeleton_unstable = (state: SkeletonState, contextValues: SkeletonContextValues) => {\n  const { slots, slotProps } = getSlotsNext<SkeletonSlots>(state);\n\n  return (\n    <SkeletonContextProvider value={contextValues.skeletonGroup}>\n      <slots.root {...slotProps.root} />\n    </SkeletonContextProvider>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAC7B,SAASC,uBAAuB,QAAQ;AAGxC;;;AAGA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAsBC,aAAA,KAAyC;EACrG,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAA4BG,KAAA;EAEzD,oBACEJ,aAfJ,CAeKE,uBAAA;IAAwBM,KAAA,EAAOH,aAAA,CAAcI;kBAC5CT,aAhBN,CAgBOM,KAAA,CAAMI,IAAI,EAAKH,SAAA,CAAUG,IAAI;AAGpC"}
+{"version":3,"sources":["renderSkeleton.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { SkeletonContextProvider } from '../../contexts/SkeletonContext';\nimport type { SkeletonContextValues, SkeletonSlots, SkeletonState } from './Skeleton.types';\n\n/**\n * Render the final JSX of Skeleton\n */\nexport const renderSkeleton_unstable = (state: SkeletonState, contextValues: SkeletonContextValues) => {\n  const { slots, slotProps } = getSlotsNext<SkeletonSlots>(state);\n\n  return (\n    <SkeletonContextProvider value={contextValues.skeletonGroup}>\n      <slots.root {...slotProps.root} />\n    </SkeletonContextProvider>\n  );\n};\n"],"names":["createElement","getSlotsNext","SkeletonContextProvider","renderSkeleton_unstable","state","contextValues","slots","slotProps","value","skeletonGroup","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,uBAAuB,QAAQ,iCAAiC;AAGzE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC,gBAAyC;IACrG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA4BG;IAEzD,qBACE,AAfJ,cAeKF;QAAwBM,OAAOH,cAAcI,aAAa;qBACzD,AAhBN,cAgBOH,MAAMI,IAAI,EAAKH,UAAUG,IAAI;AAGpC,EAAE"}

package/lib/components/Skeleton/useSkeleton.js

@@ -9,30 +9,22 @@ import { useSkeletonContext } from '../../contexts/SkeletonContext';
  *
  * @param props - props from this instance of Skeleton
  * @param ref - reference to root HTMLElement of Skeleton
- */
-export const useSkeleton_unstable = (props, ref) => {
-  const {
-    animation: contextAnimation,
-    appearance: contextAppearance
-  } = useSkeletonContext();
-  const {
-    animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave',
-    appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque'
-  } = props;
-  const root = getNativeElementProps('div', {
-    ref,
-    role: 'progressbar',
-    'aria-busy': true,
-    'aria-label': 'Loading Content',
-    ...props
-  });
-  return {
-    animation,
-    appearance,
-    components: {
-      root: 'div'
-    },
-    root
-  };
+ */ 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'  } = props;
+    const root = getNativeElementProps('div', {
+        ref,
+        role: 'progressbar',
+        'aria-busy': true,
+        'aria-label': 'Loading Content',
+        ...props
+    });
+    return {
+        animation,
+        appearance,
+        components: {
+            root: 'div'
+        },
+        root
+    };
 };
-//# sourceMappingURL=useSkeleton.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","root","role","components"],"sources":["../../../src/components/Skeleton/useSkeleton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } 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' } = props;\n\n  const root = getNativeElementProps('div', {\n    ref,\n    role: 'progressbar',\n    'aria-busy': true,\n    'aria-label': 'Loading Content',\n    ...props,\n  });\n\n  return {\n    animation,\n    appearance,\n    components: {\n      root: 'div',\n    },\n    root,\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AAEtC,SAASC,kBAAkB,QAAQ;AAEnC;;;;;;;;;AASA,OAAO,MAAMC,oBAAA,GAAuBA,CAACC,KAAA,EAAsBC,GAAA,KAA+C;EACxG,MAAM;IAAEC,SAAA,EAAWC,gBAAA;IAAkBC,UAAA,EAAYC;EAAiB,CAAE,GAAGP,kBAAA;EACvE,MAAM;IAAEI,SAAA,GAAYC,gBAAA,aAAAA,gBAAA,cAAAA,gBAAA,GAAoB,MAAM;IAAEC,UAAA,GAAaC,iBAAA,aAAAA,iBAAA,cAAAA,iBAAA,GAAqB;EAAQ,CAAE,GAAGL,KAAA;EAE/F,MAAMM,IAAA,GAAOT,qBAAA,CAAsB,OAAO;IACxCI,GAAA;IACAM,IAAA,EAAM;IACN,aAAa,IAAI;IACjB,cAAc;IACd,GAAGP;EACL;EAEA,OAAO;IACLE,SAAA;IACAE,UAAA;IACAI,UAAA,EAAY;MACVF,IAAA,EAAM;IACR;IACAA;EACF;AACF"}
+{"version":3,"sources":["useSkeleton.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } 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' } = props;\n\n  const root = getNativeElementProps('div', {\n    ref,\n    role: 'progressbar',\n    'aria-busy': true,\n    'aria-label': 'Loading Content',\n    ...props,\n  });\n\n  return {\n    animation,\n    appearance,\n    components: {\n      root: 'div',\n    },\n    root,\n  };\n};\n"],"names":["React","getNativeElementProps","useSkeletonContext","useSkeleton_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","root","role","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAElE,SAASC,kBAAkB,QAAQ,iCAAiC;AAEpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC,MAA+C;IACxG,MAAM,EAAEC,WAAWC,iBAAgB,EAAEC,YAAYC,kBAAiB,EAAE,GAAGP;IACvE,MAAM,EAAEI,WAAYC,6BAAAA,8BAAAA,mBAAoB,MAAM,CAAA,EAAEC,YAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,CAAA,EAAE,GAAGL;IAE/F,MAAMM,OAAOT,sBAAsB,OAAO;QACxCI;QACAM,MAAM;QACN,aAAa,IAAI;QACjB,cAAc;QACd,GAAGP,KAAK;IACV;IAEA,OAAO;QACLE;QACAE;QACAI,YAAY;YACVF,MAAM;QACR;QACAA;IACF;AACF,EAAE"}

package/lib/components/Skeleton/useSkeletonContextValues.js

@@ -1,15 +1,14 @@
 import * as React from 'react';
-export const useSkeletonContextValues = state => {
-  const {
-    animation,
-    appearance
-  } = state;
-  const skeletonGroup = React.useMemo(() => ({
-    animation,
-    appearance
-  }), [animation, appearance]);
-  return {
-    skeletonGroup
-  };
+export const useSkeletonContextValues = (state)=>{
+    const { animation , appearance  } = state;
+    const skeletonGroup = React.useMemo(()=>({
+            animation,
+            appearance
+        }), [
+        animation,
+        appearance
+    ]);
+    return {
+        skeletonGroup
+    };
 };
-//# sourceMappingURL=useSkeletonContextValues.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useSkeletonContextValues","state","animation","appearance","skeletonGroup","useMemo"],"sources":["../../../src/components/Skeleton/useSkeletonContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { SkeletonContextValues, SkeletonState } from '../Skeleton';\n\nexport const useSkeletonContextValues = (state: SkeletonState): SkeletonContextValues => {\n  const { animation, appearance } = state;\n\n  const skeletonGroup = React.useMemo(\n    () => ({\n      animation,\n      appearance,\n    }),\n    [animation, appearance],\n  );\n\n  return { skeletonGroup };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAGvB,OAAO,MAAMC,wBAAA,GAA4BC,KAAA,IAAgD;EACvF,MAAM;IAAEC,SAAA;IAAWC;EAAU,CAAE,GAAGF,KAAA;EAElC,MAAMG,aAAA,GAAgBL,KAAA,CAAMM,OAAO,CACjC,OAAO;IACLH,SAAA;IACAC;EACF,IACA,CAACD,SAAA,EAAWC,UAAA,CAAW;EAGzB,OAAO;IAAEC;EAAc;AACzB"}
+{"version":3,"sources":["useSkeletonContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { SkeletonContextValues, SkeletonState } from '../Skeleton';\n\nexport const useSkeletonContextValues = (state: SkeletonState): SkeletonContextValues => {\n  const { animation, appearance } = state;\n\n  const skeletonGroup = React.useMemo(\n    () => ({\n      animation,\n      appearance,\n    }),\n    [animation, appearance],\n  );\n\n  return { skeletonGroup };\n};\n"],"names":["React","useSkeletonContextValues","state","animation","appearance","skeletonGroup","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,MAAMC,2BAA2B,CAACC,QAAgD;IACvF,MAAM,EAAEC,UAAS,EAAEC,WAAU,EAAE,GAAGF;IAElC,MAAMG,gBAAgBL,MAAMM,OAAO,CACjC,IAAO,CAAA;YACLH;YACAC;QACF,CAAA,GACA;QAACD;QAAWC;KAAW;IAGzB,OAAO;QAAEC;IAAc;AACzB,EAAE"}

package/lib/components/Skeleton/useSkeletonStyles.js

@@ -1,12 +1,10 @@
 import { mergeClasses } from '@griffel/react';
 export const skeletonClassNames = {
-  root: 'fui-Skeleton'
+    root: 'fui-Skeleton'
 };
 /**
  * Apply styling to the Skeleton slots based on the state
- */
-export const useSkeletonStyles_unstable = state => {
-  state.root.className = mergeClasses(skeletonClassNames.root, state.root.className);
-  return state;
+ */ export const useSkeletonStyles_unstable = (state)=>{
+    state.root.className = mergeClasses(skeletonClassNames.root, state.root.className);
+    return state;
 };
-//# sourceMappingURL=useSkeletonStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["mergeClasses","skeletonClassNames","root","useSkeletonStyles_unstable","state","className"],"sources":["../../../src/components/Skeleton/useSkeletonStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { SkeletonSlots, SkeletonState } from './Skeleton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nexport const skeletonClassNames: SlotClassNames<SkeletonSlots> = {\n  root: 'fui-Skeleton',\n};\n\n/**\n * Apply styling to the Skeleton slots based on the state\n */\nexport const useSkeletonStyles_unstable = (state: SkeletonState): SkeletonState => {\n  state.root.className = mergeClasses(skeletonClassNames.root, state.root.className);\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ;AAG7B,OAAO,MAAMC,kBAAA,GAAoD;EAC/DC,IAAA,EAAM;AACR;AAEA;;;AAGA,OAAO,MAAMC,0BAAA,GAA8BC,KAAA,IAAwC;EACjFA,KAAA,CAAMF,IAAI,CAACG,SAAS,GAAGL,YAAA,CAAaC,kBAAA,CAAmBC,IAAI,EAAEE,KAAA,CAAMF,IAAI,CAACG,SAAS;EAEjF,OAAOD,KAAA;AACT"}
+{"version":3,"sources":["useSkeletonStyles.ts"],"sourcesContent":["import { mergeClasses } from '@griffel/react';\nimport type { SkeletonSlots, SkeletonState } from './Skeleton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nexport const skeletonClassNames: SlotClassNames<SkeletonSlots> = {\n  root: 'fui-Skeleton',\n};\n\n/**\n * Apply styling to the Skeleton slots based on the state\n */\nexport const useSkeletonStyles_unstable = (state: SkeletonState): SkeletonState => {\n  state.root.className = mergeClasses(skeletonClassNames.root, state.root.className);\n\n  return state;\n};\n"],"names":["mergeClasses","skeletonClassNames","root","useSkeletonStyles_unstable","state","className"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAG9C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAAwC;IACjFA,MAAMF,IAAI,CAACG,SAAS,GAAGL,aAAaC,mBAAmBC,IAAI,EAAEE,MAAMF,IAAI,CAACG,SAAS;IAEjF,OAAOD;AACT,EAAE"}

package/lib/components/SkeletonItem/SkeletonItem.js

@@ -2,10 +2,9 @@ import * as React from 'react';
 import { useSkeletonItem_unstable } from './useSkeletonItem';
 import { renderSkeletonItem_unstable } from './renderSkeletonItem';
 import { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';
-export const SkeletonItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useSkeletonItem_unstable(props, ref);
-  useSkeletonItemStyles_unstable(state);
-  return renderSkeletonItem_unstable(state);
+export const SkeletonItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useSkeletonItem_unstable(props, ref);
+    useSkeletonItemStyles_unstable(state);
+    return renderSkeletonItem_unstable(state);
 });
 SkeletonItem.displayName = 'SkeletonItem';
-//# sourceMappingURL=SkeletonItem.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useSkeletonItem_unstable","renderSkeletonItem_unstable","useSkeletonItemStyles_unstable","SkeletonItem","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/SkeletonItem/SkeletonItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSkeletonItem_unstable } from './useSkeletonItem';\nimport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nimport { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\nimport type { SkeletonItemProps } from './SkeletonItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const SkeletonItem: ForwardRefComponent<SkeletonItemProps> = React.forwardRef((props, ref) => {\n  const state = useSkeletonItem_unstable(props, ref);\n\n  useSkeletonItemStyles_unstable(state);\n  return renderSkeletonItem_unstable(state);\n});\n\nSkeletonItem.displayName = 'SkeletonItem';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,wBAAwB,QAAQ;AACzC,SAASC,2BAA2B,QAAQ;AAC5C,SAASC,8BAA8B,QAAQ;AAI/C,OAAO,MAAMC,YAAA,gBAAuDJ,KAAA,CAAMK,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACnG,MAAMC,KAAA,GAAQP,wBAAA,CAAyBK,KAAA,EAAOC,GAAA;EAE9CJ,8BAAA,CAA+BK,KAAA;EAC/B,OAAON,2BAAA,CAA4BM,KAAA;AACrC;AAEAJ,YAAA,CAAaK,WAAW,GAAG"}
+{"version":3,"sources":["SkeletonItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSkeletonItem_unstable } from './useSkeletonItem';\nimport { renderSkeletonItem_unstable } from './renderSkeletonItem';\nimport { useSkeletonItemStyles_unstable } from './useSkeletonItemStyles.styles';\nimport type { SkeletonItemProps } from './SkeletonItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nexport const SkeletonItem: ForwardRefComponent<SkeletonItemProps> = React.forwardRef((props, ref) => {\n  const state = useSkeletonItem_unstable(props, ref);\n\n  useSkeletonItemStyles_unstable(state);\n  return renderSkeletonItem_unstable(state);\n});\n\nSkeletonItem.displayName = 'SkeletonItem';\n"],"names":["React","useSkeletonItem_unstable","renderSkeletonItem_unstable","useSkeletonItemStyles_unstable","SkeletonItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAIhF,OAAO,MAAMC,6BAAuDJ,MAAMK,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACnG,MAAMC,QAAQP,yBAAyBK,OAAOC;IAE9CJ,+BAA+BK;IAC/B,OAAON,4BAA4BM;AACrC,GAAG;AAEHJ,aAAaK,WAAW,GAAG"}

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

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=SkeletonItem.types.js.map
+export { };

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/SkeletonItem/SkeletonItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SkeletonItemSlots = {\n  root: Slot<'div'>;\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 * SkeletonItem Props\n */\nexport type SkeletonItemProps = ComponentProps<SkeletonItemSlots> & {\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   * Sets the size of the SkeletonItem in pixels.\n   * Size is restricted to a limited set of values recommended for most uses(see SkeletonItemSize).\n   * To set a non-supported size, set `width` and `height` to override the rendered size.\n   * @default 16\n   */\n  size?: SkeletonItemSize;\n\n  /**\n   * Sets the shape of the SkeletonItem.\n   * @default rectangle\n   */\n  shape?: 'circle' | 'square' | 'rectangle';\n};\n\n/**\n * State used in rendering SkeletonItem\n */\nexport type SkeletonItemState = ComponentState<SkeletonItemSlots> &\n  Required<Pick<SkeletonItemProps, 'animation' | 'appearance' | 'size' | 'shape'>>;\n"],"mappings":"AAAA"}
+{"version":3,"sources":["SkeletonItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SkeletonItemSlots = {\n  root: Slot<'div'>;\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 * SkeletonItem Props\n */\nexport type SkeletonItemProps = ComponentProps<SkeletonItemSlots> & {\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   * Sets the size of the SkeletonItem in pixels.\n   * Size is restricted to a limited set of values recommended for most uses(see SkeletonItemSize).\n   * To set a non-supported size, set `width` and `height` to override the rendered size.\n   * @default 16\n   */\n  size?: SkeletonItemSize;\n\n  /**\n   * Sets the shape of the SkeletonItem.\n   * @default rectangle\n   */\n  shape?: 'circle' | 'square' | 'rectangle';\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":"AAAA,WA8CmF"}

package/lib/components/SkeletonItem/index.js

@@ -3,4 +3,3 @@ export * from './SkeletonItem.types';
 export * from './renderSkeletonItem';
 export * from './useSkeletonItem';
 export * from './useSkeletonItemStyles.styles';
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/SkeletonItem/index.ts"],"sourcesContent":["export * from './SkeletonItem';\nexport * from './SkeletonItem.types';\nexport * from './renderSkeletonItem';\nexport * from './useSkeletonItem';\nexport * from './useSkeletonItemStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './SkeletonItem';\nexport * from './SkeletonItem.types';\nexport * from './renderSkeletonItem';\nexport * from './useSkeletonItem';\nexport * from './useSkeletonItemStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,iBAAiB;AAC/B,cAAc,uBAAuB;AACrC,cAAc,uBAAuB;AACrC,cAAc,oBAAoB;AAClC,cAAc,iCAAiC"}

package/lib/components/SkeletonItem/renderSkeletonItem.js

@@ -1,13 +1,8 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of SkeletonItem
- */
-export const renderSkeletonItem_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root);
+ */ export const renderSkeletonItem_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root);
 };
-//# sourceMappingURL=renderSkeletonItem.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","renderSkeletonItem_unstable","state","slots","slotProps","root"],"sources":["../../../src/components/SkeletonItem/renderSkeletonItem.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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) => {\n  const { slots, slotProps } = getSlotsNext<SkeletonItemSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,2BAAA,GAA+BC,KAAA,IAA6B;EACvE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAAgCE,KAAA;EAE7D,oBAAOH,aAbT,CAaUI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI;AACvC"}
+{"version":3,"sources":["renderSkeletonItem.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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) => {\n  const { slots, slotProps } = getSlotsNext<SkeletonItemSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"names":["createElement","getSlotsNext","renderSkeletonItem_unstable","state","slots","slotProps","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC,QAA6B;IACvE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAAgCE;IAE7D,qBAAO,AAbT,cAaUC,MAAME,IAAI,EAAKD,UAAUC,IAAI;AACvC,EAAE"}

package/lib/components/SkeletonItem/useSkeletonItem.js

@@ -9,31 +9,21 @@ import { useSkeletonContext } from '../../contexts/SkeletonContext';
  *
  * @param props - props from this instance of SkeletonItem
  * @param ref - reference to root HTMLElement of SkeletonItem
- */
-export const useSkeletonItem_unstable = (props, ref) => {
-  const {
-    animation: contextAnimation,
-    appearance: contextAppearance
-  } = useSkeletonContext();
-  const {
-    animation = contextAnimation !== null && contextAnimation !== void 0 ? contextAnimation : 'wave',
-    appearance = contextAppearance !== null && contextAppearance !== void 0 ? contextAppearance : 'opaque',
-    size = 16,
-    shape = 'rectangle'
-  } = props;
-  const root = getNativeElementProps('div', {
-    ref,
-    ...props
-  });
-  return {
-    appearance,
-    animation,
-    size,
-    shape,
-    components: {
-      root: 'div'
-    },
-    root
-  };
+ */ export const useSkeletonItem_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 =16 , shape ='rectangle'  } = props;
+    const root = getNativeElementProps('div', {
+        ref,
+        ...props
+    });
+    return {
+        appearance,
+        animation,
+        size,
+        shape,
+        components: {
+            root: 'div'
+        },
+        root
+    };
 };
-//# sourceMappingURL=useSkeletonItem.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","useSkeletonContext","useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","root","components"],"sources":["../../../src/components/SkeletonItem/useSkeletonItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } 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 { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n  const {\n    animation = contextAnimation ?? 'wave',\n    appearance = contextAppearance ?? 'opaque',\n    size = 16,\n    shape = 'rectangle',\n  } = props;\n\n  const root = getNativeElementProps('div', {\n    ref,\n    ...props,\n  });\n\n  return {\n    appearance,\n    animation,\n    size,\n    shape,\n    components: {\n      root: 'div',\n    },\n    root,\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,kBAAkB,QAAQ;AAGnC;;;;;;;;;AASA,OAAO,MAAMC,wBAAA,GAA2BA,CAACC,KAAA,EAA0BC,GAAA,KAAmD;EACpH,MAAM;IAAEC,SAAA,EAAWC,gBAAA;IAAkBC,UAAA,EAAYC;EAAiB,CAAE,GAAGP,kBAAA;EACvE,MAAM;IACJI,SAAA,GAAYC,gBAAA,aAAAA,gBAAA,cAAAA,gBAAA,GAAoB,MAAM;IACtCC,UAAA,GAAaC,iBAAA,aAAAA,iBAAA,cAAAA,iBAAA,GAAqB,QAAQ;IAC1CC,IAAA,GAAO;IACPC,KAAA,GAAQ;EAAW,CACpB,GAAGP,KAAA;EAEJ,MAAMQ,IAAA,GAAOX,qBAAA,CAAsB,OAAO;IACxCI,GAAA;IACA,GAAGD;EACL;EAEA,OAAO;IACLI,UAAA;IACAF,SAAA;IACAI,IAAA;IACAC,KAAA;IACAE,UAAA,EAAY;MACVD,IAAA,EAAM;IACR;IACAA;EACF;AACF"}
+{"version":3,"sources":["useSkeletonItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } 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 { animation: contextAnimation, appearance: contextAppearance } = useSkeletonContext();\n  const {\n    animation = contextAnimation ?? 'wave',\n    appearance = contextAppearance ?? 'opaque',\n    size = 16,\n    shape = 'rectangle',\n  } = props;\n\n  const root = getNativeElementProps('div', {\n    ref,\n    ...props,\n  });\n\n  return {\n    appearance,\n    animation,\n    size,\n    shape,\n    components: {\n      root: 'div',\n    },\n    root,\n  };\n};\n"],"names":["React","getNativeElementProps","useSkeletonContext","useSkeletonItem_unstable","props","ref","animation","contextAnimation","appearance","contextAppearance","size","shape","root","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAClE,SAASC,kBAAkB,QAAQ,iCAAiC;AAGpE;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CAACC,OAA0BC,MAAmD;IACpH,MAAM,EAAEC,WAAWC,iBAAgB,EAAEC,YAAYC,kBAAiB,EAAE,GAAGP;IACvE,MAAM,EACJI,WAAYC,6BAAAA,8BAAAA,mBAAoB,MAAM,CAAA,EACtCC,YAAaC,8BAAAA,+BAAAA,oBAAqB,QAAQ,CAAA,EAC1CC,MAAO,GAAE,EACTC,OAAQ,YAAW,EACpB,GAAGP;IAEJ,MAAMQ,OAAOX,sBAAsB,OAAO;QACxCI;QACA,GAAGD,KAAK;IACV;IAEA,OAAO;QACLI;QACAF;QACAI;QACAC;QACAE,YAAY;YACVD,MAAM;QACR;QACAA;IACF;AACF,EAAE"}

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

@@ -45,7 +45,9 @@ const useStyles = /*#__PURE__*/__styles({
     Bgh53k4: "f1dsdmen",
     w3vfg9: "f1cpbl36",
     vin17d: "f1a27w2r",
-    Ezkn3b: "f452v7t"
+    Ezkn3b: "f452v7t",
+    Gqtpxc: "f4akx1t",
+    B3vm3ge: "f18p5put"
   },
   wave: {
     Bv12yb3: "fj20wtk",
@@ -70,12 +72,16 @@ const useStyles = /*#__PURE__*/__styles({
   }
 }, {
   d: [".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1qx3921{-webkit-background-size:300% 100%;background-size:300% 100%;}", ".fj9j8l8{background-position-x:center;}", ".f1b6djjb{background-position-y:center;}", ".f1dsdmen{background-attachment:fixed;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f452v7t{-webkit-animation-timing-function:linear;animation-timing-function:linear;}", ".fj20wtk{-webkit-animation-name:fma800j;animation-name:fma800j;}", ".f101ziu5{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralStencil1) 0%,\n      var(--colorNeutralStencil2) 50%,\n      var(--colorNeutralStencil1) 100%);}", ".f152emvt{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralStencil1) 0%,\n      var(--colorNeutralStencil2) 50%,\n      var(--colorNeutralStencil1) 100%);}", ".f105t0nc{-webkit-animation-name:fj9wi3p;animation-name:fj9wi3p;}", ".fnm2mpv{-webkit-animation-name:f12o7gg6;animation-name:f12o7gg6;}", ".f1iuewzk{-webkit-animation-duration:1s;animation-duration:1s;}", ".f1gjxg63{background-color:var(--colorNeutralStencil1);}", ".fss7axp{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralStencil1Alpha) 0%,\n      var(--colorNeutralStencil2Alpha) 50%,\n      var(--colorNeutralStencil1Alpha) 100%);}", ".f4160cw{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralStencil1Alpha) 0%,\n      var(--colorNeutralStencil2Alpha) 50%,\n      var(--colorNeutralStencil1Alpha) 100%);}", ".f162mh4z{background-color:var(--colorNeutralStencil1Alpha);}"],
-  k: ["@-webkit-keyframes fma800j{from{background-position-x:300%;}to{background-position-x:0%;}}", "@keyframes fma800j{from{background-position-x:300%;}to{background-position-x:0%;}}", "@-webkit-keyframes fj9wi3p{from{background-position-x:0%;}to{background-position-x:300%;}}", "@keyframes fj9wi3p{from{background-position-x:0%;}to{background-position-x:300%;}}", "@-webkit-keyframes f12o7gg6{0%{opacity:1;}50%{opacity:0.4;}100%{opacity:1;}}", "@keyframes f12o7gg6{0%{opacity:1;}50%{opacity:0.4;}100%{opacity:1;}}"],
-  m: [["@media screen and (forced-colors: active){.f9jxvrw{background-color:WindowText;}}", {
+  m: [["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (forced-colors: active){.f9jxvrw{background-color:WindowText;}}", {
     m: "screen and (forced-colors: active)"
   }], ["@media screen and (forced-colors: active){.f9jxvrw{background-color:WindowText;}}", {
     m: "screen and (forced-colors: active)"
-  }]]
+  }]],
+  k: ["@-webkit-keyframes fma800j{from{background-position-x:300%;}to{background-position-x:0%;}}", "@keyframes fma800j{from{background-position-x:300%;}to{background-position-x:0%;}}", "@-webkit-keyframes fj9wi3p{from{background-position-x:0%;}to{background-position-x:300%;}}", "@keyframes fj9wi3p{from{background-position-x:0%;}to{background-position-x:300%;}}", "@-webkit-keyframes f12o7gg6{0%{opacity:1;}50%{opacity:0.4;}100%{opacity:1;}}", "@keyframes f12o7gg6{0%{opacity:1;}50%{opacity:0.4;}100%{opacity:1;}}"]
 });
 const useRectangleStyles = /*#__PURE__*/__styles({
   "8": {