npm - @fluentui/react-spinner - Versions diffs - 9.0.0-beta.8 → 9.0.0-rc.3 - Mend

@fluentui/react-spinner 9.0.0-beta.8 → 9.0.0-rc.3

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

package/CHANGELOG.json +136 -1
package/CHANGELOG.md +44 -2
package/README.md +0 -8
package/dist/index.d.ts +5 -7
package/{lib → dist}/tsdoc-metadata.json +0 -0
package/lib/components/Spinner/Spinner.types.js.map +1 -1
package/lib/components/Spinner/useSpinnerStyles.js +24 -39
package/lib/components/Spinner/useSpinnerStyles.js.map +1 -1
package/lib-commonjs/components/Spinner/useSpinnerStyles.js +23 -38
package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map +1 -1
package/package.json +7 -7
package/lib/Spinner.d.ts +0 -1
package/lib/components/Spinner/DefaultSvg.d.ts +0 -1
package/lib/components/Spinner/Spinner.d.ts +0 -6
package/lib/components/Spinner/Spinner.types.d.ts +0 -51
package/lib/components/Spinner/index.d.ts +0 -5
package/lib/components/Spinner/renderSpinner.d.ts +0 -5
package/lib/components/Spinner/useSpinner.d.ts +0 -12
package/lib/components/Spinner/useSpinnerStyles.d.ts +0 -7
package/lib/index.d.ts +0 -2
package/lib-commonjs/Spinner.d.ts +0 -1
package/lib-commonjs/components/Spinner/DefaultSvg.d.ts +0 -1
package/lib-commonjs/components/Spinner/Spinner.d.ts +0 -6
package/lib-commonjs/components/Spinner/Spinner.types.d.ts +0 -51
package/lib-commonjs/components/Spinner/index.d.ts +0 -5
package/lib-commonjs/components/Spinner/renderSpinner.d.ts +0 -5
package/lib-commonjs/components/Spinner/useSpinner.d.ts +0 -12
package/lib-commonjs/components/Spinner/useSpinnerStyles.d.ts +0 -7
package/lib-commonjs/index.d.ts +0 -2

package/CHANGELOG.json CHANGED Viewed

