@react-spectrum/s2 0.10.0 → 0.11.0

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 (296) 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 +62 -62
  5. package/dist/ActionBar.css +61 -61
  6. package/dist/ActionBar.mjs +62 -62
  7. package/dist/ActionButton.cjs +202 -202
  8. package/dist/ActionButton.css +138 -138
  9. package/dist/ActionButton.mjs +202 -202
  10. package/dist/ActionButtonGroup.cjs +15 -15
  11. package/dist/ActionButtonGroup.css +9 -9
  12. package/dist/ActionButtonGroup.mjs +15 -15
  13. package/dist/Add.cjs +10 -10
  14. package/dist/Add.css +6 -6
  15. package/dist/Add.mjs +10 -10
  16. package/dist/AlertDialog.cjs +3 -3
  17. package/dist/AlertDialog.css +3 -3
  18. package/dist/AlertDialog.mjs +3 -3
  19. package/dist/Asterisk.cjs +6 -6
  20. package/dist/Asterisk.css +4 -4
  21. package/dist/Asterisk.mjs +6 -6
  22. package/dist/Avatar.cjs +14 -14
  23. package/dist/Avatar.css +14 -14
  24. package/dist/Avatar.mjs +14 -14
  25. package/dist/AvatarGroup.cjs +134 -134
  26. package/dist/AvatarGroup.css +33 -33
  27. package/dist/AvatarGroup.mjs +134 -134
  28. package/dist/Badge.cjs +206 -206
  29. package/dist/Badge.css +127 -127
  30. package/dist/Badge.mjs +206 -206
  31. package/dist/Breadcrumbs.cjs +254 -254
  32. package/dist/Breadcrumbs.css +109 -109
  33. package/dist/Breadcrumbs.mjs +254 -254
  34. package/dist/Button.cjs +341 -341
  35. package/dist/Button.css +177 -177
  36. package/dist/Button.mjs +341 -341
  37. package/dist/ButtonGroup.cjs +20 -20
  38. package/dist/ButtonGroup.css +15 -15
  39. package/dist/ButtonGroup.mjs +20 -20
  40. package/dist/Calendar.cjs +151 -139
  41. package/dist/Calendar.cjs.map +1 -1
  42. package/dist/Calendar.css +134 -134
  43. package/dist/Calendar.css.map +1 -1
  44. package/dist/Calendar.mjs +153 -141
  45. package/dist/Calendar.mjs.map +1 -1
  46. package/dist/Card.cjs +304 -304
  47. package/dist/Card.css +209 -209
  48. package/dist/Card.mjs +304 -304
  49. package/dist/CardView.cjs +16 -16
  50. package/dist/CardView.css +16 -16
  51. package/dist/CardView.mjs +16 -16
  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 +170 -170
  56. package/dist/Checkbox.css +92 -92
  57. package/dist/Checkbox.mjs +170 -170
  58. package/dist/CheckboxGroup.cjs +45 -45
  59. package/dist/CheckboxGroup.css +38 -38
  60. package/dist/CheckboxGroup.mjs +45 -45
  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 +32 -32
  77. package/dist/ColorField.css +28 -28
  78. package/dist/ColorField.mjs +32 -32
  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 +118 -118
  83. package/dist/ColorSlider.css +54 -54
  84. package/dist/ColorSlider.mjs +118 -118
  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 +415 -400
  95. package/dist/ComboBox.cjs.map +1 -1
  96. package/dist/ComboBox.css +181 -181
  97. package/dist/ComboBox.css.map +1 -1
  98. package/dist/ComboBox.mjs +415 -400
  99. package/dist/ComboBox.mjs.map +1 -1
  100. package/dist/ContextualHelp.cjs +5 -5
  101. package/dist/ContextualHelp.css +60 -60
  102. package/dist/ContextualHelp.mjs +5 -5
  103. package/dist/Cross.cjs +14 -14
  104. package/dist/Cross.css +10 -10
  105. package/dist/Cross.mjs +14 -14
  106. package/dist/CustomDialog.cjs +25 -25
  107. package/dist/CustomDialog.css +25 -25
  108. package/dist/CustomDialog.mjs +25 -25
  109. package/dist/Dash.cjs +10 -10
  110. package/dist/Dash.css +6 -6
  111. package/dist/Dash.mjs +10 -10
  112. package/dist/DateField.cjs +73 -73
  113. package/dist/DateField.css +77 -77
  114. package/dist/DateField.mjs +73 -73
  115. package/dist/DatePicker.cjs +182 -185
  116. package/dist/DatePicker.cjs.map +1 -1
  117. package/dist/DatePicker.css +126 -126
  118. package/dist/DatePicker.css.map +1 -1
  119. package/dist/DatePicker.mjs +182 -185
  120. package/dist/DatePicker.mjs.map +1 -1
  121. package/dist/DateRangePicker.cjs +58 -61
  122. package/dist/DateRangePicker.cjs.map +1 -1
  123. package/dist/DateRangePicker.css +60 -60
  124. package/dist/DateRangePicker.css.map +1 -1
  125. package/dist/DateRangePicker.mjs +58 -61
  126. package/dist/DateRangePicker.mjs.map +1 -1
  127. package/dist/Dialog.cjs +17 -17
  128. package/dist/Dialog.css +82 -82
  129. package/dist/Dialog.mjs +17 -17
  130. package/dist/Disclosure.cjs +135 -135
  131. package/dist/Disclosure.css +106 -106
  132. package/dist/Disclosure.mjs +135 -135
  133. package/dist/Divider.cjs +25 -25
  134. package/dist/Divider.css +25 -25
  135. package/dist/Divider.mjs +25 -25
  136. package/dist/DropZone.cjs +62 -62
  137. package/dist/DropZone.css +58 -58
  138. package/dist/DropZone.mjs +62 -62
  139. package/dist/Field.cjs +370 -370
  140. package/dist/Field.cjs.map +1 -1
  141. package/dist/Field.css +142 -142
  142. package/dist/Field.mjs +370 -370
  143. package/dist/Field.mjs.map +1 -1
  144. package/dist/Form.cjs +9 -9
  145. package/dist/Form.css +9 -9
  146. package/dist/Form.mjs +9 -9
  147. package/dist/FullscreenDialog.cjs +5 -5
  148. package/dist/FullscreenDialog.css +91 -91
  149. package/dist/FullscreenDialog.mjs +5 -5
  150. package/dist/IllustratedMessage.cjs +256 -256
  151. package/dist/IllustratedMessage.css +78 -78
  152. package/dist/IllustratedMessage.mjs +256 -256
  153. package/dist/Image.cjs +13 -13
  154. package/dist/Image.css +14 -14
  155. package/dist/Image.mjs +13 -13
  156. package/dist/InlineAlert.cjs +117 -117
  157. package/dist/InlineAlert.css +98 -98
  158. package/dist/InlineAlert.mjs +117 -117
  159. package/dist/Link.cjs +54 -54
  160. package/dist/Link.css +46 -46
  161. package/dist/Link.mjs +54 -54
  162. package/dist/LinkOut.cjs +8 -8
  163. package/dist/LinkOut.css +8 -8
  164. package/dist/LinkOut.mjs +8 -8
  165. package/dist/Menu.cjs +459 -459
  166. package/dist/Menu.css +185 -185
  167. package/dist/Menu.mjs +459 -459
  168. package/dist/Meter.cjs +163 -163
  169. package/dist/Meter.css +93 -93
  170. package/dist/Meter.mjs +163 -163
  171. package/dist/Modal.cjs +58 -58
  172. package/dist/Modal.css +50 -50
  173. package/dist/Modal.mjs +58 -58
  174. package/dist/NotificationBadge.cjs +58 -58
  175. package/dist/NotificationBadge.css +51 -51
  176. package/dist/NotificationBadge.mjs +58 -58
  177. package/dist/NumberField.cjs +115 -115
  178. package/dist/NumberField.css +100 -100
  179. package/dist/NumberField.mjs +115 -115
  180. package/dist/Picker.cjs +283 -283
  181. package/dist/Picker.css +169 -169
  182. package/dist/Picker.mjs +283 -283
  183. package/dist/Popover.cjs +86 -86
  184. package/dist/Popover.css +66 -66
  185. package/dist/Popover.mjs +86 -86
  186. package/dist/ProgressBar.cjs +173 -173
  187. package/dist/ProgressBar.css +101 -101
  188. package/dist/ProgressBar.mjs +173 -173
  189. package/dist/ProgressCircle.cjs +31 -31
  190. package/dist/ProgressCircle.css +24 -24
  191. package/dist/ProgressCircle.mjs +31 -31
  192. package/dist/Provider.cjs +11 -11
  193. package/dist/Provider.css +10 -10
  194. package/dist/Provider.mjs +11 -11
  195. package/dist/Radio.cjs +154 -154
  196. package/dist/Radio.css +79 -79
  197. package/dist/Radio.mjs +154 -154
  198. package/dist/RadioGroup.cjs +42 -42
  199. package/dist/RadioGroup.css +38 -38
  200. package/dist/RadioGroup.mjs +42 -42
  201. package/dist/RangeCalendar.cjs +32 -20
  202. package/dist/RangeCalendar.cjs.map +1 -1
  203. package/dist/RangeCalendar.css +10 -10
  204. package/dist/RangeCalendar.css.map +1 -1
  205. package/dist/RangeCalendar.mjs +34 -22
  206. package/dist/RangeCalendar.mjs.map +1 -1
  207. package/dist/SearchField.cjs +42 -42
  208. package/dist/SearchField.css +46 -46
  209. package/dist/SearchField.mjs +42 -42
  210. package/dist/SegmentedControl.cjs +181 -181
  211. package/dist/SegmentedControl.css +118 -118
  212. package/dist/SegmentedControl.mjs +181 -181
  213. package/dist/SelectBoxGroup.cjs +342 -0
  214. package/dist/SelectBoxGroup.cjs.map +1 -0
  215. package/dist/SelectBoxGroup.css +503 -0
  216. package/dist/SelectBoxGroup.css.map +1 -0
  217. package/dist/SelectBoxGroup.mjs +335 -0
  218. package/dist/SelectBoxGroup.mjs.map +1 -0
  219. package/dist/SkeletonCollection.cjs +6 -1
  220. package/dist/SkeletonCollection.cjs.map +1 -1
  221. package/dist/SkeletonCollection.mjs +7 -2
  222. package/dist/SkeletonCollection.mjs.map +1 -1
  223. package/dist/Slider.cjs +299 -299
  224. package/dist/Slider.css +151 -151
  225. package/dist/Slider.mjs +299 -299
  226. package/dist/StatusLight.cjs +125 -125
  227. package/dist/StatusLight.css +61 -61
  228. package/dist/StatusLight.mjs +125 -125
  229. package/dist/Switch.cjs +162 -162
  230. package/dist/Switch.css +74 -74
  231. package/dist/Switch.mjs +162 -162
  232. package/dist/TableView.cjs +319 -319
  233. package/dist/TableView.css +172 -172
  234. package/dist/TableView.mjs +319 -319
  235. package/dist/Tabs.cjs +213 -188
  236. package/dist/Tabs.cjs.map +1 -1
  237. package/dist/Tabs.css +105 -101
  238. package/dist/Tabs.css.map +1 -1
  239. package/dist/Tabs.mjs +213 -188
  240. package/dist/Tabs.mjs.map +1 -1
  241. package/dist/TabsPicker.cjs +127 -127
  242. package/dist/TabsPicker.css +111 -111
  243. package/dist/TabsPicker.mjs +127 -127
  244. package/dist/TagGroup.cjs +213 -213
  245. package/dist/TagGroup.css +147 -147
  246. package/dist/TagGroup.mjs +213 -213
  247. package/dist/TextField.cjs +59 -59
  248. package/dist/TextField.css +54 -54
  249. package/dist/TextField.mjs +59 -59
  250. package/dist/TimeField.cjs +52 -52
  251. package/dist/TimeField.css +48 -48
  252. package/dist/TimeField.mjs +52 -52
  253. package/dist/Toast.cjs +120 -120
  254. package/dist/Toast.css +107 -107
  255. package/dist/Toast.mjs +120 -120
  256. package/dist/ToggleButton.cjs +3 -3
  257. package/dist/ToggleButton.css +12 -12
  258. package/dist/ToggleButton.mjs +3 -3
  259. package/dist/Tooltip.cjs +83 -83
  260. package/dist/Tooltip.css +70 -70
  261. package/dist/Tooltip.mjs +83 -83
  262. package/dist/TreeView.cjs +146 -146
  263. package/dist/TreeView.css +147 -147
  264. package/dist/TreeView.mjs +146 -146
  265. package/dist/main.cjs +5 -0
  266. package/dist/main.cjs.map +1 -1
  267. package/dist/module.mjs +3 -1
  268. package/dist/module.mjs.map +1 -1
  269. package/dist/types.d.ts +43 -1
  270. package/dist/types.d.ts.map +1 -1
  271. package/icons/Icon.cjs +10 -10
  272. package/icons/Icon.css +9 -9
  273. package/icons/Icon.mjs +10 -10
  274. package/icons/Skeleton.cjs +2 -2
  275. package/icons/Skeleton.cjs.map +1 -1
  276. package/icons/Skeleton.css +6 -6
  277. package/icons/Skeleton.mjs +2 -2
  278. package/icons/Skeleton.mjs.map +1 -1
  279. package/package.json +21 -21
  280. package/src/Calendar.tsx +13 -6
  281. package/src/ComboBox.tsx +20 -5
  282. package/src/DatePicker.tsx +1 -7
  283. package/src/DateRangePicker.tsx +1 -7
  284. package/src/RangeCalendar.tsx +13 -6
  285. package/src/SelectBoxGroup.tsx +408 -0
  286. package/src/SkeletonCollection.tsx +6 -2
  287. package/src/Tabs.tsx +49 -24
  288. package/src/index.ts +2 -0
  289. package/style/__tests__/style-macro.test.js +162 -166
  290. package/style/dist/main.cjs +24 -24
  291. package/style/dist/module.mjs +13 -13
  292. package/style/dist/properties.mjs +3 -3
  293. package/style/dist/spectrum-theme.cjs +219 -219
  294. package/style/dist/spectrum-theme.mjs +210 -210
  295. package/style/dist/style-macro.cjs +80 -80
  296. package/style/dist/style-macro.mjs +75 -75
@@ -37,25 +37,25 @@ describe('style-macro', () => {
37
37
  });
38
38
 
39
39
  expect(css).toMatchInlineSnapshot(`
40
- "@layer _.a, _.b, _.c;
40
+ "@layer _.a, _.b, _.c;
41
41
 
42
- @layer _.b {
43
- .Jbs92:first-child {
44
- margin-top: 0.25rem;
45
- }
46
- }
42
+ @layer _.b {
43
+ .Jbs11:first-child {
44
+ margin-top: 0.25rem;
45
+ }
46
+ }
47
47
 
48
- @layer _.c.p {
49
- @media (min-width: 64rem) {
50
- .Jbpv92:first-child {
51
- margin-top: 0.5rem;
52
- }
53
- }
54
- }
48
+ @layer _.c.p {
49
+ @media (min-width: 64rem) {
50
+ .Jbpv11:first-child {
51
+ margin-top: 0.5rem;
52
+ }
53
+ }
54
+ }
55
55
 
56
- "
57
- `);
58
- expect(js).toMatchInlineSnapshot('" Jbs92 Jbpv92"');
56
+ "
57
+ `);
58
+ expect(js).toMatchInlineSnapshot('" Jbs11 Jbpv11"');
59
59
  });
60
60
 
61
61
  it('should support self references', () => {
@@ -66,60 +66,58 @@ describe('style-macro', () => {
66
66
  });
67
67
 
68
68
  expect(css).toMatchInlineSnapshot(`
