@fluentui/react-spinner 9.0.10 → 9.0.12

package/CHANGELOG.json

@@ -2,7 +2,63 @@
   "name": "@fluentui/react-spinner",
   "entries": [
     {
-      "date": "Fri, 11 Nov 2022 14:53:26 GMT",
+      "date": "Mon, 05 Dec 2022 18:25:28 GMT",
+      "tag": "@fluentui/react-spinner_v9.0.12",
+      "version": "9.0.12",
+      "comments": {
+        "patch": [
+          {
+            "author": "tristan.watanabe@gmail.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "5874b65a2be89f82ab07baab183f6b19ca9af239",
+            "comment": "chore: Migrate to new package structure."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-theme to v9.1.3",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-label to v9.0.12",
+            "commit": "4c29542a51bf068e171690cc8e59c14489883912"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 17 Nov 2022 23:05:47 GMT",
+      "tag": "@fluentui/react-spinner_v9.0.11",
+      "version": "9.0.11",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-spinner",
+            "commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
+            "comment": "chore: update package scaffold"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-label to v9.0.11",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-spinner",
+            "comment": "Bump @fluentui/react-utilities to v9.2.2",
+            "commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 11 Nov 2022 14:57:39 GMT",
       "tag": "@fluentui/react-spinner_v9.0.10",
       "version": "9.0.10",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-spinner
 
-This log was last generated on Fri, 11 Nov 2022 14:53:26 GMT and should not be manually modified.
+This log was last generated on Mon, 05 Dec 2022 18:25:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.12)
+
+Mon, 05 Dec 2022 18:25:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.11..@fluentui/react-spinner_v9.0.12)
+
+### Patches
+
+- chore: Migrate to new package structure. ([PR #25814](https://github.com/microsoft/fluentui/pull/25814) by tristan.watanabe@gmail.com)
+- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+- Bump @fluentui/react-label to v9.0.12 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
+
+## [9.0.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.11)
+
+Thu, 17 Nov 2022 23:05:47 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.10..@fluentui/react-spinner_v9.0.11)
+
+### Patches
+
+- Bump @fluentui/react-label to v9.0.11 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
+
 ## [9.0.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.10)
 
-Fri, 11 Nov 2022 14:53:26 GMT 
+Fri, 11 Nov 2022 14:57:39 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.9..@fluentui/react-spinner_v9.0.10)
 
 ### Patches

package/lib/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"../src/","sources":["Spinner.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Spinner/index';\n"]}
+{"version":3,"file":"Spinner.js","sourceRoot":"../src/","sources":["packages/react-components/react-spinner/src/Spinner.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Spinner/index';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Spinner/DefaultSvg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,OAAO,MAAM,UAAU,GAAG,mBACxB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;EAAK,SAAS,EAAC;AAAf,CAAA,eACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;EAAQ,SAAS,EAAC;AAAlB,CAAA,CADF,eAEE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;EAAQ,SAAS,EAAC;AAAlB,CAAA,CAFF,CADK","sourcesContent":["import * as React from 'react';\n\nexport const DefaultSvg = () => (\n  <svg className=\"fui-Spinner__Progressbar\">\n    <circle className=\"fui-Spinner__Track\" />\n    <circle className=\"fui-Spinner__Tail\" />\n  </svg>\n);\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-spinner/src/components/Spinner/DefaultSvg.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,OAAO,MAAM,UAAU,GAAG,mBACxB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;EAAK,SAAS,EAAC;AAAf,CAAA,eACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;EAAQ,SAAS,EAAC;AAAlB,CAAA,CADF,eAEE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;EAAQ,SAAS,EAAC;AAAlB,CAAA,CAFF,CADK","sourcesContent":["import * as React from 'react';\n\nexport const DefaultSvg = () => (\n  <svg className=\"fui-Spinner__Progressbar\">\n    <circle className=\"fui-Spinner__Track\" />\n    <circle className=\"fui-Spinner__Tail\" />\n  </svg>\n);\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;EAEA,yBAAyB,CAAC,KAAD,CAAzB;EACA,OAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CALyD,CAAnD;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles';\nimport type { SpinnerProps } from './Spinner.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner: ForwardRefComponent<SpinnerProps> = React.forwardRef((props, ref) => {\n  const state = useSpinner_unstable(props, ref);\n\n  useSpinnerStyles_unstable(state);\n  return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;EAEA,yBAAyB,CAAC,KAAD,CAAzB;EACA,OAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CALyD,CAAnD;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles';\nimport type { SpinnerProps } from './Spinner.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner: ForwardRefComponent<SpinnerProps> = React.forwardRef((props, ref) => {\n  const state = useSpinner_unstable(props, ref);\n\n  useSpinnerStyles_unstable(state);\n  return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"],"sourceRoot":"../src/"}

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\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"]}
+{"version":3,"file":"Spinner.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-spinner/src/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/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-spinner/src/components/Spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n"]}

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;EAC5D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAe,KAAf,CAArC;EACA,MAAM;IAAE;EAAF,IAAoB,KAA1B;EACA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,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;EAAf,CAAZ,CAD/E,EAEG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,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;EAAf,CAAZ,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/"}
+{"version":3,"sources":["packages/react-components/react-spinner/src/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;EAC5D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAe,KAAf,CAArC;EACA,MAAM;IAAE;EAAF,IAAoB,KAA1B;EACA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,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;EAAf,CAAZ,CAD/E,EAEG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,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;EAAf,CAAZ,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.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;EACpG;EACA,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B,aAAa,GAAG,OAA1C;IAAmD,IAAI,GAAG;EAA1D,IAAuE,KAA7E;EACA,MAAM,MAAM,GAAG,KAAK,CAAC,SAAD,CAApB;EAEA,MAAM;IAAE,IAAI,GAAG,aAAT;IAAwB,QAAxB;IAAkC,GAAG;EAArC,IAA8C,KAApD;EACA,MAAM,UAAU,GAAG,qBAAqB,CAAC,KAAD,EAAQ;IAAE,GAAF;IAAO,IAAP;IAAa,GAAG;EAAhB,CAAR,EAAgC,CAAC,MAAD,CAAhC,CAAxC;EAEA,MAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;IACnD,YAAY,EAAE;MACZ,EAAE,EAAE;IADQ,CADqC;IAInD,QAAQ,EAAE;EAJyC,CAAd,CAAvC;EAOA,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAP,EAAgB;IACvD,QAAQ,EAAE,IAD6C;IAEvD,YAAY,EAAE;MACZ,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CADE;MAEZ;IAFY;EAFyC,CAAhB,CAAzC;;EAQA,IAAI,cAAc,IAAI,UAAlB,IAAgC,CAAC,UAAU,CAAC,iBAAD,CAA/C,EAAoE;IAClE,UAAU,CAAC,iBAAD,CAAV,GAAgC,cAAc,CAAC,EAA/C;EACD;;EAED,MAAM,KAAK,GAAiB;IAC1B,UAD0B;IAE1B,aAF0B;IAG1B,IAH0B;IAI1B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,OAAO,EAAE,MAFC;MAGV,KAAK,EAAE;IAHG,CAJc;IAS1B,IAAI,EAAE,UAToB;IAU1B,OAAO,EAAE,gBAViB;IAW1B,KAAK,EAAE;EAXmB,CAA5B;EAaA,OAAO,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 { role = 'progressbar', tabIndex, ...rest } = props;\n  const nativeRoot = getNativeElementProps('div', { ref, role, ...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 && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['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/"}
+{"version":3,"sources":["packages/react-components/react-spinner/src/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;EACpG;EACA,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B,aAAa,GAAG,OAA1C;IAAmD,IAAI,GAAG;EAA1D,IAAuE,KAA7E;EACA,MAAM,MAAM,GAAG,KAAK,CAAC,SAAD,CAApB;EAEA,MAAM;IAAE,IAAI,GAAG,aAAT;IAAwB,QAAxB;IAAkC,GAAG;EAArC,IAA8C,KAApD;EACA,MAAM,UAAU,GAAG,qBAAqB,CAAC,KAAD,EAAQ;IAAE,GAAF;IAAO,IAAP;IAAa,GAAG;EAAhB,CAAR,EAAgC,CAAC,MAAD,CAAhC,CAAxC;EAEA,MAAM,cAAc,GAAG,gBAAgB,CAAC,KAAK,CAAC,KAAP,EAAc;IACnD,YAAY,EAAE;MACZ,EAAE,EAAE;IADQ,CADqC;IAInD,QAAQ,EAAE;EAJyC,CAAd,CAAvC;EAOA,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,KAAK,CAAC,OAAP,EAAgB;IACvD,QAAQ,EAAE,IAD6C;IAEvD,YAAY,EAAE;MACZ,QAAQ,eAAE,KAAA,CAAA,aAAA,CAAC,UAAD,EAAW,IAAX,CADE;MAEZ;IAFY;EAFyC,CAAhB,CAAzC;;EAQA,IAAI,cAAc,IAAI,UAAlB,IAAgC,CAAC,UAAU,CAAC,iBAAD,CAA/C,EAAoE;IAClE,UAAU,CAAC,iBAAD,CAAV,GAAgC,cAAc,CAAC,EAA/C;EACD;;EAED,MAAM,KAAK,GAAiB;IAC1B,UAD0B;IAE1B,aAF0B;IAG1B,IAH0B;IAI1B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,OAAO,EAAE,MAFC;MAGV,KAAK,EAAE;IAHG,CAJc;IAS1B,IAAI,EAAE,UAToB;IAU1B,OAAO,EAAE,gBAViB;IAW1B,KAAK,EAAE;EAXmB,CAA5B;EAaA,OAAO,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 { role = 'progressbar', tabIndex, ...rest } = props;\n  const nativeRoot = getNativeElementProps('div', { ref, role, ...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 && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['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.map

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

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,iBAFF,EAGE,sBAHF,EAIE,mBAJF,EAKE,yBALF,QAMO,WANP","sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-spinner/src/index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,iBAFF,EAGE,sBAHF,EAIE,mBAJF,EAKE,yBALF,QAMO,WANP","sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\n"],"sourceRoot":"../src/"}

package/lib-amd/Spinner.js

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./components/Spinner/index"], function (require, exports, tslib_1, index_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(index_1, exports);
+});
+//# sourceMappingURL=Spinner.js.map

package/lib-amd/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-spinner/src/Spinner.ts"],"names":[],"mappings":";;;IAAA,uCAA2C","sourcesContent":["export * from './components/Spinner/index';\n"]}

package/lib-amd/components/Spinner/DefaultSvg.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "react"], function (require, exports, React) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.DefaultSvg = void 0;
+    var DefaultSvg = function () { return (React.createElement("svg", { className: "fui-Spinner__Progressbar" },
+        React.createElement("circle", { className: "fui-Spinner__Track" }),
+        React.createElement("circle", { className: "fui-Spinner__Tail" }))); };
+    exports.DefaultSvg = DefaultSvg;
+});
+//# sourceMappingURL=DefaultSvg.js.map

package/lib-amd/components/Spinner/DefaultSvg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultSvg.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/DefaultSvg.tsx"],"names":[],"mappings":";;;;IAEO,IAAM,UAAU,GAAG,cAAM,OAAA,CAC9B,6BAAK,SAAS,EAAC,0BAA0B;QACvC,gCAAQ,SAAS,EAAC,oBAAoB,GAAG;QACzC,gCAAQ,SAAS,EAAC,mBAAmB,GAAG,CACpC,CACP,EAL+B,CAK/B,CAAC;IALW,QAAA,UAAU,cAKrB","sourcesContent":["import * as React from 'react';\n\nexport const DefaultSvg = () => (\n  <svg className=\"fui-Spinner__Progressbar\">\n    <circle className=\"fui-Spinner__Track\" />\n    <circle className=\"fui-Spinner__Tail\" />\n  </svg>\n);\n"]}

