@react-spectrum/s2 3.0.0-nightly-835f0aa1b-250107 → 3.0.0-nightly-d87cc4422-250109

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 (217) hide show
  1. package/dist/Accordion.cjs +3 -3
  2. package/dist/Accordion.css +2 -2
  3. package/dist/Accordion.mjs +3 -3
  4. package/dist/ActionBar.cjs +32 -32
  5. package/dist/ActionBar.css +34 -34
  6. package/dist/ActionBar.mjs +32 -32
  7. package/dist/ActionButton.cjs +61 -61
  8. package/dist/ActionButton.css +56 -56
  9. package/dist/ActionButton.mjs +61 -61
  10. package/dist/ActionButtonGroup.cjs +4 -4
  11. package/dist/ActionButtonGroup.css +3 -3
  12. package/dist/ActionButtonGroup.mjs +4 -4
  13. package/dist/Avatar.cjs +10 -10
  14. package/dist/Avatar.css +11 -11
  15. package/dist/Avatar.mjs +10 -10
  16. package/dist/AvatarGroup.cjs +97 -97
  17. package/dist/AvatarGroup.css +31 -31
  18. package/dist/AvatarGroup.mjs +97 -97
  19. package/dist/Badge.cjs +31 -31
  20. package/dist/Badge.css +33 -33
  21. package/dist/Badge.mjs +31 -31
  22. package/dist/Breadcrumbs.cjs +83 -82
  23. package/dist/Breadcrumbs.cjs.map +1 -1
  24. package/dist/Breadcrumbs.css +65 -59
  25. package/dist/Breadcrumbs.css.map +1 -1
  26. package/dist/Breadcrumbs.mjs +83 -82
  27. package/dist/Breadcrumbs.mjs.map +1 -1
  28. package/dist/Button.cjs +82 -77
  29. package/dist/Button.cjs.map +1 -1
  30. package/dist/Button.css +65 -65
  31. package/dist/Button.css.map +1 -1
  32. package/dist/Button.mjs +82 -77
  33. package/dist/Button.mjs.map +1 -1
  34. package/dist/ButtonGroup.cjs +15 -15
  35. package/dist/ButtonGroup.css +11 -11
  36. package/dist/ButtonGroup.mjs +15 -15
  37. package/dist/Card.cjs +157 -157
  38. package/dist/Card.css +117 -117
  39. package/dist/Card.mjs +157 -157
  40. package/dist/CardView.cjs +13 -13
  41. package/dist/CardView.css +14 -14
  42. package/dist/CardView.mjs +13 -13
  43. package/dist/CenterBaseline.cjs +1 -1
  44. package/dist/CenterBaseline.css +2 -2
  45. package/dist/CenterBaseline.mjs +1 -1
  46. package/dist/Checkbox.cjs +46 -46
  47. package/dist/Checkbox.css +42 -42
  48. package/dist/Checkbox.mjs +46 -46
  49. package/dist/CheckboxGroup.cjs +36 -36
  50. package/dist/CheckboxGroup.css +32 -32
  51. package/dist/CheckboxGroup.mjs +36 -36
  52. package/dist/ClearButton.cjs +5 -5
  53. package/dist/ClearButton.css +5 -5
  54. package/dist/ClearButton.mjs +5 -5
  55. package/dist/CloseButton.cjs +15 -15
  56. package/dist/CloseButton.css +15 -15
  57. package/dist/CloseButton.mjs +15 -15
  58. package/dist/ColorArea.cjs +9 -9
  59. package/dist/ColorArea.css +9 -9
  60. package/dist/ColorArea.mjs +9 -9
  61. package/dist/ColorField.cjs +29 -29
  62. package/dist/ColorField.css +24 -24
  63. package/dist/ColorField.mjs +29 -29
  64. package/dist/ColorHandle.cjs +9 -9
  65. package/dist/ColorHandle.css +16 -16
  66. package/dist/ColorHandle.mjs +9 -9
  67. package/dist/ColorSlider.cjs +34 -34
  68. package/dist/ColorSlider.css +42 -42
  69. package/dist/ColorSlider.mjs +34 -34
  70. package/dist/ColorSwatch.cjs +6 -6
  71. package/dist/ColorSwatch.css +14 -14
  72. package/dist/ColorSwatch.mjs +6 -6
  73. package/dist/ColorSwatchPicker.cjs +12 -12
  74. package/dist/ColorSwatchPicker.css +32 -32
  75. package/dist/ColorSwatchPicker.mjs +12 -12
  76. package/dist/ColorWheel.cjs +14 -14
  77. package/dist/ColorWheel.css +14 -14
  78. package/dist/ColorWheel.mjs +14 -14
  79. package/dist/ComboBox.cjs +51 -48
  80. package/dist/ComboBox.cjs.map +1 -1
  81. package/dist/ComboBox.css +47 -47
  82. package/dist/ComboBox.css.map +1 -1
  83. package/dist/ComboBox.mjs +51 -48
  84. package/dist/ComboBox.mjs.map +1 -1
  85. package/dist/ContextualHelp.cjs +5 -5
  86. package/dist/ContextualHelp.css +23 -23
  87. package/dist/ContextualHelp.mjs +5 -5
  88. package/dist/CustomDialog.cjs +8 -8
  89. package/dist/CustomDialog.css +9 -9
  90. package/dist/CustomDialog.mjs +8 -8
  91. package/dist/Dialog.cjs +10 -10
  92. package/dist/Dialog.css +39 -39
  93. package/dist/Dialog.mjs +10 -10
  94. package/dist/Disclosure.cjs +53 -53
  95. package/dist/Disclosure.css +47 -47
  96. package/dist/Disclosure.mjs +53 -53
  97. package/dist/Divider.cjs +5 -5
  98. package/dist/Divider.css +5 -5
  99. package/dist/Divider.mjs +5 -5
  100. package/dist/DropZone.cjs +24 -24
  101. package/dist/DropZone.css +24 -24
  102. package/dist/DropZone.mjs +24 -24
  103. package/dist/Field.cjs +98 -98
  104. package/dist/Field.cjs.map +1 -1
  105. package/dist/Field.css +68 -68
  106. package/dist/Field.mjs +98 -98
  107. package/dist/Field.mjs.map +1 -1
  108. package/dist/Form.cjs +4 -4
  109. package/dist/Form.css +3 -3
  110. package/dist/Form.mjs +4 -4
  111. package/dist/FullscreenDialog.cjs +5 -5
  112. package/dist/FullscreenDialog.css +54 -54
  113. package/dist/FullscreenDialog.mjs +5 -5
  114. package/dist/IllustratedMessage.cjs +117 -117
  115. package/dist/IllustratedMessage.css +58 -58
  116. package/dist/IllustratedMessage.mjs +117 -117
  117. package/dist/Image.cjs +10 -10
  118. package/dist/Image.css +11 -11
  119. package/dist/Image.mjs +10 -10
  120. package/dist/InlineAlert.cjs +41 -41
  121. package/dist/InlineAlert.css +44 -44
  122. package/dist/InlineAlert.mjs +41 -41
  123. package/dist/Link.cjs +27 -27
  124. package/dist/Link.css +27 -27
  125. package/dist/Link.mjs +27 -27
  126. package/dist/Menu.cjs +278 -207
  127. package/dist/Menu.cjs.map +1 -1
  128. package/dist/Menu.css +114 -112
  129. package/dist/Menu.css.map +1 -1
  130. package/dist/Menu.mjs +278 -207
  131. package/dist/Menu.mjs.map +1 -1
  132. package/dist/Meter.cjs +45 -45
  133. package/dist/Meter.css +51 -51
  134. package/dist/Meter.mjs +45 -45
  135. package/dist/Modal.cjs +37 -37
  136. package/dist/Modal.css +35 -35
  137. package/dist/Modal.mjs +37 -37
  138. package/dist/NumberField.cjs +57 -57
  139. package/dist/NumberField.css +65 -65
  140. package/dist/NumberField.mjs +57 -57
  141. package/dist/Picker.cjs +114 -111
  142. package/dist/Picker.cjs.map +1 -1
  143. package/dist/Picker.css +79 -79
  144. package/dist/Picker.css.map +1 -1
  145. package/dist/Picker.mjs +114 -111
  146. package/dist/Picker.mjs.map +1 -1
  147. package/dist/Popover.cjs +40 -40
  148. package/dist/Popover.css +37 -37
  149. package/dist/Popover.mjs +40 -40
  150. package/dist/ProgressBar.cjs +57 -57
  151. package/dist/ProgressBar.css +61 -61
  152. package/dist/ProgressBar.mjs +57 -57
  153. package/dist/ProgressCircle.cjs +3 -3
  154. package/dist/ProgressCircle.css +2 -2
  155. package/dist/ProgressCircle.mjs +3 -3
  156. package/dist/Provider.cjs +4 -4
  157. package/dist/Provider.css +5 -5
  158. package/dist/Provider.mjs +4 -4
  159. package/dist/Radio.cjs +46 -46
  160. package/dist/Radio.css +42 -42
  161. package/dist/Radio.mjs +46 -46
  162. package/dist/RadioGroup.cjs +34 -34
  163. package/dist/RadioGroup.css +32 -32
  164. package/dist/RadioGroup.mjs +34 -34
  165. package/dist/SearchField.cjs +31 -31
  166. package/dist/SearchField.css +29 -29
  167. package/dist/SearchField.mjs +31 -31
  168. package/dist/SegmentedControl.cjs +54 -54
  169. package/dist/SegmentedControl.css +54 -54
  170. package/dist/SegmentedControl.mjs +54 -54
  171. package/dist/Slider.cjs +89 -89
  172. package/dist/Slider.css +82 -82
  173. package/dist/Slider.mjs +89 -89
  174. package/dist/StatusLight.cjs +26 -26
  175. package/dist/StatusLight.css +26 -26
  176. package/dist/StatusLight.mjs +26 -26
  177. package/dist/Switch.cjs +47 -47
  178. package/dist/Switch.css +40 -40
  179. package/dist/Switch.mjs +47 -47
  180. package/dist/TableView.cjs +137 -137
  181. package/dist/TableView.css +76 -76
  182. package/dist/TableView.mjs +137 -137
  183. package/dist/Tabs.cjs +60 -60
  184. package/dist/Tabs.css +52 -52
  185. package/dist/Tabs.mjs +60 -60
  186. package/dist/TabsPicker.cjs +63 -63
  187. package/dist/TabsPicker.css +61 -61
  188. package/dist/TabsPicker.mjs +63 -63
  189. package/dist/TagGroup.cjs +102 -102
  190. package/dist/TagGroup.css +84 -84
  191. package/dist/TagGroup.mjs +102 -102
  192. package/dist/TextField.cjs +36 -36
  193. package/dist/TextField.css +33 -33
  194. package/dist/TextField.mjs +36 -36
  195. package/dist/ToggleButton.cjs +3 -3
  196. package/dist/ToggleButton.css +7 -7
  197. package/dist/ToggleButton.mjs +3 -3
  198. package/dist/Tooltip.cjs +29 -29
  199. package/dist/Tooltip.css +31 -31
  200. package/dist/Tooltip.mjs +29 -29
  201. package/dist/types.d.ts +2 -0
  202. package/dist/types.d.ts.map +1 -1
  203. package/icons/Skeleton.cjs +2 -2
  204. package/icons/Skeleton.css +5 -5
  205. package/icons/Skeleton.mjs +2 -2
  206. package/package.json +19 -19
  207. package/src/Button.tsx +18 -7
  208. package/src/ComboBox.tsx +2 -1
  209. package/src/Menu.tsx +40 -17
  210. package/src/Picker.tsx +2 -1
  211. package/style/dist/spectrum-theme.cjs +12 -1
  212. package/style/dist/spectrum-theme.cjs.map +1 -1
  213. package/style/dist/spectrum-theme.mjs +12 -1
  214. package/style/dist/spectrum-theme.mjs.map +1 -1
  215. package/style/dist/types.d.ts +2 -0
  216. package/style/dist/types.d.ts.map +1 -1
  217. package/style/spectrum-theme.ts +9 -1
package/dist/Button.cjs CHANGED
@@ -56,60 +56,60 @@ const $25d06cf8d4e72761$export$1c1a176f3b9e48d3 = /*#__PURE__*/ (0, $8owBJ$react
56
56
  const $25d06cf8d4e72761$var$iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';
57
57
  const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
58
58
  let rules = " .";
59
- let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|_9|_8|h|_5|_4|__A|__c|__d|__a|__b|U|__Q|X|Z|V|W|l|q|r)[^\s]+/g) || [];
59
+ let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r)[^\s]+/g) || [];
60
60
  rules += matches.join('');
61
- let $U = false;
61
+ let $V = false;
62
62
  let $q = false;
63
63
  let $l = false;
64
64
  for (let p of matches){
65
- if (/^\s*U/.test(p)) $U = true;
65
+ if (/^\s*V/.test(p)) $V = true;
66
66
  if (/^\s*q/.test(p)) $q = true;
67
67
  if (/^\s*l/.test(p)) $l = true;
68
68
  }
69
- if (props.isFocusVisible) rules += ' _Lb';
70
- else rules += ' _La';
69
+ if (props.isFocusVisible) rules += ' _Mb';
70
+ else rules += ' _Ma';
71
71
  rules += ' da_____M';
72
72
  if (props.isStaticColor) rules += ' d_____G';
