@fluentui/react-spinner 9.6.2 → 9.7.1

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-spinner
 
-This log was last generated on Thu, 26 Jun 2025 14:07:54 GMT and should not be manually modified.
+This log was last generated on Mon, 28 Jul 2025 18:44:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.7.1)
+
+Mon, 28 Jul 2025 18:44:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.7.0..@fluentui/react-spinner_v9.7.1)
+
+### Patches
+
+- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-label to v9.3.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
+
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.7.0)
+
+Thu, 17 Jul 2025 13:49:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.6.2..@fluentui/react-spinner_v9.7.0)
+
+### Minor changes
+
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-label to v9.3.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+
 ## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.6.2)
 
-Thu, 26 Jun 2025 14:07:54 GMT 
+Thu, 26 Jun 2025 14:11:55 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.6.1..@fluentui/react-spinner_v9.6.2)
 
 ### Patches

package/lib/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Spinner.ts"],"sourcesContent":["export type { SpinnerProps, SpinnerSlots, SpinnerState } from './components/Spinner/index';\nexport {\n  Spinner,\n  renderSpinner_unstable,\n  spinnerClassNames,\n  useSpinnerStyles_unstable,\n  useSpinner_unstable,\n} from './components/Spinner/index';\n"],"names":["Spinner","renderSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable","useSpinner_unstable"],"rangeMappings":"","mappings":"AACA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,QACd,6BAA6B"}
+{"version":3,"sources":["../src/Spinner.ts"],"sourcesContent":["export type { SpinnerProps, SpinnerSlots, SpinnerState } from './components/Spinner/index';\nexport {\n  Spinner,\n  renderSpinner_unstable,\n  spinnerClassNames,\n  useSpinnerStyles_unstable,\n  useSpinner_unstable,\n} from './components/Spinner/index';\n"],"names":["Spinner","renderSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable","useSpinner_unstable"],"mappings":"AACA,SACEA,OAAO,EACPC,sBAAsB,EACtBC,iBAAiB,EACjBC,yBAAyB,EACzBC,mBAAmB,QACd,6BAA6B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * 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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQR,oBAAoBM,OAAOC;IAEzCL,0BAA0BM;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOP,uBAAuBO;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * 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,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQR,oBAAoBM,OAAOC;IAEzCL,0BAA0BM;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOP,uBAAuBO;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/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', '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 * 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":[],"rangeMappings":";;","mappings":"AAuDA;;CAEC,GACD,WAMI"}
+{"version":3,"sources":["../src/components/Spinner/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', '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 * 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":"AAuDA;;CAEC,GACD,WAMI"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","useSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}
+{"version":3,"sources":["../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","useSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}

package/lib/components/Spinner/renderSpinner.js.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 { 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"],"rangeMappings":";;;;;;;;;;;;;;;;","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"}
+{"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 { 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.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/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', ...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    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","rest","nativeRoot","always","elementType","isShownAfterDelay","setIsShownAfterDelay","useState","setDelayTimeout","clearDelayTimeout","useEffect","labelShorthand","optional","label","defaultProps","id","renderByDefault","spinnerShortHand","spinner","state","shouldRenderSpinner","components","root","spinnerTail"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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,EAAE,GAAGC,MAAM,GAAGT;IAC1C,MAAMU,aAAad,KAAKe,MAAM,CAC5BlB,yBACE,OACA;QACE,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FQ,KAAKA;QACLO;QACA,GAAGC,IAAI;IACT,GACA;QAAC;KAAO,GAEV;QACEG,aAAa;IACf;IAEF,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGtB,MAAMuB,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,GAAGtB;IAC7CH,MAAM0B,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,iBAAiBvB,KAAKwB,QAAQ,CAACpB,MAAMqB,KAAK,EAAE;QAChDC,cAAc;YAAEC,IAAIhB;QAAO;QAC3BiB,iBAAiB;QACjBZ,aAAaf;IACf;IACA,MAAM4B,mBAAmB7B,KAAKwB,QAAQ,CAACpB,MAAM0B,OAAO,EAAE;QACpDF,iBAAiB;QACjBZ,aAAa;IACf;IACA,IAAIO,kBAAkBT,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGS,eAAeI,EAAE;IACnD;IACA,MAAMI,QAAsB;QAC1BvB;QACAE;QACAD;QACAH;QACA0B,qBAAqB,CAACtB,SAASO;QAC/BgB,YAAY;YAAEC,MAAM;YAAOJ,SAAS;YAAQK,aAAa;YAAQV,OAAOxB;QAAM;QAC9EiC,MAAMpB;QACNgB,SAASD;QACTM,aAAanC,KAAKe,MAAM,CAACX,MAAM+B,WAAW,EAAE;YAAEnB,aAAa;QAAO;QAClES,OAAOF;IACT;IACA,OAAOQ;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Spinner/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', ...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    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","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,EAAE,GAAGC,MAAM,GAAGT;IAC1C,MAAMU,aAAad,KAAKe,MAAM,CAC5BlB,yBACE,OACA;QACE,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FQ,KAAKA;QACLO;QACA,GAAGC,IAAI;IACT,GACA;QAAC;KAAO,GAEV;QACEG,aAAa;IACf;IAEF,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGtB,MAAMuB,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,GAAGtB;IAC7CH,MAAM0B,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,iBAAiBvB,KAAKwB,QAAQ,CAACpB,MAAMqB,KAAK,EAAE;QAChDC,cAAc;YAAEC,IAAIhB;QAAO;QAC3BiB,iBAAiB;QACjBZ,aAAaf;IACf;IACA,MAAM4B,mBAAmB7B,KAAKwB,QAAQ,CAACpB,MAAM0B,OAAO,EAAE;QACpDF,iBAAiB;QACjBZ,aAAa;IACf;IACA,IAAIO,kBAAkBT,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGS,eAAeI,EAAE;IACnD;IACA,MAAMI,QAAsB;QAC1BvB;QACAE;QACAD;QACAH;QACA0B,qBAAqB,CAACtB,SAASO;QAC/BgB,YAAY;YAAEC,MAAM;YAAOJ,SAAS;YAAQK,aAAa;YAAQV,OAAOxB;QAAM;QAC9EiC,MAAMpB;QACNgB,SAASD;QACTM,aAAanC,KAAKe,MAAM,CAACX,MAAM+B,WAAW,EAAE;YAAEnB,aAAa;QAAO;QAClES,OAAOF;IACT;IACA,OAAOQ;AACT,EAAE"}

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

@@ -0,0 +1,229 @@
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+export const spinnerClassNames = {
+    root: 'fui-Spinner',
+    spinner: 'fui-Spinner__spinner',
+    spinnerTail: 'fui-Spinner__spinnerTail',
+    label: 'fui-Spinner__label'
+};
+/**
+ * CSS variables used internally by Spinner
+ */ const vars = {
+    strokeWidth: '--fui-Spinner--strokeWidth'
+};
+const useRootBaseClassName = makeResetStyles({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    lineHeight: '0',
+    gap: '8px',
+    overflow: 'hidden'
+});
+const useRootStyles = makeStyles({
+    vertical: {
+        flexDirection: 'column'
+    }
+});
+const useSpinnerBaseClassName = makeResetStyles({
+    position: 'relative',
+    flexShrink: 0,
+    // Use a mask to create the ring shape of the spinner.
+    maskImage: `radial-gradient(closest-side, ` + `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` + `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`,
+    backgroundColor: tokens.colorBrandStroke2Contrast,
+    color: tokens.colorBrandStroke1,
+    '@media screen and (forced-colors: active)': {
+        backgroundColor: 'HighlightText',
+        color: 'Highlight',
+        forcedColorAdjust: 'none'
+    },
+    animationDuration: '1.5s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'linear',
+    animationName: {
+        '0%': {
+            transform: 'rotate(0deg)'
+        },
+        '100%': {
+            transform: 'rotate(360deg)'
+        }
+    },
+    '@media screen and (prefers-reduced-motion: reduce)': {
+        animationDuration: '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 = makeResetStyles({
+    position: 'absolute',
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    maskImage: 'conic-gradient(transparent 105deg, white 105deg)',
+    '&::before, &::after': {
+        content: '""',
+        position: 'absolute',
+        display: 'block',
+        width: '100%',
+        height: '100%',
+        animation: 'inherit',
+        backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)'
+    },
+    animationDuration: '1.5s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: tokens.curveEasyEase,
+    animationName: {
+        '0%': {
+            transform: 'rotate(-135deg)'
+        },
+        '50%': {
+            transform: 'rotate(0deg)'
+        },
+        '100%': {
+            transform: 'rotate(225deg)'
+        }
+    },
+    '&::before': {
+        animationName: {
+            '0%': {
+                transform: 'rotate(0deg)'
+            },
+            '50%': {
+                transform: 'rotate(105deg)'
+            },
+            '100%': {
+                transform: 'rotate(0deg)'
+            }
+        }
+    },
+    '&::after': {
+        animationName: {
+            '0%': {
+                transform: 'rotate(0deg)'
+            },
+            '50%': {
+                transform: 'rotate(225deg)'
+            },
+            '100%': {
+                transform: 'rotate(0deg)'
+            }
+        }
+    },
+    '@media screen and (prefers-reduced-motion: reduce)': {
+        animationIterationCount: '0',
+        backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',
+        '&::before, &::after': {
+            content: 'none'
+        }
+    }
+});
+const useSpinnerStyles = makeStyles({
+    inverted: {
+        backgroundColor: tokens.colorNeutralStrokeAlpha2,
+        color: tokens.colorNeutralStrokeOnBrand2
+    },
+    rtlTail: {
+        maskImage: 'conic-gradient(white 255deg, transparent 255deg)',
+        '&::before, &::after': {
+            backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)'
+        },
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)'
+        }
+    },
+    'extra-tiny': {
+        height: '16px',
+        width: '16px',
+        [vars.strokeWidth]: tokens.strokeWidthThick
+    },
+    tiny: {
+        height: '20px',
+        width: '20px',
+        [vars.strokeWidth]: tokens.strokeWidthThick
+    },
+    'extra-small': {
+        height: '24px',
+        width: '24px',
+        [vars.strokeWidth]: tokens.strokeWidthThick
+    },
+    small: {
+        height: '28px',
+        width: '28px',
+        [vars.strokeWidth]: tokens.strokeWidthThick
+    },
+    medium: {
+        height: '32px',
+        width: '32px',
+        [vars.strokeWidth]: tokens.strokeWidthThicker
+    },
+    large: {
+        height: '36px',
+        width: '36px',
+        [vars.strokeWidth]: tokens.strokeWidthThicker
+    },
+    'extra-large': {
+        height: '40px',
+        width: '40px',
+        [vars.strokeWidth]: tokens.strokeWidthThicker
+    },
+    huge: {
+        height: '44px',
+        width: '44px',
+        [vars.strokeWidth]: tokens.strokeWidthThickest
+    }
+});
+const useLabelStyles = makeStyles({
+    inverted: {
+        color: tokens.colorNeutralForegroundStaticInverted
+    },
+    'extra-tiny': {
+        ...typographyStyles.body1
+    },
+    tiny: {
+        ...typographyStyles.body1
+    },
+    'extra-small': {
+        ...typographyStyles.body1
+    },
+    small: {
+        ...typographyStyles.body1
+    },
+    medium: {
+        ...typographyStyles.subtitle2
+    },
+    large: {
+        ...typographyStyles.subtitle2
+    },
+    'extra-large': {
+        ...typographyStyles.subtitle2
+    },
+    huge: {
+        ...typographyStyles.subtitle1
+    }
+});
+/**
+ * Apply styling to the Spinner slots based on the state
+ */ export const useSpinnerStyles_unstable = (state)=>{
+    'use no memo';
+    const { labelPosition, size, appearance } = state;
+    const { dir } = useFluent();
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    const spinnerBaseClassName = useSpinnerBaseClassName();
+    const spinnerStyles = useSpinnerStyles();
+    const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
+    const labelStyles = useLabelStyles();
+    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, 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], appearance === 'inverted' && labelStyles.inverted, state.label.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Spinner/useSpinnerStyles.styles.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SpinnerSlots, SpinnerState } from './Spinner.types';\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\n/**\n * CSS variables used internally by Spinner\n */\nconst vars = {\n  strokeWidth: '--fui-Spinner--strokeWidth',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  lineHeight: '0',\n  gap: '8px',\n  overflow: 'hidden', // prevents height changes from rotating children\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useSpinnerBaseClassName = makeResetStyles({\n  position: 'relative',\n  flexShrink: 0,\n\n  // Use a mask to create the ring shape of the spinner.\n  maskImage:\n    `radial-gradient(closest-side, ` +\n    `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` +\n    `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` +\n    `transparent 100%)`,\n\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\n  animationDuration: '1.5s',\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'linear',\n  animationName: {\n    '0%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(360deg)' },\n  },\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    animationDuration: '1.8s',\n  },\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\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\n  animationDuration: '1.5s',\n  animationIterationCount: 'infinite',\n  animationTimingFunction: tokens.curveEasyEase,\n  animationName: {\n    '0%': { transform: 'rotate(-135deg)' },\n    '50%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(225deg)' },\n  },\n  '&::before': {\n    animationName: {\n      '0%': { transform: 'rotate(0deg)' },\n      '50%': { transform: 'rotate(105deg)' },\n      '100%': { transform: 'rotate(0deg)' },\n    },\n  },\n  '&::after': {\n    animationName: {\n      '0%': { transform: 'rotate(0deg)' },\n      '50%': { transform: 'rotate(225deg)' },\n      '100%': { transform: 'rotate(0deg)' },\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});\n\nconst useSpinnerStyles = makeStyles({\n  inverted: {\n    backgroundColor: tokens.colorNeutralStrokeAlpha2,\n    color: tokens.colorNeutralStrokeOnBrand2,\n  },\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\n  'extra-tiny': {\n    height: '16px',\n    width: '16px',\n    [vars.strokeWidth]: tokens.strokeWidthThick,\n  },\n\n  tiny: {\n    height: '20px',\n    width: '20px',\n    [vars.strokeWidth]: tokens.strokeWidthThick,\n  },\n\n  'extra-small': {\n    height: '24px',\n    width: '24px',\n    [vars.strokeWidth]: tokens.strokeWidthThick,\n  },\n\n  small: {\n    height: '28px',\n    width: '28px',\n    [vars.strokeWidth]: tokens.strokeWidthThick,\n  },\n\n  medium: {\n    height: '32px',\n    width: '32px',\n    [vars.strokeWidth]: tokens.strokeWidthThicker,\n  },\n\n  large: {\n    height: '36px',\n    width: '36px',\n    [vars.strokeWidth]: tokens.strokeWidthThicker,\n  },\n\n  'extra-large': {\n    height: '40px',\n    width: '40px',\n    [vars.strokeWidth]: tokens.strokeWidthThicker,\n  },\n\n  huge: {\n    height: '44px',\n    width: '44px',\n    [vars.strokeWidth]: tokens.strokeWidthThickest,\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  inverted: {\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n\n  'extra-tiny': {\n    ...typographyStyles.body1,\n  },\n\n  tiny: {\n    ...typographyStyles.body1,\n  },\n\n  'extra-small': {\n    ...typographyStyles.body1,\n  },\n\n  small: {\n    ...typographyStyles.body1,\n  },\n\n  medium: {\n    ...typographyStyles.subtitle2,\n  },\n\n  large: {\n    ...typographyStyles.subtitle2,\n  },\n\n  'extra-large': {\n    ...typographyStyles.subtitle2,\n  },\n\n  huge: {\n    ...typographyStyles.subtitle1,\n  },\n});\n\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n  'use no memo';\n\n  const { labelPosition, size, appearance } = state;\n  const { dir } = useFluent();\n\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\n  state.root.className = mergeClasses(\n    spinnerClassNames.root,\n    rootBaseClassName,\n    (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n    state.root.className,\n  );\n  if (state.spinner) {\n    state.spinner.className = mergeClasses(\n      spinnerClassNames.spinner,\n      spinnerBaseClassName,\n      spinnerStyles[size],\n      appearance === 'inverted' && spinnerStyles.inverted,\n      state.spinner.className,\n    );\n  }\n  if (state.spinnerTail) {\n    state.spinnerTail.className = mergeClasses(\n      spinnerClassNames.spinnerTail,\n      spinnerTailBaseClassName,\n      dir === 'rtl' && spinnerStyles.rtlTail,\n      state.spinnerTail.className,\n    );\n  }\n  if (state.label) {\n    state.label.className = mergeClasses(\n      spinnerClassNames.label,\n      labelStyles[size],\n      appearance === 'inverted' && labelStyles.inverted,\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["useFluent_unstable","useFluent","tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","spinnerClassNames","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","display","alignItems","justifyContent","lineHeight","gap","overflow","useRootStyles","vertical","flexDirection","useSpinnerBaseClassName","position","flexShrink","maskImage","backgroundColor","colorBrandStroke2Contrast","color","colorBrandStroke1","forcedColorAdjust","animationDuration","animationIterationCount","animationTimingFunction","animationName","transform","useSpinnerTailBaseClassName","width","height","content","animation","backgroundImage","curveEasyEase","useSpinnerStyles","inverted","colorNeutralStrokeAlpha2","colorNeutralStrokeOnBrand2","rtlTail","strokeWidthThick","tiny","small","medium","strokeWidthThicker","large","huge","strokeWidthThickest","useLabelStyles","colorNeutralForegroundStaticInverted","body1","subtitle2","subtitle1","useSpinnerStyles_unstable","state","labelPosition","size","appearance","dir","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className"],"mappings":"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"}

package/lib/contexts/SpinnerContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/SpinnerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { SpinnerProps } from '../components/Spinner/Spinner.types';\n\nconst SpinnerContext = React.createContext<SpinnerContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport type SpinnerContextValue = Pick<SpinnerProps, 'size'>;\n\nconst SpinnerContextDefaultValue: SpinnerContextValue = {};\n\n/**\n * @internal\n */\nexport const SpinnerContextProvider = SpinnerContext.Provider;\n\n/**\n * @internal\n */\nexport const useSpinnerContext = () => React.useContext(SpinnerContext) ?? SpinnerContextDefaultValue;\n"],"names":["React","SpinnerContext","createContext","undefined","SpinnerContextDefaultValue","SpinnerContextProvider","Provider","useSpinnerContext","useContext"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,iBAAiBD,MAAME,aAAa,CAAkCC;AAO5E,MAAMC,6BAAkD,CAAC;AAEzD;;CAEC,GACD,OAAO,MAAMC,yBAAyBJ,eAAeK,QAAQ,CAAC;AAE9D;;CAEC,GACD,OAAO,MAAMC,oBAAoB;QAAMP;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,6BAAjBD,+BAAAA,oBAAoCI;AAAyB,EAAE"}
+{"version":3,"sources":["../src/contexts/SpinnerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { SpinnerProps } from '../components/Spinner/Spinner.types';\n\nconst SpinnerContext = React.createContext<SpinnerContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport type SpinnerContextValue = Pick<SpinnerProps, 'size'>;\n\nconst SpinnerContextDefaultValue: SpinnerContextValue = {};\n\n/**\n * @internal\n */\nexport const SpinnerContextProvider = SpinnerContext.Provider;\n\n/**\n * @internal\n */\nexport const useSpinnerContext = () => React.useContext(SpinnerContext) ?? SpinnerContextDefaultValue;\n"],"names":["React","SpinnerContext","createContext","undefined","SpinnerContextDefaultValue","SpinnerContextProvider","Provider","useSpinnerContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,iBAAiBD,MAAME,aAAa,CAAkCC;AAO5E,MAAMC,6BAAkD,CAAC;AAEzD;;CAEC,GACD,OAAO,MAAMC,yBAAyBJ,eAAeK,QAAQ,CAAC;AAE9D;;CAEC,GACD,OAAO,MAAMC,oBAAoB;QAAMP;WAAAA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACP,6BAAjBD,+BAAAA,oBAAoCI;EAA2B"}

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"],"rangeMappings":"","mappings":"AACA,SAASA,sBAAsB,EAAEC,iBAAiB,QAAQ,mBAAmB"}
+{"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,mBAAmB"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\nexport { SpinnerContextProvider, useSpinnerContext } from './contexts/index';\nexport type { SpinnerContextValue } from './contexts/index';\n"],"names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable","SpinnerContextProvider","useSpinnerContext"],"rangeMappings":";","mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,mBAAmB,EACnBC,yBAAyB,QACpB,YAAY;AAEnB,SAASC,sBAAsB,EAAEC,iBAAiB,QAAQ,mBAAmB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\nexport { SpinnerContextProvider, useSpinnerContext } from './contexts/index';\nexport type { SpinnerContextValue } from './contexts/index';\n"],"names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable","SpinnerContextProvider","useSpinnerContext"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,mBAAmB,EACnBC,yBAAyB,QACpB,YAAY;AAEnB,SAASC,sBAAsB,EAAEC,iBAAiB,QAAQ,mBAAmB"}

package/lib-commonjs/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Spinner.ts"],"sourcesContent":["export type { SpinnerProps, SpinnerSlots, SpinnerState } from './components/Spinner/index';\nexport {\n  Spinner,\n  renderSpinner_unstable,\n  spinnerClassNames,\n  useSpinnerStyles_unstable,\n  useSpinner_unstable,\n} from './components/Spinner/index';\n"],"names":["Spinner","renderSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable","useSpinner_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,OAAO;eAAPA,cAAO;;IACPC,sBAAsB;eAAtBA,6BAAsB;;IACtBC,iBAAiB;eAAjBA,wBAAiB;;IACjBC,yBAAyB;eAAzBA,gCAAyB;;IACzBC,mBAAmB;eAAnBA,0BAAmB;;;uBACd"}
+{"version":3,"sources":["../src/Spinner.ts"],"sourcesContent":["export type { SpinnerProps, SpinnerSlots, SpinnerState } from './components/Spinner/index';\nexport {\n  Spinner,\n  renderSpinner_unstable,\n  spinnerClassNames,\n  useSpinnerStyles_unstable,\n  useSpinner_unstable,\n} from './components/Spinner/index';\n"],"names":["Spinner","renderSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable","useSpinner_unstable"],"mappings":";;;;;;;;;;;;eAEEA,cAAO;;;eACPC,6BAAsB;;;eACtBC,wBAAiB;;;eACjBC,gCAAyB;;;eACzBC,0BAAmB;;;uBACd,6BAA6B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * 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":["Spinner","React","forwardRef","props","ref","state","useSpinner_unstable","useSpinnerStyles_unstable","useCustomStyleHook_unstable","renderSpinner_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;4BACa;+BACG;wCACG;qCAGE;AAKrC,MAAMA,UAAAA,WAAAA,GAA6CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBH,OAAOC;IAEzCG,IAAAA,iDAAAA,EAA0BF;IAE1BG,IAAAA,gDAAAA,EAA4B,6BAA6BH;IAEzD,OAAOI,IAAAA,qCAAAA,EAAuBJ;AAChC;AAEAL,QAAQU,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import * 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":";;;;+BAWaK;;;;;;;iEAXU,QAAQ;4BACK,eAAe;+BACZ,kBAAkB;wCACf,4BAA4B;qCAG1B,kCAAkC;AAKvE,gBAAMA,WAAAA,GAA6CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQR,mCAAAA,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.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/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', '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 * 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":[],"rangeMappings":";;","mappings":"AAuDA;;CAEC"}
+{"version":3,"sources":["../src/components/Spinner/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', '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 * 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":"AAuDA;;CAEC,GACD,WAMI"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable","useSpinner_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,OAAO;eAAPA,gBAAO;;IAEPC,sBAAsB;eAAtBA,qCAAsB;;IAEtBC,iBAAiB;eAAjBA,yCAAiB;;IAAEC,yBAAyB;eAAzBA,iDAAyB;;IAD5CC,mBAAmB;eAAnBA,+BAAmB;;;yBAHJ;+BAEe;4BACH;wCACyB"}
+{"version":3,"sources":["../src/components/Spinner/index.ts"],"sourcesContent":["export { Spinner } from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner.types';\nexport { renderSpinner_unstable } from './renderSpinner';\nexport { useSpinner_unstable } from './useSpinner';\nexport { spinnerClassNames, useSpinnerStyles_unstable } from './useSpinnerStyles.styles';\n"],"names":["Spinner","renderSpinner_unstable","useSpinner_unstable","spinnerClassNames","useSpinnerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAEPC,qCAAsB;;;eAEtBE,yCAAiB;;;eAAEC,iDAAyB;;;eAD5CF,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACrB,eAAe;wCACU,4BAA4B"}

package/lib-commonjs/components/Spinner/renderSpinner.js.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 { 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":["renderSpinner_unstable","state","assertSlots","labelPosition","shouldRenderSpinner","_jsxs","root","label","_jsx","spinner","spinnerTail"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,yBAAyB,CAACC;IACrCC,IAAAA,2BAAAA,EAA0BD;IAC1B,MAAM,EAAEE,aAAa,EAAEC,mBAAmB,EAAE,GAAGH;IAC/C,OAAA,WAAA,GACEI,IAAAA,gBAAA,EAACJ,MAAMK,IAAI,EAAA;;YACRL,MAAMM,KAAK,IAAIH,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,QAAA,KAAO,WAAA,GAC5FK,IAAAA,eAAA,EAACP,MAAMM,KAAK,EAAA,CAAA;YAEbN,MAAMQ,OAAO,IAAIL,uBAAAA,WAAAA,GAChBI,IAAAA,eAAA,EAACP,MAAMQ,OAAO,EAAA;0BAAER,MAAMS,WAAW,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACP,MAAMS,WAAW,EAAA,CAAA;;YAExDT,MAAMM,KAAK,IAAIH,uBAAwBD,CAAAA,kBAAkB,WAAWA,kBAAkB,OAAA,KAAM,WAAA,GAC3FK,IAAAA,eAAA,EAACP,MAAMM,KAAK,EAAA,CAAA;;;AAIpB"}
+{"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 { 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":";;;;+BASaC;;;;;;4BARb,iCAAiD;gCAErB,4BAA4B;AAMjD,+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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Spinner/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', ...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    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":["useSpinner_unstable","props","ref","size","contextSize","useSpinnerContext","appearance","labelPosition","delay","baseId","useId","role","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;gCAC2C;4BAE5C;gCACY;AAW3B,MAAMA,sBAAsB,CAACC,OAAqBC;IACvD,QAAQ;IACR,MAAM,EAAEC,MAAMC,WAAW,EAAE,GAAGC,IAAAA,iCAAAA;IAC9B,MAAM,EAAEC,aAAa,SAAS,EAAEC,gBAAgB,OAAO,EAAEJ,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAEI,QAAQ,CAAC,EAAE,GAAGP;IACvG,MAAMQ,SAASC,IAAAA,qBAAAA,EAAM;IAErB,MAAM,EAAEC,OAAO,aAAa,EAAE,GAAGC,MAAM,GAAGX;IAC1C,MAAMY,aAAaC,oBAAAA,CAAKC,MAAM,CAC5BC,IAAAA,wCAAAA,EACE,OACA;QACE,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5Fd,KAAKA;QACLS;QACA,GAAGC,IAAI;IACT,GACA;QAAC;KAAO,GAEV;QACEK,aAAa;IACf;IAEF,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGC,OAAMC,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,GAAGC,IAAAA,0BAAAA;IAC7CJ,OAAMK,SAAS,CAAC;QACd,IAAIjB,SAAS,GAAG;YACd;QACF;QACAc,gBAAgB;YACdH,qBAAqB;QACvB,GAAGX;QACH,OAAO;YACLe;QACF;IACF,GAAG;QAACD;QAAiBC;QAAmBf;KAAM;IAC9C,MAAMkB,iBAAiBZ,oBAAAA,CAAKa,QAAQ,CAAC1B,MAAM2B,KAAK,EAAE;QAChDC,cAAc;YAAEC,IAAIrB;QAAO;QAC3BsB,iBAAiB;QACjBd,aAAae,iBAAAA;IACf;IACA,MAAMC,mBAAmBnB,oBAAAA,CAAKa,QAAQ,CAAC1B,MAAMiC,OAAO,EAAE;QACpDH,iBAAiB;QACjBd,aAAa;IACf;IACA,IAAIS,kBAAkBb,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGa,eAAeI,EAAE;IACnD;IACA,MAAMK,QAAsB;QAC1B7B;QACAE;QACAD;QACAJ;QACAiC,qBAAqB,CAAC5B,SAASU;QAC/BmB,YAAY;YAAEC,MAAM;YAAOJ,SAAS;YAAQK,aAAa;YAAQX,OAAOI,iBAAAA;QAAM;QAC9EM,MAAMzB;QACNqB,SAASD;QACTM,aAAazB,oBAAAA,CAAKC,MAAM,CAACd,MAAMsC,WAAW,EAAE;YAAEtB,aAAa;QAAO;QAClEW,OAAOF;IACT;IACA,OAAOS;AACT"}
+{"version":3,"sources":["../src/components/Spinner/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', ...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    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","rest","nativeRoot","always","elementType","isShownAfterDelay","setIsShownAfterDelay","useState","setDelayTimeout","clearDelayTimeout","useEffect","labelShorthand","optional","label","defaultProps","id","renderByDefault","spinnerShortHand","spinner","state","shouldRenderSpinner","components","root","spinnerTail"],"mappings":";;;;+BAeaO;;;;;;;iEAfU,QAAQ;gCACmC,4BAA4B;4BAExE,wBAAwB;gCACZ,gCAAgC;AAW3D,4BAA4B,CAACC,OAAqBC;IACvD,QAAQ;IACR,MAAM,EAAEC,MAAMC,WAAW,EAAE,OAAGL,iCAAAA;IAC9B,MAAM,EAAEM,aAAa,SAAS,EAAEC,gBAAgB,OAAO,EAAEH,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAEG,QAAQ,CAAC,EAAE,GAAGN;IACvG,MAAMO,aAASb,qBAAAA,EAAM;IAErB,MAAM,EAAEc,OAAO,aAAa,EAAE,GAAGC,MAAM,GAAGT;IAC1C,MAAMU,aAAad,oBAAAA,CAAKe,MAAM,KAC5BlB,wCAAAA,EACE,OACA;QACE,SAAS;QACT,4EAA4E;QAC5E,4FAA4F;QAC5FQ,KAAKA;QACLO;QACA,GAAGC,IAAI;IACT,GACA;QAAC;KAAO,GAEV;QACEG,aAAa;IACf;IAEF,MAAM,CAACC,mBAAmBC,qBAAqB,GAAGtB,OAAMuB,QAAQ,CAAC;IACjE,MAAM,CAACC,iBAAiBC,kBAAkB,OAAGtB,0BAAAA;IAC7CH,OAAM0B,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,iBAAiBvB,oBAAAA,CAAKwB,QAAQ,CAACpB,MAAMqB,KAAK,EAAE;QAChDC,cAAc;YAAEC,IAAIhB;QAAO;QAC3BiB,iBAAiB;QACjBZ,aAAaf,iBAAAA;IACf;IACA,MAAM4B,mBAAmB7B,oBAAAA,CAAKwB,QAAQ,CAACpB,MAAM0B,OAAO,EAAE;QACpDF,iBAAiB;QACjBZ,aAAa;IACf;IACA,IAAIO,kBAAkBT,cAAc,CAACA,UAAU,CAAC,kBAAkB,EAAE;QAClEA,UAAU,CAAC,kBAAkB,GAAGS,eAAeI,EAAE;IACnD;IACA,MAAMI,QAAsB;QAC1BvB;QACAE;QACAD;QACAH;QACA0B,qBAAqB,CAACtB,SAASO;QAC/BgB,YAAY;YAAEC,MAAM;YAAOJ,SAAS;YAAQK,aAAa;YAAQV,OAAOxB,iBAAAA;QAAM;QAC9EiC,MAAMpB;QACNgB,SAASD;QACTM,aAAanC,oBAAAA,CAAKe,MAAM,CAACX,MAAM+B,WAAW,EAAE;YAAEnB,aAAa;QAAO;QAClES,OAAOF;IACT;IACA,OAAOQ;AACT,EAAE"}

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

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

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

@@ -0,0 +1,245 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    spinnerClassNames: function() {
+        return spinnerClassNames;
+    },
+    useSpinnerStyles_unstable: function() {
+        return useSpinnerStyles_unstable;
+    }
+});
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const spinnerClassNames = {
+    root: 'fui-Spinner',
+    spinner: 'fui-Spinner__spinner',
+    spinnerTail: 'fui-Spinner__spinnerTail',
+    label: 'fui-Spinner__label'
+};
+/**
+ * CSS variables used internally by Spinner
+ */ const vars = {
+    strokeWidth: '--fui-Spinner--strokeWidth'
+};
+const useRootBaseClassName = (0, _react.makeResetStyles)({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    lineHeight: '0',
+    gap: '8px',
+    overflow: 'hidden'
+});
+const useRootStyles = (0, _react.makeStyles)({
+    vertical: {
+        flexDirection: 'column'
+    }
+});
+const useSpinnerBaseClassName = (0, _react.makeResetStyles)({
+    position: 'relative',
+    flexShrink: 0,
+    // Use a mask to create the ring shape of the spinner.
+    maskImage: `radial-gradient(closest-side, ` + `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` + `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` + `transparent 100%)`,
+    backgroundColor: _reacttheme.tokens.colorBrandStroke2Contrast,
+    color: _reacttheme.tokens.colorBrandStroke1,
+    '@media screen and (forced-colors: active)': {
+        backgroundColor: 'HighlightText',
+        color: 'Highlight',
+        forcedColorAdjust: 'none'
+    },
+    animationDuration: '1.5s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'linear',
+    animationName: {
+        '0%': {
+            transform: 'rotate(0deg)'
+        },
+        '100%': {
+            transform: 'rotate(360deg)'
+        }
+    },
+    '@media screen and (prefers-reduced-motion: reduce)': {
+        animationDuration: '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 = (0, _react.makeResetStyles)({
+    position: 'absolute',
+    display: 'block',
+    width: '100%',
+    height: '100%',
+    maskImage: 'conic-gradient(transparent 105deg, white 105deg)',
+    '&::before, &::after': {
+        content: '""',
+        position: 'absolute',
+        display: 'block',
+        width: '100%',
+        height: '100%',
+        animation: 'inherit',
+        backgroundImage: 'conic-gradient(currentcolor 135deg, transparent 135deg)'
+    },
+    animationDuration: '1.5s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: _reacttheme.tokens.curveEasyEase,
+    animationName: {
+        '0%': {
+            transform: 'rotate(-135deg)'
+        },
+        '50%': {
+            transform: 'rotate(0deg)'
+        },
+        '100%': {
+            transform: 'rotate(225deg)'
+        }
+    },
+    '&::before': {
+        animationName: {
+            '0%': {
+                transform: 'rotate(0deg)'
+            },
+            '50%': {
+                transform: 'rotate(105deg)'
+            },
+            '100%': {
+                transform: 'rotate(0deg)'
+            }
+        }
+    },
+    '&::after': {
+        animationName: {
+            '0%': {
+                transform: 'rotate(0deg)'
+            },
+            '50%': {
+                transform: 'rotate(225deg)'
+            },
+            '100%': {
+                transform: 'rotate(0deg)'
+            }
+        }
+    },
+    '@media screen and (prefers-reduced-motion: reduce)': {
+        animationIterationCount: '0',
+        backgroundImage: 'conic-gradient(transparent 120deg, currentcolor 360deg)',
+        '&::before, &::after': {
+            content: 'none'
+        }
+    }
+});
+const useSpinnerStyles = (0, _react.makeStyles)({
+    inverted: {
+        backgroundColor: _reacttheme.tokens.colorNeutralStrokeAlpha2,
+        color: _reacttheme.tokens.colorNeutralStrokeOnBrand2
+    },
+    rtlTail: {
+        maskImage: 'conic-gradient(white 255deg, transparent 255deg)',
+        '&::before, &::after': {
+            backgroundImage: 'conic-gradient(transparent 225deg, currentcolor 225deg)'
+        },
+        '@media screen and (prefers-reduced-motion: reduce)': {
+            backgroundImage: 'conic-gradient(currentcolor 0deg, transparent 240deg)'
+        }
+    },
+    'extra-tiny': {
+        height: '16px',
+        width: '16px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
+    },
+    tiny: {
+        height: '20px',
+        width: '20px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
+    },
+    'extra-small': {
+        height: '24px',
+        width: '24px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
+    },
+    small: {
+        height: '28px',
+        width: '28px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThick
+    },
+    medium: {
+        height: '32px',
+        width: '32px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThicker
+    },
+    large: {
+        height: '36px',
+        width: '36px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThicker
+    },
+    'extra-large': {
+        height: '40px',
+        width: '40px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThicker
+    },
+    huge: {
+        height: '44px',
+        width: '44px',
+        [vars.strokeWidth]: _reacttheme.tokens.strokeWidthThickest
+    }
+});
+const useLabelStyles = (0, _react.makeStyles)({
+    inverted: {
+        color: _reacttheme.tokens.colorNeutralForegroundStaticInverted
+    },
+    'extra-tiny': {
+        ..._reacttheme.typographyStyles.body1
+    },
+    tiny: {
+        ..._reacttheme.typographyStyles.body1
+    },
+    'extra-small': {
+        ..._reacttheme.typographyStyles.body1
+    },
+    small: {
+        ..._reacttheme.typographyStyles.body1
+    },
+    medium: {
+        ..._reacttheme.typographyStyles.subtitle2
+    },
+    large: {
+        ..._reacttheme.typographyStyles.subtitle2
+    },
+    'extra-large': {
+        ..._reacttheme.typographyStyles.subtitle2
+    },
+    huge: {
+        ..._reacttheme.typographyStyles.subtitle1
+    }
+});
+const useSpinnerStyles_unstable = (state)=>{
+    'use no memo';
+    const { labelPosition, size, appearance } = state;
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    const spinnerBaseClassName = useSpinnerBaseClassName();
+    const spinnerStyles = useSpinnerStyles();
+    const spinnerTailBaseClassName = useSpinnerTailBaseClassName();
+    const labelStyles = useLabelStyles();
+    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, 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], appearance === 'inverted' && labelStyles.inverted, state.label.className);
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Spinner/useSpinnerStyles.styles.ts"],"sourcesContent":["import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SpinnerSlots, SpinnerState } from './Spinner.types';\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\n/**\n * CSS variables used internally by Spinner\n */\nconst vars = {\n  strokeWidth: '--fui-Spinner--strokeWidth',\n};\n\nconst useRootBaseClassName = makeResetStyles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  lineHeight: '0',\n  gap: '8px',\n  overflow: 'hidden', // prevents height changes from rotating children\n});\n\nconst useRootStyles = makeStyles({\n  vertical: {\n    flexDirection: 'column',\n  },\n});\n\nconst useSpinnerBaseClassName = makeResetStyles({\n  position: 'relative',\n  flexShrink: 0,\n\n  // Use a mask to create the ring shape of the spinner.\n  maskImage:\n    `radial-gradient(closest-side, ` +\n    `transparent calc(100% - var(${vars.strokeWidth}) - 1px), ` +\n    `white calc(100% - var(${vars.strokeWidth})) calc(100% - 1px), ` +\n    `transparent 100%)`,\n\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\n  animationDuration: '1.5s',\n  animationIterationCount: 'infinite',\n  animationTimingFunction: 'linear',\n  animationName: {\n    '0%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(360deg)' },\n  },\n\n  '@media screen and (prefers-reduced-motion: reduce)': {\n    animationDuration: '1.8s',\n  },\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\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\n  animationDuration: '1.5s',\n  animationIterationCount: 'infinite',\n  animationTimingFunction: tokens.curveEasyEase,\n  animationName: {\n    '0%': { transform: 'rotate(-135deg)' },\n    '50%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(225deg)' },\n  },\n  '&::before': {\n    animationName: {\n      '0%': { transform: 'rotate(0deg)' },\n      '50%': { transform: 'rotate(105deg)' },\n      '100%': { transform: 'rotate(0deg)' },\n    },\n  },\n  '&::after': {\n    animationName: {\n      '0%': { transform: 'rotate(0deg)' },\n      '50%': { transform: 'rotate(225deg)' },\n      '100%': { transform: 'rotate(0deg)' },\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});\n\nconst useSpinnerStyles = makeStyles({\n  inverted: {\n    backgroundColor: tokens.colorNeutralStrokeAlpha2,\n    color: tokens.colorNeutralStrokeOnBrand2,\n  },\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\n  'extra-tiny': {\n    height: '16px',\n    width: '16px',\n    [vars.strokeWidth]: tokens.strokeWidthThick,\n  },\n\n  tiny: {\n    height: '20px',\n    width: '20px',\n    [vars.strokeWidth]: tokens.strokeWidthThick,\n  },\n\n  'extra-small': {\n    height: '24px',\n    width: '24px',\n    [vars.strokeWidth]: tokens.strokeWidthThick,\n  },\n\n  small: {\n    height: '28px',\n    width: '28px',\n    [vars.strokeWidth]: tokens.strokeWidthThick,\n  },\n\n  medium: {\n    height: '32px',\n    width: '32px',\n    [vars.strokeWidth]: tokens.strokeWidthThicker,\n  },\n\n  large: {\n    height: '36px',\n    width: '36px',\n    [vars.strokeWidth]: tokens.strokeWidthThicker,\n  },\n\n  'extra-large': {\n    height: '40px',\n    width: '40px',\n    [vars.strokeWidth]: tokens.strokeWidthThicker,\n  },\n\n  huge: {\n    height: '44px',\n    width: '44px',\n    [vars.strokeWidth]: tokens.strokeWidthThickest,\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  inverted: {\n    color: tokens.colorNeutralForegroundStaticInverted,\n  },\n\n  'extra-tiny': {\n    ...typographyStyles.body1,\n  },\n\n  tiny: {\n    ...typographyStyles.body1,\n  },\n\n  'extra-small': {\n    ...typographyStyles.body1,\n  },\n\n  small: {\n    ...typographyStyles.body1,\n  },\n\n  medium: {\n    ...typographyStyles.subtitle2,\n  },\n\n  large: {\n    ...typographyStyles.subtitle2,\n  },\n\n  'extra-large': {\n    ...typographyStyles.subtitle2,\n  },\n\n  huge: {\n    ...typographyStyles.subtitle1,\n  },\n});\n\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n  'use no memo';\n\n  const { labelPosition, size, appearance } = state;\n  const { dir } = useFluent();\n\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\n  state.root.className = mergeClasses(\n    spinnerClassNames.root,\n    rootBaseClassName,\n    (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n    state.root.className,\n  );\n  if (state.spinner) {\n    state.spinner.className = mergeClasses(\n      spinnerClassNames.spinner,\n      spinnerBaseClassName,\n      spinnerStyles[size],\n      appearance === 'inverted' && spinnerStyles.inverted,\n      state.spinner.className,\n    );\n  }\n  if (state.spinnerTail) {\n    state.spinnerTail.className = mergeClasses(\n      spinnerClassNames.spinnerTail,\n      spinnerTailBaseClassName,\n      dir === 'rtl' && spinnerStyles.rtlTail,\n      state.spinnerTail.className,\n    );\n  }\n  if (state.label) {\n    state.label.className = mergeClasses(\n      spinnerClassNames.label,\n      labelStyles[size],\n      appearance === 'inverted' && labelStyles.inverted,\n      state.label.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["useFluent_unstable","useFluent","tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","spinnerClassNames","root","spinner","spinnerTail","label","vars","strokeWidth","useRootBaseClassName","display","alignItems","justifyContent","lineHeight","gap","overflow","useRootStyles","vertical","flexDirection","useSpinnerBaseClassName","position","flexShrink","maskImage","backgroundColor","colorBrandStroke2Contrast","color","colorBrandStroke1","forcedColorAdjust","animationDuration","animationIterationCount","animationTimingFunction","animationName","transform","useSpinnerTailBaseClassName","width","height","content","animation","backgroundImage","curveEasyEase","useSpinnerStyles","inverted","colorNeutralStrokeAlpha2","colorNeutralStrokeOnBrand2","rtlTail","strokeWidthThick","tiny","small","medium","strokeWidthThicker","large","huge","strokeWidthThickest","useLabelStyles","colorNeutralForegroundStaticInverted","body1","subtitle2","subtitle1","useSpinnerStyles_unstable","state","labelPosition","size","appearance","dir","rootBaseClassName","rootStyles","spinnerBaseClassName","spinnerStyles","spinnerTailBaseClassName","labelStyles","className"],"mappings":"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"}

package/lib-commonjs/contexts/SpinnerContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/SpinnerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { SpinnerProps } from '../components/Spinner/Spinner.types';\n\nconst SpinnerContext = React.createContext<SpinnerContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport type SpinnerContextValue = Pick<SpinnerProps, 'size'>;\n\nconst SpinnerContextDefaultValue: SpinnerContextValue = {};\n\n/**\n * @internal\n */\nexport const SpinnerContextProvider = SpinnerContext.Provider;\n\n/**\n * @internal\n */\nexport const useSpinnerContext = () => React.useContext(SpinnerContext) ?? SpinnerContextDefaultValue;\n"],"names":["SpinnerContextProvider","useSpinnerContext","SpinnerContext","React","createContext","undefined","SpinnerContextDefaultValue","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAeaA,sBAAAA;eAAAA;;IAKAC,iBAAAA;eAAAA;;;;iEApBU;AAGvB,MAAMC,+BAAiBC,OAAMC,aAAa,CAAkCC;AAO5E,MAAMC,6BAAkD,CAAC;AAKlD,MAAMN,yBAAyBE,eAAeK,QAAQ;AAKtD,MAAMN,oBAAoB;QAAME;WAAAA,CAAAA,oBAAAA,OAAMK,UAAU,CAACN,eAAAA,MAAAA,QAAjBC,sBAAAA,KAAAA,IAAAA,oBAAoCG;AAAyB"}
+{"version":3,"sources":["../src/contexts/SpinnerContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { SpinnerProps } from '../components/Spinner/Spinner.types';\n\nconst SpinnerContext = React.createContext<SpinnerContextValue | undefined>(undefined);\n\n/**\n * @internal\n */\nexport type SpinnerContextValue = Pick<SpinnerProps, 'size'>;\n\nconst SpinnerContextDefaultValue: SpinnerContextValue = {};\n\n/**\n * @internal\n */\nexport const SpinnerContextProvider = SpinnerContext.Provider;\n\n/**\n * @internal\n */\nexport const useSpinnerContext = () => React.useContext(SpinnerContext) ?? SpinnerContextDefaultValue;\n"],"names":["React","SpinnerContext","createContext","undefined","SpinnerContextDefaultValue","SpinnerContextProvider","Provider","useSpinnerContext","useContext"],"mappings":";;;;;;;;;;;IAeaK,sBAAAA;;;qBAKAE;;;;;iEApBU,QAAQ;AAG/B,MAAMN,+BAAiBD,OAAME,aAAa,CAAkCC;AAO5E,MAAMC,6BAAkD,CAAC;AAKlD,+BAA+BH,eAAeK,QAAQ,CAAC;AAKvD,MAAMC,oBAAoB;QAAMP;WAAAA,CAAAA,oBAAAA,OAAMQ,UAAU,CAACP,eAAAA,MAAAA,QAAjBD,sBAAAA,KAAAA,IAAAA,oBAAoCI;EAA2B"}

package/lib-commonjs/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"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACSA,sBAAsB;eAAtBA,sCAAsB;;IAAEC,iBAAiB;eAAjBA,iCAAiB;;;gCAAQ"}
+{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SpinnerContextValue } from './SpinnerContext';\nexport { SpinnerContextProvider, useSpinnerContext } from './SpinnerContext';\n"],"names":["SpinnerContextProvider","useSpinnerContext"],"mappings":";;;;;;;;;;;;eACSA,sCAAsB;;;eAAEC,iCAAiB;;;gCAAQ,mBAAmB"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\nexport { SpinnerContextProvider, useSpinnerContext } from './contexts/index';\nexport type { SpinnerContextValue } from './contexts/index';\n"],"names":["Spinner","SpinnerContextProvider","renderSpinner_unstable","spinnerClassNames","useSpinnerContext","useSpinnerStyles_unstable","useSpinner_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,OAAO;eAAPA,gBAAO;;IAOAC,sBAAsB;eAAtBA,6BAAsB;;IAL7BC,sBAAsB;eAAtBA,+BAAsB;;IADtBC,iBAAiB;eAAjBA,0BAAiB;;IAMcC,iBAAiB;eAAjBA,wBAAiB;;IAHhDC,yBAAyB;eAAzBA,kCAAyB;;IADzBC,mBAAmB;eAAnBA,4BAAmB;;;yBAEd;uBAEmD"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\nexport { SpinnerContextProvider, useSpinnerContext } from './contexts/index';\nexport type { SpinnerContextValue } from './contexts/index';\n"],"names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable","SpinnerContextProvider","useSpinnerContext"],"mappings":";;;;;;;;;;;;eACEA,gBAAO;;;eAOAK,6BAAsB;;;eAL7BH,+BAAsB;;;eADtBD,0BAAiB;;;eAMcK,wBAAiB;;;eAHhDF,kCAAyB;;;eADzBD,4BAAmB;;;yBAEd,YAAY;uBAEuC,mBAAmB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinner",
-  "version": "9.6.2",
+  "version": "9.7.1",
   "description": "Spinner component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,11 +18,11 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-jsx-runtime": "^9.1.2",
-    "@fluentui/react-label": "^9.2.2",
+    "@fluentui/react-jsx-runtime": "^9.1.3",
+    "@fluentui/react-label": "^9.3.1",
     "@fluentui/react-shared-contexts": "^9.24.0",
     "@fluentui/react-theme": "^9.1.24",
-    "@fluentui/react-utilities": "^9.22.0",
+    "@fluentui/react-utilities": "^9.23.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },