@fluentui/react-spinner 0.0.0-nightly-20230223-2115.1 → 0.0.0-nightly-20230228-0425.1

package/lib-commonjs/components/Spinner/useSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../lib/components/Spinner/useSpinner.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props, ref) => {\n  // Props\n  const {\n    appearance = 'primary',\n    labelPosition = 'after',\n    size = 'medium'\n  } = props;\n  const baseId = useId('spinner');\n  const {\n    role = 'progressbar',\n    tabIndex,\n    ...rest\n  } = props;\n  const nativeRoot = getNativeElementProps('div', {\n    ref,\n    role,\n    ...rest\n  }, ['size']);\n  const labelShorthand = resolveShorthand(props.label, {\n    defaultProps: {\n      id: baseId\n    },\n    required: false\n  });\n  const spinnerShortHand = resolveShorthand(props.spinner, {\n    required: true,\n    defaultProps: {\n      children: /*#__PURE__*/React.createElement(DefaultSvg, null),\n      tabIndex\n    }\n  });\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n  const state = {\n    appearance,\n    labelPosition,\n    size,\n    components: {\n      root: 'div',\n      spinner: 'span',\n      label: Label\n    },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    label: labelShorthand\n  };\n  return state;\n};\n//# sourceMappingURL=useSpinner.js.map"],"names":["useSpinner_unstable","props","ref","appearance","labelPosition","size","baseId","useId","role","tabIndex","rest","nativeRoot","getNativeElementProps","labelShorthand","resolveShorthand","label","defaultProps","id","required","spinnerShortHand","spinner","children","React","createElement","DefaultSvg","state","components","root","Label"],"mappings":";;;;+BAaaA;;aAAAA;;;6DAbU;gCACwC;4BACzC;4BACK;AAUpB,MAAMA,sBAAsB,CAACC,OAAOC,MAAQ;IACjD,QAAQ;IACR,MAAM,EACJC,YAAa,UAAS,EACtBC,eAAgB,QAAO,EACvBC,MAAO,SAAQ,EAChB,GAAGJ;IACJ,MAAMK,SAASC,IAAAA,qBAAK,EAAC;IACrB,MAAM,EACJC,MAAO,cAAa,EACpBC,SAAQ,EACR,GAAGC,MACJ,GAAGT;IACJ,MAAMU,aAAaC,IAAAA,qCAAqB,EAAC,OAAO;QAC9CV;QACAM;QACA,GAAGE,IAAI;IACT,GAAG;QAAC;KAAO;IACX,MAAMG,iBAAiBC,IAAAA,gCAAgB,EAACb,MAAMc,KAAK,EAAE;QACnDC,cAAc;YACZC,IAAIX;QACN;QACAY,UAAU,KAAK;IACjB;IACA,MAAMC,mBAAmBL,IAAAA,gCAAgB,EAACb,MAAMmB,OAAO,EAAE;QACvDF,UAAU,IAAI;QACdF,cAAc;YACZK,UAAU,WAAW,GAAEC,OAAMC,aAAa,CAACC,sBAAU,EAAE,IAAI;YAC3Df;QACF;IACF;IACA,IAAII,kBAAkBF,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGE,eAAeI,EAAE;IACnD,CAAC;IACD,MAAMQ,QAAQ;QACZtB;QACAC;QACAC;QACAqB,YAAY;YACVC,MAAM;YACNP,SAAS;YACTL,OAAOa,iBAAK;QACd;QACAD,MAAMhB;QACNS,SAASD;QACTJ,OAAOF;IACT;IACA,OAAOY;AACT,GACA,sCAAsC"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AAEA;;;;;;;;;AASO,MAAMA,mBAAmB,GAAG,CAACC,KAAmB,EAAEC,GAA2B,KAAkB;EACpG;EACA,MAAM;IAAEC,UAAU,GAAG,SAAS;IAAEC,aAAa,GAAG,OAAO;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGJ,KAAK;EAClF,MAAMK,MAAM,GAAGC,uBAAK,CAAC,SAAS,CAAC;EAE/B,MAAM;IAAEC,IAAI,GAAG,aAAa;IAAEC,QAAQ;IAAE,GAAGC;EAAI,CAAE,GAAGT,KAAK;EACzD,MAAMU,UAAU,GAAGJ,uCAAqB,CAAC,KAAK,EAAE;IAAEL,GAAG;IAAEM,IAAI;IAAE,GAAGE;EAAI,CAAE,EAAE,CAAC,MAAM,CAAC,CAAC;EAEjF,MAAME,cAAc,GAAGL,kCAAgB,CAACN,KAAK,CAACY,KAAK,EAAE;IACnDC,YAAY,EAAE;MACZC,EAAE,EAAET;KACL;IACDU,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,gBAAgB,GAAGV,kCAAgB,CAACN,KAAK,CAACiB,OAAO,EAAE;IACvDF,QAAQ,EAAE,IAAI;IACdF,YAAY,EAAE;MACZK,QAAQ,EAAEC,oBAACC,uBAAU,OAAG;MACxBZ;;GAEH,CAAC;EAEF,IAAIG,cAAc,IAAID,UAAU,IAAI,CAACA,UAAU,CAAC,iBAAiB,CAAC,EAAE;IAClEA,UAAU,CAAC,iBAAiB,CAAC,GAAGC,cAAc,CAACG,EAAE;;EAGnD,MAAMO,KAAK,GAAiB;IAC1BnB,UAAU;IACVC,aAAa;IACbC,IAAI;IACJkB,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXN,OAAO,EAAE,MAAM;MACfL,KAAK,EAAEY;KACR;IACDD,IAAI,EAAEb,UAAU;IAChBO,OAAO,EAAED,gBAAgB;IACzBJ,KAAK,EAAED;GACR;EACD,OAAOU,KAAK;AACd,CAAC;AAzCYI,2BAAmB","names":["useSpinner_unstable","props","ref","appearance","labelPosition","size","baseId","react_utilities_1","role","tabIndex","rest","nativeRoot","labelShorthand","label","defaultProps","id","required","spinnerShortHand","spinner","children","React","DefaultSvg_1","state","components","root","react_label_1","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/useSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {\n  // Props\n  const { appearance = 'primary', labelPosition = 'after', size = 'medium' } = props;\n  const baseId = useId('spinner');\n\n  const { role = 'progressbar', tabIndex, ...rest } = props;\n  const nativeRoot = getNativeElementProps('div', { ref, role, ...rest }, ['size']);\n\n  const labelShorthand = resolveShorthand(props.label, {\n    defaultProps: {\n      id: baseId,\n    },\n    required: false,\n  });\n\n  const spinnerShortHand = resolveShorthand(props.spinner, {\n    required: true,\n    defaultProps: {\n      children: <DefaultSvg />,\n      tabIndex,\n    },\n  });\n\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n\n  const state: SpinnerState = {\n    appearance,\n    labelPosition,\n    size,\n    components: {\n      root: 'div',\n      spinner: 'span',\n      label: Label,\n    },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    label: labelShorthand,\n  };\n  return state;\n};\n"]}

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

@@ -1,378 +1,260 @@
 "use strict";
+
 Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    spinnerClassNames: ()=>spinnerClassNames,
-    useSpinnerStyles_unstable: ()=>useSpinnerStyles_unstable
+  value: true
 });
