@fluentui/react-spinner 9.0.0-beta.9 → 9.0.0-rc.4

package/CHANGELOG.json

@@ -2,7 +2,150 @@
   "name": "@fluentui/react-spinner",
   "entries": [
     {
-      "date": "Thu, 05 May 2022 18:24:37 GMT",
+      "date": "Thu, 26 May 2022 21:00:05 GMT",
+      "tag": "@fluentui/react-spinner_v9.0.0-rc.4",
+      "version": "9.0.0-rc.4",
+      "comments": {
+        "none": [
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "557ee9e396b4072ce539e5a2f8230d78d644adeb",
+            "comment": "fix Spinner on Firefox: add px units to r values"
+          },
+          {
+            "author": "sarah.higley@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "016c8e6d0984c27bfb0bb95abf207ce5a5a2c077",
+            "comment": "add prefers-reduced-motion to spinner"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "519ec97161849b2d6adbaa6ef56d28c92b10d71e",
+            "comment": "updates to docs"
+          }
+        ],
+        "prerelease": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "d5593311dc3a5f63d3b239e52a5c34db33af54c2",
+            "comment": "BREAKING: Remove `status` prop in Spinner"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-label to v9.0.0-rc.4",
+            "commit": "3cf55ce998048554bf6a550de44403843ea8ede0"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 23 May 2022 18:56:51 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": {

package/CHANGELOG.md

@@ -1,12 +1,52 @@
 # Change Log - @fluentui/react-spinner
 
-This log was last generated on Thu, 05 May 2022 18:24:37 GMT and should not be manually modified.
+This log was last generated on Thu, 26 May 2022 21:00:05 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-rc.4)
+
+Thu, 26 May 2022 21:00:05 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-rc.3..@fluentui/react-spinner_v9.0.0-rc.4)
+
+### Changes
+
+- BREAKING: Remove `status` prop in Spinner ([PR #23204](https://github.com/microsoft/fluentui/pull/23204) by ololubek@microsoft.com)
+- Bump @fluentui/react-label to v9.0.0-rc.4 ([PR #23267](https://github.com/microsoft/fluentui/pull/23267) by beachball)
+
+## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-rc.3)
+
+Mon, 23 May 2022 18:56:51 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:24:37 GMT 
+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

package/README.md

@@ -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,15 +12,18 @@ To import Spinner:
 import { Spinner } from '@fluentui/react-spinner';
 ```
 
-Once the Spinner component is ready for production use, the component will be available at:
+### Examples
 
 ```js
-import { Spinner } from '@fluentui/react-components';
+<Spinner label="Loading..." />
+<Spinner size="large" />
 ```
 
-### Examples
+#### Rendering Spinner without the animated circle
+
+You can directly override the Spinner slot to render a Spinner without the animated circle, as shown below
 
 ```js
-<Spinner label="Loading..." />
-<Spinner size="large" />
+<Spinner spinner='' appearance="primary" label="Primary Spinner" />
+<Spinner spinner={{style:{visibility: 'hidden'}}} appearance="inverted" label="Inverted Spinner" />
 ```

package/Spec.md

@@ -88,8 +88,6 @@ export type SpinnerProps = ComponentProps &
     /* The size prop sets the size of the Spinner
      * @defaultValue "medium"*/
     size?: 'tiny' | 'extra-small' | 'small' | 'medium' | 'large' | 'extra-large' | 'huge',
-    // inactive ? : boolean
-    status?: 'active' | 'inactive',
   };
 ```
 

package/dist/index.d.ts

@@ -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'
@@ -34,18 +37,8 @@ declare type SpinnerCommons = {
      * @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>;
-
 export declare type SpinnerSlots = {
     /**
      * The root of the Spinner.
@@ -68,7 +61,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'>>;
 
 /**
  * Create the state required to render Spinner.

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

@@ -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"]}
+{"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/**\n * State used in rendering Spinner\n */\nexport type SpinnerState = ComponentState<SpinnerSlots> &\n  Required<Pick<SpinnerProps, 'appearance' | 'labelPosition' | 'size'>>;\n"]}

package/lib/components/Spinner/renderSpinner.js

@@ -10,12 +10,11 @@ export const renderSpinner_unstable = state => {
     slotProps
   } = getSlots(state);
   const {
-    labelPosition,
-    status
+    labelPosition
   } = state;
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
   }, slots.label && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
-  }), slots.spinner && status === 'active' && /*#__PURE__*/React.createElement(slots.spinner, { ...slotProps.spinner
+  }), slots.spinner && /*#__PURE__*/React.createElement(slots.spinner, { ...slotProps.spinner
   }), slots.label && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
   }));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Spinner/renderSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAe,KAAf,CAArC;AACA,QAAM;AAAE,IAAA,aAAF;AAAiB,IAAA;AAAjB,MAA4B,KAAlC;AACA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,QAA/D,kBAA4E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAD/E,EAEG,KAAK,CAAC,OAAN,IAAiB,MAAM,KAAK,QAA5B,iBAAwC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAF3C,EAGG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,OAA/D,kBAA2E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAH9E,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState) => {\n  const { slots, slotProps } = getSlots<SpinnerSlots>(state);\n  const { labelPosition, status } = state;\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.label && (labelPosition === 'above' || labelPosition === 'before') && <slots.label {...slotProps.label} />}\n      {slots.spinner && status === 'active' && <slots.spinner {...slotProps.spinner} />}\n      {slots.label && (labelPosition === 'below' || labelPosition === 'after') && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Spinner/renderSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAe,KAAf,CAArC;AACA,QAAM;AAAE,IAAA;AAAF,MAAoB,KAA1B;AACA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,QAA/D,kBAA4E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAD/E,EAEG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,CAFpB,EAGG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,OAA/D,kBAA2E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;AAAf,GAAZ,CAH9E,CADF;AAOD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\n\n/**\n * Render the final JSX of Spinner\n */\nexport const renderSpinner_unstable = (state: SpinnerState) => {\n  const { slots, slotProps } = getSlots<SpinnerSlots>(state);\n  const { labelPosition } = state;\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.label && (labelPosition === 'above' || labelPosition === 'before') && <slots.label {...slotProps.label} />}\n      {slots.spinner && <slots.spinner {...slotProps.spinner} />}\n      {slots.label && (labelPosition === 'below' || labelPosition === 'after') && <slots.label {...slotProps.label} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Spinner/useSpinner.js

@@ -17,8 +17,7 @@ export const useSpinner_unstable = (props, ref) => {
   const {
     appearance = 'primary',
     labelPosition = 'after',
-    size = 'medium',
-    status = 'active'
+    size = 'medium'
   } = props;
   const baseId = useId('spinner');
   const {
@@ -51,7 +50,6 @@ export const useSpinner_unstable = (props, ref) => {
     appearance,
     labelPosition,
     size,
-    status,
     components: {
       root: 'div',
       spinner: 'span',

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Spinner/useSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAEA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,UAAT,QAA2B,cAA3B;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;AACpG;AACA,QAAM;AAAE,IAAA,UAAU,GAAG,SAAf;AAA0B,IAAA,aAAa,GAAG,OAA1C;AAAmD,IAAA,IAAI,GAAG,QAA1D;AAAoE,IAAA,MAAM,GAAG;AAA7E,MAA0F,KAAhG;AACA,QAAM,MAAM,GAAG,KAAK,CAAC,SAAD,CAApB;AAEA,QAAM;AAAE,IAAA,QAAF;AAAY,OAAG;AAAf,MAAwB,KAA9B;AACA,QAAM,UAAU,GAAG,qBAAqB,CAAC,KAAD,EAAQ;AAAE,IAAA,GAAF;AAAO,OAAG;AAAV,GAAR,EAA0B,CAAC,MAAD,CAA1B,CAAxC;AAEA,QAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AACnD,IAAA,YAAY,EAAE;AACZ,MAAA,EAAE,EAAE;AADQ,KADqC;AAInD,IAAA,QAAQ,EAAE;AAJyC,GAAd,CAAvC;AAOA,QAAM,gBAAgB,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAP,EAAgB;AACvD,IAAA,QAAQ,EAAE,IAD6C;AAEvD,IAAA,YAAY,EAAE;AACZ,MAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CADE;AAEZ,MAAA;AAFY;AAFyC,GAAhB,CAAzC;;AAQA,MAAI,cAAc,IAAI,gBAAlB,IAAsC,CAAC,gBAAgB,CAAC,iBAAD,CAA3D,EAAgF;AAC9E,IAAA,gBAAgB,CAAC,iBAAD,CAAhB,GAAsC,cAAc,CAAC,EAArD;AACD;;AAED,QAAM,KAAK,GAAiB;AAC1B,IAAA,UAD0B;AAE1B,IAAA,aAF0B;AAG1B,IAAA,IAH0B;AAI1B,IAAA,MAJ0B;AAK1B,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,OAAO,EAAE,MAFC;AAGV,MAAA,KAAK,EAAE;AAHG,KALc;AAU1B,IAAA,IAAI,EAAE,UAVoB;AAW1B,IAAA,OAAO,EAAE,gBAXiB;AAY1B,IAAA,KAAK,EAAE;AAZmB,GAA5B;AAcA,SAAO,KAAP;AACD,CA1CM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {\n  // Props\n  const { appearance = 'primary', labelPosition = 'after', size = 'medium', status = 'active' } = props;\n  const baseId = useId('spinner');\n\n  const { tabIndex, ...rest } = props;\n  const nativeRoot = getNativeElementProps('div', { ref, ...rest }, ['size']);\n\n  const labelShorthand = resolveShorthand(props.label, {\n    defaultProps: {\n      id: baseId,\n    },\n    required: false,\n  });\n\n  const spinnerShortHand = resolveShorthand(props.spinner, {\n    required: true,\n    defaultProps: {\n      children: <DefaultSvg />,\n      tabIndex,\n    },\n  });\n\n  if (labelShorthand && spinnerShortHand && !spinnerShortHand['aria-labelledby']) {\n    spinnerShortHand['aria-labelledby'] = labelShorthand.id;\n  }\n\n  const state: SpinnerState = {\n    appearance,\n    labelPosition,\n    size,\n    status,\n    components: {\n      root: 'div',\n      spinner: 'span',\n      label: Label,\n    },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    label: labelShorthand,\n  };\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Spinner/useSpinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAEA,SAAS,KAAT,QAAsB,uBAAtB;AACA,SAAS,UAAT,QAA2B,cAA3B;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;AACpG;AACA,QAAM;AAAE,IAAA,UAAU,GAAG,SAAf;AAA0B,IAAA,aAAa,GAAG,OAA1C;AAAmD,IAAA,IAAI,GAAG;AAA1D,MAAuE,KAA7E;AACA,QAAM,MAAM,GAAG,KAAK,CAAC,SAAD,CAApB;AAEA,QAAM;AAAE,IAAA,QAAF;AAAY,OAAG;AAAf,MAAwB,KAA9B;AACA,QAAM,UAAU,GAAG,qBAAqB,CAAC,KAAD,EAAQ;AAAE,IAAA,GAAF;AAAO,OAAG;AAAV,GAAR,EAA0B,CAAC,MAAD,CAA1B,CAAxC;AAEA,QAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;AACnD,IAAA,YAAY,EAAE;AACZ,MAAA,EAAE,EAAE;AADQ,KADqC;AAInD,IAAA,QAAQ,EAAE;AAJyC,GAAd,CAAvC;AAOA,QAAM,gBAAgB,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAP,EAAgB;AACvD,IAAA,QAAQ,EAAE,IAD6C;AAEvD,IAAA,YAAY,EAAE;AACZ,MAAA,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CADE;AAEZ,MAAA;AAFY;AAFyC,GAAhB,CAAzC;;AAQA,MAAI,cAAc,IAAI,gBAAlB,IAAsC,CAAC,gBAAgB,CAAC,iBAAD,CAA3D,EAAgF;AAC9E,IAAA,gBAAgB,CAAC,iBAAD,CAAhB,GAAsC,cAAc,CAAC,EAArD;AACD;;AAED,QAAM,KAAK,GAAiB;AAC1B,IAAA,UAD0B;AAE1B,IAAA,aAF0B;AAG1B,IAAA,IAH0B;AAI1B,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,OAAO,EAAE,MAFC;AAGV,MAAA,KAAK,EAAE;AAHG,KAJc;AAS1B,IAAA,IAAI,EAAE,UAToB;AAU1B,IAAA,OAAO,EAAE,gBAViB;AAW1B,IAAA,KAAK,EAAE;AAXmB,GAA5B;AAaA,SAAO,KAAP;AACD,CAzCM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { SpinnerProps, SpinnerState } from './Spinner.types';\nimport { Label } from '@fluentui/react-label';\nimport { DefaultSvg } from './DefaultSvg';\n\n/**\n * Create the state required to render Spinner.\n *\n * The returned state can be modified with hooks such as useSpinnerStyles_unstable,\n * before being passed to renderSpinner_unstable.\n *\n * @param props - props from this instance of Spinner\n * @param ref - reference to root HTMLElement of Spinner\n */\nexport const useSpinner_unstable = (props: SpinnerProps, ref: React.Ref<HTMLElement>): SpinnerState => {\n  // Props\n  const { appearance = 'primary', labelPosition = 'after', size = 'medium' } = props;\n  const baseId = useId('spinner');\n\n  const { tabIndex, ...rest } = props;\n  const nativeRoot = getNativeElementProps('div', { ref, ...rest }, ['size']);\n\n  const labelShorthand = resolveShorthand(props.label, {\n    defaultProps: {\n      id: baseId,\n    },\n    required: false,\n  });\n\n  const spinnerShortHand = resolveShorthand(props.spinner, {\n    required: true,\n    defaultProps: {\n      children: <DefaultSvg />,\n      tabIndex,\n    },\n  });\n\n  if (labelShorthand && spinnerShortHand && !spinnerShortHand['aria-labelledby']) {\n    spinnerShortHand['aria-labelledby'] = labelShorthand.id;\n  }\n\n  const state: SpinnerState = {\n    appearance,\n    labelPosition,\n    size,\n    components: {\n      root: 'div',\n      spinner: 'span',\n      label: Label,\n    },\n    root: nativeRoot,\n    spinner: spinnerShortHand,\n    label: labelShorthand,\n  };\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Spinner/useSpinnerStyles.js

@@ -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',
@@ -11,13 +11,13 @@ export const spinnerClassNames = {
  */
 
 const rValues = {
-  tiny: '9',
-  extraSmall: '11',
-  small: '13',
-  medium: '14.5',
-  large: '16.5',
-  extraLarge: '18.5',
-  huge: '20'
+  tiny: '9px',
+  extraSmall: '11px',
+  small: '13px',
+  medium: '14.5px',
+  large: '16.5px',
+  extraLarge: '18.5px',
+  huge: '20px'
 };
 /*
  * TODO: Update with proper tokens when added
@@ -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",
-    "B807ibg": "fd2apu6"
+    "B7p06xz": "fv1u54w",
+    "B807ibg": "fngtx1d"
   },
   "extraSmall": {
     "Bah9ito": "fmpqlna",
     "ut6tcf": "f15z5jzu",
-    "B7p06xz": "f1subliv",
-    "B807ibg": "fm96dlc"
+    "B7p06xz": "fv1u54w",
+    "B807ibg": "fadawes"
   },
   "small": {
     "Bah9ito": "fo52gbo",
     "ut6tcf": "f1b41i3v",
-    "B7p06xz": "f1subliv",
-    "B807ibg": "f1i91flz"
+    "B7p06xz": "fv1u54w",
+    "B807ibg": "f1xqyyrl"
   },
   "medium": {
     "Bah9ito": "f1aiqagr",
     "ut6tcf": "f1wtx80b",
-    "B7p06xz": "f17vzdod",
-    "B807ibg": "fjlkznx"
+    "B7p06xz": "f1flujpd",
+    "B807ibg": "f1u06hy7"
   },
   "large": {
     "Bah9ito": "f1trdq7b",
     "ut6tcf": "f9e0mc5",
-    "B7p06xz": "f17vzdod",
-    "B807ibg": "f1upeyd8"
+    "B7p06xz": "f1flujpd",
+    "B807ibg": "f13pmvhl"
   },
   "extraLarge": {
     "Bah9ito": "f89rf2a",
     "ut6tcf": "f1w2xg3q",
-    "B7p06xz": "f17vzdod",
-    "B807ibg": "f1r2vitc"
+    "B7p06xz": "f1flujpd",
+    "B807ibg": "fmn74v6"
   },
   "huge": {
     "Bah9ito": "f1rx7k5y",
     "ut6tcf": "f1vtyt49",
-    "B7p06xz": "f1l9ujyx",
-    "B807ibg": "fmhqutl"
+    "B7p06xz": "f1owbg48",
+    "B807ibg": "f1fr1izd"
   }
 }, {
   "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);}", ".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;}"]
 });
 
 const useTrackStyles = /*#__PURE__*/__styles({
@@ -179,46 +150,62 @@ const useTrackStyles = /*#__PURE__*/__styles({
     "B8001xd": "fu3xdw0",
     "Bdordwa": ["f1ttdh6v", "fmyjox0"],
     "Bo2mdfu": "f1eseayc",
+    "E10nrc": "folzdkc",
+    "Bwl7w15": "fhlfkde",
     "Bksq7rz": "f12uf417",
     "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);}"],
   "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;}}"],
-  "t": ["@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}", "@media screen and (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}"]
+  "t": ["@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}", "@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", "@media screen and (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}"]
 });
 
 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