@fluentui/react-button 0.0.0-nightly-20220419-0420.1 → 0.0.0-nightly-20220422-0419.1

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 (50) hide show
  1. package/CHANGELOG.json +97 -34
  2. package/CHANGELOG.md +27 -10
  3. package/dist/react-button.d.ts +3 -1
  4. package/lib/components/Button/useButtonStyles.js +87 -54
  5. package/lib/components/Button/useButtonStyles.js.map +1 -1
  6. package/lib/components/CompoundButton/CompoundButton.d.ts +1 -1
  7. package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
  8. package/lib/components/CompoundButton/useCompoundButtonStyles.js +18 -9
  9. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  10. package/lib/components/SplitButton/useSplitButtonStyles.js +12 -7
  11. package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  12. package/lib/components/ToggleButton/useToggleButton.d.ts +1 -1
  13. package/lib/components/ToggleButton/useToggleButton.js +3 -41
  14. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  15. package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +2 -0
  16. package/lib/components/ToggleButton/useToggleButtonStyles.js +62 -55
  17. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  18. package/lib/index.d.ts +1 -0
  19. package/lib/index.js +1 -0
  20. package/lib/index.js.map +1 -1
  21. package/lib/utils/index.d.ts +1 -0
  22. package/lib/utils/index.js +2 -0
  23. package/lib/utils/index.js.map +1 -0
  24. package/lib/utils/useToggleState.d.ts +3 -0
  25. package/lib/utils/useToggleState.js +37 -0
  26. package/lib/utils/useToggleState.js.map +1 -0
  27. package/lib-commonjs/components/Button/useButtonStyles.js +87 -54
  28. package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
  29. package/lib-commonjs/components/CompoundButton/CompoundButton.d.ts +1 -1
  30. package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
  31. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +18 -9
  32. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  33. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +12 -7
  34. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  35. package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts +1 -1
  36. package/lib-commonjs/components/ToggleButton/useToggleButton.js +3 -42
  37. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  38. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +2 -0
  39. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +65 -57
  40. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  41. package/lib-commonjs/index.d.ts +1 -0
  42. package/lib-commonjs/index.js +10 -1
  43. package/lib-commonjs/index.js.map +1 -1
  44. package/lib-commonjs/utils/index.d.ts +1 -0
  45. package/lib-commonjs/utils/index.js +10 -0
  46. package/lib-commonjs/utils/index.js.map +1 -0
  47. package/lib-commonjs/utils/useToggleState.d.ts +3 -0
  48. package/lib-commonjs/utils/useToggleState.js +48 -0
  49. package/lib-commonjs/utils/useToggleState.js.map +1 -0
  50. package/package.json +9 -9
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-button",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 19 Apr 2022 04:29:00 GMT",
6
- "tag": "@fluentui/react-button_v0.0.0-nightly-20220419-0420.1",
7
- "version": "0.0.0-nightly-20220419-0420.1",
5
+ "date": "Fri, 22 Apr 2022 04:28:39 GMT",
6
+ "tag": "@fluentui/react-button_v0.0.0-nightly-20220422-0419.1",
7
+ "version": "0.0.0-nightly-20220422-0419.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -13,6 +13,83 @@
13
13
  "commit": "not available",
14
14
  "comment": "Release nightly v9"
15
15
  },
