@fluentui/react-button 9.0.0-rc.1 → 9.0.0-rc.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (195) hide show
  1. package/CHANGELOG.json +549 -1
  2. package/CHANGELOG.md +321 -172
  3. package/README.md +80 -18
  4. package/dist/{react-button.d.ts → index.d.ts} +42 -37
  5. package/{lib → dist}/tsdoc-metadata.json +0 -0
  6. package/lib/Button.js.map +1 -1
  7. package/lib/CompoundButton.js.map +1 -1
  8. package/lib/MenuButton.js.map +1 -1
  9. package/lib/SplitButton.js.map +1 -1
  10. package/lib/ToggleButton.js.map +1 -1
  11. package/lib/components/Button/Button.js.map +1 -1
  12. package/lib/components/Button/Button.types.js.map +1 -1
  13. package/lib/components/Button/index.js +1 -1
  14. package/lib/components/Button/index.js.map +1 -1
  15. package/lib/components/Button/renderButton.js.map +1 -1
  16. package/lib/components/Button/useButton.js +1 -3
  17. package/lib/components/Button/useButton.js.map +1 -1
  18. package/lib/components/Button/useButtonStyles.js +162 -115
  19. package/lib/components/Button/useButtonStyles.js.map +1 -1
  20. package/lib/components/CompoundButton/CompoundButton.js.map +1 -1
  21. package/lib/components/CompoundButton/CompoundButton.types.js.map +1 -1
  22. package/lib/components/CompoundButton/index.js +1 -1
  23. package/lib/components/CompoundButton/index.js.map +1 -1
  24. package/lib/components/CompoundButton/renderCompoundButton.js.map +1 -1
  25. package/lib/components/CompoundButton/useCompoundButton.js +7 -2
  26. package/lib/components/CompoundButton/useCompoundButton.js.map +1 -1
  27. package/lib/components/CompoundButton/useCompoundButtonStyles.js +72 -55
  28. package/lib/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  29. package/lib/components/MenuButton/MenuButton.js +2 -1
  30. package/lib/components/MenuButton/MenuButton.js.map +1 -1
  31. package/lib/components/MenuButton/MenuButton.types.js.map +1 -1
  32. package/lib/components/MenuButton/index.js +1 -1
  33. package/lib/components/MenuButton/index.js.map +1 -1
  34. package/lib/components/MenuButton/renderMenuButton.js.map +1 -1
  35. package/lib/components/MenuButton/useMenuButton.js.map +1 -1
  36. package/lib/components/MenuButton/useMenuButtonStyles.js +34 -14
  37. package/lib/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  38. package/lib/components/SplitButton/SplitButton.js +1 -1
  39. package/lib/components/SplitButton/SplitButton.js.map +1 -1
  40. package/lib/components/SplitButton/SplitButton.types.js.map +1 -1
  41. package/lib/components/SplitButton/index.js +1 -1
  42. package/lib/components/SplitButton/index.js.map +1 -1
  43. package/lib/components/SplitButton/renderSplitButton.js.map +1 -1
  44. package/lib/components/SplitButton/useSplitButton.js +17 -8
  45. package/lib/components/SplitButton/useSplitButton.js.map +1 -1
  46. package/lib/components/SplitButton/useSplitButtonStyles.js +37 -34
  47. package/lib/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  48. package/lib/components/ToggleButton/ToggleButton.js.map +1 -1
  49. package/lib/components/ToggleButton/ToggleButton.types.js.map +1 -1
  50. package/lib/components/ToggleButton/index.js +1 -1
  51. package/lib/components/ToggleButton/index.js.map +1 -1
  52. package/lib/components/ToggleButton/renderToggleButton.js.map +1 -1
  53. package/lib/components/ToggleButton/useToggleButton.js +3 -41
  54. package/lib/components/ToggleButton/useToggleButton.js.map +1 -1
  55. package/lib/components/ToggleButton/useToggleButtonStyles.js +122 -61
  56. package/lib/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  57. package/lib/index.js +6 -5
  58. package/lib/index.js.map +1 -1
  59. package/lib/utils/index.js +2 -0
  60. package/lib/utils/index.js.map +1 -0
  61. package/lib/utils/useToggleState.js +37 -0
  62. package/lib/utils/useToggleState.js.map +1 -0
  63. package/lib-commonjs/Button.js.map +1 -1
  64. package/lib-commonjs/CompoundButton.js.map +1 -1
  65. package/lib-commonjs/MenuButton.js.map +1 -1
  66. package/lib-commonjs/SplitButton.js.map +1 -1
  67. package/lib-commonjs/ToggleButton.js.map +1 -1
  68. package/lib-commonjs/components/Button/Button.js.map +1 -1
  69. package/lib-commonjs/components/Button/Button.types.js.map +1 -1
  70. package/lib-commonjs/components/Button/index.js +3 -3
  71. package/lib-commonjs/components/Button/index.js.map +1 -1
  72. package/lib-commonjs/components/Button/renderButton.js.map +1 -1
  73. package/lib-commonjs/components/Button/useButton.js +1 -3
  74. package/lib-commonjs/components/Button/useButton.js.map +1 -1
  75. package/lib-commonjs/components/Button/useButtonStyles.js +164 -116
  76. package/lib-commonjs/components/Button/useButtonStyles.js.map +1 -1
  77. package/lib-commonjs/components/CompoundButton/CompoundButton.js.map +1 -1
  78. package/lib-commonjs/components/CompoundButton/CompoundButton.types.js.map +1 -1
  79. package/lib-commonjs/components/CompoundButton/index.js +3 -3
  80. package/lib-commonjs/components/CompoundButton/index.js.map +1 -1
  81. package/lib-commonjs/components/CompoundButton/renderCompoundButton.js.map +1 -1
  82. package/lib-commonjs/components/CompoundButton/useCompoundButton.js +7 -2
  83. package/lib-commonjs/components/CompoundButton/useCompoundButton.js.map +1 -1
  84. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js +74 -57
  85. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.js.map +1 -1
  86. package/lib-commonjs/components/MenuButton/MenuButton.js +2 -1
  87. package/lib-commonjs/components/MenuButton/MenuButton.js.map +1 -1
  88. package/lib-commonjs/components/MenuButton/MenuButton.types.js.map +1 -1
  89. package/lib-commonjs/components/MenuButton/index.js +3 -3
  90. package/lib-commonjs/components/MenuButton/index.js.map +1 -1
  91. package/lib-commonjs/components/MenuButton/renderMenuButton.js.map +1 -1
  92. package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
  93. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js +36 -15
  94. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.js.map +1 -1
  95. package/lib-commonjs/components/SplitButton/SplitButton.js +1 -1
  96. package/lib-commonjs/components/SplitButton/SplitButton.js.map +1 -1
  97. package/lib-commonjs/components/SplitButton/SplitButton.types.js.map +1 -1
  98. package/lib-commonjs/components/SplitButton/index.js +3 -3
  99. package/lib-commonjs/components/SplitButton/index.js.map +1 -1
  100. package/lib-commonjs/components/SplitButton/renderSplitButton.js.map +1 -1
  101. package/lib-commonjs/components/SplitButton/useSplitButton.js +16 -7
  102. package/lib-commonjs/components/SplitButton/useSplitButton.js.map +1 -1
  103. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js +38 -35
  104. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.js.map +1 -1
  105. package/lib-commonjs/components/ToggleButton/ToggleButton.js.map +1 -1
  106. package/lib-commonjs/components/ToggleButton/ToggleButton.types.js.map +1 -1
  107. package/lib-commonjs/components/ToggleButton/index.js +3 -3
  108. package/lib-commonjs/components/ToggleButton/index.js.map +1 -1
  109. package/lib-commonjs/components/ToggleButton/renderToggleButton.js.map +1 -1
  110. package/lib-commonjs/components/ToggleButton/useToggleButton.js +3 -42
  111. package/lib-commonjs/components/ToggleButton/useToggleButton.js.map +1 -1
  112. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js +127 -63
  113. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.js.map +1 -1
  114. package/lib-commonjs/index.js +169 -6
  115. package/lib-commonjs/index.js.map +1 -1
  116. package/lib-commonjs/utils/index.js +10 -0
  117. package/lib-commonjs/utils/index.js.map +1 -0
  118. package/lib-commonjs/utils/useToggleState.js +48 -0
  119. package/lib-commonjs/utils/useToggleState.js.map +1 -0
  120. package/package.json +20 -22
  121. package/dist/demo/index.html +0 -71
  122. package/dist/demo/react-dom.development.js +0 -21413
  123. package/dist/demo/react.development.js +0 -3155
  124. package/lib/Button.d.ts +0 -1
  125. package/lib/CompoundButton.d.ts +0 -1
  126. package/lib/MenuButton.d.ts +0 -1
  127. package/lib/SplitButton.d.ts +0 -1
  128. package/lib/ToggleButton.d.ts +0 -1
  129. package/lib/components/Button/Button.d.ts +0 -6
  130. package/lib/components/Button/Button.types.d.ts +0 -62
  131. package/lib/components/Button/index.d.ts +0 -5
  132. package/lib/components/Button/renderButton.d.ts +0 -5
  133. package/lib/components/Button/useButton.d.ts +0 -8
  134. package/lib/components/Button/useButtonStyles.d.ts +0 -3
  135. package/lib/components/CompoundButton/CompoundButton.d.ts +0 -6
  136. package/lib/components/CompoundButton/CompoundButton.types.d.ts +0 -14
  137. package/lib/components/CompoundButton/index.d.ts +0 -5
  138. package/lib/components/CompoundButton/renderCompoundButton.d.ts +0 -5
  139. package/lib/components/CompoundButton/useCompoundButton.d.ts +0 -8
  140. package/lib/components/CompoundButton/useCompoundButtonStyles.d.ts +0 -3
  141. package/lib/components/MenuButton/MenuButton.d.ts +0 -6
  142. package/lib/components/MenuButton/MenuButton.types.d.ts +0 -10
  143. package/lib/components/MenuButton/index.d.ts +0 -5
  144. package/lib/components/MenuButton/renderMenuButton.d.ts +0 -5
  145. package/lib/components/MenuButton/useMenuButton.d.ts +0 -6
  146. package/lib/components/MenuButton/useMenuButtonStyles.d.ts +0 -3
  147. package/lib/components/SplitButton/SplitButton.d.ts +0 -7
  148. package/lib/components/SplitButton/SplitButton.types.d.ts +0 -21
  149. package/lib/components/SplitButton/index.d.ts +0 -5
  150. package/lib/components/SplitButton/renderSplitButton.d.ts +0 -5
  151. package/lib/components/SplitButton/useSplitButton.d.ts +0 -8
  152. package/lib/components/SplitButton/useSplitButtonStyles.d.ts +0 -3
  153. package/lib/components/ToggleButton/ToggleButton.d.ts +0 -6
  154. package/lib/components/ToggleButton/ToggleButton.types.d.ts +0 -20
  155. package/lib/components/ToggleButton/index.d.ts +0 -5
  156. package/lib/components/ToggleButton/renderToggleButton.d.ts +0 -1
  157. package/lib/components/ToggleButton/useToggleButton.d.ts +0 -9
  158. package/lib/components/ToggleButton/useToggleButtonStyles.d.ts +0 -3
  159. package/lib/index.d.ts +0 -5
  160. package/lib-commonjs/Button.d.ts +0 -1
  161. package/lib-commonjs/CompoundButton.d.ts +0 -1
  162. package/lib-commonjs/MenuButton.d.ts +0 -1
  163. package/lib-commonjs/SplitButton.d.ts +0 -1
  164. package/lib-commonjs/ToggleButton.d.ts +0 -1
  165. package/lib-commonjs/components/Button/Button.d.ts +0 -6
  166. package/lib-commonjs/components/Button/Button.types.d.ts +0 -62
  167. package/lib-commonjs/components/Button/index.d.ts +0 -5
  168. package/lib-commonjs/components/Button/renderButton.d.ts +0 -5
  169. package/lib-commonjs/components/Button/useButton.d.ts +0 -8
  170. package/lib-commonjs/components/Button/useButtonStyles.d.ts +0 -3
  171. package/lib-commonjs/components/CompoundButton/CompoundButton.d.ts +0 -6
  172. package/lib-commonjs/components/CompoundButton/CompoundButton.types.d.ts +0 -14
  173. package/lib-commonjs/components/CompoundButton/index.d.ts +0 -5
  174. package/lib-commonjs/components/CompoundButton/renderCompoundButton.d.ts +0 -5
  175. package/lib-commonjs/components/CompoundButton/useCompoundButton.d.ts +0 -8
  176. package/lib-commonjs/components/CompoundButton/useCompoundButtonStyles.d.ts +0 -3
  177. package/lib-commonjs/components/MenuButton/MenuButton.d.ts +0 -6
  178. package/lib-commonjs/components/MenuButton/MenuButton.types.d.ts +0 -10
  179. package/lib-commonjs/components/MenuButton/index.d.ts +0 -5
  180. package/lib-commonjs/components/MenuButton/renderMenuButton.d.ts +0 -5
  181. package/lib-commonjs/components/MenuButton/useMenuButton.d.ts +0 -6
  182. package/lib-commonjs/components/MenuButton/useMenuButtonStyles.d.ts +0 -3
  183. package/lib-commonjs/components/SplitButton/SplitButton.d.ts +0 -7
  184. package/lib-commonjs/components/SplitButton/SplitButton.types.d.ts +0 -21
  185. package/lib-commonjs/components/SplitButton/index.d.ts +0 -5
  186. package/lib-commonjs/components/SplitButton/renderSplitButton.d.ts +0 -5
  187. package/lib-commonjs/components/SplitButton/useSplitButton.d.ts +0 -8
  188. package/lib-commonjs/components/SplitButton/useSplitButtonStyles.d.ts +0 -3
  189. package/lib-commonjs/components/ToggleButton/ToggleButton.d.ts +0 -6
  190. package/lib-commonjs/components/ToggleButton/ToggleButton.types.d.ts +0 -20
  191. package/lib-commonjs/components/ToggleButton/index.d.ts +0 -5
  192. package/lib-commonjs/components/ToggleButton/renderToggleButton.d.ts +0 -1
  193. package/lib-commonjs/components/ToggleButton/useToggleButton.d.ts +0 -9
  194. package/lib-commonjs/components/ToggleButton/useToggleButtonStyles.d.ts +0 -3
  195. package/lib-commonjs/index.d.ts +0 -5
