@fluentui/react-spinner 9.1.4 → 9.1.6

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

@@ -1 +1 @@
-{"version":3,"names":["react_1","require","react_theme_1","exports","spinnerClassNames","root","spinner","label","rValues","tiny","extraSmall","small","medium","large","extraLarge","huge","spinnnerSizes","spinnerAnimation","container","animationDuration","animationIterationCount","animationTimingFunction","backgroundColor","useRootStyles","__styles","mc9l5x","Bt984gj","Brf1p80","Bg96gwp","i8kkvl","Belr9w4","horizontal","Beiy3e4","vertical","d","useLoaderStyles","spinnerSVG","B3aqqti","Brovlpu","Bxa1mx5","Bwaue66","fyp1ls","ag6ruv","osj692","aq5vjd","tlu9e1","J3u96z","d32isg","Bsvqbuc","b3s3i5","Bah9ito","ut6tcf","B7p06xz","B807ibg","f","k","m","useTrackStyles","inverted","gwg7kz","Bvrehnu","Bidp6o","cq3kgi","Btwiser","B8001xd","Bdordwa","Bo2mdfu","E10nrc","Bwl7w15","Bksq7rz","primary","B8k2rxp","y14cdu","useLabelStyles","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","useSpinnerStyles_unstable","state","labelPosition","size","appearance","rootStyles","spinnerStyles","labelStyles","trackStyles","className","mergeClasses"],"sources":["../src/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"],"mappings":"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"}
+{"version":3,"sources":["../../../lib/components/Spinner/useSpinnerStyles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const spinnerClassNames = {\n  root: 'fui-Spinner',\n  spinner: 'fui-Spinner__spinner',\n  label: 'fui-Spinner__label'\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 * 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 * 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 * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    Brf1p80: \"f4d9j23\",\n    Bg96gwp: \"fez10in\",\n    i8kkvl: \"f4px1ci\",\n    Belr9w4: \"fn67r4l\"\n  },\n  horizontal: {\n    Beiy3e4: \"f1063pyq\"\n  },\n  vertical: {\n    Beiy3e4: \"f1vx9l62\"\n  }\n}, {\n  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;}\"]\n});\nconst useLoaderStyles = /*#__PURE__*/__styles({\n  spinnerSVG: {\n    B3aqqti: \"f1or16p5\",\n    Brovlpu: \"f1grzc83\",\n    Bxa1mx5: \"f19shzzi\",\n    Bwaue66: [\"f5tbecn\", \"f15qb8s7\"],\n    fyp1ls: \"fn4mtlg\",\n    ag6ruv: \"f1y80fxs\",\n    osj692: \"f1r2crtq\",\n    aq5vjd: \"f1wsi8sr\",\n    tlu9e1: \"f1bkm2qd\",\n    J3u96z: \"f1urqz7h\",\n    d32isg: \"f1da2vov\",\n    Bsvqbuc: \"f11rfva0\",\n    b3s3i5: \"f1exc66\"\n  },\n  tiny: {\n    Bah9ito: \"f1j4wmu2\",\n    ut6tcf: \"f1vppzuq\",\n    B7p06xz: \"fv1u54w\",\n    B807ibg: \"fngtx1d\"\n  },\n  \"extra-small\": {\n    Bah9ito: \"fmpqlna\",\n    ut6tcf: \"f15z5jzu\",\n    B7p06xz: \"fv1u54w\",\n    B807ibg: \"fadawes\"\n  },\n  small: {\n    Bah9ito: \"fo52gbo\",\n    ut6tcf: \"f1b41i3v\",\n    B7p06xz: \"fv1u54w\",\n    B807ibg: \"f1xqyyrl\"\n  },\n  medium: {\n    Bah9ito: \"f1aiqagr\",\n    ut6tcf: \"f1wtx80b\",\n    B7p06xz: \"f1flujpd\",\n    B807ibg: \"f1u06hy7\"\n  },\n  large: {\n    Bah9ito: \"f1trdq7b\",\n    ut6tcf: \"f9e0mc5\",\n    B7p06xz: \"f1flujpd\",\n    B807ibg: \"f13pmvhl\"\n  },\n  \"extra-large\": {\n    Bah9ito: \"f89rf2a\",\n    ut6tcf: \"f1w2xg3q\",\n    B7p06xz: \"f1flujpd\",\n    B807ibg: \"fmn74v6\"\n  },\n  huge: {\n    Bah9ito: \"f1rx7k5y\",\n    ut6tcf: \"f1vtyt49\",\n    B7p06xz: \"f1owbg48\",\n    B807ibg: \"f1fr1izd\"\n  }\n}, {\n  f: [\".f1or16p5:focus{outline-width:3px;}\", \".f1grzc83:focus{outline-style:solid;}\", \".f19shzzi:focus{outline-color:transparent;}\"],\n  k: [\"@-webkit-keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}\", \"@-webkit-keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}\", \"@keyframes fb7n1on{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}\", \"@keyframes f1gx3jof{0%{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);transform:rotate(-360deg);}}\"],\n  d: [\".f5tbecn>svg{-webkit-animation-name:fb7n1on;animation-name:fb7n1on;}\", \".f15qb8s7>svg{-webkit-animation-name:f1gx3jof;animation-name:f1gx3jof;}\", \".fn4mtlg>svg{-webkit-animation-duration:3s;animation-duration:3s;}\", \".f1y80fxs>svg{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}\", \".f1r2crtq>svg{-webkit-animation-timing-function:linear;animation-timing-function:linear;}\", \".f1wsi8sr>svg{background-color:transparent;}\", \".f1da2vov>svg>circle{cx:50%;}\", \".f11rfva0>svg>circle{cy:50%;}\", \".f1exc66>svg>circle{fill:none;}\", \".f1j4wmu2>svg{height:20px;}\", \".f1vppzuq>svg{width:20px;}\", \".fv1u54w>svg>circle{stroke-width:var(--strokeWidthThick);}\", \".fngtx1d>svg>circle{r:9px;}\", \".fmpqlna>svg{height:24px;}\", \".f15z5jzu>svg{width:24px;}\", \".fadawes>svg>circle{r:11px;}\", \".fo52gbo>svg{height:28px;}\", \".f1b41i3v>svg{width:28px;}\", \".f1xqyyrl>svg>circle{r:13px;}\", \".f1aiqagr>svg{height:32px;}\", \".f1wtx80b>svg{width:32px;}\", \".f1flujpd>svg>circle{stroke-width:var(--strokeWidthThicker);}\", \".f1u06hy7>svg>circle{r:14.5px;}\", \".f1trdq7b>svg{height:36px;}\", \".f9e0mc5>svg{width:36px;}\", \".f13pmvhl>svg>circle{r:16.5px;}\", \".f89rf2a>svg{height:40px;}\", \".f1w2xg3q>svg{width:40px;}\", \".fmn74v6>svg>circle{r:18.5px;}\", \".f1rx7k5y>svg{height:44px;}\", \".f1vtyt49>svg{width:44px;}\", \".f1owbg48>svg>circle{stroke-width:var(--strokeWidthThickest);}\", \".f1fr1izd>svg>circle{r:20px;}\"],\n  m: [[\"@media screen and (prefers-reduced-motion: reduce){.f1bkm2qd>svg{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.f1urqz7h>svg{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }]]\n});\nconst useTrackStyles = /*#__PURE__*/__styles({\n  inverted: {\n    gwg7kz: \"f1jvpmnu\",\n    Bvrehnu: \"fq8a5sv\",\n    Bidp6o: \"f1b4lwqj\",\n    cq3kgi: \"f1najlst\",\n    Btwiser: \"fjxod4\",\n    B8001xd: \"fu3xdw0\",\n    Bdordwa: [\"f1ttdh6v\", \"fmyjox0\"],\n    Bo2mdfu: \"f1eseayc\",\n    E10nrc: \"folzdkc\",\n    Bwl7w15: \"fhlfkde\",\n    Bksq7rz: \"f1esql28\"\n  },\n  primary: {\n    gwg7kz: \"f11ditju\",\n    B8k2rxp: \"f1m9nikz\",\n    Bvrehnu: \"fq8a5sv\",\n    Bidp6o: \"f1b4lwqj\",\n    cq3kgi: \"f1najlst\",\n    Btwiser: \"fjxod4\",\n    B8001xd: \"fu3xdw0\",\n    Bdordwa: [\"f1ttdh6v\", \"fmyjox0\"],\n    Bo2mdfu: \"f1eseayc\",\n    E10nrc: \"folzdkc\",\n    Bwl7w15: \"fhlfkde\",\n    Bksq7rz: \"f61h2gu\",\n    y14cdu: \"flglbw1\"\n  }\n}, {\n  d: [\".f1jvpmnu>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}\", \".fq8a5sv>svg>circle.fui-Spinner__Tail{-webkit-animation-name:f1v1ql0f;animation-name:f1v1ql0f;}\", \".f1b4lwqj>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:1.5s;animation-duration:1.5s;}\", \".f1najlst>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}\", \".fjxod4>svg>circle.fui-Spinner__Tail{-webkit-animation-timing-function:var(--curveEasyEase);animation-timing-function:var(--curveEasyEase);}\", \".fu3xdw0>svg>circle.fui-Spinner__Tail{stroke-linecap:round;}\", \".f1ttdh6v>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);}\", \".fmyjox0>svg>circle.fui-Spinner__Tail{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);}\", \".f1eseayc>svg>circle.fui-Spinner__Tail{transform-origin:50% 50%;}\", \".f1esql28>svg>circle.fui-Spinner__Track{stroke:rgba(255, 255, 255, 0.2);}\", \".f11ditju>svg>circle.fui-Spinner__Tail{stroke:var(--colorBrandStroke1);}\", \".f61h2gu>svg>circle.fui-Spinner__Track{stroke:var(--colorBrandStroke2);}\"],\n  k: [\"@-webkit-keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}\", \"@keyframes f1v1ql0f{0%{stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset:-35;}100%{stroke-dasharray:90,150;stroke-dashoffset:-124;}}\"],\n  m: [[\"@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (forced-colors: active){.f1m9nikz>svg>circle.fui-Spinner__Tail{stroke:var(--colorNeutralStrokeOnBrand2);}}\", {\n    m: \"screen and (forced-colors: active)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.folzdkc>svg>circle.fui-Spinner__Tail{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (prefers-reduced-motion: reduce){.fhlfkde>svg>circle.fui-Spinner__Tail{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}\", {\n    m: \"screen and (prefers-reduced-motion: reduce)\"\n  }], [\"@media screen and (forced-colors: active){.flglbw1>svg>circle.fui-Spinner__Track{stroke:var(--colorNeutralBackgroundInverted);}}\", {\n    m: \"screen and (forced-colors: active)\"\n  }]]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n  inverted: {\n    sj55zd: \"f15aqcq\"\n  },\n  primary: {},\n  tiny: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  \"extra-small\": {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  small: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\"\n  },\n  medium: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"faaz57k\"\n  },\n  large: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"faaz57k\"\n  },\n  \"extra-large\": {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fod5ikn\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"faaz57k\"\n  },\n  huge: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"f1pp30po\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"f106mvju\"\n  }\n}, {\n  d: [\".f15aqcq{color:rgba(255, 255, 255, 1);}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".fod5ikn{font-size:var(--fontSizeBase400);}\", \".fl43uef{font-weight:var(--fontWeightSemibold);}\", \".faaz57k{line-height:var(--lineHeightBase400);}\", \".f1pp30po{font-size:var(--fontSizeBase500);}\", \".f106mvju{line-height:var(--lineHeightBase500);}\"]\n});\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = state => {\n  const {\n    labelPosition,\n    size,\n    appearance = 'primary'\n  } = state;\n  const rootStyles = useRootStyles();\n  const spinnerStyles = useLoaderStyles();\n  const labelStyles = useLabelStyles();\n  const trackStyles = useTrackStyles();\n  state.root.className = mergeClasses(spinnerClassNames.root, rootStyles.root, (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical, (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal, state.root.className);\n  if (state.spinner) {\n    state.spinner.className = mergeClasses(spinnerClassNames.spinner, spinnerStyles.spinnerSVG, spinnerStyles[size], trackStyles[appearance], state.spinner.className);\n  }\n  if (state.label) {\n    state.label.className = mergeClasses(spinnerClassNames.label, labelStyles[size], labelStyles[appearance], state.label.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useSpinnerStyles.js.map"],"names":["spinnerClassNames","useSpinnerStyles_unstable","root","spinner","label","rValues","tiny","extraSmall","small","medium","large","extraLarge","huge","spinnnerSizes","spinnerAnimation","container","animationDuration","animationIterationCount","animationTimingFunction","backgroundColor","useRootStyles","__styles","mc9l5x","Bt984gj","Brf1p80","Bg96gwp","i8kkvl","Belr9w4","horizontal","Beiy3e4","vertical","d","useLoaderStyles","spinnerSVG","B3aqqti","Brovlpu","Bxa1mx5","Bwaue66","fyp1ls","ag6ruv","osj692","aq5vjd","tlu9e1","J3u96z","d32isg","Bsvqbuc","b3s3i5","Bah9ito","ut6tcf","B7p06xz","B807ibg","f","k","m","useTrackStyles","inverted","gwg7kz","Bvrehnu","Bidp6o","cq3kgi","Btwiser","B8001xd","Bdordwa","Bo2mdfu","E10nrc","Bwl7w15","Bksq7rz","primary","B8k2rxp","y14cdu","useLabelStyles","sj55zd","Bahqtrf","Be2twd7","Bhrd7zp","state","labelPosition","size","appearance","rootStyles","spinnerStyles","labelStyles","trackStyles","className","mergeClasses"],"mappings":"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"}