69
- "@layer _.a;
69
+ "@layer _.a;
70
70
 
71
- @layer _.a {
72
- ._kc92 {
73
- border-top-width: 2px;
74
- }
71
+ @layer _.a {
72
+ ._kc11 {
73
+ border-top-width: 2px;
74
+ }
75
75
 
76
76
 
77
- .hc92 {
78
- border-bottom-width: 2px;
79
- }
77
+ .hc11 {
78
+ border-bottom-width: 2px;
79
+ }
80
80
 
81
81
 
82
- .mCPFGYc92 {
83
- border-inline-start-width: var(--m);
84
- }
82
+ .mCPFGYc11 {
83
+ border-inline-start-width: var(--m);
84
+ }
85
85
 
86
86
 
87
- .lc92 {
88
- border-inline-end-width: 2px;
89
- }
87
+ .lc11 {
88
+ border-inline-end-width: 2px;
89
+ }
90
90
 
91
91
 
92
- .SMBFGYc92 {
93
- padding-inline-start: var(--S);
94
- }
92
+ .SMBFGYc11 {
93
+ padding-inline-start: var(--S);
94
+ }
95
95
 
96
96
 
97
- .Rv92 {
98
- padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
99
- }
97
+ .Rv11 {
98
+ padding-inline-end: calc(var(--F, var(--M)) * 3 / 8);
99
+ }
100
100
 
101
101
 
102
- .ZjUQgKd92 {
103
- width: calc(200px - var(--m) - var(--S));
104
- }
102
+ .ZjUQgKd11 {
103
+ width: calc(200px - var(--m) - var(--S));
104
+ }
105
105
 
106
106
 
107
- .-m_-mc92 {
108
- --m: 2px;
109
- }
107
+ .-m_-mc11 {
108
+ --m: 2px;
109
+ }
110
110
 
111
111
 
112
- .-S_-Sv92 {
113
- --S: calc(var(--F, var(--M)) * 3 / 8);
114
- }
115
- }
112
+ .-S_-Sv11 {
113
+ --S: calc(var(--F, var(--M)) * 3 / 8);
114
+ }
115
+ }
116
116
 
117
- "
118
- `);
117
+ "
118
+ `);
119
119
 
120
- expect(js).toMatchInlineSnapshot(
121
- '" _kc92 hc92 mCPFGYc92 lc92 SMBFGYc92 Rv92 ZjUQgKd92 -m_-mc92 -S_-Sv92"'
122
- );
120
+ expect(js).toMatchInlineSnapshot('" _kc11 hc11 mCPFGYc11 lc11 SMBFGYc11 Rv11 ZjUQgKd11 -m_-mc11 -S_-Sv11"');
123
121
  });
124
122
 
125
123
  it('should support allowed overrides', () => {
@@ -136,9 +134,9 @@ describe('style-macro', () => {
136
134
  color: 'green-400'
137
135
  });
138
136
 
139
- expect(js()).toMatchInlineSnapshot('" gw92 pg92"');
140
- expect(overrides).toMatchInlineSnapshot('" g8tmWqb92 pHJ3AUd92"');
141
- expect(js({}, overrides)).toMatchInlineSnapshot('" g8tmWqb92 pg92"');
137
+ expect(js()).toMatchInlineSnapshot('" gw11 pg11"');
138
+ expect(overrides).toMatchInlineSnapshot('" g8tmWqb11 pHJ3AUd11"');
139
+ expect(js({}, overrides)).toMatchInlineSnapshot('" g8tmWqb11 pg11"');
142
140
  });
143
141
 
144
142
  it('should support allowed overrides for properties that expand into multiple', () => {
@@ -153,9 +151,9 @@ describe('style-macro', () => {
153
151
  translateX: 40
154
152
  });
155
153
 
156
- expect(js()).toMatchInlineSnapshot('" -_7PloMd-B92 __Ya92"');
157
- expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D92 __Ya92"');
158
- expect(js({}, overrides)).toMatchInlineSnapshot('" -_7PloMd-D92 __Ya92"');
154
+ expect(js()).toMatchInlineSnapshot('" -_7PloMd-B11 __Ya11"');
155
+ expect(overrides).toMatchInlineSnapshot('" -_7PloMd-D11 __Ya11"');
156
+ expect(js({}, overrides)).toMatchInlineSnapshot('" -_7PloMd-D11 __Ya11"');
159
157
  });
160
158
 
161
159
  it('should support allowed overrides for shorthands', () => {
@@ -170,9 +168,9 @@ describe('style-macro', () => {
170
168
  padding: 40
171
169
  });
172
170
 
173
- expect(js()).toMatchInlineSnapshot('" Tk92 Qk92 Sk92 Rk92"');
174
- expect(overrides).toMatchInlineSnapshot('" Tm92 Qm92 Sm92 Rm92"');
175
- expect(js({}, overrides)).toMatchInlineSnapshot('" Tm92 Qm92 Sm92 Rm92"');
171
+ expect(js()).toMatchInlineSnapshot('" Tk11 Qk11 Sk11 Rk11"');
172
+ expect(overrides).toMatchInlineSnapshot('" Tm11 Qm11 Sm11 Rm11"');
173
+ expect(js({}, overrides)).toMatchInlineSnapshot('" Tm11 Qm11 Sm11 Rm11"');
176
174
  });
177
175
 
178
176
  it("should support allowed overrides for values that aren't defined", () => {
@@ -187,9 +185,9 @@ describe('style-macro', () => {
187
185
  minWidth: 32
188
186
  });
189
187
 
190
- expect(js()).toMatchInlineSnapshot('" gE92"');
191
- expect(overrides).toMatchInlineSnapshot('" Nk92"');
192
- expect(js({}, overrides)).toMatchInlineSnapshot('" Nk92 gE92"');
188
+ expect(js()).toMatchInlineSnapshot('" gE11"');
189
+ expect(overrides).toMatchInlineSnapshot('" Nk11"');
190
+ expect(js({}, overrides)).toMatchInlineSnapshot('" Nk11 gE11"');
193
191
  });
194
192
 
195
193
  it('should support runtime conditions', () => {
@@ -207,45 +205,45 @@ describe('style-macro', () => {
207
205
  });
208
206
 
209
207
  expect(css).toMatchInlineSnapshot(`
210
- "@layer _.a;
208
+ "@layer _.a;
211
209
 
212
- @layer _.a {
213
- .gH92 {
214
- background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
215
- }
210
+ @layer _.a {
211
+ .gH11 {
212
+ background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
213
+ }
216
214
 
217
215
 
218
- .gF92 {
219
- background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
220
- }
216
+ .gF11 {
217
+ background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
218
+ }
221
219
 
222
220
 
223
- .gE92 {
224
- background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
225
- }
221
+ .gE11 {
222
+ background-color: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
223
+ }
226
224
 
227
225
 
228
- .pt92 {
229
- color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
230
- }
226
+ .pt11 {
227
+ color: light-dark(rgb(41, 41, 41), rgb(219, 219, 219));
228
+ }
231
229
 
232
230
 
233
- .po92 {
234
- color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
235
- }
231
+ .po11 {
232
+ color: light-dark(rgb(19, 19, 19), rgb(242, 242, 242));
233
+ }
236
234
 
237
235
 
238
- .pm92 {
239
- color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
240
- }
241
- }
236
+ .pm11 {
237
+ color: light-dark(rgb(0, 0, 0), rgb(255, 255, 255));
238
+ }
239
+ }
242
240
 
243
- "
244
- `);
241
+ "
242
+ `);
245
243
 
246
- expect(js({})).toMatchInlineSnapshot('" gH92 pt92"');
247
- expect(js({isHovered: true})).toMatchInlineSnapshot('" gF92 po92"');
248
- expect(js({isPressed: true})).toMatchInlineSnapshot('" gE92 pm92"');
244
+ expect(js({})).toMatchInlineSnapshot('" gH11 pt11"');
245
+ expect(js({isHovered: true})).toMatchInlineSnapshot('" gF11 po11"');
246
+ expect(js({isPressed: true})).toMatchInlineSnapshot('" gE11 pm11"');
249
247
  });
250
248
 
251
249
  it('should support nested runtime conditions', () => {
@@ -261,37 +259,35 @@ describe('style-macro', () => {
261
259
  });
262
260
 
263
261
  expect(css).toMatchInlineSnapshot(`
264
- "@layer _.a;
262
+ "@layer _.a;
265
263
 
266
- @layer _.a {
267
- .gH92 {
268
- background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
269
- }
264
+ @layer _.a {
265
+ .gH11 {
266
+ background-color: light-dark(rgb(233, 233, 233), rgb(44, 44, 44));
267
+ }
270
268
 
271
269
 
272
- .gF92 {
273
- background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
274
- }
270
+ .gF11 {
271
+ background-color: light-dark(rgb(225, 225, 225), rgb(50, 50, 50));
272
+ }
275
273
 
276
274
 
277
- .g_h92 {
278
- background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
279
- }
275
+ .g_h11 {
276
+ background-color: light-dark(rgb(75, 117, 255), rgb(64, 105, 253));
277
+ }
280
278
 
281
279
 
282
- .g392 {
283
- background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
284
- }
285
- }
280
+ .g311 {
281
+ background-color: light-dark(rgb(59, 99, 251), rgb(86, 129, 255));
282
+ }
283
+ }
286
284
 
287
- "
288
- `);
289
- expect(js({})).toMatchInlineSnapshot('" gH92"');
290
- expect(js({isHovered: true})).toMatchInlineSnapshot('" gF92"');
291
- expect(js({isSelected: true})).toMatchInlineSnapshot('" g_h92"');
292
- expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot(
293
- '" g392"'
294
- );
285
+ "
286
+ `);
287
+ expect(js({})).toMatchInlineSnapshot('" gH11"');
288
+ expect(js({isHovered: true})).toMatchInlineSnapshot('" gF11"');
289
+ expect(js({isSelected: true})).toMatchInlineSnapshot('" g_h11"');
290
+ expect(js({isSelected: true, isHovered: true})).toMatchInlineSnapshot('" g311"');
295
291
  });
296
292
 
297
293
  it('should support variant runtime conditions', () => {
@@ -305,9 +301,9 @@ describe('style-macro', () => {
305
301
  }
306
302
  });
307
303
 
308
- expect(js({variant: 'accent'})).toMatchInlineSnapshot('" gY92"');
309
- expect(js({variant: 'primary'})).toMatchInlineSnapshot('" gjQquMe92"');
310
- expect(js({variant: 'secondary'})).toMatchInlineSnapshot('" gw92"');
304
+ expect(js({variant: 'accent'})).toMatchInlineSnapshot('" gY11"');
305
+ expect(js({variant: 'primary'})).toMatchInlineSnapshot('" gjQquMe11"');
306
+ expect(js({variant: 'secondary'})).toMatchInlineSnapshot('" gw11"');
311
307
  });
312
308
 