@@ -3,15 +3,21 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.useButtonStyles_unstable = exports.buttonClassName = void 0;
6
+ exports.useButtonStyles_unstable = exports.buttonClassNames = void 0;
7
7
 
8
- const react_1 = /*#__PURE__*/require("@griffel/react");
8
+ const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
9
9
 
10
10
  const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
11
11
 
12
12
  const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
13
13
 
14
- exports.buttonClassName = 'fui-Button';
14
+ const react_1 = /*#__PURE__*/require("@griffel/react");
15
+
16
+ exports.buttonClassNames = {
17
+ root: 'fui-Button',
18
+ icon: 'fui-Button__icon'
19
+ };
20
+ const iconSpacingVar = '--fui-Button__icon--spacing';
15
21
 
16
22
  const useRootStyles = /*#__PURE__*/react_1.__styles({
17
23
  "base": {
@@ -49,24 +55,36 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
49
55
  "Bwzppfd": ["f1ub3y4t", "f1m52nbi"],
50
56
  "oetu4i": "f1xlaoq0",
51
57
  "gg5e9n": ["f1m52nbi", "f1ub3y4t"],
52
- "Bi91k9c": "fax3udt",
58
+ "Bi91k9c": "feu1g3u",
53
59
  "eoavqd": "f8491dx",
54
- "ecr2s2": "fb40n2d",
55
- "B6oc9vd": "fvs00aa",
56
- "ak43y8": ["f1assf6x", "f4ruux4"],
57
- "wmxk5l": "fumykes",
58
- "B50zh58": ["f4ruux4", "f1assf6x"],
59
- "lj723h": "f1r2dosr",
60
- "zwc60e": "fb0xa7e"
60
+ "Bk3fhr4": "ft1hn21",
61
+ "Bmfj8id": "fuxngvv",
62
+ "iro3zm": "f141de4g",
63
+ "b661bw": "f11v6sdu",
64
+ "Bk6r4ia": ["f9yn8i4", "f1ajwf28"],
65
+ "B9zn80p": "f1uwu36w",
66
+ "Bpld233": ["f1ajwf28", "f9yn8i4"],
67
+ "B2d53fq": "f9olfzr",
68
+ "Bx68yb": "fiu5zv5",
69
+ "em6i61": "f1dfjoow",
70
+ "vm6p8p": "f1j98vj9"
61
71
  },
62
- "block": {
63
- "B2u0y6b": "f6dzj5z",
64
- "a9b677": "fly5x3f"
72
+ "highContrast": {
73
+ "G867l3": "f8rnyb3",
74
+ "gdbnj": ["fhb3ry5", "f11223yd"],
75
+ "mxns5l": "f16e7g02",
76
+ "o3nasb": ["f11223yd", "fhb3ry5"],
77
+ "pgvf35": "ff1wgvm",
78
+ "Bh7lczh": ["fiob0tu", "f1x4h75k"],
79
+ "dpv3f4": "f1j6scgf",
80
+ "Bpnjhaq": ["f1x4h75k", "fiob0tu"],
81
+ "ze5xyy": "f4xjyn1",
82
+ "pc6evw": "f9ddjv3"
65
83
  },
66
84
  "outline": {
67
85
  "De3pzq": "f1c21dwh",
68
86
  "Jwef8y": "fjxutwb",
69
- "ecr2s2": "fophhak"
87
+ "iro3zm": "fwiml72"
70
88
  },
71
89
  "primary": {
72
90
  "De3pzq": "ffp7eso",
@@ -81,13 +99,14 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
81
99
  "oetu4i": "f1ukrpxl",
82
100
  "gg5e9n": ["fecsdlb", "fr80ssc"],
83
101
  "Bi91k9c": "f1rq72xc",
84
- "ecr2s2": "fsp1bjw",
85
- "B6oc9vd": "ff472gp",
86
- "ak43y8": ["f4yyc7m", "ft2aflc"],
87
- "wmxk5l": "fggejwh",
88
- "B50zh58": ["ft2aflc", "f4yyc7m"],
89
- "lj723h": "f18otbis"
102
+ "iro3zm": "fnp9lpt",
103
+ "b661bw": "f1h0usnq",
104
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
105
+ "B9zn80p": "f16h9ulv",
106
+ "Bpld233": ["fx2bmrt", "fs4ktlq"],
107
+ "B2d53fq": "f1d6v5y2"
90
108
  },
109
+ "secondary": {},
91
110
  "subtle": {
92
111
  "De3pzq": "fhovq9v",
93
112
  "g2u3we": "f1p3nwhy",
@@ -101,12 +120,12 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
101
120
  "oetu4i": "f1ukrpxl",
102
121
  "gg5e9n": ["fecsdlb", "fr80ssc"],
103
122
  "Bi91k9c": "f139oj5f",
104
- "ecr2s2": "f1wfn5kd",
105
- "B6oc9vd": "ff472gp",
106
- "ak43y8": ["f4yyc7m", "ft2aflc"],
107
- "wmxk5l": "fggejwh",
108
- "B50zh58": ["ft2aflc", "f4yyc7m"],
109
- "lj723h": "f19au66r"
123
+ "iro3zm": "fsv2rcd",
124
+ "b661bw": "f1h0usnq",
125
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
126
+ "B9zn80p": "f16h9ulv",
127
+ "Bpld233": ["fx2bmrt", "fs4ktlq"],
128
+ "B2d53fq": "f1fg1p5m"
110
129
  },
111
130
  "transparent": {
112
131
  "De3pzq": "f1c21dwh",
@@ -121,12 +140,12 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
121
140
  "oetu4i": "f1ukrpxl",
122
141
  "gg5e9n": ["fecsdlb", "fr80ssc"],
123
142
  "Bi91k9c": "f139oj5f",
124
- "ecr2s2": "fophhak",
125
- "B6oc9vd": "ff472gp",
126
- "ak43y8": ["f4yyc7m", "ft2aflc"],
127
- "wmxk5l": "fggejwh",
128
- "B50zh58": ["ft2aflc", "f4yyc7m"],
129
- "lj723h": "f19au66r"
143
+ "iro3zm": "fwiml72",
144
+ "b661bw": "f1h0usnq",
145
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
146
+ "B9zn80p": "f16h9ulv",
147
+ "Bpld233": ["fx2bmrt", "fs4ktlq"],
148
+ "B2d53fq": "f1fg1p5m"
130
149
  },
131
150
  "circular": {
132
151
  "Bbmb7ep": ["f8fbkgy", "f1nfllo7"],
@@ -142,12 +161,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
142
161
  "Btl43ni": ["f13av6d4", "f3fg2lr"]
143
162
  },
144
163
  "small": {
145
- "i8kkvl": "f1q8lukm",
146
- "Belr9w4": "f1ma2n7n",
147
- "z8tnut": "f1g0x7ka",
148
- "z189sj": ["f19lj068", "f177v4lu"],
149
- "Byoj8tv": "f1qch9an",
150
- "uwmqm3": ["f177v4lu", "f19lj068"],
164
+ "z8tnut": "fztplxc",
165
+ "z189sj": ["f1vdfbxk", "f1f5gg8d"],
166
+ "Byoj8tv": "f9g1xly",
167
+ "uwmqm3": ["f1f5gg8d", "f1vdfbxk"],
151
168
  "Bqenvij": "frvgh55",
152
169
  "Bf4jedk": "fh7ncta",
153
170
  "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
@@ -159,12 +176,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
159
176
  "Bg96gwp": "fwrc4pm"
160
177
  },
161
178
  "medium": {
162
- "i8kkvl": "fgfbwa2",
163
- "Belr9w4": "f1y3hx6l",
164
- "z8tnut": "f1g0x7ka",
165
- "z189sj": ["f11qrl6u", "fjlbh76"],
166
- "Byoj8tv": "f1qch9an",
167
- "uwmqm3": ["fjlbh76", "f11qrl6u"],
179
+ "z8tnut": "fztplxc",
180
+ "z189sj": ["fw5db7e", "f1uw59to"],
181
+ "Byoj8tv": "f9g1xly",
182
+ "uwmqm3": ["f1uw59to", "fw5db7e"],
168
183
  "Bqenvij": "f1d2rq10",
169
184
  "Bf4jedk": "f14es27b",
170
185
  "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
@@ -176,12 +191,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
176
191
  "Bg96gwp": "f1i3iumi"
177
192
  },
178
193
  "large": {
179
- "i8kkvl": "fgfbwa2",
180
- "Belr9w4": "f1y3hx6l",
181
- "z8tnut": "f1g0x7ka",
182
- "z189sj": ["f1gbmcue", "f1rh9g5y"],
183
- "Byoj8tv": "f1qch9an",
184
- "uwmqm3": ["f1rh9g5y", "f1gbmcue"],
194
+ "z8tnut": "fztplxc",
195
+ "z189sj": ["fjodcmx", "fhx4nu"],
196
+ "Byoj8tv": "f9g1xly",
197
+ "uwmqm3": ["fhx4nu", "fjodcmx"],
185
198
  "Bqenvij": "fbhnoac",
186
199
  "Bf4jedk": "f14es27b",
187
200
  "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
@@ -193,9 +206,9 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
193
206
  "Bg96gwp": "faaz57k"
194
207
  }
195
208
  }, {
196
- "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);}"],
197
- "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);}"],
198
- "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);}"]
209
+ "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;}", ".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);}", ".fztplxc{padding-top:var(--spacingVerticalNone);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f9g1xly{padding-bottom:var(--spacingVerticalNone);}", ".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);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1d2rq10{height:32px;}", ".f14es27b{min-width:96px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fjodcmx{padding-right:var(--spacingHorizontalL);}", ".fhx4nu{padding-left:var(--spacingHorizontalL);}", ".fbhnoac{height:40px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}"],
210
+ "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);}", ".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}", ".f8491dx:hover{cursor:pointer;}", ".ft1hn21:hover .fui-Icon-filled{display:inline;}", ".fuxngvv:hover .fui-Icon-regular{display:none;}", ".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);}", ".f9olfzr:hover:active{color:var(--colorNeutralForeground1Pressed);}", ".fiu5zv5:hover:active{outline-style:none;}", ".f1dfjoow:hover:active .fui-Icon-filled{display:inline;}", ".f1j98vj9:hover:active .fui-Icon-regular{display: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);}"],
211
+ "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;}}"]
199
212
  });
