@react-spectrum/s2 3.0.0-nightly-56da82e3e-250212 → 3.0.0-nightly-3dbdc1e8e-250214

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 (267) 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 +47 -47
  5. package/dist/ActionBar.css +51 -51
  6. package/dist/ActionBar.mjs +47 -47
  7. package/dist/ActionButton.cjs +97 -97
  8. package/dist/ActionButton.css +96 -96
  9. package/dist/ActionButton.mjs +97 -97
  10. package/dist/ActionButtonGroup.cjs +11 -11
  11. package/dist/ActionButtonGroup.css +9 -9
  12. package/dist/ActionButtonGroup.mjs +11 -11
  13. package/dist/AlertDialog.cjs +3 -3
  14. package/dist/AlertDialog.css +3 -3
  15. package/dist/AlertDialog.mjs +3 -3
  16. package/dist/Avatar.cjs +17 -17
  17. package/dist/Avatar.css +14 -14
  18. package/dist/Avatar.mjs +17 -17
  19. package/dist/AvatarGroup.cjs +100 -100
  20. package/dist/AvatarGroup.css +34 -34
  21. package/dist/AvatarGroup.mjs +100 -100
  22. package/dist/Badge.cjs +68 -92
  23. package/dist/Badge.cjs.map +1 -1
  24. package/dist/Badge.css +92 -164
  25. package/dist/Badge.css.map +1 -1
  26. package/dist/Badge.mjs +68 -92
  27. package/dist/Badge.mjs.map +1 -1
  28. package/dist/Breadcrumbs.cjs +115 -115
  29. package/dist/Breadcrumbs.css +89 -89
  30. package/dist/Breadcrumbs.mjs +115 -115
  31. package/dist/Button.cjs +152 -236
  32. package/dist/Button.cjs.map +1 -1
  33. package/dist/Button.css +165 -309
  34. package/dist/Button.css.map +1 -1
  35. package/dist/Button.mjs +152 -236
  36. package/dist/Button.mjs.map +1 -1
  37. package/dist/ButtonGroup.cjs +19 -19
  38. package/dist/ButtonGroup.css +15 -15
  39. package/dist/ButtonGroup.mjs +19 -19
  40. package/dist/Card.cjs +261 -264
  41. package/dist/Card.cjs.map +1 -1
  42. package/dist/Card.css +198 -210
  43. package/dist/Card.css.map +1 -1
  44. package/dist/Card.mjs +261 -264
  45. package/dist/Card.mjs.map +1 -1
  46. package/dist/CardView.cjs +15 -15
  47. package/dist/CardView.css +18 -18
  48. package/dist/CardView.mjs +15 -15
  49. package/dist/CenterBaseline.cjs +1 -1
  50. package/dist/CenterBaseline.css +2 -2
  51. package/dist/CenterBaseline.mjs +1 -1
  52. package/dist/Checkbox.cjs +73 -124
  53. package/dist/Checkbox.cjs.map +1 -1
  54. package/dist/Checkbox.css +81 -201
  55. package/dist/Checkbox.css.map +1 -1
  56. package/dist/Checkbox.mjs +73 -124
  57. package/dist/Checkbox.mjs.map +1 -1
  58. package/dist/CheckboxGroup.cjs +49 -49
  59. package/dist/CheckboxGroup.css +41 -41
  60. package/dist/CheckboxGroup.mjs +49 -49
  61. package/dist/ClearButton.cjs +15 -15
  62. package/dist/ClearButton.css +17 -17
  63. package/dist/ClearButton.mjs +15 -15
  64. package/dist/CloseButton.cjs +35 -35
  65. package/dist/CloseButton.css +33 -33
  66. package/dist/CloseButton.mjs +35 -35
  67. package/dist/ColorArea.cjs +22 -22
  68. package/dist/ColorArea.css +15 -15
  69. package/dist/ColorArea.mjs +22 -22
  70. package/dist/ColorField.cjs +38 -38
  71. package/dist/ColorField.css +32 -32
  72. package/dist/ColorField.mjs +38 -38
  73. package/dist/ColorHandle.cjs +21 -27
  74. package/dist/ColorHandle.cjs.map +1 -1
  75. package/dist/ColorHandle.css +45 -93
  76. package/dist/ColorHandle.css.map +1 -1
  77. package/dist/ColorHandle.mjs +21 -27
  78. package/dist/ColorHandle.mjs.map +1 -1
  79. package/dist/ColorSlider.cjs +52 -52
  80. package/dist/ColorSlider.css +51 -51
  81. package/dist/ColorSlider.mjs +52 -52
  82. package/dist/ColorSwatch.cjs +24 -27
  83. package/dist/ColorSwatch.cjs.map +1 -1
  84. package/dist/ColorSwatch.css +29 -41
  85. package/dist/ColorSwatch.css.map +1 -1
  86. package/dist/ColorSwatch.mjs +24 -27
  87. package/dist/ColorSwatch.mjs.map +1 -1
  88. package/dist/ColorSwatchPicker.cjs +23 -23
  89. package/dist/ColorSwatchPicker.css +48 -60
  90. package/dist/ColorSwatchPicker.css.map +1 -1
  91. package/dist/ColorSwatchPicker.mjs +23 -23
  92. package/dist/ColorWheel.cjs +22 -22
  93. package/dist/ColorWheel.css +16 -16
  94. package/dist/ColorWheel.mjs +22 -22
  95. package/dist/ComboBox.cjs +80 -80
  96. package/dist/ComboBox.css +88 -88
  97. package/dist/ComboBox.mjs +80 -80
  98. package/dist/ContextualHelp.cjs +5 -5
  99. package/dist/ContextualHelp.css +38 -38
  100. package/dist/ContextualHelp.mjs +5 -5
  101. package/dist/CustomDialog.cjs +31 -31
  102. package/dist/CustomDialog.css +25 -25
  103. package/dist/CustomDialog.mjs +31 -31
  104. package/dist/Dialog.cjs +17 -17
  105. package/dist/Dialog.css +64 -64
  106. package/dist/Dialog.mjs +17 -17
  107. package/dist/Disclosure.cjs +108 -111
  108. package/dist/Disclosure.cjs.map +1 -1
  109. package/dist/Disclosure.css +112 -124
  110. package/dist/Disclosure.css.map +1 -1
  111. package/dist/Disclosure.mjs +108 -111
  112. package/dist/Disclosure.mjs.map +1 -1
  113. package/dist/Divider.cjs +26 -26
  114. package/dist/Divider.css +16 -16
  115. package/dist/Divider.mjs +26 -26
  116. package/dist/DropZone.cjs +47 -56
  117. package/dist/DropZone.cjs.map +1 -1
  118. package/dist/DropZone.css +56 -80
  119. package/dist/DropZone.css.map +1 -1
  120. package/dist/DropZone.mjs +47 -56
  121. package/dist/DropZone.mjs.map +1 -1
  122. package/dist/Field.cjs +150 -204
  123. package/dist/Field.cjs.map +1 -1
  124. package/dist/Field.css +150 -246
  125. package/dist/Field.css.map +1 -1
  126. package/dist/Field.mjs +150 -204
  127. package/dist/Field.mjs.map +1 -1
  128. package/dist/Form.cjs +10 -10
  129. package/dist/Form.css +9 -9
  130. package/dist/Form.mjs +10 -10
  131. package/dist/FullscreenDialog.cjs +5 -5
  132. package/dist/FullscreenDialog.css +72 -72
  133. package/dist/FullscreenDialog.mjs +5 -5
  134. package/dist/IllustratedMessage.cjs +134 -134
  135. package/dist/IllustratedMessage.css +69 -69
  136. package/dist/IllustratedMessage.mjs +134 -134
  137. package/dist/Image.cjs +12 -12
  138. package/dist/Image.css +13 -13
  139. package/dist/Image.mjs +12 -12
  140. package/dist/InlineAlert.cjs +77 -104
  141. package/dist/InlineAlert.cjs.map +1 -1
  142. package/dist/InlineAlert.css +77 -149
  143. package/dist/InlineAlert.css.map +1 -1
  144. package/dist/InlineAlert.mjs +77 -104
  145. package/dist/InlineAlert.mjs.map +1 -1
  146. package/dist/Link.cjs +31 -31
  147. package/dist/Link.css +30 -30
  148. package/dist/Link.mjs +31 -31
  149. package/dist/Menu.cjs +269 -269
  150. package/dist/Menu.css +155 -155
  151. package/dist/Menu.mjs +269 -269
  152. package/dist/Meter.cjs +85 -85
  153. package/dist/Meter.css +81 -81
  154. package/dist/Meter.mjs +85 -85
  155. package/dist/Modal.cjs +48 -48
  156. package/dist/Modal.css +46 -46
  157. package/dist/Modal.mjs +48 -48
  158. package/dist/NumberField.cjs +115 -115
  159. package/dist/NumberField.css +114 -114
  160. package/dist/NumberField.mjs +115 -115
  161. package/dist/Picker.cjs +177 -195
  162. package/dist/Picker.cjs.map +1 -1
  163. package/dist/Picker.css +164 -224
  164. package/dist/Picker.css.map +1 -1
  165. package/dist/Picker.mjs +177 -195
  166. package/dist/Picker.mjs.map +1 -1
  167. package/dist/Popover.cjs +79 -85
  168. package/dist/Popover.cjs.map +1 -1
  169. package/dist/Popover.css +65 -89
  170. package/dist/Popover.css.map +1 -1
  171. package/dist/Popover.mjs +79 -85
  172. package/dist/Popover.mjs.map +1 -1
  173. package/dist/ProgressBar.cjs +98 -98
  174. package/dist/ProgressBar.css +92 -92
  175. package/dist/ProgressBar.mjs +98 -98
  176. package/dist/ProgressCircle.cjs +17 -17
  177. package/dist/ProgressCircle.css +15 -15
  178. package/dist/ProgressCircle.mjs +17 -17
  179. package/dist/Provider.cjs +4 -4
  180. package/dist/Provider.css +5 -5
  181. package/dist/Provider.mjs +4 -4
  182. package/dist/Radio.cjs +80 -152
  183. package/dist/Radio.cjs.map +1 -1
  184. package/dist/Radio.css +96 -240
  185. package/dist/Radio.css.map +1 -1
  186. package/dist/Radio.mjs +80 -152
  187. package/dist/Radio.mjs.map +1 -1
  188. package/dist/RadioGroup.cjs +47 -47
  189. package/dist/RadioGroup.css +41 -41
  190. package/dist/RadioGroup.mjs +47 -47
  191. package/dist/SearchField.cjs +42 -42
  192. package/dist/SearchField.css +47 -47
  193. package/dist/SearchField.mjs +42 -42
  194. package/dist/SegmentedControl.cjs +89 -101
  195. package/dist/SegmentedControl.cjs.map +1 -1
  196. package/dist/SegmentedControl.css +92 -140
  197. package/dist/SegmentedControl.css.map +1 -1
  198. package/dist/SegmentedControl.mjs +89 -101
  199. package/dist/SegmentedControl.mjs.map +1 -1
  200. package/dist/Slider.cjs +196 -229
  201. package/dist/Slider.cjs.map +1 -1
  202. package/dist/Slider.css +149 -221
  203. package/dist/Slider.css.map +1 -1
  204. package/dist/Slider.mjs +196 -229
  205. package/dist/Slider.mjs.map +1 -1
  206. package/dist/StatusLight.cjs +56 -56
  207. package/dist/StatusLight.css +59 -59
  208. package/dist/StatusLight.mjs +56 -56
  209. package/dist/Switch.cjs +74 -107
  210. package/dist/Switch.cjs.map +1 -1
  211. package/dist/Switch.css +69 -141
  212. package/dist/Switch.css.map +1 -1
  213. package/dist/Switch.mjs +74 -107
  214. package/dist/Switch.mjs.map +1 -1
  215. package/dist/TableView.cjs +253 -280
  216. package/dist/TableView.cjs.map +1 -1
  217. package/dist/TableView.css +163 -199
  218. package/dist/TableView.css.map +1 -1
  219. package/dist/TableView.mjs +253 -280
  220. package/dist/TableView.mjs.map +1 -1
  221. package/dist/Tabs.cjs +108 -108
  222. package/dist/Tabs.css +81 -81
  223. package/dist/Tabs.mjs +108 -108
  224. package/dist/TabsPicker.cjs +105 -105
  225. package/dist/TabsPicker.css +111 -111
  226. package/dist/TabsPicker.mjs +105 -105
  227. package/dist/TagGroup.cjs +148 -148
  228. package/dist/TagGroup.css +134 -134
  229. package/dist/TagGroup.mjs +148 -148
  230. package/dist/TextField.cjs +59 -59
  231. package/dist/TextField.css +62 -62
  232. package/dist/TextField.mjs +59 -59
  233. package/dist/ToggleButton.cjs +3 -3
  234. package/dist/ToggleButton.css +12 -12
  235. package/dist/ToggleButton.mjs +3 -3
  236. package/dist/Tooltip.cjs +57 -60
  237. package/dist/Tooltip.cjs.map +1 -1
  238. package/dist/Tooltip.css +71 -83
  239. package/dist/Tooltip.css.map +1 -1
  240. package/dist/Tooltip.mjs +57 -60
  241. package/dist/Tooltip.mjs.map +1 -1
  242. package/dist/TreeView.cjs +199 -248
  243. package/dist/TreeView.cjs.map +1 -1
  244. package/dist/TreeView.css +131 -175
  245. package/dist/TreeView.css.map +1 -1
  246. package/dist/TreeView.mjs +202 -248
  247. package/dist/TreeView.mjs.map +1 -1
  248. package/dist/main.cjs +1 -0
  249. package/dist/main.cjs.map +1 -1
  250. package/dist/module.mjs +2 -2
  251. package/dist/module.mjs.map +1 -1
  252. package/dist/types.d.ts +4 -1
  253. package/dist/types.d.ts.map +1 -1
  254. package/icons/Skeleton.cjs +2 -2
  255. package/icons/Skeleton.css +5 -5
  256. package/icons/Skeleton.mjs +2 -2
  257. package/package.json +21 -21
  258. package/src/TreeView.tsx +66 -134
  259. package/src/index.ts +1 -1
  260. package/style/__tests__/style-macro.test.js +18 -18
  261. package/style/dist/spectrum-theme.cjs +10 -20
  262. package/style/dist/spectrum-theme.cjs.map +1 -1
  263. package/style/dist/spectrum-theme.mjs +10 -20
  264. package/style/dist/spectrum-theme.mjs.map +1 -1
  265. package/style/dist/types.d.ts +0 -4
  266. package/style/dist/types.d.ts.map +1 -1
  267. package/style/spectrum-theme.ts +11 -19