package/lib-amd/components/Spinner/Spinner.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useSpinner", "./renderSpinner", "./useSpinnerStyles"], function (require, exports, React, useSpinner_1, renderSpinner_1, useSpinnerStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Spinner = void 0;
+    /**
+     * Converged Spinner component for the fluentui repo
+     */
+    exports.Spinner = React.forwardRef(function (props, ref) {
+        var state = useSpinner_1.useSpinner_unstable(props, ref);
+        useSpinnerStyles_1.useSpinnerStyles_unstable(state);
+        return renderSpinner_1.renderSpinner_unstable(state);
+    });
+    exports.Spinner.displayName = 'Spinner';
+});
+//# sourceMappingURL=Spinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,OAAO,GAAsC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAM,KAAK,GAAG,gCAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE9C,4CAAyB,CAAC,KAAK,CAAC,CAAC;QACjC,OAAO,sCAAsB,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles';\nimport type { SpinnerProps } from './Spinner.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner: ForwardRefComponent<SpinnerProps> = React.forwardRef((props, ref) => {\n  const state = useSpinner_unstable(props, ref);\n\n  useSpinnerStyles_unstable(state);\n  return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"]}

package/lib-amd/components/Spinner/Spinner.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=Spinner.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/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-amd/components/Spinner/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./Spinner", "./Spinner.types", "./renderSpinner", "./useSpinner", "./useSpinnerStyles"], function (require, exports, tslib_1, Spinner_1, Spinner_types_1, renderSpinner_1, useSpinner_1, useSpinnerStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Spinner_1, exports);
+    tslib_1.__exportStar(Spinner_types_1, exports);
+    tslib_1.__exportStar(renderSpinner_1, exports);
+    tslib_1.__exportStar(useSpinner_1, exports);
+    tslib_1.__exportStar(useSpinnerStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAC1B,+CAAgC;IAChC,+CAAgC;IAChC,4CAA6B;IAC7B,kDAAmC","sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n"]}

package/lib-amd/components/Spinner/renderSpinner.js

@@ -0,0 +1,18 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderSpinner_unstable = void 0;
+    /**
+     * Render the final JSX of Spinner
+     */
+    var renderSpinner_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        var labelPosition = state.labelPosition;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            slots.label && (labelPosition === 'above' || labelPosition === 'before') && React.createElement(slots.label, tslib_1.__assign({}, slotProps.label)),
+            slots.spinner && React.createElement(slots.spinner, tslib_1.__assign({}, slotProps.spinner)),
+            slots.label && (labelPosition === 'below' || labelPosition === 'after') && React.createElement(slots.label, tslib_1.__assign({}, slotProps.label))));
+    };
+    exports.renderSpinner_unstable = renderSpinner_unstable;
+});
+//# sourceMappingURL=renderSpinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderSpinner.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/renderSpinner.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAmB;QAClD,IAAA,KAAuB,0BAAQ,CAAe,KAAK,CAAC,EAAlD,KAAK,WAAA,EAAE,SAAS,eAAkC,CAAC;QACnD,IAAA,aAAa,GAAK,KAAK,cAAV,CAAW;QAChC,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,KAAK,IAAI,CAAC,aAAa,KAAK,OAAO,IAAI,aAAa,KAAK,QAAQ,CAAC,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI;YAChH,KAAK,CAAC,OAAO,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,EAAI;YACzD,KAAK,CAAC,KAAK,IAAI,CAAC,aAAa,KAAK,OAAO,IAAI,aAAa,KAAK,OAAO,CAAC,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,EAAI,CACrG,CACd,CAAC;IACJ,CAAC,CAAC;IAVW,QAAA,sBAAsB,0BAUjC","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"]}