200
213
 
201
214
  const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
@@ -214,18 +227,43 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
214
227
  "gg5e9n": ["f18rmfxp", "f1gwvigk"],
215
228
  "Bi91k9c": "fvgxktp",
216
229
  "eoavqd": "fphbwmw",
217
- "ecr2s2": "f1ryyzvn",
218
- "B6oc9vd": "fdi4vxw",
219
- "ak43y8": ["f4ryxzl", "fkdgpbx"],
220
- "wmxk5l": "fcmhn06",
221
- "B50zh58": ["fkdgpbx", "f4ryxzl"],
222
- "lj723h": "f19wldhg",
223
- "Bwh3duv": "fq67hom"
230
+ "Bk3fhr4": "f19vpps7",
231
+ "Bmfj8id": "fv5swzo",
232
+ "iro3zm": "f1t6o4dc",
233
+ "b661bw": "f10ztigi",
234
+ "Bk6r4ia": ["f1ft5sdu", "f1gzf82w"],
235
+ "B9zn80p": "f12zbtn2",
236
+ "Bpld233": ["f1gzf82w", "f1ft5sdu"],
237
+ "B2d53fq": "fcvwxyo",
238
+ "c3iz72": "f8w4c43",
239
+ "em6i61": "f1ol4fw6",
240
+ "vm6p8p": "f1q1lw4e"
241
+ },
242
+ "highContrast": {
243
+ "Bjwas2f": "fg455y9",
244
+ "Bn1d65q": ["f1rvyvqg", "f14g86mu"],
245
+ "Bxeuatn": "f1cwzwz",
246
+ "n51gp8": ["f14g86mu", "f1rvyvqg"],
247
+ "Bbusuzp": "f1dcs8yz",
248
+ "G867l3": "fjwq6ea",
249
+ "gdbnj": ["f1lr3nhc", "f1mbxvi6"],
250
+ "mxns5l": "fn5gmvv",
251
+ "o3nasb": ["f1mbxvi6", "f1lr3nhc"],
252
+ "pgvf35": "f53ppgq",
253
+ "Bh7lczh": ["f1663y11", "f80fkiy"],
254
+ "dpv3f4": "f18v5270",
255
+ "Bpnjhaq": ["f80fkiy", "f1663y11"],
256
+ "ze5xyy": "f1kc2mi9",
257
+ "Bf756sw": "fihuait",
258
+ "Bow2dr7": ["fnxhupq", "fyd6l6x"],
259
+ "Bvhedfk": "fx507ft",
260
+ "Gye4lf": ["fyd6l6x", "fnxhupq"],
261
+ "pc6evw": "fb3rf2x"
224
262
  },