313
309
  it('supports runtime conditions nested inside css conditions', () => {
@@ -321,28 +317,28 @@ describe('style-macro', () => {
321
317
  });
322
318
 
323
319
  expect(css).toMatchInlineSnapshot(`
324
- "@layer _.a, _.b;
320
+ "@layer _.a, _.b;
325
321
 
326
- @layer _.b.l {
327
- @media (forced-colors: active) {
328
- .plb92 {
329
- color: ButtonText;
330
- }
331
- }
322
+ @layer _.b.l {
323
+ @media (forced-colors: active) {
324
+ .plb11 {
325
+ color: ButtonText;
326
+ }
327
+ }
332
328
 
333
329
 
334
- @media (forced-colors: active) {
335
- .ple92 {
336
- color: HighlightText;
337
- }
338
- }
339
- }
330
+ @media (forced-colors: active) {
331
+ .ple11 {
332
+ color: HighlightText;
333
+ }
334
+ }
335
+ }
340
336
 
341
- "
342
- `);
337
+ "
338
+ `);
343
339
 
344
- expect(js({})).toMatchInlineSnapshot('" plb92"');
345
- expect(js({isSelected: true})).toMatchInlineSnapshot('" ple92"');
340
+ expect(js({})).toMatchInlineSnapshot('" plb11"');
341
+ expect(js({isSelected: true})).toMatchInlineSnapshot('" ple11"');
346
342
  });
347
343
 
348
344
  it('should expand shorthand properties to longhands', () => {
@@ -350,33 +346,33 @@ describe('style-macro', () => {
350
346
  padding: 24
351
347
  });
352
348
 
353
- expect(js).toMatchInlineSnapshot('" Th92 Qh92 Sh92 Rh92"');
349
+ expect(js).toMatchInlineSnapshot('" Th11 Qh11 Sh11 Rh11"');
354
350
  expect(css).toMatchInlineSnapshot(`
355
- "@layer _.a;
351
+ "@layer _.a;
356
352
 
357
- @layer _.a {
358
- .Th92 {
359
- padding-top: 24px;
360
- }
353
+ @layer _.a {
354
+ .Th11 {
355
+ padding-top: 24px;
356
+ }
361
357
 
362
358
 
363
- .Qh92 {
364
- padding-bottom: 24px;
365
- }
359
+ .Qh11 {
360
+ padding-bottom: 24px;
361
+ }
366
362
 
367
363
 
368
- .Sh92 {
369
- padding-inline-start: 24px;
370
- }
364
+ .Sh11 {
365
+ padding-inline-start: 24px;
366
+ }
371
367
 
372
368
 
373
- .Rh92 {
374
- padding-inline-end: 24px;
375
- }
376
- }
369
+ .Rh11 {
370
+ padding-inline-end: 24px;
371
+ }
372
+ }
377
373
 
378
- "
379
- `);
374
+ "
375
+ `);
380
376
  });
381
377
 
382
378
  it('should support colors with opacity', () => {
@@ -385,16 +381,16 @@ describe('style-macro', () => {
385
381
  });
386
382
 
387
383
  expect(css).toMatchInlineSnapshot(`
388
- "@layer _.a;
384
+ "@layer _.a;
389
385
 
390
- @layer _.a {
391
- .gpQzfVb92 {
392
- background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
393
- }
394
- }
386
+ @layer _.a {
387
+ .gpQzfVb11 {
388
+ background-color: rgb(from light-dark(rgb(39, 77, 234), rgb(105, 149, 254)) r g b / 50%);
389
+ }
390
+ }
395
391
 
396
- "
397
- `);
392
+ "
393
+ `);
398
394
  });
399
395
 
400
396
  it('should support setting css variables', () => {
@@ -406,15 +402,15 @@ describe('style-macro', () => {
406
402
  });
407
403
 
408
404
  expect(css).toMatchInlineSnapshot(`
409
- "@layer _.a;
405
+ "@layer _.a;
410
406
 
411
- @layer _.a {
412
- .-FUeYm-gE92 {
413
- --foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
414
- }
415
- }
407
+ @layer _.a {
408
+ .-FUeYm-gE11 {
409
+ --foo: light-dark(rgb(218, 218, 218), rgb(57, 57, 57));
410
+ }
411
+ }
416
412
 
417
- "
418
- `);
413
+ "
414
+ `);
419
415
  });
420
416
  });
@@ -1,22 +1,22 @@
1
- var $364a8b5208b4a0ee$exports = require("./spectrum-theme.cjs");
1
+ var $709ed173fa1293ee$exports = require("./spectrum-theme.cjs");
2
2
 
3
3
 
4
4
  function $parcel$export(e, n, v, s) {
5
5
  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
6
6
  }
7
7
 
8
- $parcel$export(module.exports, "size", () => $149d3f79c0701456$export$346677f925de839c);
9
- $parcel$export(module.exports, "space", () => $149d3f79c0701456$export$a941ed4b947d12f8);
10
- $parcel$export(module.exports, "fontRelative", () => $149d3f79c0701456$export$ba024f4caf693d15);
11
- $parcel$export(module.exports, "focusRing", () => $149d3f79c0701456$export$8e24544ddba725ee);
12
- $parcel$export(module.exports, "iconStyle", () => $149d3f79c0701456$export$dcc3981cc6efe940);
13
- $parcel$export(module.exports, "baseColor", () => $364a8b5208b4a0ee$exports.baseColor);
14
- $parcel$export(module.exports, "color", () => $364a8b5208b4a0ee$exports.color);
15
- $parcel$export(module.exports, "edgeToText", () => $364a8b5208b4a0ee$exports.edgeToText);
16
- $parcel$export(module.exports, "lightDark", () => $364a8b5208b4a0ee$exports.lightDark);
17
- $parcel$export(module.exports, "linearGradient", () => $364a8b5208b4a0ee$exports.linearGradient);
18
- $parcel$export(module.exports, "colorMix", () => $364a8b5208b4a0ee$exports.colorMix);
19
- $parcel$export(module.exports, "style", () => $364a8b5208b4a0ee$exports.style);
8
+ $parcel$export(module.exports, "size", () => $e9b3cd6ccd792adf$export$346677f925de839c);
9
+ $parcel$export(module.exports, "space", () => $e9b3cd6ccd792adf$export$a941ed4b947d12f8);
10
+ $parcel$export(module.exports, "fontRelative", () => $e9b3cd6ccd792adf$export$ba024f4caf693d15);
11
+ $parcel$export(module.exports, "focusRing", () => $e9b3cd6ccd792adf$export$8e24544ddba725ee);
12
+ $parcel$export(module.exports, "iconStyle", () => $e9b3cd6ccd792adf$export$dcc3981cc6efe940);
13
+ $parcel$export(module.exports, "baseColor", () => $709ed173fa1293ee$exports.baseColor);
14
+ $parcel$export(module.exports, "color", () => $709ed173fa1293ee$exports.color);
15
+ $parcel$export(module.exports, "edgeToText", () => $709ed173fa1293ee$exports.edgeToText);
16
+ $parcel$export(module.exports, "lightDark", () => $709ed173fa1293ee$exports.lightDark);
17
+ $parcel$export(module.exports, "linearGradient", () => $709ed173fa1293ee$exports.linearGradient);
18
+ $parcel$export(module.exports, "colorMix", () => $709ed173fa1293ee$exports.colorMix);
19
+ $parcel$export(module.exports, "style", () => $709ed173fa1293ee$exports.style);
20
20
  /*
21
21
  * Copyright 2024 Adobe. All rights reserved.
22
22
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -28,16 +28,16 @@ $parcel$export(module.exports, "style", () => $364a8b5208b4a0ee$exports.style);
28
28
  * OF ANY KIND, either express or implied. See the License for the specific language
29
29
  * governing permissions and limitations under the License.
30
30
  */
