@react-spectrum/s2 0.9.0 → 0.9.2

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 (272) hide show
  1. package/dist/Accordion.cjs +2 -2
  2. package/dist/Accordion.css +2 -2
  3. package/dist/Accordion.mjs +2 -2
  4. package/dist/ActionBar.cjs +60 -60
  5. package/dist/ActionBar.css +59 -59
  6. package/dist/ActionBar.mjs +60 -60
  7. package/dist/ActionButton.cjs +187 -187
  8. package/dist/ActionButton.cjs.map +1 -1
  9. package/dist/ActionButton.css +134 -134
  10. package/dist/ActionButton.css.map +1 -1
  11. package/dist/ActionButton.mjs +187 -187
  12. package/dist/ActionButton.mjs.map +1 -1
  13. package/dist/ActionButtonGroup.cjs +15 -15
  14. package/dist/ActionButtonGroup.css +9 -9
  15. package/dist/ActionButtonGroup.mjs +15 -15
  16. package/dist/Add.cjs +10 -10
  17. package/dist/Add.css +6 -6
  18. package/dist/Add.mjs +10 -10
  19. package/dist/AlertDialog.cjs +3 -3
  20. package/dist/AlertDialog.css +3 -3
  21. package/dist/AlertDialog.mjs +3 -3
  22. package/dist/Asterisk.cjs +6 -6
  23. package/dist/Asterisk.css +4 -4
  24. package/dist/Asterisk.mjs +6 -6
  25. package/dist/Avatar.cjs +14 -14
  26. package/dist/Avatar.css +14 -14
  27. package/dist/Avatar.mjs +14 -14
  28. package/dist/AvatarGroup.cjs +120 -120
  29. package/dist/AvatarGroup.css +37 -37
  30. package/dist/AvatarGroup.mjs +120 -120
  31. package/dist/Badge.cjs +196 -196
  32. package/dist/Badge.css +129 -129
  33. package/dist/Badge.mjs +196 -196
  34. package/dist/Breadcrumbs.cjs +231 -231
  35. package/dist/Breadcrumbs.css +102 -102
  36. package/dist/Breadcrumbs.mjs +231 -231
  37. package/dist/Button.cjs +328 -328
  38. package/dist/Button.cjs.map +1 -1
  39. package/dist/Button.css +176 -176
  40. package/dist/Button.css.map +1 -1
  41. package/dist/Button.mjs +328 -328
  42. package/dist/Button.mjs.map +1 -1
  43. package/dist/ButtonGroup.cjs +20 -20
  44. package/dist/ButtonGroup.css +15 -15
  45. package/dist/ButtonGroup.mjs +20 -20
  46. package/dist/Card.cjs +294 -294
  47. package/dist/Card.css +205 -205
  48. package/dist/Card.mjs +294 -294
  49. package/dist/CardView.cjs +17 -17
  50. package/dist/CardView.css +17 -17
  51. package/dist/CardView.mjs +17 -17
  52. package/dist/CenterBaseline.cjs +1 -1
  53. package/dist/CenterBaseline.css +2 -2
  54. package/dist/CenterBaseline.mjs +1 -1
  55. package/dist/Checkbox.cjs +160 -160
  56. package/dist/Checkbox.css +94 -94
  57. package/dist/Checkbox.mjs +160 -160
  58. package/dist/CheckboxGroup.cjs +43 -43
  59. package/dist/CheckboxGroup.css +41 -41
  60. package/dist/CheckboxGroup.mjs +43 -43
  61. package/dist/Checkmark.cjs +12 -12
  62. package/dist/Checkmark.css +8 -8
  63. package/dist/Checkmark.mjs +12 -12
  64. package/dist/Chevron.cjs +12 -12
  65. package/dist/Chevron.css +10 -10
  66. package/dist/Chevron.mjs +12 -12
  67. package/dist/ClearButton.cjs +29 -29
  68. package/dist/ClearButton.css +29 -29
  69. package/dist/ClearButton.mjs +29 -29
  70. package/dist/CloseButton.cjs +54 -54
  71. package/dist/CloseButton.css +46 -46
  72. package/dist/CloseButton.mjs +54 -54
  73. package/dist/ColorArea.cjs +16 -16
  74. package/dist/ColorArea.css +16 -16
  75. package/dist/ColorArea.mjs +16 -16
  76. package/dist/ColorField.cjs +31 -31
  77. package/dist/ColorField.css +31 -31
  78. package/dist/ColorField.mjs +31 -31
  79. package/dist/ColorHandle.cjs +27 -27
  80. package/dist/ColorHandle.css +42 -42
  81. package/dist/ColorHandle.mjs +27 -27
  82. package/dist/ColorSlider.cjs +108 -108
  83. package/dist/ColorSlider.css +56 -56
  84. package/dist/ColorSlider.mjs +108 -108
  85. package/dist/ColorSwatch.cjs +29 -29
  86. package/dist/ColorSwatch.css +29 -29
  87. package/dist/ColorSwatch.mjs +29 -29
  88. package/dist/ColorSwatchPicker.cjs +27 -27
  89. package/dist/ColorSwatchPicker.css +46 -46
  90. package/dist/ColorSwatchPicker.mjs +27 -27
  91. package/dist/ColorWheel.cjs +26 -26
  92. package/dist/ColorWheel.css +17 -17
  93. package/dist/ColorWheel.mjs +26 -26
  94. package/dist/ComboBox.cjs +378 -376
  95. package/dist/ComboBox.cjs.map +1 -1
  96. package/dist/ComboBox.css +179 -179
  97. package/dist/ComboBox.css.map +1 -1
  98. package/dist/ComboBox.mjs +378 -376
  99. package/dist/ComboBox.mjs.map +1 -1
  100. package/dist/ContextualHelp.cjs +5 -5
  101. package/dist/ContextualHelp.cjs.map +1 -1
  102. package/dist/ContextualHelp.css +49 -49
  103. package/dist/ContextualHelp.css.map +1 -1
  104. package/dist/ContextualHelp.mjs +5 -5
  105. package/dist/ContextualHelp.mjs.map +1 -1
  106. package/dist/Cross.cjs +14 -14
  107. package/dist/Cross.css +10 -10
  108. package/dist/Cross.mjs +14 -14
  109. package/dist/CustomDialog.cjs +25 -25
  110. package/dist/CustomDialog.css +25 -25
  111. package/dist/CustomDialog.mjs +25 -25
  112. package/dist/Dash.cjs +10 -10
  113. package/dist/Dash.css +6 -6
  114. package/dist/Dash.mjs +10 -10
  115. package/dist/Dialog.cjs +17 -17
  116. package/dist/Dialog.css +70 -70
  117. package/dist/Dialog.mjs +17 -17
  118. package/dist/Disclosure.cjs +129 -129
  119. package/dist/Disclosure.css +104 -104
  120. package/dist/Disclosure.mjs +129 -129
  121. package/dist/Divider.cjs +25 -25
  122. package/dist/Divider.css +25 -25
  123. package/dist/Divider.mjs +25 -25
  124. package/dist/DropZone.cjs +58 -58
  125. package/dist/DropZone.css +54 -54
  126. package/dist/DropZone.mjs +58 -58
  127. package/dist/Field.cjs +340 -340
  128. package/dist/Field.cjs.map +1 -1
  129. package/dist/Field.css +144 -144
  130. package/dist/Field.mjs +340 -340
  131. package/dist/Field.mjs.map +1 -1
  132. package/dist/Form.cjs +9 -9
  133. package/dist/Form.css +9 -9
  134. package/dist/Form.mjs +9 -9
  135. package/dist/FullscreenDialog.cjs +5 -5
  136. package/dist/FullscreenDialog.css +79 -79
  137. package/dist/FullscreenDialog.mjs +5 -5
  138. package/dist/IllustratedMessage.cjs +219 -219
  139. package/dist/IllustratedMessage.css +74 -74
  140. package/dist/IllustratedMessage.mjs +219 -219
  141. package/dist/Image.cjs +14 -14
  142. package/dist/Image.cjs.map +1 -1
  143. package/dist/Image.css +14 -14
  144. package/dist/Image.css.map +1 -1
  145. package/dist/Image.mjs +14 -14
  146. package/dist/Image.mjs.map +1 -1
  147. package/dist/InlineAlert.cjs +108 -108
  148. package/dist/InlineAlert.css +90 -90
  149. package/dist/InlineAlert.mjs +108 -108
  150. package/dist/Link.cjs +49 -49
  151. package/dist/Link.css +41 -41
  152. package/dist/Link.mjs +49 -49
  153. package/dist/LinkOut.cjs +8 -8
  154. package/dist/LinkOut.css +8 -8
  155. package/dist/LinkOut.mjs +8 -8
  156. package/dist/Menu.cjs +422 -422
  157. package/dist/Menu.css +180 -180
  158. package/dist/Menu.mjs +422 -422
  159. package/dist/Meter.cjs +153 -153
  160. package/dist/Meter.css +95 -95
  161. package/dist/Meter.mjs +153 -153
  162. package/dist/Modal.cjs +58 -58
  163. package/dist/Modal.css +50 -50
  164. package/dist/Modal.mjs +58 -58
  165. package/dist/NotificationBadge.cjs +56 -56
  166. package/dist/NotificationBadge.css +51 -51
  167. package/dist/NotificationBadge.mjs +56 -56
  168. package/dist/NumberField.cjs +114 -118
  169. package/dist/NumberField.cjs.map +1 -1
  170. package/dist/NumberField.css +103 -103
  171. package/dist/NumberField.css.map +1 -1
  172. package/dist/NumberField.mjs +115 -119
  173. package/dist/NumberField.mjs.map +1 -1
  174. package/dist/Picker.cjs +273 -271
  175. package/dist/Picker.cjs.map +1 -1
  176. package/dist/Picker.css +169 -169
  177. package/dist/Picker.css.map +1 -1
  178. package/dist/Picker.mjs +273 -271
  179. package/dist/Picker.mjs.map +1 -1
  180. package/dist/Popover.cjs +85 -85
  181. package/dist/Popover.css +66 -66
  182. package/dist/Popover.mjs +85 -85
  183. package/dist/ProgressBar.cjs +163 -163
  184. package/dist/ProgressBar.css +103 -103
  185. package/dist/ProgressBar.mjs +163 -163
  186. package/dist/ProgressCircle.cjs +17 -17
  187. package/dist/ProgressCircle.css +17 -17
  188. package/dist/ProgressCircle.mjs +17 -17
  189. package/dist/Provider.cjs +10 -10
  190. package/dist/Provider.css +9 -9
  191. package/dist/Provider.mjs +10 -10
  192. package/dist/Radio.cjs +144 -144
  193. package/dist/Radio.css +81 -81
  194. package/dist/Radio.mjs +144 -144
  195. package/dist/RadioGroup.cjs +41 -41
  196. package/dist/RadioGroup.css +41 -41
  197. package/dist/RadioGroup.mjs +41 -41
  198. package/dist/SearchField.cjs +41 -41
  199. package/dist/SearchField.css +49 -49
  200. package/dist/SearchField.mjs +41 -41
  201. package/dist/SegmentedControl.cjs +171 -171
  202. package/dist/SegmentedControl.css +120 -120
  203. package/dist/SegmentedControl.mjs +171 -171
  204. package/dist/Slider.cjs +288 -288
  205. package/dist/Slider.css +152 -152
  206. package/dist/Slider.mjs +288 -288
  207. package/dist/StatusLight.cjs +115 -115
  208. package/dist/StatusLight.css +63 -63
  209. package/dist/StatusLight.mjs +115 -115
  210. package/dist/Switch.cjs +152 -152
  211. package/dist/Switch.css +76 -76
  212. package/dist/Switch.mjs +152 -152
  213. package/dist/TableView.cjs +310 -310
  214. package/dist/TableView.css +172 -172
  215. package/dist/TableView.mjs +310 -310
  216. package/dist/Tabs.cjs +113 -110
  217. package/dist/Tabs.cjs.map +1 -1
  218. package/dist/Tabs.css +92 -92
  219. package/dist/Tabs.css.map +1 -1
  220. package/dist/Tabs.mjs +113 -110
  221. package/dist/Tabs.mjs.map +1 -1
  222. package/dist/TabsPicker.cjs +123 -123
  223. package/dist/TabsPicker.css +112 -112
  224. package/dist/TabsPicker.mjs +123 -123
  225. package/dist/TagGroup.cjs +202 -202
  226. package/dist/TagGroup.cjs.map +1 -1
  227. package/dist/TagGroup.css +147 -147
  228. package/dist/TagGroup.css.map +1 -1
  229. package/dist/TagGroup.mjs +202 -202
  230. package/dist/TagGroup.mjs.map +1 -1
  231. package/dist/TextField.cjs +57 -57
  232. package/dist/TextField.css +57 -57
  233. package/dist/TextField.mjs +57 -57
  234. package/dist/Toast.cjs +118 -118
  235. package/dist/Toast.css +105 -105
  236. package/dist/Toast.mjs +118 -118
  237. package/dist/ToggleButton.cjs +3 -3
  238. package/dist/ToggleButton.css +12 -12
  239. package/dist/ToggleButton.mjs +3 -3
  240. package/dist/Tooltip.cjs +81 -81
  241. package/dist/Tooltip.css +68 -68
  242. package/dist/Tooltip.mjs +81 -81
  243. package/dist/TreeView.cjs +143 -149
  244. package/dist/TreeView.cjs.map +1 -1
  245. package/dist/TreeView.css +143 -143
  246. package/dist/TreeView.css.map +1 -1
  247. package/dist/TreeView.mjs +143 -149
  248. package/dist/TreeView.mjs.map +1 -1
  249. package/dist/types.d.ts +2 -2
  250. package/dist/types.d.ts.map +1 -1
  251. package/icons/Icon.cjs +10 -10
  252. package/icons/Icon.css +9 -9
  253. package/icons/Icon.mjs +10 -10
  254. package/icons/Skeleton.cjs +4 -3
  255. package/icons/Skeleton.cjs.map +1 -1
  256. package/icons/Skeleton.css +6 -6
  257. package/icons/Skeleton.css.map +1 -1
  258. package/icons/Skeleton.mjs +4 -3
  259. package/icons/Skeleton.mjs.map +1 -1
  260. package/package.json +45 -26
  261. package/src/ActionButton.tsx +1 -1
  262. package/src/Button.tsx +3 -3
  263. package/src/ComboBox.tsx +3 -2
  264. package/src/ContextualHelp.tsx +2 -2
  265. package/src/Image.tsx +1 -1
  266. package/src/NumberField.tsx +0 -2
  267. package/src/Picker.tsx +3 -2
  268. package/src/Skeleton.tsx +2 -1
  269. package/src/Tabs.tsx +7 -5
  270. package/src/TagGroup.tsx +1 -1
  271. package/src/TreeView.tsx +1 -6
  272. package/style/__tests__/style-macro.test.js +56 -56
