@fluentui/react-spinner 9.0.0-rc.4 → 9.0.0-rc.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.json +40 -1
  2. package/CHANGELOG.md +15 -2
  3. package/lib/components/Spinner/useSpinnerStyles.js +4 -2
  4. package/lib/components/Spinner/useSpinnerStyles.js.map +1 -1
  5. package/lib-commonjs/components/Spinner/useSpinnerStyles.js +4 -2
  6. package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map +1 -1
  7. package/package.json +5 -5
package/CHANGELOG.json CHANGED
@@ -2,7 +2,46 @@
2
2
  "name": "@fluentui/react-spinner",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 26 May 2022 21:00:05 GMT",
5
+ "date": "Tue, 31 May 2022 21:26:41 GMT",
6
+ "tag": "@fluentui/react-spinner_v9.0.0-rc.5",
7
+ "version": "9.0.0-rc.5",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "olfedias@microsoft.com",
12
+ "package": "@fluentui/react-spinner",
13
+ "commit": "0a5e9fa77a72eecafdd07034ccdc0b95fd49877c",
14
+ "comment": "chore: Update Griffel to latest version"
15
+ },
16
+ {
17
+ "author": "tristan.watanabe@gmail.com",
18
+ "package": "@fluentui/react-spinner",
19
+ "commit": "8a3d525b3791c24631f63a52bda19113d886a563",
20
+ "comment": "Remove usage of focus-visible pseudo-class."
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-spinner",
25
+ "comment": "Bump @fluentui/react-label to v9.0.0-rc.5",
26
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-spinner",
31
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
32
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-spinner",
37
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
38
+ "commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
39
+ }
40
+ ]
41
+ }
42
+ },
43
+ {
44
+ "date": "Thu, 26 May 2022 21:01:29 GMT",
6
45
  "tag": "@fluentui/react-spinner_v9.0.0-rc.4",
7
46
  "version": "9.0.0-rc.4",
8
47
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,25 @@
1
1
  # Change Log - @fluentui/react-spinner
2
2
 
3
- This log was last generated on Thu, 26 May 2022 21:00:05 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 31 May 2022 21:26:41 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-rc.5)
8
+
9
+ Tue, 31 May 2022 21:26:41 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-rc.4..@fluentui/react-spinner_v9.0.0-rc.5)
11
+
12
+ ### Changes
13
+
14
+ - chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
15
+ - Remove usage of focus-visible pseudo-class. ([PR #23305](https://github.com/microsoft/fluentui/pull/23305) by tristan.watanabe@gmail.com)
16
+ - Bump @fluentui/react-label to v9.0.0-rc.5 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
17
+ - Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
18
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
19
+
7
20
  ## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-spinner_v9.0.0-rc.4)
8
21
 
9
- Thu, 26 May 2022 21:00:05 GMT
22
+ Thu, 26 May 2022 21:01:29 GMT
10
23
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-spinner_v9.0.0-rc.3..@fluentui/react-spinner_v9.0.0-rc.4)
11
24
 
12
25
  ### Changes
package/lib/components/Spinner/useSpinnerStyles.js CHANGED
@@ -70,7 +70,9 @@ const useRootStyles = /*#__PURE__*/__styles({
70
70
 
71
71
  const useLoaderStyles = /*#__PURE__*/__styles({
72
72
  "spinnerSVG": {
73
- "B486eqv": "f1nahjz1",
73
+ "B3aqqti": "f1or16p5",
74
+ "Brovlpu": "f1grzc83",
75
+ "Bxa1mx5": "f19shzzi",
74
76
  "Bwaue66": ["f5tbecn", "f15qb8s7"],
75
77
  "fyp1ls": "fn4mtlg",
76
78
  "ag6ruv": "f1y80fxs",
@@ -123,7 +125,7 @@ const useLoaderStyles = /*#__PURE__*/__styles({
123
125
  "B807ibg": "f1fr1izd"
124
126
  }
125
127
  }, {
126
- "i": [".f1nahjz1:focus-visible{outline-style:3px solid transparent;}"],
128
+ "f": [".f1or16p5:focus{outline-width:3px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
127
129
  "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);}}"],
128
130
  "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;}"]
129
131
  });
package/lib/components/Spinner/useSpinnerStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, 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 ...shorthands.gap('8px'),\n },\n\n horizontal: {\n flexDirection: 'row',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useLoaderStyles = makeStyles({\n // global SVG class\n spinnerSVG: {\n ':focus-visible': {\n outlineStyle: '3px solid transparent',\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\n },\n ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.tiny,\n },\n },\n\n extraSmall: {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.large,\n },\n },\n\n extraLarge: {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThickest,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n '@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.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n extraSmall: {\n ...typographyStyles.body1,\n },\n\n small: {\n ...typographyStyles.body1,\n },\n\n medium: {\n ...typographyStyles.subtitle2,\n },\n\n large: {\n ...typographyStyles.subtitle2,\n },\n\n extraLarge: {\n ...typographyStyles.subtitle2,\n },\n\n huge: {\n ...typographyStyles.subtitle1,\n },\n});\n\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n const { labelPosition, size = 'medium' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n */\nconst rValues = {\n tiny: '9px',\n extraSmall: '11px',\n small: '13px',\n medium: '14.5px',\n large: '16.5px',\n extraLarge: '18.5px',\n huge: '20px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n */\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n */\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...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 ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.tiny,\n },\n },\n\n extraSmall: {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.large,\n },\n },\n\n extraLarge: {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThickest,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n '@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.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n extraSmall: {\n ...typographyStyles.body1,\n },\n\n small: {\n ...typographyStyles.body1,\n },\n\n medium: {\n ...typographyStyles.subtitle2,\n },\n\n large: {\n ...typographyStyles.subtitle2,\n },\n\n extraLarge: {\n ...typographyStyles.subtitle2,\n },\n\n huge: {\n ...typographyStyles.subtitle1,\n },\n});\n\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n const { labelPosition, size = 'medium' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib-commonjs/components/Spinner/useSpinnerStyles.js CHANGED
@@ -79,7 +79,9 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
79
79
 
80
80
  const useLoaderStyles = /*#__PURE__*/react_1.__styles({
81
81
  "spinnerSVG": {
82
- "B486eqv": "f1nahjz1",
82
+ "B3aqqti": "f1or16p5",
83
+ "Brovlpu": "f1grzc83",
84
+ "Bxa1mx5": "f19shzzi",
83
85
  "Bwaue66": ["f5tbecn", "f15qb8s7"],
84
86
  "fyp1ls": "fn4mtlg",
85
87
  "ag6ruv": "f1y80fxs",
@@ -132,7 +134,7 @@ const useLoaderStyles = /*#__PURE__*/react_1.__styles({
132
134
  "B807ibg": "f1fr1izd"
133
135
  }
134
136
  }, {
135
- "i": [".f1nahjz1:focus-visible{outline-style:3px solid transparent;}"],
137
+ "f": [".f1or16p5:focus{outline-width:3px;}", ".f1grzc83:focus{outline-style:solid;}", ".f19shzzi:focus{outline-color:transparent;}"],
136
138
  "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);}}"],
137
139
  "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;}"]
138
140
  });
package/lib-commonjs/components/Spinner/useSpinnerStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, 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 ...shorthands.gap('8px'),\n },\n\n horizontal: {\n flexDirection: 'row',\n },\n\n vertical: {\n flexDirection: 'column',\n },\n});\n\nconst useLoaderStyles = makeStyles({\n // global SVG class\n spinnerSVG: {\n ':focus-visible': {\n outlineStyle: '3px solid transparent',\n },\n ['& > svg']: {\n animationName: {\n '0%': { transform: 'rotate(0deg)' },\n '100%': { transform: 'rotate(360deg)' },\n },\n ...spinnerAnimation.container,\n },\n ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.tiny,\n },\n },\n\n extraSmall: {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.large,\n },\n },\n\n extraLarge: {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThickest,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n '@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.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n extraSmall: {\n ...typographyStyles.body1,\n },\n\n small: {\n ...typographyStyles.body1,\n },\n\n medium: {\n ...typographyStyles.subtitle2,\n },\n\n large: {\n ...typographyStyles.subtitle2,\n },\n\n extraLarge: {\n ...typographyStyles.subtitle2,\n },\n\n huge: {\n ...typographyStyles.subtitle1,\n },\n});\n\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n const { labelPosition, size = 'medium' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Spinner/useSpinnerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SpinnerState, SpinnerSlots } from './Spinner.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const spinnerClassNames: SlotClassNames<SpinnerSlots> = {\n root: 'fui-Spinner',\n spinner: 'fui-Spinner__spinner',\n label: 'fui-Spinner__label',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Radii for the Spinner circles\n */\nconst rValues = {\n tiny: '9px',\n extraSmall: '11px',\n small: '13px',\n medium: '14.5px',\n large: '16.5px',\n extraLarge: '18.5px',\n huge: '20px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Sizes for the Spinner\n */\nconst spinnnerSizes = {\n tiny: '20px',\n extraSmall: '24px',\n small: '28px',\n medium: '32px',\n large: '36px',\n extraLarge: '40px',\n huge: '44px',\n};\n\n/*\n * TODO: Update with proper tokens when added\n * Animation for Spinner\n */\nconst spinnerAnimation = {\n container: {\n animationDuration: '3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'linear',\n backgroundColor: 'transparent',\n },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n root: {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...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 ['& > svg > circle']: {\n cx: '50%',\n cy: '50%',\n fill: 'none',\n },\n },\n\n tiny: {\n ['& > svg']: {\n height: spinnnerSizes.tiny,\n width: spinnnerSizes.tiny,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.tiny,\n },\n },\n\n extraSmall: {\n ['& > svg']: {\n height: spinnnerSizes.extraSmall,\n width: spinnnerSizes.extraSmall,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.extraSmall,\n },\n },\n\n small: {\n ['& > svg']: {\n height: spinnnerSizes.small,\n width: spinnnerSizes.small,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThick,\n r: rValues.small,\n },\n },\n\n medium: {\n ['& > svg']: {\n height: spinnnerSizes.medium,\n width: spinnnerSizes.medium,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.medium,\n },\n },\n\n large: {\n ['& > svg']: {\n height: spinnnerSizes.large,\n width: spinnnerSizes.large,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.large,\n },\n },\n\n extraLarge: {\n ['& > svg']: {\n height: spinnnerSizes.extraLarge,\n width: spinnnerSizes.extraLarge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThicker,\n r: rValues.extraLarge,\n },\n },\n\n huge: {\n ['& > svg']: {\n height: spinnnerSizes.huge,\n width: spinnnerSizes.huge,\n },\n ['& > svg > circle']: {\n strokeWidth: tokens.strokeWidthThickest,\n r: rValues.huge,\n },\n },\n});\n\nconst useTrackStyles = makeStyles({\n inverted: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n },\n\n ['& > svg > circle.fui-Spinner__Track']: {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n primary: {\n ['& > svg > circle.fui-Spinner__Tail']: {\n stroke: tokens.colorBrandStroke1,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralStrokeOnBrand2,\n },\n animationName: {\n '0%': {\n strokeDasharray: '1,150',\n strokeDashoffset: '0',\n },\n\n '50%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-35',\n },\n\n '100%': {\n strokeDasharray: '90,150',\n strokeDashoffset: '-124',\n },\n },\n animationDuration: '1.5s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(0.33,0,0.67,1)',\n strokeLinecap: 'round',\n transform: 'rotate(-90deg)',\n transformOrigin: '50% 50%',\n '@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.colorNeutralBackground4,\n '@media screen and (forced-colors: active)': {\n stroke: tokens.colorNeutralBackgroundInverted,\n },\n },\n },\n});\n\nconst useLabelStyles = makeStyles({\n // style for label\n\n tiny: {\n ...typographyStyles.body1,\n },\n\n extraSmall: {\n ...typographyStyles.body1,\n },\n\n small: {\n ...typographyStyles.body1,\n },\n\n medium: {\n ...typographyStyles.subtitle2,\n },\n\n large: {\n ...typographyStyles.subtitle2,\n },\n\n extraLarge: {\n ...typographyStyles.subtitle2,\n },\n\n huge: {\n ...typographyStyles.subtitle1,\n },\n});\n\n/**\n * Apply styling to the Spinner slots based on the state\n */\nexport const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {\n const { labelPosition, size = 'medium' } = state;\n const rootStyles = useRootStyles();\n const spinnerStyles = useLoaderStyles();\n const labelStyles = useLabelStyles();\n const trackStyles = useTrackStyles();\n\n state.root.className = mergeClasses(\n spinnerClassNames.root,\n rootStyles.root,\n (labelPosition === 'above' || labelPosition === 'below') && rootStyles.vertical,\n (labelPosition === 'before' || labelPosition === 'after') && rootStyles.horizontal,\n state.root.className,\n );\n if (state.spinner && state.appearance) {\n state.spinner.className = mergeClasses(\n spinnerClassNames.spinner,\n spinnerStyles.spinnerSVG,\n size === 'extra-small' && spinnerStyles.extraSmall,\n size === 'extra-large' && spinnerStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && spinnerStyles[size],\n trackStyles[state.appearance],\n state.spinner.className,\n );\n }\n if (state.label) {\n state.label.className = mergeClasses(\n spinnerClassNames.label,\n size === 'extra-small' && labelStyles.extraSmall,\n size === 'extra-large' && labelStyles.extraLarge,\n size !== 'extra-large' && size !== 'extra-small' && labelStyles[size],\n state.label.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-spinner",
3
- "version": "9.0.0-rc.4",
3
+ "version": "9.0.0-rc.5",
4
4
  "description": "Spinner component for Fluent UI React",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -28,14 +28,14 @@
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "9.0.0-beta.7",
31
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.8",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
35
  "@fluentui/react-theme": "9.0.0-rc.9",
36
- "@fluentui/react-label": "9.0.0-rc.4",
37
- "@fluentui/react-utilities": "9.0.0-rc.9",
38
- "@griffel/react": "1.0.5",
36
+ "@fluentui/react-label": "9.0.0-rc.5",
37
+ "@fluentui/react-utilities": "9.0.0-rc.10",
38
+ "@griffel/react": "1.1.0",
39
39
  "tslib": "^2.1.0"
40
40
  },
41
41
  "peerDependencies": {