npm - @fluentui/react-spinner - Versions diffs - 9.75.0-experimental.css-modules.20261031-810ab07afb.0 → 9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 - Mend

@fluentui/react-spinner 9.75.0-experimental.css-modules.20261031-810ab07afb.0 → 9.75.1-experimental.positioning-engine.20261103-19efe125d1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,21 +1,21 @@
 # Change Log - @fluentui/react-spinner
-<!-- This log was last generated on Sat, 31 Oct 2026 11:08:56 GMT and should not be manually modified. -->
+<!-- This log was last generated on Tue, 03 Nov 2026 14:18:10 GMT and should not be manually modified. -->
 <!-- Start content -->
-## [9.75.0-experimental.css-modules.20261031-810ab07afb.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.75.0-experimental.css-modules.20261031-810ab07afb.0)
+## [9.75.1-experimental.positioning-engine.20261103-19efe125d1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0)
-Sat, 31 Oct 2026 11:08:56 GMT
+Tue, 03 Nov 2026 14:18:10 GMT
 ### Changes
-- Release 9.75.0-experimental.css-modules.20261031-810ab07afb ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
-- Bump @fluentui/react-jsx-runtime to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-label to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-theme to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
-- Bump @fluentui/react-utilities to v9.75.0-experimental.css-modules.20261031-810ab07afb.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Release 9.75.1-experimental.positioning-engine.20261103-19efe125d1 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by 257645319+office-ogx-auth-helper[bot]@users.noreply.github.com)
+- Bump @fluentui/react-jsx-runtime to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-label to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-theme to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
+- Bump @fluentui/react-utilities to v9.75.1-experimental.positioning-engine.20261103-19efe125d1.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
 ## [9.8.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.8.7)

package/README.md CHANGED Viewed

@@ -43,13 +43,3 @@ See [SPEC.md](./SPEC.md).
 ### Migration Guide
 If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Spinner implementation.
-## Opt-in CSS Modules styles
-CSS Modules alternatives are available for `Spinner`. The default exports and component imports continue to use Griffel.
-To opt in, configure your bundler to replace each `use<Component>Styles.styles.js` module with its adjacent `use<Component>Styles.styles.css.js` alternative (or `.styles.ts` with `.styles.css.ts` for source builds). Apply the replacement consistently to client and server bundles. The CSS loader must provide a default class-name map and retain the adjacent `.module.css` asset, including CSS from dependencies. All component rules are in `@layer fluentui` and use the theme custom properties supplied by `FluentProvider`.
-The CSS hook retains the shared Fluent context for the spinner tail's RTL styling.
-For composed labels, also select the CSS Modules alternative for `@fluentui/react-label`. Mixing its default unlayered Griffel styles with these layered alternatives can override label typography.

package/package.json CHANGED Viewed