@@ -126,236 +126,236 @@ const $6e265ff388155b91$export$446543cff2a0f496 = function anonymous(props, over
126
126
  if (p[1] === "_9") zIndex = true;
127
127
  rules += p[0];
128
128
  }
129
- if (props.isFocusVisible) rules += ' _Lf9';
130
- else rules += ' _Le9';
131
- if (props.isStaticColor) rules += ' Oe9';
132
- else rules += ' Oh9';
133
- rules += ' Olc9';
134
- rules += ' _Mc9';
135
- rules += ' _Kd9';
136
- if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr9';
137
- else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s9';
129
+ if (props.isFocusVisible) rules += ' _Lf91';
130
+ else rules += ' _Le91';
131
+ if (props.isStaticColor) rules += ' Oe91';
132
+ else rules += ' Oh91';
133
+ rules += ' Olc91';
134
+ rules += ' _Mc91';
135
+ rules += ' _Kd91';
136
+ if (props.staticColor === "white") rules += ' -Ovbhqd-gcwrnr91';
137
+ else if (props.staticColor === "black") rules += ' -Ovbhqd-g4hn3s91';
138
138
  if (props.size === "XL") {
139
- rules += ' ug9';
140
- rules += ' uch9';
141
- rules += ' udi9';
142
- rules += ' uea9';
143
- rules += ' ugb9';
144
- rules += ' uhd9';
145
- rules += ' uje9';
146
- rules += ' uic9';
139
+ rules += ' ug91';
140
+ rules += ' uch91';
141
+ rules += ' udi91';
142
+ rules += ' uea91';
143
+ rules += ' ugb91';
144
+ rules += ' uhd91';
145
+ rules += ' uje91';
146
+ rules += ' uic91';
147
147
  } else if (props.size === "L") {
148
- rules += ' ug9';
149
- rules += ' uch9';
150
- rules += ' udi9';
151
- rules += ' uea9';
152
- rules += ' ugb9';
153
- rules += ' uhd9';
154
- rules += ' uje9';
155
- rules += ' uic9';
148
+ rules += ' ug91';
149
+ rules += ' uch91';
150
+ rules += ' udi91';
151
+ rules += ' uea91';
152
+ rules += ' ugb91';
153
+ rules += ' uhd91';
154
+ rules += ' uje91';
155
+ rules += ' uic91';
156
156
  } else if (props.size === "S") {
157
- rules += ' ug9';
158
- rules += ' uch9';
159
- rules += ' udi9';
160
- rules += ' uea9';
161
- rules += ' ugb9';
162
- rules += ' uhd9';
163
- rules += ' uje9';
164
- rules += ' uic9';
157
+ rules += ' ug91';
158
+ rules += ' uch91';
159
+ rules += ' udi91';
160
+ rules += ' uea91';
161
+ rules += ' ugb91';
162
+ rules += ' uhd91';
163
+ rules += ' uje91';
164
+ rules += ' uic91';
165
165
  } else if (props.size === "XS") {
166
- rules += ' ug9';
167
- rules += ' uch9';
168
- rules += ' udi9';
169
- rules += ' uea9';
170
- rules += ' ugb9';
171
- rules += ' uhd9';
172
- rules += ' uje9';
173
- rules += ' uic9';
166
+ rules += ' ug91';
167
+ rules += ' uch91';
168
+ rules += ' udi91';
169
+ rules += ' uea91';
170
+ rules += ' ugb91';
171
+ rules += ' uhd91';
172
+ rules += ' uje91';
173
+ rules += ' uic91';
174
174
  } else {
175
- rules += ' ug9';
176
- rules += ' uch9';
177
- rules += ' udi9';
178
- rules += ' uea9';
179
- rules += ' ugb9';
180
- rules += ' uhd9';
181
- rules += ' uje9';
182
- rules += ' uic9';
175
+ rules += ' ug91';
176
+ rules += ' uch91';
177
+ rules += ' udi91';
178
+ rules += ' uea91';
179
+ rules += ' ugb91';
180
+ rules += ' uhd91';
181
+ rules += ' uje91';
182
+ rules += ' uic91';
183
183
  }