package/lib-commonjs/index.js

@@ -1,38 +1,21 @@
 "use strict";
-
 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 () {
-    return Spinner_1.Spinner;
-  }
-});
-Object.defineProperty(exports, "spinnerClassNames", {
-  enumerable: true,
-  get: function () {
-    return Spinner_1.spinnerClassNames;
-  }
+    value: true
 });
-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;
-  }
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Spinner: ()=>_spinner.Spinner,
+    spinnerClassNames: ()=>_spinner.spinnerClassNames,
+    renderSpinner_unstable: ()=>_spinner.renderSpinner_unstable,
+    useSpinner_unstable: ()=>_spinner.useSpinner_unstable,
+    useSpinnerStyles_unstable: ()=>_spinner.useSpinnerStyles_unstable
 });
+const _spinner = require("./Spinner");
+ //# sourceMappingURL=index.js.map
+
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Spinner_1","require","Object","defineProperty","exports","enumerable","get","Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable"],"sources":["../src/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"],"mappings":";;;;;;AAAA,IAAAA,SAAA,gBAAAC,OAAA;AACEC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,SAAA,CAAAO,OAAO;EAAA;AAAA;AACPL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,SAAA,CAAAQ,iBAAiB;EAAA;AAAA;AACjBN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,SAAA,CAAAS,sBAAsB;EAAA;AAAA;AACtBP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,SAAA,CAAAU,mBAAmB;EAAA;AAAA;AACnBR,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,SAAA,CAAAW,yBAAyB;EAAA;AAAA"}
+{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Spinner, spinnerClassNames, renderSpinner_unstable, useSpinner_unstable, useSpinnerStyles_unstable } from './Spinner';\n//# sourceMappingURL=index.js.map"],"names":["Spinner","spinnerClassNames","renderSpinner_unstable","useSpinner_unstable","useSpinnerStyles_unstable"],"mappings":";;;;;;;;;;;IAASA,OAAO,MAAPA,gBAAO;IAAEC,iBAAiB,MAAjBA,0BAAiB;IAAEC,sBAAsB,MAAtBA,+BAAsB;IAAEC,mBAAmB,MAAnBA,4BAAmB;IAAEC,yBAAyB,MAAzBA,kCAAyB;;yBAAQ;CACnH,iCAAiC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-spinner",
-  "version": "9.1.4",
+  "version": "9.1.6",
   "description": "Spinner component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -22,22 +22,22 @@
     "test": "jest --passWithNoTests",
     "storybook": "start-storybook",
     "type-check": "tsc -b tsconfig.json",