16
+ {
17
+ "author": "Humberto.Morimoto@microsoft.com",
18
+ "package": "@fluentui/react-button",
19
+ "commit": "4c11854b93b331f12cdaa7ee0628b01667acba12",
20
+ "comment": "Adding useToggleState hook to scaffold toggleable behavior for individual consumption."
21
+ },
22
+ {
23
+ "author": "Humberto.Morimoto@microsoft.com",
24
+ "package": "@fluentui/react-button",
25
+ "commit": "8ca44964836cefd3c435e9cf9a6ef78ceb256258",
26
+ "comment": "Button: Stop applying active styles when mouse moves away while it is being held and improving styles in High Contrast mode."
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-button",
31
+ "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220422-0419.1",
32
+ "commit": "0dbe6a48dea9ac8bef02ea228baf4172014f9ac9"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-button",
37
+ "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20220422-0419.1",
38
+ "commit": "0dbe6a48dea9ac8bef02ea228baf4172014f9ac9"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-button",
43
+ "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220422-0419.1",
44
+ "commit": "0dbe6a48dea9ac8bef02ea228baf4172014f9ac9"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-button",
49
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220422-0419.1",
50
+ "commit": "0dbe6a48dea9ac8bef02ea228baf4172014f9ac9"
51
+ },
52
+ {
53
+ "author": "beachball",
54
+ "package": "@fluentui/react-button",
55
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220422-0419.1",
56
+ "commit": "0dbe6a48dea9ac8bef02ea228baf4172014f9ac9"
57
+ },
58
+ {
59
+ "author": "beachball",
60
+ "package": "@fluentui/react-button",
61
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220422-0419.1",
62
+ "commit": "0dbe6a48dea9ac8bef02ea228baf4172014f9ac9"
63
+ }
64
+ ]
65
+ }
66
+ },
67
+ {
68
+ "date": "Tue, 19 Apr 2022 19:17:12 GMT",
69
+ "tag": "@fluentui/react-button_v9.0.0-rc.6",
70
+ "version": "9.0.0-rc.6",
71
+ "comments": {
72
+ "none": [
73
+ {
74
+ "author": "elcraig@microsoft.com",
75
+ "package": "@fluentui/react-button",
76
+ "commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
77
+ "comment": "Update React dev deps and hoist them to the repo root"
78
+ },
79
+ {
80
+ "author": "mgodbolt@microsoft.com",
81
+ "package": "@fluentui/react-button",
82
+ "commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
83
+ "comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
84
+ },
85
+ {
86
+ "author": "elcraig@microsoft.com",
87
+ "package": "@fluentui/react-button",
88
+ "commit": "13c32e184b7960671754582de21f3555bf9f02f3",
89
+ "comment": "Remove config file that's no longer needed"
90
+ }
91
+ ],
92
+ "prerelease": [
16
93
  {
17
94
  "author": "Humberto.Morimoto@microsoft.com",
18
95
  "package": "@fluentui/react-button",
@@ -50,60 +127,46 @@
50
127
  "comment": "Add deprecation messages to react-button"
51
128
  },
52
129
  {
53
- "author": "beachball",
130
+ "author": "olfedias@microsoft.com",
54
131
  "package": "@fluentui/react-button",
55
- "comment": "Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220419-0420.1",
56
- "commit": "c4d16ba4ef157c98d0ef3d6df7d80504b8a05139"
132
+ "commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
133
+ "comment": "chore: Update Griffel to latest version"
57
134
  },
58
135
  {
59
- "author": "beachball",
136
+ "author": "seanmonahan@microsoft.com",
60
137
  "package": "@fluentui/react-button",
61
- "comment": "Bump @fluentui/react-aria to v0.0.0-nightly-20220419-0420.1",
62
- "commit": "c4d16ba4ef157c98d0ef3d6df7d80504b8a05139"
138
+ "commit": "bea6aecfed8612f7b0664ab8bac77c5fccee1efb",
139
+ "comment": "update react-icons version to ^2.0.166-rc.3 from ^2.0.159-beta.10"
63
140
  },
64
141
  {
65
142
  "author": "beachball",
66
143
  "package": "@fluentui/react-button",
67
- "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220419-0420.1",
68
- "commit": "c4d16ba4ef157c98d0ef3d6df7d80504b8a05139"
144
+ "comment": "Bump @fluentui/react-aria to v9.0.0-rc.6",
145
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
69
146
  },
70
147
  {
71
148
  "author": "beachball",
72
149
  "package": "@fluentui/react-button",
73
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220419-0420.1",
74
- "commit": "c4d16ba4ef157c98d0ef3d6df7d80504b8a05139"
150
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
151
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
75
152
  },
76
153
  {
77
154
  "author": "beachball",
78
155
  "package": "@fluentui/react-button",
79
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220419-0420.1",
80
- "commit": "c4d16ba4ef157c98d0ef3d6df7d80504b8a05139"
156
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
157
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
81
158
  },
82
159
  {
83
160
  "author": "beachball",
84
161
  "package": "@fluentui/react-button",
85
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220419-0420.1",
86
- "commit": "c4d16ba4ef157c98d0ef3d6df7d80504b8a05139"
87
- }
88
- ],
89
- "none": [
90
- {
91
- "author": "elcraig@microsoft.com",
92
- "package": "@fluentui/react-button",
93
- "commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
94
- "comment": "Update React dev deps and hoist them to the repo root"
95
- },
96
- {
97
- "author": "mgodbolt@microsoft.com",
98
- "package": "@fluentui/react-button",
99
- "commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
100
- "comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
162
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
163
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
101
164
  },
102
165
  {
103
- "author": "elcraig@microsoft.com",
166
+ "author": "beachball",
104
167
  "package": "@fluentui/react-button",
105
- "commit": "13c32e184b7960671754582de21f3555bf9f02f3",
106
- "comment": "Remove config file that's no longer needed"
168
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
169
+ "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
107
170
  }
108
171
  ]
109
172
  }
package/CHANGELOG.md CHANGED
@@ -1,29 +1,46 @@
1
1
  # Change Log - @fluentui/react-button
2
2
 
3
- This log was last generated on Tue, 19 Apr 2022 04:29:00 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 22 Apr 2022 04:28:39 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220419-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.0.0-nightly-20220419-0420.1)
7
+ ## [0.0.0-nightly-20220422-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v0.0.0-nightly-20220422-0419.1)
8
8
 
