@fluentui/react-spinner 0.0.0-nightly-20221228-0425.1 → 0.0.0-nightly-20221230-0421.1

package/CHANGELOG.json

@@ -2,9 +2,9 @@
   "name": "@fluentui/react-spinner",
   "entries": [
     {
-      "date": "Wed, 28 Dec 2022 04:33:32 GMT",
-      "tag": "@fluentui/react-spinner_v0.0.0-nightly-20221228-0425.1",
-      "version": "0.0.0-nightly-20221228-0425.1",
+      "date": "Fri, 30 Dec 2022 04:28:27 GMT",
+      "tag": "@fluentui/react-spinner_v0.0.0-nightly-20221230-0421.1",
+      "version": "0.0.0-nightly-20221230-0421.1",
       "comments": {
         "prerelease": [
           {
@@ -16,26 +16,26 @@
           {
             "author": "beachball",
             "package": "@fluentui/react-spinner",
-            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221228-0425.1",
-            "commit": "3ee907a253f14ff8e15878e0ec1355e2fbfcef69"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221230-0421.1",
+            "commit": "a38762f3d85d92ff20fe07b067fe74c91defe343"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinner",
-            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20221228-0425.1",
-            "commit": "3ee907a253f14ff8e15878e0ec1355e2fbfcef69"
+            "comment": "Bump @fluentui/react-label to v0.0.0-nightly-20221230-0421.1",
+            "commit": "a38762f3d85d92ff20fe07b067fe74c91defe343"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinner",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221228-0425.1",
-            "commit": "3ee907a253f14ff8e15878e0ec1355e2fbfcef69"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221230-0421.1",
+            "commit": "a38762f3d85d92ff20fe07b067fe74c91defe343"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-spinner",
-            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221228-0425.1",
-            "commit": "3ee907a253f14ff8e15878e0ec1355e2fbfcef69"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221230-0421.1",
+            "commit": "a38762f3d85d92ff20fe07b067fe74c91defe343"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,21 +1,21 @@
 # Change Log - @fluentui/react-spinner
 
-This log was last generated on Wed, 28 Dec 2022 04:33:32 GMT and should not be manually modified.
+This log was last generated on Fri, 30 Dec 2022 04:28:27 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20221228-0425.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v0.0.0-nightly-20221228-0425.1)
+## [0.0.0-nightly-20221230-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v0.0.0-nightly-20221230-0421.1)
 
-Wed, 28 Dec 2022 04:33:32 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.14..@fluentui/react-spinner_v0.0.0-nightly-20221228-0425.1)
+Fri, 30 Dec 2022 04:28:27 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.14..@fluentui/react-spinner_v0.0.0-nightly-20221230-0421.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-theme to v0.0.0-nightly-20221228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3ee907a253f14ff8e15878e0ec1355e2fbfcef69) by beachball)
-- Bump @fluentui/react-label to v0.0.0-nightly-20221228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3ee907a253f14ff8e15878e0ec1355e2fbfcef69) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly-20221228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3ee907a253f14ff8e15878e0ec1355e2fbfcef69) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221228-0425.1 ([commit](https://github.com/microsoft/fluentui/commit/3ee907a253f14ff8e15878e0ec1355e2fbfcef69) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20221230-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/a38762f3d85d92ff20fe07b067fe74c91defe343) by beachball)
+- Bump @fluentui/react-label to v0.0.0-nightly-20221230-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/a38762f3d85d92ff20fe07b067fe74c91defe343) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20221230-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/a38762f3d85d92ff20fe07b067fe74c91defe343) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221230-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/a38762f3d85d92ff20fe07b067fe74c91defe343) by beachball)
 
 ## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.14)
 

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,OAAO,MAAMC,UAAU,GAAG,mBACxBD;EAAKE,SAAS,EAAC;AAA0B,gBACvCF;EAAQE,SAAS,EAAC;AAAoB,EAAG,eACzCF;EAAQE,SAAS,EAAC;AAAmB,EAAG,CAE3C","names":["React","DefaultSvg","className"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/DefaultSvg.tsx"],"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/components/Spinner/Spinner.js