184
184
  if (props.size === "XL") {
185
- rules += ' vg9';
186
- rules += ' vsj9';
185
+ rules += ' vg91';
186
+ rules += ' vsj91';
187
187
  } else if (props.size === "L") {
188
- rules += ' vp9';
189
- rules += ' vsh9';
188
+ rules += ' vp91';
189
+ rules += ' vsh91';
190
190
  } else if (props.size === "S") {
191
- rules += ' vb9';
192
- rules += ' vse9';
191
+ rules += ' vb91';
192
+ rules += ' vse91';
193
193
  } else if (props.size === "XS") {
194
- rules += ' va9';
195
- rules += ' vsc9';
194
+ rules += ' va91';
195
+ rules += ' vsc91';
196
196
  } else {
197
- rules += ' vd9';
198
- rules += ' vsf9';
197
+ rules += ' vd91';
198
+ rules += ' vsf91';
199
199
  }
200
- rules += ' wc9';
201
- rules += ' xc9';
202
- rules += ' _xa9';
200
+ rules += ' wc91';
201
+ rules += ' xc91';
202
+ rules += ' _xa91';
203
203
  if (props.size === "XL") {
204
- rules += ' _Fa9';
205
- rules += ' _Ffb9';
204
+ rules += ' _Fa91';
205
+ rules += ' _Ffb91';
206
206
  } else if (props.size === "L") {
207
- rules += ' _Fa9';
208
- rules += ' _Ffb9';
207
+ rules += ' _Fa91';
208
+ rules += ' _Ffb91';
209
209
  } else if (props.size === "S") {
210
- rules += ' _Fa9';
211
- rules += ' _Ffb9';
210
+ rules += ' _Fa91';
211
+ rules += ' _Ffb91';
212
212
  } else if (props.size === "XS") {
213
- rules += ' _Fa9';
214
- rules += ' _Ffb9';
213
+ rules += ' _Fa91';
214
+ rules += ' _Ffb91';
215
215
  } else {
216
- rules += ' _Fa9';
217
- rules += ' _Ffb9';
216
+ rules += ' _Fa91';
217
+ rules += ' _Ffb91';
218
218
  }