@@ -1,27 +1,24 @@
 {
   "name": "@fluentui/react-spinner",
-  "version": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
+  "version": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
   "description": "Spinner component for Fluent UI React",
   "main": "lib-commonjs/index.cjs",
   "module": "lib/index.js",
   "typings": "./dist/index.d.ts",
-  "sideEffects": [
-    "**/*.css"
-  ],
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-jsx-runtime": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-label": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-shared-contexts": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-theme": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
-    "@fluentui/react-utilities": "9.75.0-experimental.css-modules.20261031-810ab07afb.0",
+    "@fluentui/react-jsx-runtime": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-label": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-shared-contexts": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-theme": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
+    "@fluentui/react-utilities": "9.75.1-experimental.positioning-engine.20261103-19efe125d1.0",
     "@griffel/react": "^1.5.32",
-    "@swc/helpers": "^0.5.1",
-    "clsx": "^2.1.1"
+    "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <20.0.0",

package/lib/components/Spinner/Spinner.module.css DELETED Viewed

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

package/lib/components/Spinner/useSpinnerStyles.styles.css.js DELETED Viewed

@@ -1,28 +0,0 @@
-'use client';
-import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
-import { clsx } from "clsx";
-import styles from "./Spinner.module.css";
-export const spinnerClassNames = {
-    root: 'fui-Spinner',
-    spinner: 'fui-Spinner__spinner',
-    spinnerTail: 'fui-Spinner__spinnerTail',
-    label: 'fui-Spinner__label'
-};
-export const useSpinnerStyles_unstable = (state)=>{
-    const { dir } = useFluent();
-    // eslint-disable-next-line react-hooks/immutability
-    state.root.className = clsx(spinnerClassNames.root, styles.root, styles[state.labelPosition], styles[state.size], styles[state.appearance], state.root.className);
-    if (state.spinner) {
-        // eslint-disable-next-line react-hooks/immutability
-        state.spinner.className = clsx(spinnerClassNames.spinner, styles.spinner, state.spinner.className);
-    }
-    if (state.spinnerTail) {
-        // eslint-disable-next-line react-hooks/immutability
-        state.spinnerTail.className = clsx(spinnerClassNames.spinnerTail, styles.spinnerTail, dir === 'rtl' && styles.rtlTail, state.spinnerTail.className);
-    }
-    if (state.label) {
-        // eslint-disable-next-line react-hooks/immutability
-        state.label.className = clsx(spinnerClassNames.label, styles.label, state.label.className);
-    }
-    return state;
-};

package/lib/components/Spinner/useSpinnerStyles.styles.css.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"sources":["../../../src/components/Spinner/useSpinnerStyles.styles.css.ts"],"sourcesContent":["'use client';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { clsx } from 'clsx';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport styles from './Spinner.module.css';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n spinnerTail: 'fui-Spinner__spinnerTail',\n label: 'fui-Spinner__label',\n};\n\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n const { dir } = useFluent();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = clsx(\n spinnerClassNames.root,\n styles.root,\n styles[state.labelPosition],\n styles[state.size],\n styles[state.appearance],\n state.root.className,\n );\n if (state.spinner) {\n // eslint-disable-next-line react-hooks/immutability\n state.spinner.className = clsx(spinnerClassNames.spinner, styles.spinner, state.spinner.className);\n }\n if (state.spinnerTail) {\n // eslint-disable-next-line react-hooks/immutability\n state.spinnerTail.className = clsx(\n spinnerClassNames.spinnerTail,\n styles.spinnerTail,\n dir === 'rtl' && styles.rtlTail,\n state.spinnerTail.className,\n );\n }\n if (state.label) {\n // eslint-disable-next-line react-hooks/immutability\n state.label.className = clsx(spinnerClassNames.label, styles.label, state.label.className);\n }\n return state;\n};\n"],"names":["useFluent_unstable","useFluent","clsx","styles","spinnerClassNames","root","spinner","spinnerTail","label","useSpinnerStyles_unstable","state","dir","className","labelPosition","size","appearance","rtlTail"],"mappings":"AAAA;AACA,SAASA,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,IAAI,QAAQ,OAAO;AAG5B,OAAOC,YAAY,uBAAuB;AAE1C,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;IACNC,SAAS;IACTC,aAAa;IACbC,OAAO;AACT,EAAE;AAEF,OAAO,MAAMC,4BAA4B,CAACC;IACxC,MAAM,EAAEC,GAAG,EAAE,GAAGV;IAChB,oDAAoD;IACpDS,MAAML,IAAI,CAACO,SAAS,GAAGV,KACrBE,kBAAkBC,IAAI,EACtBF,OAAOE,IAAI,EACXF,MAAM,CAACO,MAAMG,aAAa,CAAC,EAC3BV,MAAM,CAACO,MAAMI,IAAI,CAAC,EAClBX,MAAM,CAACO,MAAMK,UAAU,CAAC,EACxBL,MAAML,IAAI,CAACO,SAAS;IAEtB,IAAIF,MAAMJ,OAAO,EAAE;QACjB,oDAAoD;QACpDI,MAAMJ,OAAO,CAACM,SAAS,GAAGV,KAAKE,kBAAkBE,OAAO,EAAEH,OAAOG,OAAO,EAAEI,MAAMJ,OAAO,CAACM,SAAS;IACnG;IACA,IAAIF,MAAMH,WAAW,EAAE;QACrB,oDAAoD;QACpDG,MAAMH,WAAW,CAACK,SAAS,GAAGV,KAC5BE,kBAAkBG,WAAW,EAC7BJ,OAAOI,WAAW,EAClBI,QAAQ,SAASR,OAAOa,OAAO,EAC/BN,MAAMH,WAAW,CAACK,SAAS;IAE/B;IACA,IAAIF,MAAMF,KAAK,EAAE;QACf,oDAAoD;QACpDE,MAAMF,KAAK,CAACI,SAAS,GAAGV,KAAKE,kBAAkBI,KAAK,EAAEL,OAAOK,KAAK,EAAEE,MAAMF,KAAK,CAACI,SAAS;IAC3F;IACA,OAAOF;AACT,EAAE"}

package/lib/components/Spinner/useSpinnerStyles.styles.raw.css.js DELETED Viewed

@@ -1,28 +0,0 @@
-'use client';
-import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
-import { clsx } from "clsx";
-import styles from "./Spinner.module.css";
-export const spinnerClassNames = {
-    root: 'fui-Spinner',
-    spinner: 'fui-Spinner__spinner',
-    spinnerTail: 'fui-Spinner__spinnerTail',
-    label: 'fui-Spinner__label'
-};
-export const useSpinnerStyles_unstable = (state)=>{
-    const { dir } = useFluent();
-    // eslint-disable-next-line react-hooks/immutability
-    state.root.className = clsx(spinnerClassNames.root, styles.root, styles[state.labelPosition], styles[state.size], styles[state.appearance], state.root.className);
-    if (state.spinner) {
-        // eslint-disable-next-line react-hooks/immutability
-        state.spinner.className = clsx(spinnerClassNames.spinner, styles.spinner, state.spinner.className);
-    }
-    if (state.spinnerTail) {
-        // eslint-disable-next-line react-hooks/immutability
-        state.spinnerTail.className = clsx(spinnerClassNames.spinnerTail, styles.spinnerTail, dir === 'rtl' && styles.rtlTail, state.spinnerTail.className);
-    }
-    if (state.label) {
-        // eslint-disable-next-line react-hooks/immutability
-        state.label.className = clsx(spinnerClassNames.label, styles.label, state.label.className);
-    }
-    return state;
-};

package/lib/components/Spinner/useSpinnerStyles.styles.raw.css.js.map DELETED Viewed

@@ -1 +0,0 @@

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

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

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

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

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

@@ -1 +0,0 @@

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

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

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

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

@@ -1 +0,0 @@

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