225
263
  "outline": {
226
264
  "De3pzq": "f1c21dwh",
227
265
  "Jwef8y": "fjxutwb",
228
- "ecr2s2": "fophhak"
266
+ "iro3zm": "fwiml72"
229
267
  },
230
268
  "primary": {
231
269
  "g2u3we": "f1p3nwhy",
@@ -236,11 +274,12 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
236
274
  "Bwzppfd": ["fr80ssc", "fecsdlb"],
237
275
  "oetu4i": "f1ukrpxl",
238
276
  "gg5e9n": ["fecsdlb", "fr80ssc"],
239
- "B6oc9vd": "ff472gp",
240
- "ak43y8": ["f4yyc7m", "ft2aflc"],
241
- "wmxk5l": "fggejwh",
242
- "B50zh58": ["ft2aflc", "f4yyc7m"]
277
+ "b661bw": "f1h0usnq",
278
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
279
+ "B9zn80p": "f16h9ulv",
280
+ "Bpld233": ["fx2bmrt", "fs4ktlq"]
243
281
  },
282
+ "secondary": {},
244
283
  "subtle": {
245
284
  "De3pzq": "f3rmtva",
246
285
  "g2u3we": "f1p3nwhy",
@@ -252,11 +291,11 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
252
291
  "Bwzppfd": ["fr80ssc", "fecsdlb"],
253
292
  "oetu4i": "f1ukrpxl",
254
293
  "gg5e9n": ["fecsdlb", "fr80ssc"],
255
- "ecr2s2": "f1rot6hk",
256
- "B6oc9vd": "ff472gp",
257
- "ak43y8": ["f4yyc7m", "ft2aflc"],
258
- "wmxk5l": "fggejwh",
259
- "B50zh58": ["ft2aflc", "f4yyc7m"]
294
+ "iro3zm": "fvaszet",
295
+ "b661bw": "f1h0usnq",
296
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
297
+ "B9zn80p": "f16h9ulv",
298
+ "Bpld233": ["fx2bmrt", "fs4ktlq"]
260
299
  },