-const _react = require("@griffel/react");
-const spinnerClassNames = {
-    root: 'fui-Spinner',
-    spinner: 'fui-Spinner__spinner',
-    label: 'fui-Spinner__label'
+exports.useSpinnerStyles_unstable = exports.spinnerClassNames = void 0;
+const react_1 = /*#__PURE__*/require("@griffel/react");
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+exports.spinnerClassNames = {
+  root: 'fui-Spinner',
+  spinner: 'fui-Spinner__spinner',
+  label: 'fui-Spinner__label'
 };
 /*
  * TODO: Update with proper tokens when added
  * Radii for the Spinner circles
- */ const rValues = {
-    tiny: '9px',
-    extraSmall: '11px',
-    small: '13px',
-    medium: '14.5px',
-    large: '16.5px',
-    extraLarge: '18.5px',
-    huge: '20px'
+ */
+const rValues = {
+  tiny: '9px',
+  extraSmall: '11px',
+  small: '13px',
+  medium: '14.5px',
+  large: '16.5px',
+  extraLarge: '18.5px',
+  huge: '20px'
 };
 /*
  * TODO: Update with proper tokens when added
  * Sizes for the Spinner
- */ const spinnnerSizes = {
-    tiny: '20px',
-    extraSmall: '24px',
-    small: '28px',
-    medium: '32px',
-    large: '36px',
-    extraLarge: '40px',
-    huge: '44px'
+ */
+const spinnnerSizes = {
+  tiny: '20px',
+  extraSmall: '24px',
+  small: '28px',
+  medium: '32px',
+  large: '36px',
+  extraLarge: '40px',
+  huge: '44px'
 };
 /*
  * TODO: Update with proper tokens when added
  * Animation for Spinner
- */ const spinnerAnimation = {
-    container: {
-        animationDuration: '3s',
-        animationIterationCount: 'infinite',
-        animationTimingFunction: 'linear',
-        backgroundColor: 'transparent'
-    }
+ */
+const spinnerAnimation = {
+  container: {
+    animationDuration: '3s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'linear',
+    backgroundColor: 'transparent'
+  }
 };
 /**
  * Styles for the root slot
- */ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    root: {
-        mc9l5x: "f22iagw",
-        Bt984gj: "f122n59",
-        Brf1p80: "f4d9j23",
-        Bg96gwp: "fez10in",
-        i8kkvl: "f4px1ci",
-        Belr9w4: "fn67r4l"
-    },
-    horizontal: {
-        Beiy3e4: "f1063pyq"
-    },
-    vertical: {
-        Beiy3e4: "f1vx9l62"
-    }
+ */
+const useRootStyles = /*#__PURE__*/react_1.__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    Brf1p80: "f4d9j23",
+    Bg96gwp: "fez10in",
+    i8kkvl: "f4px1ci",
+    Belr9w4: "fn67r4l"
+  },
+  horizontal: {
+    Beiy3e4: "f1063pyq"
+  },
+  vertical: {
+    Beiy3e4: "f1vx9l62"
+  }
 }, {
-    d: [
-        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
-        ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
-        ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}",
-        ".fez10in{line-height:0;}",
-        ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}",
-        ".fn67r4l{row-gap:8px;}",
-        ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}",
-        ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"
-    ]
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fez10in{line-height:0;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
 });