219
219
  if (props.isStaticColor) {
220
- if (props.isDisabled) rules += ' pi9';
221
- else if (props.isSelected) rules += ' ph9';
220
+ if (props.isDisabled) rules += ' pi91';
221
+ else if (props.isSelected) rules += ' ph91';
222
222
  else {
223
- if (props.isPressed) rules += ' pk9';
224
- else if (props.isFocusVisible) rules += ' pk9';
225
- else if (props.isHovered) rules += ' pk9';
226
- else rules += ' pj9';
223
+ if (props.isPressed) rules += ' pk91';
224
+ else if (props.isFocusVisible) rules += ' pk91';
225
+ else if (props.isHovered) rules += ' pk91';
226
+ else rules += ' pj91';
227
227
  }
228
- } else if (props.isDisabled) rules += ' pp9';
228
+ } else if (props.isDisabled) rules += ' pp91';
229
229
  else if (props.isSelected) {
230
- if (props.isEmphasized) rules += ' px9';
231
- else rules += ' pr9';
230
+ if (props.isEmphasized) rules += ' px91';
231
+ else rules += ' pr91';
232
232
  } else {
233
- if (props.isPressed) rules += ' po9';
234
- else if (props.isFocusVisible) rules += ' po9';
235
- else if (props.isHovered) rules += ' po9';
236
- else rules += ' pt9';
233
+ if (props.isPressed) rules += ' po91';
234
+ else if (props.isFocusVisible) rules += ' po91';
235
+ else if (props.isHovered) rules += ' po91';
236
+ else rules += ' pt91';
237
237
  }
