@fluentui/react-progress 9.3.5 → 9.3.7
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.
- package/CHANGELOG.md +21 -2
- package/lib/components/ProgressBar/useProgressBarStyles.styles.js +22 -5
- package/lib/components/ProgressBar/useProgressBarStyles.styles.js.map +1 -1
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.js +31 -5
- package/lib-commonjs/components/ProgressBar/useProgressBarStyles.styles.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-progress
|
|
2
2
|
|
|
3
|
-
This log was last generated on Fri,
|
|
3
|
+
This log was last generated on Fri, 11 Jul 2025 15:56:57 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.3.7)
|
|
8
|
+
|
|
9
|
+
Fri, 11 Jul 2025 15:56:57 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.3.6..@fluentui/react-progress_v9.3.7)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: add subtle animation for indeterminate progress bar when reduced motion mode is enabled ([PR #34667](https://github.com/microsoft/fluentui/pull/34667) by dmytrokirpa@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-field to v9.3.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.3.6)
|
|
18
|
+
|
|
19
|
+
Fri, 04 Jul 2025 10:02:51 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.3.5..@fluentui/react-progress_v9.3.6)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- Bump @fluentui/react-field to v9.3.6 ([PR #34457](https://github.com/microsoft/fluentui/pull/34457) by beachball)
|
|
25
|
+
|
|
7
26
|
## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.3.5)
|
|
8
27
|
|
|
9
|
-
Fri, 27 Jun 2025 13:
|
|
28
|
+
Fri, 27 Jun 2025 13:39:41 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.3.4..@fluentui/react-progress_v9.3.5)
|
|
11
30
|
|
|
12
31
|
### Patches
|
|
@@ -19,6 +19,17 @@ const indeterminateProgressBar = {
|
|
|
19
19
|
left: '100%'
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
|
+
const indeterminateProgressBarReducedMotion = {
|
|
23
|
+
'0%': {
|
|
24
|
+
opacity: '.2'
|
|
25
|
+
},
|
|
26
|
+
'50%': {
|
|
27
|
+
opacity: '1'
|
|
28
|
+
},
|
|
29
|
+
'100%': {
|
|
30
|
+
opacity: '.2'
|
|
31
|
+
}
|
|
32
|
+
};
|
|
22
33
|
/**
|
|
23
34
|
* Styles for the root slot
|
|
24
35
|
*/
|
|
@@ -90,8 +101,10 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
90
101
|
vin17d: "f1a27w2r",
|
|
91
102
|
Ezkn3b: "f452v7t",
|
|
92
103
|
w3vfg9: "f1cpbl36",
|
|
93
|
-
|
|
94
|
-
B3vm3ge: "
|
|
104
|
+
B3ks32h: "f2xo07b",
|
|
105
|
+
B3vm3ge: "f1f2ih6z",
|
|
106
|
+
Gqtpxc: "f7h4d4t",
|
|
107
|
+
vr3tzx: "f32r5lb"
|
|
95
108
|
},
|
|
96
109
|
brand: {
|
|
97
110
|
De3pzq: "ftywsgz"
|
|
@@ -108,15 +121,19 @@ const useBarStyles = /*#__PURE__*/__styles({
|
|
|
108
121
|
}, {
|
|
109
122
|
m: [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
|
|
110
123
|
m: "screen and (forced-colors: active)"
|
|
111
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.
|
|
124
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f2xo07b{max-width:100%;}}", {
|
|
125
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
|
126
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f1f2ih6z{animation-iteration-count:infinite;}}", {
|
|
127
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
|
128
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f7h4d4t{animation-duration:3s;}}", {
|
|
112
129
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
113
|
-
}], ["@media screen and (prefers-reduced-motion: reduce){.
|
|
130
|
+
}], ["@media screen and (prefers-reduced-motion: reduce){.f32r5lb{animation-name:ftc26vs;}}", {
|
|
114
131
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
115
132
|
}]],
|
|
116
133
|
d: [[".f12b9xdw{border-radius:inherit;}", {
|
|
117
134
|
p: -1
|
|
118
135
|
}], ".f1l02sjl{height:100%;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n to right,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".f1u5hf6c{background-image:linear-gradient(\n to left,\n var(--colorNeutralBackground6) 0%,\n var(--colorTransparentBackground) 50%,\n var(--colorNeutralBackground6) 100%\n );}", ".fwd2bol{animation-name:f1keuaan;}", ".f14gig94{animation-name:f10x8f8u;}", ".f1a27w2r{animation-duration:3s;}", ".f452v7t{animation-timing-function:linear;}", ".f1cpbl36{animation-iteration-count:infinite;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
|
|
119
|
-
k: ["@keyframes f1keuaan{0%{left:-33%;}100%{left:100%;}}", "@keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}"]
|
|
136
|
+
k: ["@keyframes f1keuaan{0%{left:-33%;}100%{left:100%;}}", "@keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}", "@keyframes ftc26vs{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}"]
|
|
120
137
|
});
|
|
121
138
|
/**
|
|
122
139
|
* Apply styling to the ProgressBar slots based on the state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bpep1pd","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","Ezkn3b","w3vfg9","
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","tokens","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bpep1pd","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","Ezkn3b","w3vfg9","B3ks32h","B3vm3ge","Gqtpxc","vr3tzx","brand","error","warning","success","k","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","className","undefined","style","width","Math","min"],"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar'\n};\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\nconst barThicknessValues = {\n medium: '2px',\n large: '4px'\n};\nconst indeterminateProgressBar = {\n '0%': {\n left: '-33%'\n },\n '100%': {\n left: '100%'\n }\n};\nconst indeterminateProgressBarReducedMotion = {\n '0%': {\n opacity: '.2'\n },\n '50%': {\n opacity: '1'\n },\n '100%': {\n opacity: '.2'\n }\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n overflow: 'hidden',\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText'\n }\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n },\n medium: {\n height: barThicknessValues.medium\n },\n large: {\n height: barThicknessValues.large\n }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n base: {\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight'\n },\n borderRadius: 'inherit',\n height: '100%'\n },\n nonZeroDeterminate: {\n transitionProperty: 'width',\n transitionDuration: '0.3s',\n transitionTimingFunction: 'ease'\n },\n indeterminate: {\n maxWidth: '33%',\n position: 'relative',\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralBackground6} 0%,\n ${tokens.colorTransparentBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgressBar,\n animationDuration: '3s',\n animationTimingFunction: 'linear',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n maxWidth: '100%',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationName: indeterminateProgressBarReducedMotion\n }\n },\n brand: {\n backgroundColor: tokens.colorCompoundBrandBackground\n },\n error: {\n backgroundColor: tokens.colorPaletteRedBackground3\n },\n warning: {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3\n },\n success: {\n backgroundColor: tokens.colorPaletteGreenBackground3\n }\n});\n/**\n * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n 'use no memo';\n const { color, max, shape, thickness, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n if (state.bar) {\n state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n }\n if (state.bar && value !== undefined) {\n state.bar.style = {\n width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n ...state.bar.style\n };\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -36,6 +36,17 @@ const indeterminateProgressBar = {
|
|
|
36
36
|
left: '100%'
|
|
37
37
|
}
|
|
38
38
|
};
|
|
39
|
+
const indeterminateProgressBarReducedMotion = {
|
|
40
|
+
'0%': {
|
|
41
|
+
opacity: '.2'
|
|
42
|
+
},
|
|
43
|
+
'50%': {
|
|
44
|
+
opacity: '1'
|
|
45
|
+
},
|
|
46
|
+
'100%': {
|
|
47
|
+
opacity: '.2'
|
|
48
|
+
}
|
|
49
|
+
};
|
|
39
50
|
/**
|
|
40
51
|
* Styles for the root slot
|
|
41
52
|
*/ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
@@ -134,8 +145,10 @@ const indeterminateProgressBar = {
|
|
|
134
145
|
vin17d: "f1a27w2r",
|
|
135
146
|
Ezkn3b: "f452v7t",
|
|
136
147
|
w3vfg9: "f1cpbl36",
|
|
137
|
-
|
|
138
|
-
B3vm3ge: "
|
|
148
|
+
B3ks32h: "f2xo07b",
|
|
149
|
+
B3vm3ge: "f1f2ih6z",
|
|
150
|
+
Gqtpxc: "f7h4d4t",
|
|
151
|
+
vr3tzx: "f32r5lb"
|
|
139
152
|
},
|
|
140
153
|
brand: {
|
|
141
154
|
De3pzq: "ftywsgz"
|
|
@@ -158,13 +171,25 @@ const indeterminateProgressBar = {
|
|
|
158
171
|
}
|
|
159
172
|
],
|
|
160
173
|
[
|
|
161
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
174
|
+
"@media screen and (prefers-reduced-motion: reduce){.f2xo07b{max-width:100%;}}",
|
|
175
|
+
{
|
|
176
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
|
177
|
+
}
|
|
178
|
+
],
|
|
179
|
+
[
|
|
180
|
+
"@media screen and (prefers-reduced-motion: reduce){.f1f2ih6z{animation-iteration-count:infinite;}}",
|
|
181
|
+
{
|
|
182
|
+
m: "screen and (prefers-reduced-motion: reduce)"
|
|
183
|
+
}
|
|
184
|
+
],
|
|
185
|
+
[
|
|
186
|
+
"@media screen and (prefers-reduced-motion: reduce){.f7h4d4t{animation-duration:3s;}}",
|
|
162
187
|
{
|
|
163
188
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
164
189
|
}
|
|
165
190
|
],
|
|
166
191
|
[
|
|
167
|
-
"@media screen and (prefers-reduced-motion: reduce){.
|
|
192
|
+
"@media screen and (prefers-reduced-motion: reduce){.f32r5lb{animation-name:ftc26vs;}}",
|
|
168
193
|
{
|
|
169
194
|
m: "screen and (prefers-reduced-motion: reduce)"
|
|
170
195
|
}
|
|
@@ -197,7 +222,8 @@ const indeterminateProgressBar = {
|
|
|
197
222
|
],
|
|
198
223
|
k: [
|
|
199
224
|
"@keyframes f1keuaan{0%{left:-33%;}100%{left:100%;}}",
|
|
200
|
-
"@keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}"
|
|
225
|
+
"@keyframes f10x8f8u{0%{right:-33%;}100%{right:100%;}}",
|
|
226
|
+
"@keyframes ftc26vs{0%{opacity:.2;}50%{opacity:1;}100%{opacity:.2;}}"
|
|
201
227
|
]
|
|
202
228
|
});
|
|
203
229
|
const useProgressBarStyles_unstable = (state)=>{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar'\n};\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\nconst barThicknessValues = {\n medium: '2px',\n large: '4px'\n};\nconst indeterminateProgressBar = {\n '0%': {\n left: '-33%'\n },\n '100%': {\n left: '100%'\n }\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n overflow: 'hidden',\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText'\n }\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n },\n medium: {\n height: barThicknessValues.medium\n },\n large: {\n height: barThicknessValues.large\n }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n base: {\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight'\n },\n borderRadius: 'inherit',\n height: '100%'\n },\n nonZeroDeterminate: {\n transitionProperty: 'width',\n transitionDuration: '0.3s',\n transitionTimingFunction: 'ease'\n },\n indeterminate: {\n maxWidth: '33%',\n position: 'relative',\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralBackground6} 0%,\n ${tokens.colorTransparentBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgressBar,\n animationDuration: '3s',\n animationTimingFunction: 'linear',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n
|
|
1
|
+
{"version":3,"sources":["useProgressBarStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const progressBarClassNames = {\n root: 'fui-ProgressBar',\n bar: 'fui-ProgressBar__bar'\n};\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\nconst barThicknessValues = {\n medium: '2px',\n large: '4px'\n};\nconst indeterminateProgressBar = {\n '0%': {\n left: '-33%'\n },\n '100%': {\n left: '100%'\n }\n};\nconst indeterminateProgressBarReducedMotion = {\n '0%': {\n opacity: '.2'\n },\n '50%': {\n opacity: '1'\n },\n '100%': {\n opacity: '.2'\n }\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n root: {\n display: 'block',\n backgroundColor: tokens.colorNeutralBackground6,\n width: '100%',\n overflow: 'hidden',\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'CanvasText'\n }\n },\n rounded: {\n borderRadius: tokens.borderRadiusMedium\n },\n square: {\n borderRadius: tokens.borderRadiusNone\n },\n medium: {\n height: barThicknessValues.medium\n },\n large: {\n height: barThicknessValues.large\n }\n});\n/**\n * Styles for the ProgressBar bar\n */ const useBarStyles = makeStyles({\n base: {\n '@media screen and (forced-colors: active)': {\n backgroundColor: 'Highlight'\n },\n borderRadius: 'inherit',\n height: '100%'\n },\n nonZeroDeterminate: {\n transitionProperty: 'width',\n transitionDuration: '0.3s',\n transitionTimingFunction: 'ease'\n },\n indeterminate: {\n maxWidth: '33%',\n position: 'relative',\n backgroundImage: `linear-gradient(\n to right,\n ${tokens.colorNeutralBackground6} 0%,\n ${tokens.colorTransparentBackground} 50%,\n ${tokens.colorNeutralBackground6} 100%\n )`,\n animationName: indeterminateProgressBar,\n animationDuration: '3s',\n animationTimingFunction: 'linear',\n animationIterationCount: 'infinite',\n '@media screen and (prefers-reduced-motion: reduce)': {\n maxWidth: '100%',\n animationIterationCount: 'infinite',\n animationDuration: '3s',\n animationName: indeterminateProgressBarReducedMotion\n }\n },\n brand: {\n backgroundColor: tokens.colorCompoundBrandBackground\n },\n error: {\n backgroundColor: tokens.colorPaletteRedBackground3\n },\n warning: {\n backgroundColor: tokens.colorPaletteDarkOrangeBackground3\n },\n success: {\n backgroundColor: tokens.colorPaletteGreenBackground3\n }\n});\n/**\n * Apply styling to the ProgressBar slots based on the state\n */ export const useProgressBarStyles_unstable = (state)=>{\n 'use no memo';\n const { color, max, shape, thickness, value } = state;\n const rootStyles = useRootStyles();\n const barStyles = useBarStyles();\n state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);\n if (state.bar) {\n state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);\n }\n if (state.bar && value !== undefined) {\n state.bar.style = {\n width: Math.min(100, Math.max(0, value / max * 100)) + '%',\n ...state.bar.style\n };\n }\n return state;\n};\n"],"names":["progressBarClassNames","useProgressBarStyles_unstable","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarReducedMotion","opacity","useRootStyles","__styles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpg54ce","Bpep1pd","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","square","Bqenvij","d","p","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","Ezkn3b","w3vfg9","B3ks32h","B3vm3ge","Gqtpxc","vr3tzx","brand","error","warning","success","k","state","color","max","shape","thickness","value","rootStyles","barStyles","className","mergeClasses","undefined","style","width","Math","min"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-progress",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.7",
|
|
4
4
|
"description": "Progress component for FluentUI v9",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"@fluentui/scripts-api-extractor": "*"
|
|
19
19
|
},
|
|
20
20
|
"dependencies": {
|
|
21
|
-
"@fluentui/react-field": "^9.3.
|
|
21
|
+
"@fluentui/react-field": "^9.3.7",
|
|
22
22
|
"@fluentui/react-jsx-runtime": "^9.1.2",
|
|
23
23
|
"@fluentui/react-shared-contexts": "^9.24.0",
|
|
24
24
|
"@fluentui/react-theme": "^9.1.24",
|