-const useLoaderStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    spinnerSVG: {
-        B3aqqti: "f1or16p5",
-        Brovlpu: "f1grzc83",
-        Bxa1mx5: "f19shzzi",
-        Bwaue66: [
-            "f5tbecn",
-            "f15qb8s7"
-        ],
-        fyp1ls: "fn4mtlg",
-        ag6ruv: "f1y80fxs",
-        osj692: "f1r2crtq",
-        aq5vjd: "f1wsi8sr",
-        tlu9e1: "f1bkm2qd",
-        J3u96z: "f1urqz7h",
-        d32isg: "f1da2vov",
-        Bsvqbuc: "f11rfva0",
-        b3s3i5: "f1exc66"
-    },
-    tiny: {
-        Bah9ito: "f1j4wmu2",
-        ut6tcf: "f1vppzuq",
-        B7p06xz: "fv1u54w",
-        B807ibg: "fngtx1d"
-    },
-    "extra-small": {
-        Bah9ito: "fmpqlna",
-        ut6tcf: "f15z5jzu",
-        B7p06xz: "fv1u54w",
-        B807ibg: "fadawes"
-    },
-    small: {
-        Bah9ito: "fo52gbo",
-        ut6tcf: "f1b41i3v",
-        B7p06xz: "fv1u54w",
-        B807ibg: "f1xqyyrl"
-    },
-    medium: {
-        Bah9ito: "f1aiqagr",
-        ut6tcf: "f1wtx80b",
-        B7p06xz: "f1flujpd",
-        B807ibg: "f1u06hy7"
-    },
-    large: {
-        Bah9ito: "f1trdq7b",
-        ut6tcf: "f9e0mc5",
-        B7p06xz: "f1flujpd",
-        B807ibg: "f13pmvhl"
-    },
-    "extra-large": {
-        Bah9ito: "f89rf2a",
-        ut6tcf: "f1w2xg3q",
-        B7p06xz: "f1flujpd",
-        B807ibg: "fmn74v6"
-    },
-    huge: {
-        Bah9ito: "f1rx7k5y",
-        ut6tcf: "f1vtyt49",
-        B7p06xz: "f1owbg48",
-        B807ibg: "f1fr1izd"
-    }
+const useLoaderStyles = /*#__PURE__*/react_1.__styles({
+  spinnerSVG: {
+    B3aqqti: "f1or16p5",
+    Brovlpu: "f1grzc83",
+    Bxa1mx5: "f19shzzi",
+    Bwaue66: ["f5tbecn", "f15qb8s7"],
+    fyp1ls: "fn4mtlg",
+    ag6ruv: "f1y80fxs",
+    osj692: "f1r2crtq",
+    aq5vjd: "f1wsi8sr",
+    tlu9e1: "f1bkm2qd",
+    J3u96z: "f1urqz7h",
+    d32isg: "f1da2vov",
+    Bsvqbuc: "f11rfva0",
+    b3s3i5: "f1exc66"
+  },
+  tiny: {
+    Bah9ito: "f1j4wmu2",
+    ut6tcf: "f1vppzuq",
+    B7p06xz: "fv1u54w",
+    B807ibg: "fngtx1d"
+  },
+  "extra-small": {
+    Bah9ito: "fmpqlna",
+    ut6tcf: "f15z5jzu",
+    B7p06xz: "fv1u54w",
+    B807ibg: "fadawes"
+  },
+  small: {
+    Bah9ito: "fo52gbo",
+    ut6tcf: "f1b41i3v",
+    B7p06xz: "fv1u54w",
+    B807ibg: "f1xqyyrl"
+  },
+  medium: {
+    Bah9ito: "f1aiqagr",
+    ut6tcf: "f1wtx80b",
+    B7p06xz: "f1flujpd",
+    B807ibg: "f1u06hy7"
+  },
+  large: {
+    Bah9ito: "f1trdq7b",
+    ut6tcf: "f9e0mc5",
+    B7p06xz: "f1flujpd",
+    B807ibg: "f13pmvhl"
+  },
+  "extra-large": {
+    Bah9ito: "f89rf2a",
+    ut6tcf: "f1w2xg3q",
+    B7p06xz: "f1flujpd",
+    B807ibg: "fmn74v6"
+  },
+  huge: {
+    Bah9ito: "f1rx7k5y",
+    ut6tcf: "f1vtyt49",
+    B7p06xz: "f1owbg48",
+    B807ibg: "f1fr1izd"
+  }
 }, {
-    f: [
-        ".f1or16p5:focus{outline-width:3px;}",
-        ".f1grzc83:focus{outline-style:solid;}",
-        ".f19shzzi:focus{outline-color:transparent;}"
-    ],
-    k: [
-        "@-webkit-keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}",
-        "@-webkit-keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}",
-        "@keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}",
-        "@keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}"
-    ],
-    d: [
-        ".f5tbecn>svg{-webkit-animation-name:fb7n1on;animation-name:fb7n1on;}",
-        ".f15qb8s7>svg{-webkit-animation-name:f1gx3jof;animation-name:f1gx3jof;}",
-        ".fn4mtlg>svg{-webkit-animation-duration:3s;animation-duration:3s;}",
-        ".f1y80fxs>svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}",
-        ".f1r2crtq>svg{-webkit-animation-timing-function:linear;animation-timing-function:linear;}",
-        ".f1wsi8sr>svg{background-color:transparent;}",
-        ".f1da2vov>svg>circle{cx:50%;}",
-        ".f11rfva0>svg>circle{cy:50%;}",
-        ".f1exc66>svg>circle{fill:none;}",
-        ".f1j4wmu2>svg{height:20px;}",
-        ".f1vppzuq>svg{width:20px;}",
-        ".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}",
-        ".fngtx1d>svg>circle{r:9px;}",
-        ".fmpqlna>svg{height:24px;}",
-        ".f15z5jzu>svg{width:24px;}",
-        ".fadawes>svg>circle{r:11px;}",
-        ".fo52gbo>svg{height:28px;}",
-        ".f1b41i3v>svg{width:28px;}",
-        ".f1xqyyrl>svg>circle{r:13px;}",
-        ".f1aiqagr>svg{height:32px;}",
-        ".f1wtx80b>svg{width:32px;}",
-        ".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}",
-        ".f1u06hy7>svg>circle{r:14.5px;}",
-        ".f1trdq7b>svg{height:36px;}",
-        ".f9e0mc5>svg{width:36px;}",
-        ".f13pmvhl>svg>circle{r:16.5px;}",
-        ".f89rf2a>svg{height:40px;}",
-        ".f1w2xg3q>svg{width:40px;}",
-        ".fmn74v6>svg>circle{r:18.5px;}",
-        ".f1rx7k5y>svg{height:44px;}",
-        ".f1vtyt49>svg{width:44px;}",
-        ".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}",
-        ".f1fr1izd>svg>circle{r:20px;}"
-    ],
-    m: [
-        [
-            "@media screen and (prefers-reduced-motion: reduce){.f1bkm2qd>svg{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}",
-            {
-                m: "screen and (prefers-reduced-motion: reduce)"
-            }
-        ],
-        [
-            "@media screen and (prefers-reduced-motion: reduce){.f1urqz7h>svg{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}",
-            {
-                m: "screen and (prefers-reduced-motion: reduce)"
-            }
-        ]
-    ]
+  f: [".f1or16p5:focus{outline-width:3px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
+  k: ["@-webkit-keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@-webkit-keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}", "@keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}"],
+  d: [".f5tbecn>svg{-webkit-animation-name:fb7n1on;animation-name:fb7n1on;}", ".f15qb8s7>svg{-webkit-animation-name:f1gx3jof;animation-name:f1gx3jof;}", ".fn4mtlg>svg{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1y80fxs>svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f1r2crtq>svg{-webkit-animation-timing-function:linear;animation-timing-function:linear;}", ".f1wsi8sr>svg{background-color:transparent;}", ".f1da2vov>svg>circle{cx:50%;}", ".f11rfva0>svg>circle{cy:50%;}", ".f1exc66>svg>circle{fill:none;}", ".f1j4wmu2>svg{height:20px;}", ".f1vppzuq>svg{width:20px;}", ".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}", ".fngtx1d>svg>circle{r:9px;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fadawes>svg>circle{r:11px;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1xqyyrl>svg>circle{r:13px;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}", ".f1u06hy7>svg>circle{r:14.5px;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f13pmvhl>svg>circle{r:16.5px;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".fmn74v6>svg>circle{r:18.5px;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}", ".f1fr1izd>svg>circle{r:20px;}"],
+  m: [["@media screen and (prefers-reduced-motion: reduce){.f1bkm2qd>svg{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1urqz7h>svg{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }]]
 });
-const useTrackStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    inverted: {
-        gwg7kz: "f1jvpmnu",
-        Bvrehnu: "fq8a5sv",
-        Bidp6o: "f1b4lwqj",
-        cq3kgi: "f1najlst",
-        Btwiser: "fjxod4",
-        B8001xd: "fu3xdw0",
-        Bdordwa: [
-            "f1ttdh6v",
-            "fmyjox0"
-        ],
-        Bo2mdfu: "f1eseayc",
-        E10nrc: "folzdkc",
-        Bwl7w15: "fhlfkde",
-        Bksq7rz: "f1esql28"
-    },
-    primary: {
-        gwg7kz: "f11ditju",
-        B8k2rxp: "f1m9nikz",
-        Bvrehnu: "fq8a5sv",
-        Bidp6o: "f1b4lwqj",
-        cq3kgi: "f1najlst",
-        Btwiser: "fjxod4",
-        B8001xd: "fu3xdw0",
-        Bdordwa: [
-            "f1ttdh6v",
-            "fmyjox0"
-        ],
-        Bo2mdfu: "f1eseayc",
-        E10nrc: "folzdkc",
-        Bwl7w15: "fhlfkde",
-        Bksq7rz: "f61h2gu",
-        y14cdu: "flglbw1"
-    }
+const useTrackStyles = /*#__PURE__*/react_1.__styles({
+  inverted: {
+    gwg7kz: "f1jvpmnu",
+    Bvrehnu: "fq8a5sv",
+    Bidp6o: "f1b4lwqj",
+    cq3kgi: "f1najlst",
+    Btwiser: "fjxod4",
+    B8001xd: "fu3xdw0",
+    Bdordwa: ["f1ttdh6v", "fmyjox0"],
+    Bo2mdfu: "f1eseayc",
+    E10nrc: "folzdkc",
+    Bwl7w15: "fhlfkde",
+    Bksq7rz: "f1esql28"
+  },
+  primary: {
+    gwg7kz: "f11ditju",
+    B8k2rxp: "f1m9nikz",
+    Bvrehnu: "fq8a5sv",
+    Bidp6o: "f1b4lwqj",
+    cq3kgi: "f1najlst",
+    Btwiser: "fjxod4",
+    B8001xd: "fu3xdw0",
+    Bdordwa: ["f1ttdh6v", "fmyjox0"],
+    Bo2mdfu: "f1eseayc",
+    E10nrc: "folzdkc",
+    Bwl7w15: "fhlfkde",
+    Bksq7rz: "f61h2gu",
+    y14cdu: "flglbw1"
+  }
 }, {
-    d: [
-        ".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}",
-        ".fq8a5sv>svg>circle.fui-Spinner__Tail{-webkit-animation-name:f1v1ql0f;animation-name:f1v1ql0f;}",
-        ".f1b4lwqj>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:1.5s;animation-duration:1.5s;}",
-        ".f1najlst>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}",
-        ".fjxod4>svg>circle.fui-Spinner__Tail{-webkit-animation-timing-function:var(--curveEasyEase);animation-timing-function:var(--curveEasyEase);}",
-        ".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}",
-        ".f1ttdh6v>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}",
-        ".fmyjox0>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}",
-        ".f1eseayc>svg>circle.fui-Spinner__Tail{transform-origin:50% 50%;}",
-        ".f1esql28>svg>circle.fui-Spinner__Track{stroke:rgba(255, 255, 255, 0.2);}",
-        ".f11ditju>svg>circle.fui-Spinner__Tail{stroke:var(--colorBrandStroke1);}",
-        ".f61h2gu>svg>circle.fui-Spinner__Track{stroke:var(--colorBrandStroke2);}"
-    ],
-    k: [
-        "@-webkit-keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}",
-        "@keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}"
-    ],
-    m: [
-        [
-            "@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}",
-            {
-                m: "screen and (prefers-reduced-motion: reduce)"
-            }
-        ],
-        [
-            "@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}",
-            {
-                m: "screen and (prefers-reduced-motion: reduce)"
-            }
-        ],
-        [
-            "@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}",
-            {
-                m: "screen and (forced-colors: active)"
-            }
-        ],
-        [
-            "@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}",
-            {
-                m: "screen and (prefers-reduced-motion: reduce)"
-            }
-        ],
-        [
-            "@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}",
-            {
-                m: "screen and (prefers-reduced-motion: reduce)"
-            }
-        ],
-        [
-            "@media screen and (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}",
-            {
-                m: "screen and (forced-colors: active)"
-            }
-        ]
-    ]
+  d: [".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}", ".fq8a5sv>svg>circle.fui-Spinner__Tail{-webkit-animation-name:f1v1ql0f;animation-name:f1v1ql0f;}", ".f1b4lwqj>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:1.5s;animation-duration:1.5s;}", ".f1najlst>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fjxod4>svg>circle.fui-Spinner__Tail{-webkit-animation-timing-function:var(--curveEasyEase);animation-timing-function:var(--curveEasyEase);}", ".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}", ".f1ttdh6v>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}", ".fmyjox0>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}", ".f1eseayc>svg>circle.fui-Spinner__Tail{transform-origin:50% 50%;}", ".f1esql28>svg>circle.fui-Spinner__Track{stroke:rgba(255, 255, 255, 0.2);}", ".f11ditju>svg>circle.fui-Spinner__Tail{stroke:var(--colorBrandStroke1);}", ".f61h2gu>svg>circle.fui-Spinner__Track{stroke:var(--colorBrandStroke2);}"],
+  k: ["@-webkit-keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}", "@keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}"],
+  m: [["@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}", {
+    m: "screen and (forced-colors: active)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
+    m: "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}", {
+    m: "screen and (forced-colors: active)"
+  }]]
 });
-const useLabelStyles = /*#__PURE__*/ (0, _react["__styles"])({
-    inverted: {
-        sj55zd: "f15aqcq"
-    },
-    primary: {},
-    tiny: {
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "fkhj508",
-        Bhrd7zp: "figsok6",
-        Bg96gwp: "f1i3iumi"
-    },
-    "extra-small": {
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "fkhj508",
-        Bhrd7zp: "figsok6",
-        Bg96gwp: "f1i3iumi"
-    },
-    small: {
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "fkhj508",
-        Bhrd7zp: "figsok6",
-        Bg96gwp: "f1i3iumi"
-    },
-    medium: {
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "fod5ikn",
-        Bhrd7zp: "fl43uef",
-        Bg96gwp: "faaz57k"
-    },
-    large: {
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "fod5ikn",
-        Bhrd7zp: "fl43uef",
-        Bg96gwp: "faaz57k"
-    },
-    "extra-large": {
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "fod5ikn",
-        Bhrd7zp: "fl43uef",
-        Bg96gwp: "faaz57k"
-    },
-    huge: {
-        Bahqtrf: "fk6fouc",
-        Be2twd7: "f1pp30po",
-        Bhrd7zp: "fl43uef",
-        Bg96gwp: "f106mvju"
-    }
+const useLabelStyles = /*#__PURE__*/react_1.__styles({
+  inverted: {
+    sj55zd: "f15aqcq"
+  },
+  primary: {},
+  tiny: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  },
+  "extra-small": {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  },
+  small: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi"
+  },
+  medium: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "faaz57k"
+  },
+  large: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "faaz57k"
+  },
+  "extra-large": {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "faaz57k"
+  },
+  huge: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "f1pp30po",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f106mvju"
+  }
 }, {
-    d: [
-        ".f15aqcq{color:rgba(255, 255, 255, 1);}",
-        ".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);}"
-    ]
+  d: [".f15aqcq{color:rgba(255, 255, 255, 1);}", ".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);}"]
 });
-const useSpinnerStyles_unstable = (state)=>{
-    const { labelPosition , size , appearance ='primary'  } = state;
-    const rootStyles = useRootStyles();
-    const spinnerStyles = useLoaderStyles();
-    const labelStyles = useLabelStyles();
-    const trackStyles = useTrackStyles();
-    state.root.className = (0, _react.mergeClasses)(spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);
-    if (state.spinner) {
-        state.spinner.className = (0, _react.mergeClasses)(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);
-    }
-    if (state.label) {
-        state.label.className = (0, _react.mergeClasses)(spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);
-    }
-    return state;
-}; //# sourceMappingURL=useSpinnerStyles.js.map
-
+/**
+ * Apply styling to the Spinner slots based on the state
+ */
+const useSpinnerStyles_unstable = state => {
+  const {
+    labelPosition,
+    size,
+    appearance = 'primary'
+  } = state;
+  const rootStyles = useRootStyles();
+  const spinnerStyles = useLoaderStyles();
+  const labelStyles = useLabelStyles();
+  const trackStyles = useTrackStyles();
+  state.root.className = react_1.mergeClasses(exports.spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);
+  if (state.spinner) {
+    state.spinner.className = react_1.mergeClasses(exports.spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);
+  }
+  if (state.label) {
+    state.label.className = react_1.mergeClasses(exports.spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);
+  }
+  return state;
+};
+exports.useSpinnerStyles_unstable = useSpinnerStyles_unstable;
 //# sourceMappingURL=useSpinnerStyles.js.map