261
300
  "transparent": {
262
301
  "De3pzq": "f3rmtva",
@@ -269,107 +308,107 @@ const useRootDisabledStyles = /*#__PURE__*/react_1.__styles({
269
308
  "Bwzppfd": ["fr80ssc", "fecsdlb"],
270
309
  "oetu4i": "f1ukrpxl",
271
310
  "gg5e9n": ["fecsdlb", "fr80ssc"],
272
- "ecr2s2": "f1rot6hk",
273
- "B6oc9vd": "ff472gp",
274
- "ak43y8": ["f4yyc7m", "ft2aflc"],
275
- "wmxk5l": "fggejwh",
276
- "B50zh58": ["ft2aflc", "f4yyc7m"]
311
+ "iro3zm": "fvaszet",
312
+ "b661bw": "f1h0usnq",
313
+ "Bk6r4ia": ["fs4ktlq", "fx2bmrt"],
314
+ "B9zn80p": "f16h9ulv",
315
+ "Bpld233": ["fx2bmrt", "fs4ktlq"]
277
316
  }
278
317
  }, {
279
318
  "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;}"],
280
- "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;}"],
281
- "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;}"]
319
+ "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;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".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;}", ".f1ol4fw6:hover:active .fui-Icon-filled{display:none;}", ".f1q1lw4e:hover:active .fui-Icon-regular{display:inline;}", ".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;}"],
320
+ "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;}}"]
282
321
  });
283
322
 