73
73
  else rules += ' dx';
74
- rules += ' _Nc';
75
- rules += ' _M-3t1z';
74
+ rules += ' _Oc';
75
+ rules += ' _N-3t1z';
76
76
  if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
77
77
  else if (props.staticColor === "black") rules += ' -_1de2x0q_b-c';
78
- if (!$U) rules += ' Uc';
79
- rules += ' _Zd';
80
- rules += ' _1-soocicc';
81
- rules += ' _1d';
78
+ if (!$V) rules += ' Vc';
79
+ rules += ' _0d';
80
+ rules += ' _2-soocicc';
82
81
  rules += ' _2d';
83
- rules += ' _ja';
82
+ rules += ' _3d';
83
+ rules += ' _ka';
84
84
  rules += ' jbH';
85
85
  rules += ' jG';
86
- rules += ' _c-bc1l9oh';
87
- rules += ' _c-1uotwbwg';
88
- rules += ' _c-eo0c6sf';
89
- rules += ' _c-enzzrge';
90
- rules += ' _c-enzykdd';
91
- rules += ' _c-enzwzjc';
92
- rules += ' _c-enzrfpb';
93
- rules += ' _ca';
86
+ rules += ' _d-bc1l9oh';
87
+ rules += ' _d-1uotwbwg';
88
+ rules += ' _d-eo0c6sf';
89
+ rules += ' _d-enzzrge';
90
+ rules += ' _d-enzykdd';
91
+ rules += ' _d-enzwzjc';
92
+ rules += ' _d-enzrfpb';
93
+ rules += ' _da';
94
94
  if (props.size === "XL") {
95
- rules += ' _dbj';
96
- rules += ' _di';
95
+ rules += ' _ebj';
96
+ rules += ' _ei';
97
97
  } else if (props.size === "L") {
98
- rules += ' _dbh';
99
- rules += ' _dg';
98
+ rules += ' _ebh';
99
+ rules += ' _eg';
100
100
  } else if (props.size === "S") {
101
- rules += ' _dbd';
102
- rules += ' _dc';
101
+ rules += ' _ebd';
102
+ rules += ' _ec';
103
103
  } else if (props.size === "XS") {
104
- rules += ' _dbb';
105
- rules += ' _da';
104
+ rules += ' _ebb';
105
+ rules += ' _ea';
106
106
  } else {
107
- rules += ' _dbf';
108
- rules += ' _de';
107
+ rules += ' _ebf';
108
+ rules += ' _ee';
109
109
  }
