@fluentui/react-spinner 9.3.43 → 9.4.0

package/CHANGELOG.md

@@ -1,12 +1,26 @@
 # Change Log - @fluentui/react-spinner
 
-This log was last generated on Wed, 28 Feb 2024 02:28:41 GMT and should not be manually modified.
+This log was last generated on Thu, 07 Mar 2024 19:26:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.4.0)
+
+Thu, 07 Mar 2024 19:26:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.3.43..@fluentui/react-spinner_v9.4.0)
+
+### Minor changes
+
+- chore: Rewrite Spinner animation using only rotation transforms. ([PR #30567](https://github.com/microsoft/fluentui/pull/30567) by behowell@microsoft.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.32 ([PR #30687](https://github.com/microsoft/fluentui/pull/30687) by beachball)
+- Bump @fluentui/react-label to v9.1.64 ([PR #30687](https://github.com/microsoft/fluentui/pull/30687) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.15.0 ([PR #30687](https://github.com/microsoft/fluentui/pull/30687) by beachball)
+- Bump @fluentui/react-theme to v9.1.17 ([PR #30687](https://github.com/microsoft/fluentui/pull/30687) by beachball)
+- Bump @fluentui/react-utilities to v9.18.3 ([PR #30687](https://github.com/microsoft/fluentui/pull/30687) by beachball)
+
 ## [9.3.43](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.3.43)
 
-Wed, 28 Feb 2024 02:28:41 GMT 
+Wed, 28 Feb 2024 02:34:19 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.3.42..@fluentui/react-spinner_v9.3.43)
 
 ### Patches

package/dist/index.d.ts

@@ -61,14 +61,15 @@ export declare type SpinnerSlots = {
      */
     root: NonNullable<Slot<'div'>>;
     /**
-     * The slot for the animated svg.
-     * The spinner slot receives the `className` and `style` that handles the spinning animation.
-     * An svg is also rendered as a child of this slot
+     * The animated spinning ring.
      */
     spinner?: Slot<'span'>;
     /**
-     * The label of the Slider.
-     * The label slot receives the styling related to the text associated with the Spinner.
+     * The part of the spinner that rotates.
+     */
+    spinnerTail?: NonNullable<Slot<'span'>>;
+    /**
+     * An optional label for the Spinner.
      */
     label?: Slot<typeof Label>;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\n\nexport type SpinnerSlots = {\n  /**\n   * The root of the Spinner.\n   * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The slot for the animated svg.\n   * The spinner slot receives the `className` and `style` that handles the spinning animation.\n   * An svg is also rendered as a child of this slot\n   */\n  spinner?: Slot<'span'>;\n  /**\n   * The label of the Slider.\n   * The label slot receives the styling related to the text associated with the Spinner.\n   */\n  label?: Slot<typeof Label>;\n};\n\n/**\n * Spinner Props\n */\nexport type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {\n  /**\n   * The appearance of the Spinner.\n   * @default 'primary'\n   */\n  appearance?: 'primary' | 'inverted';\n\n  /**\n   * Time in milliseconds after component mount before spinner is visible.\n   * @default 0\n   */\n  delay?: number;\n\n  /**\n   * Where the label is positioned relative to the Spinner\n   * @default 'after'\n   */\n  labelPosition?: 'above' | 'below' | 'before' | 'after';\n\n  /**\n   * The size of the spinner.\n   * @default 'medium'\n   */\n  size?: 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n};\n\n/**\n * State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> &\n  Required<Pick<SpinnerProps, 'appearance' | 'delay' | 'labelPosition' | 'size'>> & {\n    /**\n     * Should the spinner be rendered in the DOM\n     */\n    shouldRenderSpinner: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WA4DI"}
+{"version":3,"sources":["Spinner.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\n\nexport type SpinnerSlots = {\n  /**\n   * The root of the Spinner.\n   * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The animated spinning ring.\n   */\n  spinner?: Slot<'span'>;\n\n  /**\n   * The part of the spinner that rotates.\n   */\n  spinnerTail?: NonNullable<Slot<'span'>>;\n\n  /**\n   * An optional label for the Spinner.\n   */\n  label?: Slot<typeof Label>;\n};\n\n/**\n * Spinner Props\n */\nexport type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {\n  /**\n   * The appearance of the Spinner.\n   * @default 'primary'\n   */\n  appearance?: 'primary' | 'inverted';\n\n  /**\n   * Time in milliseconds after component mount before spinner is visible.\n   * @default 0\n   */\n  delay?: number;\n\n  /**\n   * Where the label is positioned relative to the Spinner\n   * @default 'after'\n   */\n  labelPosition?: 'above' | 'below' | 'before' | 'after';\n\n  /**\n   * The size of the spinner.\n   * @default 'medium'\n   */\n  size?: 'extra-tiny' | 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';\n};\n\n/**\n * State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> &\n  Required<Pick<SpinnerProps, 'appearance' | 'delay' | 'labelPosition' | 'size'>> & {\n    /**\n     * Should the spinner be rendered in the DOM\n     */\n    shouldRenderSpinner: boolean;\n  };\n"],"names":[],"mappings":"AAAA,WAgEI"}

package/lib/components/Spinner/renderSpinner.js

@@ -8,7 +8,9 @@ import { assertSlots } from '@fluentui/react-utilities';
     return /*#__PURE__*/ _jsxs(state.root, {
         children: [
             state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/ _jsx(state.label, {}),
-            state.spinner && shouldRenderSpinner && /*#__PURE__*/ _jsx(state.spinner, {}),
+            state.spinner && shouldRenderSpinner && /*#__PURE__*/ _jsx(state.spinner, {
+                children: state.spinnerTail && /*#__PURE__*/ _jsx(state.spinnerTail, {})
+            }),
             state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/ _jsx(state.label, {})
         ]
     });

package/lib/components/Spinner/renderSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState) => {\n  assertSlots<SpinnerSlots>(state);\n  const { labelPosition, shouldRenderSpinner } = state;\n  return (\n    <state.root>\n      {state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && (\n        <state.label />\n      )}\n\n      {state.spinner && shouldRenderSpinner && <state.spinner />}\n      {state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && (\n        <state.label />\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSpinner_unstable","state","labelPosition","shouldRenderSpinner","root","label","spinner"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCF,YAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,qBACE,MAACA,MAAMG,IAAI;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAO,mBAC5F,KAACD,MAAMI,KAAK;YAGbJ,MAAMK,OAAO,IAAIH,qCAAuB,KAACF,MAAMK,OAAO;YACtDL,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAM,mBAC3F,KAACD,MAAMI,KAAK;;;AAIpB,EAAE"}
+{"version":3,"sources":["renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState) => {\n  assertSlots<SpinnerSlots>(state);\n  const { labelPosition, shouldRenderSpinner } = state;\n  return (\n    <state.root>\n      {state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && (\n        <state.label />\n      )}\n      {state.spinner && shouldRenderSpinner && (\n        <state.spinner>{state.spinnerTail && <state.spinnerTail />}</state.spinner>\n      )}\n      {state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && (\n        <state.label />\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSpinner_unstable","state","labelPosition","shouldRenderSpinner","root","label","spinner","spinnerTail"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrCF,YAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,qBACE,MAACA,MAAMG,IAAI;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAO,mBAC5F,KAACD,MAAMI,KAAK;YAEbJ,MAAMK,OAAO,IAAIH,qCAChB,KAACF,MAAMK,OAAO;0BAAEL,MAAMM,WAAW,kBAAI,KAACN,MAAMM,WAAW;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAM,mBAC3F,KAACD,MAAMI,KAAK;;;AAIpB,EAAE"}

package/lib/components/Spinner/useSpinner.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
-import { DefaultSvg } from './DefaultSvg';
 import { useSpinnerContext } from '../../contexts/SpinnerContext';
 /**
  * Create the state required to render Spinner.
@@ -56,7 +55,6 @@ import { useSpinnerContext } from '../../contexts/SpinnerContext';
     const spinnerShortHand = slot.optional(props.spinner, {
         renderByDefault: true,
         defaultProps: {
-            children: /*#__PURE__*/ React.createElement(DefaultSvg, null),
             tabIndex
         },
         elementType: 'span'
@@ -73,10 +71,14 @@ import { useSpinnerContext } from '../../contexts/SpinnerContext';
         components: {
             root: 'div',
             spinner: 'span',
+            spinnerTail: 'span',
             label: Label
         },
         root: nativeRoot,
         spinner: spinnerShortHand,
+        spinnerTail: slot.always(props.spinnerTail, {
+            elementType: 'span'
+        }),
         label: labelShorthand
     };
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["useSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\nimport { useSpinnerContext } from '../../contexts/SpinnerContext';\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 { size: contextSize } = useSpinnerContext();\n  const { appearance = 'primary', labelPosition = 'after', size = contextSize ?? 'medium', delay = 0 } = props;\n  const baseId = useId('spinner');\n\n  const { role = 'progressbar', tabIndex, ...rest } = props;\n  const nativeRoot = slot.always(\n    getIntrinsicElementProps(\n      'div',\n      {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role,\n        ...rest,\n      },\n      ['size'],\n    ),\n    {\n      elementType: 'div',\n    },\n  );\n  const [isShownAfterDelay, setIsShownAfterDelay] = React.useState(false);\n  const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n  React.useEffect(() => {\n    if (delay <= 0) {\n      return;\n    }\n    setDelayTimeout(() => {\n      setIsShownAfterDelay(true);\n    }, delay);\n    return () => {\n      clearDelayTimeout();\n    };\n  }, [setDelayTimeout, clearDelayTimeout, delay]);\n  const labelShorthand = slot.optional(props.label, {\n    defaultProps: { id: baseId },\n    renderByDefault: false,\n    elementType: Label,\n  });\n  const spinnerShortHand = slot.optional(props.spinner, {\n    renderByDefault: true,\n    defaultProps: { children: <DefaultSvg />, tabIndex },\n    elementType: 'span',\n  });\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n  const state: SpinnerState = {\n    appearance,\n    delay,\n    labelPosition,\n    size,\n    shouldRenderSpinner: !delay || isShownAfterDelay,\n    components: { root: 'div', spinner: 'span', label: Label },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    label: labelShorthand,\n  };\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","useId","useTimeout","slot","Label","DefaultSvg","useSpinnerContext","useSpinner_unstable","props","ref","size","contextSize","appearance","labelPosition","delay","baseId","role","tabIndex","rest","nativeRoot","always","elementType","isShownAfterDelay","setIsShownAfterDelay","useState","setDelayTimeout","clearDelayTimeout","useEffect","labelShorthand","optional","label","defaultProps","id","renderByDefault","spinnerShortHand","spinner","children","state","shouldRenderSpinner","components","root"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,UAAU,EAAEC,IAAI,QAAQ,4BAA4B;AAE9F,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,QAAQ;IACR,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGL;IAC9B,MAAM,EAAEM,aAAa,SAAS,EAAEC,gBAAgB,OAAO,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAEG,QAAQ,CAAC,EAAE,GAAGN;IACvG,MAAMO,SAASd,MAAM;IAErB,MAAM,EAAEe,OAAO,aAAa,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGV;IACpD,MAAMW,aAAahB,KAAKiB,MAAM,CAC5BpB,yBACE,OACA;QACE,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FS,KAAKA;QACLO;QACA,GAAGE,IAAI;IACT,GACA;QAAC;KAAO,GAEV;QACEG,aAAa;IACf;IAEF,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGxB,MAAMyB,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,GAAGxB;IAC7CH,MAAM4B,SAAS,CAAC;QACd,IAAIb,SAAS,GAAG;YACd;QACF;QACAW,gBAAgB;YACdF,qBAAqB;QACvB,GAAGT;QACH,OAAO;YACLY;QACF;IACF,GAAG;QAACD;QAAiBC;QAAmBZ;KAAM;IAC9C,MAAMc,iBAAiBzB,KAAK0B,QAAQ,CAACrB,MAAMsB,KAAK,EAAE;QAChDC,cAAc;YAAEC,IAAIjB;QAAO;QAC3BkB,iBAAiB;QACjBZ,aAAajB;IACf;IACA,MAAM8B,mBAAmB/B,KAAK0B,QAAQ,CAACrB,MAAM2B,OAAO,EAAE;QACpDF,iBAAiB;QACjBF,cAAc;YAAEK,wBAAU,oBAAC/B;YAAeY;QAAS;QACnDI,aAAa;IACf;IACA,IAAIO,kBAAkBT,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGS,eAAeI,EAAE;IACnD;IACA,MAAMK,QAAsB;QAC1BzB;QACAE;QACAD;QACAH;QACA4B,qBAAqB,CAACxB,SAASQ;QAC/BiB,YAAY;YAAEC,MAAM;YAAOL,SAAS;YAAQL,OAAO1B;QAAM;QACzDoC,MAAMrB;QACNgB,SAASD;QACTJ,OAAOF;IACT;IACA,OAAOS;AACT,EAAE"}
+{"version":3,"sources":["useSpinner.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { useSpinnerContext } from '../../contexts/SpinnerContext';\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 { size: contextSize } = useSpinnerContext();\n  const { appearance = 'primary', labelPosition = 'after', size = contextSize ?? 'medium', delay = 0 } = props;\n  const baseId = useId('spinner');\n\n  const { role = 'progressbar', tabIndex, ...rest } = props;\n  const nativeRoot = slot.always(\n    getIntrinsicElementProps(\n      'div',\n      {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref as React.Ref<HTMLDivElement>,\n        role,\n        ...rest,\n      },\n      ['size'],\n    ),\n    {\n      elementType: 'div',\n    },\n  );\n  const [isShownAfterDelay, setIsShownAfterDelay] = React.useState(false);\n  const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n  React.useEffect(() => {\n    if (delay <= 0) {\n      return;\n    }\n    setDelayTimeout(() => {\n      setIsShownAfterDelay(true);\n    }, delay);\n    return () => {\n      clearDelayTimeout();\n    };\n  }, [setDelayTimeout, clearDelayTimeout, delay]);\n  const labelShorthand = slot.optional(props.label, {\n    defaultProps: { id: baseId },\n    renderByDefault: false,\n    elementType: Label,\n  });\n  const spinnerShortHand = slot.optional(props.spinner, {\n    renderByDefault: true,\n    defaultProps: { tabIndex },\n    elementType: 'span',\n  });\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n  const state: SpinnerState = {\n    appearance,\n    delay,\n    labelPosition,\n    size,\n    shouldRenderSpinner: !delay || isShownAfterDelay,\n    components: { root: 'div', spinner: 'span', spinnerTail: 'span', label: Label },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    spinnerTail: slot.always(props.spinnerTail, { elementType: 'span' }),\n    label: labelShorthand,\n  };\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","useId","useTimeout","slot","Label","useSpinnerContext","useSpinner_unstable","props","ref","size","contextSize","appearance","labelPosition","delay","baseId","role","tabIndex","rest","nativeRoot","always","elementType","isShownAfterDelay","setIsShownAfterDelay","useState","setDelayTimeout","clearDelayTimeout","useEffect","labelShorthand","optional","label","defaultProps","id","renderByDefault","spinnerShortHand","spinner","state","shouldRenderSpinner","components","root","spinnerTail"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,UAAU,EAAEC,IAAI,QAAQ,4BAA4B;AAE9F,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,iBAAiB,QAAQ,gCAAgC;AAElE;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,QAAQ;IACR,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGL;IAC9B,MAAM,EAAEM,aAAa,SAAS,EAAEC,gBAAgB,OAAO,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAEG,QAAQ,CAAC,EAAE,GAAGN;IACvG,MAAMO,SAASb,MAAM;IAErB,MAAM,EAAEc,OAAO,aAAa,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGV;IACpD,MAAMW,aAAaf,KAAKgB,MAAM,CAC5BnB,yBACE,OACA;QACE,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FQ,KAAKA;QACLO;QACA,GAAGE,IAAI;IACT,GACA;QAAC;KAAO,GAEV;QACEG,aAAa;IACf;IAEF,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGvB,MAAMwB,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,GAAGvB;IAC7CH,MAAM2B,SAAS,CAAC;QACd,IAAIb,SAAS,GAAG;YACd;QACF;QACAW,gBAAgB;YACdF,qBAAqB;QACvB,GAAGT;QACH,OAAO;YACLY;QACF;IACF,GAAG;QAACD;QAAiBC;QAAmBZ;KAAM;IAC9C,MAAMc,iBAAiBxB,KAAKyB,QAAQ,CAACrB,MAAMsB,KAAK,EAAE;QAChDC,cAAc;YAAEC,IAAIjB;QAAO;QAC3BkB,iBAAiB;QACjBZ,aAAahB;IACf;IACA,MAAM6B,mBAAmB9B,KAAKyB,QAAQ,CAACrB,MAAM2B,OAAO,EAAE;QACpDF,iBAAiB;QACjBF,cAAc;YAAEd;QAAS;QACzBI,aAAa;IACf;IACA,IAAIO,kBAAkBT,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGS,eAAeI,EAAE;IACnD;IACA,MAAMI,QAAsB;QAC1BxB;QACAE;QACAD;QACAH;QACA2B,qBAAqB,CAACvB,SAASQ;QAC/BgB,YAAY;YAAEC,MAAM;YAAOJ,SAAS;YAAQK,aAAa;YAAQV,OAAOzB;QAAM;QAC9EkC,MAAMpB;QACNgB,SAASD;QACTM,aAAapC,KAAKgB,MAAM,CAACZ,MAAMgC,WAAW,EAAE;YAAEnB,aAAa;QAAO;QAClES,OAAOF;IACT;IACA,OAAOQ;AACT,EAAE"}

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

@@ -1,192 +1,98 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 export const spinnerClassNames = {
   root: 'fui-Spinner',
   spinner: 'fui-Spinner__spinner',
+  spinnerTail: 'fui-Spinner__spinnerTail',
   label: 'fui-Spinner__label'
 };
-/*
- * TODO: Update with proper tokens when added
- * Radii for the Spinner circles
- */
-const rValues = {
-  extraTiny: '7px',
-  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 = {
-  extraTiny: '16px',
-  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'
-  }
-};
 /**
- * Styles for the root slot
+ * CSS variables used internally by Spinner
  */
+const vars = {
+  strokeWidth: '--fui-Spinner--strokeWidth'
+};
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1k3z50n", null, [".r1k3z50n{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;}"]);
 const useRootStyles = /*#__PURE__*/__styles({
-  root: {
-    mc9l5x: "f22iagw",
-    Bt984gj: "f122n59",
-    Brf1p80: "f4d9j23",
-    Bg96gwp: "fez10in",
-    i8kkvl: "f4px1ci",
-    Belr9w4: "fn67r4l"
-  },
-  horizontal: {
-    Beiy3e4: "f1063pyq"
-  },
   vertical: {
     Beiy3e4: "f1vx9l62"
   }
 }, {
-  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", ".fez10in{line-height:0;}", ".f4px1ci{column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1063pyq{flex-direction:row;}", ".f1vx9l62{flex-direction:column;}"]
+  d: [".f1vx9l62{flex-direction:column;}"]
 });
-const useLoaderStyles = /*#__PURE__*/__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"
+const useSpinnerBaseClassName = /*#__PURE__*/__resetStyles("rvgcg50", "r15nd2jo", {
+  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);}}"],
+  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;}}"]
+});
+// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.
+// 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 useSpinnerStyles = /*#__PURE__*/__styles({
+  inverted: {
+    De3pzq: "fr407j0",
+    sj55zd: "f1f7voed"
+  },
+  rtlTail: {
+    btxmck: "f179dep3",
+    gb5jj2: "fbz9ihp",
+    Br2kee7: "f1wkkxo7"
   },
   "extra-tiny": {
-    Bah9ito: "f1x2gjcb",
-    ut6tcf: "f1vjiaua",
-    B7p06xz: "fv1u54w",
-    B807ibg: "f1oebb0s"
+    Bqenvij: "fd461yt",
+    a9b677: "fjw5fx7",
+    qmp6fs: "f1v3ph3m"
   },
   tiny: {
-    Bah9ito: "f1j4wmu2",
-    ut6tcf: "f1vppzuq",
-    B7p06xz: "fv1u54w",
-    B807ibg: "fngtx1d"
+    Bqenvij: "fjamq6b",
+    a9b677: "f64fuq3",
+    qmp6fs: "f1v3ph3m"
   },
   "extra-small": {
-    Bah9ito: "fmpqlna",
-    ut6tcf: "f15z5jzu",
-    B7p06xz: "fv1u54w",
-    B807ibg: "fadawes"
+    Bqenvij: "frvgh55",
+    a9b677: "fq4mcun",
+    qmp6fs: "f1v3ph3m"
   },
   small: {
-    Bah9ito: "fo52gbo",
-    ut6tcf: "f1b41i3v",
-    B7p06xz: "fv1u54w",
-    B807ibg: "f1xqyyrl"
+    Bqenvij: "fxldao9",
+    a9b677: "f1w9dchk",
+    qmp6fs: "f1v3ph3m"
   },
   medium: {
-    Bah9ito: "f1aiqagr",
-    ut6tcf: "f1wtx80b",
-    B7p06xz: "f1flujpd",
-    B807ibg: "f1u06hy7"
+    Bqenvij: "f1d2rq10",
+    a9b677: "f1szoe96",
+    qmp6fs: "fb52u90"
   },
   large: {
-    Bah9ito: "f1trdq7b",
-    ut6tcf: "f9e0mc5",
-    B7p06xz: "f1flujpd",
-    B807ibg: "f13pmvhl"
+    Bqenvij: "f8ljn23",
+    a9b677: "fpdz1er",
+    qmp6fs: "fb52u90"
   },
   "extra-large": {
-    Bah9ito: "f89rf2a",
-    ut6tcf: "f1w2xg3q",
-    B7p06xz: "f1flujpd",
-    B807ibg: "fmn74v6"
+    Bqenvij: "fbhnoac",
+    a9b677: "feqmc2u",
+    qmp6fs: "fb52u90"
   },
   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: ["@keyframes fb7n1on{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}", "@keyframes f1gx3jof{0%{transform:rotate(0deg);}100%{transform:rotate(-360deg);}}"],
-  d: [".f5tbecn>svg{animation-name:fb7n1on;}", ".f15qb8s7>svg{animation-name:f1gx3jof;}", ".fn4mtlg>svg{animation-duration:3s;}", ".f1y80fxs>svg{animation-iteration-count:infinite;}", ".f1r2crtq>svg{animation-timing-function:linear;}", ".f1wsi8sr>svg{background-color:transparent;}", ".f1da2vov>svg>circle{cx:50%;}", ".f11rfva0>svg>circle{cy:50%;}", ".f1exc66>svg>circle{fill:none;}", ".f1x2gjcb>svg{height:16px;}", ".f1vjiaua>svg{width:16px;}", ".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}", ".f1oebb0s>svg>circle{r:7px;}", ".f1j4wmu2>svg{height:20px;}", ".f1vppzuq>svg{width:20px;}", ".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{animation-duration:0.01ms;}}", {
-    m: "screen and (prefers-reduced-motion: reduce)"
-  }], ["@media screen and (prefers-reduced-motion: reduce){.f1urqz7h>svg{animation-iteration-count:1;}}", {
-    m: "screen and (prefers-reduced-motion: reduce)"
-  }]]
-});
-const useTrackStyles = /*#__PURE__*/__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: "f13qeqtg",
-    y14cdu: "flglbw1"
+    Bqenvij: "f1ft4266",
+    a9b677: "fksc0bp",
+    qmp6fs: "fa3u9ii"
   }
 }, {
-  d: [".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}", ".fq8a5sv>svg>circle.fui-Spinner__Tail{animation-name:f1v1ql0f;}", ".f1b4lwqj>svg>circle.fui-Spinner__Tail{animation-duration:1.5s;}", ".f1najlst>svg>circle.fui-Spinner__Tail{animation-iteration-count:infinite;}", ".fjxod4>svg>circle.fui-Spinner__Tail{animation-timing-function:var(--curveEasyEase);}", ".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}", ".f1ttdh6v>svg>circle.fui-Spinner__Tail{transform:rotate(-90deg);}", ".fmyjox0>svg>circle.fui-Spinner__Tail{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);}", ".f13qeqtg>svg>circle.fui-Spinner__Track{stroke:var(--colorBrandStroke2Contrast);}"],
-  k: ["@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{animation-duration:0.01ms;}}", {
+  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);}"],
+  m: [["@media screen and (prefers-reduced-motion: reduce){.f1wkkxo7{background-image:conic-gradient(currentcolor 0deg, transparent 240deg);}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
-  }], ["@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{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 (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}", {
-    m: "screen and (forced-colors: active)"
   }]]
 });
 const useLabelStyles = /*#__PURE__*/__styles({
   inverted: {
-    sj55zd: "f15aqcq"
+    sj55zd: "fonrgv7"
   },
-  primary: {},
   "extra-tiny": {
     Bahqtrf: "fk6fouc",
     Be2twd7: "fkhj508",
@@ -236,7 +142,7 @@ const useLabelStyles = /*#__PURE__*/__styles({
     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: [".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);}"]
 });
 /**
  * Apply styling to the Spinner slots based on the state
@@ -245,18 +151,26 @@ export const useSpinnerStyles_unstable = state => {
   const {
     labelPosition,
     size,
-    appearance = 'primary'
+    appearance
   } = state;
+  const {
+    dir
+  } = useFluent();
+  const rootBaseClassName = useRootBaseClassName();
   const rootStyles = useRootStyles();
-  const spinnerStyles = useLoaderStyles();
+  const spinnerBaseClassName = useSpinnerBaseClassName();
+  const spinnerStyles = useSpinnerStyles();
+  const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
   const labelStyles = useLabelStyles();
-  const trackStyles = useTrackStyles();
-  state.root.className = mergeClasses(spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);
+  state.root.className = mergeClasses(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
   if (state.spinner) {
-    state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);
+    state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
+  }
+  if (state.spinnerTail) {
+    state.spinnerTail.className = mergeClasses(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
   }
   if (state.label) {
-    state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);
+    state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
   }
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","spinnerClassNames","root","spinner","label","rValues","extraTiny","tiny","extraSmall","small","medium","large","extraLarge","huge","spinnnerSizes","spinnerAnimation","container","animationDuration","animationIterationCount","animationTimingFunction","backgroundColor","useRootStyles","mc9l5x","Bt984gj","Brf1p80","Bg96gwp","i8kkvl","Belr9w4","horizontal","Beiy3e4","vertical","d","useLoaderStyles","spinnerSVG","B3aqqti","Brovlpu","Bxa1mx5","Bwaue66","fyp1ls","ag6ruv","osj692","aq5vjd","tlu9e1","J3u96z","d32isg","Bsvqbuc","b3s3i5","Bah9ito","ut6tcf","B7p06xz","B807ibg","f","k","m","useTrackStyles","inverted","gwg7kz","Bvrehnu","Bidp6o","cq3kgi","Btwiser","B8001xd","Bdordwa","Bo2mdfu","E10nrc","Bwl7w15","Bksq7rz","primary","B8k2rxp","y14cdu","useLabelStyles","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","useSpinnerStyles_unstable","state","labelPosition","size","appearance","rootStyles","spinnerStyles","labelStyles","trackStyles","className"],"sources":["useSpinnerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const spinnerClassNames = {\n    root: 'fui-Spinner',\n    spinner: 'fui-Spinner__spinner',\n    label: 'fui-Spinner__label'\n};\n/*\n * TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n */ const rValues = {\n    extraTiny: '7px',\n    tiny: '9px',\n    extraSmall: '11px',\n    small: '13px',\n    medium: '14.5px',\n    large: '16.5px',\n    extraLarge: '18.5px',\n    huge: '20px'\n};\n/*\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n */ const spinnnerSizes = {\n    extraTiny: '16px',\n    tiny: '20px',\n    extraSmall: '24px',\n    small: '28px',\n    medium: '32px',\n    large: '36px',\n    extraLarge: '40px',\n    huge: '44px'\n};\n/*\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n */ const spinnerAnimation = {\n    container: {\n        animationDuration: '3s',\n        animationIterationCount: 'infinite',\n        animationTimingFunction: 'linear',\n        backgroundColor: 'transparent'\n    }\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        lineHeight: '0',\n        ...shorthands.gap('8px')\n    },\n    horizontal: {\n        flexDirection: 'row'\n    },\n    vertical: {\n        flexDirection: 'column'\n    }\n});\nconst useLoaderStyles = makeStyles({\n    // global SVG class\n    spinnerSVG: {\n        ':focus': {\n            ...shorthands.outline('3px', 'solid', 'transparent')\n        },\n        ['& > svg']: {\n            animationName: {\n                '0%': {\n                    transform: 'rotate(0deg)'\n                },\n                '100%': {\n                    transform: 'rotate(360deg)'\n                }\n            },\n            ...spinnerAnimation.container,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                animationDuration: '0.01ms',\n                animationIterationCount: '1'\n            }\n        },\n        ['& > svg > circle']: {\n            cx: '50%',\n            cy: '50%',\n            fill: 'none'\n        }\n    },\n    'extra-tiny': {\n        ['& > svg']: {\n            height: spinnnerSizes.extraTiny,\n            width: spinnnerSizes.extraTiny\n        },\n        ['& > svg > circle']: {\n            strokeWidth: tokens.strokeWidthThick,\n            r: rValues.extraTiny\n        }\n    },\n    tiny: {\n        ['& > svg']: {\n            height: spinnnerSizes.tiny,\n            width: spinnnerSizes.tiny\n        },\n        ['& > svg > circle']: {\n            strokeWidth: tokens.strokeWidthThick,\n            r: rValues.tiny\n        }\n    },\n    'extra-small': {\n        ['& > svg']: {\n            height: spinnnerSizes.extraSmall,\n            width: spinnnerSizes.extraSmall\n        },\n        ['& > svg > circle']: {\n            strokeWidth: tokens.strokeWidthThick,\n            r: rValues.extraSmall\n        }\n    },\n    small: {\n        ['& > svg']: {\n            height: spinnnerSizes.small,\n            width: spinnnerSizes.small\n        },\n        ['& > svg > circle']: {\n            strokeWidth: tokens.strokeWidthThick,\n            r: rValues.small\n        }\n    },\n    medium: {\n        ['& > svg']: {\n            height: spinnnerSizes.medium,\n            width: spinnnerSizes.medium\n        },\n        ['& > svg > circle']: {\n            strokeWidth: tokens.strokeWidthThicker,\n            r: rValues.medium\n        }\n    },\n    large: {\n        ['& > svg']: {\n            height: spinnnerSizes.large,\n            width: spinnnerSizes.large\n        },\n        ['& > svg > circle']: {\n            strokeWidth: tokens.strokeWidthThicker,\n            r: rValues.large\n        }\n    },\n    'extra-large': {\n        ['& > svg']: {\n            height: spinnnerSizes.extraLarge,\n            width: spinnnerSizes.extraLarge\n        },\n        ['& > svg > circle']: {\n            strokeWidth: tokens.strokeWidthThicker,\n            r: rValues.extraLarge\n        }\n    },\n    huge: {\n        ['& > svg']: {\n            height: spinnnerSizes.huge,\n            width: spinnnerSizes.huge\n        },\n        ['& > svg > circle']: {\n            strokeWidth: tokens.strokeWidthThickest,\n            r: rValues.huge\n        }\n    }\n});\nconst useTrackStyles = makeStyles({\n    inverted: {\n        ['& > svg > circle.fui-Spinner__Tail']: {\n            stroke: tokens.colorNeutralStrokeOnBrand2,\n            animationName: {\n                '0%': {\n                    strokeDasharray: '1,150',\n                    strokeDashoffset: '0'\n                },\n                '50%': {\n                    strokeDasharray: '90,150',\n                    strokeDashoffset: '-35'\n                },\n                '100%': {\n                    strokeDasharray: '90,150',\n                    strokeDashoffset: '-124'\n                }\n            },\n            animationDuration: '1.5s',\n            animationIterationCount: 'infinite',\n            animationTimingFunction: tokens.curveEasyEase,\n            strokeLinecap: 'round',\n            transform: 'rotate(-90deg)',\n            transformOrigin: '50% 50%',\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                animationDuration: '0.01ms',\n                animationIterationCount: '1'\n            }\n        },\n        ['& > svg > circle.fui-Spinner__Track']: {\n            stroke: 'rgba(255, 255, 255, 0.2)'\n        }\n    },\n    primary: {\n        ['& > svg > circle.fui-Spinner__Tail']: {\n            stroke: tokens.colorBrandStroke1,\n            '@media screen and (forced-colors: active)': {\n                stroke: tokens.colorNeutralStrokeOnBrand2\n            },\n            animationName: {\n                '0%': {\n                    strokeDasharray: '1,150',\n                    strokeDashoffset: '0'\n                },\n                '50%': {\n                    strokeDasharray: '90,150',\n                    strokeDashoffset: '-35'\n                },\n                '100%': {\n                    strokeDasharray: '90,150',\n                    strokeDashoffset: '-124'\n                }\n            },\n            animationDuration: '1.5s',\n            animationIterationCount: 'infinite',\n            animationTimingFunction: tokens.curveEasyEase,\n            strokeLinecap: 'round',\n            transform: 'rotate(-90deg)',\n            transformOrigin: '50% 50%',\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                animationDuration: '0.01ms',\n                animationIterationCount: '1'\n            }\n        },\n        ['& > svg > circle.fui-Spinner__Track']: {\n            stroke: tokens.colorBrandStroke2Contrast,\n            '@media screen and (forced-colors: active)': {\n                stroke: tokens.colorNeutralBackgroundInverted\n            }\n        }\n    }\n});\nconst useLabelStyles = makeStyles({\n    // style for label\n    inverted: {\n        color: 'rgba(255, 255, 255, 1)'\n    },\n    primary: {},\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 = 'primary' } = state;\n    const rootStyles = useRootStyles();\n    const spinnerStyles = useLoaderStyles();\n    const labelStyles = useLabelStyles();\n    const trackStyles = useTrackStyles();\n    state.root.className = mergeClasses(spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);\n    if (state.spinner) {\n        state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);\n    }\n    if (state.label) {\n        state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], labelStyles[appearance], 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});\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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"}

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

@@ -16,7 +16,9 @@ const renderSpinner_unstable = (state)=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
         children: [
             state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.label, {}),
-            state.spinner && shouldRenderSpinner && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.spinner, {}),
+            state.spinner && shouldRenderSpinner && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.spinner, {
+                children: state.spinnerTail && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.spinnerTail, {})
+            }),
             state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.label, {})
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["renderSpinner.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Spinner\n */ export const renderSpinner_unstable = (state)=>{\n    assertSlots(state);\n    const { labelPosition, shouldRenderSpinner } = state;\n    return /*#__PURE__*/ _jsxs(state.root, {\n        children: [\n            state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/ _jsx(state.label, {}),\n            state.spinner && shouldRenderSpinner && /*#__PURE__*/ _jsx(state.spinner, {}),\n            state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/ _jsx(state.label, {})\n        ]\n    });\n};\n"],"names":["renderSpinner_unstable","state","assertSlots","labelPosition","shouldRenderSpinner","_jsxs","root","children","label","_jsx","spinner"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJ4B;gCACjB;AAGjB,MAAMA,yBAAyB,CAACC;IACvCC,IAAAA,2BAAW,EAACD;IACZ,MAAM,EAAEE,aAAa,EAAEC,mBAAmB,EAAE,GAAGH;IAC/C,OAAO,WAAW,GAAGI,IAAAA,gBAAK,EAACJ,MAAMK,IAAI,EAAE;QACnCC,UAAU;YACNN,MAAMO,KAAK,IAAIJ,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAO,KAAM,WAAW,GAAGM,IAAAA,eAAI,EAACR,MAAMO,KAAK,EAAE,CAAC;YACpIP,MAAMS,OAAO,IAAIN,uBAAuB,WAAW,GAAGK,IAAAA,eAAI,EAACR,MAAMS,OAAO,EAAE,CAAC;YAC3ET,MAAMO,KAAK,IAAIJ,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAM,KAAM,WAAW,GAAGM,IAAAA,eAAI,EAACR,MAAMO,KAAK,EAAE,CAAC;SACtI;IACL;AACJ"}
+{"version":3,"sources":["renderSpinner.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Spinner\n */ export const renderSpinner_unstable = (state)=>{\n    assertSlots(state);\n    const { labelPosition, shouldRenderSpinner } = state;\n    return /*#__PURE__*/ _jsxs(state.root, {\n        children: [\n            state.label && shouldRenderSpinner && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/ _jsx(state.label, {}),\n            state.spinner && shouldRenderSpinner && /*#__PURE__*/ _jsx(state.spinner, {\n                children: state.spinnerTail && /*#__PURE__*/ _jsx(state.spinnerTail, {})\n            }),\n            state.label && shouldRenderSpinner && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/ _jsx(state.label, {})\n        ]\n    });\n};\n"],"names":["renderSpinner_unstable","state","assertSlots","labelPosition","shouldRenderSpinner","_jsxs","root","children","label","_jsx","spinner","spinnerTail"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJ4B;gCACjB;AAGjB,MAAMA,yBAAyB,CAACC;IACvCC,IAAAA,2BAAW,EAACD;IACZ,MAAM,EAAEE,aAAa,EAAEC,mBAAmB,EAAE,GAAGH;IAC/C,OAAO,WAAW,GAAGI,IAAAA,gBAAK,EAACJ,MAAMK,IAAI,EAAE;QACnCC,UAAU;YACNN,MAAMO,KAAK,IAAIJ,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAO,KAAM,WAAW,GAAGM,IAAAA,eAAI,EAACR,MAAMO,KAAK,EAAE,CAAC;YACpIP,MAAMS,OAAO,IAAIN,uBAAuB,WAAW,GAAGK,IAAAA,eAAI,EAACR,MAAMS,OAAO,EAAE;gBACtEH,UAAUN,MAAMU,WAAW,IAAI,WAAW,GAAGF,IAAAA,eAAI,EAACR,MAAMU,WAAW,EAAE,CAAC;YAC1E;YACAV,MAAMO,KAAK,IAAIJ,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAM,KAAM,WAAW,GAAGM,IAAAA,eAAI,EAACR,MAAMO,KAAK,EAAE,CAAC;SACtI;IACL;AACJ"}

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

@@ -12,7 +12,6 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactlabel = require("@fluentui/react-label");
-const _DefaultSvg = require("./DefaultSvg");
 const _SpinnerContext = require("../../contexts/SpinnerContext");
 const useSpinner_unstable = (props, ref)=>{
     // Props
@@ -59,7 +58,6 @@ const useSpinner_unstable = (props, ref)=>{
     const spinnerShortHand = _reactutilities.slot.optional(props.spinner, {
         renderByDefault: true,
         defaultProps: {
-            children: /*#__PURE__*/ _react.createElement(_DefaultSvg.DefaultSvg, null),
             tabIndex
         },
         elementType: 'span'
@@ -76,10 +74,14 @@ const useSpinner_unstable = (props, ref)=>{
         components: {
             root: 'div',
             spinner: 'span',
+            spinnerTail: 'span',
             label: _reactlabel.Label
         },
         root: nativeRoot,
         spinner: spinnerShortHand,
+        spinnerTail: _reactutilities.slot.always(props.spinnerTail, {
+            elementType: 'span'
+        }),
         label: labelShorthand
     };
     return state;

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

@@ -1 +1 @@
-{"version":3,"sources":["useSpinner.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\nimport { useSpinnerContext } from '../../contexts/SpinnerContext';\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 */ export const useSpinner_unstable = (props, ref)=>{\n    // Props\n    const { size: contextSize } = useSpinnerContext();\n    const { appearance = 'primary', labelPosition = 'after', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', delay = 0 } = props;\n    const baseId = useId('spinner');\n    const { role = 'progressbar', tabIndex, ...rest } = props;\n    const nativeRoot = slot.always(getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref,\n        role,\n        ...rest\n    }, [\n        'size'\n    ]), {\n        elementType: 'div'\n    });\n    const [isShownAfterDelay, setIsShownAfterDelay] = React.useState(false);\n    const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n    React.useEffect(()=>{\n        if (delay <= 0) {\n            return;\n        }\n        setDelayTimeout(()=>{\n            setIsShownAfterDelay(true);\n        }, delay);\n        return ()=>{\n            clearDelayTimeout();\n        };\n    }, [\n        setDelayTimeout,\n        clearDelayTimeout,\n        delay\n    ]);\n    const labelShorthand = slot.optional(props.label, {\n        defaultProps: {\n            id: baseId\n        },\n        renderByDefault: false,\n        elementType: Label\n    });\n    const spinnerShortHand = slot.optional(props.spinner, {\n        renderByDefault: true,\n        defaultProps: {\n            children: /*#__PURE__*/ React.createElement(DefaultSvg, null),\n            tabIndex\n        },\n        elementType: 'span'\n    });\n    if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n        nativeRoot['aria-labelledby'] = labelShorthand.id;\n    }\n    const state = {\n        appearance,\n        delay,\n        labelPosition,\n        size,\n        shouldRenderSpinner: !delay || isShownAfterDelay,\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"],"names":["useSpinner_unstable","props","ref","size","contextSize","useSpinnerContext","appearance","labelPosition","delay","baseId","useId","role","tabIndex","rest","nativeRoot","slot","always","getIntrinsicElementProps","elementType","isShownAfterDelay","setIsShownAfterDelay","React","useState","setDelayTimeout","clearDelayTimeout","useTimeout","useEffect","labelShorthand","optional","label","defaultProps","id","renderByDefault","Label","spinnerShortHand","spinner","children","createElement","DefaultSvg","state","shouldRenderSpinner","components","root"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCAC2C;4BAC5C;4BACK;gCACO;AASvB,MAAMA,sBAAsB,CAACC,OAAOC;IAC3C,QAAQ;IACR,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGC,IAAAA,iCAAiB;IAC/C,MAAM,EAAEC,aAAa,SAAS,EAAEC,gBAAgB,OAAO,EAAEJ,OAAOC,gBAAgB,QAAQA,gBAAgB,KAAK,IAAIA,cAAc,QAAQ,EAAEI,QAAQ,CAAC,EAAE,GAAGP;IACvJ,MAAMQ,SAASC,IAAAA,qBAAK,EAAC;IACrB,MAAM,EAAEC,OAAO,aAAa,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGZ;IACpD,MAAMa,aAAaC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;QAC3D,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5Ff,KAAKA;QACLS;QACA,GAAGE,IAAI;IACX,GAAG;QACC;KACH,GAAG;QACAK,aAAa;IACjB;IACA,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,OAAMC,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,GAAGC,IAAAA,0BAAU;IACvDJ,OAAMK,SAAS,CAAC;QACZ,IAAIlB,SAAS,GAAG;YACZ;QACJ;QACAe,gBAAgB;YACZH,qBAAqB;QACzB,GAAGZ;QACH,OAAO;YACHgB;QACJ;IACJ,GAAG;QACCD;QACAC;QACAhB;KACH;IACD,MAAMmB,iBAAiBZ,oBAAI,CAACa,QAAQ,CAAC3B,MAAM4B,KAAK,EAAE;QAC9CC,cAAc;YACVC,IAAItB;QACR;QACAuB,iBAAiB;QACjBd,aAAae,iBAAK;IACtB;IACA,MAAMC,mBAAmBnB,oBAAI,CAACa,QAAQ,CAAC3B,MAAMkC,OAAO,EAAE;QAClDH,iBAAiB;QACjBF,cAAc;YACVM,UAAU,WAAW,GAAGf,OAAMgB,aAAa,CAACC,sBAAU,EAAE;YACxD1B;QACJ;QACAM,aAAa;IACjB;IACA,IAAIS,kBAAkBb,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAChEA,UAAU,CAAC,kBAAkB,GAAGa,eAAeI,EAAE;IACrD;IACA,MAAMQ,QAAQ;QACVjC;QACAE;QACAD;QACAJ;QACAqC,qBAAqB,CAAChC,SAASW;QAC/BsB,YAAY;YACRC,MAAM;YACNP,SAAS;YACTN,OAAOI,iBAAK;QAChB;QACAS,MAAM5B;QACNqB,SAASD;QACTL,OAAOF;IACX;IACA,OAAOY;AACX"}
+{"version":3,"sources":["useSpinner.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\nimport { useSpinnerContext } from '../../contexts/SpinnerContext';\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 */ export const useSpinner_unstable = (props, ref)=>{\n    // Props\n    const { size: contextSize } = useSpinnerContext();\n    const { appearance = 'primary', labelPosition = 'after', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', delay = 0 } = props;\n    const baseId = useId('spinner');\n    const { role = 'progressbar', tabIndex, ...rest } = props;\n    const nativeRoot = slot.always(getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: ref,\n        role,\n        ...rest\n    }, [\n        'size'\n    ]), {\n        elementType: 'div'\n    });\n    const [isShownAfterDelay, setIsShownAfterDelay] = React.useState(false);\n    const [setDelayTimeout, clearDelayTimeout] = useTimeout();\n    React.useEffect(()=>{\n        if (delay <= 0) {\n            return;\n        }\n        setDelayTimeout(()=>{\n            setIsShownAfterDelay(true);\n        }, delay);\n        return ()=>{\n            clearDelayTimeout();\n        };\n    }, [\n        setDelayTimeout,\n        clearDelayTimeout,\n        delay\n    ]);\n    const labelShorthand = slot.optional(props.label, {\n        defaultProps: {\n            id: baseId\n        },\n        renderByDefault: false,\n        elementType: Label\n    });\n    const spinnerShortHand = slot.optional(props.spinner, {\n        renderByDefault: true,\n        defaultProps: {\n            tabIndex\n        },\n        elementType: 'span'\n    });\n    if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n        nativeRoot['aria-labelledby'] = labelShorthand.id;\n    }\n    const state = {\n        appearance,\n        delay,\n        labelPosition,\n        size,\n        shouldRenderSpinner: !delay || isShownAfterDelay,\n        components: {\n            root: 'div',\n            spinner: 'span',\n            spinnerTail: 'span',\n            label: Label\n        },\n        root: nativeRoot,\n        spinner: spinnerShortHand,\n        spinnerTail: slot.always(props.spinnerTail, {\n            elementType: 'span'\n        }),\n        label: labelShorthand\n    };\n    return state;\n};\n"],"names":["useSpinner_unstable","props","ref","size","contextSize","useSpinnerContext","appearance","labelPosition","delay","baseId","useId","role","tabIndex","rest","nativeRoot","slot","always","getIntrinsicElementProps","elementType","isShownAfterDelay","setIsShownAfterDelay","React","useState","setDelayTimeout","clearDelayTimeout","useTimeout","useEffect","labelShorthand","optional","label","defaultProps","id","renderByDefault","Label","spinnerShortHand","spinner","state","shouldRenderSpinner","components","root","spinnerTail"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCAC2C;4BAC5C;gCACY;AASvB,MAAMA,sBAAsB,CAACC,OAAOC;IAC3C,QAAQ;IACR,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGC,IAAAA,iCAAiB;IAC/C,MAAM,EAAEC,aAAa,SAAS,EAAEC,gBAAgB,OAAO,EAAEJ,OAAOC,gBAAgB,QAAQA,gBAAgB,KAAK,IAAIA,cAAc,QAAQ,EAAEI,QAAQ,CAAC,EAAE,GAAGP;IACvJ,MAAMQ,SAASC,IAAAA,qBAAK,EAAC;IACrB,MAAM,EAAEC,OAAO,aAAa,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGZ;IACpD,MAAMa,aAAaC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;QAC3D,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5Ff,KAAKA;QACLS;QACA,GAAGE,IAAI;IACX,GAAG;QACC;KACH,GAAG;QACAK,aAAa;IACjB;IACA,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,OAAMC,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,GAAGC,IAAAA,0BAAU;IACvDJ,OAAMK,SAAS,CAAC;QACZ,IAAIlB,SAAS,GAAG;YACZ;QACJ;QACAe,gBAAgB;YACZH,qBAAqB;QACzB,GAAGZ;QACH,OAAO;YACHgB;QACJ;IACJ,GAAG;QACCD;QACAC;QACAhB;KACH;IACD,MAAMmB,iBAAiBZ,oBAAI,CAACa,QAAQ,CAAC3B,MAAM4B,KAAK,EAAE;QAC9CC,cAAc;YACVC,IAAItB;QACR;QACAuB,iBAAiB;QACjBd,aAAae,iBAAK;IACtB;IACA,MAAMC,mBAAmBnB,oBAAI,CAACa,QAAQ,CAAC3B,MAAMkC,OAAO,EAAE;QAClDH,iBAAiB;QACjBF,cAAc;YACVlB;QACJ;QACAM,aAAa;IACjB;IACA,IAAIS,kBAAkBb,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAChEA,UAAU,CAAC,kBAAkB,GAAGa,eAAeI,EAAE;IACrD;IACA,MAAMK,QAAQ;QACV9B;QACAE;QACAD;QACAJ;QACAkC,qBAAqB,CAAC7B,SAASW;QAC/BmB,YAAY;YACRC,MAAM;YACNJ,SAAS;YACTK,aAAa;YACbX,OAAOI,iBAAK;QAChB;QACAM,MAAMzB;QACNqB,SAASD;QACTM,aAAazB,oBAAI,CAACC,MAAM,CAACf,MAAMuC,WAAW,EAAE;YACxCtB,aAAa;QACjB;QACAW,OAAOF;IACX;IACA,OAAOS;AACX"}

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

@@ -16,293 +16,160 @@ _export(exports, {
         return useSpinnerStyles_unstable;
     }
 });
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _react = require("@griffel/react");
 const spinnerClassNames = {
     root: 'fui-Spinner',
     spinner: 'fui-Spinner__spinner',
+    spinnerTail: 'fui-Spinner__spinnerTail',
     label: 'fui-Spinner__label'
 };
-/*
- * TODO: Update with proper tokens when added
- * Radii for the Spinner circles
- */ const rValues = {
-    extraTiny: '7px',
-    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 = {
-    extraTiny: '16px',
-    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'
-    }
-};
 /**
- * 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"
-    },
+ * CSS variables used internally by Spinner
+ */ const vars = {
+    strokeWidth: '--fui-Spinner--strokeWidth'
+};
+const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1k3z50n", null, [
+    ".r1k3z50n{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;}"
+]);
+const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
     vertical: {
         Beiy3e4: "f1vx9l62"
     }
 }, {
     d: [
-        ".f22iagw{display:flex;}",
-        ".f122n59{align-items:center;}",
-        ".f4d9j23{justify-content:center;}",
-        ".fez10in{line-height:0;}",
-        ".f4px1ci{column-gap:8px;}",
-        ".fn67r4l{row-gap:8px;}",
-        ".f1063pyq{flex-direction:row;}",
         ".f1vx9l62{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"
+const useSpinnerBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rvgcg50", "r15nd2jo", {
+    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);}}"
+    ],
+    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;}}"
+    ]
+});
+// The spinner tail is rendered using two 135deg arc segments, behind a 105deg arc mask.
+// 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", {
+    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 useSpinnerStyles = /*#__PURE__*/ (0, _react.__styles)({
+    inverted: {
+        De3pzq: "fr407j0",
+        sj55zd: "f1f7voed"
+    },
+    rtlTail: {
+        btxmck: "f179dep3",
+        gb5jj2: "fbz9ihp",
+        Br2kee7: "f1wkkxo7"
     },
     "extra-tiny": {
-        Bah9ito: "f1x2gjcb",
-        ut6tcf: "f1vjiaua",
-        B7p06xz: "fv1u54w",
-        B807ibg: "f1oebb0s"
+        Bqenvij: "fd461yt",
+        a9b677: "fjw5fx7",
+        qmp6fs: "f1v3ph3m"
     },
     tiny: {
-        Bah9ito: "f1j4wmu2",
-        ut6tcf: "f1vppzuq",
-        B7p06xz: "fv1u54w",
-        B807ibg: "fngtx1d"
+        Bqenvij: "fjamq6b",
+        a9b677: "f64fuq3",
+        qmp6fs: "f1v3ph3m"
     },
     "extra-small": {
-        Bah9ito: "fmpqlna",
-        ut6tcf: "f15z5jzu",
-        B7p06xz: "fv1u54w",
-        B807ibg: "fadawes"
+        Bqenvij: "frvgh55",
+        a9b677: "fq4mcun",
+        qmp6fs: "f1v3ph3m"
     },
     small: {
-        Bah9ito: "fo52gbo",
-        ut6tcf: "f1b41i3v",
-        B7p06xz: "fv1u54w",
-        B807ibg: "f1xqyyrl"
+        Bqenvij: "fxldao9",
+        a9b677: "f1w9dchk",
+        qmp6fs: "f1v3ph3m"
     },
     medium: {
-        Bah9ito: "f1aiqagr",
-        ut6tcf: "f1wtx80b",
-        B7p06xz: "f1flujpd",
-        B807ibg: "f1u06hy7"
+        Bqenvij: "f1d2rq10",
+        a9b677: "f1szoe96",
+        qmp6fs: "fb52u90"
     },
     large: {
-        Bah9ito: "f1trdq7b",
-        ut6tcf: "f9e0mc5",
-        B7p06xz: "f1flujpd",
-        B807ibg: "f13pmvhl"
+        Bqenvij: "f8ljn23",
+        a9b677: "fpdz1er",
+        qmp6fs: "fb52u90"
     },
     "extra-large": {
-        Bah9ito: "f89rf2a",
-        ut6tcf: "f1w2xg3q",
-        B7p06xz: "f1flujpd",
-        B807ibg: "fmn74v6"
+        Bqenvij: "fbhnoac",
+        a9b677: "feqmc2u",
+        qmp6fs: "fb52u90"
     },
     huge: {
-        Bah9ito: "f1rx7k5y",
-        ut6tcf: "f1vtyt49",
-        B7p06xz: "f1owbg48",
-        B807ibg: "f1fr1izd"
+        Bqenvij: "f1ft4266",
+        a9b677: "fksc0bp",
+        qmp6fs: "fa3u9ii"
     }
 }, {
-    f: [
-        ".f1or16p5:focus{outline-width:3px;}",
-        ".f1grzc83:focus{outline-style:solid;}",
-        ".f19shzzi:focus{outline-color:transparent;}"
-    ],
-    k: [
-        "@keyframes fb7n1on{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}",
-        "@keyframes f1gx3jof{0%{transform:rotate(0deg);}100%{transform:rotate(-360deg);}}"
-    ],
     d: [
-        ".f5tbecn>svg{animation-name:fb7n1on;}",
-        ".f15qb8s7>svg{animation-name:f1gx3jof;}",
-        ".fn4mtlg>svg{animation-duration:3s;}",
-        ".f1y80fxs>svg{animation-iteration-count:infinite;}",
-        ".f1r2crtq>svg{animation-timing-function:linear;}",
-        ".f1wsi8sr>svg{background-color:transparent;}",
-        ".f1da2vov>svg>circle{cx:50%;}",
-        ".f11rfva0>svg>circle{cy:50%;}",
-        ".f1exc66>svg>circle{fill:none;}",
-        ".f1x2gjcb>svg{height:16px;}",
-        ".f1vjiaua>svg{width:16px;}",
-        ".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}",
-        ".f1oebb0s>svg>circle{r:7px;}",
-        ".f1j4wmu2>svg{height:20px;}",
-        ".f1vppzuq>svg{width:20px;}",
-        ".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;}"
+        ".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);}"
     ],
     m: [
         [
-            "@media screen and (prefers-reduced-motion: reduce){.f1bkm2qd>svg{animation-duration:0.01ms;}}",
-            {
-                m: "screen and (prefers-reduced-motion: reduce)"
-            }
-        ],
-        [
-            "@media screen and (prefers-reduced-motion: reduce){.f1urqz7h>svg{animation-iteration-count:1;}}",
+            "@media screen and (prefers-reduced-motion: reduce){.f1wkkxo7{background-image:conic-gradient(currentcolor 0deg, transparent 240deg);}}",
             {
                 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: "f13qeqtg",
-        y14cdu: "flglbw1"
-    }
-}, {
-    d: [
-        ".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}",
-        ".fq8a5sv>svg>circle.fui-Spinner__Tail{animation-name:f1v1ql0f;}",
-        ".f1b4lwqj>svg>circle.fui-Spinner__Tail{animation-duration:1.5s;}",
-        ".f1najlst>svg>circle.fui-Spinner__Tail{animation-iteration-count:infinite;}",
-        ".fjxod4>svg>circle.fui-Spinner__Tail{animation-timing-function:var(--curveEasyEase);}",
-        ".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}",
-        ".f1ttdh6v>svg>circle.fui-Spinner__Tail{transform:rotate(-90deg);}",
-        ".fmyjox0>svg>circle.fui-Spinner__Tail{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);}",
-        ".f13qeqtg>svg>circle.fui-Spinner__Track{stroke:var(--colorBrandStroke2Contrast);}"
-    ],
-    k: [
-        "@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{animation-duration:0.01ms;}}",
-            {
-                m: "screen and (prefers-reduced-motion: reduce)"
-            }
-        ],
-        [
-            "@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{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 (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"
+        sj55zd: "fonrgv7"
     },
-    primary: {},
     "extra-tiny": {
         Bahqtrf: "fk6fouc",
         Be2twd7: "fkhj508",
@@ -353,7 +220,7 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
     }
 }, {
     d: [
-        ".f15aqcq{color:rgba(255, 255, 255, 1);}",
+        ".fonrgv7{color:var(--colorNeutralForegroundStaticInverted);}",
         ".fk6fouc{font-family:var(--fontFamilyBase);}",
         ".fkhj508{font-size:var(--fontSizeBase300);}",
         ".figsok6{font-weight:var(--fontWeightRegular);}",
@@ -366,17 +233,23 @@ const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useSpinnerStyles_unstable = (state)=>{
-    const { labelPosition, size, appearance = 'primary' } = state;
+    const { labelPosition, size, appearance } = state;
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const rootBaseClassName = useRootBaseClassName();
     const rootStyles = useRootStyles();
-    const spinnerStyles = useLoaderStyles();
+    const spinnerBaseClassName = useSpinnerBaseClassName();
+    const spinnerStyles = useSpinnerStyles();
+    const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
     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);
+    state.root.className = (0, _react.mergeClasses)(spinnerClassNames.root, rootBaseClassName, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, state.root.className);
     if (state.spinner) {
-        state.spinner.className = (0, _react.mergeClasses)(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);
+        state.spinner.className = (0, _react.mergeClasses)(spinnerClassNames.spinner, spinnerBaseClassName, spinnerStyles[size], appearance === 'inverted' && spinnerStyles.inverted, state.spinner.className);
+    }
+    if (state.spinnerTail) {
+        state.spinnerTail.className = (0, _react.mergeClasses)(spinnerClassNames.spinnerTail, spinnerTailBaseClassName, dir === 'rtl' && spinnerStyles.rtlTail, state.spinnerTail.className);
     }
     if (state.label) {
-        state.label.className = (0, _react.mergeClasses)(spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);
+        state.label.className = (0, _react.mergeClasses)(spinnerClassNames.label, labelStyles[size], appearance === 'inverted' && labelStyles.inverted, state.label.className);
     }
     return state;
 }; //# sourceMappingURL=useSpinnerStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useSpinnerStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const spinnerClassNames = {\n  root: 'fui-Spinner',\n  spinner: 'fui-Spinner__spinner',\n  label: 'fui-Spinner__label'\n};\n/*\n * TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n */\nconst rValues = {\n  extraTiny: '7px',\n  tiny: '9px',\n  extraSmall: '11px',\n  small: '13px',\n  medium: '14.5px',\n  large: '16.5px',\n  extraLarge: '18.5px',\n  huge: '20px'\n};\n/*\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n */\nconst spinnnerSizes = {\n  extraTiny: '16px',\n  tiny: '20px',\n  extraSmall: '24px',\n  small: '28px',\n  medium: '32px',\n  large: '36px',\n  extraLarge: '40px',\n  huge: '44px'\n};\n/*\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n */\nconst spinnerAnimation = {\n  container: {\n    animationDuration: '3s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'linear',\n    backgroundColor: 'transparent'\n  }\n};\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    Brf1p80: \"f4d9j23\",\n    Bg96gwp: \"fez10in\",\n    i8kkvl: \"f4px1ci\",\n    Belr9w4: \"fn67r4l\"\n  },\n  horizontal: {\n    Beiy3e4: \"f1063pyq\"\n  },\n  vertical: {\n    Beiy3e4: \"f1vx9l62\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".f122n59{align-items:center;}\", \".f4d9j23{justify-content:center;}\", \".fez10in{line-height:0;}\", \".f4px1ci{column-gap:8px;}\", \".fn67r4l{row-gap:8px;}\", \".f1063pyq{flex-direction:row;}\", \".f1vx9l62{flex-direction:column;}\"]\n});\nconst useLoaderStyles = /*#__PURE__*/__styles({\n  spinnerSVG: {\n    B3aqqti: \"f1or16p5\",\n    Brovlpu: \"f1grzc83\",\n    Bxa1mx5: \"f19shzzi\",\n    Bwaue66: [\"f5tbecn\", \"f15qb8s7\"],\n    fyp1ls: \"fn4mtlg\",\n    ag6ruv: \"f1y80fxs\",\n    osj692: \"f1r2crtq\",\n    aq5vjd: \"f1wsi8sr\",\n    tlu9e1: \"f1bkm2qd\",\n    J3u96z: \"f1urqz7h\",\n    d32isg: \"f1da2vov\",\n    Bsvqbuc: \"f11rfva0\",\n    b3s3i5: \"f1exc66\"\n  },\n  \"extra-tiny\": {\n    Bah9ito: \"f1x2gjcb\",\n    ut6tcf: \"f1vjiaua\",\n    B7p06xz: \"fv1u54w\",\n    B807ibg: \"f1oebb0s\"\n  },\n  tiny: {\n    Bah9ito: \"f1j4wmu2\",\n    ut6tcf: \"f1vppzuq\",\n    B7p06xz: \"fv1u54w\",\n    B807ibg: \"fngtx1d\"\n  },\n  \"extra-small\": {\n    Bah9ito: \"fmpqlna\",\n    ut6tcf: \"f15z5jzu\",\n    B7p06xz: \"fv1u54w\",\n    B807ibg: \"fadawes\"\n  },\n  small: {\n    Bah9ito: \"fo52gbo\",\n    ut6tcf: \"f1b41i3v\",\n    B7p06xz: \"fv1u54w\",\n    B807ibg: \"f1xqyyrl\"\n  },\n  medium: {\n    Bah9ito: \"f1aiqagr\",\n    ut6tcf: \"f1wtx80b\",\n    B7p06xz: \"f1flujpd\",\n    B807ibg: \"f1u06hy7\"\n  },\n  large: {\n    Bah9ito: \"f1trdq7b\",\n    ut6tcf: \"f9e0mc5\",\n    B7p06xz: \"f1flujpd\",\n    B807ibg: \"f13pmvhl\"\n  },\n  \"extra-large\": {\n    Bah9ito: \"f89rf2a\",\n    ut6tcf: \"f1w2xg3q\",\n    B7p06xz: \"f1flujpd\",\n    B807ibg: \"fmn74v6\"\n  },\n  huge: {\n    Bah9ito: \"f1rx7k5y\",\n    ut6tcf: \"f1vtyt49\",\n    B7p06xz: \"f1owbg48\",\n    B807ibg: \"f1fr1izd\"\n  }\n}, {\n  f: [\".f1or16p5:focus{outline-width:3px;}\", \".f1grzc83:focus{outline-style:solid;}\", \".f19shzzi:focus{outline-color:transparent;}\"],\n  k: [\"@keyframes fb7n1on{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}\", \"@keyframes f1gx3jof{0%{transform:rotate(0deg);}100%{transform:rotate(-360deg);}}\"],\n  d: [\".f5tbecn>svg{animation-name:fb7n1on;}\", \".f15qb8s7>svg{animation-name:f1gx3jof;}\", \".fn4mtlg>svg{animation-duration:3s;}\", \".f1y80fxs>svg{animation-iteration-count:infinite;}\", \".f1r2crtq>svg{animation-timing-function:linear;}\", \".f1wsi8sr>svg{background-color:transparent;}\", \".f1da2vov>svg>circle{cx:50%;}\", \".f11rfva0>svg>circle{cy:50%;}\", \".f1exc66>svg>circle{fill:none;}\", \".f1x2gjcb>svg{height:16px;}\", \".f1vjiaua>svg{width:16px;}\", \".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}\", \".f1oebb0s>svg>circle{r:7px;}\", \".f1j4wmu2>svg{height:20px;}\", \".f1vppzuq>svg{width:20px;}\", \".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;}\"],\n  m: [[\"@media screen and (prefers-reduced-motion: reduce){.f1bkm2qd>svg{animation-duration:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.f1urqz7h>svg{animation-iteration-count:1;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }]]\n});\nconst useTrackStyles = /*#__PURE__*/__styles({\n  inverted: {\n    gwg7kz: \"f1jvpmnu\",\n    Bvrehnu: \"fq8a5sv\",\n    Bidp6o: \"f1b4lwqj\",\n    cq3kgi: \"f1najlst\",\n    Btwiser: \"fjxod4\",\n    B8001xd: \"fu3xdw0\",\n    Bdordwa: [\"f1ttdh6v\", \"fmyjox0\"],\n    Bo2mdfu: \"f1eseayc\",\n    E10nrc: \"folzdkc\",\n    Bwl7w15: \"fhlfkde\",\n    Bksq7rz: \"f1esql28\"\n  },\n  primary: {\n    gwg7kz: \"f11ditju\",\n    B8k2rxp: \"f1m9nikz\",\n    Bvrehnu: \"fq8a5sv\",\n    Bidp6o: \"f1b4lwqj\",\n    cq3kgi: \"f1najlst\",\n    Btwiser: \"fjxod4\",\n    B8001xd: \"fu3xdw0\",\n    Bdordwa: [\"f1ttdh6v\", \"fmyjox0\"],\n    Bo2mdfu: \"f1eseayc\",\n    E10nrc: \"folzdkc\",\n    Bwl7w15: \"fhlfkde\",\n    Bksq7rz: \"f13qeqtg\",\n    y14cdu: \"flglbw1\"\n  }\n}, {\n  d: [\".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}\", \".fq8a5sv>svg>circle.fui-Spinner__Tail{animation-name:f1v1ql0f;}\", \".f1b4lwqj>svg>circle.fui-Spinner__Tail{animation-duration:1.5s;}\", \".f1najlst>svg>circle.fui-Spinner__Tail{animation-iteration-count:infinite;}\", \".fjxod4>svg>circle.fui-Spinner__Tail{animation-timing-function:var(--curveEasyEase);}\", \".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}\", \".f1ttdh6v>svg>circle.fui-Spinner__Tail{transform:rotate(-90deg);}\", \".fmyjox0>svg>circle.fui-Spinner__Tail{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);}\", \".f13qeqtg>svg>circle.fui-Spinner__Track{stroke:var(--colorBrandStroke2Contrast);}\"],\n  k: [\"@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;}}\"],\n  m: [[\"@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{animation-duration:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{animation-iteration-count:1;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}\", {\n    m: \"screen and (forced-colors: active)\"\n  }], [\"@media screen and (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}\", {\n    m: \"screen and (forced-colors: active)\"\n  }]]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n  inverted: {\n    sj55zd: \"f15aqcq\"\n  },\n  primary: {},\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: [\".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);}\"]\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 = 'primary'\n  } = state;\n  const rootStyles = useRootStyles();\n  const spinnerStyles = useLoaderStyles();\n  const labelStyles = useLabelStyles();\n  const trackStyles = useTrackStyles();\n  state.root.className = mergeClasses(spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);\n  if (state.spinner) {\n    state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);\n  }\n  if (state.label) {\n    state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useSpinnerStyles.styles.js.map"],"names":["spinnerClassNames","useSpinnerStyles_unstable","root","spinner","label","rValues","extraTiny","tiny","extraSmall","small","medium","large","extraLarge","huge","spinnnerSizes","spinnerAnimation","container","animationDuration","animationIterationCount","animationTimingFunction","backgroundColor","useRootStyles","__styles","mc9l5x","Bt984gj","Brf1p80","Bg96gwp","i8kkvl","Belr9w4","horizontal","Beiy3e4","vertical","d","useLoaderStyles","spinnerSVG","B3aqqti","Brovlpu","Bxa1mx5","Bwaue66","fyp1ls","ag6ruv","osj692","aq5vjd","tlu9e1","J3u96z","d32isg","Bsvqbuc","b3s3i5","Bah9ito","ut6tcf","B7p06xz","B807ibg","f","k","m","useTrackStyles","inverted","gwg7kz","Bvrehnu","Bidp6o","cq3kgi","Btwiser","B8001xd","Bdordwa","Bo2mdfu","E10nrc","Bwl7w15","Bksq7rz","primary","B8k2rxp","y14cdu","useLabelStyles","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","state","labelPosition","size","appearance","rootStyles","spinnerStyles","labelStyles","trackStyles","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(\"r1k3z50n\", null, [\".r1k3z50n{display:flex;align-items:center;justify-content:center;line-height:0;gap:8px;}\"]);\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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinner",
-  "version": "9.3.43",
+  "version": "9.4.0",
   "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.31",
-    "@fluentui/react-label": "^9.1.63",
-    "@fluentui/react-shared-contexts": "^9.14.1",
-    "@fluentui/react-theme": "^9.1.16",
-    "@fluentui/react-utilities": "^9.18.2",
+    "@fluentui/react-jsx-runtime": "^9.0.32",
+    "@fluentui/react-label": "^9.1.64",
+    "@fluentui/react-shared-contexts": "^9.15.0",
+    "@fluentui/react-theme": "^9.1.17",
+    "@fluentui/react-utilities": "^9.18.3",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },

package/lib/components/Spinner/DefaultSvg.js

@@ -1,8 +0,0 @@
-import * as React from 'react';
-export const DefaultSvg = ()=>/*#__PURE__*/ React.createElement("svg", {
-        className: "fui-Spinner__Progressbar"
-    }, /*#__PURE__*/ React.createElement("circle", {
-        className: "fui-Spinner__Track"
-    }), /*#__PURE__*/ React.createElement("circle", {
-        className: "fui-Spinner__Tail"
-    }));

package/lib/components/Spinner/DefaultSvg.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["DefaultSvg.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport const DefaultSvg = () => (\n  <svg className=\"fui-Spinner__Progressbar\">\n    <circle className=\"fui-Spinner__Track\" />\n    <circle className=\"fui-Spinner__Tail\" />\n  </svg>\n);\n"],"names":["React","DefaultSvg","svg","className","circle"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,MAAMC,aAAa,kBACxB,oBAACC;QAAIC,WAAU;qBACb,oBAACC;QAAOD,WAAU;sBAClB,oBAACC;QAAOD,WAAU;QAEpB"}

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

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-Object.defineProperty(exports, "DefaultSvg", {
-    enumerable: true,
-    get: function() {
-        return DefaultSvg;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const DefaultSvg = ()=>/*#__PURE__*/ _react.createElement("svg", {
-        className: "fui-Spinner__Progressbar"
-    }, /*#__PURE__*/ _react.createElement("circle", {
-        className: "fui-Spinner__Track"
-    }), /*#__PURE__*/ _react.createElement("circle", {
-        className: "fui-Spinner__Tail"
-    }));

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

@@ -1 +0,0 @@
-{"version":3,"sources":["DefaultSvg.js"],"sourcesContent":["import * as React from 'react';\nexport const DefaultSvg = ()=>/*#__PURE__*/ React.createElement(\"svg\", {\n        className: \"fui-Spinner__Progressbar\"\n    }, /*#__PURE__*/ React.createElement(\"circle\", {\n        className: \"fui-Spinner__Track\"\n    }), /*#__PURE__*/ React.createElement(\"circle\", {\n        className: \"fui-Spinner__Tail\"\n    }));\n"],"names":["DefaultSvg","React","createElement","className"],"mappings":";;;;+BACaA;;;eAAAA;;;;iEADU;AAChB,MAAMA,aAAa,IAAI,WAAW,GAAGC,OAAMC,aAAa,CAAC,OAAO;QAC/DC,WAAW;IACf,GAAG,WAAW,GAAGF,OAAMC,aAAa,CAAC,UAAU;QAC3CC,WAAW;IACf,IAAI,WAAW,GAAGF,OAAMC,aAAa,CAAC,UAAU;QAC5CC,WAAW;IACf"}