@react-spectrum/s2 3.0.0-nightly-e7053dd8f-250108 → 3.0.0-nightly-e4497fdb6-250110

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 (227) hide show
  1. package/dist/Accordion.cjs +3 -3
  2. package/dist/Accordion.css +2 -2
  3. package/dist/Accordion.mjs +3 -3
  4. package/dist/ActionBar.cjs +32 -32
  5. package/dist/ActionBar.css +34 -34
  6. package/dist/ActionBar.mjs +32 -32
  7. package/dist/ActionButton.cjs +61 -61
  8. package/dist/ActionButton.css +57 -57
  9. package/dist/ActionButton.mjs +61 -61
  10. package/dist/ActionButtonGroup.cjs +4 -4
  11. package/dist/ActionButtonGroup.css +3 -3
  12. package/dist/ActionButtonGroup.mjs +4 -4
  13. package/dist/Avatar.cjs +10 -10
  14. package/dist/Avatar.css +11 -11
  15. package/dist/Avatar.mjs +10 -10
  16. package/dist/AvatarGroup.cjs +97 -97
  17. package/dist/AvatarGroup.css +31 -31
  18. package/dist/AvatarGroup.mjs +97 -97
  19. package/dist/Badge.cjs +31 -31
  20. package/dist/Badge.css +33 -33
  21. package/dist/Badge.mjs +31 -31
  22. package/dist/Breadcrumbs.cjs +83 -82
  23. package/dist/Breadcrumbs.cjs.map +1 -1
  24. package/dist/Breadcrumbs.css +66 -60
  25. package/dist/Breadcrumbs.css.map +1 -1
  26. package/dist/Breadcrumbs.mjs +83 -82
  27. package/dist/Breadcrumbs.mjs.map +1 -1
  28. package/dist/Button.cjs +179 -144
  29. package/dist/Button.cjs.map +1 -1
  30. package/dist/Button.css +167 -86
  31. package/dist/Button.css.map +1 -1
  32. package/dist/Button.mjs +180 -145
  33. package/dist/Button.mjs.map +1 -1
  34. package/dist/ButtonGroup.cjs +15 -15
  35. package/dist/ButtonGroup.css +11 -11
  36. package/dist/ButtonGroup.mjs +15 -15
  37. package/dist/Card.cjs +163 -163
  38. package/dist/Card.css +118 -118
  39. package/dist/Card.mjs +163 -163
  40. package/dist/CardView.cjs +13 -13
  41. package/dist/CardView.css +14 -14
  42. package/dist/CardView.mjs +13 -13
  43. package/dist/CenterBaseline.cjs +1 -1
  44. package/dist/CenterBaseline.css +2 -2
  45. package/dist/CenterBaseline.mjs +1 -1
  46. package/dist/Checkbox.cjs +46 -46
  47. package/dist/Checkbox.css +44 -44
  48. package/dist/Checkbox.mjs +46 -46
  49. package/dist/CheckboxGroup.cjs +39 -39
  50. package/dist/CheckboxGroup.css +32 -32
  51. package/dist/CheckboxGroup.mjs +39 -39
  52. package/dist/ClearButton.cjs +5 -5
  53. package/dist/ClearButton.css +5 -5
  54. package/dist/ClearButton.mjs +5 -5
  55. package/dist/CloseButton.cjs +17 -15
  56. package/dist/CloseButton.cjs.map +1 -1
  57. package/dist/CloseButton.css +24 -16
  58. package/dist/CloseButton.css.map +1 -1
  59. package/dist/CloseButton.mjs +17 -15
  60. package/dist/CloseButton.mjs.map +1 -1
  61. package/dist/ColorArea.cjs +9 -9
  62. package/dist/ColorArea.css +9 -9
  63. package/dist/ColorArea.mjs +9 -9
  64. package/dist/ColorField.cjs +29 -29
  65. package/dist/ColorField.css +24 -24
  66. package/dist/ColorField.mjs +29 -29
  67. package/dist/ColorHandle.cjs +9 -9
  68. package/dist/ColorHandle.css +16 -16
  69. package/dist/ColorHandle.mjs +9 -9
  70. package/dist/ColorSlider.cjs +40 -40
  71. package/dist/ColorSlider.css +42 -42
  72. package/dist/ColorSlider.mjs +40 -40
  73. package/dist/ColorSwatch.cjs +6 -6
  74. package/dist/ColorSwatch.css +14 -14
  75. package/dist/ColorSwatch.mjs +6 -6
  76. package/dist/ColorSwatchPicker.cjs +12 -12
  77. package/dist/ColorSwatchPicker.css +32 -32
  78. package/dist/ColorSwatchPicker.mjs +12 -12
  79. package/dist/ColorWheel.cjs +14 -14
  80. package/dist/ColorWheel.css +14 -14
  81. package/dist/ColorWheel.mjs +14 -14
  82. package/dist/ComboBox.cjs +54 -51
  83. package/dist/ComboBox.cjs.map +1 -1
  84. package/dist/ComboBox.css +48 -48
  85. package/dist/ComboBox.css.map +1 -1
  86. package/dist/ComboBox.mjs +54 -51
  87. package/dist/ComboBox.mjs.map +1 -1
  88. package/dist/ContextualHelp.cjs +5 -5
  89. package/dist/ContextualHelp.css +23 -23
  90. package/dist/ContextualHelp.mjs +5 -5
  91. package/dist/CustomDialog.cjs +8 -8
  92. package/dist/CustomDialog.css +9 -9
  93. package/dist/CustomDialog.mjs +8 -8
  94. package/dist/Dialog.cjs +10 -10
  95. package/dist/Dialog.css +39 -39
  96. package/dist/Dialog.mjs +10 -10
  97. package/dist/Disclosure.cjs +53 -53
  98. package/dist/Disclosure.css +48 -48
  99. package/dist/Disclosure.mjs +53 -53
  100. package/dist/Divider.cjs +5 -5
  101. package/dist/Divider.css +5 -5
  102. package/dist/Divider.mjs +5 -5
  103. package/dist/DropZone.cjs +24 -24
  104. package/dist/DropZone.css +24 -24
  105. package/dist/DropZone.mjs +24 -24
  106. package/dist/Field.cjs +107 -107
  107. package/dist/Field.cjs.map +1 -1
  108. package/dist/Field.css +69 -69
  109. package/dist/Field.mjs +107 -107
  110. package/dist/Field.mjs.map +1 -1
  111. package/dist/Form.cjs +4 -4
  112. package/dist/Form.css +3 -3
  113. package/dist/Form.mjs +4 -4
  114. package/dist/FullscreenDialog.cjs +5 -5
  115. package/dist/FullscreenDialog.css +54 -54
  116. package/dist/FullscreenDialog.mjs +5 -5
  117. package/dist/IllustratedMessage.cjs +126 -126
  118. package/dist/IllustratedMessage.css +58 -58
  119. package/dist/IllustratedMessage.mjs +126 -126
  120. package/dist/Image.cjs +10 -10
  121. package/dist/Image.css +11 -11
  122. package/dist/Image.mjs +10 -10
  123. package/dist/InlineAlert.cjs +50 -50
  124. package/dist/InlineAlert.css +44 -44
  125. package/dist/InlineAlert.mjs +50 -50
  126. package/dist/Link.cjs +27 -27
  127. package/dist/Link.css +28 -28
  128. package/dist/Link.mjs +27 -27
  129. package/dist/Menu.cjs +292 -221
  130. package/dist/Menu.cjs.map +1 -1
  131. package/dist/Menu.css +115 -113
  132. package/dist/Menu.css.map +1 -1
  133. package/dist/Menu.mjs +292 -221
  134. package/dist/Menu.mjs.map +1 -1
  135. package/dist/Meter.cjs +51 -51
  136. package/dist/Meter.css +51 -51
  137. package/dist/Meter.mjs +51 -51
  138. package/dist/Modal.cjs +37 -37
  139. package/dist/Modal.css +35 -35
  140. package/dist/Modal.mjs +37 -37
  141. package/dist/NumberField.cjs +60 -60
  142. package/dist/NumberField.css +66 -66
  143. package/dist/NumberField.mjs +60 -60
  144. package/dist/Picker.cjs +117 -114
  145. package/dist/Picker.cjs.map +1 -1
  146. package/dist/Picker.css +80 -80
  147. package/dist/Picker.css.map +1 -1
  148. package/dist/Picker.mjs +117 -114
  149. package/dist/Picker.mjs.map +1 -1
  150. package/dist/Popover.cjs +40 -40
  151. package/dist/Popover.css +37 -37
  152. package/dist/Popover.mjs +40 -40
  153. package/dist/ProgressBar.cjs +63 -63
  154. package/dist/ProgressBar.css +61 -61
  155. package/dist/ProgressBar.mjs +63 -63
  156. package/dist/ProgressCircle.cjs +3 -3
  157. package/dist/ProgressCircle.css +2 -2
  158. package/dist/ProgressCircle.mjs +3 -3
  159. package/dist/Provider.cjs +4 -4
  160. package/dist/Provider.css +5 -5
  161. package/dist/Provider.mjs +4 -4
  162. package/dist/Radio.cjs +46 -46
  163. package/dist/Radio.css +44 -44
  164. package/dist/Radio.mjs +46 -46
  165. package/dist/RadioGroup.cjs +37 -37
  166. package/dist/RadioGroup.css +32 -32
  167. package/dist/RadioGroup.mjs +37 -37
  168. package/dist/SearchField.cjs +31 -31
  169. package/dist/SearchField.css +29 -29
  170. package/dist/SearchField.mjs +31 -31
  171. package/dist/SegmentedControl.cjs +54 -54
  172. package/dist/SegmentedControl.css +55 -55
  173. package/dist/SegmentedControl.mjs +54 -54
  174. package/dist/Slider.cjs +101 -101
  175. package/dist/Slider.css +82 -82
  176. package/dist/Slider.mjs +101 -101
  177. package/dist/StatusLight.cjs +26 -26
  178. package/dist/StatusLight.css +26 -26
  179. package/dist/StatusLight.mjs +26 -26
  180. package/dist/Switch.cjs +47 -47
  181. package/dist/Switch.css +42 -42
  182. package/dist/Switch.mjs +47 -47
  183. package/dist/TableView.cjs +137 -137
  184. package/dist/TableView.css +76 -76
  185. package/dist/TableView.mjs +137 -137
  186. package/dist/Tabs.cjs +60 -60
  187. package/dist/Tabs.css +53 -53
  188. package/dist/Tabs.mjs +60 -60
  189. package/dist/TabsPicker.cjs +69 -69
  190. package/dist/TabsPicker.css +62 -62
  191. package/dist/TabsPicker.mjs +69 -69
  192. package/dist/TagGroup.cjs +108 -108
  193. package/dist/TagGroup.css +85 -85
  194. package/dist/TagGroup.mjs +108 -108
  195. package/dist/TextField.cjs +36 -36
  196. package/dist/TextField.css +33 -33
  197. package/dist/TextField.mjs +36 -36
  198. package/dist/ToggleButton.cjs +3 -3
  199. package/dist/ToggleButton.css +7 -7
  200. package/dist/ToggleButton.mjs +3 -3
  201. package/dist/Tooltip.cjs +32 -32
  202. package/dist/Tooltip.css +34 -34
  203. package/dist/Tooltip.mjs +32 -32
  204. package/dist/types.d.ts +2 -0
  205. package/dist/types.d.ts.map +1 -1
  206. package/icons/Skeleton.cjs +2 -2
  207. package/icons/Skeleton.css +5 -5
  208. package/icons/Skeleton.mjs +2 -2
  209. package/package.json +19 -19
  210. package/src/Button.tsx +107 -75
  211. package/src/CloseButton.tsx +4 -0
  212. package/src/ComboBox.tsx +2 -1
  213. package/src/Menu.tsx +40 -17
  214. package/src/Picker.tsx +2 -1
  215. package/style/dist/spectrum-theme.cjs +54 -5
  216. package/style/dist/spectrum-theme.cjs.map +1 -1
  217. package/style/dist/spectrum-theme.mjs +54 -5
  218. package/style/dist/spectrum-theme.mjs.map +1 -1
  219. package/style/dist/style-macro.cjs +1 -1
  220. package/style/dist/style-macro.cjs.map +1 -1
  221. package/style/dist/style-macro.mjs +1 -1
  222. package/style/dist/style-macro.mjs.map +1 -1
  223. package/style/dist/types.d.ts +10 -3
  224. package/style/dist/types.d.ts.map +1 -1
  225. package/style/spectrum-theme.ts +66 -7
  226. package/style/style-macro.ts +3 -3
  227. package/style/types.ts +1 -1