110
- rules += ' _ed';
111
- rules += ' _f-1x99dlob';
112
- rules += ' _fa';
110
+ rules += ' _fd';
111
+ rules += ' _g-1x99dlob';
112
+ rules += ' _ga';
113
113
  if (props.fillStyle === "outline") {
114
114
  if (props.isDisabled) rules += ' aa_____O';
115
115
  else rules += ' aa_____K';
@@ -161,7 +161,7 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
161
161
  else rules += ' an';
162
162
  } else if (props.variant === "primary") rules += ' ad';
163
163
  }
164
- rules += ' __Da';
164
+ rules += ' __Ea';
165
165
  rules += ' o-375tou';
166
166
  if (!$q) {
167
167
  if (props.size === "XL") rules += ' q-soocicj';
@@ -170,23 +170,23 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
170
170
  else if (props.size === "XS") rules += ' q-soocicg';
171
171
  else rules += ' q-soocicf';
172
172
  }
173
- rules += ' _vg';
174
173
  rules += ' _wg';
175
174
  rules += ' _xg';
176
175
  rules += ' _yg';
177
- rules += ' __na';
176
+ rules += ' _zg';
177
+ rules += ' __oa';
178
178
  if (!$l) rules += ' le';
179
- rules += ' _ld';
179
+ rules += ' _md';
180
180
  rules += ' C-soocica';
181
181
  rules += ' CJ';
182
182
  rules += ' D-soocica';
183
183
  rules += ' DJ';
184
184
  rules += ' Ea';
185
185
  rules += ' Fa';
186
- rules += ' _b-soocicb';
187
- rules += ' _Oa';
188
- rules += ' _Q-375x7f';
189
- rules += ' _Ra';
186
+ rules += ' _c-soocicb';
187
+ rules += ' _Pa';
188
+ rules += ' _R-375x7f';
189
+ rules += ' _Sa';
190
190
  rules += ' wa';
191
191
  rules += ' u-375tp0';
192
192
  rules += ' v-375tp1';
@@ -229,24 +229,23 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
229
229
  else if (props.isHovered) rules += ' co';
230
230
  else rules += ' cn';
231
231
  }
232
- rules += ' _Ba-yknrp1';
233
- if (props.isPending) rules += ' _B-yknrp1';
234
- else if (props.isDisabled) rules += ' _B-yknrp1';
232
+ rules += ' _Ca-yknrp1';
233
+ if (props.isDisabled) rules += ' _C-yknrp1';
235
234
  else if (props.variant === "genai") {
236
- if (props.isFocusVisible) rules += ' _B-1gcd5pl';
237
- else if (props.isPressed) rules += ' _B-1gcd5pl';
238
- else if (props.isHovered) rules += ' _B-1gcd5pl';
239
- else rules += ' _B-u0nzys';
235
+ if (props.isFocusVisible) rules += ' _C-1gcd5pl';
236
+ else if (props.isPressed) rules += ' _C-1gcd5pl';
237
+ else if (props.isHovered) rules += ' _C-1gcd5pl';
238
+ else rules += ' _C-u0nzys';
240
239
  } else if (props.variant === "premium") {
241
- if (props.isFocusVisible) rules += ' _B-2xhv0x';
242
- else if (props.isPressed) rules += ' _B-2xhv0x';
243
- else if (props.isHovered) rules += ' _B-2xhv0x';
244
- else rules += ' _B-riuwfd';
240
+ if (props.isFocusVisible) rules += ' _C-2xhv0x';
241
+ else if (props.isPressed) rules += ' _C-2xhv0x';
242
+ else if (props.isHovered) rules += ' _C-2xhv0x';
243
+ else rules += ' _C-riuwfd';
245
244
  }
246
245
  rules += ' b-375toh';
247
246
  rules += ' -rwx0fg_e-b';