238
- if (props.isDisabled) rules += ' plc9';
239
- else if (props.isSelected) rules += ' ple9';
240
- else rules += ' plb9';
241
- rules += ' sd9';
242
- rules += ' eb9';
243
- rules += ' _oa9';
244
- rules += ' SMBFGYc9';
245
- rules += ' Rv9';
246
- rules += ' RgLWx3bd9';
247
- if (!minWidth) rules += ' N7yFGYc9';
248
- if (props.size === "XL") rules += ' -SFnbic-_JaP8ec9';
249
- else if (props.size === "L") rules += ' -SFnbic-_J0K2hn9';
250
- else if (props.size === "S") rules += ' -SFnbic-_JJOW22b9';
251
- else if (props.size === "XS") rules += ' -SFnbic-_JICefdd9';
252
- else rules += ' -SFnbic-_Jb9';
253
- rules += ' -Bu7z1c-ob9';
238
+ if (props.isDisabled) rules += ' plc91';
239
+ else if (props.isSelected) rules += ' ple91';
240
+ else rules += ' plb91';
241
+ rules += ' sd91';
242
+ rules += ' eb91';
243
+ rules += ' _oa91';
244
+ rules += ' SMBFGYc91';
245
+ rules += ' Rv91';
246
+ rules += ' RgLWx3bd91';
247
+ if (!minWidth) rules += ' N7yFGYc91';
248
+ if (props.size === "XL") rules += ' -SFnbic-_JaP8ec91';
249
+ else if (props.size === "L") rules += ' -SFnbic-_J0K2hn91';
250
+ else if (props.size === "S") rules += ' -SFnbic-_JJOW22b91';
251
+ else if (props.size === "XS") rules += ' -SFnbic-_JICefdd91';
252
+ else rules += ' -SFnbic-_Jb91';
253
+ rules += ' -Bu7z1c-ob91';
254
254
  if (props.density === "compact") {
255
- rules += ' od9';
256
- rules += ' obj9';
257
- } else rules += ' oj9';
255
+ rules += ' od91';
256
+ rules += ' obj91';
257
+ } else rules += ' oj91';
258
258
  if (props.density === "compact") {
259
- if (props.orientation === "vertical") rules += ' nbj9';
260
- else if (props.orientation === "horizontal") rules += ' nkj9';
261
- else rules += ' nd9';
262
- } else rules += ' nj9';
259
+ if (props.orientation === "vertical") rules += ' nbj91';
260
+ else if (props.orientation === "horizontal") rules += ' nkj91';
261
+ else rules += ' nd91';
262
+ } else rules += ' nj91';
263
263
  if (props.density === "compact") {
264
- if (props.orientation === "vertical") rules += ' kkj9';
265
- else if (props.orientation === "horizontal") rules += ' kbj9';
266
- else rules += ' kd9';
267
- } else rules += ' kj9';
264
+ if (props.orientation === "vertical") rules += ' kkj91';
265
+ else if (props.orientation === "horizontal") rules += ' kbj91';
266
+ else rules += ' kd91';
267
+ } else rules += ' kj91';
268
268
  if (props.density === "compact") {
269
- rules += ' jd9';
270
- rules += ' jkj9';
271
- } else rules += ' jj9';
272
- rules += ' qc9';
273
- rules += ' qsd9';
274
- rules += ' -Qg41Lb-IAxCW0c9';
275
- rules += ' -Qg41Lb-gLWx3bIy9';
276
- rules += ' FRuFGYc9';
277
- rules += ' _Ca9';
269
+ rules += ' jd91';
270
+ rules += ' jkj91';
271
+ } else rules += ' jj91';
272
+ rules += ' qc91';
273
+ rules += ' qsd91';
274
+ rules += ' -Qg41Lb-IAxCW0c91';
275
+ rules += ' -Qg41Lb-gLWx3bIy91';
276
+ rules += ' FRuFGYc91';
277
+ rules += ' _Ca91';
278
278
  if (props.isInGroup) {
279
- if (!flexShrink) rules += ' _va9';
280
- } else if (!flexShrink) rules += ' _vb9';
279
+ if (!flexShrink) rules += ' _va91';
280
+ } else if (!flexShrink) rules += ' _vb91';
281
281
  if (props.isJustified) {
282
- if (!flexGrow) rules += ' _ub9';
282
+ if (!flexGrow) rules += ' _ub91';
283
283
  }
284
284
  if (props.isJustified) {
285
- if (!flexBasis) rules += ' _sb9';
285
+ if (!flexBasis) rules += ' _sb91';
286
286
  }
287
- rules += ' _4c9';
288
- rules += ' Yd9';
289
- rules += ' Xb9';
290
- rules += ' _2b9';
291
- rules += ' _yb9';
292
- rules += ' gqMFGYc9';
293
- rules += ' -_8sjo0b-t5ZbAob9';
294
- rules += ' _je9';
287
+ rules += ' _4c91';
288
+ rules += ' Yd91';
289
+ rules += ' Xb91';
290
+ rules += ' _2b91';
291
+ rules += ' _yb91';
292
+ rules += ' gqMFGYc91';
293
+ rules += ' -_8sjo0b-t5ZbAob91';
294
+ rules += ' _je91';
295
295
  if (props.isFocusVisible) {
296
- if (!zIndex) rules += ' _9d9';
296
+ if (!zIndex) rules += ' _9d91';
297
297
  }