@@ -5,7 +5,6 @@ import { useSpinnerStyles_unstable } from './useSpinnerStyles';
 /**
  * Converged Spinner component for the fluentui repo
  */
-
 export const Spinner = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useSpinner_unstable(props, ref);
   useSpinnerStyles_unstable(state);

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAI9D;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGP,mBAAmB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAE7CJ,yBAAyB,CAACK,KAAK,CAAC;EAChC,OAAON,sBAAsB,CAACM,KAAK,CAAC;AACtC,CAAC,CAAC;AAEFJ,OAAO,CAACK,WAAW,GAAG,SAAS","names":["React","useSpinner_unstable","renderSpinner_unstable","useSpinnerStyles_unstable","Spinner","forwardRef","props","ref","state","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx"],"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/components/Spinner/renderSpinner.js

@@ -3,7 +3,6 @@ import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Spinner
  */
-
 export const renderSpinner_unstable = state => {
   const {
     slots,
@@ -12,10 +11,14 @@ export const renderSpinner_unstable = state => {
   const {
     labelPosition
   } = state;
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, slots.label && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
-  }), slots.spinner && /*#__PURE__*/React.createElement(slots.spinner, { ...slotProps.spinner
-  }), slots.label && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/React.createElement(slots.label, { ...slotProps.label
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.label && (labelPosition === 'above' || labelPosition === 'before') && /*#__PURE__*/React.createElement(slots.label, {
+    ...slotProps.label
+  }), slots.spinner && /*#__PURE__*/React.createElement(slots.spinner, {
+    ...slotProps.spinner
+  }), slots.label && (labelPosition === 'below' || labelPosition === 'after') && /*#__PURE__*/React.createElement(slots.label, {
+    ...slotProps.label
   }));
 };
 //# sourceMappingURL=renderSpinner.js.map

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAeE,KAAK,CAAC;EAC1D,MAAM;IAAEG;EAAa,CAAE,GAAGH,KAAK;EAC/B,oBACEH,oBAACI,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,KAAK,KAAKF,aAAa,KAAK,OAAO,IAAIA,aAAa,KAAK,QAAQ,CAAC,iBAAIN,oBAACI,KAAK,CAACI,KAAK;IAAA,GAAKH,SAAS,CAACG;EAAK,EAAI,EAChHJ,KAAK,CAACK,OAAO,iBAAIT,oBAACI,KAAK,CAACK,OAAO;IAAA,GAAKJ,SAAS,CAACI;EAAO,EAAI,EACzDL,KAAK,CAACI,KAAK,KAAKF,aAAa,KAAK,OAAO,IAAIA,aAAa,KAAK,OAAO,CAAC,iBAAIN,oBAACI,KAAK,CAACI,KAAK;IAAA,GAAKH,SAAS,CAACG;EAAK,EAAI,CACrG;AAEjB,CAAC","names":["React","getSlots","renderSpinner_unstable","state","slots","slotProps","labelPosition","root","label","spinner"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/renderSpinner.tsx"],"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/components/Spinner/useSpinner.js

@@ -11,7 +11,6 @@ import { DefaultSvg } from './DefaultSvg';
  * @param props - props from this instance of Spinner
  * @param ref - reference to root HTMLElement of Spinner
  */
-
 export const useSpinner_unstable = (props, ref) => {
   // Props
   const {
@@ -43,11 +42,9 @@ export const useSpinner_unstable = (props, ref) => {
       tabIndex
     }
   });
-
   if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {
     nativeRoot['aria-labelledby'] = labelShorthand.id;
   }