284
323
  const useRootFocusStyles = /*#__PURE__*/react_1.__styles({
285
324
  "base": {
286
- "B486eqv": "f2hkw1w",
325
+ "Brovlpu": "ftqa4ok",
287
326
  "Bnmjwt4": "flfsvnh",
288
327
  "Jopkrh": ["f1781m5e", "flvaaa9"],
289
328
  "hhrs2v": "f50u1b5",
290
329
  "B7jbng7": ["flvaaa9", "f1781m5e"],
291
330
  "Bh48x57": "f19j8a82",
292
- "B32s92o": "f4mghqd",
331
+ "B32s92o": "fgeg2qa",
293
332
  "B5hngm5": "fhcq1yo",
294
333
  "D4py6b": "f9ycirn",
295
334
  "Bgwpjed": "fpt6wn7"
296
335
  },
297
336
  "circular": {
298
- "B486eqv": "f2hkw1w",
337
+ "Brovlpu": "ftqa4ok",
299
338
  "B8j0l6": ["f11yy61d", "f5edc3x"],
300
339
  "Ekyhi": ["f5edc3x", "f11yy61d"],
301
340
  "Bmrpcm6": ["f1aea4n", "f4jo73o"],
302
341
  "Beswxhl": ["f4jo73o", "f1aea4n"]
303
342
  },
304
343
  "rounded": {},
344
+ "square": {
345
+ "Brovlpu": "ftqa4ok",
346
+ "B8j0l6": ["f5oco9f", "fiz44lb"],
347
+ "Ekyhi": ["fiz44lb", "f5oco9f"],
348
+ "Bmrpcm6": ["f1d1ywej", "flv4e1y"],
349
+ "Beswxhl": ["flv4e1y", "f1d1ywej"]
350
+ },
305
351
  "primary": {
306
- "B486eqv": "f2hkw1w",
352
+ "Brovlpu": "ftqa4ok",
307
353
  "Bnmjwt4": "fbugrqt",
308
354
  "Jopkrh": ["fhoxsto", "f19qf7vm"],
309
355
  "hhrs2v": "f1tl0rof",
310
356
  "B7jbng7": ["f19qf7vm", "fhoxsto"],
311
357
  "D4py6b": "f15m8qn2"
312
358
  },
313
- "square": {
314
- "B486eqv": "f2hkw1w",
315
- "B8j0l6": ["f5oco9f", "fiz44lb"],
316
- "Ekyhi": ["fiz44lb", "f5oco9f"],
317
- "Bmrpcm6": ["f1d1ywej", "flv4e1y"],
318
- "Beswxhl": ["flv4e1y", "f1d1ywej"]
319
- },
320
359
  "small": {
321
- "B486eqv": "f2hkw1w",
360
+ "Brovlpu": "ftqa4ok",
322
361
  "B8j0l6": ["f1dzjeht", "f1fw97sp"],
323
362
  "Ekyhi": ["f1fw97sp", "f1dzjeht"],
324
363
  "Bmrpcm6": ["f1hr3vfr", "f1fepg9x"],
325
364
  "Beswxhl": ["f1fepg9x", "f1hr3vfr"]
326
365
  },
327
366
  "medium": {
328
- "B486eqv": "f2hkw1w",
367
+ "Brovlpu": "ftqa4ok",
329
368
  "B8j0l6": ["f1ezw2km", "f18buiid"],
330
369
  "Ekyhi": ["f18buiid", "f1ezw2km"],
331
370
  "Bmrpcm6": ["f1hat8c3", "f10ee3ek"],
332
371
  "Beswxhl": ["f10ee3ek", "f1hat8c3"]
333
372
  },
334
373
  "large": {
335
- "B486eqv": "f2hkw1w",
374
+ "Brovlpu": "ftqa4ok",
336
375
  "B8j0l6": ["f8iz5lg", "fzmqelg"],
337
376
  "Ekyhi": ["fzmqelg", "f8iz5lg"],
338
377
  "Bmrpcm6": ["f1ywuu4l", "f721nif"],
339
378
  "Beswxhl": ["f721nif", "f1ywuu4l"]
340
379
  }
341
380
  }, {
342
- "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
343
- "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .f4mghqd:focus{outline-width:2px;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f9ycirn:focus{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}", "[data-keyboard-nav] .f11yy61d:focus{border-bottom-right-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f5edc3x:focus{border-bottom-left-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f1aea4n:focus{border-top-right-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f4jo73o:focus{border-top-left-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .fbugrqt:focus{border-top-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .fhoxsto:focus{border-right-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f19qf7vm:focus{border-left-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f1tl0rof:focus{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f15m8qn2:focus{box-shadow:var(--shadow2),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f5oco9f:focus{border-bottom-right-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .fiz44lb:focus{border-bottom-left-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .f1d1ywej:focus{border-top-right-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .flv4e1y:focus{border-top-left-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .f1dzjeht:focus{border-bottom-right-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1fw97sp:focus{border-bottom-left-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1hr3vfr:focus{border-top-right-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1fepg9x:focus{border-top-left-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1ezw2km:focus{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f18buiid:focus{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1hat8c3:focus{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f10ee3ek:focus{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f8iz5lg:focus{border-bottom-right-radius:var(--borderRadiusLarge);}", "[data-keyboard-nav] .fzmqelg:focus{border-bottom-left-radius:var(--borderRadiusLarge);}", "[data-keyboard-nav] .f1ywuu4l:focus{border-top-right-radius:var(--borderRadiusLarge);}", "[data-keyboard-nav] .f721nif:focus{border-top-left-radius:var(--borderRadiusLarge);}"]
381
+ "f": [".ftqa4ok:focus{outline-style:none;}"],
382
+ "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f9ycirn:focus{box-shadow:var(--shadow4),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}", "[data-keyboard-nav] .f11yy61d:focus{border-bottom-right-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f5edc3x:focus{border-bottom-left-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f1aea4n:focus{border-top-right-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f4jo73o:focus{border-top-left-radius:var(--borderRadiusCircular);}", "[data-keyboard-nav] .f5oco9f:focus{border-bottom-right-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .fiz44lb:focus{border-bottom-left-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .f1d1ywej:focus{border-top-right-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .flv4e1y:focus{border-top-left-radius:var(--borderRadiusNone);}", "[data-keyboard-nav] .fbugrqt:focus{border-top-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .fhoxsto:focus{border-right-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f19qf7vm:focus{border-left-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f1tl0rof:focus{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", "[data-keyboard-nav] .f15m8qn2:focus{box-shadow:var(--shadow2),0 0 0 2px var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1dzjeht:focus{border-bottom-right-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1fw97sp:focus{border-bottom-left-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1hr3vfr:focus{border-top-right-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1fepg9x:focus{border-top-left-radius:var(--borderRadiusSmall);}", "[data-keyboard-nav] .f1ezw2km:focus{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f18buiid:focus{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f1hat8c3:focus{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f10ee3ek:focus{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f8iz5lg:focus{border-bottom-right-radius:var(--borderRadiusLarge);}", "[data-keyboard-nav] .fzmqelg:focus{border-bottom-left-radius:var(--borderRadiusLarge);}", "[data-keyboard-nav] .f1ywuu4l:focus{border-top-right-radius:var(--borderRadiusLarge);}", "[data-keyboard-nav] .f721nif:focus{border-top-left-radius:var(--borderRadiusLarge);}"]
344
383
  });
345
384
 