package/lib-amd/components/Spinner/useSpinner.js

@@ -0,0 +1,53 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-label", "./DefaultSvg"], function (require, exports, tslib_1, React, react_utilities_1, react_label_1, DefaultSvg_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSpinner_unstable = void 0;
+    /**
+     * 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
+     */
+    var useSpinner_unstable = function (props, ref) {
+        // Props
+        var _a = props.appearance, appearance = _a === void 0 ? 'primary' : _a, _b = props.labelPosition, labelPosition = _b === void 0 ? 'after' : _b, _c = props.size, size = _c === void 0 ? 'medium' : _c;
+        var baseId = react_utilities_1.useId('spinner');
+        var _d = props.role, role = _d === void 0 ? 'progressbar' : _d, tabIndex = props.tabIndex, rest = tslib_1.__rest(props, ["role", "tabIndex"]);
+        var nativeRoot = react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ ref: ref, role: role }, rest), ['size']);
+        var labelShorthand = react_utilities_1.resolveShorthand(props.label, {
+            defaultProps: {
+                id: baseId,
+            },
+            required: false,
+        });
+        var spinnerShortHand = react_utilities_1.resolveShorthand(props.spinner, {
+            required: true,
+            defaultProps: {
+                children: React.createElement(DefaultSvg_1.DefaultSvg, null),
+                tabIndex: tabIndex,
+            },
+        });
+        if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {
+            nativeRoot['aria-labelledby'] = labelShorthand.id;
+        }
+        var state = {
+            appearance: appearance,
+            labelPosition: labelPosition,
+            size: size,
+            components: {
+                root: 'div',
+                spinner: 'span',
+                label: react_label_1.Label,
+            },
+            root: nativeRoot,
+            spinner: spinnerShortHand,
+            label: labelShorthand,
+        };
+        return state;
+    };
+    exports.useSpinner_unstable = useSpinner_unstable;
+});
+//# sourceMappingURL=useSpinner.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSpinner.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/useSpinner.tsx"],"names":[],"mappings":";;;;IAMA;;;;;;;;OAQG;IACI,IAAM,mBAAmB,GAAG,UAAC,KAAmB,EAAE,GAA2B;QAClF,QAAQ;QACA,IAAA,KAAqE,KAAK,WAApD,EAAtB,UAAU,mBAAG,SAAS,KAAA,EAAE,KAA6C,KAAK,cAA3B,EAAvB,aAAa,mBAAG,OAAO,KAAA,EAAE,KAAoB,KAAK,KAAV,EAAf,IAAI,mBAAG,QAAQ,KAAA,CAAW;QACnF,IAAM,MAAM,GAAG,uBAAK,CAAC,SAAS,CAAC,CAAC;QAExB,IAAA,KAA4C,KAAK,KAA7B,EAApB,IAAI,mBAAG,aAAa,KAAA,EAAE,QAAQ,GAAc,KAAK,SAAnB,EAAK,IAAI,kBAAK,KAAK,EAAnD,oBAA2C,CAAF,CAAW;QAC1D,IAAM,UAAU,GAAG,uCAAqB,CAAC,KAAK,qBAAI,GAAG,KAAA,EAAE,IAAI,MAAA,IAAK,IAAI,GAAI,CAAC,MAAM,CAAC,CAAC,CAAC;QAElF,IAAM,cAAc,GAAG,kCAAgB,CAAC,KAAK,CAAC,KAAK,EAAE;YACnD,YAAY,EAAE;gBACZ,EAAE,EAAE,MAAM;aACX;YACD,QAAQ,EAAE,KAAK;SAChB,CAAC,CAAC;QAEH,IAAM,gBAAgB,GAAG,kCAAgB,CAAC,KAAK,CAAC,OAAO,EAAE;YACvD,QAAQ,EAAE,IAAI;YACd,YAAY,EAAE;gBACZ,QAAQ,EAAE,oBAAC,uBAAU,OAAG;gBACxB,QAAQ,UAAA;aACT;SACF,CAAC,CAAC;QAEH,IAAI,cAAc,IAAI,UAAU,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAAE;YAClE,UAAU,CAAC,iBAAiB,CAAC,GAAG,cAAc,CAAC,EAAE,CAAC;SACnD;QAED,IAAM,KAAK,GAAiB;YAC1B,UAAU,YAAA;YACV,aAAa,eAAA;YACb,IAAI,MAAA;YACJ,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;gBACX,OAAO,EAAE,MAAM;gBACf,KAAK,EAAE,mBAAK;aACb;YACD,IAAI,EAAE,UAAU;YAChB,OAAO,EAAE,gBAAgB;YACzB,KAAK,EAAE,cAAc;SACtB,CAAC;QACF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAzCW,QAAA,mBAAmB,uBAyC9B","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 { role = 'progressbar', tabIndex, ...rest } = props;\n  const nativeRoot = getNativeElementProps('div', { ref, role, ...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 && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['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"]}

package/lib-amd/components/Spinner/useSpinnerStyles.js

@@ -0,0 +1,256 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
+    "use strict";
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSpinnerStyles_unstable = exports.spinnerClassNames = void 0;
+    exports.spinnerClassNames = {
+        root: 'fui-Spinner',
+        spinner: 'fui-Spinner__spinner',
+        label: 'fui-Spinner__label',
+    };
+    /*
+     * TODO: Update with proper tokens when added
+     * Radii for the Spinner circles
+     */
+    var rValues = {
+        tiny: '9px',
+        extraSmall: '11px',
+        small: '13px',
+        medium: '14.5px',
+        large: '16.5px',
+        extraLarge: '18.5px',
+        huge: '20px',
+    };
+    /*
+     * TODO: Update with proper tokens when added
+     * Sizes for the Spinner
+     */
+    var spinnnerSizes = {
+        tiny: '20px',
+        extraSmall: '24px',
+        small: '28px',
+        medium: '32px',
+        large: '36px',
+        extraLarge: '40px',
+        huge: '44px',
+    };
+    /*
+     * TODO: Update with proper tokens when added
+     * Animation for Spinner
+     */
+    var spinnerAnimation = {
+        container: {
+            animationDuration: '3s',
+            animationIterationCount: 'infinite',
+            animationTimingFunction: 'linear',
+            backgroundColor: 'transparent',
+        },
+    };
+    /**
+     * Styles for the root slot
+     */
+    var useRootStyles = react_1.makeStyles({
+        root: tslib_1.__assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', lineHeight: '0' }, react_1.shorthands.gap('8px')),
+        horizontal: {
+            flexDirection: 'row',
+        },
+        vertical: {
+            flexDirection: 'column',
+        },
+    });
+    var useLoaderStyles = react_1.makeStyles({
+        // global SVG class
+        spinnerSVG: (_a = {
+                ':focus': tslib_1.__assign({}, react_1.shorthands.outline('3px', 'solid', 'transparent'))
+            },
+            _a['& > svg'] = tslib_1.__assign(tslib_1.__assign({ animationName: {
+                    '0%': { transform: 'rotate(0deg)' },
+                    '100%': { transform: 'rotate(360deg)' },
+                } }, spinnerAnimation.container), { '@media screen and (prefers-reduced-motion: reduce)': {
+                    animationDuration: '0.01ms',
+                    animationIterationCount: '1',
+                } }),
+            _a['& > svg > circle'] = {
+                cx: '50%',
+                cy: '50%',
+                fill: 'none',
+            },
+            _a),
+        tiny: (_b = {},
+            _b['& > svg'] = {
+                height: spinnnerSizes.tiny,
+                width: spinnnerSizes.tiny,
+            },
+            _b['& > svg > circle'] = {
+                strokeWidth: react_theme_1.tokens.strokeWidthThick,
+                r: rValues.tiny,
+            },
+            _b),
+        'extra-small': (_c = {},
+            _c['& > svg'] = {
+                height: spinnnerSizes.extraSmall,
+                width: spinnnerSizes.extraSmall,
+            },
+            _c['& > svg > circle'] = {
+                strokeWidth: react_theme_1.tokens.strokeWidthThick,
+                r: rValues.extraSmall,
+            },
+            _c),
+        small: (_d = {},
+            _d['& > svg'] = {
+                height: spinnnerSizes.small,
+                width: spinnnerSizes.small,
+            },
+            _d['& > svg > circle'] = {
+                strokeWidth: react_theme_1.tokens.strokeWidthThick,
+                r: rValues.small,
+            },
+            _d),
+        medium: (_e = {},
+            _e['& > svg'] = {
+                height: spinnnerSizes.medium,
+                width: spinnnerSizes.medium,
+            },
+            _e['& > svg > circle'] = {
+                strokeWidth: react_theme_1.tokens.strokeWidthThicker,
+                r: rValues.medium,
+            },
+            _e),
+        large: (_f = {},
+            _f['& > svg'] = {
+                height: spinnnerSizes.large,
+                width: spinnnerSizes.large,
+            },
+            _f['& > svg > circle'] = {
+                strokeWidth: react_theme_1.tokens.strokeWidthThicker,
+                r: rValues.large,
+            },
+            _f),
+        'extra-large': (_g = {},
+            _g['& > svg'] = {
+                height: spinnnerSizes.extraLarge,
+                width: spinnnerSizes.extraLarge,
+            },
+            _g['& > svg > circle'] = {
+                strokeWidth: react_theme_1.tokens.strokeWidthThicker,
+                r: rValues.extraLarge,
+            },
+            _g),
+        huge: (_h = {},
+            _h['& > svg'] = {
+                height: spinnnerSizes.huge,
+                width: spinnnerSizes.huge,
+            },
+            _h['& > svg > circle'] = {
+                strokeWidth: react_theme_1.tokens.strokeWidthThickest,
+                r: rValues.huge,
+            },
+            _h),
+    });
+    var useTrackStyles = react_1.makeStyles({
+        inverted: (_j = {},
+            _j['& > svg > circle.fui-Spinner__Tail'] = {
+                stroke: react_theme_1.tokens.colorNeutralStrokeOnBrand2,
+                animationName: {
+                    '0%': {
+                        strokeDasharray: '1,150',
+                        strokeDashoffset: '0',
+                    },
+                    '50%': {
+                        strokeDasharray: '90,150',
+                        strokeDashoffset: '-35',
+                    },
+                    '100%': {
+                        strokeDasharray: '90,150',
+                        strokeDashoffset: '-124',
+                    },
+                },
+                animationDuration: '1.5s',
+                animationIterationCount: 'infinite',
+                animationTimingFunction: react_theme_1.tokens.curveEasyEase,
+                strokeLinecap: 'round',
+                transform: 'rotate(-90deg)',
+                transformOrigin: '50% 50%',
+                '@media screen and (prefers-reduced-motion: reduce)': {
+                    animationDuration: '0.01ms',
+                    animationIterationCount: '1',
+                },
+            },
+            _j['& > svg > circle.fui-Spinner__Track'] = {
+                stroke: 'rgba(255, 255, 255, 0.2)', // this is whiteAlpha[20] but that token is not exported
+            },
+            _j),
+        primary: (_k = {},
+            _k['& > svg > circle.fui-Spinner__Tail'] = {
+                stroke: react_theme_1.tokens.colorBrandStroke1,
+                '@media screen and (forced-colors: active)': {
+                    stroke: react_theme_1.tokens.colorNeutralStrokeOnBrand2,
+                },
+                animationName: {
+                    '0%': {
+                        strokeDasharray: '1,150',
+                        strokeDashoffset: '0',
+                    },
+                    '50%': {
+                        strokeDasharray: '90,150',
+                        strokeDashoffset: '-35',
+                    },
+                    '100%': {
+                        strokeDasharray: '90,150',
+                        strokeDashoffset: '-124',
+                    },
+                },
+                animationDuration: '1.5s',
+                animationIterationCount: 'infinite',
+                animationTimingFunction: react_theme_1.tokens.curveEasyEase,
+                strokeLinecap: 'round',
+                transform: 'rotate(-90deg)',
+                transformOrigin: '50% 50%',
+                '@media screen and (prefers-reduced-motion: reduce)': {
+                    animationDuration: '0.01ms',
+                    animationIterationCount: '1',
+                },
+            },
+            _k['& > svg > circle.fui-Spinner__Track'] = {
+                stroke: react_theme_1.tokens.colorBrandStroke2,
+                '@media screen and (forced-colors: active)': {
+                    stroke: react_theme_1.tokens.colorNeutralBackgroundInverted,
+                },
+            },
+            _k),
+    });
+    var useLabelStyles = react_1.makeStyles({
+        // style for label
+        inverted: {
+            color: 'rgba(255, 255, 255, 1)', // This is white alpha but the token is not exported
+        },
+        primary: {},
+        tiny: tslib_1.__assign({}, react_theme_1.typographyStyles.body1),
+        'extra-small': tslib_1.__assign({}, react_theme_1.typographyStyles.body1),
+        small: tslib_1.__assign({}, react_theme_1.typographyStyles.body1),
+        medium: tslib_1.__assign({}, react_theme_1.typographyStyles.subtitle2),
+        large: tslib_1.__assign({}, react_theme_1.typographyStyles.subtitle2),
+        'extra-large': tslib_1.__assign({}, react_theme_1.typographyStyles.subtitle2),
+        huge: tslib_1.__assign({}, react_theme_1.typographyStyles.subtitle1),
+    });
+    /**
+     * Apply styling to the Spinner slots based on the state
+     */
+    var useSpinnerStyles_unstable = function (state) {
+        var labelPosition = state.labelPosition, size = state.size, _a = state.appearance, appearance = _a === void 0 ? 'primary' : _a;
+        var rootStyles = useRootStyles();
+        var spinnerStyles = useLoaderStyles();
+        var labelStyles = useLabelStyles();
+        var trackStyles = useTrackStyles();
+        state.root.className = react_1.mergeClasses(exports.spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);
+        if (state.spinner) {
+            state.spinner.className = react_1.mergeClasses(exports.spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);
+        }
+        if (state.label) {
+            state.label.className = react_1.mergeClasses(exports.spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);
+        }
+        return state;
+    };
+    exports.useSpinnerStyles_unstable = useSpinnerStyles_unstable;
+});
+//# sourceMappingURL=useSpinnerStyles.js.map