-
   const state = {
     appearance,
     labelPosition,

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAE1F,SAASC,KAAK,QAAQ,uBAAuB;AAC7C,SAASC,UAAU,QAAQ,cAAc;AAEzC;;;;;;;;;AASA,OAAO,MAAMC,mBAAmB,GAAG,CAACC,KAAmB,EAAEC,GAA2B,KAAkB;EACpG;EACA,MAAM;IAAEC,UAAU,GAAG,SAAS;IAAEC,aAAa,GAAG,OAAO;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGJ,KAAK;EAClF,MAAMK,MAAM,GAAGT,KAAK,CAAC,SAAS,CAAC;EAE/B,MAAM;IAAEU,IAAI,GAAG,aAAa;IAAEC,QAAQ;IAAE,GAAGC;EAAI,CAAE,GAAGR,KAAK;EACzD,MAAMS,UAAU,GAAGf,qBAAqB,CAAC,KAAK,EAAE;IAAEO,GAAG;IAAEK,IAAI;IAAE,GAAGE;EAAI,CAAE,EAAE,CAAC,MAAM,CAAC,CAAC;EAEjF,MAAME,cAAc,GAAGf,gBAAgB,CAACK,KAAK,CAACW,KAAK,EAAE;IACnDC,YAAY,EAAE;MACZC,EAAE,EAAER;KACL;IACDS,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,gBAAgB,GAAGpB,gBAAgB,CAACK,KAAK,CAACgB,OAAO,EAAE;IACvDF,QAAQ,EAAE,IAAI;IACdF,YAAY,EAAE;MACZK,QAAQ,eAAExB,oBAACK,UAAU,OAAG;MACxBS;;GAEH,CAAC;EAEF,IAAIG,cAAc,IAAID,UAAU,IAAI,CAACA,UAAU,CAAC,iBAAiB,CAAC,EAAE;IAClEA,UAAU,CAAC,iBAAiB,CAAC,GAAGC,cAAc,CAACG,EAAE;;EAGnD,MAAMK,KAAK,GAAiB;IAC1BhB,UAAU;IACVC,aAAa;IACbC,IAAI;IACJe,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXJ,OAAO,EAAE,MAAM;MACfL,KAAK,EAAEd;KACR;IACDuB,IAAI,EAAEX,UAAU;IAChBO,OAAO,EAAED,gBAAgB;IACzBJ,KAAK,EAAED;GACR;EACD,OAAOQ,KAAK;AACd,CAAC","names":["React","getNativeElementProps","resolveShorthand","useId","Label","DefaultSvg","useSpinner_unstable","props","ref","appearance","labelPosition","size","baseId","role","tabIndex","rest","nativeRoot","labelShorthand","label","defaultProps","id","required","spinnerShortHand","spinner","children","state","components","root"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/useSpinner.tsx"],"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/components/Spinner/useSpinnerStyles.js