298
- rules += ' __ca9';
299
- rules += ' -B5H9Ae-WXN7eQb9';
300
- rules += ' -B5H9Ae-wAP22cWr9';
301
- rules += ' -SqFa4c-ZuUmpre9';
302
- rules += ' -dcAs1c-ZaYffXd9';
303
- rules += ' -dcAs1c-y5UFLdZt9HF59';
304
- rules += ' -dcAs1c-wAP22cZa9';
305
- if (props.size === "XL") rules += ' -F_-Fz9';
306
- else if (props.size === "L") rules += ' -F_-Fv9';
307
- else if (props.size === "S") rules += ' -F_-Fp9';
308
- else if (props.size === "XS") rules += ' -F_-Fn9';
309
- else rules += ' -F_-Fx9';
298
+ rules += ' __ca91';
299
+ rules += ' -B5H9Ae-WXN7eQb91';
300
+ rules += ' -B5H9Ae-wAP22cWr91';
301
+ rules += ' -SqFa4c-ZuUmpre91';
302
+ rules += ' -dcAs1c-ZaYffXd91';
303
+ rules += ' -dcAs1c-y5UFLdZt9HF591';
304
+ rules += ' -dcAs1c-wAP22cZa91';
305
+ if (props.size === "XL") rules += ' -F_-Fz91';
306
+ else if (props.size === "L") rules += ' -F_-Fv91';
307
+ else if (props.size === "S") rules += ' -F_-Fp91';
308
+ else if (props.size === "XS") rules += ' -F_-Fn91';
309
+ else rules += ' -F_-Fx91';
310
310
  if (props.isStaticColor) {
311
311
  if (props.isSelected) {
312
312
  if (props.isDisabled) {
313
- if (props.isQuiet) rules += ' -g_-g99';
314
- else rules += ' -g_-gf9';
313
+ if (props.isQuiet) rules += ' -g_-g991';
314
+ else rules += ' -g_-gf91';
315
315
  } else {
316
- if (props.isPressed) rules += ' -g_-gj9';
317
- else if (props.isFocusVisible) rules += ' -g_-gj9';
318
- else if (props.isHovered) rules += ' -g_-gj9';
319
- else rules += ' -g_-gi9';
316
+ if (props.isPressed) rules += ' -g_-gj91';
317
+ else if (props.isFocusVisible) rules += ' -g_-gj91';
318
+ else if (props.isHovered) rules += ' -g_-gj91';
319
+ else rules += ' -g_-gi91';
320
320
  }
321
- } else if (props.isPressed) rules += ' -g_-gg9';
322
- else if (props.isFocusVisible) rules += ' -g_-gg9';
323
- else if (props.isHovered) rules += ' -g_-gg9';
324
- else if (props.isQuiet) rules += ' -g_-g99';
325
- else rules += ' -g_-gf9';
321
+ } else if (props.isPressed) rules += ' -g_-gg91';
322
+ else if (props.isFocusVisible) rules += ' -g_-gg91';
323
+ else if (props.isHovered) rules += ' -g_-gg91';
324
+ else if (props.isQuiet) rules += ' -g_-g991';
325
+ else rules += ' -g_-gf91';
326
326
  } else if (props.isSelected) {
327
327
  if (props.isDisabled) {
328
- if (props.isQuiet) rules += ' -g_-g99';
329
- else rules += ' -g_-gH9';
328
+ if (props.isQuiet) rules += ' -g_-g991';
329
+ else rules += ' -g_-gH91';
330
330
  } else if (props.isEmphasized) {
331
- if (props.isFocused) rules += ' -g_-gUgARdd9';
332
- else if (props.isPressed) rules += ' -g_-gUgARdd9';
333
- else if (props.isHovered) rules += ' -g_-gUgARdd9';
334
- else rules += ' -g_-g5qAiPc9';
331
+ if (props.isFocusVisible) rules += ' -g_-gUgARdd91';
332
+ else if (props.isPressed) rules += ' -g_-gUgARdd91';
333
+ else if (props.isHovered) rules += ' -g_-gUgARdd91';
334
+ else rules += ' -g_-g5qAiPc91';
335
335
  } else {
336
- if (props.isPressed) rules += ' -g_-gu9';
337
- else if (props.isFocusVisible) rules += ' -g_-gu9';
338
- else if (props.isHovered) rules += ' -g_-gu9';
339
- else rules += ' -g_-g09';
336
+ if (props.isPressed) rules += ' -g_-gu91';
337
+ else if (props.isFocusVisible) rules += ' -g_-gu91';
338
+ else if (props.isHovered) rules += ' -g_-gu91';
339
+ else rules += ' -g_-g091';
340
340
  }
341
341
  } else {
342
- if (props.isPressed) rules += ' -g_-gF9';
343
- else if (props.isFocusVisible) rules += ' -g_-gF9';
344
- else if (props.isHovered) rules += ' -g_-gF9';
345
- else if (props.isQuiet) rules += ' -g_-g99';
346
- else rules += ' -g_-gH9';
342
+ if (props.isPressed) rules += ' -g_-gF91';
343
+ else if (props.isFocusVisible) rules += ' -g_-gF91';
344
+ else if (props.isHovered) rules += ' -g_-gF91';
345
+ else if (props.isQuiet) rules += ' -g_-g991';
346
+ else rules += ' -g_-gH91';
347
347
  }
348
348
  if (props.isSelected) {
349
- if (props.isDisabled) rules += ' -g_-lgb9';
350
- else rules += ' -g_-lge9';
351
- } else rules += ' -g_-lgb9';
352
- rules += ' -S_-Sv9';
353
- rules += ' -S_-gLWx3bSd9';
354
- if (props.size === "XL") rules += ' -N_-Nl9';
355
- else if (props.size === "L") rules += ' -N_-Nj9';
356
- else if (props.size === "S") rules += ' -N_-Nf9';
357
- else if (props.size === "XS") rules += ' -N_-Ne9';
358
- else rules += ' -N_-Nk9';
349
+ if (props.isDisabled) rules += ' -g_-lgb91';
350
+ else rules += ' -g_-lge91';
351
+ } else rules += ' -g_-lgb91';
352
+ rules += ' -S_-Sv91';
353
+ rules += ' -S_-gLWx3bSd91';
354
+ if (props.size === "XL") rules += ' -N_-Nl91';
355
+ else if (props.size === "L") rules += ' -N_-Nj91';
356
+ else if (props.size === "S") rules += ' -N_-Nf91';
357
+ else if (props.size === "XS") rules += ' -N_-Ne91';
358
+ else rules += ' -N_-Nk91';
359
359
  return rules;
360
360
  };
361
361
  // Matching icon sizes. TBD.
@@ -402,7 +402,7 @@ const $6e265ff388155b91$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $9ZEgK$react
402
402
  [
403
403
  (0, $6367bc87eb7d24ad$exports.TextContext),
404
404
  {
405
- styles: " _Jb9 _Nc9 Pc9 _Yb9 _7c9"
405
+ styles: " _Jb91 _Nc91 Pc91 _Yb91 _7c91"
406
406
  }
407
407
  ],
408
408
  [
@@ -410,16 +410,16 @@ const $6e265ff388155b91$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $9ZEgK$react
410
410
  {
411
411
  render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
412
412
  slot: 'icon',
413
- styles: " _Ja9"
413
+ styles: " _Ja91"
414
414
  }),
415
- styles: " ZuUmpre9 FuUmpre9 I67logd9 _va9"
415
+ styles: " ZuUmpre91 FuUmpre91 I67logd91 _va91"
416
416
  }
417
417
  ],
418
418
  [
419
419
  (0, $38071d9ce246d4cf$exports.AvatarContext),
420
420
  {
421
421
  size: $6e265ff388155b91$var$avatarSize[size],
422
- styles: " I67logd9 _va9 _Ja9"
422
+ styles: " I67logd91 _va91 _Ja91"
423
423
  }
424
424
  ],
425
425
  [
@@ -428,7 +428,7 @@ const $6e265ff388155b91$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $9ZEgK$react
428
428
  staticColor: staticColor,
429
429
  size: props.size === 'XS' ? undefined : props.size,
430
430
  isDisabled: props.isDisabled,
431
- styles: " _Pa9 WtedXZc9 _A1IiWH9 JlZStSb9 IlZStSb9"
431
+ styles: " _Pa91 WtedXZc91 _A1IiWH91 JlZStSb91 IlZStSb91"
432
432
  }
433
433
  ]
434
434
  ],
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkDD,yDAAyD;AACzD,MAAM,iCAAW;AACjB,MAAM,iCAAW;AACjB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuKb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qDAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,kDAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,QACvB,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAGZ,qBACE,gCAAC,CAAA,GAAA,iCAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;6BACnE;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;yBACA;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,MAAM;oBAAmC;iBAAE;gBAC1D;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,uCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,kDAAuB;oBAAG;wBACzB,aAAa;wBACb,MAAM,MAAM,IAAI,KAAK,OAAO,YAAY,MAAM,IAAI;wBAClD,YAAY,MAAM,UAAU;wBAC5B,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ActionButton.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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {NotificationBadgeContext} from './NotificationBadge';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /**\n * The size of the ActionButton.\n *\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the ActionButton appears over a color background. */\n staticColor?: 'black' | 'white' | 'auto',\n /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n /** Whether the ActionButton should be selected (controlled). */\n isSelected?: boolean,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\ninterface ActionGroupItemStyleProps {\n density?: 'regular' | 'compact',\n orientation?: 'horizontal' | 'vertical',\n isJustified?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending' | 'onClick'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the ActionButton. */\n children: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\nconst controlStyle = control({shape: 'default', icon: true});\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n ...controlStyle,\n justifyContent: 'center',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n fontWeight: 'medium',\n userSelect: 'none',\n transition: 'default',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: baseColor('neutral'),\n isEmphasized: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocused: lightDark('accent-1000', 'accent-600')\n },\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isStaticColor: {\n ...baseColor('transparent-overlay-100'),\n default: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: baseColor('neutral'),\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isSelected: 'auto',\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\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 borderStyle: 'none',\n borderTopStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n ':first-child': controlStyle.borderRadius\n }\n }\n },\n borderTopEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': controlStyle.borderRadius\n },\n vertical: {\n ':first-child': controlStyle.borderRadius\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': controlStyle.borderRadius\n },\n vertical: {\n ':last-child': controlStyle.borderRadius\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n ':last-child': controlStyle.borderRadius\n }\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true,\n '--badgeTop': {\n type: 'top',\n value: {\n default: 'calc(self(height)/2 - var(--iconWidth)/2)',\n [textOnly]: 0\n }\n },\n '--iconWidth': {\n type: 'width',\n value: fontRelative(20)\n },\n '--badgePosition': {\n type: 'width',\n value: {\n default: 'calc(self(paddingStart) + var(--iconWidth))',\n [iconOnly]: 'calc(self(minWidth)/2 + var(--iconWidth)/2)',\n [textOnly]: 'full'\n }\n }\n}, getAllowedOverrides());\n\n// Matching icon sizes. TBD.\nconst avatarSize = {\n XS: 14,\n S: 16,\n M: 20,\n L: 22,\n X: 26\n} as const;\n\nexport const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ActionButtons allow users to perform an action.\n * They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.\n */\nexport const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n let ctx = useSlottedContext(ActionButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n size = props.size || 'M',\n isDisabled = props.isDisabled\n } = ctx || {};\n\n\n return (\n <RACButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }],\n [AvatarContext, {\n size: avatarSize[size],\n styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})\n }],\n [NotificationBadgeContext, {\n staticColor: staticColor,\n size: props.size === 'XS' ? undefined : props.size,\n isDisabled: props.isDisabled,\n styles: style({position: 'absolute', top: '--badgeTop', insetStart: '--badgePosition', marginTop: 'calc((self(height) * -1)/2)', marginStart: 'calc((self(height) * -1)/2)'})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkDD,yDAAyD;AACzD,MAAM,iCAAW;AACjB,MAAM,iCAAW;AACjB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuKb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,0BAAY,EAAkF;AAM1H,MAAM,0DAAe,CAAA,GAAA,uBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,sCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,yCAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,qDAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,4CAAgB,EAAE,CAAA,GAAA,kDAAuB;IACnD,IAAI,YAAY,CAAC,CAAC;IAClB,IAAI,WACF,UAAU,wBACV,WAAW,eACX,cAAc,2BACd,cAAc,MAAM,WAAW,WAC/B,UAAU,MAAM,OAAO,QACvB,OAAO,MAAM,IAAI,IAAI,iBACrB,aAAa,MAAM,UAAU,EAC9B,GAAG,OAAO,CAAC;IAGZ,qBACE,gCAAC,CAAA,GAAA,iCAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,oCAAS,EAAE,QAAQ,MAAM,YAAY;QAC5C,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,0CAAU;gBACnE,GAAG,WAAW;gBACd,+CAA+C;gBAC/C,WAAW,YAAY,SAAS,IAAI,qBAAqB,UAAU;6BACnE;gBACA,eAAe,CAAC,CAAC;sBACjB;yBACA;yBACA;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gCAAC,CAAA,GAAA,mCAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBAAC,MAAM;oBAAmC;iBAAE;gBAC1D;oBAAC,CAAA,GAAA,qCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,uCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,kDAAuB;oBAAG;wBACzB,aAAa;wBACb,MAAM,MAAM,IAAI,KAAK,OAAO,YAAY,MAAM,IAAI;wBAClD,YAAY,MAAM,UAAU;wBAC5B,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gCAAC,CAAA,GAAA,8BAAG;0BAAG,MAAM,QAAQ;iBAAW,MAAM,QAAQ;;;AAI5F","sources":["packages/@react-spectrum/s2/src/ActionButton.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 {ActionButtonGroupContext} from './ActionButtonGroup';\nimport {AvatarContext} from './Avatar';\nimport {baseColor, focusRing, fontRelative, lightDark, style} from '../style' with { type: 'macro' };\nimport {ButtonProps, ButtonRenderProps, ContextValue, OverlayTriggerStateContext, Provider, Button as RACButton, useSlottedContext} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {control, getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\nimport {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {IconContext} from './Icon';\nimport {NotificationBadgeContext} from './NotificationBadge';\nimport {pressScale} from './pressScale';\nimport {SkeletonContext} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonStyleProps {\n /**\n * The size of the ActionButton.\n *\n * @default 'M'\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /** The static color style to apply. Useful when the ActionButton appears over a color background. */\n staticColor?: 'black' | 'white' | 'auto',\n /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n isQuiet?: boolean\n}\n\ninterface ToggleButtonStyleProps {\n /** Whether the ActionButton should be selected (controlled). */\n isSelected?: boolean,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n isEmphasized?: boolean\n}\n\ninterface ActionGroupItemStyleProps {\n density?: 'regular' | 'compact',\n orientation?: 'horizontal' | 'vertical',\n isJustified?: boolean\n}\n\nexport interface ActionButtonProps extends Omit<ButtonProps, 'className' | 'style' | 'children' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange' | 'isPending' | 'onClick'>, StyleProps, ActionButtonStyleProps {\n /** The content to display in the ActionButton. */\n children: ReactNode\n}\n\n// These styles handle both ActionButton and ToggleButton\nconst iconOnly = ':has([slot=icon], [slot=avatar]):not(:has([data-rsp-slot=text]))';\nconst textOnly = ':has([data-rsp-slot=text]):not(:has([slot=icon], [slot=avatar]))';\nconst controlStyle = control({shape: 'default', icon: true});\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n ...controlStyle,\n justifyContent: 'center',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n fontWeight: 'medium',\n userSelect: 'none',\n transition: 'default',\n forcedColorAdjust: 'none',\n backgroundColor: {\n default: {\n ...baseColor('gray-100'),\n default: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isSelected: {\n default: baseColor('neutral'),\n isEmphasized: {\n default: lightDark('accent-900', 'accent-700'),\n isHovered: lightDark('accent-1000', 'accent-600'),\n isPressed: lightDark('accent-1000', 'accent-600'),\n isFocusVisible: lightDark('accent-1000', 'accent-600')\n },\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n isStaticColor: {\n ...baseColor('transparent-overlay-100'),\n default: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-overlay-800'),\n isDisabled: {\n default: 'transparent-overlay-100',\n isQuiet: 'transparent'\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: baseColor('neutral'),\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n isStaticColor: {\n default: baseColor('transparent-overlay-800'),\n isSelected: 'auto',\n isDisabled: 'transparent-overlay-400'\n },\n forcedColors: {\n default: 'ButtonText',\n isSelected: 'HighlightText',\n isDisabled: {\n default: 'GrayText'\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 borderStyle: 'none',\n borderTopStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n ':first-child': controlStyle.borderRadius\n }\n }\n },\n borderTopEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': controlStyle.borderRadius\n },\n vertical: {\n ':first-child': controlStyle.borderRadius\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': controlStyle.borderRadius\n },\n vertical: {\n ':last-child': controlStyle.borderRadius\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: controlStyle.borderRadius,\n density: {\n compact: {\n default: 'none',\n ':last-child': controlStyle.borderRadius\n }\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true,\n '--badgeTop': {\n type: 'top',\n value: {\n default: 'calc(self(height)/2 - var(--iconWidth)/2)',\n [textOnly]: 0\n }\n },\n '--iconWidth': {\n type: 'width',\n value: fontRelative(20)\n },\n '--badgePosition': {\n type: 'width',\n value: {\n default: 'calc(self(paddingStart) + var(--iconWidth))',\n [iconOnly]: 'calc(self(minWidth)/2 + var(--iconWidth)/2)',\n [textOnly]: 'full'\n }\n }\n}, getAllowedOverrides());\n\n// Matching icon sizes. TBD.\nconst avatarSize = {\n XS: 14,\n S: 16,\n M: 20,\n L: 22,\n X: 26\n} as const;\n\nexport const ActionButtonContext = createContext<ContextValue<Partial<ActionButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);\n\n/**\n * ActionButtons allow users to perform an action.\n * They're used for similar, task-based options within a workflow, and are ideal for interfaces where buttons aren't meant to draw a lot of attention.\n */\nexport const ActionButton = forwardRef(function ActionButton(props: ActionButtonProps, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonContext);\n props = useFormProps(props as any);\n let domRef = useFocusableRef(ref);\n let overlayTriggerState = useContext(OverlayTriggerStateContext);\n let ctx = useSlottedContext(ActionButtonGroupContext);\n let isInGroup = !!ctx;\n let {\n density = 'regular',\n isJustified,\n orientation = 'horizontal',\n staticColor = props.staticColor,\n isQuiet = props.isQuiet,\n size = props.size || 'M',\n isDisabled = props.isDisabled\n } = ctx || {};\n\n\n return (\n <RACButton\n {...props}\n isDisabled={isDisabled}\n ref={domRef}\n style={pressScale(domRef, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + btnStyles({\n ...renderProps,\n // Retain hover styles when an overlay is open.\n isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,\n staticColor,\n isStaticColor: !!staticColor,\n size,\n isQuiet,\n density,\n isJustified,\n orientation,\n isInGroup\n }, props.styles)}>\n <Provider\n values={[\n [SkeletonContext, null],\n [TextContext, {styles: style({order: 1, truncate: true})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }],\n [AvatarContext, {\n size: avatarSize[size],\n styles: style({marginStart: '--iconMargin', flexShrink: 0, order: 0})\n }],\n [NotificationBadgeContext, {\n staticColor: staticColor,\n size: props.size === 'XS' ? undefined : props.size,\n isDisabled: props.isDisabled,\n styles: style({position: 'absolute', top: '--badgeTop', insetStart: '--badgePosition', marginTop: 'calc((self(height) * -1)/2)', marginStart: 'calc((self(height) * -1)/2)'})\n }]\n ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.cjs.map"}