248
- rules += ' _zb';
249
- rules += ' __R-yksgrp';
247
+ rules += ' _Ab';
248
+ rules += ' __S-yksgrp';
250
249
  if (props.size === "XL") rules += ' -_375tou_o-j';
251
250
  else if (props.size === "L") rules += ' -_375tou_o-i';
252
251
  else if (props.size === "S") rules += ' -_375tou_o-h';
@@ -268,17 +267,20 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
268
267
  }
269
268
  if (props.isStaticColor) {
270
269
  if (props.fillStyle === "outline") {
271
- if (props.isDisabled) rules += ' -_375toh_b-a';
272
- else if (props.isFocusVisible) rules += ' -_375toh_b-_____x';
270
+ if (props.isDisabled) {
271
+ if (props.variant === "genai") rules += ' -_375toh_b-_____x';
272
+ else if (props.variant === "premium") rules += ' -_375toh_b-_____x';
273
+ else rules += ' -_375toh_b-a';
274
+ } else if (props.isFocusVisible) rules += ' -_375toh_b-_____x';
273
275
  else if (props.isPressed) rules += ' -_375toh_b-_____x';
274
276
  else if (props.isHovered) rules += ' -_375toh_b-_____x';
275
- else if (props.variant === "genai") rules += ' -_375toh_b-n';
276
- else if (props.variant === "premium") rules += ' -_375toh_b-n';
277
+ else if (props.variant === "genai") rules += ' -_375toh_b-_____x';
278
+ else if (props.variant === "premium") rules += ' -_375toh_b-_____x';
277
279
  else rules += ' -_375toh_b-a';
278
280
  } else if (props.fillStyle === "fill") {
279
281
  if (props.isDisabled) rules += ' -_375toh_b-_____x';
280
- else if (props.variant === "genai") rules += ' -_375toh_b-n';
281
- else if (props.variant === "premium") rules += ' -_375toh_b-n';
282
+ else if (props.variant === "genai") rules += ' -_375toh_b-_____x';
283
+ else if (props.variant === "premium") rules += ' -_375toh_b-_____x';
282
284
  else if (props.variant === "secondary") {
283
285
  if (props.isPressed) rules += ' -_375toh_b-_____y';
284
286
  else if (props.isFocusVisible) rules += ' -_375toh_b-_____y';
@@ -292,8 +294,11 @@ const $25d06cf8d4e72761$var$button = function anonymous(props, overrides) {
292
294
  }
293
295
  }
294
296
  } else if (props.fillStyle === "outline") {
295
- if (props.isDisabled) rules += ' -_375toh_b-a';
296
- else if (props.isFocusVisible) rules += ' -_375toh_b-g';
297
+ if (props.isDisabled) {
298
+ if (props.variant === "genai") rules += ' -_375toh_b-g';
299
+ else if (props.variant === "premium") rules += ' -_375toh_b-g';
300
+ else rules += ' -_375toh_b-a';
301
+ } else if (props.isFocusVisible) rules += ' -_375toh_b-g';
297
302
  else if (props.isPressed) rules += ' -_375toh_b-g';
298
303
  else if (props.isHovered) rules += ' -_375toh_b-g';
299
304
  else if (props.variant === "genai") rules += ' -_375toh_b-g';
@@ -378,9 +383,9 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
378
383
  let rules = " .";
379
384
  rules += ' E-1gogtue';
380
385
  rules += ' F-1gogtue';
381
- rules += ' __A-3t1y';
382
- if (props.isProgressVisible) rules += ' _K-3t1x';
383
- else rules += ' _K-3t1y';
386
+ rules += ' __B-3t1y';
387
+ if (props.isProgressVisible) rules += ' _L-3t1x';
388
+ else rules += ' _L-3t1y';
384
389
  return rules;
385
390
  }({
386
391
  isProgressVisible: isProgressVisible
@@ -394,16 +399,16 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
394
399
  {
395
400
  render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
396
401
  slot: 'icon',
397
- styles: " . __A-3t1x"
402
+ styles: " . __B-3t1x"
398
403
  }),
399
404
  styles: function anonymous(props) {
400
405
  let rules = " .";
401
406
  rules += ' l-1sthc3k';
402
407
  rules += ' k-1sthc3k';
403
408
  rules += ' y-oelgqu';
404
- rules += ' _8-3t1x';
405
- if (props.isProgressVisible) rules += ' _K-3t1x';
406
- else rules += ' _K-3t1y';
409
+ rules += ' _9-3t1x';
410
+ if (props.isProgressVisible) rules += ' _L-3t1x';
411
+ else rules += ' _L-3t1y';
407
412
  return rules;
408
413
  }({
409
414
  isProgressVisible: isProgressVisible
@@ -418,12 +423,12 @@ const $25d06cf8d4e72761$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $8owBJ$react
418
423
  isPending && /*#__PURE__*/ (0, $8owBJ$reactjsxruntime.jsx)("div", {
419
424
  className: function anonymous(props) {
420
425
  let rules = " .";
421
- rules += ' Ua';
422
- rules += ' X-3760fj';
426
+ rules += ' Va';
423
427
  rules += ' Y-3760fj';
424
- rules += ' T-1tktoou';
425
- if (props.isProgressVisible) rules += ' _K-3t1y';
426
- else rules += ' _K-3t1x';
428
+ rules += ' Z-3760fj';
429
+ rules += ' U-1tktoou';
430
+ if (props.isProgressVisible) rules += ' _L-3t1y';
431
+ else rules += ' _L-3t1x';
427
432
  return rules;
428
433
  }({
429
434
  isProgressVisible: isProgressVisible,
@@ -483,7 +488,7 @@ const $25d06cf8d4e72761$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $8owBJ$react
483
488
  [
484
489
  (0, $6367bc87eb7d24ad$exports.TextContext),
485
490
  {
486
- styles: " . E-1gogtue F-1gogtue __A-3t1y",
491
+ styles: " . E-1gogtue F-1gogtue __B-3t1y",
487
492
  // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past
488
493
  'data-rsp-slot': 'text'
489
494
  }
@@ -493,9 +498,9 @@ const $25d06cf8d4e72761$export$29d11c0fe2fc51d8 = /*#__PURE__*/ (0, $8owBJ$react
493
498
  {
494
499
  render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
495
500
  slot: 'icon',
496
- styles: " . __A-3t1x"
501
+ styles: " . __B-3t1x"
497
502
  }),
498
- styles: " . l-1sthc3k k-1sthc3k y-oelgqu _8-3t1x"
503
+ styles: " . l-1sthc3k k-1sthc3k y-oelgqu _9-3t1x"
499
504
  }
500
505
  ]
501
506
  ],
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n /**\n * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n *\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai',\n /**\n * The background style of the Button.\n *\n * @default 'fill'\n */\n fillStyle?: 'fill' | 'outline',\n /**\n * The size of the Button.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the Button appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n /** The content to display in the Button. */\n children?: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n /** The content to display in the Button. */\n children?: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n position: 'relative',\n display: 'flex',\n alignItems: {\n default: 'baseline',\n [iconOnly]: 'center'\n },\n justifyContent: 'center',\n textAlign: 'start',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'bold',\n userSelect: 'none',\n minHeight: 'control',\n minWidth: {\n [iconOnly]: 'control'\n },\n borderRadius: 'pill',\n boxSizing: 'border-box',\n width: 'fit',\n textDecoration: 'none', // for link buttons\n paddingX: {\n default: 'pill',\n [iconOnly]: 0\n },\n paddingY: 0,\n aspectRatio: {\n [iconOnly]: 'square'\n },\n transition: 'default',\n borderStyle: 'solid',\n borderWidth: {\n fillStyle: {\n fill: 0,\n outline: 2\n },\n variant: {\n premium: 0,\n genai: 0\n }\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n borderColor: {\n variant: {\n primary: baseColor('gray-800'),\n secondary: baseColor('gray-300')\n },\n isDisabled: 'disabled',\n isStaticColor: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-300')\n },\n isDisabled: 'transparent-overlay-300'\n },\n forcedColors: {\n default: 'ButtonBorder',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n backgroundImage: {\n variant: {\n premium: {\n default: linearGradient('96deg', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n isHovered: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isPressed: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isFocusVisible: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n },\n genai: {\n default: linearGradient('96deg', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n isHovered: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isPressed: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isFocusVisible: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n }\n },\n isDisabled: 'none',\n isPending: 'none',\n forcedColors: 'none'\n },\n backgroundColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'neutral',\n secondary: baseColor('gray-100'),\n accent: 'accent',\n negative: 'negative',\n premium: 'gray-100',\n genai: 'gray-100'\n },\n isDisabled: 'disabled'\n },\n outline: {\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n },\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isFocusVisible: 'gray-100',\n isDisabled: 'transparent'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-100'),\n premium: 'gray-800',\n genai: 'gray-800'\n },\n isDisabled: 'transparent-overlay-100'\n },\n outline: {\n variant: {\n premium: 'gray-800',\n genai: 'gray-800'\n },\n default: 'transparent',\n isHovered: 'transparent-overlay-100',\n isPressed: 'transparent-overlay-100',\n isFocusVisible: 'transparent-overlay-100',\n isDisabled: 'transparent'\n }\n }\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n },\n outline: 'ButtonFace'\n }\n }\n },\n color: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'gray-25',\n secondary: 'neutral',\n accent: 'white',\n negative: 'white',\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n },\n outline: {\n default: 'neutral',\n variant: {\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'auto',\n secondary: baseColor('transparent-overlay-800'),\n premium: 'white',\n genai: 'white'\n }\n },\n outline: {\n variant: {\n premium: 'white',\n genai: 'white'\n },\n default: baseColor('transparent-overlay-800')\n }\n },\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonFace',\n isDisabled: 'HighlightText'\n },\n outline: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n forcedColorAdjust: 'none',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isPending,\n variant = 'primary',\n fillStyle = 'fill',\n size = 'M',\n staticColor\n } = props;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. */\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n isDisabled: renderProps.isDisabled || isProgressVisible,\n variant,\n fillStyle,\n size,\n staticColor,\n isStaticColor: !!staticColor\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({\n paddingY: '--labelPadding',\n order: 1,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n flexShrink: 0,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending &&\n <div\n className={style({\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translate(-50%, -50%)',\n opacity: {\n default: 0,\n isProgressVisible: 1\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})} />\n </div>\n }\n </Provider>\n </RACButton>\n );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n props = useFormProps(props);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <Link\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n variant: props.variant || 'primary',\n fillStyle: props.fillStyle || 'fill',\n size: props.size || 'M',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor,\n isPending: false\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({paddingY: '--labelPadding', order: 1}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </Link>\n );\n});\n"],"names":[],"version":3,"file":"Button.cjs.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Button.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {baseColor, focusRing, fontRelative, linearGradient, style} from '../style' with {type: 'macro'};\nimport {ButtonRenderProps, ContextValue, Link, LinkProps, OverlayTriggerStateContext, Provider, Button as RACButton, ButtonProps as RACButtonProps} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with {type: 'macro'};\nimport {createContext, forwardRef, ReactNode, useContext, useEffect, useState} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {pressScale} from './pressScale';\nimport {ProgressCircle} from './ProgressCircle';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\ninterface ButtonStyleProps {\n /**\n * The [visual style](https://spectrum.adobe.com/page/button/#Options) of the button.\n *\n * @default 'primary'\n */\n variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai',\n /**\n * The background style of the Button.\n *\n * @default 'fill'\n */\n fillStyle?: 'fill' | 'outline',\n /**\n * The size of the Button.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the Button appears over a color background. */\n staticColor?: 'white' | 'black' | 'auto'\n}\n\nexport interface ButtonProps extends Omit<RACButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, StyleProps, ButtonStyleProps {\n /** The content to display in the Button. */\n children?: ReactNode\n}\n\nexport interface LinkButtonProps extends Omit<LinkProps, 'className' | 'style' | 'children'>, StyleProps, ButtonStyleProps {\n /** The content to display in the Button. */\n children?: ReactNode\n}\n\nexport const ButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLButtonElement>>>(null);\nexport const LinkButtonContext = createContext<ContextValue<ButtonProps, FocusableRefValue<HTMLAnchorElement>>>(null);\n\nconst iconOnly = ':has([slot=icon]):not(:has([data-rsp-slot=text]))';\nconst button = style<ButtonRenderProps & ButtonStyleProps & {isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n position: 'relative',\n display: 'flex',\n alignItems: {\n default: 'baseline',\n [iconOnly]: 'center'\n },\n justifyContent: 'center',\n textAlign: 'start',\n columnGap: 'text-to-visual',\n font: 'control',\n fontWeight: 'bold',\n userSelect: 'none',\n minHeight: 'control',\n minWidth: {\n [iconOnly]: 'control'\n },\n borderRadius: 'pill',\n boxSizing: 'border-box',\n width: 'fit',\n textDecoration: 'none', // for link buttons\n paddingX: {\n default: 'pill',\n [iconOnly]: 0\n },\n paddingY: 0,\n aspectRatio: {\n [iconOnly]: 'square'\n },\n transition: 'default',\n borderStyle: 'solid',\n borderWidth: {\n fillStyle: {\n fill: 0,\n outline: 2\n },\n variant: {\n premium: 0,\n genai: 0\n }\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n borderColor: {\n variant: {\n primary: baseColor('gray-800'),\n secondary: baseColor('gray-300')\n },\n isDisabled: 'disabled',\n isStaticColor: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-300')\n },\n isDisabled: 'transparent-overlay-300'\n },\n forcedColors: {\n default: 'ButtonBorder',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n backgroundImage: {\n variant: {\n premium: {\n default: linearGradient('96deg', ['fuchsia-900', 0], ['indigo-900', 66], ['blue-900', 100]),\n isHovered: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isPressed: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100]),\n isFocusVisible: linearGradient('96deg', ['fuchsia-1000', 0], ['indigo-1000', 66], ['blue-1000', 100])\n },\n genai: {\n default: linearGradient('96deg', ['red-900', 0], ['magenta-900', 33], ['indigo-900', 100]),\n isHovered: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isPressed: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100]),\n isFocusVisible: linearGradient('96deg', ['red-1000', 0], ['magenta-1000', 33], ['indigo-1000', 100])\n }\n },\n isDisabled: 'none',\n forcedColors: 'none'\n },\n backgroundColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'neutral',\n secondary: baseColor('gray-100'),\n accent: 'accent',\n negative: 'negative',\n premium: 'gray-100',\n genai: 'gray-100'\n },\n isDisabled: 'disabled'\n },\n outline: {\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n },\n default: 'transparent',\n isHovered: 'gray-100',\n isPressed: 'gray-100',\n isFocusVisible: 'gray-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'gray-100',\n genai: 'gray-100'\n }\n }\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: baseColor('transparent-overlay-800'),\n secondary: baseColor('transparent-overlay-100'),\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n isDisabled: 'transparent-overlay-100'\n },\n outline: {\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n },\n default: 'transparent',\n isHovered: 'transparent-overlay-100',\n isPressed: 'transparent-overlay-100',\n isFocusVisible: 'transparent-overlay-100',\n isDisabled: {\n default: 'transparent',\n variant: {\n premium: 'transparent-overlay-100',\n genai: 'transparent-overlay-100'\n }\n }\n }\n }\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonText',\n isHovered: 'Highlight',\n isDisabled: 'GrayText'\n },\n outline: 'ButtonFace'\n }\n }\n },\n color: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'gray-25',\n secondary: 'neutral',\n accent: 'white',\n negative: 'white',\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n },\n outline: {\n default: 'neutral',\n variant: {\n premium: 'white',\n genai: 'white'\n },\n isDisabled: 'disabled'\n }\n },\n isStaticColor: {\n fillStyle: {\n fill: {\n variant: {\n primary: 'auto',\n secondary: baseColor('transparent-overlay-800'),\n premium: 'white',\n genai: 'white'\n }\n },\n outline: {\n variant: {\n premium: 'white',\n genai: 'white'\n },\n default: baseColor('transparent-overlay-800')\n }\n },\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n fillStyle: {\n fill: {\n default: 'ButtonFace',\n isDisabled: 'HighlightText'\n },\n outline: {\n default: 'ButtonText',\n isDisabled: 'GrayText'\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n outlineColor: {\n default: 'focus-ring',\n isStaticColor: 'transparent-overlay-1000',\n forcedColors: 'Highlight'\n },\n forcedColorAdjust: 'none',\n disableTapHighlight: true\n}, getAllowedOverrides());\n\n/**\n * Buttons allow users to perform an action.\n * They have multiple styles for various needs, and are ideal for calling attention to\n * where a user needs to do something in order to move forward in a flow.\n */\nexport const Button = forwardRef(function Button(props: ButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ButtonContext);\n props = useFormProps(props);\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isPending,\n variant = 'primary',\n fillStyle = 'fill',\n size = 'M',\n staticColor\n } = props;\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n let [isProgressVisible, setIsProgressVisible] = useState(false);\n useEffect(() => {\n let timeout: ReturnType<typeof setTimeout>;\n\n if (isPending) {\n // Start timer when isPending is set to true.\n timeout = setTimeout(() => {\n setIsProgressVisible(true);\n }, 1000);\n } else {\n // Exit loading state when isPending is set to false. */\n setIsProgressVisible(false);\n }\n return () => {\n // Clean up on unmount or when user removes isPending prop before entering loading state.\n clearTimeout(timeout);\n };\n }, [isPending]);\n\n return (\n <RACButton\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n isDisabled: renderProps.isDisabled || isProgressVisible,\n variant,\n fillStyle,\n size,\n staticColor,\n isStaticColor: !!staticColor\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({\n paddingY: '--labelPadding',\n order: 1,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({\n size: fontRelative(20),\n marginStart: '--iconMargin',\n flexShrink: 0,\n opacity: {\n default: 1,\n isProgressVisible: 0\n }\n })({isProgressVisible})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n {isPending &&\n <div\n className={style({\n position: 'absolute',\n top: '[50%]',\n left: '[50%]',\n transform: 'translate(-50%, -50%)',\n opacity: {\n default: 0,\n isProgressVisible: 1\n }\n })({isProgressVisible, isPending})}>\n <ProgressCircle\n isIndeterminate\n aria-label={stringFormatter.format('button.pending')}\n size=\"S\"\n staticColor={staticColor}\n styles={style({\n size: {\n size: {\n S: 14,\n M: 18,\n L: 20,\n XL: 24\n }\n }\n })({size})} />\n </div>\n }\n </Provider>\n </RACButton>\n );\n});\n\n/**\n * A LinkButton combines the functionality of a link with the appearance of a button. Useful for allowing users to navigate to another page.\n */\nexport const LinkButton = forwardRef(function LinkButton(props: LinkButtonProps, ref: FocusableRef<HTMLAnchorElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, LinkButtonContext);\n props = useFormProps(props);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n\n return (\n <Link\n {...props}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + button({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n variant: props.variant || 'primary',\n fillStyle: props.fillStyle || 'fill',\n size: props.size || 'M',\n staticColor: props.staticColor,\n isStaticColor: !!props.staticColor,\n isPending: false\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {\n styles: style({paddingY: '--labelPadding', order: 1}),\n // @ts-ignore data-attributes allowed on all JSX elements, but adding to DOMProps has been problematic in the past\n 'data-rsp-slot': 'text'\n }],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </Link>\n );\n});\n"],"names":[],"version":3,"file":"Button.cjs.map"}