@@ -9,7 +9,6 @@ export const spinnerClassNames = {
  * TODO: Update with proper tokens when added
  * Radii for the Spinner circles
  */
-
 const rValues = {
   tiny: '9px',
   extraSmall: '11px',
@@ -23,7 +22,6 @@ const rValues = {
  * TODO: Update with proper tokens when added
  * Sizes for the Spinner
  */
-
 const spinnnerSizes = {
   tiny: '20px',
   extraSmall: '24px',
@@ -37,7 +35,6 @@ const spinnnerSizes = {
  * TODO: Update with proper tokens when added
  * Animation for Spinner
  */
-
 const spinnerAnimation = {
   container: {
     animationDuration: '3s',
@@ -49,7 +46,6 @@ const spinnerAnimation = {
 /**
  * Styles for the root slot
  */
-
 const useRootStyles = /*#__PURE__*/__styles({
   "root": {
     "mc9l5x": "f22iagw",
@@ -68,7 +64,6 @@ const useRootStyles = /*#__PURE__*/__styles({
 }, {
   "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fez10in{line-height:0;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
 });
-
 const useLoaderStyles = /*#__PURE__*/__styles({
   "spinnerSVG": {
     "B3aqqti": "f1or16p5",
@@ -137,7 +132,6 @@ const useLoaderStyles = /*#__PURE__*/__styles({
     "m": "screen and (prefers-reduced-motion: reduce)"
   }]]
 });
-
 const useTrackStyles = /*#__PURE__*/__styles({
   "inverted": {
     "gwg7kz": "f1jvpmnu",
@@ -184,7 +178,6 @@ const useTrackStyles = /*#__PURE__*/__styles({
     "m": "screen and (forced-colors: active)"
   }]]
 });
-
 const useLabelStyles = /*#__PURE__*/__styles({
   "inverted": {
     "sj55zd": "f15aqcq"
@@ -238,8 +231,6 @@ const useLabelStyles = /*#__PURE__*/__styles({
 /**
  * Apply styling to the Spinner slots based on the state
  */
-
-
 export const useSpinnerStyles_unstable = state => {
   const {
     labelPosition,
@@ -251,15 +242,12 @@ export const useSpinnerStyles_unstable = state => {
   const labelStyles = useLabelStyles();
   const trackStyles = useTrackStyles();
   state.root.className = mergeClasses(spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);
-
   if (state.spinner) {
     state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);
   }
-
   if (state.label) {
     state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);
   }
-
   return state;
 };
 //# sourceMappingURL=useSpinnerStyles.js.map

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAIhE,OAAO,MAAMC,iBAAiB,GAAiC;EAC7DC,IAAI,EAAE,aAAa;EACnBC,OAAO,EAAE,sBAAsB;EAC/BC,KAAK,EAAE;CACR;AAED;;;;AAIA,MAAMC,OAAO,GAAG;EACdC,IAAI,EAAE,KAAK;EACXC,UAAU,EAAE,MAAM;EAClBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,QAAQ;EAChBC,KAAK,EAAE,QAAQ;EACfC,UAAU,EAAE,QAAQ;EACpBC,IAAI,EAAE;CACP;AAED;;;;AAIA,MAAMC,aAAa,GAAG;EACpBP,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,MAAM;EAClBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE,MAAM;EACbC,UAAU,EAAE,MAAM;EAClBC,IAAI,EAAE;CACP;AAED;;;;AAIA,MAAME,gBAAgB,GAAG;EACvBC,SAAS,EAAE;IACTC,iBAAiB,EAAE,IAAI;IACvBC,uBAAuB,EAAE,UAAU;IACnCC,uBAAuB,EAAE,QAAQ;IACjCC,eAAe,EAAE;;CAEpB;AAED;;;AAGA,MAAMC,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAgBpB;AAEF,MAAMC,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,EAqGtB;AAEF,MAAMC,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,EA6ErB;AAEF,MAAMC,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,EAmCrB;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAM;IAAEC,aAAa;IAAEC,IAAI;IAAEC,UAAU,GAAG;EAAS,CAAE,GAAGH,KAAK;EAC7D,MAAMI,UAAU,GAAGT,aAAa,EAAE;EAClC,MAAMU,aAAa,GAAGT,eAAe,EAAE;EACvC,MAAMU,WAAW,GAAGR,cAAc,EAAE;EACpC,MAAMS,WAAW,GAAGV,cAAc,EAAE;EAEpCG,KAAK,CAACvB,IAAI,CAAC+B,SAAS,GAAGpC,YAAY,CACjCI,iBAAiB,CAACC,IAAI,EACtB2B,UAAU,CAAC3B,IAAI,EACf,CAACwB,aAAa,KAAK,OAAO,IAAIA,aAAa,KAAK,OAAO,KAAKG,UAAU,CAACK,QAAQ,EAC/E,CAACR,aAAa,KAAK,QAAQ,IAAIA,aAAa,KAAK,OAAO,KAAKG,UAAU,CAACM,UAAU,EAClFV,KAAK,CAACvB,IAAI,CAAC+B,SAAS,CACrB;EACD,IAAIR,KAAK,CAACtB,OAAO,EAAE;IACjBsB,KAAK,CAACtB,OAAO,CAAC8B,SAAS,GAAGpC,YAAY,CACpCI,iBAAiB,CAACE,OAAO,EACzB2B,aAAa,CAACM,UAAU,EACxBN,aAAa,CAACH,IAAI,CAAC,EACnBK,WAAW,CAACJ,UAAU,CAAC,EACvBH,KAAK,CAACtB,OAAO,CAAC8B,SAAS,CACxB;;EAEH,IAAIR,KAAK,CAACrB,KAAK,EAAE;IACfqB,KAAK,CAACrB,KAAK,CAAC6B,SAAS,GAAGpC,YAAY,CAClCI,iBAAiB,CAACG,KAAK,EACvB2B,WAAW,CAACJ,IAAI,CAAC,EACjBI,WAAW,CAACH,UAAU,CAAC,EACvBH,KAAK,CAACrB,KAAK,CAAC6B,SAAS,CACtB;;EAGH,OAAOR,KAAK;AACd,CAAC","names":["mergeClasses","shorthands","tokens","typographyStyles","spinnerClassNames","root","spinner","label","rValues","tiny","extraSmall","small","medium","large","extraLarge","huge","spinnnerSizes","spinnerAnimation","container","animationDuration","animationIterationCount","animationTimingFunction","backgroundColor","useRootStyles","useLoaderStyles","useTrackStyles","useLabelStyles","useSpinnerStyles_unstable","state","labelPosition","size","appearance","rootStyles","spinnerStyles","labelStyles","trackStyles","className","vertical","horizontal","spinnerSVG"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts"],"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/index.js.map

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,mBAAmB,EACnBC,yBAAyB,QACpB,WAAW","names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-spinner/src/index.ts"],"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

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Spinner/index"), exports);
 //# sourceMappingURL=Spinner.js.map

package/lib-commonjs/Spinner.js.map

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-spinner/src/Spinner.ts"],"sourcesContent":["export * from './components/Spinner/index';\n"]}

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

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DefaultSvg = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const DefaultSvg = () => React.createElement("svg", {
   className: "fui-Spinner__Progressbar"
 }, React.createElement("circle", {
@@ -14,6 +12,5 @@ const DefaultSvg = () => React.createElement("svg", {
 }), React.createElement("circle", {
   className: "fui-Spinner__Tail"
 }));
-
 exports.DefaultSvg = DefaultSvg;
 //# sourceMappingURL=DefaultSvg.js.map

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":";;;;;;AAAA;AAEO,MAAMA,UAAU,GAAG,MACxBC;EAAKC,SAAS,EAAC;AAA0B,GACvCD;EAAQC,SAAS,EAAC;AAAoB,EAAG,EACzCD;EAAQC,SAAS,EAAC;AAAmB,EAAG,CAE3C;AALYC,kBAAU","names":["DefaultSvg","React","className","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/DefaultSvg.tsx"],"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-commonjs/components/Spinner/Spinner.js

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Spinner = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useSpinner_1 = /*#__PURE__*/require("./useSpinner");
-
 const renderSpinner_1 = /*#__PURE__*/require("./renderSpinner");
-
 const useSpinnerStyles_1 = /*#__PURE__*/require("./useSpinnerStyles");
 /**
  * Converged Spinner component for the fluentui repo
  */
-
-
 exports.Spinner = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useSpinner_1.useSpinner_unstable(props, ref);
   useSpinnerStyles_1.useSpinnerStyles_unstable(state);

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,eAAO,gBAAsCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGC,gCAAmB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE7CG,4CAAyB,CAACF,KAAK,CAAC;EAChC,OAAOG,sCAAsB,CAACH,KAAK,CAAC;AACtC,CAAC,CAAC;AAEFL,eAAO,CAACS,WAAW,GAAG,SAAS","names":["exports","React","forwardRef","props","ref","state","useSpinner_1","useSpinnerStyles_1","renderSpinner_1","displayName"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx"],"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-commonjs/components/Spinner/Spinner.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
+{"version":3,"mappings":"","names":[],"sourceRoot":"","sources":[],"sourcesContent":[]}

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

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./Spinner"), exports);
-
 tslib_1.__exportStar(require("./Spinner.types"), exports);
-
 tslib_1.__exportStar(require("./renderSpinner"), exports);
-
 tslib_1.__exportStar(require("./useSpinner"), exports);
-
 tslib_1.__exportStar(require("./useSpinnerStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/index.ts"],"sourcesContent":["export * from './Spinner';\nexport * from './Spinner.types';\nexport * from './renderSpinner';\nexport * from './useSpinner';\nexport * from './useSpinnerStyles';\n"]}

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

@@ -4,15 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderSpinner_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of Spinner
  */
-
-
 const renderSpinner_unstable = state => {
   const {
     slots,
@@ -21,12 +17,15 @@ const renderSpinner_unstable = state => {
   const {
     labelPosition
   } = state;
-  return React.createElement(slots.root, { ...slotProps.root
-  }, slots.label && (labelPosition === 'above' || labelPosition === 'before') && React.createElement(slots.label, { ...slotProps.label
-  }), slots.spinner && React.createElement(slots.spinner, { ...slotProps.spinner
-  }), slots.label && (labelPosition === 'below' || labelPosition === 'after') && React.createElement(slots.label, { ...slotProps.label
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, slots.label && (labelPosition === 'above' || labelPosition === 'before') && React.createElement(slots.label, {
+    ...slotProps.label
+  }), slots.spinner && React.createElement(slots.spinner, {
+    ...slotProps.spinner
+  }), slots.label && (labelPosition === 'below' || labelPosition === 'after') && React.createElement(slots.label, {
+    ...slotProps.label
   }));
 };
-
 exports.renderSpinner_unstable = renderSpinner_unstable;
 //# sourceMappingURL=renderSpinner.js.map

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAeH,KAAK,CAAC;EAC1D,MAAM;IAAEI;EAAa,CAAE,GAAGJ,KAAK;EAC/B,OACEK,oBAACJ,KAAK,CAACK,IAAI;IAAA,GAAKJ,SAAS,CAACI;EAAI,GAC3BL,KAAK,CAACM,KAAK,KAAKH,aAAa,KAAK,OAAO,IAAIA,aAAa,KAAK,QAAQ,CAAC,IAAIC,oBAACJ,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,EAChHN,KAAK,CAACO,OAAO,IAAIH,oBAACJ,KAAK,CAACO,OAAO;IAAA,GAAKN,SAAS,CAACM;EAAO,EAAI,EACzDP,KAAK,CAACM,KAAK,KAAKH,aAAa,KAAK,OAAO,IAAIA,aAAa,KAAK,OAAO,CAAC,IAAIC,oBAACJ,KAAK,CAACM,KAAK;IAAA,GAAKL,SAAS,CAACK;EAAK,EAAI,CACrG;AAEjB,CAAC;AAVYE,8BAAsB","names":["renderSpinner_unstable","state","slots","slotProps","react_utilities_1","labelPosition","React","root","label","spinner","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/renderSpinner.tsx"],"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-commonjs/components/Spinner/useSpinner.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSpinner_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
-
 const DefaultSvg_1 = /*#__PURE__*/require("./DefaultSvg");
 /**
  * Create the state required to render Spinner.
@@ -21,8 +17,6 @@ const DefaultSvg_1 = /*#__PURE__*/require("./DefaultSvg");
  * @param props - props from this instance of Spinner
  * @param ref - reference to root HTMLElement of Spinner
  */
-
-
 const useSpinner_unstable = (props, ref) => {
   // Props
   const {
@@ -54,11 +48,9 @@ const useSpinner_unstable = (props, ref) => {
       tabIndex
     }
   });
-
   if (labelShorthand && nativeRoot && !nativeRoot['aria-labelledby']) {
     nativeRoot['aria-labelledby'] = labelShorthand.id;
   }
-
   const state = {
     appearance,
     labelPosition,
@@ -74,6 +66,5 @@ const useSpinner_unstable = (props, ref) => {
   };
   return state;
 };
-
 exports.useSpinner_unstable = useSpinner_unstable;
 //# sourceMappingURL=useSpinner.js.map

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

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AACA;AAEA;;;;;;;;;AASO,MAAMA,mBAAmB,GAAG,CAACC,KAAmB,EAAEC,GAA2B,KAAkB;EACpG;EACA,MAAM;IAAEC,UAAU,GAAG,SAAS;IAAEC,aAAa,GAAG,OAAO;IAAEC,IAAI,GAAG;EAAQ,CAAE,GAAGJ,KAAK;EAClF,MAAMK,MAAM,GAAGC,uBAAK,CAAC,SAAS,CAAC;EAE/B,MAAM;IAAEC,IAAI,GAAG,aAAa;IAAEC,QAAQ;IAAE,GAAGC;EAAI,CAAE,GAAGT,KAAK;EACzD,MAAMU,UAAU,GAAGJ,uCAAqB,CAAC,KAAK,EAAE;IAAEL,GAAG;IAAEM,IAAI;IAAE,GAAGE;EAAI,CAAE,EAAE,CAAC,MAAM,CAAC,CAAC;EAEjF,MAAME,cAAc,GAAGL,kCAAgB,CAACN,KAAK,CAACY,KAAK,EAAE;IACnDC,YAAY,EAAE;MACZC,EAAE,EAAET;KACL;IACDU,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,gBAAgB,GAAGV,kCAAgB,CAACN,KAAK,CAACiB,OAAO,EAAE;IACvDF,QAAQ,EAAE,IAAI;IACdF,YAAY,EAAE;MACZK,QAAQ,EAAEC,oBAACC,uBAAU,OAAG;MACxBZ;;GAEH,CAAC;EAEF,IAAIG,cAAc,IAAID,UAAU,IAAI,CAACA,UAAU,CAAC,iBAAiB,CAAC,EAAE;IAClEA,UAAU,CAAC,iBAAiB,CAAC,GAAGC,cAAc,CAACG,EAAE;;EAGnD,MAAMO,KAAK,GAAiB;IAC1BnB,UAAU;IACVC,aAAa;IACbC,IAAI;IACJkB,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXN,OAAO,EAAE,MAAM;MACfL,KAAK,EAAEY;KACR;IACDD,IAAI,EAAEb,UAAU;IAChBO,OAAO,EAAED,gBAAgB;IACzBJ,KAAK,EAAED;GACR;EACD,OAAOU,KAAK;AACd,CAAC;AAzCYI,2BAAmB","names":["useSpinner_unstable","props","ref","appearance","labelPosition","size","baseId","react_utilities_1","role","tabIndex","rest","nativeRoot","labelShorthand","label","defaultProps","id","required","spinnerShortHand","spinner","children","React","DefaultSvg_1","state","components","root","react_label_1","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/useSpinner.tsx"],"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-commonjs/components/Spinner/useSpinnerStyles.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSpinnerStyles_unstable = exports.spinnerClassNames = void 0;
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
 exports.spinnerClassNames = {
   root: 'fui-Spinner',
   spinner: 'fui-Spinner__spinner',
@@ -18,7 +15,6 @@ exports.spinnerClassNames = {
  * TODO: Update with proper tokens when added
  * Radii for the Spinner circles
  */
-
 const rValues = {
   tiny: '9px',
   extraSmall: '11px',
@@ -32,7 +28,6 @@ const rValues = {
  * TODO: Update with proper tokens when added
  * Sizes for the Spinner
  */
-
 const spinnnerSizes = {
   tiny: '20px',
   extraSmall: '24px',
@@ -46,7 +41,6 @@ const spinnnerSizes = {
  * TODO: Update with proper tokens when added
  * Animation for Spinner
  */
-
 const spinnerAnimation = {
   container: {
     animationDuration: '3s',
@@ -58,7 +52,6 @@ const spinnerAnimation = {
 /**
  * Styles for the root slot
  */
-
 const useRootStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "mc9l5x": "f22iagw",
@@ -77,7 +70,6 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
 }, {
   "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fez10in{line-height:0;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}"]
 });
-
 const useLoaderStyles = /*#__PURE__*/react_1.__styles({
   "spinnerSVG": {
     "B3aqqti": "f1or16p5",
@@ -146,7 +138,6 @@ const useLoaderStyles = /*#__PURE__*/react_1.__styles({
     "m": "screen and (prefers-reduced-motion: reduce)"
   }]]
 });
-
 const useTrackStyles = /*#__PURE__*/react_1.__styles({
   "inverted": {
     "gwg7kz": "f1jvpmnu",
@@ -193,7 +184,6 @@ const useTrackStyles = /*#__PURE__*/react_1.__styles({
     "m": "screen and (forced-colors: active)"
   }]]
 });
-
 const useLabelStyles = /*#__PURE__*/react_1.__styles({
   "inverted": {
     "sj55zd": "f15aqcq"
@@ -247,8 +237,6 @@ const useLabelStyles = /*#__PURE__*/react_1.__styles({
 /**
  * Apply styling to the Spinner slots based on the state
  */
-
-
 const useSpinnerStyles_unstable = state => {
   const {
     labelPosition,
@@ -260,17 +248,13 @@ const useSpinnerStyles_unstable = state => {
   const labelStyles = useLabelStyles();
   const trackStyles = useTrackStyles();
   state.root.className = react_1.mergeClasses(exports.spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);
-
   if (state.spinner) {
     state.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-commonjs/components/Spinner/useSpinnerStyles.js.map

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":"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","names":["exports","root","spinner","label","rValues","tiny","extraSmall","small","medium","large","extraLarge","huge","spinnnerSizes","spinnerAnimation","container","animationDuration","animationIterationCount","animationTimingFunction","backgroundColor","useRootStyles","react_1","useLoaderStyles","useTrackStyles","useLabelStyles","useSpinnerStyles_unstable","state","labelPosition","size","appearance","rootStyles","spinnerStyles","labelStyles","trackStyles","className","vertical","horizontal","spinnerSVG"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/useSpinnerStyles.ts"],"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-commonjs/index.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSpinnerStyles_unstable = exports.useSpinner_unstable = exports.renderSpinner_unstable = exports.spinnerClassNames = exports.Spinner = void 0;
-
 var Spinner_1 = /*#__PURE__*/require("./Spinner");
-
 Object.defineProperty(exports, "Spinner", {
   enumerable: true,
   get: function () {

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"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":""}
+{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,wBAAO;EAAA;AAAA;AACPF;EAAAC;EAAAC;IAAA,kCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,uCAAsB;EAAA;AAAA;AACtBF;EAAAC;EAAAC;IAAA,oCAAmB;EAAA;AAAA;AACnBF;EAAAC;EAAAC;IAAA,0CAAyB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-spinner/src/index.ts"],"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinner",
-  "version": "0.0.0-nightly-20221228-0425.1",
+  "version": "0.0.0-nightly-20221230-0421.1",
   "description": "Spinner component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -27,13 +27,13 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221228-0425.1",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221230-0421.1",
+    "@fluentui/scripts": "*"
   },
   "dependencies": {
-    "@fluentui/react-theme": "0.0.0-nightly-20221228-0425.1",
-    "@fluentui/react-label": "0.0.0-nightly-20221228-0425.1",
-    "@fluentui/react-utilities": "0.0.0-nightly-20221228-0425.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20221230-0421.1",
+    "@fluentui/react-label": "0.0.0-nightly-20221230-0421.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20221230-0421.1",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },