@fluentui/react-spinner 9.4.4 → 9.4.6

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-spinner
 
-This log was last generated on Wed, 17 Apr 2024 21:47:26 GMT and should not be manually modified.
+This log was last generated on Thu, 02 May 2024 11:31:30 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.4.6)
+
+Thu, 02 May 2024 11:31:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.4.5..@fluentui/react-spinner_v9.4.6)
+
+### Patches
+
+- Fix spinner embedded in button animation ([PR #31195](https://github.com/microsoft/fluentui/pull/31195) by kirpadv@gmail.com)
+
+## [9.4.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.4.5)
+
+Tue, 23 Apr 2024 08:17:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.4.4..@fluentui/react-spinner_v9.4.5)
+
+### Patches
+
+- Bump @fluentui/react-jsx-runtime to v9.0.36 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-label to v9.1.68 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.17.0 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+- Bump @fluentui/react-utilities to v9.18.7 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
+
 ## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.4.4)
 
-Wed, 17 Apr 2024 21:47:26 GMT 
+Wed, 17 Apr 2024 21:53:58 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.4.3..@fluentui/react-spinner_v9.4.4)
 
 ### Patches

package/lib/components/Spinner/useSpinnerStyles.styles.js

@@ -29,9 +29,9 @@ const useSpinnerBaseClassName = /*#__PURE__*/__resetStyles("rvgcg50", "r15nd2jo"
 // The segments are rotated out from behind the mask to expand the visible arc from
 // 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.
 // The tail and spinner itself also have 360deg rotation animations for the spin.
-const useSpinnerTailBaseClassName = /*#__PURE__*/__resetStyles("r1lregi5", "rxq293c", {
-  r: [".r1lregi5{position:absolute;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r15mim6k;}", ".r1lregi5::before,.r1lregi5::after{content:\"\";position:absolute;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}", "@keyframes r15mim6k{0%{transform:rotate(-135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(225deg);}}", ".r1lregi5::before{animation-name:r18vhmn8;}", "@keyframes r18vhmn8{0%{transform:rotate(0deg);}50%{transform:rotate(105deg);}100%{transform:rotate(0deg);}}", ".r1lregi5::after{animation-name:rkgrvoi;}", "@keyframes rkgrvoi{0%{transform:rotate(0deg);}50%{transform:rotate(225deg);}100%{transform:rotate(0deg);}}", ".rxq293c{position:absolute;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r109gmi5;}", ".rxq293c::before,.rxq293c::after{content:\"\";position:absolute;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}", "@keyframes r109gmi5{0%{transform:rotate(135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(-225deg);}}", ".rxq293c::before{animation-name:r17whflh;}", "@keyframes r17whflh{0%{transform:rotate(0deg);}50%{transform:rotate(-105deg);}100%{transform:rotate(0deg);}}", ".rxq293c::after{animation-name:re4odhl;}", "@keyframes re4odhl{0%{transform:rotate(0deg);}50%{transform:rotate(-225deg);}100%{transform:rotate(0deg);}}"],
-  s: ["@media screen and (prefers-reduced-motion: reduce){.r1lregi5{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.r1lregi5::before,.r1lregi5::after{content:none;}}", "@media screen and (prefers-reduced-motion: reduce){.rxq293c{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.rxq293c::before,.rxq293c::after{content:none;}}"]
+const useSpinnerTailBaseClassName = /*#__PURE__*/__resetStyles("rxov3xa", "r1o544mv", {
+  r: [".rxov3xa{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r15mim6k;}", ".rxov3xa::before,.rxov3xa::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}", "@keyframes r15mim6k{0%{transform:rotate(-135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(225deg);}}", ".rxov3xa::before{animation-name:r18vhmn8;}", "@keyframes r18vhmn8{0%{transform:rotate(0deg);}50%{transform:rotate(105deg);}100%{transform:rotate(0deg);}}", ".rxov3xa::after{animation-name:rkgrvoi;}", "@keyframes rkgrvoi{0%{transform:rotate(0deg);}50%{transform:rotate(225deg);}100%{transform:rotate(0deg);}}", ".r1o544mv{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r109gmi5;}", ".r1o544mv::before,.r1o544mv::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}", "@keyframes r109gmi5{0%{transform:rotate(135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(-225deg);}}", ".r1o544mv::before{animation-name:r17whflh;}", "@keyframes r17whflh{0%{transform:rotate(0deg);}50%{transform:rotate(-105deg);}100%{transform:rotate(0deg);}}", ".r1o544mv::after{animation-name:re4odhl;}", "@keyframes re4odhl{0%{transform:rotate(0deg);}50%{transform:rotate(-225deg);}100%{transform:rotate(0deg);}}"],
+  s: ["@media screen and (prefers-reduced-motion: reduce){.rxov3xa{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.rxov3xa::before,.rxov3xa::after{content:none;}}", "@media screen and (prefers-reduced-motion: reduce){.r1o544mv{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.r1o544mv::before,.r1o544mv::after{content:none;}}"]
 });
 const useSpinnerStyles = /*#__PURE__*/__styles({
   inverted: {

package/lib/components/Spinner/useSpinnerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["useFluent_unstable","useFluent","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","spinnerClassNames","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","useRootStyles","vertical","Beiy3e4","d","useSpinnerBaseClassName","r","s","useSpinnerTailBaseClassName","useSpinnerStyles","inverted","De3pzq","sj55zd","rtlTail","btxmck","gb5jj2","Br2kee7","Bqenvij","a9b677","qmp6fs","tiny","small","medium","large","huge","m","useLabelStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useSpinnerStyles_unstable","state","labelPosition","size","appearance","dir","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className"],"sources":["useSpinnerStyles.styles.js"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const spinnerClassNames = {\n    root: 'fui-Spinner',\n    spinner: 'fui-Spinner__spinner',\n    spinnerTail: 'fui-Spinner__spinnerTail',\n    label: 'fui-Spinner__label'\n};\n/**\n * CSS variables used internally by Spinner\n */ const vars = {\n    strokeWidth: '--fui-Spinner--strokeWidth'\n};\nconst useRootBaseClassName = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    lineHeight: '0',\n    gap: '8px',\n    overflow: 'hidden'\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column'\n    }\n});\nconst useSpinnerBaseClassName = makeResetStyles({\n    position: 'relative',\n    flexShrink: 0,\n    // Use a mask to create the ring shape of the spinner.\n    maskImage: `radial-gradient(closest-side, ` + `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` + `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`,\n    backgroundColor: tokens.colorBrandStroke2Contrast,\n    color: tokens.colorBrandStroke1,\n    '@media screen and (forced-colors: active)': {\n        backgroundColor: 'HighlightText',\n        color: 'Highlight',\n        forcedColorAdjust: 'none'\n    },\n    animationDuration: '1.5s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'linear',\n    animationName: {\n        '0%': {\n            transform: 'rotate(0deg)'\n        },\n        '100%': {\n            transform: 'rotate(360deg)'\n        }\n    },\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        animationDuration: '1.8s'\n    }\n});\n// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.\n// The segments are rotated out from behind the mask to expand the visible arc from\n// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.\n// The tail and spinner itself also have 360deg rotation animations for the spin.\nconst useSpinnerTailBaseClassName = makeResetStyles({\n    position: 'absolute',\n    width: '100%',\n    height: '100%',\n    maskImage: 'conic-gradient(transparent 105deg, white 105deg)',\n    '&::before, &::after': {\n        content: '\"\"',\n        position: 'absolute',\n        width: '100%',\n        height: '100%',\n        animation: 'inherit',\n        backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)'\n    },\n    animationDuration: '1.5s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: tokens.curveEasyEase,\n    animationName: {\n        '0%': {\n            transform: 'rotate(-135deg)'\n        },\n        '50%': {\n            transform: 'rotate(0deg)'\n        },\n        '100%': {\n            transform: 'rotate(225deg)'\n        }\n    },\n    '&::before': {\n        animationName: {\n            '0%': {\n                transform: 'rotate(0deg)'\n            },\n            '50%': {\n                transform: 'rotate(105deg)'\n            },\n            '100%': {\n                transform: 'rotate(0deg)'\n            }\n        }\n    },\n    '&::after': {\n        animationName: {\n            '0%': {\n                transform: 'rotate(0deg)'\n            },\n            '50%': {\n                transform: 'rotate(225deg)'\n            },\n            '100%': {\n                transform: 'rotate(0deg)'\n            }\n        }\n    },\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        animationIterationCount: '0',\n        backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',\n        '&::before, &::after': {\n            content: 'none'\n        }\n    }\n});\nconst useSpinnerStyles = makeStyles({\n    inverted: {\n        backgroundColor: tokens.colorNeutralStrokeAlpha2,\n        color: tokens.colorNeutralStrokeOnBrand2\n    },\n    rtlTail: {\n        maskImage: 'conic-gradient(white 255deg, transparent 255deg)',\n        '&::before, &::after': {\n            backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)'\n        },\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)'\n        }\n    },\n    'extra-tiny': {\n        height: '16px',\n        width: '16px',\n        [vars.strokeWidth]: tokens.strokeWidthThick\n    },\n    tiny: {\n        height: '20px',\n        width: '20px',\n        [vars.strokeWidth]: tokens.strokeWidthThick\n    },\n    'extra-small': {\n        height: '24px',\n        width: '24px',\n        [vars.strokeWidth]: tokens.strokeWidthThick\n    },\n    small: {\n        height: '28px',\n        width: '28px',\n        [vars.strokeWidth]: tokens.strokeWidthThick\n    },\n    medium: {\n        height: '32px',\n        width: '32px',\n        [vars.strokeWidth]: tokens.strokeWidthThicker\n    },\n    large: {\n        height: '36px',\n        width: '36px',\n        [vars.strokeWidth]: tokens.strokeWidthThicker\n    },\n    'extra-large': {\n        height: '40px',\n        width: '40px',\n        [vars.strokeWidth]: tokens.strokeWidthThicker\n    },\n    huge: {\n        height: '44px',\n        width: '44px',\n        [vars.strokeWidth]: tokens.strokeWidthThickest\n    }\n});\nconst useLabelStyles = makeStyles({\n    inverted: {\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    'extra-tiny': {\n        ...typographyStyles.body1\n    },\n    tiny: {\n        ...typographyStyles.body1\n    },\n    'extra-small': {\n        ...typographyStyles.body1\n    },\n    small: {\n        ...typographyStyles.body1\n    },\n    medium: {\n        ...typographyStyles.subtitle2\n    },\n    large: {\n        ...typographyStyles.subtitle2\n    },\n    'extra-large': {\n        ...typographyStyles.subtitle2\n    },\n    huge: {\n        ...typographyStyles.subtitle1\n    }\n});\n/**\n * Apply styling to the Spinner slots based on the state\n */ export const useSpinnerStyles_unstable = (state)=>{\n    const { labelPosition, size, appearance } = state;\n    const { dir } = useFluent();\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const spinnerBaseClassName = useSpinnerBaseClassName();\n    const spinnerStyles = useSpinnerStyles();\n    const spinnerTailBaseClassName = useSpinnerTailBaseClassName();\n    const labelStyles = useLabelStyles();\n    state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);\n    if (state.spinner) {\n        state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);\n    }\n    if (state.spinnerTail) {\n        state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);\n    }\n    if (state.label) {\n        state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);\n    }\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["useFluent_unstable","useFluent","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","spinnerClassNames","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","useRootStyles","vertical","Beiy3e4","d","useSpinnerBaseClassName","r","s","useSpinnerTailBaseClassName","useSpinnerStyles","inverted","De3pzq","sj55zd","rtlTail","btxmck","gb5jj2","Br2kee7","Bqenvij","a9b677","qmp6fs","tiny","small","medium","large","huge","m","useLabelStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","useSpinnerStyles_unstable","state","labelPosition","size","appearance","dir","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className"],"sources":["useSpinnerStyles.styles.js"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const spinnerClassNames = {\n    root: 'fui-Spinner',\n    spinner: 'fui-Spinner__spinner',\n    spinnerTail: 'fui-Spinner__spinnerTail',\n    label: 'fui-Spinner__label'\n};\n/**\n * CSS variables used internally by Spinner\n */ const vars = {\n    strokeWidth: '--fui-Spinner--strokeWidth'\n};\nconst useRootBaseClassName = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    lineHeight: '0',\n    gap: '8px',\n    overflow: 'hidden'\n});\nconst useRootStyles = makeStyles({\n    vertical: {\n        flexDirection: 'column'\n    }\n});\nconst useSpinnerBaseClassName = makeResetStyles({\n    position: 'relative',\n    flexShrink: 0,\n    // Use a mask to create the ring shape of the spinner.\n    maskImage: `radial-gradient(closest-side, ` + `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` + `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`,\n    backgroundColor: tokens.colorBrandStroke2Contrast,\n    color: tokens.colorBrandStroke1,\n    '@media screen and (forced-colors: active)': {\n        backgroundColor: 'HighlightText',\n        color: 'Highlight',\n        forcedColorAdjust: 'none'\n    },\n    animationDuration: '1.5s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'linear',\n    animationName: {\n        '0%': {\n            transform: 'rotate(0deg)'\n        },\n        '100%': {\n            transform: 'rotate(360deg)'\n        }\n    },\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        animationDuration: '1.8s'\n    }\n});\n// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.\n// The segments are rotated out from behind the mask to expand the visible arc from\n// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.\n// The tail and spinner itself also have 360deg rotation animations for the spin.\nconst useSpinnerTailBaseClassName = makeResetStyles({\n    position: 'absolute',\n    display: 'block',\n    width: '100%',\n    height: '100%',\n    maskImage: 'conic-gradient(transparent 105deg, white 105deg)',\n    '&::before, &::after': {\n        content: '\"\"',\n        position: 'absolute',\n        display: 'block',\n        width: '100%',\n        height: '100%',\n        animation: 'inherit',\n        backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)'\n    },\n    animationDuration: '1.5s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: tokens.curveEasyEase,\n    animationName: {\n        '0%': {\n            transform: 'rotate(-135deg)'\n        },\n        '50%': {\n            transform: 'rotate(0deg)'\n        },\n        '100%': {\n            transform: 'rotate(225deg)'\n        }\n    },\n    '&::before': {\n        animationName: {\n            '0%': {\n                transform: 'rotate(0deg)'\n            },\n            '50%': {\n                transform: 'rotate(105deg)'\n            },\n            '100%': {\n                transform: 'rotate(0deg)'\n            }\n        }\n    },\n    '&::after': {\n        animationName: {\n            '0%': {\n                transform: 'rotate(0deg)'\n            },\n            '50%': {\n                transform: 'rotate(225deg)'\n            },\n            '100%': {\n                transform: 'rotate(0deg)'\n            }\n        }\n    },\n    '@media screen and (prefers-reduced-motion: reduce)': {\n        animationIterationCount: '0',\n        backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',\n        '&::before, &::after': {\n            content: 'none'\n        }\n    }\n});\nconst useSpinnerStyles = makeStyles({\n    inverted: {\n        backgroundColor: tokens.colorNeutralStrokeAlpha2,\n        color: tokens.colorNeutralStrokeOnBrand2\n    },\n    rtlTail: {\n        maskImage: 'conic-gradient(white 255deg, transparent 255deg)',\n        '&::before, &::after': {\n            backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)'\n        },\n        '@media screen and (prefers-reduced-motion: reduce)': {\n            backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)'\n        }\n    },\n    'extra-tiny': {\n        height: '16px',\n        width: '16px',\n        [vars.strokeWidth]: tokens.strokeWidthThick\n    },\n    tiny: {\n        height: '20px',\n        width: '20px',\n        [vars.strokeWidth]: tokens.strokeWidthThick\n    },\n    'extra-small': {\n        height: '24px',\n        width: '24px',\n        [vars.strokeWidth]: tokens.strokeWidthThick\n    },\n    small: {\n        height: '28px',\n        width: '28px',\n        [vars.strokeWidth]: tokens.strokeWidthThick\n    },\n    medium: {\n        height: '32px',\n        width: '32px',\n        [vars.strokeWidth]: tokens.strokeWidthThicker\n    },\n    large: {\n        height: '36px',\n        width: '36px',\n        [vars.strokeWidth]: tokens.strokeWidthThicker\n    },\n    'extra-large': {\n        height: '40px',\n        width: '40px',\n        [vars.strokeWidth]: tokens.strokeWidthThicker\n    },\n    huge: {\n        height: '44px',\n        width: '44px',\n        [vars.strokeWidth]: tokens.strokeWidthThickest\n    }\n});\nconst useLabelStyles = makeStyles({\n    inverted: {\n        color: tokens.colorNeutralForegroundStaticInverted\n    },\n    'extra-tiny': {\n        ...typographyStyles.body1\n    },\n    tiny: {\n        ...typographyStyles.body1\n    },\n    'extra-small': {\n        ...typographyStyles.body1\n    },\n    small: {\n        ...typographyStyles.body1\n    },\n    medium: {\n        ...typographyStyles.subtitle2\n    },\n    large: {\n        ...typographyStyles.subtitle2\n    },\n    'extra-large': {\n        ...typographyStyles.subtitle2\n    },\n    huge: {\n        ...typographyStyles.subtitle1\n    }\n});\n/**\n * Apply styling to the Spinner slots based on the state\n */ export const useSpinnerStyles_unstable = (state)=>{\n    const { labelPosition, size, appearance } = state;\n    const { dir } = useFluent();\n    const rootBaseClassName = useRootBaseClassName();\n    const rootStyles = useRootStyles();\n    const spinnerBaseClassName = useSpinnerBaseClassName();\n    const spinnerStyles = useSpinnerStyles();\n    const spinnerTailBaseClassName = useSpinnerTailBaseClassName();\n    const labelStyles = useLabelStyles();\n    state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);\n    if (state.spinner) {\n        state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);\n    }\n    if (state.spinnerTail) {\n        state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);\n    }\n    if (state.label) {\n        state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.js

@@ -59,26 +59,26 @@ const useSpinnerBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rvgcg50
 // The segments are rotated out from behind the mask to expand the visible arc from
 // 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.
 // The tail and spinner itself also have 360deg rotation animations for the spin.
-const useSpinnerTailBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1lregi5", "rxq293c", {
+const useSpinnerTailBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rxov3xa", "r1o544mv", {
     r: [
-        ".r1lregi5{position:absolute;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r15mim6k;}",
-        ".r1lregi5::before,.r1lregi5::after{content:\"\";position:absolute;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}",
+        ".rxov3xa{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r15mim6k;}",
+        ".rxov3xa::before,.rxov3xa::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}",
         "@keyframes r15mim6k{0%{transform:rotate(-135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(225deg);}}",
-        ".r1lregi5::before{animation-name:r18vhmn8;}",
+        ".rxov3xa::before{animation-name:r18vhmn8;}",
         "@keyframes r18vhmn8{0%{transform:rotate(0deg);}50%{transform:rotate(105deg);}100%{transform:rotate(0deg);}}",
-        ".r1lregi5::after{animation-name:rkgrvoi;}",
+        ".rxov3xa::after{animation-name:rkgrvoi;}",
         "@keyframes rkgrvoi{0%{transform:rotate(0deg);}50%{transform:rotate(225deg);}100%{transform:rotate(0deg);}}",
-        ".rxq293c{position:absolute;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r109gmi5;}",
-        ".rxq293c::before,.rxq293c::after{content:\"\";position:absolute;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}",
+        ".r1o544mv{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r109gmi5;}",
+        ".r1o544mv::before,.r1o544mv::after{content:\"\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}",
         "@keyframes r109gmi5{0%{transform:rotate(135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(-225deg);}}",
-        ".rxq293c::before{animation-name:r17whflh;}",
+        ".r1o544mv::before{animation-name:r17whflh;}",
         "@keyframes r17whflh{0%{transform:rotate(0deg);}50%{transform:rotate(-105deg);}100%{transform:rotate(0deg);}}",
-        ".rxq293c::after{animation-name:re4odhl;}",
+        ".r1o544mv::after{animation-name:re4odhl;}",
         "@keyframes re4odhl{0%{transform:rotate(0deg);}50%{transform:rotate(-225deg);}100%{transform:rotate(0deg);}}"
     ],
     s: [
-        "@media screen and (prefers-reduced-motion: reduce){.r1lregi5{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.r1lregi5::before,.r1lregi5::after{content:none;}}",
-        "@media screen and (prefers-reduced-motion: reduce){.rxq293c{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.rxq293c::before,.rxq293c::after{content:none;}}"
+        "@media screen and (prefers-reduced-motion: reduce){.rxov3xa{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.rxov3xa::before,.rxov3xa::after{content:none;}}",
+        "@media screen and (prefers-reduced-motion: reduce){.r1o544mv{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.r1o544mv::before,.r1o544mv::after{content:none;}}"
     ]
 });
 const useSpinnerStyles = /*#__PURE__*/ (0, _react.__styles)({

package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useSpinnerStyles.styles.js"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nexport const spinnerClassNames = {\n  root: 'fui-Spinner',\n  spinner: 'fui-Spinner__spinner',\n  spinnerTail: 'fui-Spinner__spinnerTail',\n  label: 'fui-Spinner__label'\n};\n/**\n * CSS variables used internally by Spinner\n */\nconst vars = {\n  strokeWidth: '--fui-Spinner--strokeWidth'\n};\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r82apo5\", null, [\".r82apo5{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;overflow:hidden;}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n  vertical: {\n    Beiy3e4: \"f1vx9l62\"\n  }\n}, {\n  d: [\".f1vx9l62{flex-direction:column;}\"]\n});\nconst useSpinnerBaseClassName = /*#__PURE__*/__resetStyles(\"rvgcg50\", \"r15nd2jo\", {\n  r: [\".rvgcg50{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:rb7n1on;}\", \"@keyframes rb7n1on{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}\", \".r15nd2jo{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:r1gx3jof;}\", \"@keyframes r1gx3jof{0%{transform:rotate(0deg);}100%{transform:rotate(-360deg);}}\"],\n  s: [\"@media screen and (forced-colors: active){.rvgcg50{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}\", \"@media screen and (prefers-reduced-motion: reduce){.rvgcg50{animation-duration:1.8s;}}\", \"@media screen and (forced-colors: active){.r15nd2jo{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}\", \"@media screen and (prefers-reduced-motion: reduce){.r15nd2jo{animation-duration:1.8s;}}\"]\n});\n// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.\n// The segments are rotated out from behind the mask to expand the visible arc from\n// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.\n// The tail and spinner itself also have 360deg rotation animations for the spin.\nconst useSpinnerTailBaseClassName = /*#__PURE__*/__resetStyles(\"r1lregi5\", \"rxq293c\", {\n  r: [\".r1lregi5{position:absolute;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r15mim6k;}\", \".r1lregi5::before,.r1lregi5::after{content:\\\"\\\";position:absolute;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}\", \"@keyframes r15mim6k{0%{transform:rotate(-135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(225deg);}}\", \".r1lregi5::before{animation-name:r18vhmn8;}\", \"@keyframes r18vhmn8{0%{transform:rotate(0deg);}50%{transform:rotate(105deg);}100%{transform:rotate(0deg);}}\", \".r1lregi5::after{animation-name:rkgrvoi;}\", \"@keyframes rkgrvoi{0%{transform:rotate(0deg);}50%{transform:rotate(225deg);}100%{transform:rotate(0deg);}}\", \".rxq293c{position:absolute;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r109gmi5;}\", \".rxq293c::before,.rxq293c::after{content:\\\"\\\";position:absolute;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}\", \"@keyframes r109gmi5{0%{transform:rotate(135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(-225deg);}}\", \".rxq293c::before{animation-name:r17whflh;}\", \"@keyframes r17whflh{0%{transform:rotate(0deg);}50%{transform:rotate(-105deg);}100%{transform:rotate(0deg);}}\", \".rxq293c::after{animation-name:re4odhl;}\", \"@keyframes re4odhl{0%{transform:rotate(0deg);}50%{transform:rotate(-225deg);}100%{transform:rotate(0deg);}}\"],\n  s: [\"@media screen and (prefers-reduced-motion: reduce){.r1lregi5{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.r1lregi5::before,.r1lregi5::after{content:none;}}\", \"@media screen and (prefers-reduced-motion: reduce){.rxq293c{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.rxq293c::before,.rxq293c::after{content:none;}}\"]\n});\nconst useSpinnerStyles = /*#__PURE__*/__styles({\n  inverted: {\n    De3pzq: \"fr407j0\",\n    sj55zd: \"f1f7voed\"\n  },\n  rtlTail: {\n    btxmck: \"f179dep3\",\n    gb5jj2: \"fbz9ihp\",\n    Br2kee7: \"f1wkkxo7\"\n  },\n  \"extra-tiny\": {\n    Bqenvij: \"fd461yt\",\n    a9b677: \"fjw5fx7\",\n    qmp6fs: \"f1v3ph3m\"\n  },\n  tiny: {\n    Bqenvij: \"fjamq6b\",\n    a9b677: \"f64fuq3\",\n    qmp6fs: \"f1v3ph3m\"\n  },\n  \"extra-small\": {\n    Bqenvij: \"frvgh55\",\n    a9b677: \"fq4mcun\",\n    qmp6fs: \"f1v3ph3m\"\n  },\n  small: {\n    Bqenvij: \"fxldao9\",\n    a9b677: \"f1w9dchk\",\n    qmp6fs: \"f1v3ph3m\"\n  },\n  medium: {\n    Bqenvij: \"f1d2rq10\",\n    a9b677: \"f1szoe96\",\n    qmp6fs: \"fb52u90\"\n  },\n  large: {\n    Bqenvij: \"f8ljn23\",\n    a9b677: \"fpdz1er\",\n    qmp6fs: \"fb52u90\"\n  },\n  \"extra-large\": {\n    Bqenvij: \"fbhnoac\",\n    a9b677: \"feqmc2u\",\n    qmp6fs: \"fb52u90\"\n  },\n  huge: {\n    Bqenvij: \"f1ft4266\",\n    a9b677: \"fksc0bp\",\n    qmp6fs: \"fa3u9ii\"\n  }\n}, {\n  d: [\".fr407j0{background-color:var(--colorNeutralStrokeAlpha2);}\", \".f1f7voed{color:var(--colorNeutralStrokeOnBrand2);}\", \".f179dep3{-webkit-mask-image:conic-gradient(white 255deg, transparent 255deg);mask-image:conic-gradient(white 255deg, transparent 255deg);}\", \".fbz9ihp::before,.fbz9ihp::after{background-image:conic-gradient(transparent 225deg, currentcolor 225deg);}\", \".fd461yt{height:16px;}\", \".fjw5fx7{width:16px;}\", \".f1v3ph3m{--fui-Spinner--strokeWidth:var(--strokeWidthThick);}\", \".fjamq6b{height:20px;}\", \".f64fuq3{width:20px;}\", \".frvgh55{height:24px;}\", \".fq4mcun{width:24px;}\", \".fxldao9{height:28px;}\", \".f1w9dchk{width:28px;}\", \".f1d2rq10{height:32px;}\", \".f1szoe96{width:32px;}\", \".fb52u90{--fui-Spinner--strokeWidth:var(--strokeWidthThicker);}\", \".f8ljn23{height:36px;}\", \".fpdz1er{width:36px;}\", \".fbhnoac{height:40px;}\", \".feqmc2u{width:40px;}\", \".f1ft4266{height:44px;}\", \".fksc0bp{width:44px;}\", \".fa3u9ii{--fui-Spinner--strokeWidth:var(--strokeWidthThickest);}\"],\n  m: [[\"@media screen and (prefers-reduced-motion: reduce){.f1wkkxo7{background-image:conic-gradient(currentcolor 0deg, transparent 240deg);}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }]]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n  inverted: {\n    sj55zd: \"fonrgv7\"\n  },\n  \"extra-tiny\": {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  tiny: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  \"extra-small\": {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  small: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  medium: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"faaz57k\"\n  },\n  large: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"faaz57k\"\n  },\n  \"extra-large\": {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"faaz57k\"\n  },\n  huge: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"f1pp30po\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"f106mvju\"\n  }\n}, {\n  d: [\".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".fod5ikn{font-size:var(--fontSizeBase400);}\", \".fl43uef{font-weight:var(--fontWeightSemibold);}\", \".faaz57k{line-height:var(--lineHeightBase400);}\", \".f1pp30po{font-size:var(--fontSizeBase500);}\", \".f106mvju{line-height:var(--lineHeightBase500);}\"]\n});\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = state => {\n  const {\n    labelPosition,\n    size,\n    appearance\n  } = state;\n  const {\n    dir\n  } = useFluent();\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  const spinnerBaseClassName = useSpinnerBaseClassName();\n  const spinnerStyles = useSpinnerStyles();\n  const spinnerTailBaseClassName = useSpinnerTailBaseClassName();\n  const labelStyles = useLabelStyles();\n  state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);\n  if (state.spinner) {\n    state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);\n  }\n  if (state.spinnerTail) {\n    state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);\n  }\n  if (state.label) {\n    state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useSpinnerStyles.styles.js.map"],"names":["spinnerClassNames","useSpinnerStyles_unstable","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","__resetStyles","useRootStyles","__styles","vertical","Beiy3e4","d","useSpinnerBaseClassName","r","s","useSpinnerTailBaseClassName","useSpinnerStyles","inverted","De3pzq","sj55zd","rtlTail","btxmck","gb5jj2","Br2kee7","Bqenvij","a9b677","qmp6fs","tiny","small","medium","large","huge","m","useLabelStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","state","labelPosition","size","appearance","dir","useFluent","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className","mergeClasses"],"mappings":"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"}
+{"version":3,"sources":["useSpinnerStyles.styles.js"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nexport const spinnerClassNames = {\n  root: 'fui-Spinner',\n  spinner: 'fui-Spinner__spinner',\n  spinnerTail: 'fui-Spinner__spinnerTail',\n  label: 'fui-Spinner__label'\n};\n/**\n * CSS variables used internally by Spinner\n */\nconst vars = {\n  strokeWidth: '--fui-Spinner--strokeWidth'\n};\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r82apo5\", null, [\".r82apo5{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;overflow:hidden;}\"]);\nconst useRootStyles = /*#__PURE__*/__styles({\n  vertical: {\n    Beiy3e4: \"f1vx9l62\"\n  }\n}, {\n  d: [\".f1vx9l62{flex-direction:column;}\"]\n});\nconst useSpinnerBaseClassName = /*#__PURE__*/__resetStyles(\"rvgcg50\", \"r15nd2jo\", {\n  r: [\".rvgcg50{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:rb7n1on;}\", \"@keyframes rb7n1on{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}\", \".r15nd2jo{position:relative;flex-shrink:0;-webkit-mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);mask-image:radial-gradient(closest-side, transparent calc(100% - var(--fui-Spinner--strokeWidth) - 1px), white calc(100% - var(--fui-Spinner--strokeWidth)) calc(100% - 1px), transparent 100%);background-color:var(--colorBrandStroke2Contrast);color:var(--colorBrandStroke1);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;animation-name:r1gx3jof;}\", \"@keyframes r1gx3jof{0%{transform:rotate(0deg);}100%{transform:rotate(-360deg);}}\"],\n  s: [\"@media screen and (forced-colors: active){.rvgcg50{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}\", \"@media screen and (prefers-reduced-motion: reduce){.rvgcg50{animation-duration:1.8s;}}\", \"@media screen and (forced-colors: active){.r15nd2jo{background-color:HighlightText;color:Highlight;forced-color-adjust:none;}}\", \"@media screen and (prefers-reduced-motion: reduce){.r15nd2jo{animation-duration:1.8s;}}\"]\n});\n// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.\n// The segments are rotated out from behind the mask to expand the visible arc from\n// 30deg (min) to 255deg (max), and then back behind the mask again to shrink the arc.\n// The tail and spinner itself also have 360deg rotation animations for the spin.\nconst useSpinnerTailBaseClassName = /*#__PURE__*/__resetStyles(\"rxov3xa\", \"r1o544mv\", {\n  r: [\".rxov3xa{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r15mim6k;}\", \".rxov3xa::before,.rxov3xa::after{content:\\\"\\\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}\", \"@keyframes r15mim6k{0%{transform:rotate(-135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(225deg);}}\", \".rxov3xa::before{animation-name:r18vhmn8;}\", \"@keyframes r18vhmn8{0%{transform:rotate(0deg);}50%{transform:rotate(105deg);}100%{transform:rotate(0deg);}}\", \".rxov3xa::after{animation-name:rkgrvoi;}\", \"@keyframes rkgrvoi{0%{transform:rotate(0deg);}50%{transform:rotate(225deg);}100%{transform:rotate(0deg);}}\", \".r1o544mv{position:absolute;display:block;width:100%;height:100%;-webkit-mask-image:conic-gradient(transparent 105deg, white 105deg);mask-image:conic-gradient(transparent 105deg, white 105deg);animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:var(--curveEasyEase);animation-name:r109gmi5;}\", \".r1o544mv::before,.r1o544mv::after{content:\\\"\\\";position:absolute;display:block;width:100%;height:100%;animation:inherit;background-image:conic-gradient(currentcolor 135deg, transparent 135deg);}\", \"@keyframes r109gmi5{0%{transform:rotate(135deg);}50%{transform:rotate(0deg);}100%{transform:rotate(-225deg);}}\", \".r1o544mv::before{animation-name:r17whflh;}\", \"@keyframes r17whflh{0%{transform:rotate(0deg);}50%{transform:rotate(-105deg);}100%{transform:rotate(0deg);}}\", \".r1o544mv::after{animation-name:re4odhl;}\", \"@keyframes re4odhl{0%{transform:rotate(0deg);}50%{transform:rotate(-225deg);}100%{transform:rotate(0deg);}}\"],\n  s: [\"@media screen and (prefers-reduced-motion: reduce){.rxov3xa{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.rxov3xa::before,.rxov3xa::after{content:none;}}\", \"@media screen and (prefers-reduced-motion: reduce){.r1o544mv{animation-iteration-count:0;background-image:conic-gradient(transparent 120deg, currentcolor 360deg);}.r1o544mv::before,.r1o544mv::after{content:none;}}\"]\n});\nconst useSpinnerStyles = /*#__PURE__*/__styles({\n  inverted: {\n    De3pzq: \"fr407j0\",\n    sj55zd: \"f1f7voed\"\n  },\n  rtlTail: {\n    btxmck: \"f179dep3\",\n    gb5jj2: \"fbz9ihp\",\n    Br2kee7: \"f1wkkxo7\"\n  },\n  \"extra-tiny\": {\n    Bqenvij: \"fd461yt\",\n    a9b677: \"fjw5fx7\",\n    qmp6fs: \"f1v3ph3m\"\n  },\n  tiny: {\n    Bqenvij: \"fjamq6b\",\n    a9b677: \"f64fuq3\",\n    qmp6fs: \"f1v3ph3m\"\n  },\n  \"extra-small\": {\n    Bqenvij: \"frvgh55\",\n    a9b677: \"fq4mcun\",\n    qmp6fs: \"f1v3ph3m\"\n  },\n  small: {\n    Bqenvij: \"fxldao9\",\n    a9b677: \"f1w9dchk\",\n    qmp6fs: \"f1v3ph3m\"\n  },\n  medium: {\n    Bqenvij: \"f1d2rq10\",\n    a9b677: \"f1szoe96\",\n    qmp6fs: \"fb52u90\"\n  },\n  large: {\n    Bqenvij: \"f8ljn23\",\n    a9b677: \"fpdz1er\",\n    qmp6fs: \"fb52u90\"\n  },\n  \"extra-large\": {\n    Bqenvij: \"fbhnoac\",\n    a9b677: \"feqmc2u\",\n    qmp6fs: \"fb52u90\"\n  },\n  huge: {\n    Bqenvij: \"f1ft4266\",\n    a9b677: \"fksc0bp\",\n    qmp6fs: \"fa3u9ii\"\n  }\n}, {\n  d: [\".fr407j0{background-color:var(--colorNeutralStrokeAlpha2);}\", \".f1f7voed{color:var(--colorNeutralStrokeOnBrand2);}\", \".f179dep3{-webkit-mask-image:conic-gradient(white 255deg, transparent 255deg);mask-image:conic-gradient(white 255deg, transparent 255deg);}\", \".fbz9ihp::before,.fbz9ihp::after{background-image:conic-gradient(transparent 225deg, currentcolor 225deg);}\", \".fd461yt{height:16px;}\", \".fjw5fx7{width:16px;}\", \".f1v3ph3m{--fui-Spinner--strokeWidth:var(--strokeWidthThick);}\", \".fjamq6b{height:20px;}\", \".f64fuq3{width:20px;}\", \".frvgh55{height:24px;}\", \".fq4mcun{width:24px;}\", \".fxldao9{height:28px;}\", \".f1w9dchk{width:28px;}\", \".f1d2rq10{height:32px;}\", \".f1szoe96{width:32px;}\", \".fb52u90{--fui-Spinner--strokeWidth:var(--strokeWidthThicker);}\", \".f8ljn23{height:36px;}\", \".fpdz1er{width:36px;}\", \".fbhnoac{height:40px;}\", \".feqmc2u{width:40px;}\", \".f1ft4266{height:44px;}\", \".fksc0bp{width:44px;}\", \".fa3u9ii{--fui-Spinner--strokeWidth:var(--strokeWidthThickest);}\"],\n  m: [[\"@media screen and (prefers-reduced-motion: reduce){.f1wkkxo7{background-image:conic-gradient(currentcolor 0deg, transparent 240deg);}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }]]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n  inverted: {\n    sj55zd: \"fonrgv7\"\n  },\n  \"extra-tiny\": {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  tiny: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  \"extra-small\": {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  small: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  medium: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"faaz57k\"\n  },\n  large: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"faaz57k\"\n  },\n  \"extra-large\": {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"faaz57k\"\n  },\n  huge: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"f1pp30po\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"f106mvju\"\n  }\n}, {\n  d: [\".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".fod5ikn{font-size:var(--fontSizeBase400);}\", \".fl43uef{font-weight:var(--fontWeightSemibold);}\", \".faaz57k{line-height:var(--lineHeightBase400);}\", \".f1pp30po{font-size:var(--fontSizeBase500);}\", \".f106mvju{line-height:var(--lineHeightBase500);}\"]\n});\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = state => {\n  const {\n    labelPosition,\n    size,\n    appearance\n  } = state;\n  const {\n    dir\n  } = useFluent();\n  const rootBaseClassName = useRootBaseClassName();\n  const rootStyles = useRootStyles();\n  const spinnerBaseClassName = useSpinnerBaseClassName();\n  const spinnerStyles = useSpinnerStyles();\n  const spinnerTailBaseClassName = useSpinnerTailBaseClassName();\n  const labelStyles = useLabelStyles();\n  state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);\n  if (state.spinner) {\n    state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);\n  }\n  if (state.spinnerTail) {\n    state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);\n  }\n  if (state.label) {\n    state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useSpinnerStyles.styles.js.map"],"names":["spinnerClassNames","useSpinnerStyles_unstable","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","__resetStyles","useRootStyles","__styles","vertical","Beiy3e4","d","useSpinnerBaseClassName","r","s","useSpinnerTailBaseClassName","useSpinnerStyles","inverted","De3pzq","sj55zd","rtlTail","btxmck","gb5jj2","Br2kee7","Bqenvij","a9b677","qmp6fs","tiny","small","medium","large","huge","m","useLabelStyles","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","state","labelPosition","size","appearance","dir","useFluent","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className","mergeClasses"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinner",
-  "version": "9.4.4",
+  "version": "9.4.6",
   "description": "Spinner component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,11 +33,11 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-jsx-runtime": "^9.0.35",
-    "@fluentui/react-label": "^9.1.67",
-    "@fluentui/react-shared-contexts": "^9.16.0",
+    "@fluentui/react-jsx-runtime": "^9.0.36",
+    "@fluentui/react-label": "^9.1.68",
+    "@fluentui/react-shared-contexts": "^9.17.0",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.6",
+    "@fluentui/react-utilities": "^9.18.7",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },