@fluentui/react-spinner 9.74.7-experimental.cli-api.20261006-ccaa611d58.0 → 9.75.0-experimental.css-modules.20261031-810ab07afb.0

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SpinnerContextValue } from './SpinnerContext';\nexport { SpinnerContextProvider, useSpinnerContext } from './SpinnerContext';\n"],"names":["SpinnerContextProvider","useSpinnerContext"],"mappings":"AACA,SAASA,sBAAsB,EAAEC,iBAAiB,QAAQ,sBAAmB"}
+{"version":3,"sources":["../../src/contexts/index.ts"],"sourcesContent":["export type { SpinnerContextValue } from './SpinnerContext';\nexport { SpinnerContextProvider, useSpinnerContext } from './SpinnerContext';\n"],"names":["SpinnerContextProvider","useSpinnerContext"],"mappings":"AACA,SAASA,sBAAsB,EAAEC,iBAAiB,QAAQ,sBAAmB"}

package/lib-commonjs/Spinner.cjs

@@ -5,26 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    Spinner: function() {
+    get Spinner () {
         return _index.Spinner;
     },
-    renderSpinner_unstable: function() {
+    get renderSpinner_unstable () {
         return _index.renderSpinner_unstable;
     },
-    spinnerClassNames: function() {
+    get spinnerClassNames () {
         return _index.spinnerClassNames;
     },
-    useSpinnerBase_unstable: function() {
+    get useSpinnerBase_unstable () {
         return _index.useSpinnerBase_unstable;
     },
-    useSpinnerStyles_unstable: function() {
+    get useSpinnerStyles_unstable () {
         return _index.useSpinnerStyles_unstable;
     },
-    useSpinner_unstable: function() {
+    get useSpinner_unstable () {
         return _index.useSpinner_unstable;
     }
 });

package/lib-commonjs/components/Spinner/Spinner.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/Spinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\nimport type { SpinnerProps } from './Spinner.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner: ForwardRefComponent<SpinnerProps> = React.forwardRef((props, ref) => {\n  const state = useSpinner_unstable(props, ref);\n\n  useSpinnerStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSpinnerStyles_unstable')(state);\n\n  return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","useSpinner_unstable","renderSpinner_unstable","useSpinnerStyles_unstable","useCustomStyleHook_unstable","Spinner","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,kBAAe;+BACZ,qBAAkB;wCACf,+BAA4B;qCAG1B,kCAAkC;AAKvE,MAAMK,UAAAA,WAAAA,GAA6CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQR,+BAAAA,EAAoBM,OAAOC;QAEzCL,iDAAAA,EAA0BM;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOP,qCAAAA,EAAuBO;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\nimport type { SpinnerProps } from './Spinner.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner: ForwardRefComponent<SpinnerProps> = React.forwardRef((props, ref) => {\n  const state = useSpinner_unstable(props, ref);\n\n  useSpinnerStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSpinnerStyles_unstable')(state);\n\n  return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"],"names":["React","useSpinner_unstable","renderSpinner_unstable","useSpinnerStyles_unstable","useCustomStyleHook_unstable","Spinner","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;4BACK,kBAAe;+BACZ,qBAAkB;wCACf,+BAA4B;qCAG1B,kCAAkC;AAKvE,MAAMK,UAAAA,WAAAA,GAA6CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQR,+BAAAA,EAAoBM,OAAOC;QAEzCL,iDAAAA,EAA0BM;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOP,qCAAAA,EAAuBO;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}

package/lib-commonjs/components/Spinner/Spinner.module.css

@@ -0,0 +1,327 @@
+@layer fluentui {
+  .root {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+    gap: var(--spacingHorizontalS);
+    overflow: hidden;
+    min-width: min-content;
+  }
+
+  .above,
+  .below {
+    flex-direction: column;
+  }
+
+  .spinner {
+    position: relative;
+    flex-shrink: 0;
+    mask-image: radial-gradient(
+      closest-side,
+      transparent calc(100% - var(--fui-Spinner--strokeWidth) - var(--strokeWidthThin)),
+      var(--colorNeutralForegroundStaticInverted) calc(100% - var(--fui-Spinner--strokeWidth))
+        calc(100% - var(--strokeWidthThin)),
+      transparent 100%
+    );
+    background-color: var(--colorBrandStroke2Contrast);
+    color: var(--colorBrandStroke1);
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+    animation-name: animation1;
+  }
+
+  .spinner:where(:dir(rtl)) {
+    animation-name: animation1RTL;
+  }
+
+  .spinnerTail::before,
+  .spinnerTail::after {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    animation: inherit;
+    background-image: conic-gradient(currentcolor 135deg, transparent 135deg);
+  }
+
+  .spinnerTail::before {
+    animation-name: animation3;
+  }
+
+  .spinnerTail:where(:dir(rtl))::before {
+    animation-name: animation3RTL;
+  }
+
+  .spinnerTail::after {
+    animation-name: animation4;
+  }
+
+  .spinnerTail:where(:dir(rtl))::after {
+    animation-name: animation4RTL;
+  }
+
+  .spinnerTail {
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    mask-image: conic-gradient(transparent 105deg, var(--colorNeutralForegroundStaticInverted) 105deg);
+    animation-duration: 1.5s;
+    animation-iteration-count: infinite;
+    animation-timing-function: var(--curveEasyEase);
+    animation-name: animation2;
+  }
+
+  .spinnerTail:where(:dir(rtl)) {
+    animation-name: animation2RTL;
+  }
+
+  :where(.inverted) > .spinner {
+    background-color: var(--colorNeutralStrokeAlpha2);
+    color: var(--colorNeutralStrokeOnBrand2);
+  }
+
+  .rtlTail::before,
+  .rtlTail::after {
+    background-image: conic-gradient(transparent 225deg, currentcolor 225deg);
+  }
+
+  .rtlTail {
+    mask-image: conic-gradient(var(--colorNeutralForegroundStaticInverted) 255deg, transparent 255deg);
+  }
+
+  :where(.extra-tiny) > .spinner {
+    height: var(--spacingHorizontalL);
+    width: var(--spacingHorizontalL);
+    --fui-Spinner--strokeWidth: var(--strokeWidthThick);
+  }
+
+  :where(.extra-tiny) > .label {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+  }
+
+  :where(.tiny) > .spinner {
+    height: var(--spacingHorizontalXL);
+    width: var(--spacingHorizontalXL);
+    --fui-Spinner--strokeWidth: var(--strokeWidthThick);
+  }
+
+  :where(.tiny) > .label {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+  }
+
+  :where(.extra-small) > .spinner {
+    height: var(--spacingHorizontalXXL);
+    width: var(--spacingHorizontalXXL);
+    --fui-Spinner--strokeWidth: var(--strokeWidthThick);
+  }
+
+  :where(.extra-small) > .label {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+  }
+
+  :where(.small) > .spinner {
+    height: calc(var(--spacingHorizontalXS) * 7);
+    width: calc(var(--spacingHorizontalXS) * 7);
+    --fui-Spinner--strokeWidth: var(--strokeWidthThick);
+  }
+
+  :where(.small) > .label {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase300);
+    font-weight: var(--fontWeightRegular);
+    line-height: var(--lineHeightBase300);
+  }
+
+  :where(.medium) > .spinner {
+    height: var(--spacingHorizontalXXXL);
+    width: var(--spacingHorizontalXXXL);
+    --fui-Spinner--strokeWidth: var(--strokeWidthThicker);
+  }
+
+  :where(.medium) > .label {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase400);
+    font-weight: var(--fontWeightSemibold);
+    line-height: var(--lineHeightBase400);
+  }
+
+  :where(.large) > .spinner {
+    height: calc(var(--spacingHorizontalXS) * 9);
+    width: calc(var(--spacingHorizontalXS) * 9);
+    --fui-Spinner--strokeWidth: var(--strokeWidthThicker);
+  }
+
+  :where(.large) > .label {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase400);
+    font-weight: var(--fontWeightSemibold);
+    line-height: var(--lineHeightBase400);
+  }
+
+  :where(.extra-large) > .spinner {
+    height: calc(var(--spacingHorizontalXS) * 10);
+    width: calc(var(--spacingHorizontalXS) * 10);
+    --fui-Spinner--strokeWidth: var(--strokeWidthThicker);
+  }
+
+  :where(.extra-large) > .label {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase400);
+    font-weight: var(--fontWeightSemibold);
+    line-height: var(--lineHeightBase400);
+  }
+
+  :where(.huge) > .spinner {
+    height: calc(var(--spacingHorizontalXS) * 11);
+    width: calc(var(--spacingHorizontalXS) * 11);
+    --fui-Spinner--strokeWidth: var(--strokeWidthThickest);
+  }
+
+  :where(.huge) > .label {
+    font-family: var(--fontFamilyBase);
+    font-size: var(--fontSizeBase500);
+    font-weight: var(--fontWeightSemibold);
+    line-height: var(--lineHeightBase500);
+  }
+
+  :where(.inverted) > .label {
+    color: var(--colorNeutralForegroundStaticInverted);
+  }
+
+  @media screen and (forced-colors: active) {
+    .spinner {
+      background-color: HighlightText;
+      color: Highlight;
+      forced-color-adjust: none;
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation-duration: 1.8s;
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .spinnerTail::before,
+    .spinnerTail::after {
+      content: none;
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .spinnerTail {
+      animation-iteration-count: 0;
+      background-image: conic-gradient(transparent 120deg, currentcolor 360deg);
+    }
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .rtlTail {
+      background-image: conic-gradient(currentcolor 0deg, transparent 240deg);
+    }
+  }
+
+  @keyframes animation1 {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes animation1RTL {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(-360deg);
+    }
+  }
+
+  @keyframes animation2 {
+    0% {
+      transform: rotate(-135deg);
+    }
+    50% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(225deg);
+    }
+  }
+
+  @keyframes animation2RTL {
+    0% {
+      transform: rotate(135deg);
+    }
+    50% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(-225deg);
+    }
+  }
+
+  @keyframes animation3 {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(105deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+
+  @keyframes animation3RTL {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(-105deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+
+  @keyframes animation4 {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(225deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+
+  @keyframes animation4RTL {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(-225deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+}

package/lib-commonjs/components/Spinner/Spinner.types.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/Spinner.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { 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', 'span'>>;\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 * Spinner base props, excluding design-related props like appearance and size.\n */\nexport type SpinnerBaseProps = Omit<SpinnerProps, 'appearance' | 'size'>;\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\n/**\n * Spinner base state, excluding design-related state like appearance and size.\n */\nexport type SpinnerBaseState = Omit<SpinnerState, 'appearance' | 'size'>;\n"],"names":[],"mappings":"AAuEA;;CAEC,GACD,WAAyE"}
+{"version":3,"sources":["../../../src/components/Spinner/Spinner.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { 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', 'span'>>;\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 * Spinner base props, excluding design-related props like appearance and size.\n */\nexport type SpinnerBaseProps = Omit<SpinnerProps, 'appearance' | 'size'>;\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\n/**\n * Spinner base state, excluding design-related state like appearance and size.\n */\nexport type SpinnerBaseState = Omit<SpinnerState, 'appearance' | 'size'>;\n"],"names":[],"mappings":"AAuEA;;CAEC,GACD,WAAyE"}

package/lib-commonjs/components/Spinner/index.cjs

@@ -5,26 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    Spinner: function() {
+    get Spinner () {
         return _Spinner.Spinner;
     },
-    renderSpinner_unstable: function() {
+    get renderSpinner_unstable () {
         return _renderSpinner.renderSpinner_unstable;
     },
-    spinnerClassNames: function() {
+    get spinnerClassNames () {
         return _useSpinnerStylesstyles.spinnerClassNames;
     },
-    useSpinnerBase_unstable: function() {
+    get useSpinnerBase_unstable () {
         return _useSpinner.useSpinnerBase_unstable;
     },
-    useSpinnerStyles_unstable: function() {
+    get useSpinnerStyles_unstable () {
         return _useSpinnerStylesstyles.useSpinnerStyles_unstable;
     },
-    useSpinner_unstable: function() {
+    get useSpinner_unstable () {
         return _useSpinner.useSpinner_unstable;
     }
 });

package/lib-commonjs/components/Spinner/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerBaseProps, SpinnerBaseState, SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable, useSpinnerBase_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","useSpinner_unstable","useSpinnerBase_unstable","spinnerClassNames","useSpinnerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAEPC,qCAAsB;;;eAEtBG,yCAAiB;;;eADID,mCAAuB;;;eACzBE,iDAAyB;;;eAD5CH,+BAAmB;;;yBAHJ,eAAY;+BAEG,qBAAkB;4BACI,kBAAe;wCACf,+BAA4B"}
+{"version":3,"sources":["../../../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerBaseProps, SpinnerBaseState, SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable, useSpinnerBase_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","useSpinner_unstable","useSpinnerBase_unstable","spinnerClassNames","useSpinnerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAEPC,qCAAsB;;;eAEtBG,yCAAiB;;;eADID,mCAAuB;;;eACzBE,iDAAyB;;;eAD5CH,+BAAmB;;;yBAHJ,eAAY;+BAEG,qBAAkB;4BACI,kBAAe;wCACf,+BAA4B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SpinnerBaseState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerBaseState): JSXElement => {\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":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,+BAA+B,CAACC;QACrCF,2BAAAA,EAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAA,CAAO,IAAA,WAAA,OAC5F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;YAEbJ,MAAMK,OAAO,IAAIH,uBAAAA,WAAAA,OAChB,eAAA,EAACF,MAAMK,OAAO,EAAA;0BAAEL,MAAMM,WAAW,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,WAAW,EAAA,CAAA;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAA,CAAM,IAAA,WAAA,OAC3F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;;;AAIpB,EAAE"}
+{"version":3,"sources":["../../../src/components/Spinner/renderSpinner.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SpinnerBaseState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerBaseState): JSXElement => {\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":";;;;+BAUaC;;;;;;;gCATb,gDAAiD,GAEjD,SAASD,WAAW,QAAQ,4BAA4B;AAOjD,+BAA+B,CAACE;QACrCF,2BAAAA,EAA0BE;IAC1B,MAAM,EAAEC,aAAa,EAAEC,mBAAmB,EAAE,GAAGF;IAC/C,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMG,IAAI,EAAA;;YACRH,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAA,CAAO,IAAA,WAAA,OAC5F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;YAEbJ,MAAMK,OAAO,IAAIH,uBAAAA,WAAAA,OAChB,eAAA,EAACF,MAAMK,OAAO,EAAA;0BAAEL,MAAMM,WAAW,IAAA,WAAA,OAAI,eAAA,EAACN,MAAMM,WAAW,EAAA,CAAA;;YAExDN,MAAMI,KAAK,IAAIF,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAA,CAAM,IAAA,WAAA,OAC3F,eAAA,EAACD,MAAMI,KAAK,EAAA,CAAA;;;AAIpB,EAAE"}

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

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    useSpinnerBase_unstable: function() {
+    get useSpinnerBase_unstable () {
         return useSpinnerBase_unstable;
     },
-    useSpinner_unstable: function() {
+    get useSpinner_unstable () {
         return useSpinner_unstable;
     }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/useSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';\nimport type { SpinnerBaseProps, SpinnerBaseState, 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  const { size: contextSize } = useSpinnerContext();\n  const { appearance = 'primary', size = contextSize ?? 'medium', ...baseProps } = props;\n\n  const baseState = useSpinnerBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    appearance,\n    size,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      label: Label,\n    },\n    label: slot.optional(props.label, {\n      defaultProps: baseState.label,\n      elementType: Label,\n    }),\n  };\n};\n\n/**\n * Base hook for Spinner component, which manages state related to slots structure, ARIA attributes,\n * and delay-based visibility logic.\n *\n * @param props - User provided props to the Spinner component.\n * @param ref - User provided ref to be passed to the Spinner component.\n */\nexport const useSpinnerBase_unstable = (props: SpinnerBaseProps, ref: React.Ref<HTMLElement>): SpinnerBaseState => {\n  const { delay = 0, labelPosition = 'after' } = props;\n  const baseId = useId('spinner');\n\n  const { role = 'progressbar', ...rest } = props;\n  const nativeRoot = slot.always(\n    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 as React.Ref<HTMLDivElement>,\n      role,\n      ...rest,\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    elementType: 'span',\n  });\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n  const state: SpinnerBaseState = {\n    delay,\n    labelPosition,\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","baseProps","baseState","useSpinnerBase_unstable","components","label","optional","defaultProps","elementType","delay","labelPosition","baseId","role","rest","nativeRoot","always","isShownAfterDelay","setIsShownAfterDelay","useState","setDelayTimeout","clearDelayTimeout","useEffect","labelShorthand","id","renderByDefault","spinnerShortHand","spinner","state","shouldRenderSpinner","root","spinnerTail"],"mappings":"AAAA;;;;;;;;;;;;2BA8Cae;eAAAA;;IA7BAR,mBAAAA;;;;;iEAfU,QAAQ;gCACmC,4BAA4B;4BAExE,wBAAwB;gCACZ,mCAAgC;AAW3D,4BAA4B,CAACC,OAAqBC;IACvD,MAAM,EAAEC,MAAMC,WAAW,EAAE,OAAGL,iCAAAA;IAC9B,MAAM,EAAEM,aAAa,SAAS,EAAEF,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAE,GAAGE,WAAW,GAAGL;IAEjF,MAAMM,YAAYC,wBAAwBF,WAAWJ;IAErD,OAAO;QACL,GAAGK,SAAS;QACZF;QACAF;QACAM,YAAY;YACV,4DAA4D;YAC5D,GAAGF,UAAUE,UAAU;YACvBC,OAAOZ,iBAAAA;QACT;QACAY,OAAOb,oBAAAA,CAAKc,QAAQ,CAACV,MAAMS,KAAK,EAAE;YAChCE,cAAcL,UAAUG,KAAK;YAC7BG,aAAaf,iBAAAA;QACf;IACF;AACF,EAAE;AASK,gCAAgC,CAACG,OAAyBC;IAC/D,MAAM,EAAEY,QAAQ,CAAC,EAAEC,gBAAgB,OAAO,EAAE,GAAGd;IAC/C,MAAMe,aAASrB,qBAAAA,EAAM;IAErB,MAAM,EAAEsB,OAAO,aAAa,EAAE,GAAGC,MAAM,GAAGjB;IAC1C,MAAMkB,aAAatB,oBAAAA,CAAKuB,MAAM,KAC5B1B,wCAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FQ,KAAKA;QACLe;QACA,GAAGC,IAAI;IACT,IACA;QACEL,aAAa;IACf;IAEF,MAAM,CAACQ,mBAAmBC,qBAAqB,GAAG7B,OAAM8B,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,GAAG7B,8BAAAA;IAC7CH,OAAMiC,SAAS,CAAC;QACd,IAAIZ,SAAS,GAAG;YACd;QACF;QACAU,gBAAgB;YACdF,qBAAqB;QACvB,GAAGR;QACH,OAAO;YACLW;QACF;IACF,GAAG;QAACD;QAAiBC;QAAmBX;KAAM;IAC9C,MAAMa,iBAAiB9B,oBAAAA,CAAKc,QAAQ,CAACV,MAAMS,KAAK,EAAE;QAChDE,cAAc;YAAEgB,IAAIZ;QAAO;QAC3Ba,iBAAiB;QACjBhB,aAAa;IACf;IACA,MAAMiB,mBAAmBjC,oBAAAA,CAAKc,QAAQ,CAACV,MAAM8B,OAAO,EAAE;QACpDF,iBAAiB;QACjBhB,aAAa;IACf;IACA,IAAIc,kBAAkBR,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGQ,eAAeC,EAAE;IACnD;IACA,MAAMI,QAA0B;QAC9BlB;QACAC;QACAkB,qBAAqB,CAACnB,SAASO;QAC/BZ,YAAY;YAAEyB,MAAM;YAAOH,SAAS;YAAQI,aAAa;YAAQzB,OAAO;QAAQ;QAChFwB,MAAMf;QACNY,SAASD;QACTK,aAAatC,oBAAAA,CAAKuB,MAAM,CAACnB,MAAMkC,WAAW,EAAE;YAAEtB,aAAa;QAAO;QAClEH,OAAOiB;IACT;IACA,OAAOK;AACT,EAAE"}
+{"version":3,"sources":["../../../src/components/Spinner/useSpinner.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useTimeout, slot } from '@fluentui/react-utilities';\nimport type { SpinnerBaseProps, SpinnerBaseState, 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  const { size: contextSize } = useSpinnerContext();\n  const { appearance = 'primary', size = contextSize ?? 'medium', ...baseProps } = props;\n\n  const baseState = useSpinnerBase_unstable(baseProps, ref);\n\n  return {\n    ...baseState,\n    appearance,\n    size,\n    components: {\n      // eslint-disable-next-line @typescript-eslint/no-deprecated\n      ...baseState.components,\n      label: Label,\n    },\n    label: slot.optional(props.label, {\n      defaultProps: baseState.label,\n      elementType: Label,\n    }),\n  };\n};\n\n/**\n * Base hook for Spinner component, which manages state related to slots structure, ARIA attributes,\n * and delay-based visibility logic.\n *\n * @param props - User provided props to the Spinner component.\n * @param ref - User provided ref to be passed to the Spinner component.\n */\nexport const useSpinnerBase_unstable = (props: SpinnerBaseProps, ref: React.Ref<HTMLElement>): SpinnerBaseState => {\n  const { delay = 0, labelPosition = 'after' } = props;\n  const baseId = useId('spinner');\n\n  const { role = 'progressbar', ...rest } = props;\n  const nativeRoot = slot.always(\n    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 as React.Ref<HTMLDivElement>,\n      role,\n      ...rest,\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    elementType: 'span',\n  });\n  if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['aria-labelledby'] = labelShorthand.id;\n  }\n  const state: SpinnerBaseState = {\n    delay,\n    labelPosition,\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","baseProps","baseState","useSpinnerBase_unstable","components","label","optional","defaultProps","elementType","delay","labelPosition","baseId","role","rest","nativeRoot","always","isShownAfterDelay","setIsShownAfterDelay","useState","setDelayTimeout","clearDelayTimeout","useEffect","labelShorthand","id","renderByDefault","spinnerShortHand","spinner","state","shouldRenderSpinner","root","spinnerTail"],"mappings":"AAAA;;;;;;;;;;;;QA8Cae;;;QA7BAR;;;;;iEAfU,QAAQ;gCACmC,4BAA4B;4BAExE,wBAAwB;gCACZ,mCAAgC;AAW3D,4BAA4B,CAACC,OAAqBC;IACvD,MAAM,EAAEC,MAAMC,WAAW,EAAE,OAAGL,iCAAAA;IAC9B,MAAM,EAAEM,aAAa,SAAS,EAAEF,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAE,GAAGE,WAAW,GAAGL;IAEjF,MAAMM,YAAYC,wBAAwBF,WAAWJ;IAErD,OAAO;QACL,GAAGK,SAAS;QACZF;QACAF;QACAM,YAAY;YACV,4DAA4D;YAC5D,GAAGF,UAAUE,UAAU;YACvBC,OAAOZ,iBAAAA;QACT;QACAY,OAAOb,oBAAAA,CAAKc,QAAQ,CAACV,MAAMS,KAAK,EAAE;YAChCE,cAAcL,UAAUG,KAAK;YAC7BG,aAAaf,iBAAAA;QACf;IACF;AACF,EAAE;AASK,gCAAgC,CAACG,OAAyBC;IAC/D,MAAM,EAAEY,QAAQ,CAAC,EAAEC,gBAAgB,OAAO,EAAE,GAAGd;IAC/C,MAAMe,SAASrB,yBAAAA,EAAM;IAErB,MAAM,EAAEsB,OAAO,aAAa,EAAE,GAAGC,MAAM,GAAGjB;IAC1C,MAAMkB,aAAatB,oBAAAA,CAAKuB,MAAM,CAC5B1B,4CAAAA,EAAyB,OAAO;QAC9B,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FQ,KAAKA;QACLe;QACA,GAAGC,IAAI;IACT,IACA;QACEL,aAAa;IACf;IAEF,MAAM,CAACQ,mBAAmBC,qBAAqB,GAAG7B,OAAM8B,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,OAAG7B,0BAAAA;IAC7CH,OAAMiC,SAAS,CAAC;QACd,IAAIZ,SAAS,GAAG;YACd;QACF;QACAU,gBAAgB;YACdF,qBAAqB;QACvB,GAAGR;QACH,OAAO;YACLW;QACF;IACF,GAAG;QAACD;QAAiBC;QAAmBX;KAAM;IAC9C,MAAMa,iBAAiB9B,oBAAAA,CAAKc,QAAQ,CAACV,MAAMS,KAAK,EAAE;QAChDE,cAAc;YAAEgB,IAAIZ;QAAO;QAC3Ba,iBAAiB;QACjBhB,aAAa;IACf;IACA,MAAMiB,mBAAmBjC,oBAAAA,CAAKc,QAAQ,CAACV,MAAM8B,OAAO,EAAE;QACpDF,iBAAiB;QACjBhB,aAAa;IACf;IACA,IAAIc,kBAAkBR,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGQ,eAAeC,EAAE;IACnD;IACA,MAAMI,QAA0B;QAC9BlB;QACAC;QACAkB,qBAAqB,CAACnB,SAASO;QAC/BZ,YAAY;YAAEyB,MAAM;YAAOH,SAAS;YAAQI,aAAa;YAAQzB,OAAO;QAAQ;QAChFwB,MAAMf;QACNY,SAASD;QACTK,aAAatC,oBAAAA,CAAKuB,MAAM,CAACnB,MAAMkC,WAAW,EAAE;YAAEtB,aAAa;QAAO;QAClEH,OAAOiB;IACT;IACA,OAAOK;AACT,EAAE"}

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

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    spinnerClassNames: function() {
+    get spinnerClassNames () {
         return spinnerClassNames;
     },
-    useSpinnerStyles_unstable: function() {
+    get useSpinnerStyles_unstable () {
         return useSpinnerStyles_unstable;
     }
 });

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

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

package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.css.cjs

@@ -0,0 +1,47 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get spinnerClassNames () {
+        return spinnerClassNames;
+    },
+    get useSpinnerStyles_unstable () {
+        return useSpinnerStyles_unstable;
+    }
+});
+const _interop_require_default = require("@swc/helpers/_/_interop_require_default");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _clsx = require("clsx");
+const _Spinnermodulecss = /*#__PURE__*/ _interop_require_default._(require("./Spinner.module.css"));
+const spinnerClassNames = {
+    root: 'fui-Spinner',
+    spinner: 'fui-Spinner__spinner',
+    spinnerTail: 'fui-Spinner__spinnerTail',
+    label: 'fui-Spinner__label'
+};
+const useSpinnerStyles_unstable = (state)=>{
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    // eslint-disable-next-line react-hooks/immutability
+    state.root.className = (0, _clsx.clsx)(spinnerClassNames.root, _Spinnermodulecss.default.root, _Spinnermodulecss.default[state.labelPosition], _Spinnermodulecss.default[state.size], _Spinnermodulecss.default[state.appearance], state.root.className);
+    if (state.spinner) {
+        // eslint-disable-next-line react-hooks/immutability
+        state.spinner.className = (0, _clsx.clsx)(spinnerClassNames.spinner, _Spinnermodulecss.default.spinner, state.spinner.className);
+    }
+    if (state.spinnerTail) {
+        // eslint-disable-next-line react-hooks/immutability
+        state.spinnerTail.className = (0, _clsx.clsx)(spinnerClassNames.spinnerTail, _Spinnermodulecss.default.spinnerTail, dir === 'rtl' && _Spinnermodulecss.default.rtlTail, state.spinnerTail.className);
+    }
+    if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
+        state.label.className = (0, _clsx.clsx)(spinnerClassNames.label, _Spinnermodulecss.default.label, state.label.className);
+    }
+    return state;
+};

package/lib-commonjs/components/Spinner/useSpinnerStyles.styles.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Spinner/useSpinnerStyles.styles.css.ts"],"sourcesContent":["'use client';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport styles from './Spinner.module.css';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n  root: 'fui-Spinner',\n  spinner: 'fui-Spinner__spinner',\n  spinnerTail: 'fui-Spinner__spinnerTail',\n  label: 'fui-Spinner__label',\n};\n\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n  const { dir } = useFluent();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = clsx(\n    spinnerClassNames.root,\n    styles.root,\n    styles[state.labelPosition],\n    styles[state.size],\n    styles[state.appearance],\n    state.root.className,\n  );\n  if (state.spinner) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.spinner.className = clsx(spinnerClassNames.spinner, styles.spinner, state.spinner.className);\n  }\n  if (state.spinnerTail) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.spinnerTail.className = clsx(\n      spinnerClassNames.spinnerTail,\n      styles.spinnerTail,\n      dir === 'rtl' && styles.rtlTail,\n      state.spinnerTail.className,\n    );\n  }\n  if (state.label) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = clsx(spinnerClassNames.label, styles.label, state.label.className);\n  }\n  return state;\n};\n"],"names":["useFluent_unstable","useFluent","clsx","styles","spinnerClassNames","root","spinner","spinnerTail","label","useSpinnerStyles_unstable","state","dir","className","labelPosition","size","appearance","rtlTail"],"mappings":"AAAA;;;;;;;;;;;;QAOaI;;;;;;;;qCANmC,kCAAkC;sBAC7D,OAAO;2EAGT,uBAAuB;AAEnC,0BAAwD;IAC7DC,MAAM;IACNC,SAAS;IACTC,aAAa;IACbC,OAAO;AACT,EAAE;AAEK,MAAMC,4BAA4B,CAACC;IACxC,MAAM,EAAEC,GAAG,EAAE,OAAGV,uCAAAA;IAChB,oDAAoD;IACpDS,MAAML,IAAI,CAACO,SAAS,OAAGV,UAAAA,EACrBE,kBAAkBC,IAAI,EACtBF,yBAAAA,CAAOE,IAAI,EACXF,yBAAM,CAACO,MAAMG,aAAa,CAAC,EAC3BV,yBAAM,CAACO,MAAMI,IAAI,CAAC,EAClBX,yBAAM,CAACO,MAAMK,UAAU,CAAC,EACxBL,MAAML,IAAI,CAACO,SAAS;IAEtB,IAAIF,MAAMJ,OAAO,EAAE;QACjB,oDAAoD;QACpDI,MAAMJ,OAAO,CAACM,SAAS,OAAGV,UAAAA,EAAKE,kBAAkBE,OAAO,EAAEH,yBAAAA,CAAOG,OAAO,EAAEI,MAAMJ,OAAO,CAACM,SAAS;IACnG;IACA,IAAIF,MAAMH,WAAW,EAAE;QACrB,oDAAoD;QACpDG,MAAMH,WAAW,CAACK,SAAS,OAAGV,UAAAA,EAC5BE,kBAAkBG,WAAW,EAC7BJ,yBAAAA,CAAOI,WAAW,EAClBI,QAAQ,SAASR,yBAAAA,CAAOa,OAAO,EAC/BN,MAAMH,WAAW,CAACK,SAAS;IAE/B;IACA,IAAIF,MAAMF,KAAK,EAAE;QACf,oDAAoD;QACpDE,MAAMF,KAAK,CAACI,SAAS,OAAGV,UAAAA,EAAKE,kBAAkBI,KAAK,EAAEL,yBAAAA,CAAOK,KAAK,EAAEE,MAAMF,KAAK,CAACI,SAAS;IAC3F;IACA,OAAOF;AACT,EAAE"}