@react-spectrum/s2 3.0.0-nightly-326f48154-241216 → 3.0.0-nightly-adae13c78-241218

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 (184) hide show
  1. package/dist/ActionButton.cjs +58 -80
  2. package/dist/ActionButton.cjs.map +1 -1
  3. package/dist/ActionButton.css +76 -96
  4. package/dist/ActionButton.css.map +1 -1
  5. package/dist/ActionButton.mjs +58 -80
  6. package/dist/ActionButton.mjs.map +1 -1
  7. package/dist/ActionButtonGroup.cjs.map +1 -1
  8. package/dist/ActionButtonGroup.css.map +1 -1
  9. package/dist/ActionButtonGroup.mjs.map +1 -1
  10. package/dist/Badge.cjs +66 -66
  11. package/dist/Badge.css +43 -43
  12. package/dist/Badge.mjs +66 -66
  13. package/dist/Breadcrumbs.cjs +6 -6
  14. package/dist/Breadcrumbs.css +4 -4
  15. package/dist/Breadcrumbs.mjs +6 -6
  16. package/dist/Button.cjs +89 -134
  17. package/dist/Button.cjs.map +1 -1
  18. package/dist/Button.css +102 -134
  19. package/dist/Button.css.map +1 -1
  20. package/dist/Button.mjs +89 -134
  21. package/dist/Button.mjs.map +1 -1
  22. package/dist/Card.cjs +4 -4
  23. package/dist/Card.css +3 -3
  24. package/dist/Card.mjs +4 -4
  25. package/dist/CardView.cjs +1 -1
  26. package/dist/CardView.css +1 -1
  27. package/dist/CardView.mjs +1 -1
  28. package/dist/Checkbox.cjs +10 -10
  29. package/dist/Checkbox.css +10 -10
  30. package/dist/Checkbox.mjs +10 -10
  31. package/dist/CloseButton.cjs +17 -28
  32. package/dist/CloseButton.cjs.map +1 -1
  33. package/dist/CloseButton.css +19 -31
  34. package/dist/CloseButton.css.map +1 -1
  35. package/dist/CloseButton.mjs +17 -28
  36. package/dist/CloseButton.mjs.map +1 -1
  37. package/dist/ColorArea.cjs +1 -1
  38. package/dist/ColorArea.css +1 -1
  39. package/dist/ColorArea.mjs +1 -1
  40. package/dist/ColorHandle.cjs +3 -3
  41. package/dist/ColorHandle.css +3 -3
  42. package/dist/ColorHandle.mjs +3 -3
  43. package/dist/ColorSlider.cjs +1 -1
  44. package/dist/ColorSlider.css +1 -1
  45. package/dist/ColorSlider.mjs +1 -1
  46. package/dist/ColorSwatchPicker.cjs +1 -1
  47. package/dist/ColorSwatchPicker.css +1 -1
  48. package/dist/ColorSwatchPicker.mjs +1 -1
  49. package/dist/ColorWheel.cjs +2 -2
  50. package/dist/ColorWheel.css +1 -1
  51. package/dist/ColorWheel.mjs +2 -2
  52. package/dist/ComboBox.cjs +5 -5
  53. package/dist/ComboBox.css +4 -4
  54. package/dist/ComboBox.mjs +5 -5
  55. package/dist/Disclosure.cjs +1 -1
  56. package/dist/Disclosure.css +1 -1
  57. package/dist/Disclosure.mjs +1 -1
  58. package/dist/Divider.cjs +8 -8
  59. package/dist/Divider.cjs.map +1 -1
  60. package/dist/Divider.css +13 -13
  61. package/dist/Divider.css.map +1 -1
  62. package/dist/Divider.mjs +8 -8
  63. package/dist/Divider.mjs.map +1 -1
  64. package/dist/DropZone.cjs +4 -4
  65. package/dist/DropZone.css +2 -2
  66. package/dist/DropZone.mjs +4 -4
  67. package/dist/Field.cjs +23 -18
  68. package/dist/Field.cjs.map +1 -1
  69. package/dist/Field.css +7 -15
  70. package/dist/Field.css.map +1 -1
  71. package/dist/Field.mjs +23 -18
  72. package/dist/Field.mjs.map +1 -1
  73. package/dist/InlineAlert.cjs +24 -29
  74. package/dist/InlineAlert.cjs.map +1 -1
  75. package/dist/InlineAlert.css +15 -19
  76. package/dist/InlineAlert.css.map +1 -1
  77. package/dist/InlineAlert.mjs +24 -29
  78. package/dist/InlineAlert.mjs.map +1 -1
  79. package/dist/Link.cjs +7 -6
  80. package/dist/Link.cjs.map +1 -1
  81. package/dist/Link.css +14 -14
  82. package/dist/Link.css.map +1 -1
  83. package/dist/Link.mjs +7 -6
  84. package/dist/Link.mjs.map +1 -1
  85. package/dist/Menu.cjs +28 -8
  86. package/dist/Menu.cjs.map +1 -1
  87. package/dist/Menu.css +3 -3
  88. package/dist/Menu.css.map +1 -1
  89. package/dist/Menu.mjs +29 -9
  90. package/dist/Menu.mjs.map +1 -1
  91. package/dist/Meter.cjs +13 -13
  92. package/dist/Meter.cjs.map +1 -1
  93. package/dist/Meter.css +18 -22
  94. package/dist/Meter.css.map +1 -1
  95. package/dist/Meter.mjs +13 -13
  96. package/dist/Meter.mjs.map +1 -1
  97. package/dist/Modal.cjs +1 -1
  98. package/dist/Modal.css +1 -1
  99. package/dist/Modal.mjs +1 -1
  100. package/dist/NumberField.cjs +4 -4
  101. package/dist/NumberField.css +4 -4
  102. package/dist/NumberField.mjs +4 -4
  103. package/dist/Picker.cjs +4 -4
  104. package/dist/Picker.css +4 -4
  105. package/dist/Picker.mjs +4 -4
  106. package/dist/Popover.cjs +3 -3
  107. package/dist/Popover.css +3 -3
  108. package/dist/Popover.mjs +3 -3
  109. package/dist/ProgressBar.cjs +20 -18
  110. package/dist/ProgressBar.cjs.map +1 -1
  111. package/dist/ProgressBar.css +20 -24
  112. package/dist/ProgressBar.css.map +1 -1
  113. package/dist/ProgressBar.mjs +20 -18
  114. package/dist/ProgressBar.mjs.map +1 -1
  115. package/dist/ProgressCircle.cjs +11 -9
  116. package/dist/ProgressCircle.cjs.map +1 -1
  117. package/dist/ProgressCircle.css +14 -14
  118. package/dist/ProgressCircle.css.map +1 -1
  119. package/dist/ProgressCircle.mjs +11 -9
  120. package/dist/ProgressCircle.mjs.map +1 -1
  121. package/dist/Provider.cjs +1 -1
  122. package/dist/Provider.css +1 -1
  123. package/dist/Provider.mjs +1 -1
  124. package/dist/Radio.cjs +6 -6
  125. package/dist/Radio.css +6 -6
  126. package/dist/Radio.mjs +6 -6
  127. package/dist/SearchField.cjs +1 -1
  128. package/dist/SearchField.css +1 -1
  129. package/dist/SearchField.mjs +1 -1
  130. package/dist/SegmentedControl.cjs +8 -8
  131. package/dist/SegmentedControl.css +8 -8
  132. package/dist/SegmentedControl.mjs +8 -8
  133. package/dist/Slider.cjs +8 -8
  134. package/dist/Slider.css +5 -5
  135. package/dist/Slider.mjs +8 -8
  136. package/dist/Switch.cjs +7 -7
  137. package/dist/Switch.css +6 -6
  138. package/dist/Switch.mjs +7 -7
  139. package/dist/TableView.cjs +17 -17
  140. package/dist/TableView.css +11 -11
  141. package/dist/TableView.mjs +17 -17
  142. package/dist/Tabs.cjs +5 -5
  143. package/dist/Tabs.css +5 -5
  144. package/dist/Tabs.mjs +5 -5
  145. package/dist/TabsPicker.cjs +1 -1
  146. package/dist/TabsPicker.css +1 -1
  147. package/dist/TabsPicker.mjs +1 -1
  148. package/dist/TagGroup.cjs +10 -10
  149. package/dist/TagGroup.css +8 -8
  150. package/dist/TagGroup.mjs +10 -10
  151. package/dist/ToggleButton.cjs +1 -0
  152. package/dist/ToggleButton.cjs.map +1 -1
  153. package/dist/ToggleButton.css.map +1 -1
  154. package/dist/ToggleButton.mjs +1 -0
  155. package/dist/ToggleButton.mjs.map +1 -1
  156. package/dist/Tooltip.cjs +1 -1
  157. package/dist/Tooltip.css +1 -1
  158. package/dist/Tooltip.mjs +1 -1
  159. package/dist/types.d.ts +9 -9
  160. package/dist/types.d.ts.map +1 -1
  161. package/package.json +18 -18
  162. package/src/ActionButton.tsx +19 -43
  163. package/src/ActionButtonGroup.tsx +1 -1
  164. package/src/Button.tsx +36 -79
  165. package/src/CloseButton.tsx +10 -20
  166. package/src/Divider.tsx +10 -16
  167. package/src/Field.tsx +19 -17
  168. package/src/InlineAlert.tsx +0 -1
  169. package/src/Link.tsx +7 -12
  170. package/src/Menu.tsx +24 -8
  171. package/src/Meter.tsx +7 -14
  172. package/src/ProgressBar.tsx +8 -15
  173. package/src/ProgressCircle.tsx +12 -15
  174. package/src/ToggleButton.tsx +1 -0
  175. package/src/bar-utils.ts +3 -10
  176. package/src/style-utils.ts +15 -8
  177. package/style/dist/spectrum-theme.cjs +15 -1
  178. package/style/dist/spectrum-theme.cjs.map +1 -1
  179. package/style/dist/spectrum-theme.mjs +15 -1
  180. package/style/dist/spectrum-theme.mjs.map +1 -1
  181. package/style/dist/types.d.ts +40 -27
  182. package/style/dist/types.d.ts.map +1 -1
  183. package/style/spectrum-theme.ts +4 -2
  184. package/style/tokens.ts +30 -0
@@ -56,12 +56,13 @@ const $da878a05ab4a403e$export$446543cff2a0f496 = function anonymous(props, over
56
56
  }
57
57
  if (props.isFocusVisible) rules += ' _Lb';
58
58
  else rules += ' _La';
59
- rules += ' da_____z';
60
- if (props.staticColor === "black") rules += ' db';
61
- else if (props.staticColor === "white") rules += ' dc';
59
+ rules += ' da_____M';
60
+ if (props.isStaticColor) rules += ' d_____G';
62
61
  else rules += ' dx';
63
62
  rules += ' _Nc';
64
63
  rules += ' _M-3t1z';
64
+ if (props.staticColor === "white") rules += ' -_1de2x0q_b-b';
65
+ else if (props.staticColor === "black") rules += ' -_1de2x0q_b-c';
65
66
  rules += ' _Zd';
66
67
  rules += ' _1c';
67
68
  rules += ' _2d';
@@ -104,26 +105,17 @@ const $da878a05ab4a403e$export$446543cff2a0f496 = function anonymous(props, over
104
105
  rules += ' _ec';
105
106
  rules += ' _f-1x99dlob';
106
107
  rules += ' _fa';
107
- if (props.isDisabled) rules += ' aa_____B';
108
- else if (props.isSelected) rules += ' aa_____A';
109
- else rules += ' aa_____x';
110
- if (props.staticColor === "black") {
111
- if (props.isDisabled) rules += ' a_____n';
112
- else if (props.isSelected) rules += ' ac';
108
+ if (props.isDisabled) rules += ' aa_____O';
109
+ else if (props.isSelected) rules += ' aa_____N';
110
+ else rules += ' aa_____K';
111
+ if (props.isStaticColor) {
112
+ if (props.isDisabled) rules += ' a_____A';
113
+ else if (props.isSelected) rules += ' a_____R';
113
114
  else {
114
- if (props.isPressed) rules += ' a_____s';
115
- else if (props.isFocusVisible) rules += ' a_____s';
116
- else if (props.isHovered) rules += ' a_____s';
117
- else rules += ' a_____r';
118
- }
119
- } else if (props.staticColor === "white") {
120
- if (props.isDisabled) rules += ' a_____a';
121
- else if (props.isSelected) rules += ' ab';
122
- else {
123
- if (props.isPressed) rules += ' a_____f';
124
- else if (props.isFocusVisible) rules += ' a_____f';
125
- else if (props.isHovered) rules += ' a_____f';
126
- else rules += ' a_____e';
115
+ if (props.isPressed) rules += ' a_____F';
116
+ else if (props.isFocusVisible) rules += ' a_____F';
117
+ else if (props.isHovered) rules += ' a_____F';
118
+ else rules += ' a_____E';
127
119
  }
128
120
  } else if (props.isDisabled) rules += ' aj';
129
121
  else if (props.isSelected) {
@@ -148,64 +140,7 @@ const $da878a05ab4a403e$export$446543cff2a0f496 = function anonymous(props, over
148
140
  rules += ' _Q-375x7f';
149
141
  rules += ' _Ra';
150
142
  rules += ' _zb';
151
- if (props.isSelected) {
152
- if (props.isDisabled) rules += ' ba_____w';
153
- else rules += ' ba_____z';
154
- } else rules += ' ba_____w';
155
- if (props.staticColor === "black") {
156
- if (props.isSelected) {
157
- if (props.isDisabled) {
158
- if (props.isQuiet) rules += ' ba';
159
- else rules += ' b_____k';
160
- } else {
161
- if (props.isPressed) rules += ' b_____s';
162
- else if (props.isFocusVisible) rules += ' b_____s';
163
- else if (props.isHovered) rules += ' b_____s';
164
- else rules += ' b_____r';
165
- }
166
- } else if (props.isPressed) rules += ' b_____l';
167
- else if (props.isFocusVisible) rules += ' b_____l';
168
- else if (props.isHovered) rules += ' b_____l';
169
- else if (props.isQuiet) rules += ' ba';
170
- else rules += ' b_____k';
171
- } else if (props.staticColor === "white") {
172
- if (props.isSelected) {
173
- if (props.isDisabled) {
174
- if (props.isQuiet) rules += ' ba';
175
- else rules += ' b____7';
176
- } else {
177
- if (props.isPressed) rules += ' b_____f';
178
- else if (props.isFocusVisible) rules += ' b_____f';
179
- else if (props.isHovered) rules += ' b_____f';
180
- else rules += ' b_____e';
181
- }
182
- } else if (props.isPressed) rules += ' b____8';
183
- else if (props.isFocusVisible) rules += ' b____8';
184
- else if (props.isHovered) rules += ' b____8';
185
- else if (props.isQuiet) rules += ' ba';
186
- else rules += ' b____7';
187
- } else if (props.isSelected) {
188
- if (props.isDisabled) {
189
- if (props.isQuiet) rules += ' ba';
190
- else rules += ' bg';
191
- } else if (props.isEmphasized) {
192
- if (props.isPressed) rules += ' b_____F';
193
- else if (props.isFocusVisible) rules += ' b_____F';
194
- else if (props.isHovered) rules += ' b_____F';
195
- else rules += ' b_____E';
196
- } else {
197
- if (props.isPressed) rules += ' bo';
198
- else if (props.isFocusVisible) rules += ' bo';
199
- else if (props.isHovered) rules += ' bo';
200
- else rules += ' bn';
201
- }
202
- } else {
203
- if (props.isPressed) rules += ' bh';
204
- else if (props.isFocusVisible) rules += ' bh';
205
- else if (props.isHovered) rules += ' bh';
206
- else if (props.isQuiet) rules += ' ba';
207
- else rules += ' bg';
208
- }
143
+ rules += ' b-375toh';
209
144
  rules += ' -rwx0fg_e-b';
210
145
  rules += ' wf';
211
146
  rules += ' C-1imc51ya';
@@ -238,6 +173,48 @@ const $da878a05ab4a403e$export$446543cff2a0f496 = function anonymous(props, over
238
173
  if (props.isFocusVisible) rules += ' __Q-3t1z';
239
174
  }
240
175
  rules += ' __R-yksgrp';
176
+ if (props.isSelected) {
177
+ if (props.isDisabled) rules += ' -_375toh_b-a_____J';
178
+ else rules += ' -_375toh_b-a_____M';
179
+ } else rules += ' -_375toh_b-a_____J';
180
+ if (props.isStaticColor) {
181
+ if (props.isSelected) {
182
+ if (props.isDisabled) {
183
+ if (props.isQuiet) rules += ' -_375toh_b-a';
184
+ else rules += ' -_375toh_b-_____x';
185
+ } else {
186
+ if (props.isPressed) rules += ' -_375toh_b-_____F';
187
+ else if (props.isFocusVisible) rules += ' -_375toh_b-_____F';
188
+ else if (props.isHovered) rules += ' -_375toh_b-_____F';
189
+ else rules += ' -_375toh_b-_____E';
190
+ }
191
+ } else if (props.isPressed) rules += ' -_375toh_b-_____y';
192
+ else if (props.isFocusVisible) rules += ' -_375toh_b-_____y';
193
+ else if (props.isHovered) rules += ' -_375toh_b-_____y';
194
+ else if (props.isQuiet) rules += ' -_375toh_b-a';
195
+ else rules += ' -_375toh_b-_____x';
196
+ } else if (props.isSelected) {
197
+ if (props.isDisabled) {
198
+ if (props.isQuiet) rules += ' -_375toh_b-a';
199
+ else rules += ' -_375toh_b-g';
200
+ } else if (props.isEmphasized) {
201
+ if (props.isPressed) rules += ' -_375toh_b-_____S';
202
+ else if (props.isFocusVisible) rules += ' -_375toh_b-_____S';
203
+ else if (props.isHovered) rules += ' -_375toh_b-_____S';
204
+ else rules += ' -_375toh_b-_____R';
205
+ } else {
206
+ if (props.isPressed) rules += ' -_375toh_b-o';
207
+ else if (props.isFocusVisible) rules += ' -_375toh_b-o';
208
+ else if (props.isHovered) rules += ' -_375toh_b-o';
209
+ else rules += ' -_375toh_b-n';
210
+ }
211
+ } else {
212
+ if (props.isPressed) rules += ' -_375toh_b-h';
213
+ else if (props.isFocusVisible) rules += ' -_375toh_b-h';
214
+ else if (props.isHovered) rules += ' -_375toh_b-h';
215
+ else if (props.isQuiet) rules += ' -_375toh_b-a';
216
+ else rules += ' -_375toh_b-g';
217
+ }
241
218
  if (props.size === "XL") rules += ' -_375toq_k-j';
242
219
  else if (props.size === "L") rules += ' -_375toq_k-i';
243
220
  else if (props.size === "S") rules += ' -_375toq_k-h';
@@ -272,6 +249,7 @@ const $da878a05ab4a403e$export$cfc7921d29ef7b80 = /*#__PURE__*/ (0, $hl1Zj$forwa
272
249
  // Retain hover styles when an overlay is open.
273
250
  isHovered: renderProps.isHovered || overlayTriggerState?.isOpen || false,
274
251
  staticColor: staticColor,
252
+ isStaticColor: !!staticColor,
275
253
  size: size,
276
254
  isQuiet: isQuiet,
277
255
  density: density,
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AAiDD,yDAAyD;AACzD,MAAM,iCAAW;AACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyLb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAAyE;AAMjH,MAAM,0DAAe,CAAA,GAAA,iBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,iCAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,wBAAgB,EAAE,CAAA,GAAA,yCAAuB;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;IAEZ,qBACE,gBAAC,CAAA,GAAA,aAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,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;sBACA;yBACA;yBACA;6BACA;6BACA;2BACA;YACF,GAAG,MAAM,MAAM;kBACf,cAAA,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,yCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gBAAC,CAAA,GAAA,yCAAG;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, 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 {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StyleProps} from './style-utils' with { type: 'macro' };\nimport {IconContext} from './Icon';\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',\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'>, 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]))';\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean}>({\n ...focusRing(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n columnGap: 'text-to-visual',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n font: 'control',\n fontWeight: 'medium',\n userSelect: 'none',\n height: 'control',\n minWidth: 'control',\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: 'neutral',\n isEmphasized: 'accent',\n isDisabled: {\n default: 'gray-100',\n isQuiet: 'transparent'\n }\n },\n staticColor: {\n white: {\n ...baseColor('transparent-white-100'),\n default: {\n default: 'transparent-white-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-white-800'),\n isDisabled: {\n default: 'transparent-white-100',\n isQuiet: 'transparent'\n }\n }\n },\n black: {\n ...baseColor('transparent-black-100'),\n default: {\n default: 'transparent-black-100',\n isQuiet: 'transparent'\n },\n isSelected: {\n default: baseColor('transparent-black-800'),\n isDisabled: {\n default: 'transparent-black-100',\n isQuiet: 'transparent'\n }\n }\n }\n },\n forcedColors: {\n default: 'ButtonFace',\n isSelected: {\n default: 'Highlight',\n isDisabled: 'ButtonFace'\n }\n }\n },\n color: {\n default: 'neutral',\n isSelected: {\n default: 'gray-25',\n isEmphasized: 'white'\n },\n isDisabled: 'disabled',\n staticColor: {\n white: {\n default: baseColor('transparent-white-800'),\n isSelected: 'black',\n isDisabled: 'transparent-white-400'\n },\n black: {\n default: baseColor('transparent-black-800'),\n isSelected: 'white',\n isDisabled: 'transparent-black-400'\n }\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 staticColor: {\n white: 'white',\n black: 'black'\n },\n forcedColors: 'Highlight'\n },\n borderStyle: 'none',\n paddingX: {\n default: 'edge-to-text',\n [iconOnly]: 0\n },\n paddingY: 0,\n borderTopStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':first-child': 'control'\n }\n }\n },\n borderTopEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': 'control'\n },\n vertical: {\n ':first-child': 'control'\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': 'control'\n },\n vertical: {\n ':last-child': 'control'\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':last-child': 'control'\n }\n }\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true\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<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 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 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({paddingY: '--labelPadding', 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 ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.mjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AAiDD,yDAAyD;AACzD,MAAM,iCAAW;AACV,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgKb,4BAA4B;AAC5B,MAAM,mCAAa;IACjB,IAAI;IACJ,GAAG;IACH,GAAG;IACH,GAAG;IACH,GAAG;AACL;AAEO,MAAM,0DAAsB,CAAA,GAAA,oBAAY,EAAyE;AAMjH,MAAM,0DAAe,CAAA,GAAA,iBAAS,EAAE,SAAS,aAAa,KAAwB,EAAE,GAAoC;IACzH,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,QAAQ,CAAA,GAAA,yCAAW,EAAE;IACrB,IAAI,SAAS,CAAA,GAAA,sBAAc,EAAE;IAC7B,IAAI,sBAAsB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,iCAAyB;IAC9D,IAAI,MAAM,CAAA,GAAA,wBAAgB,EAAE,CAAA,GAAA,yCAAuB;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;IAEZ,qBACE,gBAAC,CAAA,GAAA,aAAQ;QACN,GAAG,KAAK;QACT,YAAY;QACZ,KAAK;QACL,OAAO,CAAA,GAAA,yCAAS,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,gBAAC,CAAA,GAAA,eAAO;YACN,QAAQ;gBACN;oBAAC,CAAA,GAAA,yCAAc;oBAAG;iBAAK;gBACvB;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBAAC,MAAM;oBAA+D;iBAAE;gBACtF;oBAAC,CAAA,GAAA,yCAAU;oBAAG;wBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;4BAAC,MAAM;4BAAQ,MAAM;wBAAmB;wBAC/D,MAAM;oBACR;iBAAE;gBACF;oBAAC,CAAA,GAAA,yCAAY;oBAAG;wBACd,MAAM,gCAAU,CAAC,KAAK;wBACtB,MAAM;oBACR;iBAAE;aACH;sBACA,OAAO,MAAM,QAAQ,KAAK,yBAAW,gBAAC,CAAA,GAAA,yCAAG;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, 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 {createContext, forwardRef, ReactNode, useContext} from 'react';\nimport {FocusableRef, FocusableRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, staticColor, StyleProps} from './style-utils' with { type: 'macro' };\nimport {IconContext} from './Icon';\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'>, 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]))';\nexport const btnStyles = style<ButtonRenderProps & ActionButtonStyleProps & ToggleButtonStyleProps & ActionGroupItemStyleProps & {isInGroup: boolean, isStaticColor: boolean}>({\n ...focusRing(),\n ...staticColor(),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n columnGap: 'text-to-visual',\n flexShrink: {\n default: 1,\n isInGroup: 0\n },\n flexGrow: {\n isJustified: 1\n },\n flexBasis: {\n isJustified: 0\n },\n font: 'control',\n fontWeight: 'medium',\n userSelect: 'none',\n height: 'control',\n minWidth: 'control',\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: 'neutral',\n isEmphasized: 'accent',\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: '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 paddingX: {\n default: 'edge-to-text',\n [iconOnly]: 0\n },\n paddingY: 0,\n borderTopStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':first-child': 'control'\n }\n }\n },\n borderTopEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':last-child': 'control'\n },\n vertical: {\n ':first-child': 'control'\n }\n }\n }\n }\n },\n borderBottomStartRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n orientation: {\n horizontal: {\n ':first-child': 'control'\n },\n vertical: {\n ':last-child': 'control'\n }\n }\n }\n }\n },\n borderBottomEndRadius: {\n default: 'control',\n density: {\n compact: {\n default: 'none',\n ':last-child': 'control'\n }\n }\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n [iconOnly]: 0\n }\n },\n zIndex: {\n isFocusVisible: 2\n },\n disableTapHighlight: true\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<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 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({paddingY: '--labelPadding', 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 ]}>\n {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}\n </Provider>\n </RACButton>\n );\n});\n"],"names":[],"version":3,"file":"ActionButton.mjs.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAsCM,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM,0DAA2B,CAAA,GAAA,0BAAY,EAAwD;AAKrG,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAAiC;IACrI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,kBACP,cAAc,2BACd,WAAW,YACX,QAAQ,oBACR,mBAAmB,kBACnB,YAAY,UACZ,MAAM,EACP,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,kCAAM;QACJ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,0CAAiB;kBAAC;qBAAM;yBAAS;yBAAa;QAAW,GAAG;kBAC1F,cAAA,gCAAC,0CAAyB,QAAQ;YAAC,OAAO;sBACvC;;;AAIT","sources":["packages/@react-spectrum/s2/src/ActionButtonGroup.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 {ContextValue, SlotProps, Toolbar} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonGroupProps extends UnsafeStyles, SlotProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The children of the group. */\n children: ReactNode,\n /**\n * Size of the buttons.\n * @default \"M\"\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * Spacing between the buttons.\n * @default \"regular\"\n */\n density?: 'compact' | 'regular',\n /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n isQuiet?: boolean,\n /** Whether the buttons should divide the container width equally. */\n isJustified?: boolean,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n staticColor?: 'white' | 'black',\n /**\n * The axis the group should align with.\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical',\n /** Whether the group is disabled. */\n isDisabled?: boolean\n}\n\nexport const actionGroupStyle = style({\n display: 'flex',\n flexDirection: {\n orientation: {\n horizontal: 'row',\n vertical: 'column'\n }\n },\n gap: {\n density: {\n compact: 2,\n regular: {\n size: {\n XS: 4,\n S: 4,\n M: 8,\n L: 8,\n XL: 8\n }\n }\n }\n }\n}, getAllowedOverrides({height: true}));\n\n\nexport const ActionButtonGroupContext = createContext<ContextValue<ActionButtonGroupProps, HTMLDivElement>>(null);\n\n/**\n * An ActionButtonGroup is a grouping of related ActionButtons.\n */\nexport const ActionButtonGroup = forwardRef(function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonGroupContext);\n let {\n density = 'regular',\n size = 'M',\n orientation = 'horizontal',\n isJustified,\n children,\n UNSAFE_className = '',\n UNSAFE_style,\n styles\n } = props;\n\n return (\n <Toolbar\n {...props}\n ref={ref}\n style={UNSAFE_style}\n className={UNSAFE_className + actionGroupStyle({size, density, orientation, isJustified}, styles)}>\n <ActionButtonGroupContext.Provider value={props}>\n {children}\n </ActionButtonGroupContext.Provider>\n </Toolbar>\n );\n});\n"],"names":[],"version":3,"file":"ActionButtonGroup.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAsCM,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM,0DAA2B,CAAA,GAAA,0BAAY,EAAwD;AAKrG,MAAM,0DAAoB,CAAA,GAAA,uBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAAiC;IACrI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,kBACP,cAAc,2BACd,WAAW,YACX,QAAQ,oBACR,mBAAmB,kBACnB,YAAY,UACZ,MAAM,EACP,GAAG;IAEJ,qBACE,gCAAC,CAAA,GAAA,kCAAM;QACJ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,0CAAiB;kBAAC;qBAAM;yBAAS;yBAAa;QAAW,GAAG;kBAC1F,cAAA,gCAAC,0CAAyB,QAAQ;YAAC,OAAO;sBACvC;;;AAIT","sources":["packages/@react-spectrum/s2/src/ActionButtonGroup.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 {ContextValue, SlotProps, Toolbar} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonGroupProps extends UnsafeStyles, SlotProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The children of the group. */\n children: ReactNode,\n /**\n * Size of the buttons.\n * @default \"M\"\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * Spacing between the buttons.\n * @default \"regular\"\n */\n density?: 'compact' | 'regular',\n /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n isQuiet?: boolean,\n /** Whether the buttons should divide the container width equally. */\n isJustified?: boolean,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n staticColor?: 'white' | 'black' | 'auto',\n /**\n * The axis the group should align with.\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical',\n /** Whether the group is disabled. */\n isDisabled?: boolean\n}\n\nexport const actionGroupStyle = style({\n display: 'flex',\n flexDirection: {\n orientation: {\n horizontal: 'row',\n vertical: 'column'\n }\n },\n gap: {\n density: {\n compact: 2,\n regular: {\n size: {\n XS: 4,\n S: 4,\n M: 8,\n L: 8,\n XL: 8\n }\n }\n }\n }\n}, getAllowedOverrides({height: true}));\n\n\nexport const ActionButtonGroupContext = createContext<ContextValue<ActionButtonGroupProps, HTMLDivElement>>(null);\n\n/**\n * An ActionButtonGroup is a grouping of related ActionButtons.\n */\nexport const ActionButtonGroup = forwardRef(function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonGroupContext);\n let {\n density = 'regular',\n size = 'M',\n orientation = 'horizontal',\n isJustified,\n children,\n UNSAFE_className = '',\n UNSAFE_style,\n styles\n } = props;\n\n return (\n <Toolbar\n {...props}\n ref={ref}\n style={UNSAFE_style}\n className={UNSAFE_className + actionGroupStyle({size, density, orientation, isJustified}, styles)}>\n <ActionButtonGroupContext.Provider value={props}>\n {children}\n </ActionButtonGroupContext.Provider>\n </Toolbar>\n );\n});\n"],"names":[],"version":3,"file":"ActionButtonGroup.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"AAgDgC;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/ActionButtonGroup.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 {ContextValue, SlotProps, Toolbar} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonGroupProps extends UnsafeStyles, SlotProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The children of the group. */\n children: ReactNode,\n /**\n * Size of the buttons.\n * @default \"M\"\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * Spacing between the buttons.\n * @default \"regular\"\n */\n density?: 'compact' | 'regular',\n /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n isQuiet?: boolean,\n /** Whether the buttons should divide the container width equally. */\n isJustified?: boolean,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n staticColor?: 'white' | 'black',\n /**\n * The axis the group should align with.\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical',\n /** Whether the group is disabled. */\n isDisabled?: boolean\n}\n\nexport const actionGroupStyle = style({\n display: 'flex',\n flexDirection: {\n orientation: {\n horizontal: 'row',\n vertical: 'column'\n }\n },\n gap: {\n density: {\n compact: 2,\n regular: {\n size: {\n XS: 4,\n S: 4,\n M: 8,\n L: 8,\n XL: 8\n }\n }\n }\n }\n}, getAllowedOverrides({height: true}));\n\n\nexport const ActionButtonGroupContext = createContext<ContextValue<ActionButtonGroupProps, HTMLDivElement>>(null);\n\n/**\n * An ActionButtonGroup is a grouping of related ActionButtons.\n */\nexport const ActionButtonGroup = forwardRef(function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonGroupContext);\n let {\n density = 'regular',\n size = 'M',\n orientation = 'horizontal',\n isJustified,\n children,\n UNSAFE_className = '',\n UNSAFE_style,\n styles\n } = props;\n\n return (\n <Toolbar\n {...props}\n ref={ref}\n style={UNSAFE_style}\n className={UNSAFE_className + actionGroupStyle({size, density, orientation, isJustified}, styles)}>\n <ActionButtonGroupContext.Provider value={props}>\n {children}\n </ActionButtonGroupContext.Provider>\n </Toolbar>\n );\n});\n"],"names":[],"version":3,"file":"ActionButtonGroup.css.map"}
1
+ {"mappings":"AAgDgC;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/ActionButtonGroup.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 {ContextValue, SlotProps, Toolbar} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonGroupProps extends UnsafeStyles, SlotProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The children of the group. */\n children: ReactNode,\n /**\n * Size of the buttons.\n * @default \"M\"\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * Spacing between the buttons.\n * @default \"regular\"\n */\n density?: 'compact' | 'regular',\n /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n isQuiet?: boolean,\n /** Whether the buttons should divide the container width equally. */\n isJustified?: boolean,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n staticColor?: 'white' | 'black' | 'auto',\n /**\n * The axis the group should align with.\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical',\n /** Whether the group is disabled. */\n isDisabled?: boolean\n}\n\nexport const actionGroupStyle = style({\n display: 'flex',\n flexDirection: {\n orientation: {\n horizontal: 'row',\n vertical: 'column'\n }\n },\n gap: {\n density: {\n compact: 2,\n regular: {\n size: {\n XS: 4,\n S: 4,\n M: 8,\n L: 8,\n XL: 8\n }\n }\n }\n }\n}, getAllowedOverrides({height: true}));\n\n\nexport const ActionButtonGroupContext = createContext<ContextValue<ActionButtonGroupProps, HTMLDivElement>>(null);\n\n/**\n * An ActionButtonGroup is a grouping of related ActionButtons.\n */\nexport const ActionButtonGroup = forwardRef(function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonGroupContext);\n let {\n density = 'regular',\n size = 'M',\n orientation = 'horizontal',\n isJustified,\n children,\n UNSAFE_className = '',\n UNSAFE_style,\n styles\n } = props;\n\n return (\n <Toolbar\n {...props}\n ref={ref}\n style={UNSAFE_style}\n className={UNSAFE_className + actionGroupStyle({size, density, orientation, isJustified}, styles)}>\n <ActionButtonGroupContext.Provider value={props}>\n {children}\n </ActionButtonGroupContext.Provider>\n </Toolbar>\n );\n});\n"],"names":[],"version":3,"file":"ActionButtonGroup.css.map"}
@@ -1 +1 @@
1
- {"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;AAsCM,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAAwD;AAKrG,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAAiC;IACrI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,kBACP,cAAc,2BACd,WAAW,YACX,QAAQ,oBACR,mBAAmB,kBACnB,YAAY,UACZ,MAAM,EACP,GAAG;IAEJ,qBACE,gBAAC,CAAA,GAAA,cAAM;QACJ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,0CAAiB;kBAAC;qBAAM;yBAAS;yBAAa;QAAW,GAAG;kBAC1F,cAAA,gBAAC,0CAAyB,QAAQ;YAAC,OAAO;sBACvC;;;AAIT","sources":["packages/@react-spectrum/s2/src/ActionButtonGroup.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 {ContextValue, SlotProps, Toolbar} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonGroupProps extends UnsafeStyles, SlotProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The children of the group. */\n children: ReactNode,\n /**\n * Size of the buttons.\n * @default \"M\"\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * Spacing between the buttons.\n * @default \"regular\"\n */\n density?: 'compact' | 'regular',\n /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n isQuiet?: boolean,\n /** Whether the buttons should divide the container width equally. */\n isJustified?: boolean,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n staticColor?: 'white' | 'black',\n /**\n * The axis the group should align with.\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical',\n /** Whether the group is disabled. */\n isDisabled?: boolean\n}\n\nexport const actionGroupStyle = style({\n display: 'flex',\n flexDirection: {\n orientation: {\n horizontal: 'row',\n vertical: 'column'\n }\n },\n gap: {\n density: {\n compact: 2,\n regular: {\n size: {\n XS: 4,\n S: 4,\n M: 8,\n L: 8,\n XL: 8\n }\n }\n }\n }\n}, getAllowedOverrides({height: true}));\n\n\nexport const ActionButtonGroupContext = createContext<ContextValue<ActionButtonGroupProps, HTMLDivElement>>(null);\n\n/**\n * An ActionButtonGroup is a grouping of related ActionButtons.\n */\nexport const ActionButtonGroup = forwardRef(function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonGroupContext);\n let {\n density = 'regular',\n size = 'M',\n orientation = 'horizontal',\n isJustified,\n children,\n UNSAFE_className = '',\n UNSAFE_style,\n styles\n } = props;\n\n return (\n <Toolbar\n {...props}\n ref={ref}\n style={UNSAFE_style}\n className={UNSAFE_className + actionGroupStyle({size, density, orientation, isJustified}, styles)}>\n <ActionButtonGroupContext.Provider value={props}>\n {children}\n </ActionButtonGroupContext.Provider>\n </Toolbar>\n );\n});\n"],"names":[],"version":3,"file":"ActionButtonGroup.mjs.map"}
1
+ {"mappings":";;;;;;AAAA;;;;;;;;;;CAUC;;;;AAsCM,MAAM;;;;;;;;;;;;;;;;;;;;;;;AAyBN,MAAM,0DAA2B,CAAA,GAAA,oBAAY,EAAwD;AAKrG,MAAM,0DAAoB,CAAA,GAAA,iBAAS,EAAE,SAAS,kBAAkB,KAA6B,EAAE,GAAiC;IACrI,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,WACF,UAAU,iBACV,OAAO,kBACP,cAAc,2BACd,WAAW,YACX,QAAQ,oBACR,mBAAmB,kBACnB,YAAY,UACZ,MAAM,EACP,GAAG;IAEJ,qBACE,gBAAC,CAAA,GAAA,cAAM;QACJ,GAAG,KAAK;QACT,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,0CAAiB;kBAAC;qBAAM;yBAAS;yBAAa;QAAW,GAAG;kBAC1F,cAAA,gBAAC,0CAAyB,QAAQ;YAAC,OAAO;sBACvC;;;AAIT","sources":["packages/@react-spectrum/s2/src/ActionButtonGroup.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 {ContextValue, SlotProps, Toolbar} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ActionButtonGroupProps extends UnsafeStyles, SlotProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The children of the group. */\n children: ReactNode,\n /**\n * Size of the buttons.\n * @default \"M\"\n */\n size?: 'XS' | 'S' | 'M' | 'L' | 'XL',\n /**\n * Spacing between the buttons.\n * @default \"regular\"\n */\n density?: 'compact' | 'regular',\n /** Whether the button should be displayed with a [quiet style](https://spectrum.adobe.com/page/action-button/#Quiet). */\n isQuiet?: boolean,\n /** Whether the buttons should divide the container width equally. */\n isJustified?: boolean,\n /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */\n staticColor?: 'white' | 'black' | 'auto',\n /**\n * The axis the group should align with.\n * @default 'horizontal'\n */\n orientation?: 'horizontal' | 'vertical',\n /** Whether the group is disabled. */\n isDisabled?: boolean\n}\n\nexport const actionGroupStyle = style({\n display: 'flex',\n flexDirection: {\n orientation: {\n horizontal: 'row',\n vertical: 'column'\n }\n },\n gap: {\n density: {\n compact: 2,\n regular: {\n size: {\n XS: 4,\n S: 4,\n M: 8,\n L: 8,\n XL: 8\n }\n }\n }\n }\n}, getAllowedOverrides({height: true}));\n\n\nexport const ActionButtonGroupContext = createContext<ContextValue<ActionButtonGroupProps, HTMLDivElement>>(null);\n\n/**\n * An ActionButtonGroup is a grouping of related ActionButtons.\n */\nexport const ActionButtonGroup = forwardRef(function ActionButtonGroup(props: ActionButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, ActionButtonGroupContext);\n let {\n density = 'regular',\n size = 'M',\n orientation = 'horizontal',\n isJustified,\n children,\n UNSAFE_className = '',\n UNSAFE_style,\n styles\n } = props;\n\n return (\n <Toolbar\n {...props}\n ref={ref}\n style={UNSAFE_style}\n className={UNSAFE_className + actionGroupStyle({size, density, orientation, isJustified}, styles)}>\n <ActionButtonGroupContext.Provider value={props}>\n {children}\n </ActionButtonGroupContext.Provider>\n </Toolbar>\n );\n});\n"],"names":[],"version":3,"file":"ActionButtonGroup.mjs.map"}
package/dist/Badge.cjs CHANGED
@@ -101,79 +101,79 @@ const $660a621e3a266afc$var$badge = function anonymous(props, overrides) {
101
101
  rules += ' -oelgqu_A--177861o';
102
102
  rules += ' jbH';
103
103
  rules += ' jG';
104
- if (props.fillStyle === "outline") rules += ' b______k';
104
+ if (props.fillStyle === "outline") rules += ' b______x';
105
105
  else if (props.fillStyle === "subtle") {
106
- if (props.variant === "silver") rules += ' b______j';
107
- else if (props.variant === "cinnamon") rules += ' b______f';
108
- else if (props.variant === "brown") rules += ' b______h';
109
- else if (props.variant === "turquoise") rules += ' b______d';
110
- else if (props.variant === "pink") rules += ' b______b';
111
- else if (props.variant === "magenta") rules += ' b_____9';
112
- else if (props.variant === "fuchsia") rules += ' b_____7';
113
- else if (props.variant === "purple") rules += ' b_____5';
114
- else if (props.variant === "indigo") rules += ' b_____3';
115
- else if (props.variant === "blue") rules += ' b_____G';
116
- else if (props.variant === "cyan") rules += ' b_____1';
117
- else if (props.variant === "seafoam") rules += ' b_____Z';
118
- else if (props.variant === "green") rules += ' b_____P';
119
- else if (props.variant === "celery") rules += ' b_____X';
120
- else if (props.variant === "charteuse") rules += ' b_____V';
121
- else if (props.variant === "yellow") rules += ' b_____T';
122
- else if (props.variant === "orange") rules += ' b_____R';
123
- else if (props.variant === "red") rules += ' b_____M';
124
- else if (props.variant === "gray") rules += ' b_____J';
125
- else if (props.variant === "negative") rules += ' b_____M';
126
- else if (props.variant === "notice") rules += ' b_____R';
127
- else if (props.variant === "positive") rules += ' b_____P';
128
- else if (props.variant === "neutral") rules += ' b_____J';
129
- else if (props.variant === "informative") rules += ' b_____G';
130
- else if (props.variant === "accent") rules += ' b_____G';
106
+ if (props.variant === "silver") rules += ' b______w';
107
+ else if (props.variant === "cinnamon") rules += ' b______s';
108
+ else if (props.variant === "brown") rules += ' b______u';
109
+ else if (props.variant === "turquoise") rules += ' b______q';
110
+ else if (props.variant === "pink") rules += ' b______o';
111
+ else if (props.variant === "magenta") rules += ' b______m';
112
+ else if (props.variant === "fuchsia") rules += ' b______k';
113
+ else if (props.variant === "purple") rules += ' b______i';
114
+ else if (props.variant === "indigo") rules += ' b______g';
115
+ else if (props.variant === "blue") rules += ' b_____T';
116
+ else if (props.variant === "cyan") rules += ' b______e';
117
+ else if (props.variant === "seafoam") rules += ' b______c';
118
+ else if (props.variant === "green") rules += ' b_____2';
119
+ else if (props.variant === "celery") rules += ' b______a';
120
+ else if (props.variant === "charteuse") rules += ' b_____8';
121
+ else if (props.variant === "yellow") rules += ' b_____6';
122
+ else if (props.variant === "orange") rules += ' b_____4';
123
+ else if (props.variant === "red") rules += ' b_____Z';
124
+ else if (props.variant === "gray") rules += ' b_____W';
125
+ else if (props.variant === "negative") rules += ' b_____Z';
126
+ else if (props.variant === "notice") rules += ' b_____4';
127
+ else if (props.variant === "positive") rules += ' b_____2';
128
+ else if (props.variant === "neutral") rules += ' b_____W';
129
+ else if (props.variant === "informative") rules += ' b_____T';
130
+ else if (props.variant === "accent") rules += ' b_____T';
131
131
  } else if (props.fillStyle === "bold") {
132
- if (props.variant === "silver") rules += ' b______i';
133
- else if (props.variant === "cinnamon") rules += ' b______e';
134
- else if (props.variant === "brown") rules += ' b______g';
135
- else if (props.variant === "turquoise") rules += ' b______c';
136
- else if (props.variant === "pink") rules += ' b______a';
137
- else if (props.variant === "magenta") rules += ' b_____8';
138
- else if (props.variant === "fuchsia") rules += ' b_____6';
139
- else if (props.variant === "purple") rules += ' b_____4';
140
- else if (props.variant === "indigo") rules += ' b_____2';
141
- else if (props.variant === "blue") rules += ' b_____E';
142
- else if (props.variant === "cyan") rules += ' b_____0';
143
- else if (props.variant === "seafoam") rules += ' b_____Y';
144
- else if (props.variant === "green") rules += ' b_____N';
145
- else if (props.variant === "celery") rules += ' b_____W';
146
- else if (props.variant === "charteuse") rules += ' b_____U';
147
- else if (props.variant === "yellow") rules += ' b_____S';
148
- else if (props.variant === "orange") rules += ' b_____Q';
149
- else if (props.variant === "red") rules += ' b_____K';
150
- else if (props.variant === "gray") rules += ' b_____H';
132
+ if (props.variant === "silver") rules += ' b______v';
133
+ else if (props.variant === "cinnamon") rules += ' b______r';
134
+ else if (props.variant === "brown") rules += ' b______t';
135
+ else if (props.variant === "turquoise") rules += ' b______p';
136
+ else if (props.variant === "pink") rules += ' b______n';
137
+ else if (props.variant === "magenta") rules += ' b______l';
138
+ else if (props.variant === "fuchsia") rules += ' b______j';
139
+ else if (props.variant === "purple") rules += ' b______h';
140
+ else if (props.variant === "indigo") rules += ' b______f';
141
+ else if (props.variant === "blue") rules += ' b_____R';
142
+ else if (props.variant === "cyan") rules += ' b______d';
143
+ else if (props.variant === "seafoam") rules += ' b______b';
144
+ else if (props.variant === "green") rules += ' b_____0';
145
+ else if (props.variant === "celery") rules += ' b_____9';
146
+ else if (props.variant === "charteuse") rules += ' b_____7';
147
+ else if (props.variant === "yellow") rules += ' b_____5';
148
+ else if (props.variant === "orange") rules += ' b_____3';
149
+ else if (props.variant === "red") rules += ' b_____X';
150
+ else if (props.variant === "gray") rules += ' b_____U';
151
151
  else if (props.variant === "negative") {
152
- if (props.isPressed) rules += ' b_____L';
153
- else if (props.isFocusVisible) rules += ' b_____L';
154
- else if (props.isHovered) rules += ' b_____L';
155
- else rules += ' b_____K';
156
- } else if (props.variant === "notice") rules += ' b_____Q';
152
+ if (props.isPressed) rules += ' b_____Y';
153
+ else if (props.isFocusVisible) rules += ' b_____Y';
154
+ else if (props.isHovered) rules += ' b_____Y';
155
+ else rules += ' b_____X';
156
+ } else if (props.variant === "notice") rules += ' b_____3';
157
157
  else if (props.variant === "positive") {
158
- if (props.isPressed) rules += ' b_____O';
159
- else if (props.isFocusVisible) rules += ' b_____O';
160
- else if (props.isHovered) rules += ' b_____O';
161
- else rules += ' b_____N';
158
+ if (props.isPressed) rules += ' b_____1';
159
+ else if (props.isFocusVisible) rules += ' b_____1';
160
+ else if (props.isHovered) rules += ' b_____1';
161
+ else rules += ' b_____0';
162
162
  } else if (props.variant === "neutral") {
163
- if (props.isPressed) rules += ' b_____I';
164
- else if (props.isFocusVisible) rules += ' b_____I';
165
- else if (props.isHovered) rules += ' b_____I';
166
- else rules += ' b_____H';
163
+ if (props.isPressed) rules += ' b_____V';
164
+ else if (props.isFocusVisible) rules += ' b_____V';
165
+ else if (props.isHovered) rules += ' b_____V';
166
+ else rules += ' b_____U';
167
167
  } else if (props.variant === "informative") {
168
- if (props.isPressed) rules += ' b_____F';
169
- else if (props.isFocusVisible) rules += ' b_____F';
170
- else if (props.isHovered) rules += ' b_____F';
171
- else rules += ' b_____E';
168
+ if (props.isPressed) rules += ' b_____S';
169
+ else if (props.isFocusVisible) rules += ' b_____S';
170
+ else if (props.isHovered) rules += ' b_____S';
171
+ else rules += ' b_____R';
172
172
  } else if (props.variant === "accent") {
173
- if (props.isPressed) rules += ' b_____F';
174
- else if (props.isFocusVisible) rules += ' b_____F';
175
- else if (props.isHovered) rules += ' b_____F';
176
- else rules += ' b_____E';
173
+ if (props.isPressed) rules += ' b_____S';
174
+ else if (props.isFocusVisible) rules += ' b_____S';
175
+ else if (props.isHovered) rules += ' b_____S';
176
+ else rules += ' b_____R';
177
177
  }
178
178
  }
179
179
  rules += ' wa';