31
- function $149d3f79c0701456$export$346677f925de839c(px) {
32
- return `[${(0, $364a8b5208b4a0ee$exports.size)(px)}]`;
31
+ function $e9b3cd6ccd792adf$export$346677f925de839c(px) {
32
+ return `[${(0, $709ed173fa1293ee$exports.size)(px)}]`;
33
33
  }
34
- function $149d3f79c0701456$export$a941ed4b947d12f8(px) {
35
- return `[${(0, $364a8b5208b4a0ee$exports.space)(px)}]`;
34
+ function $e9b3cd6ccd792adf$export$a941ed4b947d12f8(px) {
35
+ return `[${(0, $709ed173fa1293ee$exports.space)(px)}]`;
36
36
  }
37
- function $149d3f79c0701456$export$ba024f4caf693d15(base, baseFontSize) {
38
- return `[${(0, $364a8b5208b4a0ee$exports.fontRelative)(base, baseFontSize)}]`;
37
+ function $e9b3cd6ccd792adf$export$ba024f4caf693d15(base, baseFontSize) {
38
+ return `[${(0, $709ed173fa1293ee$exports.fontRelative)(base, baseFontSize)}]`;
39
39
  }
40
- const $149d3f79c0701456$export$8e24544ddba725ee = ()=>({
40
+ const $e9b3cd6ccd792adf$export$8e24544ddba725ee = ()=>({
41
41
  outlineStyle: {
42
42
  default: 'none',
43
43
  isFocusVisible: 'solid'
@@ -46,22 +46,22 @@ const $149d3f79c0701456$export$8e24544ddba725ee = ()=>({
46
46
  outlineWidth: 2,
47
47
  outlineOffset: 2
48
48
  });
49
- const $149d3f79c0701456$var$iconSizes = {
49
+ const $e9b3cd6ccd792adf$var$iconSizes = {
50
50
  XS: 14,
51
51
  S: 16,
52
52
  M: 20,
53
53
  L: 22,
54
54
  XL: 26
55
55
  };
56
- function $149d3f79c0701456$export$dcc3981cc6efe940(options) {
56
+ function $e9b3cd6ccd792adf$export$dcc3981cc6efe940(options) {
57
57
  let { size: size = 'M', color: color, ...styles } = options;
58
58
  if (color) styles['--iconPrimary'] = {
59
59
  type: 'fill',
60
60
  value: color
61
61
  };
62
- styles['size'] = $149d3f79c0701456$var$iconSizes[size];
62
+ styles['size'] = $e9b3cd6ccd792adf$var$iconSizes[size];
63
63
  // @ts-ignore
64
- return (0, $364a8b5208b4a0ee$exports.style).call(this, styles);
64
+ return (0, $709ed173fa1293ee$exports.style).call(this, styles);
65
65
  }
66
66
 
67
67
 
@@ -1,4 +1,4 @@
1
- import {baseColor as $27684d56c53d4b5c$export$49bbad2a916ab57c, color as $27684d56c53d4b5c$export$35e9368ef982300f, colorMix as $27684d56c53d4b5c$export$9b476054b78b89cd, edgeToText as $27684d56c53d4b5c$export$17b63977b35bb6d2, fontRelative as $27684d56c53d4b5c$export$ba024f4caf693d15, lightDark as $27684d56c53d4b5c$export$d19e682d444755ed, linearGradient as $27684d56c53d4b5c$export$46def8197cf4dd4c, size as $27684d56c53d4b5c$export$346677f925de839c, space as $27684d56c53d4b5c$export$a941ed4b947d12f8, style as $27684d56c53d4b5c$export$1d567c320f4763bc} from "./spectrum-theme.mjs";
1
+ import {baseColor as $204ce7e475877bb1$export$49bbad2a916ab57c, color as $204ce7e475877bb1$export$35e9368ef982300f, colorMix as $204ce7e475877bb1$export$9b476054b78b89cd, edgeToText as $204ce7e475877bb1$export$17b63977b35bb6d2, fontRelative as $204ce7e475877bb1$export$ba024f4caf693d15, lightDark as $204ce7e475877bb1$export$d19e682d444755ed, linearGradient as $204ce7e475877bb1$export$46def8197cf4dd4c, size as $204ce7e475877bb1$export$346677f925de839c, space as $204ce7e475877bb1$export$a941ed4b947d12f8, style as $204ce7e475877bb1$export$1d567c320f4763bc} from "./spectrum-theme.mjs";
2
2
 
3
3
  /*
4
4
  * Copyright 2024 Adobe. All rights reserved.
@@ -11,16 +11,16 @@ import {baseColor as $27684d56c53d4b5c$export$49bbad2a916ab57c, color as $27684d
11
11
  * OF ANY KIND, either express or implied. See the License for the specific language
12
12
  * governing permissions and limitations under the License.
13
13
  */
14
- function $d5eae7056e810ac4$export$346677f925de839c(px) {
15
- return `[${(0, $27684d56c53d4b5c$export$346677f925de839c)(px)}]`;
14
+ function $e3600291d74c3d39$export$346677f925de839c(px) {
15
+ return `[${(0, $204ce7e475877bb1$export$346677f925de839c)(px)}]`;
16
16
  }
17
- function $d5eae7056e810ac4$export$a941ed4b947d12f8(px) {
18
- return `[${(0, $27684d56c53d4b5c$export$a941ed4b947d12f8)(px)}]`;
17
+ function $e3600291d74c3d39$export$a941ed4b947d12f8(px) {
18
+ return `[${(0, $204ce7e475877bb1$export$a941ed4b947d12f8)(px)}]`;
19
19
  }
20
- function $d5eae7056e810ac4$export$ba024f4caf693d15(base, baseFontSize) {
21
- return `[${(0, $27684d56c53d4b5c$export$ba024f4caf693d15)(base, baseFontSize)}]`;
20
+ function $e3600291d74c3d39$export$ba024f4caf693d15(base, baseFontSize) {
21
+ return `[${(0, $204ce7e475877bb1$export$ba024f4caf693d15)(base, baseFontSize)}]`;
22
22
  }
23
- const $d5eae7056e810ac4$export$8e24544ddba725ee = ()=>({
23
+ const $e3600291d74c3d39$export$8e24544ddba725ee = ()=>({
24
24
  outlineStyle: {
25
25
  default: 'none',
26
26
  isFocusVisible: 'solid'
@@ -29,24 +29,24 @@ const $d5eae7056e810ac4$export$8e24544ddba725ee = ()=>({
29
29
  outlineWidth: 2,
30
30
  outlineOffset: 2
31
31
  });
32
- const $d5eae7056e810ac4$var$iconSizes = {
32
+ const $e3600291d74c3d39$var$iconSizes = {
33
33
  XS: 14,
34
34
  S: 16,
35
35
  M: 20,
36
36
  L: 22,
37
37
  XL: 26
38
38
  };
39
- function $d5eae7056e810ac4$export$dcc3981cc6efe940(options) {
39
+ function $e3600291d74c3d39$export$dcc3981cc6efe940(options) {
40
40
  let { size: size = 'M', color: color, ...styles } = options;
41
41
  if (color) styles['--iconPrimary'] = {
42
42
  type: 'fill',
43
43
  value: color
44
44
  };
45
- styles['size'] = $d5eae7056e810ac4$var$iconSizes[size];
45
+ styles['size'] = $e3600291d74c3d39$var$iconSizes[size];
46
46
  // @ts-ignore
47
- return (0, $27684d56c53d4b5c$export$1d567c320f4763bc).call(this, styles);
47
+ return (0, $204ce7e475877bb1$export$1d567c320f4763bc).call(this, styles);
48
48
  }
49
49
 
50
50
 
51
- export {$d5eae7056e810ac4$export$346677f925de839c as size, $d5eae7056e810ac4$export$a941ed4b947d12f8 as space, $d5eae7056e810ac4$export$ba024f4caf693d15 as fontRelative, $d5eae7056e810ac4$export$8e24544ddba725ee as focusRing, $d5eae7056e810ac4$export$dcc3981cc6efe940 as iconStyle, $27684d56c53d4b5c$export$49bbad2a916ab57c as baseColor, $27684d56c53d4b5c$export$35e9368ef982300f as color, $27684d56c53d4b5c$export$17b63977b35bb6d2 as edgeToText, $27684d56c53d4b5c$export$d19e682d444755ed as lightDark, $27684d56c53d4b5c$export$46def8197cf4dd4c as linearGradient, $27684d56c53d4b5c$export$9b476054b78b89cd as colorMix, $27684d56c53d4b5c$export$1d567c320f4763bc as style};
51
+ export {$e3600291d74c3d39$export$346677f925de839c as size, $e3600291d74c3d39$export$a941ed4b947d12f8 as space, $e3600291d74c3d39$export$ba024f4caf693d15 as fontRelative, $e3600291d74c3d39$export$8e24544ddba725ee as focusRing, $e3600291d74c3d39$export$dcc3981cc6efe940 as iconStyle, $204ce7e475877bb1$export$49bbad2a916ab57c as baseColor, $204ce7e475877bb1$export$35e9368ef982300f as color, $204ce7e475877bb1$export$17b63977b35bb6d2 as edgeToText, $204ce7e475877bb1$export$d19e682d444755ed as lightDark, $204ce7e475877bb1$export$46def8197cf4dd4c as linearGradient, $204ce7e475877bb1$export$9b476054b78b89cd as colorMix, $204ce7e475877bb1$export$1d567c320f4763bc as style};
52
52
  //# sourceMappingURL=module.mjs.map