package/dist/Field.cjs CHANGED
@@ -61,16 +61,16 @@ const $a0b996a550bb0891$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $4hgIp$react
61
61
  return /*#__PURE__*/ (0, $4hgIp$reactjsxruntime.jsxs)("div", {
62
62
  className: function anonymous(props) {
63
63
  let rules = " .";
64
- rules += ' __a-4e9m05';
65
- rules += ' __b-4e9m05';
66
- rules += ' __c-4e9m05';
67
- rules += ' __d-4e9m05';
68
- rules += ' _Zc';
69
- if (props.labelAlign === "end") rules += ' _jc';
70
- else if (props.labelAlign === "start") rules += ' _ja';
64
+ rules += ' __b-hr3t0p';
65
+ rules += ' __c-hr3t0p';
66
+ rules += ' __d-hr3t0p';
67
+ rules += ' __e-hr3t0p';
68
+ rules += ' _0c';
69
+ if (props.labelAlign === "end") rules += ' _kc';
70
+ else if (props.labelAlign === "start") rules += ' _ka';
71
71
  if (props.labelPosition === "top") rules += ' F-1inj1bc';
72
- if (props.isQuiet) rules += ' __ma';
73
- else if (props.labelPosition === "top") rules += ' __me';
72
+ if (props.isQuiet) rules += ' __na';
73
+ else if (props.labelPosition === "top") rules += ' __ne';
74
74
  return rules;
75
75
  }({
76
76
  labelAlign: labelAlign,
@@ -84,33 +84,33 @@ const $a0b996a550bb0891$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $4hgIp$react
84
84
  style: UNSAFE_style,
85
85
  className: UNSAFE_className + (0, $308b180f49d82d28$exports.mergeStyles)(function anonymous(props) {
86
86
  let rules = " .";
87
- rules += ' _c-bc1l9oh';
88
- rules += ' _c-1uotwbwg';
89
- rules += ' _c-eo0c6sf';
90
- rules += ' _c-enzzrge';
91
- rules += ' _c-enzykdd';
92
- rules += ' _c-enzwzjc';
93
- rules += ' _c-enzrfpb';
94
- rules += ' _ca';
87
+ rules += ' _d-bc1l9oh';
88
+ rules += ' _d-1uotwbwg';
89
+ rules += ' _d-eo0c6sf';
90
+ rules += ' _d-enzzrge';
91
+ rules += ' _d-enzykdd';
92
+ rules += ' _d-enzwzjc';
93
+ rules += ' _d-enzrfpb';
94
+ rules += ' _da';
95
95
  if (props.size === "XL") {
96
- rules += ' _dbj';
97
- rules += ' _di';
96
+ rules += ' _ebj';
97
+ rules += ' _ei';
98
98
  } else if (props.size === "L") {
99
- rules += ' _dbh';
100
- rules += ' _dg';
99
+ rules += ' _ebh';
100
+ rules += ' _eg';
101
101
  } else if (props.size === "S") {
102
- rules += ' _dbd';
103
- rules += ' _dc';
102
+ rules += ' _ebd';
103
+ rules += ' _ec';
104
104
  } else if (props.size === "XS") {
105
- rules += ' _dbb';
106
- rules += ' _da';
105
+ rules += ' _ebb';
106
+ rules += ' _ea';
107
107
  } else {
108
- rules += ' _dbf';
109
- rules += ' _de';
108
+ rules += ' _ebf';
109
+ rules += ' _ee';
110
110
  }
111
- rules += ' _eb';
112
- rules += ' _f-1x99dlob';
113
- rules += ' _fa';
111
+ rules += ' _fb';
112
+ rules += ' _g-1x99dlob';
113
+ rules += ' _ga';
114
114
  rules += ' aa_____K';
115
115
  if (props.isStaticColor) rules += ' a_____G';
116
116
  else if (props.isDisabled) rules += ' aj';
@@ -120,7 +120,7 @@ const $a0b996a550bb0891$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $4hgIp$react
120
120
  else if (props.isHovered) rules += ' an';
121
121
  else rules += ' am';
122
122
  }
123
- rules += ' __Hb';
123
+ rules += ' __Ib';
124
124
  return rules;
125
125
  }({
126
126
  labelPosition: labelPosition,
@@ -131,7 +131,7 @@ const $a0b996a550bb0891$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $4hgIp$react
131
131
  children: [
132
132
  props.children,
133
133
  (isRequired || necessityIndicator === 'label') && /*#__PURE__*/ (0, $4hgIp$reactjsxruntime.jsxs)("span", {
134
- className: " . _pb",
134
+ className: " . _qb",
135
135
  children: [
136
136
  "\xa0",
137
137
  necessityIndicator === 'icon' && /*#__PURE__*/ (0, $4hgIp$reactjsxruntime.jsx)((0, $5d3efbee7071458b$exports.default), {
@@ -151,11 +151,11 @@ const $a0b996a550bb0891$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $4hgIp$react
151
151
  ]
152
152
  }),
153
153
  contextualHelp && /*#__PURE__*/ (0, $4hgIp$reactjsxruntime.jsxs)("span", {
154
- className: " . _pb",
154
+ className: " . _qb",
155
155
  children: [
156
156
  "\xa0",
157
157
  /*#__PURE__*/ (0, $4hgIp$reactjsxruntime.jsx)((0, $e991cbcdf82ced71$exports.CenterBaseline), {
158
- styles: " . _Ze ko",
158
+ styles: " . _0e ko",
159
159
  children: /*#__PURE__*/ (0, $4hgIp$reactjsxruntime.jsx)((0, $bab829476f85a155$exports.ContextualHelpContext).Provider, {
160
160
  value: {
161
161
  id: contextualHelpId,
@@ -172,61 +172,61 @@ const $a0b996a550bb0891$export$1acdcf5a973a8414 = /*#__PURE__*/ (0, $4hgIp$react
172
172
  });
173
173
  const $a0b996a550bb0891$var$fieldGroupStyles = function anonymous(props) {
174
174
  let rules = " .";
175
- if (props.isFocusVisible) rules += ' _Lb';
176
- else rules += ' _La';
175
+ if (props.isFocusVisible) rules += ' _Mb';
176
+ else rules += ' _Ma';
177
177
  rules += ' da_____M';
178
178
  rules += ' dx';
179
- rules += ' _Nc';
180
- rules += ' _M-3t1z';
181
- rules += ' __a-4cfph1';
182
- rules += ' __b-4cfph1';
183
- rules += ' __c-4cfph1';
184
- rules += ' __d-4cfph1';
179
+ rules += ' _Oc';
180
+ rules += ' _N-3t1z';
181
+ rules += ' __b-g2ozi1';
182
+ rules += ' __c-g2ozi1';
183
+ rules += ' __d-g2ozi1';
184
+ rules += ' __e-g2ozi1';
185
185
  if (props.size === "XL") rules += ' qj';
186
186
  else if (props.size === "L") rules += ' qi';
187
187
  else if (props.size === "S") rules += ' qh';
188
188
  else if (props.size === "XS") rules += ' qg';
189
189
  else rules += ' qf';
190
- if (props.isQuiet) rules += ' __ma';
191
- else rules += ' __m-1s8glxue';
190
+ if (props.isQuiet) rules += ' __na';
191
+ else rules += ' __n-1s8glxue';
192
192
  if (props.size === "XL") rules += ' -usygro_l-____g';
193
193
  else if (props.size === "L") rules += ' -usygro_l-___0';
194
194
  else if (props.size === "S") rules += ' -usygro_l-___u';
195
195
  else rules += ' -usygro_l-___K';
196
196
  rules += ' m-rwozxi';
197
- rules += ' _Zd';
198
- rules += ' _1c';
197
+ rules += ' _0d';
198
+ rules += ' _2c';
199
199
  rules += ' k-375toq';
200
- rules += ' __na';
200
+ rules += ' __oa';
201
201
  rules += ' C-375tnm';
202
202
  rules += ' D-375tnn';
203
- rules += ' _c-bc1l9oh';
204
- rules += ' _c-1uotwbwg';
205
- rules += ' _c-eo0c6sf';
206
- rules += ' _c-enzzrge';
207
- rules += ' _c-enzykdd';
208
- rules += ' _c-enzwzjc';
209
- rules += ' _c-enzrfpb';
210
- rules += ' _ca';
203
+ rules += ' _d-bc1l9oh';
204
+ rules += ' _d-1uotwbwg';
205
+ rules += ' _d-eo0c6sf';
206
+ rules += ' _d-enzzrge';
207
+ rules += ' _d-enzykdd';
208
+ rules += ' _d-enzwzjc';
209
+ rules += ' _d-enzrfpb';
210
+ rules += ' _da';
211
211
  if (props.size === "XL") {
212
- rules += ' _dbj';
213
- rules += ' _di';
212
+ rules += ' _ebj';
213
+ rules += ' _ei';
214
214
  } else if (props.size === "L") {
215
- rules += ' _dbh';
216
- rules += ' _dg';
215
+ rules += ' _ebh';
216
+ rules += ' _eg';
217
217
  } else if (props.size === "S") {
218
- rules += ' _dbd';
219
- rules += ' _dc';
218
+ rules += ' _ebd';
219
+ rules += ' _ec';
220
220
  } else if (props.size === "XS") {
221
- rules += ' _dbb';
222
- rules += ' _da';
221
+ rules += ' _ebb';
222
+ rules += ' _ea';
223
223
  } else {
224
- rules += ' _dbf';
225
- rules += ' _de';
224
+ rules += ' _ebf';
225
+ rules += ' _ee';
226
226
  }
227
- rules += ' _eb';
228
- rules += ' _f-1x99dlob';
229
- rules += ' _fa';
227
+ rules += ' _fb';
228
+ rules += ' _g-1x99dlob';
229
+ rules += ' _ga';
230
230
  if (props.isDisabled) rules += ' aj';
231
231
  else {
232
232
  if (props.isPressed) rules += ' ao';
@@ -234,18 +234,18 @@ const $a0b996a550bb0891$var$fieldGroupStyles = function anonymous(props) {
234
234
  else if (props.isHovered) rules += ' ao';
235
235
  else rules += ' an';
236
236
  }
237
- rules += ' _vh';
238
237
  rules += ' _wh';
239
238
  rules += ' _xh';
240
239
  rules += ' _yh';
240
+ rules += ' _zh';
241
241
  rules += ' uc';
242
242
  rules += ' vc';
243
243
  rules += ' s-375toy';
244
244
  rules += ' t-375toz';
245
245
  rules += ' wa';
246
- rules += ' _Oa';
247
- rules += ' _Q-375x7f';
248
- rules += ' _Ra';
246
+ rules += ' _Pa';
247
+ rules += ' _R-375x7f';
248
+ rules += ' _Sa';
249
249
  if (props.isDisabled) {
250
250
  rules += ' ca_____O';
251
251
  rules += ' ci';
@@ -265,8 +265,8 @@ const $a0b996a550bb0891$var$fieldGroupStyles = function anonymous(props) {
265
265
  else rules += ' ci';
266
266
  }
267
267
  rules += ' bd';
268
- if (props.isDisabled) rules += ' __Hb';
269
- else rules += ' __He';
268
+ if (props.isDisabled) rules += ' __Ib';
269
+ else rules += ' __Ie';
270
270
  rules += ' -_375tnm_C-I';
271
271
  rules += ' -_375tnn_D-I';
272
272
  rules += ' -_375toy_s-c';
@@ -308,48 +308,48 @@ const $a0b996a550bb0891$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $4hgIp$react
308
308
  ...otherProps,
309
309
  ref: ref,
310
310
  style: UNSAFE_style,
311
- className: UNSAFE_className + (0, $308b180f49d82d28$exports.mergeStyles)(" . Ea Fa Ca Da ba a-17zqamw _c-17zqamw _d-17zqamw _e-17zqamw _9-3t1y _8-3t1y qo lb _La wf __vb __wb _ma _pb", styles)
311
+ className: UNSAFE_className + (0, $308b180f49d82d28$exports.mergeStyles)(" . Ea Fa Ca Da ba a-17zqamw _d-17zqamw _e-17zqamw _f-17zqamw __a-3t1y _9-3t1y qo lb _Ma wf __wb __xb _na _qb", styles)
312
312
  });
313
313
  });
314
314
  const $a0b996a550bb0891$var$helpTextStyles = function anonymous(props) {
315
315
  let rules = " .";
316
- rules += ' __a-1oa8qr7';
317
- rules += ' __b-1oa8qr7';
318
- rules += ' __c-1oa8qr7';
319
- rules += ' __d-1oa8qr7';
320
- rules += ' _Zd';
321
- rules += ' _1d';
316
+ rules += ' __b-1le9d6f';
317
+ rules += ' __c-1le9d6f';
318
+ rules += ' __d-1le9d6f';
319
+ rules += ' __e-1le9d6f';
320
+ rules += ' _0d';
321
+ rules += ' _2d';
322
322
  rules += ' ibH';
323
323
  rules += ' iG';
324
324
  rules += ' jbH';
325
325
  rules += ' jG';
326
- rules += ' _c-bc1l9oh';
327
- rules += ' _c-1uotwbwg';
328
- rules += ' _c-eo0c6sf';
329
- rules += ' _c-enzzrge';
330
- rules += ' _c-enzykdd';
331
- rules += ' _c-enzwzjc';
332
- rules += ' _c-enzrfpb';
333
- rules += ' _ca';
326
+ rules += ' _d-bc1l9oh';
327
+ rules += ' _d-1uotwbwg';
328
+ rules += ' _d-eo0c6sf';
329
+ rules += ' _d-enzzrge';
330
+ rules += ' _d-enzykdd';
331
+ rules += ' _d-enzwzjc';
332
+ rules += ' _d-enzrfpb';
333
+ rules += ' _da';
334
334
  if (props.size === "XL") {
335
- rules += ' _dbj';
336
- rules += ' _di';
335
+ rules += ' _ebj';
336
+ rules += ' _ei';
337
337
  } else if (props.size === "L") {
338
- rules += ' _dbh';
339
- rules += ' _dg';
338
+ rules += ' _ebh';
339
+ rules += ' _eg';
340
340
  } else if (props.size === "S") {
341
- rules += ' _dbd';
342
- rules += ' _dc';
341
+ rules += ' _ebd';
342
+ rules += ' _ec';
343
343
  } else if (props.size === "XS") {
344
- rules += ' _dbb';
345
- rules += ' _da';
344
+ rules += ' _ebb';
345
+ rules += ' _ea';
346
346
  } else {
347
- rules += ' _dbf';
348
- rules += ' _de';
347
+ rules += ' _ebf';
348
+ rules += ' _ee';
349
349
  }
350
- rules += ' _eb';
351
- rules += ' _f-1x99dlob';
352
- rules += ' _fa';
350
+ rules += ' _fb';
351
+ rules += ' _g-1x99dlob';
352
+ rules += ' _ga';
353
353
  if (props.isDisabled) rules += ' aj';
354
354
  else if (props.isInvalid) {
355
355
  if (props.isPressed) rules += ' aP';
@@ -363,10 +363,10 @@ const $a0b996a550bb0891$var$helpTextStyles = function anonymous(props) {
363
363
  else rules += ' am';
364
364
  }
365
365
  rules += ' -rwx0fg_e-b';
366
- rules += ' __me';
366
+ rules += ' __ne';
367
367
  rules += ' E-1inj1bc';
368
- if (props.isDisabled) rules += ' __Hb';
369
- else rules += ' __He';
368
+ if (props.isDisabled) rules += ' __Ib';
369
+ else rules += ' __Ie';
370
370
  return rules;
371
371
  };
372
372
  function $a0b996a550bb0891$export$a67c0bc59081311a(props) {
@@ -409,9 +409,9 @@ function $a0b996a550bb0891$export$bda0d075e0e342c9(props) {
409
409
  {
410
410
  render: (0, $e991cbcdf82ced71$exports.centerBaseline)({
411
411
  slot: 'icon',
412
- styles: " . __A-3t1x _8-3t1x -rwx0fg_e-e -rwx0fg_e-a_____8"
412
+ styles: " . __B-3t1x _9-3t1x -rwx0fg_e-e -rwx0fg_e-a_____8"
413
413
  }),
414
- styles: " . l-1sthc3k k-1sthc3k yG ybH z-177861o _8-3t1x"
414
+ styles: " . l-1sthc3k k-1sthc3k yG ybH z-177861o _9-3t1x"
415
415
  }
416
416
  ]
417
417
  ],
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Field.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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n isDisabled?: boolean,\n isRequired?: boolean,\n size?: 'S' | 'M' | 'L' | 'XL',\n necessityIndicator?: NecessityIndicator,\n labelAlign?: Alignment,\n labelPosition?: 'top' | 'side',\n includeNecessityIndicatorInAccessibilityName?: boolean,\n staticColor?: 'white' | 'black' | 'auto',\n contextualHelp?: ReactNode,\n isQuiet?: boolean,\n children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isDisabled,\n isRequired,\n size = 'M',\n necessityIndicator = 'icon',\n includeNecessityIndicatorInAccessibilityName = false,\n labelAlign,\n labelPosition,\n staticColor,\n contextualHelp,\n isQuiet,\n UNSAFE_style,\n UNSAFE_className = '',\n ...labelProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let contextualHelpId = useId();\n let fallbackLabelPropsId = useId();\n if (contextualHelp && !labelProps.id) {\n labelProps.id = fallbackLabelPropsId;\n }\n\n if (!props.children) {\n return null;\n }\n\n return (\n <div\n className={style({\n gridArea: 'label',\n display: 'inline',\n textAlign: {\n labelAlign: {\n start: 'start',\n end: 'end'\n }\n },\n paddingBottom: {\n labelPosition: {\n top: '--field-gap'\n }\n },\n contain: {\n labelPosition: {\n top: 'inline-size'\n },\n isQuiet: 'none'\n }\n })({labelAlign, labelPosition, isQuiet})}>\n <Label\n {...labelProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n {props.children}\n {(isRequired || necessityIndicator === 'label') && (\n <span className={style({whiteSpace: 'nowrap'})}>\n &nbsp;\n {necessityIndicator === 'icon' &&\n <AsteriskIcon\n size={size === 'S' ? 'M' : size}\n className={style({\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n })}\n aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n }\n {necessityIndicator === 'label' &&\n /* The necessity label is hidden to screen readers if the field is required because\n * aria-required is set on the field in that case. That will already be announced,\n * so no need to duplicate it here. If optional, we do want it to be announced here.\n */\n <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n </span>\n }\n </span>\n )}\n </Label>\n {contextualHelp && (\n <span className={style({whiteSpace: 'nowrap'})}>\n &nbsp;\n <CenterBaseline\n styles={style({\n display: 'inline-flex',\n height: 0\n })}>\n <ContextualHelpContext.Provider\n value={{\n id: contextualHelpId,\n 'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n }}>\n {contextualHelp}\n </ContextualHelpContext.Provider>\n </CenterBaseline>\n </span>\n )}\n </div>\n );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n size?: 'S' | 'M' | 'L' | 'XL',\n children?: ReactNode,\n styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n ...focusRing(),\n ...fieldInput(),\n display: 'flex',\n alignItems: 'center',\n height: 'control',\n boxSizing: 'border-box',\n paddingX: 'edge-to-text',\n font: 'control',\n borderRadius: 'control',\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n borderColor: {\n default: baseColor('gray-300'),\n isInvalid: 'negative',\n isFocusWithin: {\n default: 'gray-900',\n isInvalid: 'negative-1000',\n forcedColors: 'Highlight'\n },\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n backgroundColor: 'gray-25',\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n cursor: {\n default: 'text',\n isDisabled: 'default'\n }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n return (\n <Group\n ref={ref}\n {...props}\n onPointerDown={(e) => {\n // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n e.preventDefault();\n e.currentTarget.querySelector('input')?.focus();\n }\n }}\n onPointerUp={e => {\n if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n e.preventDefault();\n e.currentTarget.querySelector('input')?.focus();\n }\n }}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n props.styles\n )} />\n );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n return (\n <RACInput\n {...otherProps}\n ref={ref}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(style({\n padding: 0,\n backgroundColor: 'transparent',\n color: '[inherit]',\n fontFamily: '[inherit]',\n fontSize: '[inherit]',\n fontWeight: '[inherit]',\n flexGrow: 1,\n flexShrink: 1,\n minWidth: 0,\n width: 'full',\n outlineStyle: 'none',\n borderStyle: 'none',\n truncate: true\n }), styles)} />\n );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n size?: 'S' | 'M' | 'L' | 'XL',\n isDisabled?: boolean,\n isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n description?: ReactNode,\n showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n gridArea: 'helptext',\n display: 'flex',\n alignItems: 'baseline',\n gap: 'text-to-visual',\n font: 'control',\n color: {\n default: 'neutral-subdued',\n isInvalid: 'negative',\n isDisabled: 'disabled'\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n contain: 'inline-size',\n paddingTop: '--field-gap',\n cursor: {\n default: 'text',\n isDisabled: 'default'\n }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}) {\n let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n let domErrorRef = useDOMRef(props.errorRef || null);\n\n if (!props.isInvalid && props.description) {\n return (\n <Text\n slot=\"description\"\n ref={domDescriptionRef}\n className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n {props.description}\n </Text>\n );\n }\n\n return (\n <FieldError\n {...props}\n ref={domErrorRef}\n className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n {props.showErrorIcon &&\n <CenterBaseline>\n <AlertIcon />\n </CenterBaseline>\n }\n <span>{children || validationErrors.join(' ')}</span>\n </>))}\n </FieldError>\n );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}) {\n return (\n <Provider\n values={[\n [IconContext, {\n render: centerBaseline({\n slot: 'icon',\n styles: style({\n order: 0,\n flexShrink: 0,\n '--iconPrimary': {\n type: 'fill',\n value: {\n default: 'negative',\n forcedColors: 'ButtonText'\n }\n }\n })}),\n styles: style({\n size: fontRelative(20),\n marginStart: 'text-to-visual',\n marginEnd: fontRelative(-2),\n flexShrink: 0\n })\n }]\n ]}>\n {!props.isDisabled && <AlertIcon />}\n </Provider>\n );\n}\n"],"names":[],"version":3,"file":"Field.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;AAkCM,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAA6B;IAC5G,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,cACF,UAAU,cACV,UAAU,QACV,OAAO,yBACP,qBAAqB,sDACrB,+CAA+C,mBAC/C,UAAU,iBACV,aAAa,eACb,WAAW,kBACX,cAAc,WACd,OAAO,gBACP,YAAY,oBACZ,mBAAmB,IACnB,GAAG,YACJ,GAAG;IAEJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,mBAAmB,CAAA,GAAA,2BAAI;IAC3B,IAAI,uBAAuB,CAAA,GAAA,2BAAI;IAC/B,IAAI,kBAAkB,CAAC,WAAW,EAAE,EAClC,WAAW,EAAE,GAAG;IAGlB,IAAI,CAAC,MAAM,QAAQ,EACjB,OAAO;IAGT,qBACE,iCAAC;QACC,WAAW;;;;;;;;;;;;;UAoBR;wBAAC;2BAAY;qBAAe;QAAO;;0BACtC,iCAAC,CAAA,GAAA,gCAAI;gBACF,GAAG,UAAU;gBACd,KAAK;gBACL,OAAO;gBACP,WAAW,mBAAmB,CAAA,GAAA,qCAAU,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAAoB;mCAAC;gCAAe;0BAAY;oBAAM,eAAe,CAAC,CAAC;gBAAW,IAAI,MAAM,MAAM;;oBAC3I,MAAM,QAAQ;oBACb,CAAA,cAAc,uBAAuB,OAAM,mBAC3C,iCAAC;wBAAK,SAAS;;4BAAiC;4BAE7C,uBAAuB,wBACtB,gCAAC,CAAA,GAAA,iCAAW;gCACV,MAAM,SAAS,MAAM,MAAM;gCAC3B,SAAS;gCAMT,cAAY,+CAA+C,gBAAgB,MAAM,CAAC,sBAAsB;;4BAE3G,uBAAuB,WACtB;;;cAGA,iBACA,gCAAC;gCAAK,eAAa,CAAC,+CAA+C,aAAa;0CAC7E,aAAa,gBAAgB,MAAM,CAAC,sBAAsB,gBAAgB,MAAM,CAAC;;;;;;YAM3F,gCACC,iCAAC;gBAAK,SAAS;;oBAAiC;kCAE9C,gCAAC,CAAA,GAAA,wCAAa;wBACZ,MAAM;kCAIN,cAAA,gCAAC,CAAA,GAAA,+CAAoB,EAAE,QAAQ;4BAC7B,OAAO;gCACL,IAAI;gCACJ,mBAAmB,YAAY,KAAK,GAAG,WAAW,EAAE,CAAC,CAAC,EAAE,kBAAkB,GAAG;gCAC7E,MAAM,AAAC,SAAS,OAAO,SAAS,OAAQ,MAAM;4BAChD;sCACC;;;;;;;AAOf;AAQA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCC,MAAM,0DAAa,CAAA,GAAA,uBAAS,EAAE,SAAS,WAAW,KAAsB,EAAE,GAAiC;IAChH,qBACE,gCAAC,CAAA,GAAA,gCAAI;QACH,KAAK;QACJ,GAAG,KAAK;QACT,eAAe,CAAC;YACd,iGAAiG;YACjG,IAAI,EAAE,WAAW,KAAK,WAAW,CAAC,AAAC,EAAE,MAAM,CAAa,OAAO,CAAC,0BAA0B;gBACxF,EAAE,cAAc;gBAChB,EAAE,aAAa,CAAC,aAAa,CAAC,UAAU;YAC1C;QACF;QACA,aAAa,CAAA;YACX,IAAI,EAAE,WAAW,KAAK,WAAW,CAAC,AAAC,EAAE,MAAM,CAAa,OAAO,CAAC,0BAA0B;gBACxF,EAAE,cAAc;gBAChB,EAAE,aAAa,CAAC,aAAa,CAAC,UAAU;YAC1C;QACF;QACA,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,MAAM,CAAA,GAAA,8CAAmB,IAAI,CAAA,GAAA,qCAAU,EAChG,uCAAiB;gBAAC,GAAG,WAAW;gBAAE,MAAM,MAAM,IAAI,IAAI;YAAG,IACzD,MAAM,MAAM;;AAGpB;AAIO,MAAM,0DAAQ,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAAmC;IACnG,IAAI,oBAAC,mBAAmB,kBAAI,YAAY,UAAE,MAAM,EAAE,GAAG,YAAW,GAAG;IACnE,qBACE,gCAAC,CAAA,GAAA,gCAAO;QACL,GAAG,UAAU;QACd,KAAK;QACL,OAAO;QACP,WAAW,mBAAmB,CAAA,GAAA,qCAAU,kHAcpC;;AAEV;AAUA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBC,SAAS,0CAAS,KAAmG;IAC1H,IAAI,oBAAoB,CAAA,GAAA,mCAAQ,EAAE,MAAM,cAAc,IAAI;IAC1D,IAAI,cAAc,CAAA,GAAA,mCAAQ,EAAE,MAAM,QAAQ,IAAI;IAE9C,IAAI,CAAC,MAAM,SAAS,IAAI,MAAM,WAAW,EACvC,qBACE,gCAAC,CAAA,GAAA,+BAAG;QACF,MAAK;QACL,KAAK;QACL,WAAW,qCAAe;YAAC,MAAM,MAAM,IAAI,IAAI;YAAK,YAAY,MAAM,UAAU;QAAA;kBAC/E,MAAM,WAAW;;IAKxB,qBACE,gCAAC,CAAA,GAAA,qCAAS;QACP,GAAG,KAAK;QACT,KAAK;QACL,WAAW,CAAA,cAAe,qCAAe;gBAAC,GAAG,WAAW;gBAAE,MAAM,MAAM,IAAI,IAAI;gBAAK,YAAY,MAAM,UAAU;YAAA;kBAC9G,CAAA,GAAA,6CAAiB,EAAE,MAAM,QAAQ,EAAE,CAAC,UAAU,oBAAC,gBAAgB,EAAC,iBAAM;;oBACpE,MAAM,aAAa,kBAClB,gCAAC,CAAA,GAAA,wCAAa;kCACZ,cAAA,gCAAC,CAAA,GAAA,iCAAQ;;kCAGb,gCAAC;kCAAM,YAAY,iBAAiB,IAAI,CAAC;;;;;AAIjD;AAEO,SAAS,0CAAe,KAA6B;IAC1D,qBACE,gCAAC,CAAA,GAAA,mCAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;wBACrB,MAAM;wBACN,MAAM;oBAUJ;oBACJ,MAAM;gBAMR;aAAE;SACH;kBACA,CAAC,MAAM,UAAU,kBAAI,gCAAC,CAAA,GAAA,iCAAQ;;AAGrC","sources":["packages/@react-spectrum/s2/src/Field.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 AlertIcon from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Alignment, DOMRef, NecessityIndicator} from '@react-types/shared';\nimport AsteriskIcon from '../ui-icons/Asterisk';\nimport {baseColor, focusRing, fontRelative, style} from '../style' with {type: 'macro'};\nimport {CenterBaseline, centerBaseline, centerBaselineBefore} from './CenterBaseline';\nimport {composeRenderProps, FieldError, FieldErrorProps, Group, GroupProps, Label, LabelProps, Provider, Input as RACInput, InputProps as RACInputProps, Text} from 'react-aria-components';\nimport {ContextualHelpContext} from './ContextualHelp';\nimport {fieldInput, fieldLabel, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {ForwardedRef, forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {mergeStyles} from '../style/runtime';\nimport {StyleString} from '../style/types';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\ninterface FieldLabelProps extends Omit<LabelProps, 'className' | 'style' | 'children'>, StyleProps {\n isDisabled?: boolean,\n isRequired?: boolean,\n size?: 'S' | 'M' | 'L' | 'XL',\n necessityIndicator?: NecessityIndicator,\n labelAlign?: Alignment,\n labelPosition?: 'top' | 'side',\n includeNecessityIndicatorInAccessibilityName?: boolean,\n staticColor?: 'white' | 'black' | 'auto',\n contextualHelp?: ReactNode,\n isQuiet?: boolean,\n children?: ReactNode\n}\n\nexport const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps, ref: DOMRef<HTMLLabelElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n isDisabled,\n isRequired,\n size = 'M',\n necessityIndicator = 'icon',\n includeNecessityIndicatorInAccessibilityName = false,\n labelAlign,\n labelPosition,\n staticColor,\n contextualHelp,\n isQuiet,\n UNSAFE_style,\n UNSAFE_className = '',\n ...labelProps\n } = props;\n\n let domRef = useDOMRef(ref);\n let contextualHelpId = useId();\n let fallbackLabelPropsId = useId();\n if (contextualHelp && !labelProps.id) {\n labelProps.id = fallbackLabelPropsId;\n }\n\n if (!props.children) {\n return null;\n }\n\n return (\n <div\n className={style({\n gridArea: 'label',\n display: 'inline',\n textAlign: {\n labelAlign: {\n start: 'start',\n end: 'end'\n }\n },\n paddingBottom: {\n labelPosition: {\n top: '--field-gap'\n }\n },\n contain: {\n labelPosition: {\n top: 'inline-size'\n },\n isQuiet: 'none'\n }\n })({labelAlign, labelPosition, isQuiet})}>\n <Label\n {...labelProps}\n ref={domRef}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(style(fieldLabel())({labelPosition, isDisabled, size, isStaticColor: !!staticColor}), props.styles)}>\n {props.children}\n {(isRequired || necessityIndicator === 'label') && (\n <span className={style({whiteSpace: 'nowrap'})}>\n &nbsp;\n {necessityIndicator === 'icon' &&\n <AsteriskIcon\n size={size === 'S' ? 'M' : size}\n className={style({\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n })}\n aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />\n }\n {necessityIndicator === 'label' &&\n /* The necessity label is hidden to screen readers if the field is required because\n * aria-required is set on the field in that case. That will already be announced,\n * so no need to duplicate it here. If optional, we do want it to be announced here.\n */\n <span aria-hidden={!includeNecessityIndicatorInAccessibilityName ? isRequired : undefined}>\n {isRequired ? stringFormatter.format('label.(required)') : stringFormatter.format('label.(optional)')}\n </span>\n }\n </span>\n )}\n </Label>\n {contextualHelp && (\n <span className={style({whiteSpace: 'nowrap'})}>\n &nbsp;\n <CenterBaseline\n styles={style({\n display: 'inline-flex',\n height: 0\n })}>\n <ContextualHelpContext.Provider\n value={{\n id: contextualHelpId,\n 'aria-labelledby': labelProps?.id ? `${labelProps.id} ${contextualHelpId}` : undefined,\n size: (size === 'L' || size === 'XL') ? 'S' : 'XS'\n }}>\n {contextualHelp}\n </ContextualHelpContext.Provider>\n </CenterBaseline>\n </span>\n )}\n </div>\n );\n});\n\ninterface FieldGroupProps extends Omit<GroupProps, 'className' | 'style' | 'children'>, UnsafeStyles {\n size?: 'S' | 'M' | 'L' | 'XL',\n children?: ReactNode,\n styles?: StyleString\n}\n\nconst fieldGroupStyles = style({\n ...focusRing(),\n ...fieldInput(),\n display: 'flex',\n alignItems: 'center',\n height: 'control',\n boxSizing: 'border-box',\n paddingX: 'edge-to-text',\n font: 'control',\n borderRadius: 'control',\n borderWidth: 2,\n borderStyle: 'solid',\n transition: 'default',\n borderColor: {\n default: baseColor('gray-300'),\n isInvalid: 'negative',\n isFocusWithin: {\n default: 'gray-900',\n isInvalid: 'negative-1000',\n forcedColors: 'Highlight'\n },\n isDisabled: {\n default: 'disabled',\n forcedColors: 'GrayText'\n }\n },\n backgroundColor: 'gray-25',\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n cursor: {\n default: 'text',\n isDisabled: 'default'\n }\n});\n\nexport const FieldGroup = forwardRef(function FieldGroup(props: FieldGroupProps, ref: ForwardedRef<HTMLDivElement>) {\n return (\n <Group\n ref={ref}\n {...props}\n onPointerDown={(e) => {\n // Forward focus to input element when clicking on a non-interactive child (e.g. icon or padding)\n if (e.pointerType === 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n e.preventDefault();\n e.currentTarget.querySelector('input')?.focus();\n }\n }}\n onPointerUp={e => {\n if (e.pointerType !== 'mouse' && !(e.target as Element).closest('button,input,textarea')) {\n e.preventDefault();\n e.currentTarget.querySelector('input')?.focus();\n }\n }}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + ' ' + centerBaselineBefore + mergeStyles(\n fieldGroupStyles({...renderProps, size: props.size || 'M'}),\n props.styles\n )} />\n );\n});\n\nexport interface InputProps extends Omit<RACInputProps, 'className' | 'style'>, StyleProps {}\n\nexport const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {\n let {UNSAFE_className = '', UNSAFE_style, styles, ...otherProps} = props;\n return (\n <RACInput\n {...otherProps}\n ref={ref}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(style({\n padding: 0,\n backgroundColor: 'transparent',\n color: '[inherit]',\n fontFamily: '[inherit]',\n fontSize: '[inherit]',\n fontWeight: '[inherit]',\n flexGrow: 1,\n flexShrink: 1,\n minWidth: 0,\n width: 'full',\n outlineStyle: 'none',\n borderStyle: 'none',\n truncate: true\n }), styles)} />\n );\n});\n\ninterface HelpTextProps extends FieldErrorProps {\n size?: 'S' | 'M' | 'L' | 'XL',\n isDisabled?: boolean,\n isInvalid?: boolean, // TODO: export FieldErrorContext from RAC to get this.\n description?: ReactNode,\n showErrorIcon?: boolean\n}\n\nconst helpTextStyles = style({\n gridArea: 'helptext',\n display: 'flex',\n alignItems: 'baseline',\n gap: 'text-to-visual',\n font: 'control',\n color: {\n default: 'neutral-subdued',\n isInvalid: 'negative',\n isDisabled: 'disabled'\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n },\n contain: 'inline-size',\n paddingTop: '--field-gap',\n cursor: {\n default: 'text',\n isDisabled: 'default'\n }\n});\n\nexport function HelpText(props: HelpTextProps & {descriptionRef?: DOMRef<HTMLDivElement>, errorRef?: DOMRef<HTMLDivElement>}) {\n let domDescriptionRef = useDOMRef(props.descriptionRef || null);\n let domErrorRef = useDOMRef(props.errorRef || null);\n\n if (!props.isInvalid && props.description) {\n return (\n <Text\n slot=\"description\"\n ref={domDescriptionRef}\n className={helpTextStyles({size: props.size || 'M', isDisabled: props.isDisabled})}>\n {props.description}\n </Text>\n );\n }\n\n return (\n <FieldError\n {...props}\n ref={domErrorRef}\n className={renderProps => helpTextStyles({...renderProps, size: props.size || 'M', isDisabled: props.isDisabled})}>\n {composeRenderProps(props.children, (children, {validationErrors}) => (<>\n {props.showErrorIcon &&\n <CenterBaseline>\n <AlertIcon />\n </CenterBaseline>\n }\n <span>{children || validationErrors.join(' ')}</span>\n </>))}\n </FieldError>\n );\n}\n\nexport function FieldErrorIcon(props: {isDisabled?: boolean}) {\n return (\n <Provider\n values={[\n [IconContext, {\n render: centerBaseline({\n slot: 'icon',\n styles: style({\n order: 0,\n flexShrink: 0,\n '--iconPrimary': {\n type: 'fill',\n value: {\n default: 'negative',\n forcedColors: 'ButtonText'\n }\n }\n })}),\n styles: style({\n size: fontRelative(20),\n marginStart: 'text-to-visual',\n marginEnd: fontRelative(-2),\n flexShrink: 0\n })\n }]\n ]}>\n {!props.isDisabled && <AlertIcon />}\n </Provider>\n );\n}\n"],"names":[],"version":3,"file":"Field.cjs.map"}