9
- Tue, 19 Apr 2022 04:29:00 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-rc.5..@fluentui/react-button_v0.0.0-nightly-20220419-0420.1)
9
+ Fri, 22 Apr 2022 04:28:39 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-rc.6..@fluentui/react-button_v0.0.0-nightly-20220422-0419.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
15
+ - Adding useToggleState hook to scaffold toggleable behavior for individual consumption. ([PR #22279](https://github.com/microsoft/fluentui/pull/22279) by Humberto.Morimoto@microsoft.com)
16
+ - Button: Stop applying active styles when mouse moves away while it is being held and improving styles in High Contrast mode. ([PR #22574](https://github.com/microsoft/fluentui/pull/22574) by Humberto.Morimoto@microsoft.com)
17
+ - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220422-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/0dbe6a48dea9ac8bef02ea228baf4172014f9ac9) by beachball)
18
+ - Bump @fluentui/react-aria to v0.0.0-nightly-20220422-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/0dbe6a48dea9ac8bef02ea228baf4172014f9ac9) by beachball)
19
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20220422-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/0dbe6a48dea9ac8bef02ea228baf4172014f9ac9) by beachball)
20
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20220422-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/0dbe6a48dea9ac8bef02ea228baf4172014f9ac9) by beachball)
21
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20220422-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/0dbe6a48dea9ac8bef02ea228baf4172014f9ac9) by beachball)
22
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220422-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/0dbe6a48dea9ac8bef02ea228baf4172014f9ac9) by beachball)
23
+
24
+ ## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-rc.6)
25
+
26
+ Tue, 19 Apr 2022 19:17:12 GMT
27
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.0.0-rc.5..@fluentui/react-button_v9.0.0-rc.6)
28
+
29
+ ### Changes
30
+
15
31
  - Disabling lint rule for deprecated [component]ClassName exports. ([PR #22131](https://github.com/microsoft/fluentui/pull/22131) by Humberto.Morimoto@microsoft.com)
16
32
  - Button: Deprecating block prop. ([PR #22148](https://github.com/microsoft/fluentui/pull/22148) by Humberto.Morimoto@microsoft.com)
17
33
  - Button components: Making root a non-nullable slot. ([PR #22147](https://github.com/microsoft/fluentui/pull/22147) by Humberto.Morimoto@microsoft.com)
18
34
  - CompoundButton: Fixing bug where component was iconOnly even when secondaryContent was being provided. ([PR #22107](https://github.com/microsoft/fluentui/pull/22107) by Humberto.Morimoto@microsoft.com)
19
35
  - Removing star exports. ([PR #22111](https://github.com/microsoft/fluentui/pull/22111) by Humberto.Morimoto@microsoft.com)
20
36
  - Add deprecation messages to react-button ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
21
- - Bump @fluentui/keyboard-keys to v0.0.0-nightly-20220419-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c4d16ba4ef157c98d0ef3d6df7d80504b8a05139) by beachball)
22
- - Bump @fluentui/react-aria to v0.0.0-nightly-20220419-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c4d16ba4ef157c98d0ef3d6df7d80504b8a05139) by beachball)
23
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20220419-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c4d16ba4ef157c98d0ef3d6df7d80504b8a05139) by beachball)
24
- - Bump @fluentui/react-theme to v0.0.0-nightly-20220419-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c4d16ba4ef157c98d0ef3d6df7d80504b8a05139) by beachball)
25
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20220419-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c4d16ba4ef157c98d0ef3d6df7d80504b8a05139) by beachball)
26
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220419-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/c4d16ba4ef157c98d0ef3d6df7d80504b8a05139) by beachball)
37
+ - chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
38
+ - update react-icons version to ^2.0.166-rc.3 from ^2.0.159-beta.10 ([PR #22512](https://github.com/microsoft/fluentui/pull/22512) by seanmonahan@microsoft.com)
39
+ - Bump @fluentui/react-aria to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
40
+ - Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
41
+ - Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
42
+ - Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
43
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
27
44
 
28
45
  ## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.0.0-rc.5)
29
46
 
package/dist/react-button.d.ts CHANGED
@@ -261,8 +261,10 @@ export declare const useSplitButtonStyles_unstable: (state: SplitButtonState) =>
261
261
  * @param props - User provided props to the ToggleButton component.
262
262
  * @param ref - User provided ref to be passed to the ToggleButton component.
263
263
  */
264
- export declare const useToggleButton_unstable: ({ checked, defaultChecked, ...props }: ToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
264
+ export declare const useToggleButton_unstable: (props: ToggleButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => ToggleButtonState;
265
265
 
266
266
  export declare const useToggleButtonStyles_unstable: (state: ToggleButtonState) => ToggleButtonState;
267
267
 
268
+ export declare function useToggleState<TToggleButtonProps extends Pick<ToggleButtonProps, 'checked' | 'defaultChecked' | 'disabled' | 'disabledFocusable'>, TButtonState extends Pick<ButtonState, 'root'>, TToggleButtonState extends Pick<ToggleButtonState, 'checked' | 'root'>>(props: TToggleButtonProps, state: TButtonState): TToggleButtonState;
269
+
268
270
  export { }
package/lib/components/Button/useButtonStyles.js CHANGED
@@ -49,13 +49,25 @@ const useRootStyles = /*#__PURE__*/__styles({
49
49
  "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
50
50
  "Bi91k9c": "fax3udt",
51
51
  "eoavqd": "f8491dx",
52
- "ecr2s2": "fb40n2d",
53
- "B6oc9vd": "fvs00aa",
54
- "ak43y8": ["f1assf6x", "f4ruux4"],
55
- "wmxk5l": "fumykes",
56
- "B50zh58": ["f4ruux4", "f1assf6x"],
57
- "lj723h": "f1r2dosr",
58
- "zwc60e": "fb0xa7e"
52
+ "iro3zm": "f141de4g",
53
+ "b661bw": "f11v6sdu",
54
+ "Bk6r4ia": ["f9yn8i4", "f1ajwf28"],
55
+ "B9zn80p": "f1uwu36w",
56
+ "Bpld233": ["f1ajwf28", "f9yn8i4"],
57
+ "B2d53fq": "f1vxm191",
58
+ "Bx68yb": "fiu5zv5"
59
+ },
60
+ "highContrast": {
61
+ "G867l3": "f8rnyb3",
62
+ "gdbnj": ["fhb3ry5", "f11223yd"],
63
+ "mxns5l": "f16e7g02",
64
+ "o3nasb": ["f11223yd", "fhb3ry5"],
65
+ "pgvf35": "ff1wgvm",
66
+ "Bh7lczh": ["fiob0tu", "f1x4h75k"],
67
+ "dpv3f4": "f1j6scgf",
68
+ "Bpnjhaq": ["f1x4h75k", "fiob0tu"],
69
+ "ze5xyy": "f4xjyn1",
70
+ "pc6evw": "f9ddjv3"
59
71
  },
60
72
  "block": {
61
73
  "B2u0y6b": "f6dzj5z",
@@ -64,7 +76,7 @@ const useRootStyles = /*#__PURE__*/__styles({
64
76
  "outline": {
65
77
  "De3pzq": "f1c21dwh",
66
78
  "Jwef8y": "fjxutwb",
67
- "ecr2s2": "fophhak"
79
+ "iro3zm": "fwiml72"
68
80
  },
69
81
  "primary": {
70
82
  "De3pzq": "ffp7eso",
@@ -79,12 +91,12 @@ const useRootStyles = /*#__PURE__*/__styles({
79
91
  "oetu4i": "f1ukrpxl",
80
92
  "gg5e9n": ["fecsdlb", "fr80ssc"],
81
93
  "Bi91k9c": "f1rq72xc",
82
- "ecr2s2": "fsp1bjw",
83
- "B6oc9vd": "ff472gp",
84
- "ak43y8": ["f4yyc7m", "ft2aflc"],
85
- "wmxk5l": "fggejwh",
86
- "B50zh58": ["ft2aflc", "f4yyc7m"],
87
- "lj723h": "f18otbis"
94
+ "iro3zm": "fnp9lpt",
95
+ "b661bw": "f1h0usnq",
96
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
97
+ "B9zn80p": "f16h9ulv",
98
+ "Bpld233": ["fx2bmrt", "fs4ktlq"],
99
+ "B2d53fq": "f1d6v5y2"
88
100
  },
89
101
  "subtle": {
90
102
  "De3pzq": "fhovq9v",
@@ -99,12 +111,12 @@ const useRootStyles = /*#__PURE__*/__styles({
99
111
  "oetu4i": "f1ukrpxl",
100
112
  "gg5e9n": ["fecsdlb", "fr80ssc"],
101
113
  "Bi91k9c": "f139oj5f",
102
- "ecr2s2": "f1wfn5kd",
103
- "B6oc9vd": "ff472gp",
104
- "ak43y8": ["f4yyc7m", "ft2aflc"],
105
- "wmxk5l": "fggejwh",
106
- "B50zh58": ["ft2aflc", "f4yyc7m"],
107
- "lj723h": "f19au66r"
114
+ "iro3zm": "fsv2rcd",
115
+ "b661bw": "f1h0usnq",
116
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
117
+ "B9zn80p": "f16h9ulv",
118
+ "Bpld233": ["fx2bmrt", "fs4ktlq"],
119
+ "B2d53fq": "f1fg1p5m"
108
120
  },
109
121
  "transparent": {
110
122
  "De3pzq": "f1c21dwh",
@@ -119,12 +131,12 @@ const useRootStyles = /*#__PURE__*/__styles({
119
131
  "oetu4i": "f1ukrpxl",
120
132
  "gg5e9n": ["fecsdlb", "fr80ssc"],
121
133
  "Bi91k9c": "f139oj5f",
122
- "ecr2s2": "fophhak",
123
- "B6oc9vd": "ff472gp",
124
- "ak43y8": ["f4yyc7m", "ft2aflc"],
125
- "wmxk5l": "fggejwh",
126
- "B50zh58": ["ft2aflc", "f4yyc7m"],
127
- "lj723h": "f19au66r"
134
+ "iro3zm": "fwiml72",
135
+ "b661bw": "f1h0usnq",
136
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
137
+ "B9zn80p": "f16h9ulv",
138
+ "Bpld233": ["fx2bmrt", "fs4ktlq"],
139
+ "B2d53fq": "f1fg1p5m"
128
140
  },
129
141
  "circular": {
130
142
  "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
@@ -192,8 +204,8 @@ const useRootStyles = /*#__PURE__*/__styles({
192
204
  }
193
205
  }, {
194
206
  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fmrv4ls{vertical-align:middle;}", ".f1hu3pq6{margin-top:0;}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".f19f4twv{margin-bottom:0;}", ".f1n52uh2{max-width:280px;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1cmbuwj{text-overflow:ellipsis;}", ".fz5stix{white-space:nowrap;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1aperda{border-bottom-color:var(--colorNeutralStroke1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1s6fcnf{outline-style:none;}", ".f6dzj5z{max-width:100%;}", ".fly5x3f{width:100%;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1q8lukm{-webkit-column-gap:4px;column-gap:4px;}", ".f1ma2n7n{row-gap:4px;}", ".f1g0x7ka{padding-top:0;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f1qch9an{padding-bottom:0;}", ".frvgh55{height:24px;}", ".fh7ncta{min-width:64px;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".f1d2rq10{height:32px;}", ".f14es27b{min-width:96px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1gbmcue{padding-right:16px;}", ".f1rh9g5y{padding-left:16px;}", ".fbhnoac{height:40px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
195
- "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".fax3udt:hover{color:var(--colorNeutralForeground1);}", ".f8491dx:hover{cursor:pointer;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}"],
196
- "a": [".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}", ".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".fumykes:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1r2dosr:active{color:var(--colorNeutralForeground1);}", ".fb0xa7e:active{outline-style:none;}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".fsp1bjw:active{background-color:var(--colorBrandBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f18otbis:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f19au66r:active{color:var(--colorNeutralForeground2BrandPressed);}"]
207
+ "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}", ".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1xlaoq0:hover{border-bottom-color:var(--colorNeutralStroke1Hover);}", ".fax3udt:hover{color:var(--colorNeutralForeground1);}", ".f8491dx:hover{cursor:pointer;}", ".f141de4g:hover:active{background-color:var(--colorNeutralBackground1Pressed);}", ".f11v6sdu:hover:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f9yn8i4:hover:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1ajwf28:hover:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1uwu36w:hover:active{border-bottom-color:var(--colorNeutralStroke1Pressed);}", ".f1vxm191:hover:active{color:var(--colorNeutralForeground1);}", ".fiu5zv5:hover:active{outline-style:none;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f139oj5f:hover{color:var(--colorNeutralForeground2BrandHover);}", ".fsv2rcd:hover:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1fg1p5m:hover:active{color:var(--colorNeutralForeground2BrandPressed);}"],
208
+ "t": ["@media (forced-colors: active){.f8rnyb3:focus{border-top-color:ButtonText;}}", "@media (forced-colors: active){.fhb3ry5:focus{border-right-color:ButtonText;}.f11223yd:focus{border-left-color:ButtonText;}}", "@media (forced-colors: active){.f16e7g02:focus{border-bottom-color:ButtonText;}}", "@media (forced-colors: active){.f11223yd:focus{border-left-color:ButtonText;}.fhb3ry5:focus{border-right-color:ButtonText;}}", "@media (forced-colors: active){.ff1wgvm:hover{border-top-color:Highlight;}}", "@media (forced-colors: active){.fiob0tu:hover{border-right-color:Highlight;}.f1x4h75k:hover{border-left-color:Highlight;}}", "@media (forced-colors: active){.f1j6scgf:hover{border-bottom-color:Highlight;}}", "@media (forced-colors: active){.f1x4h75k:hover{border-left-color:Highlight;}.fiob0tu:hover{border-right-color:Highlight;}}", "@media (forced-colors: active){.f4xjyn1:hover{color:Highlight;}}", "@media (forced-colors: active){.f9ddjv3:hover:active{color:Highlight;}}"]
197
209
  });
198
210
 
199
211
  const useRootDisabledStyles = /*#__PURE__*/__styles({
@@ -212,18 +224,39 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
212
224
  "gg5e9n": ["f18rmfxp", "f1gwvigk"],
213
225
  "Bi91k9c": "fvgxktp",
214
226
  "eoavqd": "fphbwmw",
215
- "ecr2s2": "f1ryyzvn",
216
- "B6oc9vd": "fdi4vxw",
217
- "ak43y8": ["f4ryxzl", "fkdgpbx"],
218
- "wmxk5l": "fcmhn06",
219
- "B50zh58": ["fkdgpbx", "f4ryxzl"],
220
- "lj723h": "f19wldhg",
221
- "Bwh3duv": "fq67hom"
227
+ "iro3zm": "f1t6o4dc",
228
+ "b661bw": "f10ztigi",
229
+ "Bk6r4ia": ["f1ft5sdu", "f1gzf82w"],
230
+ "B9zn80p": "f12zbtn2",
231
+ "Bpld233": ["f1gzf82w", "f1ft5sdu"],
232
+ "B2d53fq": "fcvwxyo",
233
+ "c3iz72": "f8w4c43"
234
+ },
235
+ "highContrast": {
236
+ "Bjwas2f": "fg455y9",
237
+ "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
238
+ "Bxeuatn": "f1cwzwz",
239
+ "n51gp8": ["f14g86mu", "f1rvyvqg"],
240
+ "Bbusuzp": "f1dcs8yz",
241
+ "G867l3": "fjwq6ea",
242
+ "gdbnj": ["f1lr3nhc", "f1mbxvi6"],
243
+ "mxns5l": "fn5gmvv",
244
+ "o3nasb": ["f1mbxvi6", "f1lr3nhc"],
245
+ "pgvf35": "f53ppgq",
246
+ "Bh7lczh": ["f1663y11", "f80fkiy"],
247
+ "dpv3f4": "f18v5270",
248
+ "Bpnjhaq": ["f80fkiy", "f1663y11"],
249
+ "ze5xyy": "f1kc2mi9",
250
+ "Bf756sw": "fihuait",
251
+ "Bow2dr7": ["fnxhupq", "fyd6l6x"],
252
+ "Bvhedfk": "fx507ft",
253
+ "Gye4lf": ["fyd6l6x", "fnxhupq"],
254
+ "pc6evw": "fb3rf2x"
222
255
  },
223
256
  "outline": {
224
257
  "De3pzq": "f1c21dwh",
225
258
  "Jwef8y": "fjxutwb",
226
- "ecr2s2": "fophhak"
259
+ "iro3zm": "fwiml72"
227
260
  },
228
261
  "primary": {
229
262
  "g2u3we": "f1p3nwhy",
@@ -234,10 +267,10 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
234
267
  "Bwzppfd": ["fr80ssc", "fecsdlb"],
235
268
  "oetu4i": "f1ukrpxl",
236
269
  "gg5e9n": ["fecsdlb", "fr80ssc"],
237
- "B6oc9vd": "ff472gp",
238
- "ak43y8": ["f4yyc7m", "ft2aflc"],
239
- "wmxk5l": "fggejwh",
240
- "B50zh58": ["ft2aflc", "f4yyc7m"]
270
+ "b661bw": "f1h0usnq",
271
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
272
+ "B9zn80p": "f16h9ulv",
273
+ "Bpld233": ["fx2bmrt", "fs4ktlq"]
241
274
  },
242
275
  "subtle": {
243
276
  "De3pzq": "f3rmtva",
@@ -250,11 +283,11 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
250
283
  "Bwzppfd": ["fr80ssc", "fecsdlb"],
251
284
  "oetu4i": "f1ukrpxl",
252
285
  "gg5e9n": ["fecsdlb", "fr80ssc"],
253
- "ecr2s2": "f1rot6hk",
254
- "B6oc9vd": "ff472gp",
255
- "ak43y8": ["f4yyc7m", "ft2aflc"],
256
- "wmxk5l": "fggejwh",
257
- "B50zh58": ["ft2aflc", "f4yyc7m"]
286
+ "iro3zm": "fvaszet",
287
+ "b661bw": "f1h0usnq",
288
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
289
+ "B9zn80p": "f16h9ulv",
290
+ "Bpld233": ["fx2bmrt", "fs4ktlq"]
258
291
  },
259
292
  "transparent": {
260
293
  "De3pzq": "f3rmtva",
@@ -267,16 +300,16 @@ const useRootDisabledStyles = /*#__PURE__*/__styles({
267
300
  "Bwzppfd": ["fr80ssc", "fecsdlb"],
268
301
  "oetu4i": "f1ukrpxl",
269
302
  "gg5e9n": ["fecsdlb", "fr80ssc"],
270
- "ecr2s2": "f1rot6hk",
271
- "B6oc9vd": "ff472gp",
272
- "ak43y8": ["f4yyc7m", "ft2aflc"],
273
- "wmxk5l": "fggejwh",
274
- "B50zh58": ["ft2aflc", "f4yyc7m"]
303
+ "iro3zm": "fvaszet",
304
+ "b661bw": "f1h0usnq",
305
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
306
+ "B9zn80p": "f16h9ulv",
307
+ "Bpld233": ["fx2bmrt", "fs4ktlq"]
275
308
  }
276
309
  }, {
277
310
  "d": [".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1p3nwhy{border-top-color:transparent;}", ".f11589ue{border-right-color:transparent;}", ".f1pdflbu{border-left-color:transparent;}", ".f1q5o8ev{border-bottom-color:transparent;}", ".f3rmtva{background-color:transparent;}"],
278
- "h": [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1cio4g9:hover{background-color:transparent;}"],
279
- "a": [".f1ryyzvn:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".fdi4vxw:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f4ryxzl:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fkdgpbx:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".fcmhn06:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".fq67hom:active{cursor:not-allowed;}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}", ".ff472gp:active{border-top-color:transparent;}", ".f4yyc7m:active{border-right-color:transparent;}", ".ft2aflc:active{border-left-color:transparent;}", ".fggejwh:active{border-bottom-color:transparent;}", ".f1rot6hk:active{background-color:transparent;}"]
311
+ "h": [".f1falr9n:hover{background-color:var(--colorNeutralBackgroundDisabled);}", ".f12mpcsy:hover{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1gwvigk:hover{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f18rmfxp:hover{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f1jnshp0:hover{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".fphbwmw:hover{cursor:not-allowed;}", ".f1t6o4dc:hover:active{background-color:var(--colorNeutralBackgroundDisabled);}", ".f10ztigi:hover:active{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f1ft5sdu:hover:active{border-right-color:var(--colorNeutralStrokeDisabled);}", ".f1gzf82w:hover:active{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f12zbtn2:hover:active{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fcvwxyo:hover:active{color:var(--colorNeutralForegroundDisabled);}", ".f8w4c43:hover:active{cursor:not-allowed;}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}", ".fwiml72:hover:active{background-color:var(--colorTransparentBackgroundPressed);}", ".f1s2uweq:hover{border-top-color:transparent;}", ".fr80ssc:hover{border-right-color:transparent;}", ".fecsdlb:hover{border-left-color:transparent;}", ".f1ukrpxl:hover{border-bottom-color:transparent;}", ".f1h0usnq:hover:active{border-top-color:transparent;}", ".fs4ktlq:hover:active{border-right-color:transparent;}", ".fx2bmrt:hover:active{border-left-color:transparent;}", ".f16h9ulv:hover:active{border-bottom-color:transparent;}", ".f1cio4g9:hover{background-color:transparent;}", ".fvaszet:hover:active{background-color:transparent;}"],
312
+ "t": ["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1rvyvqg{border-right-color:GrayText;}.f14g86mu{border-left-color:GrayText;}}", "@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", "@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}", "@media (forced-colors: active){.fjwq6ea:focus{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1lr3nhc:focus{border-right-color:GrayText;}.f1mbxvi6:focus{border-left-color:GrayText;}}", "@media (forced-colors: active){.fn5gmvv:focus{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f1mbxvi6:focus{border-left-color:GrayText;}.f1lr3nhc:focus{border-right-color:GrayText;}}", "@media (forced-colors: active){.f53ppgq:hover{border-top-color:GrayText;}}", "@media (forced-colors: active){.f1663y11:hover{border-right-color:GrayText;}.f80fkiy:hover{border-left-color:GrayText;}}", "@media (forced-colors: active){.f18v5270:hover{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.f80fkiy:hover{border-left-color:GrayText;}.f1663y11:hover{border-right-color:GrayText;}}", "@media (forced-colors: active){.f1kc2mi9:hover{color:GrayText;}}", "@media (forced-colors: active){.fihuait:hover:active{border-top-color:GrayText;}}", "@media (forced-colors: active){.fnxhupq:hover:active{border-right-color:GrayText;}.fyd6l6x:hover:active{border-left-color:GrayText;}}", "@media (forced-colors: active){.fx507ft:hover:active{border-bottom-color:GrayText;}}", "@media (forced-colors: active){.fyd6l6x:hover:active{border-left-color:GrayText;}.fnxhupq:hover:active{border-right-color:GrayText;}}", "@media (forced-colors: active){.fb3rf2x:hover:active{color:GrayText;}}"]
280
313
  });
281
314
 
282
315
  const useRootFocusStyles = /*#__PURE__*/__styles({
@@ -412,8 +445,8 @@ export const useButtonStyles_unstable = state => {
412
445
  size
413
446
  } = state;
414
447
  state.root.className = mergeClasses(buttonClassNames.root, // Root styles
415
- rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], // Disabled styles
416
- (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
448
+ rootStyles.base, rootStyles.highContrast, block && rootStyles.block, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], // Disabled styles
449
+ (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
417
450
  rootFocusStyles.base, appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles
418
451
  iconOnly && rootIconOnlyStyles[size], // User provided class name
419
452
  state.root.className);
package/lib/components/Button/useButtonStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"AAAA,SAAS,UAAT,YAAiC,YAAjC,QAAqD,gBAArD;AACA,SAAS,+BAAT,QAAgD,yBAAhD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,gBAAgB,GAAgC;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,IAAI,EAAE;AAFqD,CAAtD;AAIP;;AAEG;;AACH,OAAO,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAzC;;AAEP,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAoKA,MAAM,qBAAqB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA9B;;AA+EA,MAAM,kBAAkB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA3B;;AA+CA,MAAM,qBAAqB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA9B;;AAsBA,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AA0BA,OAAO,MAAM,wBAAwB,GAAI,KAAD,IAAoC;AAC1E,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,QAAM,kBAAkB,GAAG,qBAAqB,EAAhD;AACA,QAAM,eAAe,GAAG,kBAAkB,EAA1C;AACA,QAAM,kBAAkB,GAAG,qBAAqB,EAAhD;AACA,QAAM,UAAU,GAAG,aAAa,EAAhC;AAEA,QAAM;AACJ,IAAA,UADI;AAEJ;AACA,IAAA,KAHI;AAIJ,IAAA,QAJI;AAKJ,IAAA,iBALI;AAMJ,IAAA,QANI;AAOJ,IAAA,KAPI;AAQJ,IAAA;AARI,MASF,KATJ;AAWA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,gBAAgB,CAAC,IADgB,EAGjC;AACA,EAAA,UAAU,CAAC,IAJsB,EAKjC,KAAK,IAAI,UAAU,CAAC,KALa,EAMjC,UAAU,IAAI,UAAU,CAAC,UAAD,CANS,EAOjC,UAAU,CAAC,IAAD,CAPuB,EAQjC,UAAU,CAAC,KAAD,CARuB,EAUjC;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,kBAAkB,CAAC,IAXrB,EAYjC,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,kBAAkB,CAAC,UAAD,CAZlC,EAcjC;AACA,EAAA,eAAe,CAAC,IAfiB,EAgBjC,UAAU,KAAK,SAAf,IAA4B,eAAe,CAAC,OAhBX,EAiBjC,eAAe,CAAC,IAAD,CAjBkB,EAkBjC,eAAe,CAAC,KAAD,CAlBkB,EAoBjC;AACA,EAAA,QAAQ,IAAI,kBAAkB,CAAC,IAAD,CArBG,EAuBjC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAxBsB,CAAnC;;AA2BA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,gBAAgB,CAAC,IAAlB,EAAwB,UAAU,CAAC,IAAnC,EAAyC,UAAU,CAAC,IAAD,CAAnD,EAA2D,KAAK,CAAC,IAAN,CAAW,SAAtE,CAAnC;AACD;;AAED,SAAO,KAAP;AACD,CAlDM","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n/**\n * @deprecated Use `buttonClassNames.root` instead.\n */\nexport const buttonClassName = buttonClassNames.root;\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n verticalAlign: 'middle',\n\n ...shorthands.margin(0),\n\n maxWidth: '280px',\n\n ...shorthands.overflow('hidden'),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n fontFamily: tokens.fontFamilyBase,\n\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1,\n\n cursor: 'pointer',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1,\n\n outlineStyle: 'none',\n },\n },\n\n // Block styles\n block: {\n maxWidth: '100%',\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n /* The borderRadius rounded styles are handled in the size variations */\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n ...shorthands.gap('4px'),\n ...shorthands.padding('0', '8px'),\n\n height: '24px',\n minWidth: '64px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n medium: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '12px'),\n\n height: '32px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '16px'),\n\n height: '40px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n\n ':active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n subtle: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // TODO: `overflow: 'hidden'` on the root does not pay well with `position: absolute`\n // used by the outline pseudo-element. Need to introduce a text container for children and set\n // overflow there so that default focus outline can work\n //\n // base: createFocusOutlineStyle(),\n // circular: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.circular } }),\n // primary: createFocusOutlineStyle({ style: { outlineOffset: '2px' } }),\n // square: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.none } }),\n\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: 'transparent',\n outlineWidth: '2px',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {},\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n }),\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding('4px'),\n\n minWidth: '28px',\n maxWidth: '28px',\n },\n medium: {\n ...shorthands.padding('4px'),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding('6px'),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const {\n appearance,\n // eslint-disable-next-line deprecation/deprecation\n block,\n disabled,\n disabledFocusable,\n iconOnly,\n shape,\n size,\n } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n\n // Root styles\n rootStyles.base,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n rootStyles[size],\n rootStyles[shape],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n rootFocusStyles.base,\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(buttonClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { ButtonSlots, ButtonState } from './Button.types';\n\nexport const buttonClassNames: SlotClassNames<ButtonSlots> = {\n root: 'fui-Button',\n icon: 'fui-Button__icon',\n};\n/**\n * @deprecated Use `buttonClassNames.root` instead.\n */\nexport const buttonClassName = buttonClassNames.root;\n\nconst useRootStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n verticalAlign: 'middle',\n\n ...shorthands.margin(0),\n\n maxWidth: '280px',\n\n ...shorthands.overflow('hidden'),\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n\n backgroundColor: tokens.colorNeutralBackground1,\n color: tokens.colorNeutralForeground1,\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n\n fontFamily: tokens.fontFamilyBase,\n\n outlineStyle: 'none',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n color: tokens.colorNeutralForeground1,\n\n cursor: 'pointer',\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1,\n\n outlineStyle: 'none',\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ':focus': {\n ...shorthands.borderColor('ButtonText'),\n },\n\n ':hover': {\n ...shorthands.borderColor('Highlight'),\n color: 'Highlight',\n },\n\n ':hover:active': {\n color: 'Highlight',\n },\n },\n },\n\n // Block styles\n block: {\n maxWidth: '100%',\n width: '100%',\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n backgroundColor: tokens.colorBrandBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n\n ':hover': {\n backgroundColor: tokens.colorBrandBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorBrandBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n subtle: {\n backgroundColor: tokens.colorSubtleBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorSubtleBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorSubtleBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n transparent: {\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n ...shorthands.borderColor('transparent'),\n color: tokens.colorNeutralForeground2BrandPressed,\n },\n },\n\n // Shape variations\n circular: {\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n },\n rounded: {\n /* The borderRadius rounded styles are handled in the size variations */\n },\n square: {\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n },\n\n // Size variations\n small: {\n ...shorthands.gap('4px'),\n ...shorthands.padding('0', '8px'),\n\n height: '24px',\n minWidth: '64px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n },\n medium: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '12px'),\n\n height: '32px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase300,\n },\n large: {\n ...shorthands.gap('6px'),\n ...shorthands.padding('0', '16px'),\n\n height: '40px',\n minWidth: '96px',\n\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n\n fontSize: tokens.fontSizeBase400,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase400,\n },\n});\n\nconst useRootDisabledStyles = makeStyles({\n // Base styles\n base: {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n\n ':hover': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackgroundDisabled,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n\n cursor: 'not-allowed',\n },\n },\n\n // High contrast styles\n highContrast: {\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n\n ':focus': {\n ...shorthands.borderColor('GrayText'),\n },\n\n ':hover': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n\n ':hover:active': {\n ...shorthands.borderColor('GrayText'),\n color: 'GrayText',\n },\n },\n },\n\n // Appearance variations\n outline: {\n backgroundColor: tokens.colorTransparentBackground,\n\n ':hover': {\n backgroundColor: tokens.colorTransparentBackgroundHover,\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorTransparentBackgroundPressed,\n },\n },\n primary: {\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n ...shorthands.borderColor('transparent'),\n },\n },\n subtle: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n transparent: {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n\n ':hover': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n\n ':hover:active': {\n backgroundColor: 'transparent',\n ...shorthands.borderColor('transparent'),\n },\n },\n});\n\nconst useRootFocusStyles = makeStyles({\n // TODO: `overflow: 'hidden'` on the root does not pay well with `position: absolute`\n // used by the outline pseudo-element. Need to introduce a text container for children and set\n // overflow there so that default focus outline can work\n //\n // base: createFocusOutlineStyle(),\n // circular: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.circular } }),\n // primary: createFocusOutlineStyle({ style: { outlineOffset: '2px' } }),\n // square: createFocusOutlineStyle({ style: { outlineRadius: tokens.global.borderRadius.none } }),\n\n base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: 'transparent',\n outlineWidth: '2px',\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {},\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\n }),\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Size variations\n small: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n }),\n medium: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n }),\n large: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusLarge),\n }),\n});\n\nconst useRootIconOnlyStyles = makeStyles({\n // Size variations\n small: {\n ...shorthands.padding('4px'),\n\n minWidth: '28px',\n maxWidth: '28px',\n },\n medium: {\n ...shorthands.padding('4px'),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding('6px'),\n\n minWidth: '40px',\n maxWidth: '40px',\n },\n});\n\nconst useIconStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'center',\n },\n\n // Size variations\n small: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n },\n});\n\nexport const useButtonStyles_unstable = (state: ButtonState): ButtonState => {\n const rootStyles = useRootStyles();\n const rootDisabledStyles = useRootDisabledStyles();\n const rootFocusStyles = useRootFocusStyles();\n const rootIconOnlyStyles = useRootIconOnlyStyles();\n const iconStyles = useIconStyles();\n\n const {\n appearance,\n // eslint-disable-next-line deprecation/deprecation\n block,\n disabled,\n disabledFocusable,\n iconOnly,\n shape,\n size,\n } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n\n // Root styles\n rootStyles.base,\n rootStyles.highContrast,\n block && rootStyles.block,\n appearance && rootStyles[appearance],\n rootStyles[size],\n rootStyles[shape],\n\n // Disabled styles\n (disabled || disabledFocusable) && rootDisabledStyles.base,\n (disabled || disabledFocusable) && rootDisabledStyles.highContrast,\n appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance],\n\n // Focus styles\n rootFocusStyles.base,\n appearance === 'primary' && rootFocusStyles.primary,\n rootFocusStyles[size],\n rootFocusStyles[shape],\n\n // Icon-only styles\n iconOnly && rootIconOnlyStyles[size],\n\n // User provided class name\n state.root.className,\n );\n\n if (state.icon) {\n state.icon.className = mergeClasses(buttonClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
package/lib/components/CompoundButton/CompoundButton.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import type { CompoundButtonProps } from './CompoundButton.types';
2
1
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
2
+ import type { CompoundButtonProps } from './CompoundButton.types';
3
3
  /**
4
4
  * CompoundButtons are buttons that can have secondary content that adds extra information to the user.
5
5
  */
package/lib/components/CompoundButton/CompoundButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;AAEA,EAAA,gCAAgC,CAAC,KAAD,CAAhC;AAEA,SAAO,6BAA6B,CAAC,KAAD,CAApC,CALsG,CAMtG;AACD,CAPuE,CAAjE;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\nimport type { CompoundButtonProps } from './CompoundButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n const state = useCompoundButton_unstable(props, ref);\n\n useCompoundButtonStyles_unstable(state);\n\n return renderCompoundButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AAIA;;AAEG;;AACH,OAAO,MAAM,cAAc,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;AAEA,EAAA,gCAAgC,CAAC,KAAD,CAAhC;AAEA,SAAO,6BAA6B,CAAC,KAAD,CAApC,CALsG,CAMtG;AACD,CAPuE,CAAjE;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { renderCompoundButton_unstable } from './renderCompoundButton';\nimport { useCompoundButton_unstable } from './useCompoundButton';\nimport { useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { CompoundButtonProps } from './CompoundButton.types';\n\n/**\n * CompoundButtons are buttons that can have secondary content that adds extra information to the user.\n */\nexport const CompoundButton: ForwardRefComponent<CompoundButtonProps> = React.forwardRef((props, ref) => {\n const state = useCompoundButton_unstable(props, ref);\n\n useCompoundButtonStyles_unstable(state);\n\n return renderCompoundButton_unstable(state);\n // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<CompoundButtonProps>;\n\nCompoundButton.displayName = 'CompoundButton';\n"],"sourceRoot":"../src/"}