npm - @fluentui/react-spinner - Versions diffs - 9.0.3 → 9.0.5 - Mend

@fluentui/react-spinner 9.0.3 → 9.0.5

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 (8) hide show

package/CHANGELOG.json +115 -3
package/CHANGELOG.md +33 -4
package/lib/components/Spinner/useSpinnerStyles.js +34 -15
package/lib/components/Spinner/useSpinnerStyles.js.map +1 -1
package/lib-commonjs/components/Spinner/useSpinnerStyles.js +34 -15
package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map +1 -1
package/package.json +10 -9
package/dist/tsdoc-metadata.json +0 -11

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,119 @@
   "name": "@fluentui/react-spinner",
   "entries": [
     {
-      "date": "Thu, 14 Jul 2022 21:18:39 GMT",
+      "date": "Thu, 15 Sep 2022 09:44:44 GMT",
+      "tag": "@fluentui/react-spinner_v9.0.5",
+      "version": "9.0.5",
+      "comments": {
+        "patch": [
+          {
+            "author": "miroslav.stastny@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "0137f992b99b3b8ec927be8f7aef751d27cd5830",
+            "comment": "fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "7c2ccadde562224609e08d5bdd2c42b078f5bef2",
+            "comment": "(patch): Add line-height styling to Spinner"
+          },
+          {
+            "author": "seanmonahan@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "1d0a72865a151962362aa3e5054ac9bf8178f09c",
+            "comment": "fix: update color tokens"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "a210c2524d1961b6b9b7cb8774bec951dbbd9db0",
+            "comment": "(chore): Remove appearance conditional from Spinner slot styling"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-theme to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-label to v9.0.5",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-utilities to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
+            "comment": "chore: update package scaffold"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Aug 2022 16:04:01 GMT",
+      "tag": "@fluentui/react-spinner_v9.0.4",
+      "version": "9.0.4",
+      "comments": {
+        "patch": [
+          {
+            "author": "miroslav.stastny@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "08563664778fd80284561d3c9d254307a0a32362",
+            "comment": "chore: Bump Griffel dependencies"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "c66808887bcd7fd150c22eda462b325075742694",
+            "comment": "bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-label to v9.0.4",
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
+          }
+        ],
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
+            "comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 14 Jul 2022 21:21:04 GMT",
       "tag": "@fluentui/react-spinner_v9.0.3",
       "version": "9.0.3",
       "comments": {
@@ -17,13 +129,13 @@
             "author": "beachball",
             "package": "@fluentui/react-spinner",
             "comment": "Bump @fluentui/react-label to v9.0.3",
-            "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
+            "commit": "79b513146194367544160f364b0a7dd749ed93e4"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinner",
             "comment": "Bump @fluentui/react-utilities to v9.0.2",
-            "commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2"
+            "commit": "79b513146194367544160f364b0a7dd749ed93e4"
           }
         ]
       }

package/CHANGELOG.md CHANGED Viewed

@@ -1,19 +1,48 @@
 # Change Log - @fluentui/react-spinner
-This log was last generated on Thu, 14 Jul 2022 21:18:39 GMT and should not be manually modified.
+This log was last generated on Thu, 15 Sep 2022 09:44:44 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.5)
+Thu, 15 Sep 2022 09:44:44 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.4..@fluentui/react-spinner_v9.0.5)
+### Patches
+- fix: Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted ([PR #24611](https://github.com/microsoft/fluentui/pull/24611) by miroslav.stastny@microsoft.com)
+- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
+- (patch): Add line-height styling to Spinner ([PR #24643](https://github.com/microsoft/fluentui/pull/24643) by ololubek@microsoft.com)
+- fix: update color tokens ([PR #24027](https://github.com/microsoft/fluentui/pull/24027) by seanmonahan@microsoft.com)
+- (chore): Remove appearance conditional from Spinner slot styling ([PR #24480](https://github.com/microsoft/fluentui/pull/24480) by ololubek@microsoft.com)
+- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-label to v9.0.5 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.4)
+Wed, 03 Aug 2022 16:04:01 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.3..@fluentui/react-spinner_v9.0.4)
+### Patches
+- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
+- bugfix: add reduced motion styles for avatar, spinner, switch, and input focus styles ([PR #23788](https://github.com/microsoft/fluentui/pull/23788) by sarah.higley@microsoft.com)
+- Bump @fluentui/react-label to v9.0.4 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
 ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.3)
-Thu, 14 Jul 2022 21:18:39 GMT
+Thu, 14 Jul 2022 21:21:04 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.2..@fluentui/react-spinner_v9.0.3)
 ### Patches
 - fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
-- Bump @fluentui/react-label to v9.0.3 ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
-- Bump @fluentui/react-utilities to v9.0.2 ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by beachball)
+- Bump @fluentui/react-label to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
+- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
 ## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.2)

package/lib/components/Spinner/useSpinnerStyles.js CHANGED Viewed

@@ -55,6 +55,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     "mc9l5x": "f22iagw",
     "Bt984gj": "f122n59",
     "Brf1p80": "f4d9j23",
+    "Bg96gwp": "fez10in",
     "i8kkvl": "f4px1ci",
     "Belr9w4": "fn67r4l"
   },
@@ -65,7 +66,7 @@ const useRootStyles = /*#__PURE__*/__styles({
     "Beiy3e4": "f1vx9l62"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fez10in{line-height:0;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
 });
 const useLoaderStyles = /*#__PURE__*/__styles({
@@ -78,6 +79,8 @@ const useLoaderStyles = /*#__PURE__*/__styles({
     "ag6ruv": "f1y80fxs",
     "osj692": "f1r2crtq",
     "aq5vjd": "f1wsi8sr",
+    "tlu9e1": "f1bkm2qd",
+    "J3u96z": "f1urqz7h",
     "d32isg": "f1da2vov",
     "Bsvqbuc": "f11rfva0",
     "b3s3i5": "f1exc66"
@@ -88,7 +91,7 @@ const useLoaderStyles = /*#__PURE__*/__styles({
     "B7p06xz": "fv1u54w",
     "B807ibg": "fngtx1d"
   },
-  "extraSmall": {
+  "extra-small": {
     "Bah9ito": "fmpqlna",
     "ut6tcf": "f15z5jzu",
     "B7p06xz": "fv1u54w",
@@ -112,7 +115,7 @@ const useLoaderStyles = /*#__PURE__*/__styles({
     "B7p06xz": "f1flujpd",
     "B807ibg": "f13pmvhl"
   },
-  "extraLarge": {
+  "extra-large": {
     "Bah9ito": "f89rf2a",
     "ut6tcf": "f1w2xg3q",
     "B7p06xz": "f1flujpd",
@@ -127,7 +130,12 @@ const useLoaderStyles = /*#__PURE__*/__styles({
 }, {
   "f": [".f1or16p5:focus{outline-width:3px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
   "k": ["@-webkit-keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@-webkit-keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}", "@keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}"],
-  "d": [".f5tbecn>svg{-webkit-animation-name:fb7n1on;animation-name:fb7n1on;}", ".f15qb8s7>svg{-webkit-animation-name:f1gx3jof;animation-name:f1gx3jof;}", ".fn4mtlg>svg{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1y80fxs>svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f1r2crtq>svg{-webkit-animation-timing-function:linear;animation-timing-function:linear;}", ".f1wsi8sr>svg{background-color:transparent;}", ".f1da2vov>svg>circle{cx:50%;}", ".f11rfva0>svg>circle{cy:50%;}", ".f1exc66>svg>circle{fill:none;}", ".f1j4wmu2>svg{height:20px;}", ".f1vppzuq>svg{width:20px;}", ".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}", ".fngtx1d>svg>circle{r:9px;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fadawes>svg>circle{r:11px;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1xqyyrl>svg>circle{r:13px;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}", ".f1u06hy7>svg>circle{r:14.5px;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f13pmvhl>svg>circle{r:16.5px;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".fmn74v6>svg>circle{r:18.5px;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}", ".f1fr1izd>svg>circle{r:20px;}"]
+  "d": [".f5tbecn>svg{-webkit-animation-name:fb7n1on;animation-name:fb7n1on;}", ".f15qb8s7>svg{-webkit-animation-name:f1gx3jof;animation-name:f1gx3jof;}", ".fn4mtlg>svg{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1y80fxs>svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f1r2crtq>svg{-webkit-animation-timing-function:linear;animation-timing-function:linear;}", ".f1wsi8sr>svg{background-color:transparent;}", ".f1da2vov>svg>circle{cx:50%;}", ".f11rfva0>svg>circle{cy:50%;}", ".f1exc66>svg>circle{fill:none;}", ".f1j4wmu2>svg{height:20px;}", ".f1vppzuq>svg{width:20px;}", ".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}", ".fngtx1d>svg>circle{r:9px;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fadawes>svg>circle{r:11px;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1xqyyrl>svg>circle{r:13px;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}", ".f1u06hy7>svg>circle{r:14.5px;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f13pmvhl>svg>circle{r:16.5px;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".fmn74v6>svg>circle{r:18.5px;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}", ".f1fr1izd>svg>circle{r:20px;}"],
+  "m": [["@media screen and (prefers-reduced-motion: reduce){.f1bkm2qd>svg{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1urqz7h>svg{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }]]
 });
 const useTrackStyles = /*#__PURE__*/__styles({
@@ -140,7 +148,9 @@ const useTrackStyles = /*#__PURE__*/__styles({
     "B8001xd": "fu3xdw0",
     "Bdordwa": ["f1ttdh6v", "fmyjox0"],
     "Bo2mdfu": "f1eseayc",
-    "Bksq7rz": "f1iqpjmu"
+    "E10nrc": "folzdkc",
+    "Bwl7w15": "fhlfkde",
+    "Bksq7rz": "f1esql28"
   },
   "primary": {
     "gwg7kz": "f11ditju",
@@ -154,13 +164,17 @@ const useTrackStyles = /*#__PURE__*/__styles({
     "Bo2mdfu": "f1eseayc",
     "E10nrc": "folzdkc",
     "Bwl7w15": "fhlfkde",
-    "Bksq7rz": "f12uf417",
+    "Bksq7rz": "f61h2gu",
     "y14cdu": "flglbw1"
   }
 }, {
-  "d": [".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}", ".fq8a5sv>svg>circle.fui-Spinner__Tail{-webkit-animation-name:f1v1ql0f;animation-name:f1v1ql0f;}", ".f1b4lwqj>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:1.5s;animation-duration:1.5s;}", ".f1najlst>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f10r9z1l>svg>circle.fui-Spinner__Tail{-webkit-animation-timing-function:cubic-bezier(0.33,0,0.67,1);animation-timing-function:cubic-bezier(0.33,0,0.67,1);}", ".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}", ".f1ttdh6v>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}", ".fmyjox0>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}", ".f1eseayc>svg>circle.fui-Spinner__Tail{transform-origin:50% 50%;}", ".f1iqpjmu>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}", ".f11ditju>svg>circle.fui-Spinner__Tail{stroke:var(--colorBrandStroke1);}", ".f12uf417>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackground4);}"],
+  "d": [".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}", ".fq8a5sv>svg>circle.fui-Spinner__Tail{-webkit-animation-name:f1v1ql0f;animation-name:f1v1ql0f;}", ".f1b4lwqj>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:1.5s;animation-duration:1.5s;}", ".f1najlst>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f10r9z1l>svg>circle.fui-Spinner__Tail{-webkit-animation-timing-function:cubic-bezier(0.33,0,0.67,1);animation-timing-function:cubic-bezier(0.33,0,0.67,1);}", ".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}", ".f1ttdh6v>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}", ".fmyjox0>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}", ".f1eseayc>svg>circle.fui-Spinner__Tail{transform-origin:50% 50%;}", ".f1esql28>svg>circle.fui-Spinner__Track{stroke:rgba(255, 255, 255, 0.2);}", ".f11ditju>svg>circle.fui-Spinner__Tail{stroke:var(--colorBrandStroke1);}", ".f61h2gu>svg>circle.fui-Spinner__Track{stroke:var(--colorBrandStroke2);}"],
   "k": ["@-webkit-keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}", "@keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}"],
-  "m": [["@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}", {
+  "m": [["@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}", {
     "m": "screen and (forced-colors: active)"
   }], ["@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
     "m": "screen and (prefers-reduced-motion: reduce)"
@@ -172,13 +186,17 @@ const useTrackStyles = /*#__PURE__*/__styles({
 });
 const useLabelStyles = /*#__PURE__*/__styles({
+  "inverted": {
+    "sj55zd": "f15aqcq"
+  },
+  "primary": {},
   "tiny": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
     "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi"
   },
-  "extraSmall": {
+  "extra-small": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
     "Bhrd7zp": "figsok6",
@@ -202,7 +220,7 @@ const useLabelStyles = /*#__PURE__*/__styles({
     "Bhrd7zp": "fl43uef",
     "Bg96gwp": "faaz57k"
   },
-  "extraLarge": {
+  "extra-large": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fod5ikn",
     "Bhrd7zp": "fl43uef",
@@ -215,7 +233,7 @@ const useLabelStyles = /*#__PURE__*/__styles({
     "Bg96gwp": "f106mvju"
   }
 }, {
-  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
+  "d": [".f15aqcq{color:rgba(255, 255, 255, 1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
 });
 /**
  * Apply styling to the Spinner slots based on the state
@@ -225,7 +243,8 @@ const useLabelStyles = /*#__PURE__*/__styles({
 export const useSpinnerStyles_unstable = state => {
   const {
     labelPosition,
-    size = 'medium'
+    size,
+    appearance = 'primary'
   } = state;
   const rootStyles = useRootStyles();
   const spinnerStyles = useLoaderStyles();
@@ -233,12 +252,12 @@ export const useSpinnerStyles_unstable = state => {
   const trackStyles = useTrackStyles();
   state.root.className = mergeClasses(spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);
-  if (state.spinner && state.appearance) {
-    state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, size === 'extra-small' && spinnerStyles.extraSmall, size === 'extra-large' && spinnerStyles.extraLarge, size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size], trackStyles[state.appearance], state.spinner.className);
+  if (state.spinner) {
+    state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);
   }
   if (state.label) {
-    state.label.className = mergeClasses(spinnerClassNames.label, size === 'extra-small' && labelStyles.extraSmall, size === 'extra-large' && labelStyles.extraLarge, size !== 'extra-large' && size !== 'extra-small' && labelStyles[size], state.label.className);
+    state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);
   }
   return state;

package/lib/components/Spinner/useSpinnerStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AAIA,OAAO,MAAM,iBAAiB,GAAiC;EAC7D,IAAI,EAAE,aADuD;EAE7D,OAAO,EAAE,sBAFoD;EAG7D,KAAK,EAAE;AAHsD,CAAxD;AAMP;;;AAGG;;AACH,MAAM,OAAO,GAAG;EACd,IAAI,EAAE,KADQ;EAEd,UAAU,EAAE,MAFE;EAGd,KAAK,EAAE,MAHO;EAId,MAAM,EAAE,QAJM;EAKd,KAAK,EAAE,QALO;EAMd,UAAU,EAAE,QANE;EAOd,IAAI,EAAE;AAPQ,CAAhB;AAUA;;;AAGG;;AACH,MAAM,aAAa,GAAG;EACpB,IAAI,EAAE,MADc;EAEpB,UAAU,EAAE,MAFQ;EAGpB,KAAK,EAAE,MAHa;EAIpB,MAAM,EAAE,MAJY;EAKpB,KAAK,EAAE,MALa;EAMpB,UAAU,EAAE,MANQ;EAOpB,IAAI,EAAE;AAPc,CAAtB;AAUA;;;AAGG;;AACH,MAAM,gBAAgB,GAAG;EACvB,SAAS,EAAE;IACT,iBAAiB,EAAE,IADV;IAET,uBAAuB,EAAE,UAFhB;IAGT,uBAAuB,EAAE,QAHhB;IAIT,eAAe,EAAE;EAJR;AADY,CAAzB;AASA;;AAEG;;AACH,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAtB;;AAiBA,MAAM,eAAe,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;AAAA,EAAxB;;AAkGA,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAvB;;AA0EA,MAAM,cAAc,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAvB;AAgCA;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM;IAAE,aAAF;IAAiB,IAAI,GAAG;EAAxB,IAAqC,KAA3C;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,aAAa,GAAG,eAAe,EAArC;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EACA,MAAM,WAAW,GAAG,cAAc,EAAlC;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,iBAAiB,CAAC,IADe,EAEjC,UAAU,CAAC,IAFsB,EAGjC,CAAC,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,OAAhD,KAA4D,UAAU,CAAC,QAHtC,EAIjC,CAAC,aAAa,KAAK,QAAlB,IAA8B,aAAa,KAAK,OAAjD,KAA6D,UAAU,CAAC,UAJvC,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;EAOA,IAAI,KAAK,CAAC,OAAN,IAAiB,KAAK,CAAC,UAA3B,EAAuC;IACrC,KAAK,CAAC,OAAN,CAAc,SAAd,GAA0B,YAAY,CACpC,iBAAiB,CAAC,OADkB,EAEpC,aAAa,CAAC,UAFsB,EAGpC,IAAI,KAAK,aAAT,IAA0B,aAAa,CAAC,UAHJ,EAIpC,IAAI,KAAK,aAAT,IAA0B,aAAa,CAAC,UAJJ,EAKpC,IAAI,KAAK,aAAT,IAA0B,IAAI,KAAK,aAAnC,IAAoD,aAAa,CAAC,IAAD,CAL7B,EAMpC,WAAW,CAAC,KAAK,CAAC,UAAP,CANyB,EAOpC,KAAK,CAAC,OAAN,CAAc,SAPsB,CAAtC;EASD;;EACD,IAAI,KAAK,CAAC,KAAV,EAAiB;IACf,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,iBAAiB,CAAC,KADgB,EAElC,IAAI,KAAK,aAAT,IAA0B,WAAW,CAAC,UAFJ,EAGlC,IAAI,KAAK,aAAT,IAA0B,WAAW,CAAC,UAHJ,EAIlC,IAAI,KAAK,aAAT,IAA0B,IAAI,KAAK,aAAnC,IAAoD,WAAW,CAAC,IAAD,CAJ7B,EAKlC,KAAK,CAAC,KAAN,CAAY,SALsB,CAApC;EAOD;;EAED,OAAO,KAAP;AACD,CApCM","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label',\n};\n\n/\n TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n /\nconst rValues = {\n tiny: '9px',\n extraSmall: '11px',\n small: '13px',\n medium: '14.5px',\n large: '16.5px',\n extraLarge: '18.5px',\n huge: '20px',\n};\n\n/\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n /\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px',\n};\n\n/\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n /\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent',\n },\n};\n\n/\n Styles for the root slot\n /\nconst useRootStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.gap('8px'),\n },\n\n horizontal: {\n flexDirection: 'row',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useLoaderStyles = makeStyles({\n // global SVG class\n spinnerSVG: {\n ':focus': {\n ...shorthands.outline('3px', 'solid', 'transparent'),\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\n },\n ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.tiny,\n },\n },\n\n extraSmall: {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.large,\n },\n },\n\n extraLarge: {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThickest,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n extraSmall: {\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 extraLarge: {\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 const { labelPosition, size = 'medium' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' \|\| labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' \|\| labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label',\n};\n\n/\n TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n /\nconst rValues = {\n tiny: '9px',\n extraSmall: '11px',\n small: '13px',\n medium: '14.5px',\n large: '16.5px',\n extraLarge: '18.5px',\n huge: '20px',\n};\n\n/\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n /\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px',\n};\n\n/\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n /\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent',\n },\n};\n\n/\n Styles for the root slot\n /\nconst useRootStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n lineHeight: '0',\n ...shorthands.gap('8px'),\n },\n\n horizontal: {\n flexDirection: 'row',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useLoaderStyles = makeStyles({\n // global SVG class\n spinnerSVG: {\n ':focus': {\n ...shorthands.outline('3px', 'solid', 'transparent'),\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.tiny,\n },\n },\n\n 'extra-small': {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.large,\n },\n },\n\n 'extra-large': {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThickest,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: 'rgba(255, 255, 255, 0.2)', // this is whiteAlpha[20] but that token is not exported\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorBrandStroke2,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n inverted: {\n color: 'rgba(255, 255, 255, 1)', // This is white alpha but the token is not exported\n },\n\n primary: {}, // no change\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 const { labelPosition, size, appearance = 'primary' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' \|\| labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' \|\| labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n spinnerStyles[size],\n trackStyles[appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n labelStyles[size],\n labelStyles[appearance],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

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

@@ -64,6 +64,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "mc9l5x": "f22iagw",
     "Bt984gj": "f122n59",
     "Brf1p80": "f4d9j23",
+    "Bg96gwp": "fez10in",
     "i8kkvl": "f4px1ci",
     "Belr9w4": "fn67r4l"
   },
@@ -74,7 +75,7 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     "Beiy3e4": "f1vx9l62"
   }
 }, {
-  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
+  "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fez10in{line-height:0;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
 });
 const useLoaderStyles = /*#__PURE__*/react_1.__styles({
@@ -87,6 +88,8 @@ const useLoaderStyles = /*#__PURE__*/react_1.__styles({
     "ag6ruv": "f1y80fxs",
     "osj692": "f1r2crtq",
     "aq5vjd": "f1wsi8sr",
+    "tlu9e1": "f1bkm2qd",
+    "J3u96z": "f1urqz7h",
     "d32isg": "f1da2vov",
     "Bsvqbuc": "f11rfva0",
     "b3s3i5": "f1exc66"
@@ -97,7 +100,7 @@ const useLoaderStyles = /*#__PURE__*/react_1.__styles({
     "B7p06xz": "fv1u54w",
     "B807ibg": "fngtx1d"
   },
-  "extraSmall": {
+  "extra-small": {
     "Bah9ito": "fmpqlna",
     "ut6tcf": "f15z5jzu",
     "B7p06xz": "fv1u54w",
@@ -121,7 +124,7 @@ const useLoaderStyles = /*#__PURE__*/react_1.__styles({
     "B7p06xz": "f1flujpd",
     "B807ibg": "f13pmvhl"
   },
-  "extraLarge": {
+  "extra-large": {
     "Bah9ito": "f89rf2a",
     "ut6tcf": "f1w2xg3q",
     "B7p06xz": "f1flujpd",
@@ -136,7 +139,12 @@ const useLoaderStyles = /*#__PURE__*/react_1.__styles({
 }, {
   "f": [".f1or16p5:focus{outline-width:3px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
   "k": ["@-webkit-keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@-webkit-keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}", "@keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}", "@keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}"],
-  "d": [".f5tbecn>svg{-webkit-animation-name:fb7n1on;animation-name:fb7n1on;}", ".f15qb8s7>svg{-webkit-animation-name:f1gx3jof;animation-name:f1gx3jof;}", ".fn4mtlg>svg{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1y80fxs>svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f1r2crtq>svg{-webkit-animation-timing-function:linear;animation-timing-function:linear;}", ".f1wsi8sr>svg{background-color:transparent;}", ".f1da2vov>svg>circle{cx:50%;}", ".f11rfva0>svg>circle{cy:50%;}", ".f1exc66>svg>circle{fill:none;}", ".f1j4wmu2>svg{height:20px;}", ".f1vppzuq>svg{width:20px;}", ".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}", ".fngtx1d>svg>circle{r:9px;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fadawes>svg>circle{r:11px;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1xqyyrl>svg>circle{r:13px;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}", ".f1u06hy7>svg>circle{r:14.5px;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f13pmvhl>svg>circle{r:16.5px;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".fmn74v6>svg>circle{r:18.5px;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}", ".f1fr1izd>svg>circle{r:20px;}"]
+  "d": [".f5tbecn>svg{-webkit-animation-name:fb7n1on;animation-name:fb7n1on;}", ".f15qb8s7>svg{-webkit-animation-name:f1gx3jof;animation-name:f1gx3jof;}", ".fn4mtlg>svg{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1y80fxs>svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f1r2crtq>svg{-webkit-animation-timing-function:linear;animation-timing-function:linear;}", ".f1wsi8sr>svg{background-color:transparent;}", ".f1da2vov>svg>circle{cx:50%;}", ".f11rfva0>svg>circle{cy:50%;}", ".f1exc66>svg>circle{fill:none;}", ".f1j4wmu2>svg{height:20px;}", ".f1vppzuq>svg{width:20px;}", ".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}", ".fngtx1d>svg>circle{r:9px;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fadawes>svg>circle{r:11px;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1xqyyrl>svg>circle{r:13px;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}", ".f1u06hy7>svg>circle{r:14.5px;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f13pmvhl>svg>circle{r:16.5px;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".fmn74v6>svg>circle{r:18.5px;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}", ".f1fr1izd>svg>circle{r:20px;}"],
+  "m": [["@media screen and (prefers-reduced-motion: reduce){.f1bkm2qd>svg{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f1urqz7h>svg{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }]]
 });
 const useTrackStyles = /*#__PURE__*/react_1.__styles({
@@ -149,7 +157,9 @@ const useTrackStyles = /*#__PURE__*/react_1.__styles({
     "B8001xd": "fu3xdw0",
     "Bdordwa": ["f1ttdh6v", "fmyjox0"],
     "Bo2mdfu": "f1eseayc",
-    "Bksq7rz": "f1iqpjmu"
+    "E10nrc": "folzdkc",
+    "Bwl7w15": "fhlfkde",
+    "Bksq7rz": "f1esql28"
   },
   "primary": {
     "gwg7kz": "f11ditju",
@@ -163,13 +173,17 @@ const useTrackStyles = /*#__PURE__*/react_1.__styles({
     "Bo2mdfu": "f1eseayc",
     "E10nrc": "folzdkc",
     "Bwl7w15": "fhlfkde",
-    "Bksq7rz": "f12uf417",
+    "Bksq7rz": "f61h2gu",
     "y14cdu": "flglbw1"
   }
 }, {
-  "d": [".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}", ".fq8a5sv>svg>circle.fui-Spinner__Tail{-webkit-animation-name:f1v1ql0f;animation-name:f1v1ql0f;}", ".f1b4lwqj>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:1.5s;animation-duration:1.5s;}", ".f1najlst>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f10r9z1l>svg>circle.fui-Spinner__Tail{-webkit-animation-timing-function:cubic-bezier(0.33,0,0.67,1);animation-timing-function:cubic-bezier(0.33,0,0.67,1);}", ".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}", ".f1ttdh6v>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}", ".fmyjox0>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}", ".f1eseayc>svg>circle.fui-Spinner__Tail{transform-origin:50% 50%;}", ".f1iqpjmu>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}", ".f11ditju>svg>circle.fui-Spinner__Tail{stroke:var(--colorBrandStroke1);}", ".f12uf417>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackground4);}"],
+  "d": [".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}", ".fq8a5sv>svg>circle.fui-Spinner__Tail{-webkit-animation-name:f1v1ql0f;animation-name:f1v1ql0f;}", ".f1b4lwqj>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:1.5s;animation-duration:1.5s;}", ".f1najlst>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".f10r9z1l>svg>circle.fui-Spinner__Tail{-webkit-animation-timing-function:cubic-bezier(0.33,0,0.67,1);animation-timing-function:cubic-bezier(0.33,0,0.67,1);}", ".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}", ".f1ttdh6v>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}", ".fmyjox0>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}", ".f1eseayc>svg>circle.fui-Spinner__Tail{transform-origin:50% 50%;}", ".f1esql28>svg>circle.fui-Spinner__Track{stroke:rgba(255, 255, 255, 0.2);}", ".f11ditju>svg>circle.fui-Spinner__Tail{stroke:var(--colorBrandStroke1);}", ".f61h2gu>svg>circle.fui-Spinner__Track{stroke:var(--colorBrandStroke2);}"],
   "k": ["@-webkit-keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}", "@keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}"],
-  "m": [["@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}", {
+  "m": [["@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
+    "m": "screen and (prefers-reduced-motion: reduce)"
+  }], ["@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}", {
     "m": "screen and (forced-colors: active)"
   }], ["@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
     "m": "screen and (prefers-reduced-motion: reduce)"
@@ -181,13 +195,17 @@ const useTrackStyles = /*#__PURE__*/react_1.__styles({
 });
 const useLabelStyles = /*#__PURE__*/react_1.__styles({
+  "inverted": {
+    "sj55zd": "f15aqcq"
+  },
+  "primary": {},
   "tiny": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
     "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi"
   },
-  "extraSmall": {
+  "extra-small": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
     "Bhrd7zp": "figsok6",
@@ -211,7 +229,7 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
     "Bhrd7zp": "fl43uef",
     "Bg96gwp": "faaz57k"
   },
-  "extraLarge": {
+  "extra-large": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fod5ikn",
     "Bhrd7zp": "fl43uef",
@@ -224,7 +242,7 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
     "Bg96gwp": "f106mvju"
   }
 }, {
-  "d": [".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
+  "d": [".f15aqcq{color:rgba(255, 255, 255, 1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
 });
 /**
  * Apply styling to the Spinner slots based on the state
@@ -234,7 +252,8 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
 const useSpinnerStyles_unstable = state => {
   const {
     labelPosition,
-    size = 'medium'
+    size,
+    appearance = 'primary'
   } = state;
   const rootStyles = useRootStyles();
   const spinnerStyles = useLoaderStyles();
@@ -242,12 +261,12 @@ const useSpinnerStyles_unstable = state => {
   const trackStyles = useTrackStyles();
   state.root.className = react_1.mergeClasses(exports.spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);
-  if (state.spinner && state.appearance) {
-    state.spinner.className = react_1.mergeClasses(exports.spinnerClassNames.spinner, spinnerStyles.spinnerSVG, size === 'extra-small' && spinnerStyles.extraSmall, size === 'extra-large' && spinnerStyles.extraLarge, size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size], trackStyles[state.appearance], state.spinner.className);
+  if (state.spinner) {
+    state.spinner.className = react_1.mergeClasses(exports.spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);
   }
   if (state.label) {
-    state.label.className = react_1.mergeClasses(exports.spinnerClassNames.label, size === 'extra-small' && labelStyles.extraSmall, size === 'extra-large' && labelStyles.extraLarge, size !== 'extra-large' && size !== 'extra-small' && labelStyles[size], state.label.className);
+    state.label.className = react_1.mergeClasses(exports.spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);
   }
   return state;

package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label',\n};\n\n/\n TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n /\nconst rValues = {\n tiny: '9px',\n extraSmall: '11px',\n small: '13px',\n medium: '14.5px',\n large: '16.5px',\n extraLarge: '18.5px',\n huge: '20px',\n};\n\n/\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n /\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px',\n};\n\n/\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n /\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent',\n },\n};\n\n/\n Styles for the root slot\n /\nconst useRootStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.gap('8px'),\n },\n\n horizontal: {\n flexDirection: 'row',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useLoaderStyles = makeStyles({\n // global SVG class\n spinnerSVG: {\n ':focus': {\n ...shorthands.outline('3px', 'solid', 'transparent'),\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\n },\n ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.tiny,\n },\n },\n\n extraSmall: {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.large,\n },\n },\n\n extraLarge: {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThickest,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n extraSmall: {\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 extraLarge: {\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 const { labelPosition, size = 'medium' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' \|\| labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' \|\| labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1	+ {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label',\n};\n\n/\n TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n /\nconst rValues = {\n tiny: '9px',\n extraSmall: '11px',\n small: '13px',\n medium: '14.5px',\n large: '16.5px',\n extraLarge: '18.5px',\n huge: '20px',\n};\n\n/\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n /\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px',\n};\n\n/\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n /\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent',\n },\n};\n\n/\n Styles for the root slot\n /\nconst useRootStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n lineHeight: '0',\n ...shorthands.gap('8px'),\n },\n\n horizontal: {\n flexDirection: 'row',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useLoaderStyles = makeStyles({\n // global SVG class\n spinnerSVG: {\n ':focus': {\n ...shorthands.outline('3px', 'solid', 'transparent'),\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.tiny,\n },\n },\n\n 'extra-small': {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.large,\n },\n },\n\n 'extra-large': {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThickest,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: 'rgba(255, 255, 255, 0.2)', // this is whiteAlpha[20] but that token is not exported\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n '@media screen and (prefers-reduced-motion: reduce)': {\n animationDuration: '0.01ms',\n animationIterationCount: '1',\n },\n },\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorBrandStroke2,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n inverted: {\n color: 'rgba(255, 255, 255, 1)', // This is white alpha but the token is not exported\n },\n\n primary: {}, // no change\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 const { labelPosition, size, appearance = 'primary' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' \|\| labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' \|\| labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n spinnerStyles[size],\n trackStyles[appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n labelStyles[size],\n labelStyles[appearance],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinner",
-  "version": "9.0.3",
+  "version": "9.0.5",
   "description": "Spinner component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -21,21 +21,21 @@
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-spinner/src && yarn docs",
-    "storybook": "node ../../../scripts/storybook/runner",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-spinner/src && yarn docs",
+    "storybook": "start-storybook",
     "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.11",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.13",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-theme": "^9.0.0",
-    "@fluentui/react-label": "^9.0.3",
-    "@fluentui/react-utilities": "^9.0.2",
-    "@griffel/react": "^1.2.0",
+    "@fluentui/react-theme": "^9.1.0",
+    "@fluentui/react-label": "^9.0.5",
+    "@fluentui/react-utilities": "^9.1.0",
+    "@griffel/react": "^1.3.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -46,7 +46,8 @@
   },
   "beachball": {
     "disallowedChangeTypes": [
-      "major"
+      "major",
+      "prerelease"
     ]
   },
   "exports": {

package/dist/tsdoc-metadata.json DELETED Viewed

@@ -1,11 +0,0 @@
-// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
-// It should be published with your NPM package.  It should not be tracked by Git.
-{
-  "tsdocVersion": "0.12",
-  "toolPackages": [
-    {
-      "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.18.1"
-    }
-  ]
-}