346
385
  const useRootIconOnlyStyles = /*#__PURE__*/react_1.__styles({
347
386
  "small": {
348
- "z8tnut": "f10ra9hq",
349
- "z189sj": ["f8wuabp", "fycuoez"],
350
- "Byoj8tv": "f1y2xyjm",
351
- "uwmqm3": ["fycuoez", "f8wuabp"],
387
+ "z8tnut": "f1x4af0m",
388
+ "z189sj": ["f7x41pl", "fruq291"],
389
+ "Byoj8tv": "fd55psn",
390
+ "uwmqm3": ["fruq291", "f7x41pl"],
352
391
  "Bf4jedk": "f107v6xj",
353
392
  "B2u0y6b": "f17iyk3w"
354
393
  },
355
394
  "medium": {
356
- "z8tnut": "f10ra9hq",
357
- "z189sj": ["f8wuabp", "fycuoez"],
358
- "Byoj8tv": "f1y2xyjm",
359
- "uwmqm3": ["fycuoez", "f8wuabp"],
395
+ "z8tnut": "f1x4af0m",
396
+ "z189sj": ["f7x41pl", "fruq291"],
397
+ "Byoj8tv": "fd55psn",
398
+ "uwmqm3": ["fruq291", "f7x41pl"],
360
399
  "Bf4jedk": "fwbmr0d",
361
400
  "B2u0y6b": "f44c6la"
362
401
  },
363
402
  "large": {
364
- "z8tnut": "f1xp5gbu",
365
- "z189sj": ["f1sgzk6v", "f1bg5zqg"],
366
- "Byoj8tv": "f1d7kygh",
367
- "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
403
+ "z8tnut": "f16k8034",
404
+ "z189sj": ["fdw0yi8", "fk8j09s"],
405
+ "Byoj8tv": "f1angvds",
406
+ "uwmqm3": ["fk8j09s", "fdw0yi8"],
368
407
  "Bf4jedk": "f12clzc2",
369
408
  "B2u0y6b": "fjy1crr"
370
409
  }
371
410
  }, {
372
- "d": [".f10ra9hq{padding-top:4px;}", ".f8wuabp{padding-right:4px;}", ".fycuoez{padding-left:4px;}", ".f1y2xyjm{padding-bottom:4px;}", ".f107v6xj{min-width:28px;}", ".f17iyk3w{max-width:28px;}", ".fwbmr0d{min-width:32px;}", ".f44c6la{max-width:32px;}", ".f1xp5gbu{padding-top:6px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".f12clzc2{min-width:40px;}", ".fjy1crr{max-width:40px;}"]
411
+ "d": [".f1x4af0m{padding-top:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fd55psn{padding-bottom:var(--spacingHorizontalXS);}", ".f107v6xj{min-width:28px;}", ".f17iyk3w{max-width:28px;}", ".fwbmr0d{min-width:32px;}", ".f44c6la{max-width:32px;}", ".f16k8034{padding-top:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1angvds{padding-bottom:var(--spacingHorizontalSNudge);}", ".f12clzc2{min-width:40px;}", ".fjy1crr{max-width:40px;}"]
373
412
  });
374
413
 
375
414
  const useIconStyles = /*#__PURE__*/react_1.__styles({
@@ -381,20 +420,29 @@ const useIconStyles = /*#__PURE__*/react_1.__styles({
381
420
  "small": {
382
421
  "Be2twd7": "fe5j1ua",
383
422
  "Bqenvij": "fjamq6b",
384
- "a9b677": "f64fuq3"
423
+ "a9b677": "f64fuq3",
424
+ "Bqrlyyl": "fbaiahx"
385
425
  },
386
426
  "medium": {
387
427
  "Be2twd7": "fe5j1ua",
388
428
  "Bqenvij": "fjamq6b",
389
- "a9b677": "f64fuq3"
429
+ "a9b677": "f64fuq3",
430
+ "Bqrlyyl": "f1exjqw5"
390
431
  },
391
432
  "large": {
392
433
  "Be2twd7": "f1rt2boy",
393
434
  "Bqenvij": "frvgh55",
394
- "a9b677": "fq4mcun"
435
+ "a9b677": "fq4mcun",
436
+ "Bqrlyyl": "f1exjqw5"
437
+ },
438
+ "before": {
439
+ "t21cq0": ["f1nizpg2", "f1a695kz"]
440
+ },
441
+ "after": {
442
+ "Frg6f3": ["f1a695kz", "f1nizpg2"]
395
443
  }
396
444
  }, {
397
- "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;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}"]
445
+ "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;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}", ".fbaiahx{--fui-Button__icon--spacing:var(--spacingHorizontalXS);}", ".f1exjqw5{--fui-Button__icon--spacing:var(--spacingHorizontalSNudge);}", ".f1rt2boy{font-size:24px;}", ".frvgh55{height:24px;}", ".fq4mcun{width:24px;}", ".f1nizpg2{margin-right:var(--fui-Button__icon--spacing);}", ".f1a695kz{margin-left:var(--fui-Button__icon--spacing);}"]
398
446
  });
399
447
 
400
448
  const useButtonStyles_unstable = state => {
@@ -405,22 +453,22 @@ const useButtonStyles_unstable = state => {
405
453
  const iconStyles = useIconStyles();
406
454
  const {
407
455
  appearance,
408
- block,
409
456
  disabled,
410
457
  disabledFocusable,
411
458
  iconOnly,
459
+ iconPosition,
412
460
  shape,
413
461
  size
414
462
  } = state;
415
- state.root.className = react_1.mergeClasses(exports.buttonClassName, // Root styles
416
- rootStyles.base, block && rootStyles.block, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], // Disabled styles
417
- (disabled || disabledFocusable) && rootDisabledStyles.base, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
463
+ state.root.className = react_1.mergeClasses(exports.buttonClassNames.root, // Root styles
464
+ rootStyles.base, rootStyles.highContrast, appearance && rootStyles[appearance], rootStyles[size], rootStyles[shape], // Disabled styles
465
+ (disabled || disabledFocusable) && rootDisabledStyles.base, (disabled || disabledFocusable) && rootDisabledStyles.highContrast, appearance && (disabled || disabledFocusable) && rootDisabledStyles[appearance], // Focus styles
418
466
  rootFocusStyles.base, appearance === 'primary' && rootFocusStyles.primary, rootFocusStyles[size], rootFocusStyles[shape], // Icon-only styles
419
467
  iconOnly && rootIconOnlyStyles[size], // User provided class name
420
468
  state.root.className);
421
469
 
422
470
  if (state.icon) {
423
- state.icon.className = react_1.mergeClasses(iconStyles.base, iconStyles[size], state.icon.className);
471
+ state.icon.className = react_1.mergeClasses(exports.buttonClassNames.icon, iconStyles.base, state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition], iconStyles[size], state.icon.className);
424
472
  }
425
473
 
426
474
  return state;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/Button/useButtonStyles.ts"],"names":[],"mappings":"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","sourceRoot":""}
1
+ {"version":3,"sources":["components/Button/useButtonStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAIa,OAAA,CAAA,gBAAA,GAAgD;AAC3D,EAAA,IAAI,EAAE,YADqD;AAE3D,EAAA,IAAI,EAAE;AAFqD,CAAhD;AAKb,MAAM,cAAc,GAAG,6BAAvB;;AAEA,MAAM,aAAa,gBAAG,OAAA,SAAA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AA8LA,MAAM,qBAAqB,gBAAG,OAAA,SAAA;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,EAA9B;;AAsHA,MAAM,kBAAkB,gBAAG,OAAA,SAAA;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;;AA0CA,MAAM,qBAAqB,gBAAG,OAAA,SAAA;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,OAAA,SAAA;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;;AAwCO,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;AAAE,IAAA,UAAF;AAAc,IAAA,QAAd;AAAwB,IAAA,iBAAxB;AAA2C,IAAA,QAA3C;AAAqD,IAAA,YAArD;AAAmE,IAAA,KAAnE;AAA0E,IAAA;AAA1E,MAAmF,KAAzF;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,gBAAA,CAAiB,IADI,EAGrB;AACA,EAAA,UAAU,CAAC,IAJU,EAKrB,UAAU,CAAC,YALU,EAMrB,UAAU,IAAI,UAAU,CAAC,UAAD,CANH,EAOrB,UAAU,CAAC,IAAD,CAPW,EAQrB,UAAU,CAAC,KAAD,CARW,EAUrB;AACA,GAAC,QAAQ,IAAI,iBAAb,KAAmC,kBAAkB,CAAC,IAXjC,EAYrB,CAAC,QAAQ,IAAI,iBAAb,KAAmC,kBAAkB,CAAC,YAZjC,EAarB,UAAU,KAAK,QAAQ,IAAI,iBAAjB,CAAV,IAAiD,kBAAkB,CAAC,UAAD,CAb9C,EAerB;AACA,EAAA,eAAe,CAAC,IAhBK,EAiBrB,UAAU,KAAK,SAAf,IAA4B,eAAe,CAAC,OAjBvB,EAkBrB,eAAe,CAAC,IAAD,CAlBM,EAmBrB,eAAe,CAAC,KAAD,CAnBM,EAqBrB;AACA,EAAA,QAAQ,IAAI,kBAAkB,CAAC,IAAD,CAtBT,EAwBrB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAzBU,CAAvB;;AA4BA,MAAI,KAAK,CAAC,IAAV,EAAgB;AACd,IAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,gBAAA,CAAiB,IADI,EAErB,UAAU,CAAC,IAFU,EAGrB,KAAK,CAAC,IAAN,CAAW,QAAX,KAAwB,SAAxB,IAAqC,KAAK,CAAC,IAAN,CAAW,QAAX,KAAwB,IAA7D,IAAqE,UAAU,CAAC,YAAD,CAH1D,EAIrB,UAAU,CAAC,IAAD,CAJW,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;AAOD;;AAED,SAAO,KAAP;AACD,CAhDM;;AAAM,OAAA,CAAA,wBAAA,GAAwB,wBAAxB","sourcesContent":["import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\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\nconst iconSpacingVar = '--fui-Button__icon--spacing';\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.colorNeutralForeground1Hover,\n\n cursor: 'pointer',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\n },\n\n ':hover:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n color: tokens.colorNeutralForeground1Pressed,\n\n outlineStyle: 'none',\n\n [`& .${iconFilledClassName}`]: {\n display: 'inline',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'none',\n },\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 // 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 secondary: {\n /* The secondary styles are exactly the same as the base styles. */\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.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalS),\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.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalM),\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.padding(tokens.spacingVerticalNone, tokens.spacingHorizontalL),\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 [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\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 [`& .${iconFilledClassName}`]: {\n display: 'none',\n },\n [`& .${iconRegularClassName}`]: {\n display: 'inline',\n },\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 secondary: {\n /* The secondary styles are exactly the same as the base styles. */\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 base: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor('transparent'),\n outlineColor: 'transparent',\n outlineWidth: tokens.strokeWidthThick,\n outlineStyle: 'solid',\n boxShadow: `\n ${tokens.shadow4},\n 0 0 0 2px ${tokens.colorStrokeFocus2}\n `,\n zIndex: 1,\n }),\n\n // Shape variations\n circular: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n }),\n rounded: {\n /* The rounded styles are exactly the same as the base styles. */\n },\n square: createCustomFocusIndicatorStyle({\n ...shorthands.borderRadius(tokens.borderRadiusNone),\n }),\n\n // Primary styles\n primary: createCustomFocusIndicatorStyle({\n ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n boxShadow: `${tokens.shadow2}, 0 0 0 2px ${tokens.colorStrokeFocus2}`,\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(tokens.spacingHorizontalXS),\n\n minWidth: '28px',\n maxWidth: '28px',\n },\n medium: {\n ...shorthands.padding(tokens.spacingHorizontalXS),\n\n minWidth: '32px',\n maxWidth: '32px',\n },\n large: {\n ...shorthands.padding(tokens.spacingHorizontalSNudge),\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 [iconSpacingVar]: tokens.spacingHorizontalXS,\n },\n medium: {\n fontSize: '20px',\n height: '20px',\n width: '20px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n },\n large: {\n fontSize: '24px',\n height: '24px',\n width: '24px',\n\n [iconSpacingVar]: tokens.spacingHorizontalSNudge,\n },\n\n // Icon position variations\n before: {\n marginRight: `var(${iconSpacingVar})`,\n },\n after: {\n marginLeft: `var(${iconSpacingVar})`,\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 { appearance, disabled, disabledFocusable, iconOnly, iconPosition, shape, size } = state;\n\n state.root.className = mergeClasses(\n buttonClassNames.root,\n\n // Root styles\n rootStyles.base,\n rootStyles.highContrast,\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(\n buttonClassNames.icon,\n iconStyles.base,\n state.root.children !== undefined && state.root.children !== null && iconStyles[iconPosition],\n iconStyles[size],\n state.icon.className,\n );\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;AAEA,EAAA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;AAEA,SAAO,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,CAAP,CALsG,CAMtG;AACD,CAPuE,CAA3D;AASb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourceRoot":""}
1
+ {"version":3,"sources":["components/CompoundButton/CompoundButton.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,cAAA,gBAA2D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACtG,QAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;AAEA,EAAA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;AAEA,SAAO,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,CAAP,CALsG,CAMtG;AACD,CAPuE,CAA3D;AASb,OAAA,CAAA,cAAA,CAAe,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/"}
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}