package/dist/DropZone.cjs CHANGED
@@ -40,82 +40,73 @@ $parcel$export(module.exports, "DropZone", () => $797cda10ca96fc86$export$3c6489
40
40
  const $797cda10ca96fc86$export$14a72053295ff9a6 = /*#__PURE__*/ (0, $faaBC$react.createContext)(null);
41
41
  const $797cda10ca96fc86$var$dropzone = function anonymous(props, overrides) {
42
42
  let rules = " .";
43
- let matches = (overrides || '').match(/(?:^|\s)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q|j|n|o)[^\s]+/g) || [];
43
+ let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r|k|o|p)[^\s]+/g) || [];
44
44
  rules += matches.join('');
45
- let $Y = false;
46
- for (let p of matches)if (/^\s*Y/.test(p)) $Y = true;
45
+ let $V = false;
46
+ for (let p of matches)if (/^\s*V/.test(p)) $V = true;
47
+ rules += ' _0d';
47
48
  rules += ' _3d';
48
- rules += ' _6d';
49
- rules += ' _5c';
50
- if (!$Y) rules += ' Yc';
51
- rules += ' _g-bc1l9oh';
52
- rules += ' _g-1uotwbwg';
53
- rules += ' _g-eo0c6sf';
54
- rules += ' _g-enzzrge';
55
- rules += ' _g-enzykdd';
56
- rules += ' _g-enzwzjc';
57
- rules += ' _g-enzrfpb';
58
- rules += ' _ga';
49
+ rules += ' _2c';
50
+ if (!$V) rules += ' Vc';
51
+ rules += ' _d-bc1l9oh';
52
+ rules += ' _d-1uotwbwg';
53
+ rules += ' _d-eo0c6sf';
54
+ rules += ' _d-enzzrge';
55
+ rules += ' _d-enzykdd';
56
+ rules += ' _d-enzwzjc';
57
+ rules += ' _d-enzrfpb';
58
+ rules += ' _da';
59
59
  rules += ' ao';
60
- if (props.isDropTarget) rules += ' za';
61
- else rules += ' zb';
60
+ if (props.isDropTarget) rules += ' wa';
61
+ else rules += ' wb';
62
62
  if (props.isDropTarget) rules += ' br';
63
- rules += ' tc';
64
63
  rules += ' uc';
65
- rules += ' rc';
64
+ rules += ' vc';
66
65
  rules += ' sc';
67
- if (props.isFocusVisible) rules += ' xx';
68
- else if (props.isDropTarget) rules += ' xx';
69
- else rules += ' xi';
70
- if (props.isFocusVisible) rules += ' yx';
71
- else if (props.isDropTarget) rules += ' yx';
72
- else rules += ' yi';
73
- if (props.isFocusVisible) rules += ' vx';
74
- else if (props.isDropTarget) rules += ' vx';
75
- else rules += ' vi';
76
- if (props.isFocusVisible) rules += ' wx';
77
- else if (props.isDropTarget) rules += ' wx';
78
- else rules += ' wi';
66
+ rules += ' tc';
67
+ if (props.isFocusVisible) rules += ' cx';
68
+ else if (props.isDropTarget) rules += ' cx';
69
+ else rules += ' ci';
70
+ rules += ' _wd';
71
+ rules += ' _xd';
72
+ rules += ' _yd';
79
73
  rules += ' _zd';
80
- rules += ' _Ad';
81
- rules += ' _Bd';
82
- rules += ' _Cd';
83
- rules += ' Hh';
84
- rules += ' Ih';
74
+ rules += ' Eh';
85
75
  rules += ' Fh';
86
- rules += ' Gh';
76
+ rules += ' Ch';
77
+ rules += ' Dh';
87
78
  return rules;
88
79
  };
89
80
  const $797cda10ca96fc86$var$banner = function anonymous(props) {
90
81
  let rules = " .";
91
- rules += ' Ya';
92
- rules += ' _ca';
93
- rules += ' _ea';
94
- rules += ' B_d';
95
- rules += ' C_d';
82
+ rules += ' Va';
83
+ rules += ' Za';
84
+ rules += ' _ba';
85
+ rules += ' y_d';
86
+ rules += ' z_d';
87
+ rules += ' _0d';
88
+ rules += ' _2c';
96
89
  rules += ' _3d';
97
- rules += ' _5c';
98
- rules += ' _6d';
99
- rules += ' n-375tot';
100
- rules += ' ke';
101
- if (props.size === "L") rules += ' q___L';
102
- else if (props.size === "S") rules += ' q__Z';
103
- else rules += ' q___v';
90
+ rules += ' o-375tou';
91
+ rules += ' le';
92
+ if (props.size === "L") rules += ' r___L';
93
+ else if (props.size === "S") rules += ' r__Z';
94
+ else rules += ' r___v';
104
95
  if (props.isPressed) rules += ' b_____S';
105
96
  else if (props.isFocusVisible) rules += ' b_____S';
106
97
  else if (props.isHovered) rules += ' b_____S';
107
98
  else rules += ' b_____R';
99
+ rules += ' _wc';
100
+ rules += ' _xc';
101
+ rules += ' _yc';
108
102
  rules += ' _zc';
109
- rules += ' _Ac';
110
- rules += ' _Bc';
111
- rules += ' _Cc';
112
103
  rules += ' ac';
113
- rules += ' _id';
114
- rules += ' H-17c1d5h';
115
- rules += ' I-17c1d5h';
104
+ rules += ' _fd';
105
+ rules += ' E-17c1d5h';
116
106
  rules += ' F-17c1d5h';
117
- rules += ' G-17c1d5h';
118
- rules += ' -_375tot_n-I';
107
+ rules += ' C-17c1d5h';
108
+ rules += ' D-17c1d5h';
109
+ rules += ' -_375tou_o-I';
119
110
  return rules;
120
111
  };
121
112
  const $797cda10ca96fc86$export$3c6489d84dc98b6 = /*#__PURE__*/ (0, $faaBC$react.forwardRef)(function DropZone(props, ref) {
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+BM,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAAqE;AAEhH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BC,MAAM,2CAAW,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,SAAS,KAAoB,EAAE,GAA2B;IAClH,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,KACR,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,mCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,+BAAS,aAAa,MAAM,MAAM;kBAC5F,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,mDAAwB,EAAE,QAAQ;wBAAC,OAAO;4BAAC,cAAc;4BAAM,cAAc,YAAY,YAAY;kCAAE;wBAAI;kCACzG,MAAM,QAAQ;;oBAEf,YAAY,YAAY,IAAI,MAAM,QAAQ,kBAC1C,gCAAC;wBAAI,WAAW,6BAAO;kCAAC;wBAAI;kCAC1B,cAAA,gCAAC;sCACE,MAAM,cAAc,GAAG,MAAM,cAAc,GAAG,gBAAgB,MAAM,CAAC;;;;;;AAQtF","sources":["packages/@react-spectrum/s2/src/DropZone.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, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the drop zone. */\n children: ReactNode,\n /** Whether the drop zone has been filled. */\n isFilled?: boolean,\n /** The message to replace the default banner message that is shown when the drop zone is filled. */\n replaceMessage?: string,\n /**\n * The size of the DropZone.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n fontFamily: 'sans',\n color: 'gray-900',\n borderStyle: {\n default: 'dashed',\n isDropTarget: 'solid'\n },\n backgroundColor: {\n isDropTarget: 'blue-200'\n },\n borderWidth: 2,\n borderColor: {\n default: 'gray-300',\n isDropTarget: 'blue-800',\n isFocusVisible: 'blue-800'\n },\n borderRadius: 'lg',\n padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n position: 'absolute',\n left: 0,\n right: 0,\n marginX: 'auto',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: 20,\n width: 'fit',\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208\n }\n },\n backgroundColor: 'accent',\n borderRadius: 'default',\n color: 'white',\n fontWeight: 'bold',\n padding: '[calc((self(minHeight))/1.5)]'\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n let {\n size = 'M'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACDropZone\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n {renderProps => (\n <>\n <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n {props.children}\n </IllustratedMessageContext.Provider>\n {(renderProps.isDropTarget && props.isFilled) &&\n <div className={banner({size})}>\n <span>\n {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n </span>\n </div>\n }\n </>\n )}\n </RACDropZone>\n );\n});\n"],"names":[],"version":3,"file":"DropZone.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+BM,MAAM,0DAAkB,CAAA,GAAA,0BAAY,EAAqE;AAEhH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BC,MAAM,2CAAW,WAAW,GAAG,CAAA,GAAA,uBAAS,EAAE,SAAS,SAAS,KAAoB,EAAE,GAA2B;IAClH,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,KACR,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IAEvB,qBACE,gCAAC,CAAA,GAAA,mCAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,+BAAS,aAAa,MAAM,MAAM;kBAC5F,CAAA,4BACC;;kCACE,gCAAC,CAAA,GAAA,mDAAwB,EAAE,QAAQ;wBAAC,OAAO;4BAAC,cAAc;4BAAM,cAAc,YAAY,YAAY;kCAAE;wBAAI;kCACzG,MAAM,QAAQ;;oBAEf,YAAY,YAAY,IAAI,MAAM,QAAQ,kBAC1C,gCAAC;wBAAI,WAAW,6BAAO;kCAAC;wBAAI;kCAC1B,cAAA,gCAAC;sCACE,MAAM,cAAc,GAAG,MAAM,cAAc,GAAG,gBAAgB,MAAM,CAAC;;;;;;AAQtF","sources":["packages/@react-spectrum/s2/src/DropZone.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, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the drop zone. */\n children: ReactNode,\n /** Whether the drop zone has been filled. */\n isFilled?: boolean,\n /** The message to replace the default banner message that is shown when the drop zone is filled. */\n replaceMessage?: string,\n /**\n * The size of the DropZone.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n fontFamily: 'sans',\n color: 'gray-900',\n borderStyle: {\n default: 'dashed',\n isDropTarget: 'solid'\n },\n backgroundColor: {\n isDropTarget: 'blue-200'\n },\n borderWidth: 2,\n borderColor: {\n default: 'gray-300',\n isDropTarget: 'blue-800',\n isFocusVisible: 'blue-800'\n },\n borderRadius: 'lg',\n padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n position: 'absolute',\n left: 0,\n right: 0,\n marginX: 'auto',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: 20,\n width: 'fit',\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208\n }\n },\n backgroundColor: 'accent',\n borderRadius: 'default',\n color: 'white',\n fontWeight: 'bold',\n padding: '[calc((self(minHeight))/1.5)]'\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n let {\n size = 'M'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACDropZone\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n {renderProps => (\n <>\n <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n {props.children}\n </IllustratedMessageContext.Provider>\n {(renderProps.isDropTarget && props.isFilled) &&\n <div className={banner({size})}>\n <span>\n {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n </span>\n </div>\n }\n </>\n )}\n </RACDropZone>\n );\n});\n"],"names":[],"version":3,"file":"DropZone.cjs.map"}
package/dist/DropZone.css CHANGED
@@ -1,9 +1,9 @@
1
1
  @layer _.a {
2
- .Yc {
2
+ .Vc {
3
3
  position: relative;
4
4
  }
5
5
 
6
- ._ga {
6
+ ._da {
7
7
  font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
8
8
  }
9
9
 
@@ -11,11 +11,11 @@
11
11
  color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
12
12
  }
13
13
 
14
- .zb {
14
+ .wb {
15
15
  border-style: dashed;
16
16
  }
17
17
 
18
- .za {
18
+ .wa {
19
19
  border-style: solid;
20
20
  }
21
21
 
@@ -23,135 +23,111 @@
23
23
  background-color: var(--lightningcss-light, #e5f0fe) var(--lightningcss-dark, #0f1c52);
24
24
  }
25
25
 
26
- .tc {
26
+ .uc {
27
27
  border-top-width: 2px;
28
28
  }
29
29
 
30
- .uc {
30
+ .vc {
31
31
  border-bottom-width: 2px;
32
32
  }
33
33
 
34
- .rc {
34
+ .sc {
35
35
  border-inline-start-width: 2px;
36
36
  }
37
37
 
38
- .sc {
38
+ .tc {
39
39
  border-inline-end-width: 2px;
40
40
  }
41
41
 
42
- .xi {
43
- border-top-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
44
- }
45
-
46
- .xx {
47
- border-top-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
48
- }
49
-
50
- .yi {
51
- border-bottom-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
52
- }
53
-
54
- .yx {
55
- border-bottom-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
56
- }
57
-
58
- .vi {
59
- border-inline-start-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
42
+ .ci {
43
+ border-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
60
44
  }
61
45
 
62
- .vx {
63
- border-inline-start-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
46
+ .cx {
47
+ border-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
64
48
  }
65
49
 
66
- .wi {
67
- border-inline-end-color: var(--lightningcss-light, #dadada) var(--lightningcss-dark, #393939);
68
- }
69
-
70
- .wx {
71
- border-inline-end-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
72
- }
73
-
74
- ._zd {
50
+ ._wd {
75
51
  border-start-start-radius: .625rem;
76
52
  }
77
53
 
78
- ._Ad {
54
+ ._xd {
79
55
  border-start-end-radius: .625rem;
80
56
  }
81
57
 
82
- ._Bd {
58
+ ._yd {
83
59
  border-end-start-radius: .625rem;
84
60
  }
85
61
 
86
- ._Cd {
62
+ ._zd {
87
63
  border-end-end-radius: .625rem;
88
64
  }
89
65
 
90
- .Hh {
66
+ .Eh {
91
67
  padding-top: 1.5rem;
92
68
  }
93
69
 
94
- .Ih {
70
+ .Fh {
95
71
  padding-bottom: 1.5rem;
96
72
  }
97
73
 
98
- .Fh {
74
+ .Ch {
99
75
  padding-inline-start: 1.5rem;
100
76
  }
101
77
 
102
- .Gh {
78
+ .Dh {
103
79
  padding-inline-end: 1.5rem;
104
80
  }
105
81
 
106
- .Ya {
82
+ .Va {
107
83
  position: absolute;
108
84
  }
109
85
 
110
- ._ca {
86
+ .Za {
111
87
  left: 0;
112
88
  }
113
89
 
114
- ._ea {
90
+ ._ba {
115
91
  right: 0;
116
92
  }
117
93
 
118
- .B_d {
94
+ .y_d {
119
95
  margin-inline-start: auto;
120
96
  }
121
97
 
122
- .C_d {
98
+ .z_d {
123
99
  margin-inline-end: auto;
124
100
  }
125
101
 
126
- ._3d {
102
+ ._0d {
127
103
  display: flex;
128
104
  }
129
105
 
130
- ._5c {
106
+ ._2c {
131
107
  align-items: center;
132
108
  }
133
109
 
134
- ._6d {
110
+ ._3d {
135
111
  justify-content: center;
136
112
  }
137
113
 
138
- .n-375tot {
139
- min-height: var(--n);
114
+ .o-375tou {
115
+ min-height: var(--o);
140
116
  }
141
117
 
142
- .ke {
118
+ .le {
143
119
  width: fit-content;
144
120
  }
145
121
 
146
- .q___v {
122
+ .r___v {
147
123
  max-width: calc(12rem * var(--s2-scale));
148
124
  }
149
125
 
150
- .q__Z {
126
+ .r__Z {
151
127
  max-width: calc(10rem * var(--s2-scale));
152
128
  }
153
129
 
154
- .q___L {
130
+ .r___L {
155
131
  max-width: calc(13rem * var(--s2-scale));
156
132
  }
157
133
 
@@ -163,19 +139,19 @@
163
139
  background-color: var(--lightningcss-light, #274dea) var(--lightningcss-dark, #345bf8);
164
140
  }
165
141
 
166
- ._zc {
142
+ ._wc {
167
143
  border-start-start-radius: .5rem;
168
144
  }
169
145
 
170
- ._Ac {
146
+ ._xc {
171
147
  border-start-end-radius: .5rem;
172
148
  }
173
149
 
174
- ._Bc {
150
+ ._yc {
175
151
  border-end-start-radius: .5rem;
176
152
  }
177
153
 
178
- ._Cc {
154
+ ._zc {
179
155
  border-end-end-radius: .5rem;
180
156
  }
181
157
 
@@ -183,71 +159,71 @@
183
159
  color: #fff;
184
160
  }
185
161
 
186
- ._id {
162
+ ._fd {
187
163
  font-variation-settings: "wght" 700;
188
164
  font-synthesis-weight: none;
189
165
  font-weight: 700;
190
166
  }
191
167
 
192
- .H-17c1d5h {
193
- padding-top: calc((var(--n)) / 1.5);
168
+ .E-17c1d5h {
169
+ padding-top: calc((var(--o)) / 1.5);
194
170
  }
195
171
 
196
- .I-17c1d5h {
197
- padding-bottom: calc((var(--n)) / 1.5);
172
+ .F-17c1d5h {
173
+ padding-bottom: calc((var(--o)) / 1.5);
198
174
  }
199
175
 
200
- .F-17c1d5h {
201
- padding-inline-start: calc((var(--n)) / 1.5);
176
+ .C-17c1d5h {
177
+ padding-inline-start: calc((var(--o)) / 1.5);
202
178
  }
203
179
 
204
- .G-17c1d5h {
205
- padding-inline-end: calc((var(--n)) / 1.5);
180
+ .D-17c1d5h {
181
+ padding-inline-end: calc((var(--o)) / 1.5);
206
182
  }
207
183
 
208
- .-_375tot_n-I {
209
- --n: calc(1.25rem * var(--s2-scale));
184
+ .-_375tou_o-I {
185
+ --o: calc(1.25rem * var(--s2-scale));
210
186
  }
211
187
  }
212
188
 
213
189
  @layer _.b {
214
- ._g-enzrfpb:lang(ar) {
190
+ ._d-enzrfpb:lang(ar) {
215
191
  font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
216
192
  }
217
193
  }
218
194
 
219
195
  @layer _.c {
220
- ._g-enzwzjc:lang(he) {
196
+ ._d-enzwzjc:lang(he) {
221
197
  font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
222
198
  }
223
199
  }
224
200
 
225
201
  @layer _.d {
226
- ._g-enzykdd:lang(ja) {
202
+ ._d-enzykdd:lang(ja) {
227
203
  font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, MS Pゴシック, MS PGothic, sans-serif;
228
204
  }
229
205
  }
230
206
 
231
207
  @layer _.e {
232
- ._g-enzzrge:lang(ko) {
208
+ ._d-enzzrge:lang(ko) {
233
209
  font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
234
210
  }
235
211
  }
236
212
 
237
213
  @layer _.f {
238
- ._g-eo0c6sf:lang(zh) {
214
+ ._d-eo0c6sf:lang(zh) {
239
215
  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
240
216
  }
241
217
  }
242
218
 
243
219
  @layer _.g {
244
- ._g-1uotwbwg:lang(zh-hant) {
220
+ ._d-1uotwbwg:lang(zh-hant) {
245
221
  font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
246
222
  }
247
223
  }
248
224
 
249
225
  @layer _.h {
250
- ._g-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
226
+ ._d-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
251
227
  font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
252
228
  }
253
229
  }
@@ -1 +1 @@
1
- {"mappings":"AC2CiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAxBE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["1c1855bb3a6aeea4","packages/@react-spectrum/s2/src/DropZone.tsx"],"sourcesContent":["@import \"ab564bdb126b567b\";\n@import \"d5049ba06c2da1c6\";\n","/*\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, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the drop zone. */\n children: ReactNode,\n /** Whether the drop zone has been filled. */\n isFilled?: boolean,\n /** The message to replace the default banner message that is shown when the drop zone is filled. */\n replaceMessage?: string,\n /**\n * The size of the DropZone.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n fontFamily: 'sans',\n color: 'gray-900',\n borderStyle: {\n default: 'dashed',\n isDropTarget: 'solid'\n },\n backgroundColor: {\n isDropTarget: 'blue-200'\n },\n borderWidth: 2,\n borderColor: {\n default: 'gray-300',\n isDropTarget: 'blue-800',\n isFocusVisible: 'blue-800'\n },\n borderRadius: 'lg',\n padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n position: 'absolute',\n left: 0,\n right: 0,\n marginX: 'auto',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: 20,\n width: 'fit',\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208\n }\n },\n backgroundColor: 'accent',\n borderRadius: 'default',\n color: 'white',\n fontWeight: 'bold',\n padding: '[calc((self(minHeight))/1.5)]'\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n let {\n size = 'M'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACDropZone\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n {renderProps => (\n <>\n <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n {props.children}\n </IllustratedMessageContext.Provider>\n {(renderProps.isDropTarget && props.isFilled) &&\n <div className={banner({size})}>\n <span>\n {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n </span>\n </div>\n }\n </>\n )}\n </RACDropZone>\n );\n});\n"],"names":[],"version":3,"file":"DropZone.css.map"}
1
+ {"mappings":"AC2CiB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwBF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAxBE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA","sources":["1c1855bb3a6aeea4","packages/@react-spectrum/s2/src/DropZone.tsx"],"sourcesContent":["@import \"ab564bdb126b567b\";\n@import \"d5049ba06c2da1c6\";\n","/*\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, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the drop zone. */\n children: ReactNode,\n /** Whether the drop zone has been filled. */\n isFilled?: boolean,\n /** The message to replace the default banner message that is shown when the drop zone is filled. */\n replaceMessage?: string,\n /**\n * The size of the DropZone.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n fontFamily: 'sans',\n color: 'gray-900',\n borderStyle: {\n default: 'dashed',\n isDropTarget: 'solid'\n },\n backgroundColor: {\n isDropTarget: 'blue-200'\n },\n borderWidth: 2,\n borderColor: {\n default: 'gray-300',\n isDropTarget: 'blue-800',\n isFocusVisible: 'blue-800'\n },\n borderRadius: 'lg',\n padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n position: 'absolute',\n left: 0,\n right: 0,\n marginX: 'auto',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: 20,\n width: 'fit',\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208\n }\n },\n backgroundColor: 'accent',\n borderRadius: 'default',\n color: 'white',\n fontWeight: 'bold',\n padding: '[calc((self(minHeight))/1.5)]'\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n let {\n size = 'M'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACDropZone\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n {renderProps => (\n <>\n <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n {props.children}\n </IllustratedMessageContext.Provider>\n {(renderProps.isDropTarget && props.isFilled) &&\n <div className={banner({size})}>\n <span>\n {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n </span>\n </div>\n }\n </>\n )}\n </RACDropZone>\n );\n});\n"],"names":[],"version":3,"file":"DropZone.css.map"}
package/dist/DropZone.mjs CHANGED
@@ -33,82 +33,73 @@ function $parcel$interopDefault(a) {
33
33
  const $fb6e45fba2483f65$export$14a72053295ff9a6 = /*#__PURE__*/ (0, $4h9kk$createContext)(null);
34
34
  const $fb6e45fba2483f65$var$dropzone = function anonymous(props, overrides) {
35
35
  let rules = " .";
36
- let matches = (overrides || '').match(/(?:^|\s)(?:B|C|D|E|__d|__c|g|_9|_8|__E|__g|__h|__e|__f|Y|__U|_b|_d|Z|_a|k|p|q|j|n|o)[^\s]+/g) || [];
36
+ let matches = (overrides || '').match(/(?:^|\s)(?:y|z|A|B|__a|_9|h|_6|_5|__B|__d|__e|__b|__c|V|__R|Y|_a|W|X|l|q|r|k|o|p)[^\s]+/g) || [];
37
37
  rules += matches.join('');
38
- let $Y = false;
39
- for (let p of matches)if (/^\s*Y/.test(p)) $Y = true;
38
+ let $V = false;
39
+ for (let p of matches)if (/^\s*V/.test(p)) $V = true;
40
+ rules += ' _0d';
40
41
  rules += ' _3d';
41
- rules += ' _6d';
42
- rules += ' _5c';
43
- if (!$Y) rules += ' Yc';
44
- rules += ' _g-bc1l9oh';
45
- rules += ' _g-1uotwbwg';
46
- rules += ' _g-eo0c6sf';
47
- rules += ' _g-enzzrge';
48
- rules += ' _g-enzykdd';
49
- rules += ' _g-enzwzjc';
50
- rules += ' _g-enzrfpb';
51
- rules += ' _ga';
42
+ rules += ' _2c';
43
+ if (!$V) rules += ' Vc';
44
+ rules += ' _d-bc1l9oh';
45
+ rules += ' _d-1uotwbwg';
46
+ rules += ' _d-eo0c6sf';
47
+ rules += ' _d-enzzrge';
48
+ rules += ' _d-enzykdd';
49
+ rules += ' _d-enzwzjc';
50
+ rules += ' _d-enzrfpb';
51
+ rules += ' _da';
52
52
  rules += ' ao';
53
- if (props.isDropTarget) rules += ' za';
54
- else rules += ' zb';
53
+ if (props.isDropTarget) rules += ' wa';
54
+ else rules += ' wb';
55
55
  if (props.isDropTarget) rules += ' br';
56
- rules += ' tc';
57
56
  rules += ' uc';
58
- rules += ' rc';
57
+ rules += ' vc';
59
58
  rules += ' sc';
60
- if (props.isFocusVisible) rules += ' xx';
61
- else if (props.isDropTarget) rules += ' xx';
62
- else rules += ' xi';
63
- if (props.isFocusVisible) rules += ' yx';
64
- else if (props.isDropTarget) rules += ' yx';
65
- else rules += ' yi';
66
- if (props.isFocusVisible) rules += ' vx';
67
- else if (props.isDropTarget) rules += ' vx';
68
- else rules += ' vi';
69
- if (props.isFocusVisible) rules += ' wx';
70
- else if (props.isDropTarget) rules += ' wx';
71
- else rules += ' wi';
59
+ rules += ' tc';
60
+ if (props.isFocusVisible) rules += ' cx';
61
+ else if (props.isDropTarget) rules += ' cx';
62
+ else rules += ' ci';
63
+ rules += ' _wd';
64
+ rules += ' _xd';
65
+ rules += ' _yd';
72
66
  rules += ' _zd';
73
- rules += ' _Ad';
74
- rules += ' _Bd';
75
- rules += ' _Cd';
76
- rules += ' Hh';
77
- rules += ' Ih';
67
+ rules += ' Eh';
78
68
  rules += ' Fh';
79
- rules += ' Gh';
69
+ rules += ' Ch';
70
+ rules += ' Dh';
80
71
  return rules;
81
72
  };
82
73
  const $fb6e45fba2483f65$var$banner = function anonymous(props) {
83
74
  let rules = " .";
84
- rules += ' Ya';
85
- rules += ' _ca';
86
- rules += ' _ea';
87
- rules += ' B_d';
88
- rules += ' C_d';
75
+ rules += ' Va';
76
+ rules += ' Za';
77
+ rules += ' _ba';
78
+ rules += ' y_d';
79
+ rules += ' z_d';
80
+ rules += ' _0d';
81
+ rules += ' _2c';
89
82
  rules += ' _3d';
90
- rules += ' _5c';
91
- rules += ' _6d';
92
- rules += ' n-375tot';
93
- rules += ' ke';
94
- if (props.size === "L") rules += ' q___L';
95
- else if (props.size === "S") rules += ' q__Z';
96
- else rules += ' q___v';
83
+ rules += ' o-375tou';
84
+ rules += ' le';
85
+ if (props.size === "L") rules += ' r___L';
86
+ else if (props.size === "S") rules += ' r__Z';
87
+ else rules += ' r___v';
97
88
  if (props.isPressed) rules += ' b_____S';
98
89
  else if (props.isFocusVisible) rules += ' b_____S';
99
90
  else if (props.isHovered) rules += ' b_____S';
100
91
  else rules += ' b_____R';
92
+ rules += ' _wc';
93
+ rules += ' _xc';
94
+ rules += ' _yc';
101
95
  rules += ' _zc';
102
- rules += ' _Ac';
103
- rules += ' _Bc';
104
- rules += ' _Cc';
105
96
  rules += ' ac';
106
- rules += ' _id';
107
- rules += ' H-17c1d5h';
108
- rules += ' I-17c1d5h';
97
+ rules += ' _fd';
98
+ rules += ' E-17c1d5h';
109
99
  rules += ' F-17c1d5h';
110
- rules += ' G-17c1d5h';
111
- rules += ' -_375tot_n-I';
100
+ rules += ' C-17c1d5h';
101
+ rules += ' D-17c1d5h';
102
+ rules += ' -_375tou_o-I';
112
103
  return rules;
113
104
  };
114
105
  const $fb6e45fba2483f65$export$3c6489d84dc98b6 = /*#__PURE__*/ (0, $4h9kk$forwardRef)(function DropZone(props, ref) {
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+BM,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAAqE;AAEhH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BC,MAAM,2CAAW,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,SAAS,KAAoB,EAAE,GAA2B;IAClH,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,KACR,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,eAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,+BAAS,aAAa,MAAM,MAAM;kBAC5F,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAwB,EAAE,QAAQ;wBAAC,OAAO;4BAAC,cAAc;4BAAM,cAAc,YAAY,YAAY;kCAAE;wBAAI;kCACzG,MAAM,QAAQ;;oBAEf,YAAY,YAAY,IAAI,MAAM,QAAQ,kBAC1C,gBAAC;wBAAI,WAAW,6BAAO;kCAAC;wBAAI;kCAC1B,cAAA,gBAAC;sCACE,MAAM,cAAc,GAAG,MAAM,cAAc,GAAG,gBAAgB,MAAM,CAAC;;;;;;AAQtF","sources":["packages/@react-spectrum/s2/src/DropZone.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, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the drop zone. */\n children: ReactNode,\n /** Whether the drop zone has been filled. */\n isFilled?: boolean,\n /** The message to replace the default banner message that is shown when the drop zone is filled. */\n replaceMessage?: string,\n /**\n * The size of the DropZone.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n fontFamily: 'sans',\n color: 'gray-900',\n borderStyle: {\n default: 'dashed',\n isDropTarget: 'solid'\n },\n backgroundColor: {\n isDropTarget: 'blue-200'\n },\n borderWidth: 2,\n borderColor: {\n default: 'gray-300',\n isDropTarget: 'blue-800',\n isFocusVisible: 'blue-800'\n },\n borderRadius: 'lg',\n padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n position: 'absolute',\n left: 0,\n right: 0,\n marginX: 'auto',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: 20,\n width: 'fit',\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208\n }\n },\n backgroundColor: 'accent',\n borderRadius: 'default',\n color: 'white',\n fontWeight: 'bold',\n padding: '[calc((self(minHeight))/1.5)]'\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n let {\n size = 'M'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACDropZone\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n {renderProps => (\n <>\n <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n {props.children}\n </IllustratedMessageContext.Provider>\n {(renderProps.isDropTarget && props.isFilled) &&\n <div className={banner({size})}>\n <span>\n {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n </span>\n </div>\n }\n </>\n )}\n </RACDropZone>\n );\n});\n"],"names":[],"version":3,"file":"DropZone.mjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;AA+BM,MAAM,0DAAkB,CAAA,GAAA,oBAAY,EAAqE;AAEhH,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BC,MAAM,2CAAW,WAAW,GAAG,CAAA,GAAA,iBAAS,EAAE,SAAS,SAAS,KAAoB,EAAE,GAA2B;IAClH,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,QACF,OAAO,KACR,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IAEvB,qBACE,gBAAC,CAAA,GAAA,eAAU;QACR,GAAG,KAAK;QACT,KAAK;QACL,OAAO,MAAM,YAAY;QACzB,WAAW,CAAA,cAAe,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,+BAAS,aAAa,MAAM,MAAM;kBAC5F,CAAA,4BACC;;kCACE,gBAAC,CAAA,GAAA,yCAAwB,EAAE,QAAQ;wBAAC,OAAO;4BAAC,cAAc;4BAAM,cAAc,YAAY,YAAY;kCAAE;wBAAI;kCACzG,MAAM,QAAQ;;oBAEf,YAAY,YAAY,IAAI,MAAM,QAAQ,kBAC1C,gBAAC;wBAAI,WAAW,6BAAO;kCAAC;wBAAI;kCAC1B,cAAA,gBAAC;sCACE,MAAM,cAAc,GAAG,MAAM,cAAc,GAAG,gBAAgB,MAAM,CAAC;;;;;;AAQtF","sources":["packages/@react-spectrum/s2/src/DropZone.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, DropZoneRenderProps, DropZone as RACDropZone, DropZoneProps as RACDropZoneProps} from 'react-aria-components';\nimport {createContext, forwardRef, ReactNode} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {getAllowedOverrides, StylesPropWithHeight, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {IllustratedMessageContext} from './IllustratedMessage';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface DropZoneProps extends Omit<RACDropZoneProps, 'className' | 'style' | 'children' | 'isDisabled' | 'onHover' | 'onHoverStart' | 'onHoverEnd' | 'onHoverChange'>, UnsafeStyles, DOMProps {\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithHeight,\n /** The content to display in the drop zone. */\n children: ReactNode,\n /** Whether the drop zone has been filled. */\n isFilled?: boolean,\n /** The message to replace the default banner message that is shown when the drop zone is filled. */\n replaceMessage?: string,\n /**\n * The size of the DropZone.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nexport const DropZoneContext = createContext<ContextValue<Partial<DropZoneProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst dropzone = style<DropZoneRenderProps>({\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n fontFamily: 'sans',\n color: 'gray-900',\n borderStyle: {\n default: 'dashed',\n isDropTarget: 'solid'\n },\n backgroundColor: {\n isDropTarget: 'blue-200'\n },\n borderWidth: 2,\n borderColor: {\n default: 'gray-300',\n isDropTarget: 'blue-800',\n isFocusVisible: 'blue-800'\n },\n borderRadius: 'lg',\n padding: 24\n}, getAllowedOverrides({height: true}));\n\nconst banner = style({\n position: 'absolute',\n left: 0,\n right: 0,\n marginX: 'auto',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n minHeight: 20,\n width: 'fit',\n maxWidth: {\n default: 192,\n size: {\n S: 160,\n L: 208\n }\n },\n backgroundColor: 'accent',\n borderRadius: 'default',\n color: 'white',\n fontWeight: 'bold',\n padding: '[calc((self(minHeight))/1.5)]'\n});\n\n/**\n * A drop zone is an area into which one or multiple objects can be dragged and dropped.\n */\nexport const DropZone = /*#__PURE__*/ forwardRef(function DropZone(props: DropZoneProps, ref: DOMRef<HTMLDivElement>) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n [props, ref] = useSpectrumContextProps(props, ref, DropZoneContext);\n let {\n size = 'M'\n } = props;\n let domRef = useDOMRef(ref);\n\n return (\n <RACDropZone\n {...props}\n ref={domRef}\n style={props.UNSAFE_style}\n className={renderProps => (props.UNSAFE_className || '') + dropzone(renderProps, props.styles)}>\n {renderProps => (\n <>\n <IllustratedMessageContext.Provider value={{isInDropZone: true, isDropTarget: renderProps.isDropTarget, size}}>\n {props.children}\n </IllustratedMessageContext.Provider>\n {(renderProps.isDropTarget && props.isFilled) &&\n <div className={banner({size})}>\n <span>\n {props.replaceMessage ? props.replaceMessage : stringFormatter.format('dropzone.replaceMessage')}\n </span>\n </div>\n }\n </>\n )}\n </RACDropZone>\n );\n});\n"],"names":[],"version":3,"file":"DropZone.mjs.map"}