package/lib-amd/components/Spinner/useSpinnerStyles.js.map

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

package/lib-amd/index.js

@@ -0,0 +1,11 @@
+define(["require", "exports", "./Spinner"], function (require, exports, Spinner_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSpinnerStyles_unstable = exports.useSpinner_unstable = exports.renderSpinner_unstable = exports.spinnerClassNames = exports.Spinner = void 0;
+    Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });
+    Object.defineProperty(exports, "spinnerClassNames", { enumerable: true, get: function () { return Spinner_1.spinnerClassNames; } });
+    Object.defineProperty(exports, "renderSpinner_unstable", { enumerable: true, get: function () { return Spinner_1.renderSpinner_unstable; } });
+    Object.defineProperty(exports, "useSpinner_unstable", { enumerable: true, get: function () { return Spinner_1.useSpinner_unstable; } });
+    Object.defineProperty(exports, "useSpinnerStyles_unstable", { enumerable: true, get: function () { return Spinner_1.useSpinnerStyles_unstable; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-spinner/src/index.ts"],"names":[],"mappings":";;;;IACE,kGAAA,OAAO,OAAA;IACP,4GAAA,iBAAiB,OAAA;IACjB,iHAAA,sBAAsB,OAAA;IACtB,8GAAA,mBAAmB,OAAA;IACnB,oHAAA,yBAAyB,OAAA","sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\n"]}

package/lib-commonjs/Spinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Spinner.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Spinner/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-spinner/src/Spinner.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Spinner/index';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Spinner/DefaultSvg.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEO,MAAM,UAAU,GAAG,MACxB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;EAAK,SAAS,EAAC;AAAf,CAAA,EACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;EAAQ,SAAS,EAAC;AAAlB,CAAA,CADF,EAEE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;EAAQ,SAAS,EAAC;AAAlB,CAAA,CAFF,CADK;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import * as React from 'react';\n\nexport const DefaultSvg = () => (\n  <svg className=\"fui-Spinner__Progressbar\">\n    <circle className=\"fui-Spinner__Track\" />\n    <circle className=\"fui-Spinner__Tail\" />\n  </svg>\n);\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-spinner/src/components/Spinner/DefaultSvg.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEO,MAAM,UAAU,GAAG,MACxB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;EAAK,SAAS,EAAC;AAAf,CAAA,EACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;EAAQ,SAAS,EAAC;AAAlB,CAAA,CADF,EAEE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;EAAQ,SAAS,EAAC;AAAlB,CAAA,CAFF,CADK;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourcesContent":["import * as React from 'react';\n\nexport const DefaultSvg = () => (\n  <svg className=\"fui-Spinner__Progressbar\">\n    <circle className=\"fui-Spinner__Track\" />\n    <circle className=\"fui-Spinner__Tail\" />\n  </svg>\n);\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EAEA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles';\nimport type { SpinnerProps } from './Spinner.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner: ForwardRefComponent<SpinnerProps> = React.forwardRef((props, ref) => {\n  const state = useSpinner_unstable(props, ref);\n\n  useSpinnerStyles_unstable(state);\n  return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EAEA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EACA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CALyD,CAA7C;AAOb,OAAA,CAAA,OAAA,CAAQ,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useSpinner_unstable } from './useSpinner';\nimport { renderSpinner_unstable } from './renderSpinner';\nimport { useSpinnerStyles_unstable } from './useSpinnerStyles';\nimport type { SpinnerProps } from './Spinner.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Converged Spinner component for the fluentui repo\n */\nexport const Spinner: ForwardRefComponent<SpinnerProps> = React.forwardRef((props, ref) => {\n  const state = useSpinner_unstable(props, ref);\n\n  useSpinnerStyles_unstable(state);\n  return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Spinner/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-spinner/src/components/Spinner/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Spinner/renderSpinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;EAC5D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EACA,MAAM;IAAE;EAAF,IAAoB,KAA1B;EACA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,QAA/D,KAA4E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAD/E,EAEG,KAAK,CAAC,OAAN,IAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CAFpB,EAGG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,OAA/D,KAA2E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAH9E,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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/"}
+{"version":3,"sources":["packages/react-components/react-spinner/src/components/Spinner/renderSpinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,sBAAsB,GAAI,KAAD,IAAwB;EAC5D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EACA,MAAM;IAAE;EAAF,IAAoB,KAA1B;EACA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,QAA/D,KAA4E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAD/E,EAEG,KAAK,CAAC,OAAN,IAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CAFpB,EAGG,KAAK,CAAC,KAAN,KAAgB,aAAa,KAAK,OAAlB,IAA6B,aAAa,KAAK,OAA/D,KAA2E,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CAH9E,CADF;AAOD,CAVM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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-commonjs/components/Spinner/useSpinner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Spinner/useSpinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG;EACA,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B,aAAa,GAAG,OAA1C;IAAmD,IAAI,GAAG;EAA1D,IAAuE,KAA7E;EACA,MAAM,MAAM,GAAG,iBAAA,CAAA,KAAA,CAAM,SAAN,CAAf;EAEA,MAAM;IAAE,IAAI,GAAG,aAAT;IAAwB,QAAxB;IAAkC,GAAG;EAArC,IAA8C,KAApD;EACA,MAAM,UAAU,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;IAAE,GAAF;IAAO,IAAP;IAAa,GAAG;EAAhB,CAA7B,EAAqD,CAAC,MAAD,CAArD,CAAnB;EAEA,MAAM,cAAc,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;IACnD,YAAY,EAAE;MACZ,EAAE,EAAE;IADQ,CADqC;IAInD,QAAQ,EAAE;EAJyC,CAA9B,CAAvB;EAOA,MAAM,gBAAgB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,OAAvB,EAAgC;IACvD,QAAQ,EAAE,IAD6C;IAEvD,YAAY,EAAE;MACZ,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,YAAA,CAAA,UAAD,EAAW,IAAX,CADE;MAEZ;IAFY;EAFyC,CAAhC,CAAzB;;EAQA,IAAI,cAAc,IAAI,UAAlB,IAAgC,CAAC,UAAU,CAAC,iBAAD,CAA/C,EAAoE;IAClE,UAAU,CAAC,iBAAD,CAAV,GAAgC,cAAc,CAAC,EAA/C;EACD;;EAED,MAAM,KAAK,GAAiB;IAC1B,UAD0B;IAE1B,aAF0B;IAG1B,IAH0B;IAI1B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,OAAO,EAAE,MAFC;MAGV,KAAK,EAAE,aAAA,CAAA;IAHG,CAJc;IAS1B,IAAI,EAAE,UAToB;IAU1B,OAAO,EAAE,gBAViB;IAW1B,KAAK,EAAE;EAXmB,CAA5B;EAaA,OAAO,KAAP;AACD,CAzCM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","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 { role = 'progressbar', tabIndex, ...rest } = props;\n  const nativeRoot = getNativeElementProps('div', { ref, role, ...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 && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['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/"}
+{"version":3,"sources":["packages/react-components/react-spinner/src/components/Spinner/useSpinner.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG;EACA,MAAM;IAAE,UAAU,GAAG,SAAf;IAA0B,aAAa,GAAG,OAA1C;IAAmD,IAAI,GAAG;EAA1D,IAAuE,KAA7E;EACA,MAAM,MAAM,GAAG,iBAAA,CAAA,KAAA,CAAM,SAAN,CAAf;EAEA,MAAM;IAAE,IAAI,GAAG,aAAT;IAAwB,QAAxB;IAAkC,GAAG;EAArC,IAA8C,KAApD;EACA,MAAM,UAAU,GAAG,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;IAAE,GAAF;IAAO,IAAP;IAAa,GAAG;EAAhB,CAA7B,EAAqD,CAAC,MAAD,CAArD,CAAnB;EAEA,MAAM,cAAc,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,KAAvB,EAA8B;IACnD,YAAY,EAAE;MACZ,EAAE,EAAE;IADQ,CADqC;IAInD,QAAQ,EAAE;EAJyC,CAA9B,CAAvB;EAOA,MAAM,gBAAgB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,OAAvB,EAAgC;IACvD,QAAQ,EAAE,IAD6C;IAEvD,YAAY,EAAE;MACZ,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,YAAA,CAAA,UAAD,EAAW,IAAX,CADE;MAEZ;IAFY;EAFyC,CAAhC,CAAzB;;EAQA,IAAI,cAAc,IAAI,UAAlB,IAAgC,CAAC,UAAU,CAAC,iBAAD,CAA/C,EAAoE;IAClE,UAAU,CAAC,iBAAD,CAAV,GAAgC,cAAc,CAAC,EAA/C;EACD;;EAED,MAAM,KAAK,GAAiB;IAC1B,UAD0B;IAE1B,aAF0B;IAG1B,IAH0B;IAI1B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,OAAO,EAAE,MAFC;MAGV,KAAK,EAAE,aAAA,CAAA;IAHG,CAJc;IAS1B,IAAI,EAAE,UAToB;IAU1B,OAAO,EAAE,gBAViB;IAW1B,KAAK,EAAE;EAXmB,CAA5B;EAaA,OAAO,KAAP;AACD,CAzCM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","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 { role = 'progressbar', tabIndex, ...rest } = props;\n  const nativeRoot = getNativeElementProps('div', { ref, role, ...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 && nativeRoot && !nativeRoot['aria-labelledby']) {\n    nativeRoot['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-commonjs/components/Spinner/useSpinnerStyles.js.map

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

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA","sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-spinner/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA","sourcesContent":["export {\n  Spinner,\n  spinnerClassNames,\n  renderSpinner_unstable,\n  useSpinner_unstable,\n  useSpinnerStyles_unstable,\n} from './Spinner';\nexport type { SpinnerProps, SpinnerSlots, SpinnerState } from './Spinner';\n"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinner",
-  "version": "9.0.10",
+  "version": "9.0.12",
   "description": "Spinner component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -20,10 +20,9 @@
     "lint": "just-scripts lint",
     "start": "yarn storybook",
     "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-spinner/src && yarn docs",
     "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json"
+    "type-check": "tsc -b tsconfig.json",
+    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
@@ -32,9 +31,9 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-theme": "^9.1.2",
-    "@fluentui/react-label": "^9.0.10",
-    "@fluentui/react-utilities": "^9.2.1",
+    "@fluentui/react-theme": "^9.1.3",
+    "@fluentui/react-label": "^9.0.12",
+    "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },

package/MIGRATION.md

@@ -1,30 +0,0 @@
-# Spinner Migration
-
-## Migration from v8
-
-- `Spinner`
-  - `ariaLabel` => use `aria-label` instead.
-  - `ariaLive` => use `aria-live` instead.
-  - `componentRef` => use `ref` instead.
-  - `theme` => Not supported. Use a `ThemeProvider` control instead.
-
-## Migration from v0
-
-- `Loader`
-  - `delay` => Not supported.
-  - `inline` => Not supported.
-  - `labelPosition` => `labelPosition` => 'start' and 'end' changed to 'before' and 'after'
-  - `size` => `size` => There are the same number of sizes
-
-## Property mapping
-
-| v8 `Spinner`   | v0 `Loader`     | v9 `Spinner`    |
-| -------------- | --------------- | --------------- |
-| `ariaLabel`    | `aria-label`    | `aria-label`    |
-| `ariaLive`     | `aria-live`     | `aria-live`     |
-| `componentRef` | `ref`           | `ref`           |
-|                | `delay`         |                 |
-|                | `inline`        |                 |
-|                | `labelPosition` | `labelPosition` |
-|                | `size`          | `size`          |
-| `theme`        |                 |                 |

package/Spec.md

@@ -1,122 +0,0 @@
-# @fluentui/react-spinner Spec
-
-## Background
-
-A 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.
-
-## Prior Art
-
-### Open UI
-
-| Library                 | Component Name     | Spec Link                                                                                 | Notes                                                                                                                                                                                                                                                                                             |
-| ----------------------- | ------------------ | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Chakra UI               | `CircularProgress` | [CircularProgress](https://chakra-ui.com/docs/feedback/circular-progress)                 | `CircularProgress` has determinate and indeterminate forms, with props that give user the ability to change size, value, line thickness, and a min and max value, and add a label                                                                                                                 |
-| Material UI             | `CircularProgress` | [CircularProgress](https://mui.com/components/progress/#progress)                         | `CircularProgress` has determinate and indeterminate, allows users to change color, add value, and add a label                                                                                                                                                                                    |
-| Carbon                  | `InlineLoading`    | [InlineLoading](https://www.carbondesignsystem.com/components/inline-loading/usage)       | `InlineLoading` only has an indeterminate form, with four states: `inactive`, `active`, `finished`, `error`                                                                                                                                                                                       |
-| FluentUI Northstar      | `Loader`           | [Loader](https://fluentsite.z22.web.core.windows.net/0.57.0/components/loader/definition) | `Loader` has a `delay` prop that specifies how long to wait before the `Loader` is visible on the page. You can also render a custom svg as the image, and use the `as` prop to choose whether to render the loader as a string or a component. Other props include `inline`, `label`, and `size` |
-| Latitude Design System  | `Loader`           | [Loader](https://www.flexport.com/design/components/loaders#Loader)                       | This is a simple loader that allows users to modify size and whether the loader is inline                                                                                                                                                                                                         |
-| Orbit                   | `Loading`          | [Loading](https://orbit.kiwi/components/progress-indicators/loading/)                     | Simple loader with animation and text                                                                                                                                                                                                                                                             |
-| Elastic UI              | `LoadingSpinner`   | [LoadingSpinner](https://elastic.github.io/eui/#/display/loading#spinner)                 | Simple spinner                                                                                                                                                                                                                                                                                    |
-| Adobe Spectrum          | `ProgressCircle`   | [ProgressCircle](https://spectrum.adobe.com/page/progress-circle/)                        | It has a default and an over background state. It also has a min and max value setting, as well as a size, determinate, and indeterminate                                                                                                                                                         |
-| Ant Design              | `Spin`             | [Spin](https://ant.design/components/spin/)                                               | Can change size, add a delay, and render a custom spinner                                                                                                                                                                                                                                         |
-| Atlassian Design System | `Spinner`          | [Spinner](https://atlassian.design/components/spinner/examples)                           | Has a default Spinner, with ability to change size(there are preset size options, with the ability to render the spinner with a custom size). Can also delay the Spinner, and use present animations such as `FadeIn`                                                                             |
-| Base Web                | `Spinner`          | [Spinner](https://baseweb.design/components/spinner#api)                                  | Started out with a simple Spinner with a size, color, and title prop, but adds an override prop that lets you customize the look and feel of the Spinner                                                                                                                                          |
-| Blueprint               | `Spinner`          | [Spinner](https://blueprintjs.com/docs/#core/components/spinner)                          | Has a value prop to allow for determinate or indeterminate Spinners, and a size prop with preset sizes provided as an ENUM                                                                                                                                                                        |
-| Evergreen Design System | `Spinner`          | [Spinner](https://evergreen.segment.com/components/spinner)                               | Default Spinner that allows you to change size and add a delay, as well as render it centered in a div                                                                                                                                                                                            |
-| Fabric                  | `Spinner`          | [Spinner](https://developer.microsoft.com/en-us/fluentui#/controls/web/spinner)           | This Spinner has specific aria attributes as props as well as label and size props to modify the default Spinner                                                                                                                                                                                  |
-| GitLab Design System    | `Spinner`          | [Spinner](https://design.gitlab.com/components/spinner)                                   | Can change size, color, and set inline. Comes with a default 100ms delay                                                                                                                                                                                                                          |
-| Paste                   | `Spinner`          | [Spinner](https://paste.twilio.design/components/spinner/#paste-docs-content-area)        | Contains many elements present in other design systems' Spinners: delay, size, color, and as props. Notably, no determinate or indeterminate forms                                                                                                                                                |
-| Primer                  | `Spinner`          | [Spinner](https://primer.style/react/Spinner)                                             | Default Spinner with a size prop                                                                                                                                                                                                                                                                  |
-| Garden                  | `Spinner`          | [Spinner](https://garden.zendesk.com/components/spinner)                                  | Default Spinner with color and size prop                                                                                                                                                                                                                                                          |
-| Polaris                 | `Spinner`          | [Spinner](https://polaris.shopify.com/components/feedback-indicators/spinner)             | Default Spinner with a size prop, with preset small and large values                                                                                                                                                                                                                              |
-| Lightning Design System | `Spinner`          | [Spinner](https://react.lightningdesignsystem.com/components/spinners/)                   | A more robust indeterminate Spinner with props that allow the Spinner to be rendered in a container, add styling to said container, inline the Spinner, and change the size                                                                                                                       |
-
-### Comparison of v8 and v0
-
-The existing components are:
-
-- v8
-  - `Spinner`
-- v0
-  - `Loader`
-- Both `Spinner` and `Loader` have very similar props
-- `Loader` has `delay`, while `Spinner` has aria props exposed for accessibility.
-
-## Sample Code
-
-Basic examples:
-
-```jsx=
-import { Spinner } from "@fluentui/react-spinner";
-
-function App() {
-    return (
-        <Spinner size="medium" label="Loading" />
-    )
-}
-
-```
-
-## Variants
-
-- Indeterminate Spinner
-  - The default Spinner that spins around indefinitely
-
-### Shape
-
-The Spinner is represented as a circle with an arc of a darker shade rotating the circumfrence
-
-## API
-
-### Slots
-
-- `root` - The root element of the Spinner. The html element is a `span`
-- `loader` - The svg element that gets animated into a Spinner. The html element is `svg`
-- `label` - The text shown with the Spinner. This uses the `Text` control
-
-### Props
-
-See API at [Spinner.types.tsx](./src/components/Spinner/Spinner.types.ts).
-
-## Structure
-
-```html
-<span class="fui-Spinner">
-  <!-- Label for Spinner -->
-  <span className="fui-Spinner__label">Loading...</span>
-  <span className="fui-Spinner__spinner">
-    <!-- Svg that receives the animation. Classnames are used for animation -->
-    <svg role="progressbar" className="fui-Spinner__Progressbar">
-      <circle className="fui-Spinner__Track" />
-      <circle className="fui-Spinner__Tail" />
-    </svg>
-  </span>
-</span>
-```
-
-## Migration
-
-See [MIGRATION.md](./MIGRATION.md).
-
-## Behaviors
-
-### States
-
-- **Display** - The Spinner will use the following priority:
-
-  - Adding the `inverted` will alter the way that the Spinner is displayed.
-
-### Interaction
-
-The Spinner is non-interactive.
-
-- **Keyboard** - Not keyboard focusable.
-- **Mouse**
-
-  - Click: No action
-
-- **Touch** - Nothing
-
-## Accessibility
-
-When reduced motion, is active the `indeterminate` `Spinner` will rotate once and then stop animating.