-    "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
+    "generate-api": "just-scripts generate-api"
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.20",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-label": "^9.1.4",
-    "@fluentui/react-shared-contexts": "^9.3.1",
-    "@fluentui/react-theme": "^9.1.6",
-    "@fluentui/react-utilities": "^9.7.1",
+    "@fluentui/react-label": "^9.1.6",
+    "@fluentui/react-shared-contexts": "^9.3.3",
+    "@fluentui/react-theme": "^9.1.7",
+    "@fluentui/react-utilities": "^9.7.2",
     "@griffel/react": "^1.5.2",
-    "tslib": "^2.1.0"
+    "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
     "@types/react": ">=16.8.0 <19.0.0",
@@ -54,6 +54,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
       "import": "./lib/index.js",
       "require": "./lib-commonjs/index.js"
     },

package/lib-amd/Spinner.js

@@ -1,6 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,10 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,17 +0,0 @@
-define(["require", "exports", "react", "./useSpinner", "./renderSpinner", "./useSpinnerStyles", "@fluentui/react-shared-contexts"], function (require, exports, React, useSpinner_1, renderSpinner_1, useSpinnerStyles_1, react_shared_contexts_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);
-        var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useSpinnerStyles_unstable;
-        useCustomStyles(state);
-        return renderSpinner_1.renderSpinner_unstable(state);
-    });
-    exports.Spinner.displayName = 'Spinner';
-});
-//# sourceMappingURL=Spinner.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-spinner/src/components/Spinner/Spinner.tsx"],"names":[],"mappings":";;;;IAQA;;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;QAEzB,IAA2B,eAAe,GAAK,oDAA4B,EAAE,0BAAnC,CAAoC;QACtF,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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\n  const { useSpinnerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderSpinner_unstable(state);\n});\n\nSpinner.displayName = 'Spinner';\n"]}

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

@@ -1,5 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,10 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,18 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,53 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,256 +0,0 @@
-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