@@ -2,7 +2,142 @@
   "name": "@fluentui/react-spinner",
   "entries": [
     {
-      "date": "Wed, 04 May 2022 13:24:19 GMT",
+      "date": "Mon, 23 May 2022 18:54:56 GMT",
+      "tag": "@fluentui/react-spinner_v9.0.0-rc.3",
+      "version": "9.0.0-rc.3",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-label to v9.0.0-rc.3",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
+            "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 May 2022 12:13:44 GMT",
+      "tag": "@fluentui/react-spinner_v9.0.0-rc.2",
+      "version": "9.0.0-rc.2",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "8ab3a2ac23ee12d9b5fbd72d3b4593fb3691209b",
+            "comment": "Migrate react-spinner to rc"
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "7327426c7b1a5469fb25f705ef2c1c1367b1633d",
+            "comment": "Removing SpinnerCommons type."
+          },
+          {
+            "author": "esteban.230@hotmail.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "0fac2d7a6f35c5fcebaf30da68b9604410fe0eb9",
+            "comment": "Updated react-label package version to RC."
+          },
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "06e13fdfd614eb965e922dec138a1e6df902b16e",
+            "comment": "Updated to use tokens were possible"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "e7b70cb06f4422e5574993fd2ad44d9073647417",
+            "comment": "feat: ship rolluped only dts"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-label to v9.0.0-rc.2",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
+            "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 05 May 2022 18:26:30 GMT",
+      "tag": "@fluentui/react-spinner_v9.0.0-beta.9",
+      "version": "9.0.0-beta.9",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.7",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-label to v9.0.0-beta.12",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.8",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 May 2022 13:26:51 GMT",
       "tag": "@fluentui/react-spinner_v9.0.0-beta.8",
       "version": "9.0.0-beta.8",
       "comments": {

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,54 @@
 # Change Log - @fluentui/react-spinner
-This log was last generated on Wed, 04 May 2022 13:24:19 GMT and should not be manually modified.
+This log was last generated on Mon, 23 May 2022 18:54:56 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-rc.3)
+Mon, 23 May 2022 18:54:56 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-rc.2..@fluentui/react-spinner_v9.0.0-rc.3)
+### Changes
+- Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-label to v9.0.0-rc.3 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
+## [9.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-rc.2)
+Mon, 23 May 2022 12:13:44 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-beta.9..@fluentui/react-spinner_v9.0.0-rc.2)
+### Changes
+- chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
+- chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
+- Migrate react-spinner to rc ([PR #23009](https://github.com/microsoft/fluentui/pull/23009) by ololubek@microsoft.com)
+- Removing SpinnerCommons type. ([PR #22954](https://github.com/microsoft/fluentui/pull/22954) by Humberto.Morimoto@microsoft.com)
+- Updated react-label package version to RC. ([PR #22865](https://github.com/microsoft/fluentui/pull/22865) by esteban.230@hotmail.com)
+- Updated to use tokens were possible ([PR #22949](https://github.com/microsoft/fluentui/pull/22949) by gcox@microsoft.com)
+- feat: ship rolluped only dts ([PR #22828](https://github.com/microsoft/fluentui/pull/22828) by martinhochel@microsoft.com)
+- Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-label to v9.0.0-rc.2 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
+## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-beta.9)
+Thu, 05 May 2022 18:26:30 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-beta.8..@fluentui/react-spinner_v9.0.0-beta.9)
+### Changes
+- Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-label to v9.0.0-beta.12 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
 ## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-beta.8)
-Wed, 04 May 2022 13:24:19 GMT
+Wed, 04 May 2022 13:26:51 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-beta.7..@fluentui/react-spinner_v9.0.0-beta.8)
 ### Changes

package/README.md CHANGED Viewed

@@ -4,8 +4,6 @@
 The Spinner is an outline of a circle which animates around itself indicating to the user that things are processing. Spinner is typically an indeterminate ProgressIndicator that is used when it is unknown how long a task will take to complete. They can be various sizes, located inline with content or centered. They generally appear while an action is being processed or committed. They are subtle and generally do not take up much space, but are transitions from the completed task
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
 ## Usage
 To import Spinner:
@@ -14,12 +12,6 @@ To import Spinner:
 import { Spinner } from '@fluentui/react-spinner';
 ```
-Once the Spinner component is ready for production use, the component will be available at:
-```js
-import { Spinner } from '@fluentui/react-components';
-```
 ### Examples
 ```js

package/dist/index.d.ts CHANGED Viewed

@@ -18,7 +18,10 @@ export declare const Spinner: ForwardRefComponent<SpinnerProps>;
 export declare const spinnerClassNames: SlotClassNames<SpinnerSlots>;
-declare type SpinnerCommons = {
+/**
+ * Spinner Props
+ */
+export declare type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {
     /**
      * The appearance of the Spinner.
      * @default 'primary'
@@ -41,11 +44,6 @@ declare type SpinnerCommons = {
     status?: 'active' | 'inactive';
 };
-/**
- * Spinner Props
- */
-export declare type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & Partial<SpinnerCommons>;
 export declare type SpinnerSlots = {
     /**
      * The root of the Spinner.
@@ -68,7 +66,7 @@ export declare type SpinnerSlots = {
 /**
  * State used in rendering Spinner
  */
-export declare type SpinnerState = ComponentState<SpinnerSlots> & SpinnerCommons;
+export declare type SpinnerState = ComponentState<SpinnerSlots> & Required<Pick<SpinnerProps, 'appearance' | 'labelPosition' | 'size' | 'status'>>;
 /**
  * Create the state required to render Spinner.

package/{lib → dist}/tsdoc-metadata.json RENAMED Viewed

File without changes

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Spinner.types.js","sourceRoot":"../src/","sources":["components/Spinner/Spinner.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\n\nexport type SpinnerSlots = {\n /*\n The root of the Spinner.\n * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.\n /\n root: NonNullable<Slot<'div'>>;\n /\n The slot for the animated svg.\n * The spinner slot receives the `className` and `style` that handles the spinning animation.\n * An svg is also rendered as a child of this slot\n /\n spinner?: Slot<'span'>;\n /\n The label of the Slider.\n * The label slot receives the styling related to the text associated with the Spinner.\n /\n label?: Slot<typeof Label>;\n};\n\~~ntype~~ ~~SpinnerCommons~~ = {\n /\n The appearance of the Spinner.\n * @default 'primary'\n /\n appearance?: 'primary' \| 'inverted';\n\n /\n Where the label is positioned relative to the Spinner\n * @default 'after'\n /\n labelPosition?: 'above' \| 'below' \| 'before' \| 'after';\n\n /\n The size of the spinner.\n * @default 'medium'\n /\n size?: 'tiny' \| 'extra-small' \| 'small' \| 'medium' \| 'large' \| 'extra-large' \| 'huge';\n\n /\n The status of the Spinner.\n * @default 'active'\n /\n status?: 'active' \| 'inactive';\n};\n\n/\n Spinner Props\n /\nexport type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & Partial<SpinnerCommons>;\n\n/\n State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> & ~~SpinnerCommons;\~~n"]}
1	+ {"version":3,"file":"Spinner.types.js","sourceRoot":"../src/","sources":["components/Spinner/Spinner.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Label } from '@fluentui/react-label';\n\nexport type SpinnerSlots = {\n /*\n The root of the Spinner.\n * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.\n /\n root: NonNullable<Slot<'div'>>;\n /\n The slot for the animated svg.\n * The spinner slot receives the `className` and `style` that handles the spinning animation.\n * An svg is also rendered as a child of this slot\n /\n spinner?: Slot<'span'>;\n /\n The label of the Slider.\n * The label slot receives the styling related to the text associated with the Spinner.\n /\n label?: Slot<typeof Label>;\n};\n\n/\n Spinner Props\n /\nexport type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & {\n /\n The appearance of the Spinner.\n * @default 'primary'\n /\n appearance?: 'primary' \| 'inverted';\n\n /\n Where the label is positioned relative to the Spinner\n * @default 'after'\n /\n labelPosition?: 'above' \| 'below' \| 'before' \| 'after';\n\n /\n The size of the spinner.\n * @default 'medium'\n /\n size?: 'tiny' \| 'extra-small' \| 'small' \| 'medium' \| 'large' \| 'extra-large' \| 'huge';\n\n /\n The status of the Spinner.\n * @default 'active'\n /\n status?: 'active' \| 'inactive';\n};\n\n/\n State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> &\n Required<Pick<SpinnerProps, 'appearance' \| 'labelPosition' \| 'size' \| 'status'>>;\n"]}

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

@@ -1,5 +1,5 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens } from '@fluentui/react-theme';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
 export const spinnerClassNames = {
   root: 'fui-Spinner',
   spinner: 'fui-Spinner__spinner',
@@ -33,16 +33,6 @@ const spinnnerSizes = {
   extraLarge: '40px',
   huge: '44px'
 };
-/*
- * TODO: Update with proper tokens when added
- * Stroke widths for the Spinner
- */
-const spinnerStrokeWidth = {
-  sWidth: '2px',
-  mWidth: '3px',
-  lWidth: '4px'
-};
 /*
  * TODO: Update with proper tokens when added
  * Animation for Spinner
@@ -56,25 +46,6 @@ const spinnerAnimation = {
     backgroundColor: 'transparent'
   }
 };
-/*
- * TODO: Update with proper tokens when added
- * Label sizes for the Spinner
- */
-const labelSizeTokens = {
-  body1: {
-    fontSize: tokens.fontSizeBase300,
-    lineHeight: tokens.lineHeightBase300
-  },
-  subtitle2: {
-    fontSize: tokens.fontSizeBase400,
-    lineHeight: tokens.lineHeightBase400
-  },
-  subtitle1: {
-    fontSize: tokens.fontSizeBase500,
-    lineHeight: tokens.lineHeightBase500
-  }
-};
 /**
  * Styles for the root slot
  */
@@ -112,49 +83,49 @@ const useLoaderStyles = /*#__PURE__*/__styles({
   "tiny": {
     "Bah9ito": "f1j4wmu2",
     "ut6tcf": "f1vppzuq",
-    "B7p06xz": "f1subliv",
+    "B7p06xz": "fv1u54w",
     "B807ibg": "fd2apu6"
   },
   "extraSmall": {
     "Bah9ito": "fmpqlna",
     "ut6tcf": "f15z5jzu",
-    "B7p06xz": "f1subliv",
+    "B7p06xz": "fv1u54w",
     "B807ibg": "fm96dlc"
   },
   "small": {
     "Bah9ito": "fo52gbo",
     "ut6tcf": "f1b41i3v",
-    "B7p06xz": "f1subliv",
+    "B7p06xz": "fv1u54w",
     "B807ibg": "f1i91flz"
   },
   "medium": {
     "Bah9ito": "f1aiqagr",
     "ut6tcf": "f1wtx80b",
-    "B7p06xz": "f17vzdod",
+    "B7p06xz": "f1flujpd",
     "B807ibg": "fjlkznx"
   },
   "large": {
     "Bah9ito": "f1trdq7b",
     "ut6tcf": "f9e0mc5",
-    "B7p06xz": "f17vzdod",
+    "B7p06xz": "f1flujpd",
     "B807ibg": "f1upeyd8"
   },
   "extraLarge": {
     "Bah9ito": "f89rf2a",
     "ut6tcf": "f1w2xg3q",
-    "B7p06xz": "f17vzdod",
+    "B7p06xz": "f1flujpd",
     "B807ibg": "f1r2vitc"
   },
   "huge": {
     "Bah9ito": "f1rx7k5y",
     "ut6tcf": "f1vtyt49",
-    "B7p06xz": "f1l9ujyx",
+    "B7p06xz": "f1owbg48",
     "B807ibg": "fmhqutl"
   }
 }, {
   "i": [".f1nahjz1:focus-visible{outline-style:3px solid 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;}", ".f1subliv>svg>circle{stroke-width:2px;}", ".fd2apu6>svg>circle{r:9;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fm96dlc>svg>circle{r:11;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1i91flz>svg>circle{r:13;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f17vzdod>svg>circle{stroke-width:3px;}", ".fjlkznx>svg>circle{r:14.5;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f1upeyd8>svg>circle{r:16.5;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".f1r2vitc>svg>circle{r:18.5;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1l9ujyx>svg>circle{stroke-width:4px;}", ".fmhqutl>svg>circle{r:20;}"]
+  "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);}", ".fd2apu6>svg>circle{r:9;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fm96dlc>svg>circle{r:11;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1i91flz>svg>circle{r:13;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}", ".fjlkznx>svg>circle{r:14.5;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f1upeyd8>svg>circle{r:16.5;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".f1r2vitc>svg>circle{r:18.5;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}", ".fmhqutl>svg>circle{r:20;}"]
 });
 const useTrackStyles = /*#__PURE__*/__styles({
@@ -190,35 +161,49 @@ const useTrackStyles = /*#__PURE__*/__styles({
 const useLabelStyles = /*#__PURE__*/__styles({
   "tiny": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi"
   },
   "extraSmall": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi"
   },
   "small": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi"
   },
   "medium": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "fl43uef",
     "Bg96gwp": "faaz57k"
   },
   "large": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "fl43uef",
     "Bg96gwp": "faaz57k"
   },
   "extraLarge": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "fl43uef",
     "Bg96gwp": "faaz57k"
   },
   "huge": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "f1pp30po",
+    "Bhrd7zp": "fl43uef",
     "Bg96gwp": "f106mvju"
   }
 }, {
-  "d": [".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
+  "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);}"]
 });
 /**
  * Apply styling to the Spinner slots based on the state

package/lib/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 } 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: '9',\n extraSmall: '11',\n small: '13',\n medium: '14.5',\n large: '16.5',\n extraLarge: '18.5',\n huge: '20',\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 * Stroke widths for the Spinner\n /\nconst spinnerStrokeWidth = {\n sWidth: '2px',\n mWidth: '3px',\n lWidth: '4px',\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 * TODO: Update with proper tokens when added\n * Label sizes for the Spinner\n /\nconst labelSizeTokens = {\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n subtitle2: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n\n subtitle1: {\n fontSize: tokens.fontSizeBase500,\n lineHeight: tokens.lineHeightBase500,\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-visible': {\n outlineStyle: '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: spinnerStrokeWidth.sWidth,\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: spinnerStrokeWidth.sWidth,\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: spinnerStrokeWidth.sWidth,\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: spinnerStrokeWidth.mWidth,\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: spinnerStrokeWidth.mWidth,\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: spinnerStrokeWidth.mWidth,\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: spinnerStrokeWidth.lWidth,\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 },\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 ...labelSizeTokens.body1,\n },\n\n extraSmall: {\n ...labelSizeTokens.body1,\n },\n\n small: {\n ...labelSizeTokens.body1,\n },\n\n medium: {\n ...labelSizeTokens.subtitle2,\n },\n\n large: {\n ...labelSizeTokens.subtitle2,\n },\n\n extraLarge: {\n ...labelSizeTokens.subtitle2,\n },\n\n huge: {\n ...labelSizeTokens.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: '9',\n extraSmall: '11',\n small: '13',\n medium: '14.5',\n large: '16.5',\n extraLarge: '18.5',\n huge: '20',\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-visible': {\n outlineStyle: '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 },\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/"}

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

@@ -42,16 +42,6 @@ const spinnnerSizes = {
   extraLarge: '40px',
   huge: '44px'
 };
-/*
- * TODO: Update with proper tokens when added
- * Stroke widths for the Spinner
- */
-const spinnerStrokeWidth = {
-  sWidth: '2px',
-  mWidth: '3px',
-  lWidth: '4px'
-};
 /*
  * TODO: Update with proper tokens when added
  * Animation for Spinner
@@ -65,25 +55,6 @@ const spinnerAnimation = {
     backgroundColor: 'transparent'
   }
 };
-/*
- * TODO: Update with proper tokens when added
- * Label sizes for the Spinner
- */
-const labelSizeTokens = {
-  body1: {
-    fontSize: react_theme_1.tokens.fontSizeBase300,
-    lineHeight: react_theme_1.tokens.lineHeightBase300
-  },
-  subtitle2: {
-    fontSize: react_theme_1.tokens.fontSizeBase400,
-    lineHeight: react_theme_1.tokens.lineHeightBase400
-  },
-  subtitle1: {
-    fontSize: react_theme_1.tokens.fontSizeBase500,
-    lineHeight: react_theme_1.tokens.lineHeightBase500
-  }
-};
 /**
  * Styles for the root slot
  */
@@ -121,49 +92,49 @@ const useLoaderStyles = /*#__PURE__*/react_1.__styles({
   "tiny": {
     "Bah9ito": "f1j4wmu2",
     "ut6tcf": "f1vppzuq",
-    "B7p06xz": "f1subliv",
+    "B7p06xz": "fv1u54w",
     "B807ibg": "fd2apu6"
   },
   "extraSmall": {
     "Bah9ito": "fmpqlna",
     "ut6tcf": "f15z5jzu",
-    "B7p06xz": "f1subliv",
+    "B7p06xz": "fv1u54w",
     "B807ibg": "fm96dlc"
   },
   "small": {
     "Bah9ito": "fo52gbo",
     "ut6tcf": "f1b41i3v",
-    "B7p06xz": "f1subliv",
+    "B7p06xz": "fv1u54w",
     "B807ibg": "f1i91flz"
   },
   "medium": {
     "Bah9ito": "f1aiqagr",
     "ut6tcf": "f1wtx80b",
-    "B7p06xz": "f17vzdod",
+    "B7p06xz": "f1flujpd",
     "B807ibg": "fjlkznx"
   },
   "large": {
     "Bah9ito": "f1trdq7b",
     "ut6tcf": "f9e0mc5",
-    "B7p06xz": "f17vzdod",
+    "B7p06xz": "f1flujpd",
     "B807ibg": "f1upeyd8"
   },
   "extraLarge": {
     "Bah9ito": "f89rf2a",
     "ut6tcf": "f1w2xg3q",
-    "B7p06xz": "f17vzdod",
+    "B7p06xz": "f1flujpd",
     "B807ibg": "f1r2vitc"
   },
   "huge": {
     "Bah9ito": "f1rx7k5y",
     "ut6tcf": "f1vtyt49",
-    "B7p06xz": "f1l9ujyx",
+    "B7p06xz": "f1owbg48",
     "B807ibg": "fmhqutl"
   }
 }, {
   "i": [".f1nahjz1:focus-visible{outline-style:3px solid 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;}", ".f1subliv>svg>circle{stroke-width:2px;}", ".fd2apu6>svg>circle{r:9;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fm96dlc>svg>circle{r:11;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1i91flz>svg>circle{r:13;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f17vzdod>svg>circle{stroke-width:3px;}", ".fjlkznx>svg>circle{r:14.5;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f1upeyd8>svg>circle{r:16.5;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".f1r2vitc>svg>circle{r:18.5;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1l9ujyx>svg>circle{stroke-width:4px;}", ".fmhqutl>svg>circle{r:20;}"]
+  "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);}", ".fd2apu6>svg>circle{r:9;}", ".fmpqlna>svg{height:24px;}", ".f15z5jzu>svg{width:24px;}", ".fm96dlc>svg>circle{r:11;}", ".fo52gbo>svg{height:28px;}", ".f1b41i3v>svg{width:28px;}", ".f1i91flz>svg>circle{r:13;}", ".f1aiqagr>svg{height:32px;}", ".f1wtx80b>svg{width:32px;}", ".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}", ".fjlkznx>svg>circle{r:14.5;}", ".f1trdq7b>svg{height:36px;}", ".f9e0mc5>svg{width:36px;}", ".f1upeyd8>svg>circle{r:16.5;}", ".f89rf2a>svg{height:40px;}", ".f1w2xg3q>svg{width:40px;}", ".f1r2vitc>svg>circle{r:18.5;}", ".f1rx7k5y>svg{height:44px;}", ".f1vtyt49>svg{width:44px;}", ".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}", ".fmhqutl>svg>circle{r:20;}"]
 });
 const useTrackStyles = /*#__PURE__*/react_1.__styles({
@@ -199,35 +170,49 @@ const useTrackStyles = /*#__PURE__*/react_1.__styles({
 const useLabelStyles = /*#__PURE__*/react_1.__styles({
   "tiny": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi"
   },
   "extraSmall": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi"
   },
   "small": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
+    "Bhrd7zp": "figsok6",
     "Bg96gwp": "f1i3iumi"
   },
   "medium": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "fl43uef",
     "Bg96gwp": "faaz57k"
   },
   "large": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "fl43uef",
     "Bg96gwp": "faaz57k"
   },
   "extraLarge": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "fod5ikn",
+    "Bhrd7zp": "fl43uef",
     "Bg96gwp": "faaz57k"
   },
   "huge": {
+    "Bahqtrf": "fk6fouc",
     "Be2twd7": "f1pp30po",
+    "Bhrd7zp": "fl43uef",
     "Bg96gwp": "f106mvju"
   }
 }, {
-  "d": [".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f1pp30po{font-size:var(--fontSizeBase500);}", ".f106mvju{line-height:var(--lineHeightBase500);}"]
+  "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);}"]
 });
 /**
  * Apply styling to the Spinner slots based on the 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 } 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: '9',\n extraSmall: '11',\n small: '13',\n medium: '14.5',\n large: '16.5',\n extraLarge: '18.5',\n huge: '20',\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 * Stroke widths for the Spinner\n /\nconst spinnerStrokeWidth = {\n sWidth: '2px',\n mWidth: '3px',\n lWidth: '4px',\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 * TODO: Update with proper tokens when added\n * Label sizes for the Spinner\n /\nconst labelSizeTokens = {\n body1: {\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n },\n\n subtitle2: {\n fontSize: tokens.fontSizeBase400,\n lineHeight: tokens.lineHeightBase400,\n },\n\n subtitle1: {\n fontSize: tokens.fontSizeBase500,\n lineHeight: tokens.lineHeightBase500,\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-visible': {\n outlineStyle: '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: spinnerStrokeWidth.sWidth,\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: spinnerStrokeWidth.sWidth,\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: spinnerStrokeWidth.sWidth,\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: spinnerStrokeWidth.mWidth,\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: spinnerStrokeWidth.mWidth,\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: spinnerStrokeWidth.mWidth,\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: spinnerStrokeWidth.lWidth,\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 },\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 ...labelSizeTokens.body1,\n },\n\n extraSmall: {\n ...labelSizeTokens.body1,\n },\n\n small: {\n ...labelSizeTokens.body1,\n },\n\n medium: {\n ...labelSizeTokens.subtitle2,\n },\n\n large: {\n ...labelSizeTokens.subtitle2,\n },\n\n extraLarge: {\n ...labelSizeTokens.subtitle2,\n },\n\n huge: {\n ...labelSizeTokens.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: '9',\n extraSmall: '11',\n small: '13',\n medium: '14.5',\n large: '16.5',\n extraLarge: '18.5',\n huge: '20',\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-visible': {\n outlineStyle: '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 },\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/"}

package/package.json CHANGED Viewed

@@ -1,10 +1,10 @@
 {
   "name": "@fluentui/react-spinner",
-  "version": "9.0.0-beta.8",
+  "version": "9.0.0-rc.3",
   "description": "Spinner component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "lib/index.d.ts",
+  "typings": "dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -28,14 +28,14 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.4",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.7",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-theme": "9.0.0-rc.6",
-    "@fluentui/react-label": "9.0.0-beta.11",
-    "@fluentui/react-utilities": "9.0.0-rc.7",
-    "@griffel/react": "1.0.3",
+    "@fluentui/react-theme": "9.0.0-rc.9",
+    "@fluentui/react-label": "9.0.0-rc.3",
+    "@fluentui/react-utilities": "9.0.0-rc.9",
+    "@griffel/react": "1.0.5",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {

package/lib/Spinner.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export * from './components/Spinner/index';

package/lib/components/Spinner/DefaultSvg.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export declare const DefaultSvg: () => JSX.Element;

package/lib/components/Spinner/Spinner.d.ts DELETED Viewed

@@ -1,6 +0,0 @@
-import type { SpinnerProps } from './Spinner.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-/**
- * Converged Spinner component for the fluentui repo
- */
-export declare const Spinner: ForwardRefComponent<SpinnerProps>;

package/lib/components/Spinner/Spinner.types.d.ts DELETED Viewed

@@ -1,51 +0,0 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { Label } from '@fluentui/react-label';
-export declare type SpinnerSlots = {
-    /**
-     * The root of the Spinner.
-     * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.
-     */
-    root: NonNullable<Slot<'div'>>;
-    /**
-     * The slot for the animated svg.
-     * The spinner slot receives the `className` and `style` that handles the spinning animation.
-     * An svg is also rendered as a child of this slot
-     */
-    spinner?: Slot<'span'>;
-    /**
-     * The label of the Slider.
-     * The label slot receives the styling related to the text associated with the Spinner.
-     */
-    label?: Slot<typeof Label>;
-};
-declare type SpinnerCommons = {
-    /**
-     * The appearance of the Spinner.
-     * @default 'primary'
-     */
-    appearance?: 'primary' | 'inverted';
-    /**
-     * Where the label is positioned relative to the Spinner
-     * @default 'after'
-     */
-    labelPosition?: 'above' | 'below' | 'before' | 'after';
-    /**
-     * The size of the spinner.
-     * @default 'medium'
-     */
-    size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
-    /**
-     * The status of the Spinner.
-     * @default 'active'
-     */
-    status?: 'active' | 'inactive';
-};
-/**
- * Spinner Props
- */
-export declare type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & Partial<SpinnerCommons>;
-/**
- * State used in rendering Spinner
- */
-export declare type SpinnerState = ComponentState<SpinnerSlots> & SpinnerCommons;
-export {};

package/lib/components/Spinner/index.d.ts DELETED Viewed

@@ -1,5 +0,0 @@
-export * from './Spinner';
-export * from './Spinner.types';
-export * from './renderSpinner';
-export * from './useSpinner';
-export * from './useSpinnerStyles';

package/lib/components/Spinner/renderSpinner.d.ts DELETED Viewed

@@ -1,5 +0,0 @@
-import type { SpinnerState } from './Spinner.types';
-/**
- * Render the final JSX of Spinner
- */
-export declare const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;

package/lib/components/Spinner/useSpinner.d.ts DELETED Viewed

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import type { SpinnerProps, SpinnerState } from './Spinner.types';
-/**
- * Create the state required to render Spinner.
- *
- * The returned state can be modified with hooks such as useSpinnerStyles_unstable,
- * before being passed to renderSpinner_unstable.
- *
- * @param props - props from this instance of Spinner
- * @param ref - reference to root HTMLElement of Spinner
- */
-export declare const useSpinner_unstable: (props: SpinnerProps, ref: React.Ref<HTMLElement>) => SpinnerState;

package/lib/components/Spinner/useSpinnerStyles.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-import type { SpinnerState, SpinnerSlots } from './Spinner.types';
-import type { SlotClassNames } from '@fluentui/react-utilities';
-export declare const spinnerClassNames: SlotClassNames<SpinnerSlots>;
-/**
- * Apply styling to the Spinner slots based on the state
- */
-export declare const useSpinnerStyles_unstable: (state: SpinnerState) => SpinnerState;

package/lib/index.d.ts DELETED Viewed

	@@ -1,2 +0,0 @@
1	- export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable, } from './Spinner';
2	- export type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';

package/lib-commonjs/Spinner.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export * from './components/Spinner/index';

package/lib-commonjs/components/Spinner/DefaultSvg.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export declare const DefaultSvg: () => JSX.Element;

package/lib-commonjs/components/Spinner/Spinner.d.ts DELETED Viewed

@@ -1,6 +0,0 @@
-import type { SpinnerProps } from './Spinner.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-/**
- * Converged Spinner component for the fluentui repo
- */
-export declare const Spinner: ForwardRefComponent<SpinnerProps>;

package/lib-commonjs/components/Spinner/Spinner.types.d.ts DELETED Viewed

@@ -1,51 +0,0 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import { Label } from '@fluentui/react-label';
-export declare type SpinnerSlots = {
-    /**
-     * The root of the Spinner.
-     * The root slot receives the `className` and `style` specified directly on the `<Spinner>`.
-     */
-    root: NonNullable<Slot<'div'>>;
-    /**
-     * The slot for the animated svg.
-     * The spinner slot receives the `className` and `style` that handles the spinning animation.
-     * An svg is also rendered as a child of this slot
-     */
-    spinner?: Slot<'span'>;
-    /**
-     * The label of the Slider.
-     * The label slot receives the styling related to the text associated with the Spinner.
-     */
-    label?: Slot<typeof Label>;
-};
-declare type SpinnerCommons = {
-    /**
-     * The appearance of the Spinner.
-     * @default 'primary'
-     */
-    appearance?: 'primary' | 'inverted';
-    /**
-     * Where the label is positioned relative to the Spinner
-     * @default 'after'
-     */
-    labelPosition?: 'above' | 'below' | 'before' | 'after';
-    /**
-     * The size of the spinner.
-     * @default 'medium'
-     */
-    size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge';
-    /**
-     * The status of the Spinner.
-     * @default 'active'
-     */
-    status?: 'active' | 'inactive';
-};
-/**
- * Spinner Props
- */
-export declare type SpinnerProps = Omit<ComponentProps<SpinnerSlots>, 'size'> & Partial<SpinnerCommons>;
-/**
- * State used in rendering Spinner
- */
-export declare type SpinnerState = ComponentState<SpinnerSlots> & SpinnerCommons;
-export {};

package/lib-commonjs/components/Spinner/index.d.ts DELETED Viewed

@@ -1,5 +0,0 @@
-export * from './Spinner';
-export * from './Spinner.types';
-export * from './renderSpinner';
-export * from './useSpinner';
-export * from './useSpinnerStyles';

package/lib-commonjs/components/Spinner/renderSpinner.d.ts DELETED Viewed

@@ -1,5 +0,0 @@
-import type { SpinnerState } from './Spinner.types';
-/**
- * Render the final JSX of Spinner
- */
-export declare const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;

package/lib-commonjs/components/Spinner/useSpinner.d.ts DELETED Viewed

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import type { SpinnerProps, SpinnerState } from './Spinner.types';
-/**
- * Create the state required to render Spinner.
- *
- * The returned state can be modified with hooks such as useSpinnerStyles_unstable,
- * before being passed to renderSpinner_unstable.
- *
- * @param props - props from this instance of Spinner
- * @param ref - reference to root HTMLElement of Spinner
- */
-export declare const useSpinner_unstable: (props: SpinnerProps, ref: React.Ref<HTMLElement>) => SpinnerState;

package/lib-commonjs/components/Spinner/useSpinnerStyles.d.ts DELETED Viewed

@@ -1,7 +0,0 @@
-import type { SpinnerState, SpinnerSlots } from './Spinner.types';
-import type { SlotClassNames } from '@fluentui/react-utilities';
-export declare const spinnerClassNames: SlotClassNames<SpinnerSlots>;
-/**
- * Apply styling to the Spinner slots based on the state
- */
-export declare const useSpinnerStyles_unstable: (state: SpinnerState) => SpinnerState;

package/lib-commonjs/index.d.ts DELETED Viewed

	@@ -1,2 +0,0 @@
1	- export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable, } from './Spinner';
2	- export type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';