@fluentui/react-skeleton 9.7.2 → 9.7.3

package/CHANGELOG.md

@@ -1,20 +1,31 @@
 # Change Log - @fluentui/react-skeleton
 
-This log was last generated on Thu, 23 Apr 2026 11:59:31 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:33:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.7.3)
+
+Tue, 26 May 2026 09:33:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.7.2..@fluentui/react-skeleton_v9.7.3)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
 ## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.7.2)
 
-Thu, 23 Apr 2026 11:59:31 GMT 
+Thu, 23 Apr 2026 14:21:11 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-skeleton_v9.7.1..@fluentui/react-skeleton_v9.7.2)
 
 ### Patches
 
 - fix: update types for render function ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
-- Bump @fluentui/react-field to v9.5.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
 
 ## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-skeleton_v9.7.1)
 

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

@@ -18,6 +18,7 @@ export const useSkeletonStyles_unstable = state => {
   'use no memo';
 
   const styles = useStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);
   return state;
 };

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

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

package/lib/components/Skeleton/useSkeletonStyles.styles.raw.js

@@ -13,6 +13,7 @@ const useStyles = makeStyles({
  */ export const useSkeletonStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);
     return state;
 };

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

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

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

@@ -269,6 +269,7 @@ export const useSkeletonItemStyles_unstable = state => {
   const rectStyles = useRectangleStyles();
   const sizeStyles = useSizeStyles();
   const circleStyles = useCircleSizeStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","Bsft5z2","ap17g6","E3zdtr","By385i5","Eqx8gd","B1piin3","bn5sak","B58onuk","s9ouvv","xr36ep","Bitv4sc","Gt9ir8","Crt7la","wave","De3pzq","Br128sd","h62rwi","b1kco5","Iqrfzq","pulse","Bjyk6c5","translucent","translucentPulse","blockStyling","mc9l5x","d","p","m","k","useRectangleStyles","Bqenvij","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"sources":["useSkeletonItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const skeletonItemClassNames = {\n    root: 'fui-SkeletonItem'\n};\nconst skeletonWaveAnimation = {\n    to: {\n        transform: 'translate(100%)'\n    }\n};\nconst skeletonPulseAnimation = {\n    '0%': {\n        opacity: '1'\n    },\n    '50%': {\n        opacity: '0.4'\n    },\n    '100%': {\n        opacity: '1'\n    }\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'relative',\n        overflow: 'hidden',\n        '::after': {\n            content: '\"\"',\n            display: 'block',\n            position: 'absolute',\n            inset: '0',\n            animationIterationCount: 'infinite',\n            animationDuration: '3s',\n            animationTimingFunction: 'ease-in-out',\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                animationDuration: '0.01ms',\n                animationIterationCount: '1'\n            }\n        }\n    },\n    wave: {\n        backgroundColor: tokens.colorNeutralStencil1,\n        '::after': {\n            animationName: skeletonWaveAnimation,\n            backgroundImage: `linear-gradient(\n        to right,\n        ${tokens.colorNeutralStencil1} 0%,\n        ${tokens.colorNeutralStencil2} 50%,\n        ${tokens.colorNeutralStencil1} 100%)`,\n            transform: 'translate(-100%)',\n            '@media screen and (forced-colors: active)': {\n                backgroundColor: 'WindowText'\n            }\n        }\n    },\n    pulse: {\n        '::after': {\n            animationName: skeletonPulseAnimation,\n            animationDuration: '1s',\n            backgroundColor: tokens.colorNeutralStencil1\n        }\n    },\n    translucent: {\n        backgroundColor: tokens.colorNeutralStencil1Alpha,\n        '::after': {\n            backgroundImage: `linear-gradient(\n      to right,\n      transparent 0%,\n      ${tokens.colorNeutralStencil1Alpha} 50%,\n      transparent 100%)`\n        }\n    },\n    translucentPulse: {\n        backgroundColor: 'none',\n        '::after': {\n            backgroundColor: tokens.colorNeutralStencil1Alpha\n        }\n    },\n    blockStyling: {\n        display: 'block'\n    }\n});\nconst useRectangleStyles = makeStyles({\n    root: {\n        width: '100%',\n        borderRadius: '4px'\n    },\n    8: {\n        height: '8px'\n    },\n    12: {\n        height: '12px'\n    },\n    14: {\n        height: '14px'\n    },\n    16: {\n        height: '16px'\n    },\n    20: {\n        height: '20px'\n    },\n    22: {\n        height: '22px'\n    },\n    24: {\n        height: '24px'\n    },\n    28: {\n        height: '28px'\n    },\n    32: {\n        height: '32px'\n    },\n    36: {\n        height: '36px'\n    },\n    40: {\n        height: '40px'\n    },\n    48: {\n        height: '48px'\n    },\n    52: {\n        height: '52px'\n    },\n    56: {\n        height: '56px'\n    },\n    64: {\n        height: '64px'\n    },\n    72: {\n        height: '72px'\n    },\n    92: {\n        height: '92px'\n    },\n    96: {\n        height: '96px'\n    },\n    120: {\n        height: '120px'\n    },\n    128: {\n        height: '128px'\n    }\n});\nconst useSizeStyles = makeStyles({\n    8: {\n        width: '8px',\n        height: '8px'\n    },\n    12: {\n        width: '12px',\n        height: '12px'\n    },\n    14: {\n        width: '14px',\n        height: '14px'\n    },\n    16: {\n        width: '16px',\n        height: '16px'\n    },\n    20: {\n        width: '20px',\n        height: '20px'\n    },\n    22: {\n        width: '22px',\n        height: '22px'\n    },\n    24: {\n        width: '24px',\n        height: '24px'\n    },\n    28: {\n        width: '28px',\n        height: '28px'\n    },\n    32: {\n        width: '32px',\n        height: '32px'\n    },\n    36: {\n        width: '36px',\n        height: '36px'\n    },\n    40: {\n        width: '40px',\n        height: '40px'\n    },\n    48: {\n        width: '48px',\n        height: '48px'\n    },\n    52: {\n        width: '52px',\n        height: '52px'\n    },\n    56: {\n        width: '56px',\n        height: '56px'\n    },\n    64: {\n        width: '64px',\n        height: '64px'\n    },\n    72: {\n        width: '72px',\n        height: '72px'\n    },\n    92: {\n        width: '92px',\n        height: '92px'\n    },\n    96: {\n        width: '96px',\n        height: '96px'\n    },\n    120: {\n        width: '120px',\n        height: '120px'\n    },\n    128: {\n        width: '128px',\n        height: '128px'\n    }\n});\nconst useCircleSizeStyles = makeStyles({\n    root: {\n        borderRadius: '50%'\n    }\n});\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */ export const useSkeletonItemStyles_unstable = (state)=>{\n    'use no memo';\n    const { animation, appearance, size, shape } = state;\n    const rootStyles = useStyles();\n    const rectStyles = useRectangleStyles();\n    const sizeStyles = useSizeStyles();\n    const circleStyles = useCircleSizeStyles();\n    state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__styles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","Bsft5z2","ap17g6","E3zdtr","By385i5","Eqx8gd","B1piin3","bn5sak","B58onuk","s9ouvv","xr36ep","Bitv4sc","Gt9ir8","Crt7la","wave","De3pzq","Br128sd","h62rwi","b1kco5","Iqrfzq","pulse","Bjyk6c5","translucent","translucentPulse","blockStyling","mc9l5x","d","p","m","k","useRectangleStyles","Bqenvij","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"sources":["useSkeletonItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const skeletonItemClassNames = {\n    root: 'fui-SkeletonItem'\n};\nconst skeletonWaveAnimation = {\n    to: {\n        transform: 'translate(100%)'\n    }\n};\nconst skeletonPulseAnimation = {\n    '0%': {\n        opacity: '1'\n    },\n    '50%': {\n        opacity: '0.4'\n    },\n    '100%': {\n        opacity: '1'\n    }\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'relative',\n        overflow: 'hidden',\n        '::after': {\n            content: '\"\"',\n            display: 'block',\n            position: 'absolute',\n            inset: '0',\n            animationIterationCount: 'infinite',\n            animationDuration: '3s',\n            animationTimingFunction: 'ease-in-out',\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                animationDuration: '0.01ms',\n                animationIterationCount: '1'\n            }\n        }\n    },\n    wave: {\n        backgroundColor: tokens.colorNeutralStencil1,\n        '::after': {\n            animationName: skeletonWaveAnimation,\n            backgroundImage: `linear-gradient(\n        to right,\n        ${tokens.colorNeutralStencil1} 0%,\n        ${tokens.colorNeutralStencil2} 50%,\n        ${tokens.colorNeutralStencil1} 100%)`,\n            transform: 'translate(-100%)',\n            '@media screen and (forced-colors: active)': {\n                backgroundColor: 'WindowText'\n            }\n        }\n    },\n    pulse: {\n        '::after': {\n            animationName: skeletonPulseAnimation,\n            animationDuration: '1s',\n            backgroundColor: tokens.colorNeutralStencil1\n        }\n    },\n    translucent: {\n        backgroundColor: tokens.colorNeutralStencil1Alpha,\n        '::after': {\n            backgroundImage: `linear-gradient(\n      to right,\n      transparent 0%,\n      ${tokens.colorNeutralStencil1Alpha} 50%,\n      transparent 100%)`\n        }\n    },\n    translucentPulse: {\n        backgroundColor: 'none',\n        '::after': {\n            backgroundColor: tokens.colorNeutralStencil1Alpha\n        }\n    },\n    blockStyling: {\n        display: 'block'\n    }\n});\nconst useRectangleStyles = makeStyles({\n    root: {\n        width: '100%',\n        borderRadius: '4px'\n    },\n    8: {\n        height: '8px'\n    },\n    12: {\n        height: '12px'\n    },\n    14: {\n        height: '14px'\n    },\n    16: {\n        height: '16px'\n    },\n    20: {\n        height: '20px'\n    },\n    22: {\n        height: '22px'\n    },\n    24: {\n        height: '24px'\n    },\n    28: {\n        height: '28px'\n    },\n    32: {\n        height: '32px'\n    },\n    36: {\n        height: '36px'\n    },\n    40: {\n        height: '40px'\n    },\n    48: {\n        height: '48px'\n    },\n    52: {\n        height: '52px'\n    },\n    56: {\n        height: '56px'\n    },\n    64: {\n        height: '64px'\n    },\n    72: {\n        height: '72px'\n    },\n    92: {\n        height: '92px'\n    },\n    96: {\n        height: '96px'\n    },\n    120: {\n        height: '120px'\n    },\n    128: {\n        height: '128px'\n    }\n});\nconst useSizeStyles = makeStyles({\n    8: {\n        width: '8px',\n        height: '8px'\n    },\n    12: {\n        width: '12px',\n        height: '12px'\n    },\n    14: {\n        width: '14px',\n        height: '14px'\n    },\n    16: {\n        width: '16px',\n        height: '16px'\n    },\n    20: {\n        width: '20px',\n        height: '20px'\n    },\n    22: {\n        width: '22px',\n        height: '22px'\n    },\n    24: {\n        width: '24px',\n        height: '24px'\n    },\n    28: {\n        width: '28px',\n        height: '28px'\n    },\n    32: {\n        width: '32px',\n        height: '32px'\n    },\n    36: {\n        width: '36px',\n        height: '36px'\n    },\n    40: {\n        width: '40px',\n        height: '40px'\n    },\n    48: {\n        width: '48px',\n        height: '48px'\n    },\n    52: {\n        width: '52px',\n        height: '52px'\n    },\n    56: {\n        width: '56px',\n        height: '56px'\n    },\n    64: {\n        width: '64px',\n        height: '64px'\n    },\n    72: {\n        width: '72px',\n        height: '72px'\n    },\n    92: {\n        width: '92px',\n        height: '92px'\n    },\n    96: {\n        width: '96px',\n        height: '96px'\n    },\n    120: {\n        width: '120px',\n        height: '120px'\n    },\n    128: {\n        width: '128px',\n        height: '128px'\n    }\n});\nconst useCircleSizeStyles = makeStyles({\n    root: {\n        borderRadius: '50%'\n    }\n});\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */ export const useSkeletonItemStyles_unstable = (state)=>{\n    'use no memo';\n    const { animation, appearance, size, shape } = state;\n    const rootStyles = useStyles();\n    const rectStyles = useRectangleStyles();\n    const sizeStyles = useSizeStyles();\n    const circleStyles = useCircleSizeStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

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

@@ -244,6 +244,7 @@ const useCircleSizeStyles = makeStyles({
     const rectStyles = useRectangleStyles();
     const sizeStyles = useSizeStyles();
     const circleStyles = useCircleSizeStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots> = {\n  root: 'fui-SkeletonItem',\n};\n\nconst skeletonWaveAnimation = {\n  to: {\n    transform: 'translate(100%)',\n  },\n};\n\nconst skeletonPulseAnimation = {\n  '0%': {\n    opacity: '1',\n  },\n  '50%': {\n    opacity: '0.4',\n  },\n  '100%': {\n    opacity: '1',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n    overflow: 'hidden',\n\n    '::after': {\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      inset: '0',\n      animationIterationCount: 'infinite',\n      animationDuration: '3s',\n      animationTimingFunction: 'ease-in-out',\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        animationDuration: '0.01ms',\n        animationIterationCount: '1',\n      },\n    },\n  },\n  wave: {\n    backgroundColor: tokens.colorNeutralStencil1,\n\n    '::after': {\n      animationName: skeletonWaveAnimation,\n      backgroundImage: `linear-gradient(\n        to right,\n        ${tokens.colorNeutralStencil1} 0%,\n        ${tokens.colorNeutralStencil2} 50%,\n        ${tokens.colorNeutralStencil1} 100%)`,\n      transform: 'translate(-100%)',\n\n      '@media screen and (forced-colors: active)': {\n        backgroundColor: 'WindowText',\n      },\n    },\n  },\n  pulse: {\n    '::after': {\n      animationName: skeletonPulseAnimation,\n      animationDuration: '1s',\n      backgroundColor: tokens.colorNeutralStencil1,\n    },\n  },\n  translucent: {\n    backgroundColor: tokens.colorNeutralStencil1Alpha,\n\n    '::after': {\n      backgroundImage: `linear-gradient(\n      to right,\n      transparent 0%,\n      ${tokens.colorNeutralStencil1Alpha} 50%,\n      transparent 100%)`,\n    },\n  },\n  translucentPulse: {\n    backgroundColor: 'none',\n\n    '::after': {\n      backgroundColor: tokens.colorNeutralStencil1Alpha,\n    },\n  },\n  blockStyling: {\n    display: 'block',\n  },\n});\n\nconst useRectangleStyles = makeStyles({\n  root: {\n    width: '100%',\n    borderRadius: '4px',\n  },\n  8: { height: '8px' },\n  12: { height: '12px' },\n  14: { height: '14px' },\n  16: { height: '16px' },\n  20: { height: '20px' },\n  22: { height: '22px' },\n  24: { height: '24px' },\n  28: { height: '28px' },\n  32: { height: '32px' },\n  36: { height: '36px' },\n  40: { height: '40px' },\n  48: { height: '48px' },\n  52: { height: '52px' },\n  56: { height: '56px' },\n  64: { height: '64px' },\n  72: { height: '72px' },\n  92: { height: '92px' },\n  96: { height: '96px' },\n  120: { height: '120px' },\n  128: { height: '128px' },\n});\n\nconst useSizeStyles = makeStyles({\n  8: { width: '8px', height: '8px' },\n  12: { width: '12px', height: '12px' },\n  14: { width: '14px', height: '14px' },\n  16: { width: '16px', height: '16px' },\n  20: { width: '20px', height: '20px' },\n  22: { width: '22px', height: '22px' },\n  24: { width: '24px', height: '24px' },\n  28: { width: '28px', height: '28px' },\n  32: { width: '32px', height: '32px' },\n  36: { width: '36px', height: '36px' },\n  40: { width: '40px', height: '40px' },\n  48: { width: '48px', height: '48px' },\n  52: { width: '52px', height: '52px' },\n  56: { width: '56px', height: '56px' },\n  64: { width: '64px', height: '64px' },\n  72: { width: '72px', height: '72px' },\n  92: { width: '92px', height: '92px' },\n  96: { width: '96px', height: '96px' },\n  120: { width: '120px', height: '120px' },\n  128: { width: '128px', height: '128px' },\n});\n\nconst useCircleSizeStyles = makeStyles({\n  root: {\n    borderRadius: '50%',\n  },\n});\n\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */\nexport const useSkeletonItemStyles_unstable = (state: SkeletonItemState): SkeletonItemState => {\n  'use no memo';\n\n  const { animation, appearance, size, shape } = state;\n\n  const rootStyles = useStyles();\n  const rectStyles = useRectangleStyles();\n  const sizeStyles = useSizeStyles();\n  const circleStyles = useCircleSizeStyles();\n\n  state.root.className = mergeClasses(\n    skeletonItemClassNames.root,\n    rootStyles.root,\n    state.root.as === 'span' && rootStyles.blockStyling,\n    animation === 'wave' && rootStyles.wave,\n    animation === 'pulse' && rootStyles.pulse,\n    appearance === 'translucent' && rootStyles.translucent,\n    animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse,\n    shape === 'rectangle' && rectStyles.root,\n    shape === 'rectangle' && rectStyles[size],\n    shape === 'square' && sizeStyles[size],\n    shape === 'circle' && circleStyles.root,\n    shape === 'circle' && sizeStyles[size],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","position","overflow","content","display","inset","animationIterationCount","animationDuration","animationTimingFunction","wave","backgroundColor","colorNeutralStencil1","animationName","backgroundImage","colorNeutralStencil2","pulse","translucent","colorNeutralStencil1Alpha","translucentPulse","blockStyling","useRectangleStyles","width","borderRadius","height","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"mappings":"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"}
+{"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots> = {\n  root: 'fui-SkeletonItem',\n};\n\nconst skeletonWaveAnimation = {\n  to: {\n    transform: 'translate(100%)',\n  },\n};\n\nconst skeletonPulseAnimation = {\n  '0%': {\n    opacity: '1',\n  },\n  '50%': {\n    opacity: '0.4',\n  },\n  '100%': {\n    opacity: '1',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n    overflow: 'hidden',\n\n    '::after': {\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      inset: '0',\n      animationIterationCount: 'infinite',\n      animationDuration: '3s',\n      animationTimingFunction: 'ease-in-out',\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        animationDuration: '0.01ms',\n        animationIterationCount: '1',\n      },\n    },\n  },\n  wave: {\n    backgroundColor: tokens.colorNeutralStencil1,\n\n    '::after': {\n      animationName: skeletonWaveAnimation,\n      backgroundImage: `linear-gradient(\n        to right,\n        ${tokens.colorNeutralStencil1} 0%,\n        ${tokens.colorNeutralStencil2} 50%,\n        ${tokens.colorNeutralStencil1} 100%)`,\n      transform: 'translate(-100%)',\n\n      '@media screen and (forced-colors: active)': {\n        backgroundColor: 'WindowText',\n      },\n    },\n  },\n  pulse: {\n    '::after': {\n      animationName: skeletonPulseAnimation,\n      animationDuration: '1s',\n      backgroundColor: tokens.colorNeutralStencil1,\n    },\n  },\n  translucent: {\n    backgroundColor: tokens.colorNeutralStencil1Alpha,\n\n    '::after': {\n      backgroundImage: `linear-gradient(\n      to right,\n      transparent 0%,\n      ${tokens.colorNeutralStencil1Alpha} 50%,\n      transparent 100%)`,\n    },\n  },\n  translucentPulse: {\n    backgroundColor: 'none',\n\n    '::after': {\n      backgroundColor: tokens.colorNeutralStencil1Alpha,\n    },\n  },\n  blockStyling: {\n    display: 'block',\n  },\n});\n\nconst useRectangleStyles = makeStyles({\n  root: {\n    width: '100%',\n    borderRadius: '4px',\n  },\n  8: { height: '8px' },\n  12: { height: '12px' },\n  14: { height: '14px' },\n  16: { height: '16px' },\n  20: { height: '20px' },\n  22: { height: '22px' },\n  24: { height: '24px' },\n  28: { height: '28px' },\n  32: { height: '32px' },\n  36: { height: '36px' },\n  40: { height: '40px' },\n  48: { height: '48px' },\n  52: { height: '52px' },\n  56: { height: '56px' },\n  64: { height: '64px' },\n  72: { height: '72px' },\n  92: { height: '92px' },\n  96: { height: '96px' },\n  120: { height: '120px' },\n  128: { height: '128px' },\n});\n\nconst useSizeStyles = makeStyles({\n  8: { width: '8px', height: '8px' },\n  12: { width: '12px', height: '12px' },\n  14: { width: '14px', height: '14px' },\n  16: { width: '16px', height: '16px' },\n  20: { width: '20px', height: '20px' },\n  22: { width: '22px', height: '22px' },\n  24: { width: '24px', height: '24px' },\n  28: { width: '28px', height: '28px' },\n  32: { width: '32px', height: '32px' },\n  36: { width: '36px', height: '36px' },\n  40: { width: '40px', height: '40px' },\n  48: { width: '48px', height: '48px' },\n  52: { width: '52px', height: '52px' },\n  56: { width: '56px', height: '56px' },\n  64: { width: '64px', height: '64px' },\n  72: { width: '72px', height: '72px' },\n  92: { width: '92px', height: '92px' },\n  96: { width: '96px', height: '96px' },\n  120: { width: '120px', height: '120px' },\n  128: { width: '128px', height: '128px' },\n});\n\nconst useCircleSizeStyles = makeStyles({\n  root: {\n    borderRadius: '50%',\n  },\n});\n\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */\nexport const useSkeletonItemStyles_unstable = (state: SkeletonItemState): SkeletonItemState => {\n  'use no memo';\n\n  const { animation, appearance, size, shape } = state;\n\n  const rootStyles = useStyles();\n  const rectStyles = useRectangleStyles();\n  const sizeStyles = useSizeStyles();\n  const circleStyles = useCircleSizeStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    skeletonItemClassNames.root,\n    rootStyles.root,\n    state.root.as === 'span' && rootStyles.blockStyling,\n    animation === 'wave' && rootStyles.wave,\n    animation === 'pulse' && rootStyles.pulse,\n    appearance === 'translucent' && rootStyles.translucent,\n    animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse,\n    shape === 'rectangle' && rectStyles.root,\n    shape === 'rectangle' && rectStyles[size],\n    shape === 'square' && sizeStyles[size],\n    shape === 'circle' && circleStyles.root,\n    shape === 'circle' && sizeStyles[size],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","position","overflow","content","display","inset","animationIterationCount","animationDuration","animationTimingFunction","wave","backgroundColor","colorNeutralStencil1","animationName","backgroundImage","colorNeutralStencil2","pulse","translucent","colorNeutralStencil1Alpha","translucentPulse","blockStyling","useRectangleStyles","width","borderRadius","height","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"mappings":"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"}

package/lib-commonjs/components/Skeleton/useSkeletonStyles.styles.js

@@ -33,6 +33,7 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
 const useSkeletonStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);
     return state;
 };

package/lib-commonjs/components/Skeleton/useSkeletonStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSkeletonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const skeletonClassNames = {\n    root: 'fui-Skeleton'\n};\nconst useStyles = makeStyles({\n    blockStyling: {\n        display: 'block'\n    }\n});\n/**\n * Apply styling to the Skeleton slots based on the state\n */ export const useSkeletonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","mc9l5x","d","useSkeletonStyles_unstable","state","styles","className","as"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,kBAAkB;;;8BAUY;eAA1BM;;;uBAXwB,gBAAgB;AAClD,2BAA2B;IAC9BL,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AAGS,oCAAoCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;IAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,OAAGV,mBAAY,EAACC,kBAAkB,CAACC,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACS,EAAE,KAAK,MAAM,IAAIF,MAAM,CAACL,YAAY,EAAEI,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;IACnI,OAAOF,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useSkeletonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const skeletonClassNames = {\n    root: 'fui-Skeleton'\n};\nconst useStyles = makeStyles({\n    blockStyling: {\n        display: 'block'\n    }\n});\n/**\n * Apply styling to the Skeleton slots based on the state\n */ export const useSkeletonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","mc9l5x","d","useSkeletonStyles_unstable","state","styles","className","as"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,kBAAkB;;;IAUdM,0BAA0B;;;;uBAXF,gBAAgB;AAClD,2BAA2B;IAC9BL,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;AAAA,CAIjB,CAAC;AAGS,oCAAoCE,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;IAC1B,oDAAA;IACAK,KAAK,CAACN,IAAI,CAACQ,SAAS,OAAGV,mBAAY,EAACC,kBAAkB,CAACC,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACS,EAAE,KAAK,MAAM,IAAIF,MAAM,CAACL,YAAY,EAAEI,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;IACnI,OAAOF,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/Skeleton/useSkeletonStyles.styles.raw.js

@@ -29,6 +29,7 @@ const useStyles = (0, _react.makeStyles)({
 const useSkeletonStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(skeletonClassNames.root, state.root.as === 'span' && styles.blockStyling, state.root.className);
     return state;
 };

package/lib-commonjs/components/Skeleton/useSkeletonStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Skeleton/useSkeletonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonSlots, SkeletonState } from './Skeleton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nexport const skeletonClassNames: SlotClassNames<SkeletonSlots> = {\n  root: 'fui-Skeleton',\n};\n\nconst useStyles = makeStyles({\n  blockStyling: {\n    display: 'block',\n  },\n});\n\n/**\n * Apply styling to the Skeleton slots based on the state\n */\nexport const useSkeletonStyles_unstable = (state: SkeletonState): SkeletonState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    skeletonClassNames.root,\n    state.root.as === 'span' && styles.blockStyling,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","display","useSkeletonStyles_unstable","state","styles","className","as"],"mappings":"AAAA;;;;;;;;;;;;sBAKaE;;;8BAaAK;;;;uBAhB4B,iBAAiB;AAGnD,MAAML,qBAAoD;IAC/DC,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYJ,iBAAAA,EAAW;IAC3BK,cAAc;QACZC,SAAS;IACX;AACF;AAKO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASL;IAEfI,MAAML,IAAI,CAACO,SAAS,OAAGT,mBAAAA,EACrBC,mBAAmBC,IAAI,EACvBK,MAAML,IAAI,CAACQ,EAAE,KAAK,UAAUF,OAAOJ,YAAY,EAC/CG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Skeleton/useSkeletonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonSlots, SkeletonState } from './Skeleton.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nexport const skeletonClassNames: SlotClassNames<SkeletonSlots> = {\n  root: 'fui-Skeleton',\n};\n\nconst useStyles = makeStyles({\n  blockStyling: {\n    display: 'block',\n  },\n});\n\n/**\n * Apply styling to the Skeleton slots based on the state\n */\nexport const useSkeletonStyles_unstable = (state: SkeletonState): SkeletonState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    skeletonClassNames.root,\n    state.root.as === 'span' && styles.blockStyling,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","skeletonClassNames","root","useStyles","blockStyling","display","useSkeletonStyles_unstable","state","styles","className","as"],"mappings":"AAAA;;;;;;;;;;;;IAKaE,kBAAAA;;;8BAaAK;;;;uBAhB4B,iBAAiB;AAGnD,2BAA0D;IAC/DJ,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,qBAAAA,EAAW;IAC3BK,cAAc;QACZC,SAAS;IACX;AACF;AAKO,MAAMC,6BAA6B,CAACC;IACzC;IAEA,MAAMC,SAASL;IAEf,oDAAoD;IACpDI,MAAML,IAAI,CAACO,SAAS,OAAGT,mBAAAA,EACrBC,mBAAmBC,IAAI,EACvBK,MAAML,IAAI,CAACQ,EAAE,KAAK,UAAUF,OAAOJ,YAAY,EAC/CG,MAAML,IAAI,CAACO,SAAS;IAGtB,OAAOF;AACT,EAAE"}

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

@@ -408,6 +408,7 @@ const useSkeletonItemStyles_unstable = (state)=>{
     const rectStyles = useRectangleStyles();
     const sizeStyles = useSizeStyles();
     const circleStyles = useCircleSizeStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);
     return state;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["useSkeletonItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const skeletonItemClassNames = {\n    root: 'fui-SkeletonItem'\n};\nconst skeletonWaveAnimation = {\n    to: {\n        transform: 'translate(100%)'\n    }\n};\nconst skeletonPulseAnimation = {\n    '0%': {\n        opacity: '1'\n    },\n    '50%': {\n        opacity: '0.4'\n    },\n    '100%': {\n        opacity: '1'\n    }\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'relative',\n        overflow: 'hidden',\n        '::after': {\n            content: '\"\"',\n            display: 'block',\n            position: 'absolute',\n            inset: '0',\n            animationIterationCount: 'infinite',\n            animationDuration: '3s',\n            animationTimingFunction: 'ease-in-out',\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                animationDuration: '0.01ms',\n                animationIterationCount: '1'\n            }\n        }\n    },\n    wave: {\n        backgroundColor: tokens.colorNeutralStencil1,\n        '::after': {\n            animationName: skeletonWaveAnimation,\n            backgroundImage: `linear-gradient(\n        to right,\n        ${tokens.colorNeutralStencil1} 0%,\n        ${tokens.colorNeutralStencil2} 50%,\n        ${tokens.colorNeutralStencil1} 100%)`,\n            transform: 'translate(-100%)',\n            '@media screen and (forced-colors: active)': {\n                backgroundColor: 'WindowText'\n            }\n        }\n    },\n    pulse: {\n        '::after': {\n            animationName: skeletonPulseAnimation,\n            animationDuration: '1s',\n            backgroundColor: tokens.colorNeutralStencil1\n        }\n    },\n    translucent: {\n        backgroundColor: tokens.colorNeutralStencil1Alpha,\n        '::after': {\n            backgroundImage: `linear-gradient(\n      to right,\n      transparent 0%,\n      ${tokens.colorNeutralStencil1Alpha} 50%,\n      transparent 100%)`\n        }\n    },\n    translucentPulse: {\n        backgroundColor: 'none',\n        '::after': {\n            backgroundColor: tokens.colorNeutralStencil1Alpha\n        }\n    },\n    blockStyling: {\n        display: 'block'\n    }\n});\nconst useRectangleStyles = makeStyles({\n    root: {\n        width: '100%',\n        borderRadius: '4px'\n    },\n    8: {\n        height: '8px'\n    },\n    12: {\n        height: '12px'\n    },\n    14: {\n        height: '14px'\n    },\n    16: {\n        height: '16px'\n    },\n    20: {\n        height: '20px'\n    },\n    22: {\n        height: '22px'\n    },\n    24: {\n        height: '24px'\n    },\n    28: {\n        height: '28px'\n    },\n    32: {\n        height: '32px'\n    },\n    36: {\n        height: '36px'\n    },\n    40: {\n        height: '40px'\n    },\n    48: {\n        height: '48px'\n    },\n    52: {\n        height: '52px'\n    },\n    56: {\n        height: '56px'\n    },\n    64: {\n        height: '64px'\n    },\n    72: {\n        height: '72px'\n    },\n    92: {\n        height: '92px'\n    },\n    96: {\n        height: '96px'\n    },\n    120: {\n        height: '120px'\n    },\n    128: {\n        height: '128px'\n    }\n});\nconst useSizeStyles = makeStyles({\n    8: {\n        width: '8px',\n        height: '8px'\n    },\n    12: {\n        width: '12px',\n        height: '12px'\n    },\n    14: {\n        width: '14px',\n        height: '14px'\n    },\n    16: {\n        width: '16px',\n        height: '16px'\n    },\n    20: {\n        width: '20px',\n        height: '20px'\n    },\n    22: {\n        width: '22px',\n        height: '22px'\n    },\n    24: {\n        width: '24px',\n        height: '24px'\n    },\n    28: {\n        width: '28px',\n        height: '28px'\n    },\n    32: {\n        width: '32px',\n        height: '32px'\n    },\n    36: {\n        width: '36px',\n        height: '36px'\n    },\n    40: {\n        width: '40px',\n        height: '40px'\n    },\n    48: {\n        width: '48px',\n        height: '48px'\n    },\n    52: {\n        width: '52px',\n        height: '52px'\n    },\n    56: {\n        width: '56px',\n        height: '56px'\n    },\n    64: {\n        width: '64px',\n        height: '64px'\n    },\n    72: {\n        width: '72px',\n        height: '72px'\n    },\n    92: {\n        width: '92px',\n        height: '92px'\n    },\n    96: {\n        width: '96px',\n        height: '96px'\n    },\n    120: {\n        width: '120px',\n        height: '120px'\n    },\n    128: {\n        width: '128px',\n        height: '128px'\n    }\n});\nconst useCircleSizeStyles = makeStyles({\n    root: {\n        borderRadius: '50%'\n    }\n});\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */ export const useSkeletonItemStyles_unstable = (state)=>{\n    'use no memo';\n    const { animation, appearance, size, shape } = state;\n    const rootStyles = useStyles();\n    const rectStyles = useRectangleStyles();\n    const sizeStyles = useSizeStyles();\n    const circleStyles = useCircleSizeStyles();\n    state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","Bsft5z2","ap17g6","E3zdtr","By385i5","Eqx8gd","B1piin3","bn5sak","B58onuk","s9ouvv","xr36ep","Bitv4sc","Gt9ir8","Crt7la","wave","De3pzq","Br128sd","h62rwi","b1kco5","Iqrfzq","pulse","Bjyk6c5","translucent","translucentPulse","blockStyling","mc9l5x","d","p","m","k","useRectangleStyles","Bqenvij","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"mappings":"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"}
+{"version":3,"sources":["useSkeletonItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const skeletonItemClassNames = {\n    root: 'fui-SkeletonItem'\n};\nconst skeletonWaveAnimation = {\n    to: {\n        transform: 'translate(100%)'\n    }\n};\nconst skeletonPulseAnimation = {\n    '0%': {\n        opacity: '1'\n    },\n    '50%': {\n        opacity: '0.4'\n    },\n    '100%': {\n        opacity: '1'\n    }\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        position: 'relative',\n        overflow: 'hidden',\n        '::after': {\n            content: '\"\"',\n            display: 'block',\n            position: 'absolute',\n            inset: '0',\n            animationIterationCount: 'infinite',\n            animationDuration: '3s',\n            animationTimingFunction: 'ease-in-out',\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                animationDuration: '0.01ms',\n                animationIterationCount: '1'\n            }\n        }\n    },\n    wave: {\n        backgroundColor: tokens.colorNeutralStencil1,\n        '::after': {\n            animationName: skeletonWaveAnimation,\n            backgroundImage: `linear-gradient(\n        to right,\n        ${tokens.colorNeutralStencil1} 0%,\n        ${tokens.colorNeutralStencil2} 50%,\n        ${tokens.colorNeutralStencil1} 100%)`,\n            transform: 'translate(-100%)',\n            '@media screen and (forced-colors: active)': {\n                backgroundColor: 'WindowText'\n            }\n        }\n    },\n    pulse: {\n        '::after': {\n            animationName: skeletonPulseAnimation,\n            animationDuration: '1s',\n            backgroundColor: tokens.colorNeutralStencil1\n        }\n    },\n    translucent: {\n        backgroundColor: tokens.colorNeutralStencil1Alpha,\n        '::after': {\n            backgroundImage: `linear-gradient(\n      to right,\n      transparent 0%,\n      ${tokens.colorNeutralStencil1Alpha} 50%,\n      transparent 100%)`\n        }\n    },\n    translucentPulse: {\n        backgroundColor: 'none',\n        '::after': {\n            backgroundColor: tokens.colorNeutralStencil1Alpha\n        }\n    },\n    blockStyling: {\n        display: 'block'\n    }\n});\nconst useRectangleStyles = makeStyles({\n    root: {\n        width: '100%',\n        borderRadius: '4px'\n    },\n    8: {\n        height: '8px'\n    },\n    12: {\n        height: '12px'\n    },\n    14: {\n        height: '14px'\n    },\n    16: {\n        height: '16px'\n    },\n    20: {\n        height: '20px'\n    },\n    22: {\n        height: '22px'\n    },\n    24: {\n        height: '24px'\n    },\n    28: {\n        height: '28px'\n    },\n    32: {\n        height: '32px'\n    },\n    36: {\n        height: '36px'\n    },\n    40: {\n        height: '40px'\n    },\n    48: {\n        height: '48px'\n    },\n    52: {\n        height: '52px'\n    },\n    56: {\n        height: '56px'\n    },\n    64: {\n        height: '64px'\n    },\n    72: {\n        height: '72px'\n    },\n    92: {\n        height: '92px'\n    },\n    96: {\n        height: '96px'\n    },\n    120: {\n        height: '120px'\n    },\n    128: {\n        height: '128px'\n    }\n});\nconst useSizeStyles = makeStyles({\n    8: {\n        width: '8px',\n        height: '8px'\n    },\n    12: {\n        width: '12px',\n        height: '12px'\n    },\n    14: {\n        width: '14px',\n        height: '14px'\n    },\n    16: {\n        width: '16px',\n        height: '16px'\n    },\n    20: {\n        width: '20px',\n        height: '20px'\n    },\n    22: {\n        width: '22px',\n        height: '22px'\n    },\n    24: {\n        width: '24px',\n        height: '24px'\n    },\n    28: {\n        width: '28px',\n        height: '28px'\n    },\n    32: {\n        width: '32px',\n        height: '32px'\n    },\n    36: {\n        width: '36px',\n        height: '36px'\n    },\n    40: {\n        width: '40px',\n        height: '40px'\n    },\n    48: {\n        width: '48px',\n        height: '48px'\n    },\n    52: {\n        width: '52px',\n        height: '52px'\n    },\n    56: {\n        width: '56px',\n        height: '56px'\n    },\n    64: {\n        width: '64px',\n        height: '64px'\n    },\n    72: {\n        width: '72px',\n        height: '72px'\n    },\n    92: {\n        width: '92px',\n        height: '92px'\n    },\n    96: {\n        width: '96px',\n        height: '96px'\n    },\n    120: {\n        width: '120px',\n        height: '120px'\n    },\n    128: {\n        width: '128px',\n        height: '128px'\n    }\n});\nconst useCircleSizeStyles = makeStyles({\n    root: {\n        borderRadius: '50%'\n    }\n});\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */ export const useSkeletonItemStyles_unstable = (state)=>{\n    'use no memo';\n    const { animation, appearance, size, shape } = state;\n    const rootStyles = useStyles();\n    const rectStyles = useRectangleStyles();\n    const sizeStyles = useSizeStyles();\n    const circleStyles = useCircleSizeStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);\n    return state;\n};\n"],"names":["__styles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","qhf8xq","B68tc82","Bmxbyg5","Bpg54ce","Bsft5z2","ap17g6","E3zdtr","By385i5","Eqx8gd","B1piin3","bn5sak","B58onuk","s9ouvv","xr36ep","Bitv4sc","Gt9ir8","Crt7la","wave","De3pzq","Br128sd","h62rwi","b1kco5","Iqrfzq","pulse","Bjyk6c5","translucent","translucentPulse","blockStyling","mc9l5x","d","p","m","k","useRectangleStyles","Bqenvij","a9b677","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"mappings":"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"}

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

@@ -260,6 +260,7 @@ const useSkeletonItemStyles_unstable = (state)=>{
     const rectStyles = useRectangleStyles();
     const sizeStyles = useSizeStyles();
     const circleStyles = useCircleSizeStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(skeletonItemClassNames.root, rootStyles.root, state.root.as === 'span' && rootStyles.blockStyling, animation === 'wave' && rootStyles.wave, animation === 'pulse' && rootStyles.pulse, appearance === 'translucent' && rootStyles.translucent, animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse, shape === 'rectangle' && rectStyles.root, shape === 'rectangle' && rectStyles[size], shape === 'square' && sizeStyles[size], shape === 'circle' && circleStyles.root, shape === 'circle' && sizeStyles[size], state.root.className);
     return state;
 };

package/lib-commonjs/components/SkeletonItem/useSkeletonItemStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots> = {\n  root: 'fui-SkeletonItem',\n};\n\nconst skeletonWaveAnimation = {\n  to: {\n    transform: 'translate(100%)',\n  },\n};\n\nconst skeletonPulseAnimation = {\n  '0%': {\n    opacity: '1',\n  },\n  '50%': {\n    opacity: '0.4',\n  },\n  '100%': {\n    opacity: '1',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n    overflow: 'hidden',\n\n    '::after': {\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      inset: '0',\n      animationIterationCount: 'infinite',\n      animationDuration: '3s',\n      animationTimingFunction: 'ease-in-out',\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        animationDuration: '0.01ms',\n        animationIterationCount: '1',\n      },\n    },\n  },\n  wave: {\n    backgroundColor: tokens.colorNeutralStencil1,\n\n    '::after': {\n      animationName: skeletonWaveAnimation,\n      backgroundImage: `linear-gradient(\n        to right,\n        ${tokens.colorNeutralStencil1} 0%,\n        ${tokens.colorNeutralStencil2} 50%,\n        ${tokens.colorNeutralStencil1} 100%)`,\n      transform: 'translate(-100%)',\n\n      '@media screen and (forced-colors: active)': {\n        backgroundColor: 'WindowText',\n      },\n    },\n  },\n  pulse: {\n    '::after': {\n      animationName: skeletonPulseAnimation,\n      animationDuration: '1s',\n      backgroundColor: tokens.colorNeutralStencil1,\n    },\n  },\n  translucent: {\n    backgroundColor: tokens.colorNeutralStencil1Alpha,\n\n    '::after': {\n      backgroundImage: `linear-gradient(\n      to right,\n      transparent 0%,\n      ${tokens.colorNeutralStencil1Alpha} 50%,\n      transparent 100%)`,\n    },\n  },\n  translucentPulse: {\n    backgroundColor: 'none',\n\n    '::after': {\n      backgroundColor: tokens.colorNeutralStencil1Alpha,\n    },\n  },\n  blockStyling: {\n    display: 'block',\n  },\n});\n\nconst useRectangleStyles = makeStyles({\n  root: {\n    width: '100%',\n    borderRadius: '4px',\n  },\n  8: { height: '8px' },\n  12: { height: '12px' },\n  14: { height: '14px' },\n  16: { height: '16px' },\n  20: { height: '20px' },\n  22: { height: '22px' },\n  24: { height: '24px' },\n  28: { height: '28px' },\n  32: { height: '32px' },\n  36: { height: '36px' },\n  40: { height: '40px' },\n  48: { height: '48px' },\n  52: { height: '52px' },\n  56: { height: '56px' },\n  64: { height: '64px' },\n  72: { height: '72px' },\n  92: { height: '92px' },\n  96: { height: '96px' },\n  120: { height: '120px' },\n  128: { height: '128px' },\n});\n\nconst useSizeStyles = makeStyles({\n  8: { width: '8px', height: '8px' },\n  12: { width: '12px', height: '12px' },\n  14: { width: '14px', height: '14px' },\n  16: { width: '16px', height: '16px' },\n  20: { width: '20px', height: '20px' },\n  22: { width: '22px', height: '22px' },\n  24: { width: '24px', height: '24px' },\n  28: { width: '28px', height: '28px' },\n  32: { width: '32px', height: '32px' },\n  36: { width: '36px', height: '36px' },\n  40: { width: '40px', height: '40px' },\n  48: { width: '48px', height: '48px' },\n  52: { width: '52px', height: '52px' },\n  56: { width: '56px', height: '56px' },\n  64: { width: '64px', height: '64px' },\n  72: { width: '72px', height: '72px' },\n  92: { width: '92px', height: '92px' },\n  96: { width: '96px', height: '96px' },\n  120: { width: '120px', height: '120px' },\n  128: { width: '128px', height: '128px' },\n});\n\nconst useCircleSizeStyles = makeStyles({\n  root: {\n    borderRadius: '50%',\n  },\n});\n\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */\nexport const useSkeletonItemStyles_unstable = (state: SkeletonItemState): SkeletonItemState => {\n  'use no memo';\n\n  const { animation, appearance, size, shape } = state;\n\n  const rootStyles = useStyles();\n  const rectStyles = useRectangleStyles();\n  const sizeStyles = useSizeStyles();\n  const circleStyles = useCircleSizeStyles();\n\n  state.root.className = mergeClasses(\n    skeletonItemClassNames.root,\n    rootStyles.root,\n    state.root.as === 'span' && rootStyles.blockStyling,\n    animation === 'wave' && rootStyles.wave,\n    animation === 'pulse' && rootStyles.pulse,\n    appearance === 'translucent' && rootStyles.translucent,\n    animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse,\n    shape === 'rectangle' && rectStyles.root,\n    shape === 'rectangle' && rectStyles[size],\n    shape === 'square' && sizeStyles[size],\n    shape === 'circle' && circleStyles.root,\n    shape === 'circle' && sizeStyles[size],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","position","overflow","content","display","inset","animationIterationCount","animationDuration","animationTimingFunction","wave","backgroundColor","colorNeutralStencil1","animationName","backgroundImage","colorNeutralStencil2","pulse","translucent","colorNeutralStencil1Alpha","translucentPulse","blockStyling","useRectangleStyles","width","borderRadius","height","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"mappings":"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"}
+{"version":3,"sources":["../src/components/SkeletonItem/useSkeletonItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SkeletonItemSlots, SkeletonItemState } from './SkeletonItem.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const skeletonItemClassNames: SlotClassNames<SkeletonItemSlots> = {\n  root: 'fui-SkeletonItem',\n};\n\nconst skeletonWaveAnimation = {\n  to: {\n    transform: 'translate(100%)',\n  },\n};\n\nconst skeletonPulseAnimation = {\n  '0%': {\n    opacity: '1',\n  },\n  '50%': {\n    opacity: '0.4',\n  },\n  '100%': {\n    opacity: '1',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    position: 'relative',\n    overflow: 'hidden',\n\n    '::after': {\n      content: '\"\"',\n      display: 'block',\n      position: 'absolute',\n      inset: '0',\n      animationIterationCount: 'infinite',\n      animationDuration: '3s',\n      animationTimingFunction: 'ease-in-out',\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        animationDuration: '0.01ms',\n        animationIterationCount: '1',\n      },\n    },\n  },\n  wave: {\n    backgroundColor: tokens.colorNeutralStencil1,\n\n    '::after': {\n      animationName: skeletonWaveAnimation,\n      backgroundImage: `linear-gradient(\n        to right,\n        ${tokens.colorNeutralStencil1} 0%,\n        ${tokens.colorNeutralStencil2} 50%,\n        ${tokens.colorNeutralStencil1} 100%)`,\n      transform: 'translate(-100%)',\n\n      '@media screen and (forced-colors: active)': {\n        backgroundColor: 'WindowText',\n      },\n    },\n  },\n  pulse: {\n    '::after': {\n      animationName: skeletonPulseAnimation,\n      animationDuration: '1s',\n      backgroundColor: tokens.colorNeutralStencil1,\n    },\n  },\n  translucent: {\n    backgroundColor: tokens.colorNeutralStencil1Alpha,\n\n    '::after': {\n      backgroundImage: `linear-gradient(\n      to right,\n      transparent 0%,\n      ${tokens.colorNeutralStencil1Alpha} 50%,\n      transparent 100%)`,\n    },\n  },\n  translucentPulse: {\n    backgroundColor: 'none',\n\n    '::after': {\n      backgroundColor: tokens.colorNeutralStencil1Alpha,\n    },\n  },\n  blockStyling: {\n    display: 'block',\n  },\n});\n\nconst useRectangleStyles = makeStyles({\n  root: {\n    width: '100%',\n    borderRadius: '4px',\n  },\n  8: { height: '8px' },\n  12: { height: '12px' },\n  14: { height: '14px' },\n  16: { height: '16px' },\n  20: { height: '20px' },\n  22: { height: '22px' },\n  24: { height: '24px' },\n  28: { height: '28px' },\n  32: { height: '32px' },\n  36: { height: '36px' },\n  40: { height: '40px' },\n  48: { height: '48px' },\n  52: { height: '52px' },\n  56: { height: '56px' },\n  64: { height: '64px' },\n  72: { height: '72px' },\n  92: { height: '92px' },\n  96: { height: '96px' },\n  120: { height: '120px' },\n  128: { height: '128px' },\n});\n\nconst useSizeStyles = makeStyles({\n  8: { width: '8px', height: '8px' },\n  12: { width: '12px', height: '12px' },\n  14: { width: '14px', height: '14px' },\n  16: { width: '16px', height: '16px' },\n  20: { width: '20px', height: '20px' },\n  22: { width: '22px', height: '22px' },\n  24: { width: '24px', height: '24px' },\n  28: { width: '28px', height: '28px' },\n  32: { width: '32px', height: '32px' },\n  36: { width: '36px', height: '36px' },\n  40: { width: '40px', height: '40px' },\n  48: { width: '48px', height: '48px' },\n  52: { width: '52px', height: '52px' },\n  56: { width: '56px', height: '56px' },\n  64: { width: '64px', height: '64px' },\n  72: { width: '72px', height: '72px' },\n  92: { width: '92px', height: '92px' },\n  96: { width: '96px', height: '96px' },\n  120: { width: '120px', height: '120px' },\n  128: { width: '128px', height: '128px' },\n});\n\nconst useCircleSizeStyles = makeStyles({\n  root: {\n    borderRadius: '50%',\n  },\n});\n\n/**\n * Apply styling to the SkeletonItem slots based on the state\n */\nexport const useSkeletonItemStyles_unstable = (state: SkeletonItemState): SkeletonItemState => {\n  'use no memo';\n\n  const { animation, appearance, size, shape } = state;\n\n  const rootStyles = useStyles();\n  const rectStyles = useRectangleStyles();\n  const sizeStyles = useSizeStyles();\n  const circleStyles = useCircleSizeStyles();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    skeletonItemClassNames.root,\n    rootStyles.root,\n    state.root.as === 'span' && rootStyles.blockStyling,\n    animation === 'wave' && rootStyles.wave,\n    animation === 'pulse' && rootStyles.pulse,\n    appearance === 'translucent' && rootStyles.translucent,\n    animation === 'pulse' && appearance === 'translucent' && rootStyles.translucentPulse,\n    shape === 'rectangle' && rectStyles.root,\n    shape === 'rectangle' && rectStyles[size],\n    shape === 'square' && sizeStyles[size],\n    shape === 'circle' && circleStyles.root,\n    shape === 'circle' && sizeStyles[size],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","skeletonItemClassNames","root","skeletonWaveAnimation","to","transform","skeletonPulseAnimation","opacity","useStyles","position","overflow","content","display","inset","animationIterationCount","animationDuration","animationTimingFunction","wave","backgroundColor","colorNeutralStencil1","animationName","backgroundImage","colorNeutralStencil2","pulse","translucent","colorNeutralStencil1Alpha","translucentPulse","blockStyling","useRectangleStyles","width","borderRadius","height","useSizeStyles","useCircleSizeStyles","useSkeletonItemStyles_unstable","state","animation","appearance","size","shape","rootStyles","rectStyles","sizeStyles","circleStyles","className","as"],"mappings":"AAAA;;;;;;;;;;;;IAOaG,sBAAAA;;;kCAsJAiC;eAAAA;;;uBA3J4B,iBAAiB;4BAGnC,wBAAwB;AAExC,+BAAkE;IACvEhC,MAAM;AACR,EAAE;AAEF,MAAMC,wBAAwB;IAC5BC,IAAI;QACFC,WAAW;IACb;AACF;AAEA,MAAMC,yBAAyB;IAC7B,MAAM;QACJC,SAAS;IACX;IACA,OAAO;QACLA,SAAS;IACX;IACA,QAAQ;QACNA,SAAS;IACX;AACF;AAEA;;CAEC,GACD,MAAMC,gBAAYV,iBAAAA,EAAW;IAC3BI,MAAM;QACJO,UAAU;QACVC,UAAU;QAEV,WAAW;YACTC,SAAS;YACTC,SAAS;YACTH,UAAU;YACVI,OAAO;YACPC,yBAAyB;YACzBC,mBAAmB;YACnBC,yBAAyB;YACzB,sDAAsD;gBACpDD,mBAAmB;gBACnBD,yBAAyB;YAC3B;QACF;IACF;IACAG,MAAM;QACJC,iBAAiBlB,kBAAAA,CAAOmB,oBAAoB;QAE5C,WAAW;YACTC,eAAejB;YACfkB,iBAAiB,CAAC;;QAEhB,EAAErB,kBAAAA,CAAOmB,oBAAoB,CAAC;QAC9B,EAAEnB,kBAAAA,CAAOsB,oBAAoB,CAAC;QAC9B,EAAEtB,kBAAAA,CAAOmB,oBAAoB,CAAC,MAAM,CAAC;YACvCd,WAAW;YAEX,6CAA6C;gBAC3Ca,iBAAiB;YACnB;QACF;IACF;IACAK,OAAO;QACL,WAAW;YACTH,eAAed;YACfS,mBAAmB;YACnBG,iBAAiBlB,kBAAAA,CAAOmB,oBAAoB;QAC9C;IACF;IACAK,aAAa;QACXN,iBAAiBlB,kBAAAA,CAAOyB,yBAAyB;QAEjD,WAAW;YACTJ,iBAAiB,CAAC;;;MAGlB,EAAErB,kBAAAA,CAAOyB,yBAAyB,CAAC;uBAClB,CAAC;QACpB;IACF;IACAC,kBAAkB;QAChBR,iBAAiB;QAEjB,WAAW;YACTA,iBAAiBlB,kBAAAA,CAAOyB,yBAAyB;QACnD;IACF;IACAE,cAAc;QACZf,SAAS;IACX;AACF;AAEA,MAAMgB,yBAAqB9B,iBAAAA,EAAW;IACpCI,MAAM;QACJ2B,OAAO;QACPC,cAAc;IAChB;IACA,GAAG;QAAEC,QAAQ;IAAM;IACnB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,IAAI;QAAEA,QAAQ;IAAO;IACrB,KAAK;QAAEA,QAAQ;IAAQ;IACvB,KAAK;QAAEA,QAAQ;IAAQ;AACzB;AAEA,MAAMC,oBAAgBlC,iBAAAA,EAAW;IAC/B,GAAG;QAAE+B,OAAO;QAAOE,QAAQ;IAAM;IACjC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,IAAI;QAAEF,OAAO;QAAQE,QAAQ;IAAO;IACpC,KAAK;QAAEF,OAAO;QAASE,QAAQ;IAAQ;IACvC,KAAK;QAAEF,OAAO;QAASE,QAAQ;IAAQ;AACzC;AAEA,MAAME,0BAAsBnC,iBAAAA,EAAW;IACrCI,MAAM;QACJ4B,cAAc;IAChB;AACF;AAKO,uCAAuC,CAACK;IAC7C;IAEA,MAAM,EAAEC,SAAS,EAAEC,UAAU,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,MAAMK,aAAahC;IACnB,MAAMiC,aAAab;IACnB,MAAMc,aAAaV;IACnB,MAAMW,eAAeV;IAErB,oDAAoD;IACpDE,MAAMjC,IAAI,CAAC0C,SAAS,OAAG7C,mBAAAA,EACrBE,uBAAuBC,IAAI,EAC3BsC,WAAWtC,IAAI,EACfiC,MAAMjC,IAAI,CAAC2C,EAAE,KAAK,UAAUL,WAAWb,YAAY,EACnDS,cAAc,UAAUI,WAAWvB,IAAI,EACvCmB,cAAc,WAAWI,WAAWjB,KAAK,EACzCc,eAAe,iBAAiBG,WAAWhB,WAAW,EACtDY,cAAc,WAAWC,eAAe,iBAAiBG,WAAWd,gBAAgB,EACpFa,UAAU,eAAeE,WAAWvC,IAAI,EACxCqC,UAAU,eAAeE,UAAU,CAACH,KAAK,EACzCC,UAAU,YAAYG,UAAU,CAACJ,KAAK,EACtCC,UAAU,YAAYI,aAAazC,IAAI,EACvCqC,UAAU,YAAYG,UAAU,CAACJ,KAAK,EACtCH,MAAMjC,IAAI,CAAC0C,SAAS;IAGtB,OAAOT;AACT,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-skeleton",
-  "version": "9.7.2",
+  "version": "9.7.3",
   "description": "Converged v9 Skeleton Component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,11 +12,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.5.1",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-field": "^9.5.2",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.4",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },