@react-spectrum/s2 3.0.0-nightly-ab9fd5c68-241126 → 3.0.0-nightly-10a43de88-241127

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 (359) hide show
  1. package/dist/Accordion.cjs +2 -5
  2. package/dist/Accordion.cjs.map +1 -1
  3. package/dist/Accordion.css.map +1 -1
  4. package/dist/Accordion.mjs +2 -5
  5. package/dist/Accordion.mjs.map +1 -1
  6. package/dist/ActionButton.cjs +2 -6
  7. package/dist/ActionButton.cjs.map +1 -1
  8. package/dist/ActionButton.css.map +1 -1
  9. package/dist/ActionButton.mjs +3 -7
  10. package/dist/ActionButton.mjs.map +1 -1
  11. package/dist/ActionButtonGroup.cjs +2 -5
  12. package/dist/ActionButtonGroup.cjs.map +1 -1
  13. package/dist/ActionButtonGroup.css.map +1 -1
  14. package/dist/ActionButtonGroup.mjs +2 -5
  15. package/dist/ActionButtonGroup.mjs.map +1 -1
  16. package/dist/ActionMenu.cjs +2 -5
  17. package/dist/ActionMenu.cjs.map +1 -1
  18. package/dist/ActionMenu.mjs +2 -5
  19. package/dist/ActionMenu.mjs.map +1 -1
  20. package/dist/AlertDialog.cjs +2 -5
  21. package/dist/AlertDialog.cjs.map +1 -1
  22. package/dist/AlertDialog.css.map +1 -1
  23. package/dist/AlertDialog.mjs +2 -5
  24. package/dist/AlertDialog.mjs.map +1 -1
  25. package/dist/Avatar.cjs +2 -5
  26. package/dist/Avatar.cjs.map +1 -1
  27. package/dist/Avatar.css.map +1 -1
  28. package/dist/Avatar.mjs +2 -5
  29. package/dist/Avatar.mjs.map +1 -1
  30. package/dist/AvatarGroup.cjs +2 -5
  31. package/dist/AvatarGroup.cjs.map +1 -1
  32. package/dist/AvatarGroup.css.map +1 -1
  33. package/dist/AvatarGroup.mjs +2 -5
  34. package/dist/AvatarGroup.mjs.map +1 -1
  35. package/dist/Badge.cjs +2 -5
  36. package/dist/Badge.cjs.map +1 -1
  37. package/dist/Badge.css.map +1 -1
  38. package/dist/Badge.mjs +2 -5
  39. package/dist/Badge.mjs.map +1 -1
  40. package/dist/Breadcrumbs.cjs +4 -6
  41. package/dist/Breadcrumbs.cjs.map +1 -1
  42. package/dist/Breadcrumbs.css.map +1 -1
  43. package/dist/Breadcrumbs.mjs +5 -7
  44. package/dist/Breadcrumbs.mjs.map +1 -1
  45. package/dist/Button.cjs +4 -12
  46. package/dist/Button.cjs.map +1 -1
  47. package/dist/Button.css.map +1 -1
  48. package/dist/Button.mjs +5 -13
  49. package/dist/Button.mjs.map +1 -1
  50. package/dist/ButtonGroup.cjs +2 -5
  51. package/dist/ButtonGroup.cjs.map +1 -1
  52. package/dist/ButtonGroup.css.map +1 -1
  53. package/dist/ButtonGroup.mjs +3 -6
  54. package/dist/ButtonGroup.mjs.map +1 -1
  55. package/dist/CardView.cjs +2 -3
  56. package/dist/CardView.cjs.map +1 -1
  57. package/dist/CardView.css.map +1 -1
  58. package/dist/CardView.mjs +3 -4
  59. package/dist/CardView.mjs.map +1 -1
  60. package/dist/Checkbox.cjs +2 -6
  61. package/dist/Checkbox.cjs.map +1 -1
  62. package/dist/Checkbox.css.map +1 -1
  63. package/dist/Checkbox.mjs +3 -7
  64. package/dist/Checkbox.mjs.map +1 -1
  65. package/dist/CheckboxGroup.cjs +2 -5
  66. package/dist/CheckboxGroup.cjs.map +1 -1
  67. package/dist/CheckboxGroup.css.map +1 -1
  68. package/dist/CheckboxGroup.mjs +3 -6
  69. package/dist/CheckboxGroup.mjs.map +1 -1
  70. package/dist/ClearButton.cjs +2 -3
  71. package/dist/ClearButton.cjs.map +1 -1
  72. package/dist/ClearButton.css.map +1 -1
  73. package/dist/ClearButton.mjs +2 -3
  74. package/dist/ClearButton.mjs.map +1 -1
  75. package/dist/CloseButton.cjs +2 -5
  76. package/dist/CloseButton.cjs.map +1 -1
  77. package/dist/CloseButton.css.map +1 -1
  78. package/dist/CloseButton.mjs +2 -5
  79. package/dist/CloseButton.mjs.map +1 -1
  80. package/dist/ColorArea.cjs +2 -5
  81. package/dist/ColorArea.cjs.map +1 -1
  82. package/dist/ColorArea.css.map +1 -1
  83. package/dist/ColorArea.mjs +2 -5
  84. package/dist/ColorArea.mjs.map +1 -1
  85. package/dist/ColorField.cjs +2 -5
  86. package/dist/ColorField.cjs.map +1 -1
  87. package/dist/ColorField.css.map +1 -1
  88. package/dist/ColorField.mjs +3 -6
  89. package/dist/ColorField.mjs.map +1 -1
  90. package/dist/ColorSlider.cjs +2 -5
  91. package/dist/ColorSlider.cjs.map +1 -1
  92. package/dist/ColorSlider.css.map +1 -1
  93. package/dist/ColorSlider.mjs +3 -6
  94. package/dist/ColorSlider.mjs.map +1 -1
  95. package/dist/ColorSwatch.cjs +2 -5
  96. package/dist/ColorSwatch.cjs.map +1 -1
  97. package/dist/ColorSwatch.css.map +1 -1
  98. package/dist/ColorSwatch.mjs +3 -6
  99. package/dist/ColorSwatch.mjs.map +1 -1
  100. package/dist/ColorSwatchPicker.cjs +2 -5
  101. package/dist/ColorSwatchPicker.cjs.map +1 -1
  102. package/dist/ColorSwatchPicker.css.map +1 -1
  103. package/dist/ColorSwatchPicker.mjs +2 -5
  104. package/dist/ColorSwatchPicker.mjs.map +1 -1
  105. package/dist/ColorWheel.cjs +2 -5
  106. package/dist/ColorWheel.cjs.map +1 -1
  107. package/dist/ColorWheel.css.map +1 -1
  108. package/dist/ColorWheel.mjs +2 -5
  109. package/dist/ColorWheel.mjs.map +1 -1
  110. package/dist/ComboBox.cjs +2 -5
  111. package/dist/ComboBox.cjs.map +1 -1
  112. package/dist/ComboBox.css.map +1 -1
  113. package/dist/ComboBox.mjs +3 -6
  114. package/dist/ComboBox.mjs.map +1 -1
  115. package/dist/Content.cjs +12 -19
  116. package/dist/Content.cjs.map +1 -1
  117. package/dist/Content.mjs +12 -19
  118. package/dist/Content.mjs.map +1 -1
  119. package/dist/ContextualHelp.cjs +2 -5
  120. package/dist/ContextualHelp.cjs.map +1 -1
  121. package/dist/ContextualHelp.css.map +1 -1
  122. package/dist/ContextualHelp.mjs +2 -5
  123. package/dist/ContextualHelp.mjs.map +1 -1
  124. package/dist/CustomDialog.cjs +2 -5
  125. package/dist/CustomDialog.cjs.map +1 -1
  126. package/dist/CustomDialog.css.map +1 -1
  127. package/dist/CustomDialog.mjs +2 -5
  128. package/dist/CustomDialog.mjs.map +1 -1
  129. package/dist/Dialog.cjs +2 -6
  130. package/dist/Dialog.cjs.map +1 -1
  131. package/dist/Dialog.css.map +1 -1
  132. package/dist/Dialog.mjs +2 -6
  133. package/dist/Dialog.mjs.map +1 -1
  134. package/dist/Disclosure.cjs +6 -15
  135. package/dist/Disclosure.cjs.map +1 -1
  136. package/dist/Disclosure.css.map +1 -1
  137. package/dist/Disclosure.mjs +7 -16
  138. package/dist/Disclosure.mjs.map +1 -1
  139. package/dist/Divider.cjs +2 -6
  140. package/dist/Divider.cjs.map +1 -1
  141. package/dist/Divider.css.map +1 -1
  142. package/dist/Divider.mjs +2 -6
  143. package/dist/Divider.mjs.map +1 -1
  144. package/dist/DropZone.cjs +2 -5
  145. package/dist/DropZone.cjs.map +1 -1
  146. package/dist/DropZone.css.map +1 -1
  147. package/dist/DropZone.mjs +2 -5
  148. package/dist/DropZone.mjs.map +1 -1
  149. package/dist/Field.cjs +6 -9
  150. package/dist/Field.cjs.map +1 -1
  151. package/dist/Field.css.map +1 -1
  152. package/dist/Field.mjs +6 -9
  153. package/dist/Field.mjs.map +1 -1
  154. package/dist/Form.cjs +2 -5
  155. package/dist/Form.cjs.map +1 -1
  156. package/dist/Form.css.map +1 -1
  157. package/dist/Form.mjs +2 -5
  158. package/dist/Form.mjs.map +1 -1
  159. package/dist/FullscreenDialog.cjs +2 -5
  160. package/dist/FullscreenDialog.cjs.map +1 -1
  161. package/dist/FullscreenDialog.css.map +1 -1
  162. package/dist/FullscreenDialog.mjs +2 -5
  163. package/dist/FullscreenDialog.mjs.map +1 -1
  164. package/dist/IllustratedMessage.cjs +2 -6
  165. package/dist/IllustratedMessage.cjs.map +1 -1
  166. package/dist/IllustratedMessage.css.map +1 -1
  167. package/dist/IllustratedMessage.mjs +2 -6
  168. package/dist/IllustratedMessage.mjs.map +1 -1
  169. package/dist/Image.cjs +2 -3
  170. package/dist/Image.cjs.map +1 -1
  171. package/dist/Image.css.map +1 -1
  172. package/dist/Image.mjs +3 -4
  173. package/dist/Image.mjs.map +1 -1
  174. package/dist/InlineAlert.cjs +2 -6
  175. package/dist/InlineAlert.cjs.map +1 -1
  176. package/dist/InlineAlert.css.map +1 -1
  177. package/dist/InlineAlert.mjs +3 -7
  178. package/dist/InlineAlert.mjs.map +1 -1
  179. package/dist/Link.cjs +2 -6
  180. package/dist/Link.cjs.map +1 -1
  181. package/dist/Link.css.map +1 -1
  182. package/dist/Link.mjs +3 -7
  183. package/dist/Link.mjs.map +1 -1
  184. package/dist/Menu.cjs +2 -5
  185. package/dist/Menu.cjs.map +1 -1
  186. package/dist/Menu.css.map +1 -1
  187. package/dist/Menu.mjs +3 -6
  188. package/dist/Menu.mjs.map +1 -1
  189. package/dist/Meter.cjs +2 -6
  190. package/dist/Meter.cjs.map +1 -1
  191. package/dist/Meter.css.map +1 -1
  192. package/dist/Meter.mjs +2 -6
  193. package/dist/Meter.mjs.map +1 -1
  194. package/dist/Modal.cjs +2 -5
  195. package/dist/Modal.cjs.map +1 -1
  196. package/dist/Modal.css.map +1 -1
  197. package/dist/Modal.mjs +3 -6
  198. package/dist/Modal.mjs.map +1 -1
  199. package/dist/NumberField.cjs +2 -5
  200. package/dist/NumberField.cjs.map +1 -1
  201. package/dist/NumberField.css.map +1 -1
  202. package/dist/NumberField.mjs +3 -6
  203. package/dist/NumberField.mjs.map +1 -1
  204. package/dist/Picker.cjs +2 -5
  205. package/dist/Picker.cjs.map +1 -1
  206. package/dist/Picker.css.map +1 -1
  207. package/dist/Picker.mjs +3 -6
  208. package/dist/Picker.mjs.map +1 -1
  209. package/dist/Popover.cjs +4 -8
  210. package/dist/Popover.cjs.map +1 -1
  211. package/dist/Popover.css.map +1 -1
  212. package/dist/Popover.mjs +5 -9
  213. package/dist/Popover.mjs.map +1 -1
  214. package/dist/ProgressBar.cjs +2 -6
  215. package/dist/ProgressBar.cjs.map +1 -1
  216. package/dist/ProgressBar.css.map +1 -1
  217. package/dist/ProgressBar.mjs +2 -6
  218. package/dist/ProgressBar.mjs.map +1 -1
  219. package/dist/ProgressCircle.cjs +2 -6
  220. package/dist/ProgressCircle.cjs.map +1 -1
  221. package/dist/ProgressCircle.css.map +1 -1
  222. package/dist/ProgressCircle.mjs +2 -6
  223. package/dist/ProgressCircle.mjs.map +1 -1
  224. package/dist/Radio.cjs +2 -6
  225. package/dist/Radio.cjs.map +1 -1
  226. package/dist/Radio.css.map +1 -1
  227. package/dist/Radio.mjs +3 -7
  228. package/dist/Radio.mjs.map +1 -1
  229. package/dist/RadioGroup.cjs +2 -6
  230. package/dist/RadioGroup.cjs.map +1 -1
  231. package/dist/RadioGroup.css.map +1 -1
  232. package/dist/RadioGroup.mjs +3 -7
  233. package/dist/RadioGroup.mjs.map +1 -1
  234. package/dist/RangeSlider.cjs +2 -3
  235. package/dist/RangeSlider.cjs.map +1 -1
  236. package/dist/RangeSlider.mjs +3 -4
  237. package/dist/RangeSlider.mjs.map +1 -1
  238. package/dist/SearchField.cjs +2 -5
  239. package/dist/SearchField.cjs.map +1 -1
  240. package/dist/SearchField.css.map +1 -1
  241. package/dist/SearchField.mjs +3 -6
  242. package/dist/SearchField.mjs.map +1 -1
  243. package/dist/SegmentedControl.cjs +5 -11
  244. package/dist/SegmentedControl.cjs.map +1 -1
  245. package/dist/SegmentedControl.css.map +1 -1
  246. package/dist/SegmentedControl.mjs +6 -12
  247. package/dist/SegmentedControl.mjs.map +1 -1
  248. package/dist/Slider.cjs +2 -3
  249. package/dist/Slider.cjs.map +1 -1
  250. package/dist/Slider.css.map +1 -1
  251. package/dist/Slider.mjs +3 -4
  252. package/dist/Slider.mjs.map +1 -1
  253. package/dist/StatusLight.cjs +2 -6
  254. package/dist/StatusLight.cjs.map +1 -1
  255. package/dist/StatusLight.css.map +1 -1
  256. package/dist/StatusLight.mjs +2 -6
  257. package/dist/StatusLight.mjs.map +1 -1
  258. package/dist/Switch.cjs +2 -6
  259. package/dist/Switch.cjs.map +1 -1
  260. package/dist/Switch.css.map +1 -1
  261. package/dist/Switch.mjs +3 -7
  262. package/dist/Switch.mjs.map +1 -1
  263. package/dist/TableView.cjs +9 -21
  264. package/dist/TableView.cjs.map +1 -1
  265. package/dist/TableView.css.map +1 -1
  266. package/dist/TableView.mjs +10 -22
  267. package/dist/TableView.mjs.map +1 -1
  268. package/dist/Tabs.cjs +2 -5
  269. package/dist/Tabs.cjs.map +1 -1
  270. package/dist/Tabs.css.map +1 -1
  271. package/dist/Tabs.mjs +2 -5
  272. package/dist/Tabs.mjs.map +1 -1
  273. package/dist/TagGroup.cjs +4 -6
  274. package/dist/TagGroup.cjs.map +1 -1
  275. package/dist/TagGroup.css.map +1 -1
  276. package/dist/TagGroup.mjs +4 -6
  277. package/dist/TagGroup.mjs.map +1 -1
  278. package/dist/TextField.cjs +8 -19
  279. package/dist/TextField.cjs.map +1 -1
  280. package/dist/TextField.css.map +1 -1
  281. package/dist/TextField.mjs +9 -20
  282. package/dist/TextField.mjs.map +1 -1
  283. package/dist/ToggleButton.cjs +2 -6
  284. package/dist/ToggleButton.cjs.map +1 -1
  285. package/dist/ToggleButton.css.map +1 -1
  286. package/dist/ToggleButton.mjs +2 -6
  287. package/dist/ToggleButton.mjs.map +1 -1
  288. package/dist/ToggleButtonGroup.cjs +2 -5
  289. package/dist/ToggleButtonGroup.cjs.map +1 -1
  290. package/dist/ToggleButtonGroup.mjs +2 -5
  291. package/dist/ToggleButtonGroup.mjs.map +1 -1
  292. package/dist/Tooltip.cjs +3 -6
  293. package/dist/Tooltip.cjs.map +1 -1
  294. package/dist/Tooltip.css.map +1 -1
  295. package/dist/Tooltip.mjs +4 -7
  296. package/dist/Tooltip.mjs.map +1 -1
  297. package/dist/types.d.ts +64 -64
  298. package/dist/types.d.ts.map +1 -1
  299. package/package.json +17 -17
  300. package/src/Accordion.tsx +5 -8
  301. package/src/ActionButton.tsx +6 -9
  302. package/src/ActionButtonGroup.tsx +5 -8
  303. package/src/ActionMenu.tsx +5 -8
  304. package/src/AlertDialog.tsx +5 -8
  305. package/src/Avatar.tsx +5 -8
  306. package/src/AvatarGroup.tsx +5 -8
  307. package/src/Badge.tsx +5 -8
  308. package/src/Breadcrumbs.tsx +6 -12
  309. package/src/Button.tsx +10 -16
  310. package/src/ButtonGroup.tsx +5 -8
  311. package/src/CardView.tsx +2 -5
  312. package/src/Checkbox.tsx +6 -9
  313. package/src/CheckboxGroup.tsx +5 -8
  314. package/src/ClearButton.tsx +2 -5
  315. package/src/CloseButton.tsx +5 -8
  316. package/src/ColorArea.tsx +5 -8
  317. package/src/ColorField.tsx +5 -8
  318. package/src/ColorSlider.tsx +5 -8
  319. package/src/ColorSwatch.tsx +5 -8
  320. package/src/ColorSwatchPicker.tsx +5 -8
  321. package/src/ColorWheel.tsx +5 -8
  322. package/src/ComboBox.tsx +5 -8
  323. package/src/Content.tsx +12 -30
  324. package/src/ContextualHelp.tsx +5 -8
  325. package/src/CustomDialog.tsx +5 -8
  326. package/src/Dialog.tsx +6 -9
  327. package/src/Disclosure.tsx +15 -24
  328. package/src/Divider.tsx +6 -9
  329. package/src/DropZone.tsx +5 -8
  330. package/src/Field.tsx +6 -15
  331. package/src/Form.tsx +5 -8
  332. package/src/FullscreenDialog.tsx +5 -8
  333. package/src/IllustratedMessage.tsx +6 -9
  334. package/src/Image.tsx +3 -6
  335. package/src/InlineAlert.tsx +6 -9
  336. package/src/Link.tsx +6 -9
  337. package/src/Menu.tsx +5 -8
  338. package/src/Meter.tsx +6 -9
  339. package/src/Modal.tsx +5 -8
  340. package/src/NumberField.tsx +5 -8
  341. package/src/Picker.tsx +5 -8
  342. package/src/Popover.tsx +9 -15
  343. package/src/ProgressBar.tsx +6 -9
  344. package/src/ProgressCircle.tsx +6 -9
  345. package/src/Radio.tsx +6 -9
  346. package/src/RadioGroup.tsx +6 -9
  347. package/src/RangeSlider.tsx +2 -5
  348. package/src/SearchField.tsx +5 -8
  349. package/src/SegmentedControl.tsx +10 -16
  350. package/src/Slider.tsx +2 -5
  351. package/src/StatusLight.tsx +6 -9
  352. package/src/Switch.tsx +6 -9
  353. package/src/TableView.tsx +20 -32
  354. package/src/Tabs.tsx +5 -8
  355. package/src/TagGroup.tsx +7 -14
  356. package/src/TextField.tsx +20 -28
  357. package/src/ToggleButton.tsx +6 -9
  358. package/src/ToggleButtonGroup.tsx +5 -8
  359. package/src/Tooltip.tsx +5 -9
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAqDD,MAAM;;;;;;;AAaN,SAAS,kCAAY,KAAuB,EAAE,GAAW;IACvD,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,mBACF,eAAe,eACf,WAAW,wBACX,oBAAoB,sBACpB,kBAAkB,6BAClB,yBAAyB,2BACzB,uBAAuB,YACvB,WAAW,KAAO,oBAClB,kBAAkB,KAAO,sBACzB,oBAAoB,KAAO,UAC3B,KAAK,YACL,QAAQ,WACR,UAAU,gBACX,GAAG;IAEJ,IAAI,gBAAgB;IACpB,IAAI,YAAY,gBACd,gBAAgB;SACX,IAAI,YAAY,eACrB,gBAAgB;IAGlB,qBACE,gCAAC,CAAA,GAAA,gCAAK;QACJ,MAAK;QACL,KAAK;QACL,MAAM,MAAM,IAAI;QAChB,cAAc,MAAM,YAAY;QAChC,kBAAmB,MAAM,gBAAgB,IAAI;kBAC5C,CAAC,SAAC,KAAK,EAAC,iBACP;;kCACE,gCAAC,CAAA,GAAA,mCAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,qCAAU;gCAAG;oCAAC,QAAQ,2BAAK;iDAAC;oCAAO;gCAAE;6BAAE;yBACzC;kCACD,cAAA,gCAAC,CAAA,GAAA,iCAAM;4BAAE,MAAK;sCACZ,cAAA,iCAAC,CAAA,GAAA,wCAAa;;oCACX,YAAY,yBAAW,gCAAC,CAAA,GAAA,iCAAY;wCAAE,cAAY,gBAAgB,MAAM,CAAC;;oCACzE,YAAY,2BAAa,gCAAC,CAAA,GAAA,iCAAW;wCAAE,cAAY,gBAAgB,MAAM,CAAC;;oCAC1E;;;;;kCAIP,gCAAC,CAAA,GAAA,iCAAM;kCAAG;;kCACV,iCAAC,CAAA,GAAA,qCAAU;;4BACR,6BACC,gCAAC,CAAA,GAAA,gCAAK;gCACJ,SAAS,IAAM,CAAA,GAAA,2BAAI,EAAE,SAAS;gCAC9B,SAAQ;gCACR,WAAU;gCACV,WAAW,oBAAoB;0CAC9B;;4BAGJ,sCACC,gCAAC,CAAA,GAAA,gCAAK;gCACJ,SAAS,IAAM,CAAA,GAAA,2BAAI,EAAE,SAAS;gCAC9B,SAAQ;gCACR,YAAY;gCACZ,WAAU;gCACV,WAAW,oBAAoB;0CAC9B;;0CAGL,gCAAC,CAAA,GAAA,gCAAK;gCACJ,SAAS;gCACT,YAAY;gCACZ,WAAW,oBAAoB;gCAC/B,SAAS,IAAM,CAAA,GAAA,2BAAI,EAAE,SAAS;0CAC7B;;;;;;;AAOf;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/AlertDialog.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 AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Button} from './Button';\nimport {ButtonGroup} from './ButtonGroup';\nimport {CenterBaseline} from './CenterBaseline';\nimport {chain} from '@react-aria/utils';\nimport {Content, Heading} from './Content';\nimport {Dialog} from './Dialog';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {Provider} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AlertDialogProps extends DOMProps, UnsafeStyles {\n /** The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog. */\n variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning',\n /** The title of the AlertDialog. */\n title: string,\n /** The contents of the AlertDialog. */\n children: ReactNode,\n /** The label to display within the cancel button. */\n cancelLabel?: string,\n /** The label to display within the confirm button. */\n primaryActionLabel: string,\n /** The label to display within the secondary button. */\n secondaryActionLabel?: string,\n /** Whether the primary button is disabled. */\n isPrimaryActionDisabled?: boolean,\n /** Whether the secondary button is disabled. */\n isSecondaryActionDisabled?: boolean,\n /** Handler that is called when the cancel button is pressed. */\n onCancel?: () => void,\n /** Handler that is called when the primary button is pressed. */\n onPrimaryAction?: () => void,\n /** Handler that is called when the secondary button is pressed. */\n onSecondaryAction?: () => void,\n /** Button to focus by default when the dialog opens. */\n autoFocusButton?: 'cancel' | 'primary' | 'secondary',\n /**\n * The size of the Dialog.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nconst icon = style({\n marginEnd: 8,\n '--iconPrimary': {\n type: 'fill',\n value: {\n variant: {\n error: 'negative',\n warning: 'notice'\n }\n }\n }\n});\n\nfunction AlertDialog(props: AlertDialogProps, ref: DOMRef) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n autoFocusButton,\n cancelLabel,\n secondaryActionLabel,\n primaryActionLabel,\n isSecondaryActionDisabled,\n isPrimaryActionDisabled,\n onCancel = () => {},\n onPrimaryAction = () => {},\n onSecondaryAction = () => {},\n title,\n children,\n variant = 'confirmation'\n } = props;\n\n let buttonVariant = 'primary';\n if (variant === 'confirmation') {\n buttonVariant = 'accent';\n } else if (variant === 'destructive') {\n buttonVariant = 'negative';\n }\n\n return (\n <Dialog\n role=\"alertdialog\"\n ref={ref}\n size={props.size}\n UNSAFE_style={props.UNSAFE_style}\n UNSAFE_className={(props.UNSAFE_className || '')}>\n {({close}) => (\n <>\n <Provider\n values={[\n [IconContext, {styles: icon({variant})}]\n ]}>\n <Heading slot=\"title\">\n <CenterBaseline>\n {variant === 'error' && <AlertTriangle aria-label={stringFormatter.format('dialog.alert')} />}\n {variant === 'warning' && <NoticeSquare aria-label={stringFormatter.format('dialog.alert')} />}\n {title}\n </CenterBaseline>\n </Heading>\n </Provider>\n <Content>{children}</Content>\n <ButtonGroup>\n {cancelLabel &&\n <Button\n onPress={() => chain(close(), onCancel())}\n variant=\"secondary\"\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'cancel'}>\n {cancelLabel}\n </Button>\n }\n {secondaryActionLabel &&\n <Button\n onPress={() => chain(close(), onSecondaryAction())}\n variant=\"secondary\"\n isDisabled={isSecondaryActionDisabled}\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'secondary'}>\n {secondaryActionLabel}\n </Button>\n }\n <Button\n variant={buttonVariant as 'primary' | 'accent' | 'negative'}\n isDisabled={isPrimaryActionDisabled}\n autoFocus={autoFocusButton === 'primary'}\n onPress={() => chain(close(), onPrimaryAction())}>\n {primaryActionLabel}\n </Button>\n </ButtonGroup>\n </>\n )}\n </Dialog>\n );\n}\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.\n */\nlet _AlertDialog = forwardRef(AlertDialog);\nexport {_AlertDialog as AlertDialog};\n"],"names":[],"version":3,"file":"AlertDialog.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAqDD,MAAM;;;;;;;AAgBC,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAW;IAC7F,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,mBACF,eAAe,eACf,WAAW,wBACX,oBAAoB,sBACpB,kBAAkB,6BAClB,yBAAyB,2BACzB,uBAAuB,YACvB,WAAW,KAAO,oBAClB,kBAAkB,KAAO,sBACzB,oBAAoB,KAAO,UAC3B,KAAK,YACL,QAAQ,WACR,UAAU,gBACX,GAAG;IAEJ,IAAI,gBAAgB;IACpB,IAAI,YAAY,gBACd,gBAAgB;SACX,IAAI,YAAY,eACrB,gBAAgB;IAGlB,qBACE,gCAAC,CAAA,GAAA,gCAAK;QACJ,MAAK;QACL,KAAK;QACL,MAAM,MAAM,IAAI;QAChB,cAAc,MAAM,YAAY;QAChC,kBAAmB,MAAM,gBAAgB,IAAI;kBAC5C,CAAC,SAAC,KAAK,EAAC,iBACP;;kCACE,gCAAC,CAAA,GAAA,mCAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,qCAAU;gCAAG;oCAAC,QAAQ,2BAAK;iDAAC;oCAAO;gCAAE;6BAAE;yBACzC;kCACD,cAAA,gCAAC,CAAA,GAAA,iCAAM;4BAAE,MAAK;sCACZ,cAAA,iCAAC,CAAA,GAAA,wCAAa;;oCACX,YAAY,yBAAW,gCAAC,CAAA,GAAA,iCAAY;wCAAE,cAAY,gBAAgB,MAAM,CAAC;;oCACzE,YAAY,2BAAa,gCAAC,CAAA,GAAA,iCAAW;wCAAE,cAAY,gBAAgB,MAAM,CAAC;;oCAC1E;;;;;kCAIP,gCAAC,CAAA,GAAA,iCAAM;kCAAG;;kCACV,iCAAC,CAAA,GAAA,qCAAU;;4BACR,6BACC,gCAAC,CAAA,GAAA,gCAAK;gCACJ,SAAS,IAAM,CAAA,GAAA,2BAAI,EAAE,SAAS;gCAC9B,SAAQ;gCACR,WAAU;gCACV,WAAW,oBAAoB;0CAC9B;;4BAGJ,sCACC,gCAAC,CAAA,GAAA,gCAAK;gCACJ,SAAS,IAAM,CAAA,GAAA,2BAAI,EAAE,SAAS;gCAC9B,SAAQ;gCACR,YAAY;gCACZ,WAAU;gCACV,WAAW,oBAAoB;0CAC9B;;0CAGL,gCAAC,CAAA,GAAA,gCAAK;gCACJ,SAAS;gCACT,YAAY;gCACZ,WAAW,oBAAoB;gCAC/B,SAAS,IAAM,CAAA,GAAA,2BAAI,EAAE,SAAS;0CAC7B;;;;;;;AAOf","sources":["packages/@react-spectrum/s2/src/AlertDialog.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 AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Button} from './Button';\nimport {ButtonGroup} from './ButtonGroup';\nimport {CenterBaseline} from './CenterBaseline';\nimport {chain} from '@react-aria/utils';\nimport {Content, Heading} from './Content';\nimport {Dialog} from './Dialog';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {Provider} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AlertDialogProps extends DOMProps, UnsafeStyles {\n /** The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog. */\n variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning',\n /** The title of the AlertDialog. */\n title: string,\n /** The contents of the AlertDialog. */\n children: ReactNode,\n /** The label to display within the cancel button. */\n cancelLabel?: string,\n /** The label to display within the confirm button. */\n primaryActionLabel: string,\n /** The label to display within the secondary button. */\n secondaryActionLabel?: string,\n /** Whether the primary button is disabled. */\n isPrimaryActionDisabled?: boolean,\n /** Whether the secondary button is disabled. */\n isSecondaryActionDisabled?: boolean,\n /** Handler that is called when the cancel button is pressed. */\n onCancel?: () => void,\n /** Handler that is called when the primary button is pressed. */\n onPrimaryAction?: () => void,\n /** Handler that is called when the secondary button is pressed. */\n onSecondaryAction?: () => void,\n /** Button to focus by default when the dialog opens. */\n autoFocusButton?: 'cancel' | 'primary' | 'secondary',\n /**\n * The size of the Dialog.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nconst icon = style({\n marginEnd: 8,\n '--iconPrimary': {\n type: 'fill',\n value: {\n variant: {\n error: 'negative',\n warning: 'notice'\n }\n }\n }\n});\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.\n */\nexport const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogProps, ref: DOMRef) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n autoFocusButton,\n cancelLabel,\n secondaryActionLabel,\n primaryActionLabel,\n isSecondaryActionDisabled,\n isPrimaryActionDisabled,\n onCancel = () => {},\n onPrimaryAction = () => {},\n onSecondaryAction = () => {},\n title,\n children,\n variant = 'confirmation'\n } = props;\n\n let buttonVariant = 'primary';\n if (variant === 'confirmation') {\n buttonVariant = 'accent';\n } else if (variant === 'destructive') {\n buttonVariant = 'negative';\n }\n\n return (\n <Dialog\n role=\"alertdialog\"\n ref={ref}\n size={props.size}\n UNSAFE_style={props.UNSAFE_style}\n UNSAFE_className={(props.UNSAFE_className || '')}>\n {({close}) => (\n <>\n <Provider\n values={[\n [IconContext, {styles: icon({variant})}]\n ]}>\n <Heading slot=\"title\">\n <CenterBaseline>\n {variant === 'error' && <AlertTriangle aria-label={stringFormatter.format('dialog.alert')} />}\n {variant === 'warning' && <NoticeSquare aria-label={stringFormatter.format('dialog.alert')} />}\n {title}\n </CenterBaseline>\n </Heading>\n </Provider>\n <Content>{children}</Content>\n <ButtonGroup>\n {cancelLabel &&\n <Button\n onPress={() => chain(close(), onCancel())}\n variant=\"secondary\"\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'cancel'}>\n {cancelLabel}\n </Button>\n }\n {secondaryActionLabel &&\n <Button\n onPress={() => chain(close(), onSecondaryAction())}\n variant=\"secondary\"\n isDisabled={isSecondaryActionDisabled}\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'secondary'}>\n {secondaryActionLabel}\n </Button>\n }\n <Button\n variant={buttonVariant as 'primary' | 'accent' | 'negative'}\n isDisabled={isPrimaryActionDisabled}\n autoFocus={autoFocusButton === 'primary'}\n onPress={() => chain(close(), onPrimaryAction())}>\n {primaryActionLabel}\n </Button>\n </ButtonGroup>\n </>\n )}\n </Dialog>\n );\n});\n"],"names":[],"version":3,"file":"AlertDialog.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"AA+Da;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/AlertDialog.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 AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Button} from './Button';\nimport {ButtonGroup} from './ButtonGroup';\nimport {CenterBaseline} from './CenterBaseline';\nimport {chain} from '@react-aria/utils';\nimport {Content, Heading} from './Content';\nimport {Dialog} from './Dialog';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {Provider} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AlertDialogProps extends DOMProps, UnsafeStyles {\n /** The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog. */\n variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning',\n /** The title of the AlertDialog. */\n title: string,\n /** The contents of the AlertDialog. */\n children: ReactNode,\n /** The label to display within the cancel button. */\n cancelLabel?: string,\n /** The label to display within the confirm button. */\n primaryActionLabel: string,\n /** The label to display within the secondary button. */\n secondaryActionLabel?: string,\n /** Whether the primary button is disabled. */\n isPrimaryActionDisabled?: boolean,\n /** Whether the secondary button is disabled. */\n isSecondaryActionDisabled?: boolean,\n /** Handler that is called when the cancel button is pressed. */\n onCancel?: () => void,\n /** Handler that is called when the primary button is pressed. */\n onPrimaryAction?: () => void,\n /** Handler that is called when the secondary button is pressed. */\n onSecondaryAction?: () => void,\n /** Button to focus by default when the dialog opens. */\n autoFocusButton?: 'cancel' | 'primary' | 'secondary',\n /**\n * The size of the Dialog.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nconst icon = style({\n marginEnd: 8,\n '--iconPrimary': {\n type: 'fill',\n value: {\n variant: {\n error: 'negative',\n warning: 'notice'\n }\n }\n }\n});\n\nfunction AlertDialog(props: AlertDialogProps, ref: DOMRef) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n autoFocusButton,\n cancelLabel,\n secondaryActionLabel,\n primaryActionLabel,\n isSecondaryActionDisabled,\n isPrimaryActionDisabled,\n onCancel = () => {},\n onPrimaryAction = () => {},\n onSecondaryAction = () => {},\n title,\n children,\n variant = 'confirmation'\n } = props;\n\n let buttonVariant = 'primary';\n if (variant === 'confirmation') {\n buttonVariant = 'accent';\n } else if (variant === 'destructive') {\n buttonVariant = 'negative';\n }\n\n return (\n <Dialog\n role=\"alertdialog\"\n ref={ref}\n size={props.size}\n UNSAFE_style={props.UNSAFE_style}\n UNSAFE_className={(props.UNSAFE_className || '')}>\n {({close}) => (\n <>\n <Provider\n values={[\n [IconContext, {styles: icon({variant})}]\n ]}>\n <Heading slot=\"title\">\n <CenterBaseline>\n {variant === 'error' && <AlertTriangle aria-label={stringFormatter.format('dialog.alert')} />}\n {variant === 'warning' && <NoticeSquare aria-label={stringFormatter.format('dialog.alert')} />}\n {title}\n </CenterBaseline>\n </Heading>\n </Provider>\n <Content>{children}</Content>\n <ButtonGroup>\n {cancelLabel &&\n <Button\n onPress={() => chain(close(), onCancel())}\n variant=\"secondary\"\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'cancel'}>\n {cancelLabel}\n </Button>\n }\n {secondaryActionLabel &&\n <Button\n onPress={() => chain(close(), onSecondaryAction())}\n variant=\"secondary\"\n isDisabled={isSecondaryActionDisabled}\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'secondary'}>\n {secondaryActionLabel}\n </Button>\n }\n <Button\n variant={buttonVariant as 'primary' | 'accent' | 'negative'}\n isDisabled={isPrimaryActionDisabled}\n autoFocus={autoFocusButton === 'primary'}\n onPress={() => chain(close(), onPrimaryAction())}>\n {primaryActionLabel}\n </Button>\n </ButtonGroup>\n </>\n )}\n </Dialog>\n );\n}\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.\n */\nlet _AlertDialog = forwardRef(AlertDialog);\nexport {_AlertDialog as AlertDialog};\n"],"names":[],"version":3,"file":"AlertDialog.css.map"}
1
+ {"mappings":"AA+Da;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/AlertDialog.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 AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Button} from './Button';\nimport {ButtonGroup} from './ButtonGroup';\nimport {CenterBaseline} from './CenterBaseline';\nimport {chain} from '@react-aria/utils';\nimport {Content, Heading} from './Content';\nimport {Dialog} from './Dialog';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {Provider} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AlertDialogProps extends DOMProps, UnsafeStyles {\n /** The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog. */\n variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning',\n /** The title of the AlertDialog. */\n title: string,\n /** The contents of the AlertDialog. */\n children: ReactNode,\n /** The label to display within the cancel button. */\n cancelLabel?: string,\n /** The label to display within the confirm button. */\n primaryActionLabel: string,\n /** The label to display within the secondary button. */\n secondaryActionLabel?: string,\n /** Whether the primary button is disabled. */\n isPrimaryActionDisabled?: boolean,\n /** Whether the secondary button is disabled. */\n isSecondaryActionDisabled?: boolean,\n /** Handler that is called when the cancel button is pressed. */\n onCancel?: () => void,\n /** Handler that is called when the primary button is pressed. */\n onPrimaryAction?: () => void,\n /** Handler that is called when the secondary button is pressed. */\n onSecondaryAction?: () => void,\n /** Button to focus by default when the dialog opens. */\n autoFocusButton?: 'cancel' | 'primary' | 'secondary',\n /**\n * The size of the Dialog.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nconst icon = style({\n marginEnd: 8,\n '--iconPrimary': {\n type: 'fill',\n value: {\n variant: {\n error: 'negative',\n warning: 'notice'\n }\n }\n }\n});\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.\n */\nexport const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogProps, ref: DOMRef) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n autoFocusButton,\n cancelLabel,\n secondaryActionLabel,\n primaryActionLabel,\n isSecondaryActionDisabled,\n isPrimaryActionDisabled,\n onCancel = () => {},\n onPrimaryAction = () => {},\n onSecondaryAction = () => {},\n title,\n children,\n variant = 'confirmation'\n } = props;\n\n let buttonVariant = 'primary';\n if (variant === 'confirmation') {\n buttonVariant = 'accent';\n } else if (variant === 'destructive') {\n buttonVariant = 'negative';\n }\n\n return (\n <Dialog\n role=\"alertdialog\"\n ref={ref}\n size={props.size}\n UNSAFE_style={props.UNSAFE_style}\n UNSAFE_className={(props.UNSAFE_className || '')}>\n {({close}) => (\n <>\n <Provider\n values={[\n [IconContext, {styles: icon({variant})}]\n ]}>\n <Heading slot=\"title\">\n <CenterBaseline>\n {variant === 'error' && <AlertTriangle aria-label={stringFormatter.format('dialog.alert')} />}\n {variant === 'warning' && <NoticeSquare aria-label={stringFormatter.format('dialog.alert')} />}\n {title}\n </CenterBaseline>\n </Heading>\n </Provider>\n <Content>{children}</Content>\n <ButtonGroup>\n {cancelLabel &&\n <Button\n onPress={() => chain(close(), onCancel())}\n variant=\"secondary\"\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'cancel'}>\n {cancelLabel}\n </Button>\n }\n {secondaryActionLabel &&\n <Button\n onPress={() => chain(close(), onSecondaryAction())}\n variant=\"secondary\"\n isDisabled={isSecondaryActionDisabled}\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'secondary'}>\n {secondaryActionLabel}\n </Button>\n }\n <Button\n variant={buttonVariant as 'primary' | 'accent' | 'negative'}\n isDisabled={isPrimaryActionDisabled}\n autoFocus={autoFocusButton === 'primary'}\n onPress={() => chain(close(), onPrimaryAction())}>\n {primaryActionLabel}\n </Button>\n </ButtonGroup>\n </>\n )}\n </Dialog>\n );\n});\n"],"names":[],"version":3,"file":"AlertDialog.css.map"}
@@ -49,7 +49,7 @@ const $94a8ad475d9a330c$var$icon = function anonymous(props) {
49
49
  else if (props.variant === "error") rules += ' -rwx0fg_e-e';
50
50
  return rules;
51
51
  };
52
- function $94a8ad475d9a330c$var$AlertDialog(props, ref) {
52
+ const $94a8ad475d9a330c$export$de466dd8317b0b75 = /*#__PURE__*/ (0, $2iZqV$forwardRef)(function AlertDialog(props, ref) {
53
53
  let stringFormatter = (0, $2iZqV$useLocalizedStringFormatter)((0, ($parcel$interopDefault($2iZqV$intlStringsmjs))), '@react-spectrum/s2');
54
54
  let { autoFocusButton: autoFocusButton, cancelLabel: cancelLabel, secondaryActionLabel: secondaryActionLabel, primaryActionLabel: primaryActionLabel, isSecondaryActionDisabled: isSecondaryActionDisabled, isPrimaryActionDisabled: isPrimaryActionDisabled, onCancel: onCancel = ()=>{}, onPrimaryAction: onPrimaryAction = ()=>{}, onSecondaryAction: onSecondaryAction = ()=>{}, title: title, children: children, variant: variant = 'confirmation' } = props;
55
55
  let buttonVariant = 'primary';
@@ -121,10 +121,7 @@ function $94a8ad475d9a330c$var$AlertDialog(props, ref) {
121
121
  ]
122
122
  })
123
123
  });
124
- }
125
- /**
126
- * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
127
- */ let $94a8ad475d9a330c$export$de466dd8317b0b75 = /*#__PURE__*/ (0, $2iZqV$forwardRef)($94a8ad475d9a330c$var$AlertDialog);
124
+ });
128
125
 
129
126
 
130
127
  export {$94a8ad475d9a330c$export$de466dd8317b0b75 as AlertDialog};
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAqDD,MAAM;;;;;;;AAaN,SAAS,kCAAY,KAAuB,EAAE,GAAW;IACvD,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,IAAI,mBACF,eAAe,eACf,WAAW,wBACX,oBAAoB,sBACpB,kBAAkB,6BAClB,yBAAyB,2BACzB,uBAAuB,YACvB,WAAW,KAAO,oBAClB,kBAAkB,KAAO,sBACzB,oBAAoB,KAAO,UAC3B,KAAK,YACL,QAAQ,WACR,UAAU,gBACX,GAAG;IAEJ,IAAI,gBAAgB;IACpB,IAAI,YAAY,gBACd,gBAAgB;SACX,IAAI,YAAY,eACrB,gBAAgB;IAGlB,qBACE,gBAAC,CAAA,GAAA,yCAAK;QACJ,MAAK;QACL,KAAK;QACL,MAAM,MAAM,IAAI;QAChB,cAAc,MAAM,YAAY;QAChC,kBAAmB,MAAM,gBAAgB,IAAI;kBAC5C,CAAC,SAAC,KAAK,EAAC,iBACP;;kCACE,gBAAC,CAAA,GAAA,eAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,yCAAU;gCAAG;oCAAC,QAAQ,2BAAK;iDAAC;oCAAO;gCAAE;6BAAE;yBACzC;kCACD,cAAA,gBAAC,CAAA,GAAA,yCAAM;4BAAE,MAAK;sCACZ,cAAA,iBAAC,CAAA,GAAA,yCAAa;;oCACX,YAAY,yBAAW,gBAAC,CAAA,GAAA,wCAAY;wCAAE,cAAY,gBAAgB,MAAM,CAAC;;oCACzE,YAAY,2BAAa,gBAAC,CAAA,GAAA,wCAAW;wCAAE,cAAY,gBAAgB,MAAM,CAAC;;oCAC1E;;;;;kCAIP,gBAAC,CAAA,GAAA,yCAAM;kCAAG;;kCACV,iBAAC,CAAA,GAAA,yCAAU;;4BACR,6BACC,gBAAC,CAAA,GAAA,yCAAK;gCACJ,SAAS,IAAM,CAAA,GAAA,YAAI,EAAE,SAAS;gCAC9B,SAAQ;gCACR,WAAU;gCACV,WAAW,oBAAoB;0CAC9B;;4BAGJ,sCACC,gBAAC,CAAA,GAAA,yCAAK;gCACJ,SAAS,IAAM,CAAA,GAAA,YAAI,EAAE,SAAS;gCAC9B,SAAQ;gCACR,YAAY;gCACZ,WAAU;gCACV,WAAW,oBAAoB;0CAC9B;;0CAGL,gBAAC,CAAA,GAAA,yCAAK;gCACJ,SAAS;gCACT,YAAY;gCACZ,WAAW,oBAAoB;gCAC/B,SAAS,IAAM,CAAA,GAAA,YAAI,EAAE,SAAS;0CAC7B;;;;;;;AAOf;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/AlertDialog.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 AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Button} from './Button';\nimport {ButtonGroup} from './ButtonGroup';\nimport {CenterBaseline} from './CenterBaseline';\nimport {chain} from '@react-aria/utils';\nimport {Content, Heading} from './Content';\nimport {Dialog} from './Dialog';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {Provider} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AlertDialogProps extends DOMProps, UnsafeStyles {\n /** The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog. */\n variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning',\n /** The title of the AlertDialog. */\n title: string,\n /** The contents of the AlertDialog. */\n children: ReactNode,\n /** The label to display within the cancel button. */\n cancelLabel?: string,\n /** The label to display within the confirm button. */\n primaryActionLabel: string,\n /** The label to display within the secondary button. */\n secondaryActionLabel?: string,\n /** Whether the primary button is disabled. */\n isPrimaryActionDisabled?: boolean,\n /** Whether the secondary button is disabled. */\n isSecondaryActionDisabled?: boolean,\n /** Handler that is called when the cancel button is pressed. */\n onCancel?: () => void,\n /** Handler that is called when the primary button is pressed. */\n onPrimaryAction?: () => void,\n /** Handler that is called when the secondary button is pressed. */\n onSecondaryAction?: () => void,\n /** Button to focus by default when the dialog opens. */\n autoFocusButton?: 'cancel' | 'primary' | 'secondary',\n /**\n * The size of the Dialog.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nconst icon = style({\n marginEnd: 8,\n '--iconPrimary': {\n type: 'fill',\n value: {\n variant: {\n error: 'negative',\n warning: 'notice'\n }\n }\n }\n});\n\nfunction AlertDialog(props: AlertDialogProps, ref: DOMRef) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n autoFocusButton,\n cancelLabel,\n secondaryActionLabel,\n primaryActionLabel,\n isSecondaryActionDisabled,\n isPrimaryActionDisabled,\n onCancel = () => {},\n onPrimaryAction = () => {},\n onSecondaryAction = () => {},\n title,\n children,\n variant = 'confirmation'\n } = props;\n\n let buttonVariant = 'primary';\n if (variant === 'confirmation') {\n buttonVariant = 'accent';\n } else if (variant === 'destructive') {\n buttonVariant = 'negative';\n }\n\n return (\n <Dialog\n role=\"alertdialog\"\n ref={ref}\n size={props.size}\n UNSAFE_style={props.UNSAFE_style}\n UNSAFE_className={(props.UNSAFE_className || '')}>\n {({close}) => (\n <>\n <Provider\n values={[\n [IconContext, {styles: icon({variant})}]\n ]}>\n <Heading slot=\"title\">\n <CenterBaseline>\n {variant === 'error' && <AlertTriangle aria-label={stringFormatter.format('dialog.alert')} />}\n {variant === 'warning' && <NoticeSquare aria-label={stringFormatter.format('dialog.alert')} />}\n {title}\n </CenterBaseline>\n </Heading>\n </Provider>\n <Content>{children}</Content>\n <ButtonGroup>\n {cancelLabel &&\n <Button\n onPress={() => chain(close(), onCancel())}\n variant=\"secondary\"\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'cancel'}>\n {cancelLabel}\n </Button>\n }\n {secondaryActionLabel &&\n <Button\n onPress={() => chain(close(), onSecondaryAction())}\n variant=\"secondary\"\n isDisabled={isSecondaryActionDisabled}\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'secondary'}>\n {secondaryActionLabel}\n </Button>\n }\n <Button\n variant={buttonVariant as 'primary' | 'accent' | 'negative'}\n isDisabled={isPrimaryActionDisabled}\n autoFocus={autoFocusButton === 'primary'}\n onPress={() => chain(close(), onPrimaryAction())}>\n {primaryActionLabel}\n </Button>\n </ButtonGroup>\n </>\n )}\n </Dialog>\n );\n}\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.\n */\nlet _AlertDialog = forwardRef(AlertDialog);\nexport {_AlertDialog as AlertDialog};\n"],"names":[],"version":3,"file":"AlertDialog.mjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAqDD,MAAM;;;;;;;AAgBC,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAAW;IAC7F,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,+CAAW,GAAG;IAChE,IAAI,mBACF,eAAe,eACf,WAAW,wBACX,oBAAoB,sBACpB,kBAAkB,6BAClB,yBAAyB,2BACzB,uBAAuB,YACvB,WAAW,KAAO,oBAClB,kBAAkB,KAAO,sBACzB,oBAAoB,KAAO,UAC3B,KAAK,YACL,QAAQ,WACR,UAAU,gBACX,GAAG;IAEJ,IAAI,gBAAgB;IACpB,IAAI,YAAY,gBACd,gBAAgB;SACX,IAAI,YAAY,eACrB,gBAAgB;IAGlB,qBACE,gBAAC,CAAA,GAAA,yCAAK;QACJ,MAAK;QACL,KAAK;QACL,MAAM,MAAM,IAAI;QAChB,cAAc,MAAM,YAAY;QAChC,kBAAmB,MAAM,gBAAgB,IAAI;kBAC5C,CAAC,SAAC,KAAK,EAAC,iBACP;;kCACE,gBAAC,CAAA,GAAA,eAAO;wBACN,QAAQ;4BACN;gCAAC,CAAA,GAAA,yCAAU;gCAAG;oCAAC,QAAQ,2BAAK;iDAAC;oCAAO;gCAAE;6BAAE;yBACzC;kCACD,cAAA,gBAAC,CAAA,GAAA,yCAAM;4BAAE,MAAK;sCACZ,cAAA,iBAAC,CAAA,GAAA,yCAAa;;oCACX,YAAY,yBAAW,gBAAC,CAAA,GAAA,wCAAY;wCAAE,cAAY,gBAAgB,MAAM,CAAC;;oCACzE,YAAY,2BAAa,gBAAC,CAAA,GAAA,wCAAW;wCAAE,cAAY,gBAAgB,MAAM,CAAC;;oCAC1E;;;;;kCAIP,gBAAC,CAAA,GAAA,yCAAM;kCAAG;;kCACV,iBAAC,CAAA,GAAA,yCAAU;;4BACR,6BACC,gBAAC,CAAA,GAAA,yCAAK;gCACJ,SAAS,IAAM,CAAA,GAAA,YAAI,EAAE,SAAS;gCAC9B,SAAQ;gCACR,WAAU;gCACV,WAAW,oBAAoB;0CAC9B;;4BAGJ,sCACC,gBAAC,CAAA,GAAA,yCAAK;gCACJ,SAAS,IAAM,CAAA,GAAA,YAAI,EAAE,SAAS;gCAC9B,SAAQ;gCACR,YAAY;gCACZ,WAAU;gCACV,WAAW,oBAAoB;0CAC9B;;0CAGL,gBAAC,CAAA,GAAA,yCAAK;gCACJ,SAAS;gCACT,YAAY;gCACZ,WAAW,oBAAoB;gCAC/B,SAAS,IAAM,CAAA,GAAA,YAAI,EAAE,SAAS;0CAC7B;;;;;;;AAOf","sources":["packages/@react-spectrum/s2/src/AlertDialog.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 AlertTriangle from '../s2wf-icons/S2_Icon_AlertTriangle_20_N.svg';\nimport {Button} from './Button';\nimport {ButtonGroup} from './ButtonGroup';\nimport {CenterBaseline} from './CenterBaseline';\nimport {chain} from '@react-aria/utils';\nimport {Content, Heading} from './Content';\nimport {Dialog} from './Dialog';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {forwardRef, ReactNode} from 'react';\nimport {IconContext} from './Icon';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';\nimport {Provider} from 'react-aria-components';\nimport {style} from '../style' with {type: 'macro'};\nimport {UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AlertDialogProps extends DOMProps, UnsafeStyles {\n /** The [visual style](https://spectrum.adobe.com/page/alert-dialog/#Options) of the AlertDialog. */\n variant?: 'confirmation' | 'information' | 'destructive' | 'error' | 'warning',\n /** The title of the AlertDialog. */\n title: string,\n /** The contents of the AlertDialog. */\n children: ReactNode,\n /** The label to display within the cancel button. */\n cancelLabel?: string,\n /** The label to display within the confirm button. */\n primaryActionLabel: string,\n /** The label to display within the secondary button. */\n secondaryActionLabel?: string,\n /** Whether the primary button is disabled. */\n isPrimaryActionDisabled?: boolean,\n /** Whether the secondary button is disabled. */\n isSecondaryActionDisabled?: boolean,\n /** Handler that is called when the cancel button is pressed. */\n onCancel?: () => void,\n /** Handler that is called when the primary button is pressed. */\n onPrimaryAction?: () => void,\n /** Handler that is called when the secondary button is pressed. */\n onSecondaryAction?: () => void,\n /** Button to focus by default when the dialog opens. */\n autoFocusButton?: 'cancel' | 'primary' | 'secondary',\n /**\n * The size of the Dialog.\n *\n * @default 'M'\n */\n size?: 'S' | 'M' | 'L'\n}\n\nconst icon = style({\n marginEnd: 8,\n '--iconPrimary': {\n type: 'fill',\n value: {\n variant: {\n error: 'negative',\n warning: 'notice'\n }\n }\n }\n});\n\n/**\n * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.\n */\nexport const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogProps, ref: DOMRef) {\n let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');\n let {\n autoFocusButton,\n cancelLabel,\n secondaryActionLabel,\n primaryActionLabel,\n isSecondaryActionDisabled,\n isPrimaryActionDisabled,\n onCancel = () => {},\n onPrimaryAction = () => {},\n onSecondaryAction = () => {},\n title,\n children,\n variant = 'confirmation'\n } = props;\n\n let buttonVariant = 'primary';\n if (variant === 'confirmation') {\n buttonVariant = 'accent';\n } else if (variant === 'destructive') {\n buttonVariant = 'negative';\n }\n\n return (\n <Dialog\n role=\"alertdialog\"\n ref={ref}\n size={props.size}\n UNSAFE_style={props.UNSAFE_style}\n UNSAFE_className={(props.UNSAFE_className || '')}>\n {({close}) => (\n <>\n <Provider\n values={[\n [IconContext, {styles: icon({variant})}]\n ]}>\n <Heading slot=\"title\">\n <CenterBaseline>\n {variant === 'error' && <AlertTriangle aria-label={stringFormatter.format('dialog.alert')} />}\n {variant === 'warning' && <NoticeSquare aria-label={stringFormatter.format('dialog.alert')} />}\n {title}\n </CenterBaseline>\n </Heading>\n </Provider>\n <Content>{children}</Content>\n <ButtonGroup>\n {cancelLabel &&\n <Button\n onPress={() => chain(close(), onCancel())}\n variant=\"secondary\"\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'cancel'}>\n {cancelLabel}\n </Button>\n }\n {secondaryActionLabel &&\n <Button\n onPress={() => chain(close(), onSecondaryAction())}\n variant=\"secondary\"\n isDisabled={isSecondaryActionDisabled}\n fillStyle=\"outline\"\n autoFocus={autoFocusButton === 'secondary'}>\n {secondaryActionLabel}\n </Button>\n }\n <Button\n variant={buttonVariant as 'primary' | 'accent' | 'negative'}\n isDisabled={isPrimaryActionDisabled}\n autoFocus={autoFocusButton === 'primary'}\n onPress={() => chain(close(), onPrimaryAction())}>\n {primaryActionLabel}\n </Button>\n </ButtonGroup>\n </>\n )}\n </Dialog>\n );\n});\n"],"names":[],"version":3,"file":"AlertDialog.mjs.map"}
package/dist/Avatar.cjs CHANGED
@@ -56,7 +56,7 @@ const $38071d9ce246d4cf$var$imageStyles = function anonymous(props, overrides) {
56
56
  return rules;
57
57
  };
58
58
  const $38071d9ce246d4cf$export$a20dad690e1279e2 = /*#__PURE__*/ (0, $1YWJ0$react.createContext)(null);
59
- function $38071d9ce246d4cf$var$Avatar(props, ref) {
59
+ const $38071d9ce246d4cf$export$e2255cf6045e8d47 = /*#__PURE__*/ (0, $1YWJ0$react.forwardRef)(function Avatar(props, ref) {
60
60
  [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $38071d9ce246d4cf$export$a20dad690e1279e2);
61
61
  let domRef = (0, $1YWJ0$reactspectrumutils.useDOMRef)(ref);
62
62
  let { alt: alt = '', src: src, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '', size: size = 24, isOverBackground: isOverBackground, slot: slot = 'avatar', ...otherProps } = props;
@@ -80,10 +80,7 @@ function $38071d9ce246d4cf$var$Avatar(props, ref) {
80
80
  }, props.styles),
81
81
  src: src
82
82
  });
83
- }
84
- /**
85
- * An avatar is a thumbnail representation of an entity, such as a user or an organization.
86
- */ let $38071d9ce246d4cf$export$e2255cf6045e8d47 = /*#__PURE__*/ (0, $1YWJ0$react.forwardRef)($38071d9ce246d4cf$var$Avatar);
83
+ });
87
84
 
88
85
 
89
86
  //# sourceMappingURL=Avatar.cjs.map
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA4BD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBC,MAAM,0DAAgB,CAAA,GAAA,0BAAY,EAA4D;AAErG,SAAS,6BAAO,KAAkB,EAAE,GAA6B;IAC/D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,OACF,MAAM,SACN,GAAG,gBACH,YAAY,oBACZ,mBAAmB,UACnB,OAAO,sBACP,gBAAgB,QAChB,OAAO,UACP,GAAG,YACJ,GAAG;IACJ,MAAM,WAAW,CAAA,GAAA,oCAAa,EAAE;IAEhC,IAAI,UAAU,OAAO,KAAK;IAC1B,IAAI,UAAU,QAAQ;IACtB,qBACE,gCAAC,CAAA,GAAA,+BAAI;QACF,GAAG,QAAQ;QACZ,KAAK;QACL,MAAM;QACN,KAAK;QACL,cAAc;YACZ,GAAG,YAAY;YACf,OAAO;YACP,QAAQ;QACV;QACA,kBAAkB;QAClB,QAAQ,kCAAY;8BAAC;qBAAkB;QAAO,GAAG,MAAM,MAAM;QAC7D,KAAK;;AAEX;AAEA;;CAEC,GACD,IAAI,0DAAU,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Avatar.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {Image} from './Image';\nimport {style} from '../style' with { type: 'macro' };\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarProps extends UnsafeStyles, DOMProps, SlotProps {\n /** Text description of the avatar. */\n alt?: string,\n /** The image URL for the avatar. */\n src?: string,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth,\n /**\n * The size of the avatar.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | (number & {}),\n /** Whether the avatar is over a color background. */\n isOverBackground?: boolean\n}\n\nconst imageStyles = style({\n borderRadius: 'full',\n size: 20,\n flexShrink: 0,\n flexGrow: 0,\n disableTapHighlight: true,\n outlineStyle: {\n default: 'none',\n isOverBackground: 'solid'\n },\n outlineColor: '--s2-container-bg',\n outlineWidth: {\n default: 1,\n isLarge: 2\n }\n}, getAllowedOverrides({width: false}));\n\nexport const AvatarContext = createContext<ContextValue<AvatarProps, DOMRefValue<HTMLImageElement>>>(null);\n\nfunction Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarContext);\n let domRef = useDOMRef(ref);\n let {\n alt = '',\n src,\n UNSAFE_style,\n UNSAFE_className = '',\n size = 24,\n isOverBackground,\n slot = 'avatar',\n ...otherProps\n } = props;\n const domProps = filterDOMProps(otherProps);\n\n let remSize = size / 16 + 'rem';\n let isLarge = size >= 64;\n return (\n <Image\n {...domProps}\n ref={domRef}\n slot={slot}\n alt={alt}\n UNSAFE_style={{\n ...UNSAFE_style,\n width: remSize,\n height: remSize\n }}\n UNSAFE_className={UNSAFE_className}\n styles={imageStyles({isOverBackground, isLarge}, props.styles)}\n src={src} />\n );\n}\n\n/**\n * An avatar is a thumbnail representation of an entity, such as a user or an organization.\n */\nlet _Avatar = forwardRef(Avatar);\nexport {_Avatar as Avatar};\n"],"names":[],"version":3,"file":"Avatar.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA4BD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBC,MAAM,0DAAgB,CAAA,GAAA,0BAAY,EAA4D;AAK9F,MAAM,0DAAS,CAAA,GAAA,uBAAS,EAAE,SAAS,OAAO,KAAkB,EAAE,GAA6B;IAChG,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,OACF,MAAM,SACN,GAAG,gBACH,YAAY,oBACZ,mBAAmB,UACnB,OAAO,sBACP,gBAAgB,QAChB,OAAO,UACP,GAAG,YACJ,GAAG;IACJ,MAAM,WAAW,CAAA,GAAA,oCAAa,EAAE;IAEhC,IAAI,UAAU,OAAO,KAAK;IAC1B,IAAI,UAAU,QAAQ;IACtB,qBACE,gCAAC,CAAA,GAAA,+BAAI;QACF,GAAG,QAAQ;QACZ,KAAK;QACL,MAAM;QACN,KAAK;QACL,cAAc;YACZ,GAAG,YAAY;YACf,OAAO;YACP,QAAQ;QACV;QACA,kBAAkB;QAClB,QAAQ,kCAAY;8BAAC;qBAAkB;QAAO,GAAG,MAAM,MAAM;QAC7D,KAAK;;AAEX","sources":["packages/@react-spectrum/s2/src/Avatar.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {Image} from './Image';\nimport {style} from '../style' with { type: 'macro' };\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarProps extends UnsafeStyles, DOMProps, SlotProps {\n /** Text description of the avatar. */\n alt?: string,\n /** The image URL for the avatar. */\n src?: string,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth,\n /**\n * The size of the avatar.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | (number & {}),\n /** Whether the avatar is over a color background. */\n isOverBackground?: boolean\n}\n\nconst imageStyles = style({\n borderRadius: 'full',\n size: 20,\n flexShrink: 0,\n flexGrow: 0,\n disableTapHighlight: true,\n outlineStyle: {\n default: 'none',\n isOverBackground: 'solid'\n },\n outlineColor: '--s2-container-bg',\n outlineWidth: {\n default: 1,\n isLarge: 2\n }\n}, getAllowedOverrides({width: false}));\n\nexport const AvatarContext = createContext<ContextValue<AvatarProps, DOMRefValue<HTMLImageElement>>>(null);\n\n/**\n * An avatar is a thumbnail representation of an entity, such as a user or an organization.\n */\nexport const Avatar = forwardRef(function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarContext);\n let domRef = useDOMRef(ref);\n let {\n alt = '',\n src,\n UNSAFE_style,\n UNSAFE_className = '',\n size = 24,\n isOverBackground,\n slot = 'avatar',\n ...otherProps\n } = props;\n const domProps = filterDOMProps(otherProps);\n\n let remSize = size / 16 + 'rem';\n let isLarge = size >= 64;\n return (\n <Image\n {...domProps}\n ref={domRef}\n slot={slot}\n alt={alt}\n UNSAFE_style={{\n ...UNSAFE_style,\n width: remSize,\n height: remSize\n }}\n UNSAFE_className={UNSAFE_className}\n styles={imageStyles({isOverBackground, isLarge}, props.styles)}\n src={src} />\n );\n});\n"],"names":[],"version":3,"file":"Avatar.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"AAsCoB;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/Avatar.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {Image} from './Image';\nimport {style} from '../style' with { type: 'macro' };\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarProps extends UnsafeStyles, DOMProps, SlotProps {\n /** Text description of the avatar. */\n alt?: string,\n /** The image URL for the avatar. */\n src?: string,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth,\n /**\n * The size of the avatar.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | (number & {}),\n /** Whether the avatar is over a color background. */\n isOverBackground?: boolean\n}\n\nconst imageStyles = style({\n borderRadius: 'full',\n size: 20,\n flexShrink: 0,\n flexGrow: 0,\n disableTapHighlight: true,\n outlineStyle: {\n default: 'none',\n isOverBackground: 'solid'\n },\n outlineColor: '--s2-container-bg',\n outlineWidth: {\n default: 1,\n isLarge: 2\n }\n}, getAllowedOverrides({width: false}));\n\nexport const AvatarContext = createContext<ContextValue<AvatarProps, DOMRefValue<HTMLImageElement>>>(null);\n\nfunction Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarContext);\n let domRef = useDOMRef(ref);\n let {\n alt = '',\n src,\n UNSAFE_style,\n UNSAFE_className = '',\n size = 24,\n isOverBackground,\n slot = 'avatar',\n ...otherProps\n } = props;\n const domProps = filterDOMProps(otherProps);\n\n let remSize = size / 16 + 'rem';\n let isLarge = size >= 64;\n return (\n <Image\n {...domProps}\n ref={domRef}\n slot={slot}\n alt={alt}\n UNSAFE_style={{\n ...UNSAFE_style,\n width: remSize,\n height: remSize\n }}\n UNSAFE_className={UNSAFE_className}\n styles={imageStyles({isOverBackground, isLarge}, props.styles)}\n src={src} />\n );\n}\n\n/**\n * An avatar is a thumbnail representation of an entity, such as a user or an organization.\n */\nlet _Avatar = forwardRef(Avatar);\nexport {_Avatar as Avatar};\n"],"names":[],"version":3,"file":"Avatar.css.map"}
1
+ {"mappings":"AAsCoB;;;;AAAA;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA","sources":["packages/@react-spectrum/s2/src/Avatar.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {Image} from './Image';\nimport {style} from '../style' with { type: 'macro' };\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarProps extends UnsafeStyles, DOMProps, SlotProps {\n /** Text description of the avatar. */\n alt?: string,\n /** The image URL for the avatar. */\n src?: string,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth,\n /**\n * The size of the avatar.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | (number & {}),\n /** Whether the avatar is over a color background. */\n isOverBackground?: boolean\n}\n\nconst imageStyles = style({\n borderRadius: 'full',\n size: 20,\n flexShrink: 0,\n flexGrow: 0,\n disableTapHighlight: true,\n outlineStyle: {\n default: 'none',\n isOverBackground: 'solid'\n },\n outlineColor: '--s2-container-bg',\n outlineWidth: {\n default: 1,\n isLarge: 2\n }\n}, getAllowedOverrides({width: false}));\n\nexport const AvatarContext = createContext<ContextValue<AvatarProps, DOMRefValue<HTMLImageElement>>>(null);\n\n/**\n * An avatar is a thumbnail representation of an entity, such as a user or an organization.\n */\nexport const Avatar = forwardRef(function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarContext);\n let domRef = useDOMRef(ref);\n let {\n alt = '',\n src,\n UNSAFE_style,\n UNSAFE_className = '',\n size = 24,\n isOverBackground,\n slot = 'avatar',\n ...otherProps\n } = props;\n const domProps = filterDOMProps(otherProps);\n\n let remSize = size / 16 + 'rem';\n let isLarge = size >= 64;\n return (\n <Image\n {...domProps}\n ref={domRef}\n slot={slot}\n alt={alt}\n UNSAFE_style={{\n ...UNSAFE_style,\n width: remSize,\n height: remSize\n }}\n UNSAFE_className={UNSAFE_className}\n styles={imageStyles({isOverBackground, isLarge}, props.styles)}\n src={src} />\n );\n});\n"],"names":[],"version":3,"file":"Avatar.css.map"}
package/dist/Avatar.mjs CHANGED
@@ -49,7 +49,7 @@ const $3ffa2cd930156220$var$imageStyles = function anonymous(props, overrides) {
49
49
  return rules;
50
50
  };
51
51
  const $3ffa2cd930156220$export$a20dad690e1279e2 = /*#__PURE__*/ (0, $lGIgj$createContext)(null);
52
- function $3ffa2cd930156220$var$Avatar(props, ref) {
52
+ const $3ffa2cd930156220$export$e2255cf6045e8d47 = /*#__PURE__*/ (0, $lGIgj$forwardRef)(function Avatar(props, ref) {
53
53
  [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $3ffa2cd930156220$export$a20dad690e1279e2);
54
54
  let domRef = (0, $lGIgj$useDOMRef)(ref);
55
55
  let { alt: alt = '', src: src, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className = '', size: size = 24, isOverBackground: isOverBackground, slot: slot = 'avatar', ...otherProps } = props;
@@ -73,10 +73,7 @@ function $3ffa2cd930156220$var$Avatar(props, ref) {
73
73
  }, props.styles),
74
74
  src: src
75
75
  });
76
- }
77
- /**
78
- * An avatar is a thumbnail representation of an entity, such as a user or an organization.
79
- */ let $3ffa2cd930156220$export$e2255cf6045e8d47 = /*#__PURE__*/ (0, $lGIgj$forwardRef)($3ffa2cd930156220$var$Avatar);
76
+ });
80
77
 
81
78
 
82
79
  export {$3ffa2cd930156220$export$a20dad690e1279e2 as AvatarContext, $3ffa2cd930156220$export$e2255cf6045e8d47 as Avatar};
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA4BD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBC,MAAM,0DAAgB,CAAA,GAAA,oBAAY,EAA4D;AAErG,SAAS,6BAAO,KAAkB,EAAE,GAA6B;IAC/D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,OACF,MAAM,SACN,GAAG,gBACH,YAAY,oBACZ,mBAAmB,UACnB,OAAO,sBACP,gBAAgB,QAChB,OAAO,UACP,GAAG,YACJ,GAAG;IACJ,MAAM,WAAW,CAAA,GAAA,qBAAa,EAAE;IAEhC,IAAI,UAAU,OAAO,KAAK;IAC1B,IAAI,UAAU,QAAQ;IACtB,qBACE,gBAAC,CAAA,GAAA,yCAAI;QACF,GAAG,QAAQ;QACZ,KAAK;QACL,MAAM;QACN,KAAK;QACL,cAAc;YACZ,GAAG,YAAY;YACf,OAAO;YACP,QAAQ;QACV;QACA,kBAAkB;QAClB,QAAQ,kCAAY;8BAAC;qBAAkB;QAAO,GAAG,MAAM,MAAM;QAC7D,KAAK;;AAEX;AAEA;;CAEC,GACD,IAAI,0DAAU,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Avatar.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {Image} from './Image';\nimport {style} from '../style' with { type: 'macro' };\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarProps extends UnsafeStyles, DOMProps, SlotProps {\n /** Text description of the avatar. */\n alt?: string,\n /** The image URL for the avatar. */\n src?: string,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth,\n /**\n * The size of the avatar.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | (number & {}),\n /** Whether the avatar is over a color background. */\n isOverBackground?: boolean\n}\n\nconst imageStyles = style({\n borderRadius: 'full',\n size: 20,\n flexShrink: 0,\n flexGrow: 0,\n disableTapHighlight: true,\n outlineStyle: {\n default: 'none',\n isOverBackground: 'solid'\n },\n outlineColor: '--s2-container-bg',\n outlineWidth: {\n default: 1,\n isLarge: 2\n }\n}, getAllowedOverrides({width: false}));\n\nexport const AvatarContext = createContext<ContextValue<AvatarProps, DOMRefValue<HTMLImageElement>>>(null);\n\nfunction Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarContext);\n let domRef = useDOMRef(ref);\n let {\n alt = '',\n src,\n UNSAFE_style,\n UNSAFE_className = '',\n size = 24,\n isOverBackground,\n slot = 'avatar',\n ...otherProps\n } = props;\n const domProps = filterDOMProps(otherProps);\n\n let remSize = size / 16 + 'rem';\n let isLarge = size >= 64;\n return (\n <Image\n {...domProps}\n ref={domRef}\n slot={slot}\n alt={alt}\n UNSAFE_style={{\n ...UNSAFE_style,\n width: remSize,\n height: remSize\n }}\n UNSAFE_className={UNSAFE_className}\n styles={imageStyles({isOverBackground, isLarge}, props.styles)}\n src={src} />\n );\n}\n\n/**\n * An avatar is a thumbnail representation of an entity, such as a user or an organization.\n */\nlet _Avatar = forwardRef(Avatar);\nexport {_Avatar as Avatar};\n"],"names":[],"version":3,"file":"Avatar.mjs.map"}
1
+ {"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;AA4BD,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBC,MAAM,0DAAgB,CAAA,GAAA,oBAAY,EAA4D;AAK9F,MAAM,0DAAS,CAAA,GAAA,iBAAS,EAAE,SAAS,OAAO,KAAkB,EAAE,GAA6B;IAChG,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,OACF,MAAM,SACN,GAAG,gBACH,YAAY,oBACZ,mBAAmB,UACnB,OAAO,sBACP,gBAAgB,QAChB,OAAO,UACP,GAAG,YACJ,GAAG;IACJ,MAAM,WAAW,CAAA,GAAA,qBAAa,EAAE;IAEhC,IAAI,UAAU,OAAO,KAAK;IAC1B,IAAI,UAAU,QAAQ;IACtB,qBACE,gBAAC,CAAA,GAAA,yCAAI;QACF,GAAG,QAAQ;QACZ,KAAK;QACL,MAAM;QACN,KAAK;QACL,cAAc;YACZ,GAAG,YAAY;YACf,OAAO;YACP,QAAQ;QACV;QACA,kBAAkB;QAClB,QAAQ,kCAAY;8BAAC;qBAAkB;QAAO,GAAG,MAAM,MAAM;QAC7D,KAAK;;AAEX","sources":["packages/@react-spectrum/s2/src/Avatar.tsx"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, forwardRef} from 'react';\nimport {DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {Image} from './Image';\nimport {style} from '../style' with { type: 'macro' };\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarProps extends UnsafeStyles, DOMProps, SlotProps {\n /** Text description of the avatar. */\n alt?: string,\n /** The image URL for the avatar. */\n src?: string,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth,\n /**\n * The size of the avatar.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | (number & {}),\n /** Whether the avatar is over a color background. */\n isOverBackground?: boolean\n}\n\nconst imageStyles = style({\n borderRadius: 'full',\n size: 20,\n flexShrink: 0,\n flexGrow: 0,\n disableTapHighlight: true,\n outlineStyle: {\n default: 'none',\n isOverBackground: 'solid'\n },\n outlineColor: '--s2-container-bg',\n outlineWidth: {\n default: 1,\n isLarge: 2\n }\n}, getAllowedOverrides({width: false}));\n\nexport const AvatarContext = createContext<ContextValue<AvatarProps, DOMRefValue<HTMLImageElement>>>(null);\n\n/**\n * An avatar is a thumbnail representation of an entity, such as a user or an organization.\n */\nexport const Avatar = forwardRef(function Avatar(props: AvatarProps, ref: DOMRef<HTMLImageElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarContext);\n let domRef = useDOMRef(ref);\n let {\n alt = '',\n src,\n UNSAFE_style,\n UNSAFE_className = '',\n size = 24,\n isOverBackground,\n slot = 'avatar',\n ...otherProps\n } = props;\n const domProps = filterDOMProps(otherProps);\n\n let remSize = size / 16 + 'rem';\n let isLarge = size >= 64;\n return (\n <Image\n {...domProps}\n ref={domRef}\n slot={slot}\n alt={alt}\n UNSAFE_style={{\n ...UNSAFE_style,\n width: remSize,\n height: remSize\n }}\n UNSAFE_className={UNSAFE_className}\n styles={imageStyles({isOverBackground, isLarge}, props.styles)}\n src={src} />\n );\n});\n"],"names":[],"version":3,"file":"Avatar.mjs.map"}
@@ -172,7 +172,7 @@ const $5b7eb34c05dfeb90$var$container = function anonymous(props, overrides) {
172
172
  rules += ' _1c';
173
173
  return rules;
174
174
  };
175
- function $5b7eb34c05dfeb90$var$AvatarGroup(props, ref) {
175
+ const $5b7eb34c05dfeb90$export$5b26ebaf2b105908 = /*#__PURE__*/ (0, $6mB16$react.forwardRef)(function AvatarGroup(props, ref) {
176
176
  [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $5b7eb34c05dfeb90$export$4f18251748129091);
177
177
  let domRef = (0, $6mB16$reactspectrumutils.useDOMRef)(ref);
178
178
  let { children: children, label: label, size: size = 24, styles: styles, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className, ...otherProps } = props;
@@ -208,10 +208,7 @@ function $5b7eb34c05dfeb90$var$AvatarGroup(props, ref) {
208
208
  ]
209
209
  })
210
210
  });
211
- }
212
- /**
213
- * An avatar group is a grouping of avatars that are related to each other.
214
- */ let $5b7eb34c05dfeb90$export$5b26ebaf2b105908 = /*#__PURE__*/ (0, $6mB16$react.forwardRef)($5b7eb34c05dfeb90$var$AvatarGroup);
211
+ });
215
212
 
216
213
 
217
214
  //# sourceMappingURL=AvatarGroup.cjs.map
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2BM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AAE7G,MAAM;AAON,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;AAKN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,YAAC,QAAQ,SAAE,KAAK,QAAE,OAAO,YAAI,MAAM,gBAAE,YAAY,oBAAE,gBAAgB,EAAE,GAAG,YAAW,GAAG;IAC1F,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,yBAAO,EAAE;QACtC,GAAG,KAAK;QACR,kBAAkB;IACpB;IAEA,qBACE,gCAAC,CAAA,GAAA,uCAAY,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ;kBAAQ;YAAM,kBAAkB;QAAI;kBAC1E,cAAA,iCAAC;YACC,KAAK;YACJ,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;YAC7B,GAAG,UAAU;YACd,MAAK;YACL,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,gCAAU,MAAM;YACtD,OAAO;gBACL,GAAG,YAAY;gBACf,UAAU,OAAO,KAAK;YACxB;;gBACC;gBACA,uBAAS,gCAAC;oBAAM,GAAG,UAAU;oBAAE,WAAW,2BAAK;wBAAC,MAAM,OAAO;oBAAK;8BAAK;;;;;AAIhF;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/AvatarGroup.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {\n /** Avatar children of the avatar group. */\n children: ReactNode,\n /** The label for the avatar group. */\n label?: string,\n /**\n * The size of the avatar group.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n marginStart: {\n default: '[calc(var(--size) / -4)]',\n ':first-child': 0\n }\n});\n\nconst text = style({\n marginStart: 8,\n truncate: true,\n font: {\n size: {\n 16: 'ui-xs',\n 20: 'ui-sm',\n 24: 'ui',\n 28: 'ui-lg',\n 32: 'ui-xl',\n 36: 'ui-2xl',\n 40: 'ui-3xl'\n }\n }\n});\n\nconst container = style({\n display: 'flex',\n alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\nfunction AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n let domRef = useDOMRef(ref);\n let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n let {labelProps, fieldProps} = useLabel({\n ...props,\n labelElementType: 'span'\n });\n\n return (\n <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n <div\n ref={domRef}\n {...filterDOMProps(otherProps)}\n {...fieldProps}\n role=\"group\"\n className={(UNSAFE_className ?? '') + container(null, styles)}\n style={{\n ...UNSAFE_style,\n '--size': size / 16 + 'rem'\n } as CSSProperties}>\n {children}\n {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n </div>\n </AvatarContext.Provider>\n );\n}\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nlet _AvatarGroup = forwardRef(AvatarGroup);\nexport {_AvatarGroup as AvatarGroup};\n"],"names":[],"version":3,"file":"AvatarGroup.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2BM,MAAM,0DAAqB,CAAA,GAAA,0BAAY,EAA+D;AAE7G,MAAM;AAON,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;AAQC,MAAM,0DAAc,CAAA,GAAA,uBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,YAAC,QAAQ,SAAE,KAAK,QAAE,OAAO,YAAI,MAAM,gBAAE,YAAY,oBAAE,gBAAgB,EAAE,GAAG,YAAW,GAAG;IAC1F,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,yBAAO,EAAE;QACtC,GAAG,KAAK;QACR,kBAAkB;IACpB;IAEA,qBACE,gCAAC,CAAA,GAAA,uCAAY,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ;kBAAQ;YAAM,kBAAkB;QAAI;kBAC1E,cAAA,iCAAC;YACC,KAAK;YACJ,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;YAC7B,GAAG,UAAU;YACd,MAAK;YACL,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,gCAAU,MAAM;YACtD,OAAO;gBACL,GAAG,YAAY;gBACf,UAAU,OAAO,KAAK;YACxB;;gBACC;gBACA,uBAAS,gCAAC;oBAAM,GAAG,UAAU;oBAAE,WAAW,2BAAK;wBAAC,MAAM,OAAO;oBAAK;8BAAK;;;;;AAIhF","sources":["packages/@react-spectrum/s2/src/AvatarGroup.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {\n /** Avatar children of the avatar group. */\n children: ReactNode,\n /** The label for the avatar group. */\n label?: string,\n /**\n * The size of the avatar group.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n marginStart: {\n default: '[calc(var(--size) / -4)]',\n ':first-child': 0\n }\n});\n\nconst text = style({\n marginStart: 8,\n truncate: true,\n font: {\n size: {\n 16: 'ui-xs',\n 20: 'ui-sm',\n 24: 'ui',\n 28: 'ui-lg',\n 32: 'ui-xl',\n 36: 'ui-2xl',\n 40: 'ui-3xl'\n }\n }\n});\n\nconst container = style({\n display: 'flex',\n alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nexport const AvatarGroup = forwardRef(function AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n let domRef = useDOMRef(ref);\n let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n let {labelProps, fieldProps} = useLabel({\n ...props,\n labelElementType: 'span'\n });\n\n return (\n <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n <div\n ref={domRef}\n {...filterDOMProps(otherProps)}\n {...fieldProps}\n role=\"group\"\n className={(UNSAFE_className ?? '') + container(null, styles)}\n style={{\n ...UNSAFE_style,\n '--size': size / 16 + 'rem'\n } as CSSProperties}>\n {children}\n {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n </div>\n </AvatarContext.Provider>\n );\n});\n"],"names":[],"version":3,"file":"AvatarGroup.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"ACuCe;EAAA;;;;EAOF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;;;;;;;;;;EAAA;;;;EAAA;;;;EAgBK;;;;EAAA;;;;;AAvBH;EAAA;;;;EAOF;;;;EAAA;;;;;AAPE;;AAOF;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAgBK","sources":["0a4c7ff616b39f15","packages/@react-spectrum/s2/src/AvatarGroup.tsx"],"sourcesContent":["@import \"4466692f07e15352\";\n@import \"a5389b273a848c34\";\n@import \"443fa43b7b24f112\";\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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {\n /** Avatar children of the avatar group. */\n children: ReactNode,\n /** The label for the avatar group. */\n label?: string,\n /**\n * The size of the avatar group.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n marginStart: {\n default: '[calc(var(--size) / -4)]',\n ':first-child': 0\n }\n});\n\nconst text = style({\n marginStart: 8,\n truncate: true,\n font: {\n size: {\n 16: 'ui-xs',\n 20: 'ui-sm',\n 24: 'ui',\n 28: 'ui-lg',\n 32: 'ui-xl',\n 36: 'ui-2xl',\n 40: 'ui-3xl'\n }\n }\n});\n\nconst container = style({\n display: 'flex',\n alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\nfunction AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n let domRef = useDOMRef(ref);\n let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n let {labelProps, fieldProps} = useLabel({\n ...props,\n labelElementType: 'span'\n });\n\n return (\n <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n <div\n ref={domRef}\n {...filterDOMProps(otherProps)}\n {...fieldProps}\n role=\"group\"\n className={(UNSAFE_className ?? '') + container(null, styles)}\n style={{\n ...UNSAFE_style,\n '--size': size / 16 + 'rem'\n } as CSSProperties}>\n {children}\n {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n </div>\n </AvatarContext.Provider>\n );\n}\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nlet _AvatarGroup = forwardRef(AvatarGroup);\nexport {_AvatarGroup as AvatarGroup};\n"],"names":[],"version":3,"file":"AvatarGroup.css.map"}
1
+ {"mappings":"ACuCe;EAAA;;;;EAOF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;;;;;;;;;;;;;EAAA;;;;EAAA;;;;EAgBK;;;;EAAA;;;;;AAvBH;EAAA;;;;EAOF;;;;EAAA;;;;;AAPE;;AAOF;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAgBK","sources":["0a4c7ff616b39f15","packages/@react-spectrum/s2/src/AvatarGroup.tsx"],"sourcesContent":["@import \"4466692f07e15352\";\n@import \"a5389b273a848c34\";\n@import \"443fa43b7b24f112\";\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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {\n /** Avatar children of the avatar group. */\n children: ReactNode,\n /** The label for the avatar group. */\n label?: string,\n /**\n * The size of the avatar group.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n marginStart: {\n default: '[calc(var(--size) / -4)]',\n ':first-child': 0\n }\n});\n\nconst text = style({\n marginStart: 8,\n truncate: true,\n font: {\n size: {\n 16: 'ui-xs',\n 20: 'ui-sm',\n 24: 'ui',\n 28: 'ui-lg',\n 32: 'ui-xl',\n 36: 'ui-2xl',\n 40: 'ui-3xl'\n }\n }\n});\n\nconst container = style({\n display: 'flex',\n alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nexport const AvatarGroup = forwardRef(function AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n let domRef = useDOMRef(ref);\n let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n let {labelProps, fieldProps} = useLabel({\n ...props,\n labelElementType: 'span'\n });\n\n return (\n <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n <div\n ref={domRef}\n {...filterDOMProps(otherProps)}\n {...fieldProps}\n role=\"group\"\n className={(UNSAFE_className ?? '') + container(null, styles)}\n style={{\n ...UNSAFE_style,\n '--size': size / 16 + 'rem'\n } as CSSProperties}>\n {children}\n {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n </div>\n </AvatarContext.Provider>\n );\n});\n"],"names":[],"version":3,"file":"AvatarGroup.css.map"}
@@ -165,7 +165,7 @@ const $85e1de65a7290f4a$var$container = function anonymous(props, overrides) {
165
165
  rules += ' _1c';
166
166
  return rules;
167
167
  };
168
- function $85e1de65a7290f4a$var$AvatarGroup(props, ref) {
168
+ const $85e1de65a7290f4a$export$5b26ebaf2b105908 = /*#__PURE__*/ (0, $6MvCt$forwardRef)(function AvatarGroup(props, ref) {
169
169
  [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $85e1de65a7290f4a$export$4f18251748129091);
170
170
  let domRef = (0, $6MvCt$useDOMRef)(ref);
171
171
  let { children: children, label: label, size: size = 24, styles: styles, UNSAFE_style: UNSAFE_style, UNSAFE_className: UNSAFE_className, ...otherProps } = props;
@@ -201,10 +201,7 @@ function $85e1de65a7290f4a$var$AvatarGroup(props, ref) {
201
201
  ]
202
202
  })
203
203
  });
204
- }
205
- /**
206
- * An avatar group is a grouping of avatars that are related to each other.
207
- */ let $85e1de65a7290f4a$export$5b26ebaf2b105908 = /*#__PURE__*/ (0, $6MvCt$forwardRef)($85e1de65a7290f4a$var$AvatarGroup);
204
+ });
208
205
 
209
206
 
210
207
  export {$85e1de65a7290f4a$export$4f18251748129091 as AvatarGroupContext, $85e1de65a7290f4a$export$5b26ebaf2b105908 as AvatarGroup};
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2BM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AAE7G,MAAM;AAON,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;AAKN,SAAS,kCAAY,KAAuB,EAAE,GAA2B;IACvE,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,YAAC,QAAQ,SAAE,KAAK,QAAE,OAAO,YAAI,MAAM,gBAAE,YAAY,oBAAE,gBAAgB,EAAE,GAAG,YAAW,GAAG;IAC1F,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QACtC,GAAG,KAAK;QACR,kBAAkB;IACpB;IAEA,qBACE,gBAAC,CAAA,GAAA,yCAAY,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ;kBAAQ;YAAM,kBAAkB;QAAI;kBAC1E,cAAA,iBAAC;YACC,KAAK;YACJ,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;YAC7B,GAAG,UAAU;YACd,MAAK;YACL,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,gCAAU,MAAM;YACtD,OAAO;gBACL,GAAG,YAAY;gBACf,UAAU,OAAO,KAAK;YACxB;;gBACC;gBACA,uBAAS,gBAAC;oBAAM,GAAG,UAAU;oBAAE,WAAW,2BAAK;wBAAC,MAAM,OAAO;oBAAK;8BAAK;;;;;AAIhF;AAEA;;CAEC,GACD,IAAI,0DAAe,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/AvatarGroup.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {\n /** Avatar children of the avatar group. */\n children: ReactNode,\n /** The label for the avatar group. */\n label?: string,\n /**\n * The size of the avatar group.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n marginStart: {\n default: '[calc(var(--size) / -4)]',\n ':first-child': 0\n }\n});\n\nconst text = style({\n marginStart: 8,\n truncate: true,\n font: {\n size: {\n 16: 'ui-xs',\n 20: 'ui-sm',\n 24: 'ui',\n 28: 'ui-lg',\n 32: 'ui-xl',\n 36: 'ui-2xl',\n 40: 'ui-3xl'\n }\n }\n});\n\nconst container = style({\n display: 'flex',\n alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\nfunction AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n let domRef = useDOMRef(ref);\n let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n let {labelProps, fieldProps} = useLabel({\n ...props,\n labelElementType: 'span'\n });\n\n return (\n <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n <div\n ref={domRef}\n {...filterDOMProps(otherProps)}\n {...fieldProps}\n role=\"group\"\n className={(UNSAFE_className ?? '') + container(null, styles)}\n style={{\n ...UNSAFE_style,\n '--size': size / 16 + 'rem'\n } as CSSProperties}>\n {children}\n {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n </div>\n </AvatarContext.Provider>\n );\n}\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nlet _AvatarGroup = forwardRef(AvatarGroup);\nexport {_AvatarGroup as AvatarGroup};\n"],"names":[],"version":3,"file":"AvatarGroup.mjs.map"}
1
+ {"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AA2BM,MAAM,0DAAqB,CAAA,GAAA,oBAAY,EAA+D;AAE7G,MAAM;AAON,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBN,MAAM;;;;;;;;AAQC,MAAM,0DAAc,CAAA,GAAA,iBAAS,EAAE,SAAS,YAAY,KAAuB,EAAE,GAA2B;IAC7G,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,YAAC,QAAQ,SAAE,KAAK,QAAE,OAAO,YAAI,MAAM,gBAAE,YAAY,oBAAE,gBAAgB,EAAE,GAAG,YAAW,GAAG;IAC1F,IAAI,cAAC,UAAU,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QACtC,GAAG,KAAK;QACR,kBAAkB;IACpB;IAEA,qBACE,gBAAC,CAAA,GAAA,yCAAY,EAAE,QAAQ;QAAC,OAAO;YAAC,QAAQ;kBAAQ;YAAM,kBAAkB;QAAI;kBAC1E,cAAA,iBAAC;YACC,KAAK;YACJ,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;YAC7B,GAAG,UAAU;YACd,MAAK;YACL,WAAW,AAAC,CAAA,oBAAoB,EAAC,IAAK,gCAAU,MAAM;YACtD,OAAO;gBACL,GAAG,YAAY;gBACf,UAAU,OAAO,KAAK;YACxB;;gBACC;gBACA,uBAAS,gBAAC;oBAAM,GAAG,UAAU;oBAAE,WAAW,2BAAK;wBAAC,MAAM,OAAO;oBAAK;8BAAK;;;;;AAIhF","sources":["packages/@react-spectrum/s2/src/AvatarGroup.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {AvatarContext} from './Avatar';\nimport {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, CSSProperties, forwardRef, ReactNode} from 'react';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {getAllowedOverrides, StylesPropWithoutWidth, UnsafeStyles} from './style-utils' with {type: 'macro'};\nimport {style} from '../style' with {type: 'macro'};\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useLabel} from 'react-aria';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface AvatarGroupProps extends UnsafeStyles, DOMProps, AriaLabelingProps, SlotProps {\n /** Avatar children of the avatar group. */\n children: ReactNode,\n /** The label for the avatar group. */\n label?: string,\n /**\n * The size of the avatar group.\n * @default 24\n */\n size?: 16 | 20 | 24 | 28 | 32 | 36 | 40,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StylesPropWithoutWidth\n}\n\nexport const AvatarGroupContext = createContext<ContextValue<AvatarGroupProps, DOMRefValue<HTMLDivElement>>>(null);\n\nconst avatar = style({\n marginStart: {\n default: '[calc(var(--size) / -4)]',\n ':first-child': 0\n }\n});\n\nconst text = style({\n marginStart: 8,\n truncate: true,\n font: {\n size: {\n 16: 'ui-xs',\n 20: 'ui-sm',\n 24: 'ui',\n 28: 'ui-lg',\n 32: 'ui-xl',\n 36: 'ui-2xl',\n 40: 'ui-3xl'\n }\n }\n});\n\nconst container = style({\n display: 'flex',\n alignItems: 'center'\n}, getAllowedOverrides({width: false}));\n\n/**\n * An avatar group is a grouping of avatars that are related to each other.\n */\nexport const AvatarGroup = forwardRef(function AvatarGroup(props: AvatarGroupProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, AvatarGroupContext);\n let domRef = useDOMRef(ref);\n let {children, label, size = 24, styles, UNSAFE_style, UNSAFE_className, ...otherProps} = props;\n let {labelProps, fieldProps} = useLabel({\n ...props,\n labelElementType: 'span'\n });\n\n return (\n <AvatarContext.Provider value={{styles: avatar, size, isOverBackground: true}}>\n <div\n ref={domRef}\n {...filterDOMProps(otherProps)}\n {...fieldProps}\n role=\"group\"\n className={(UNSAFE_className ?? '') + container(null, styles)}\n style={{\n ...UNSAFE_style,\n '--size': size / 16 + 'rem'\n } as CSSProperties}>\n {children}\n {label && <span {...labelProps} className={text({size: String(size)})}>{label}</span>}\n </div>\n </AvatarContext.Provider>\n );\n});\n"],"names":[],"version":3,"file":"AvatarGroup.mjs.map"}
package/dist/Badge.cjs CHANGED
@@ -200,7 +200,7 @@ const $660a621e3a266afc$var$badge = function anonymous(props, overrides) {
200
200
  rules += ' -_375tp1_v-c';
201
201
  return rules;
202
202
  };
203
- function $660a621e3a266afc$var$Badge(props, ref) {
203
+ const $660a621e3a266afc$export$37acb3580601e69a = /*#__PURE__*/ (0, $26Nq1$react.forwardRef)(function Badge(props, ref) {
204
204
  [props, ref] = (0, $ac757a4c2bd72aee$exports.useSpectrumContextProps)(props, ref, $660a621e3a266afc$export$1d4627584e49159a);
205
205
  let { children: children, variant: variant = 'neutral', size: size = 'S', fillStyle: fillStyle = 'bold', ...otherProps } = props; // useProviderProps(props) in v3
206
206
  let domRef = (0, $26Nq1$reactspectrumutils.useDOMRef)(ref);
@@ -241,10 +241,7 @@ function $660a621e3a266afc$var$Badge(props, ref) {
241
241
  })
242
242
  })
243
243
  });
244
- }
245
- /**
246
- * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
247
- */ let $660a621e3a266afc$export$37acb3580601e69a = /*#__PURE__*/ (0, $26Nq1$react.forwardRef)($660a621e3a266afc$var$Badge);
244
+ });
248
245
 
249
246
 
250
247
  //# sourceMappingURL=Badge.cjs.map
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AA0CM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,iBACV,OAAO,gBACP,YAAY,QACZ,GAAG,YACJ,GAAG,OAAO,gCAAgC;IAC3C,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,KAAK,CAAC,CAAA,IAAK,eAAC,CAAA,GAAA,sCAAI,EAAE,cAAc,CAAC;IAEzF,qBACE,gCAAC,CAAA,GAAA,mCAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBAAC,MAAM;gBAA+C;aAAE;YACtE;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;wBAAC,MAAM;wBAAQ,MAAM;oBAAmB;oBAC/D,MAAM;gBACR;aAAE;SACH;kBACD,cAAA,gCAAC,CAAA,GAAA,yCAAc;sBACb,cAAA,gCAAC;gBACE,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;gBAC9B,MAAK;gBACL,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;6BAAC;0BAAS;+BAAM;gBAAS,GAAG,MAAM,MAAM;gBAC1F,OAAO,MAAM,YAAY;gBACzB,KAAK;0BAEH,OAAO,aAAa,YAAY,2BAC5B,gCAAC,CAAA,GAAA,8BAAG;8BAAG;qBACP;;;;AAMhB;AAEA;;CAEC,GACD,IAAI,0DAAS,CAAA,GAAA,uBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Badge.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport React, {createContext, forwardRef, ReactNode} from 'react';\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface BadgeStyleProps {\n /**\n * The size of the badge.\n *\n * @default 'S'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.\n *\n * @default 'neutral'\n */\n variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',\n /**\n * The fill of the badge.\n * @default 'bold'\n */\n fillStyle?: 'bold' | 'subtle' | 'outline'\n}\n\nexport interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {\n /**\n * The content to display in the badge.\n */\n children: ReactNode\n}\n\nexport const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style<BadgeStyleProps>({\n display: 'flex',\n font: 'control',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 'control',\n minHeight: 'control',\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]:only-child)': 0\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n aspectRatio: {\n ':has([slot=icon]:only-child)': 'square'\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n ':has([slot=icon]:only-child)': 0\n }\n },\n columnGap: 'text-to-visual',\n color: {\n fillStyle: {\n bold: {\n default: 'white',\n variant: {\n notice: 'black',\n orange: 'black',\n yellow: 'black',\n charteuse: 'black',\n celery: 'black'\n }\n },\n subtle: 'gray-1000',\n outline: 'gray-1000'\n }\n },\n backgroundColor: {\n fillStyle: {\n bold: {\n variant: {\n accent: 'accent',\n informative: 'informative',\n neutral: 'neutral-subdued',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n gray: 'gray',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n charteuse: 'chartreuse',\n celery: 'celery',\n green: 'green',\n seafoam: 'seafoam',\n cyan: 'cyan',\n blue: 'blue',\n indigo: 'indigo',\n purple: 'purple',\n fuchsia: 'fuchsia',\n magenta: 'magenta',\n pink: 'pink',\n turquoise: 'turquoise',\n brown: 'brown',\n cinnamon: 'cinnamon',\n silver: 'silver'\n }\n },\n subtle: {\n variant: {\n accent: 'accent-subtle',\n informative: 'informative-subtle',\n neutral: 'neutral-subtle',\n positive: 'positive-subtle',\n notice: 'notice-subtle',\n negative: 'negative-subtle',\n gray: 'gray-subtle',\n red: 'red-subtle',\n orange: 'orange-subtle',\n yellow: 'yellow-subtle',\n charteuse: 'chartreuse-subtle',\n celery: 'celery-subtle',\n green: 'green-subtle',\n seafoam: 'seafoam-subtle',\n cyan: 'cyan-subtle',\n blue: 'blue-subtle',\n indigo: 'indigo-subtle',\n purple: 'purple-subtle',\n fuchsia: 'fuchsia-subtle',\n magenta: 'magenta-subtle',\n pink: 'pink-subtle',\n turquoise: 'turquoise-subtle',\n brown: 'brown-subtle',\n cinnamon: 'cinnamon-subtle',\n silver: 'silver-subtle'\n }\n },\n outline: 'layer-2'\n }\n },\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: 2,\n borderColor: {\n default: 'transparent',\n fillStyle: {\n outline: {\n variant: {\n accent: lightDark('accent-800', 'accent-900'), // accent-visual-color\n informative: lightDark('informative-800', 'informative-900'), // informative-visual-color\n neutral: lightDark('gray-500', 'gray-600'), // neutral-visual-color\n positive: lightDark('positive-800', 'positive-900'), // positive-visual-color\n notice: lightDark('notice-800', 'notice-900'), // notice-visual-color\n negative: lightDark('negative-800', 'negative-900') // negative-visual-color\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n}, getAllowedOverrides());\n\nfunction Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);\n let {\n children,\n variant = 'neutral',\n size = 'S',\n fillStyle = 'bold',\n ...otherProps\n } = props; // useProviderProps(props) in v3\n let domRef = useDOMRef(ref);\n let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n return (\n <Provider\n values={[\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n <SkeletonWrapper>\n <span\n {...filterDOMProps(otherProps)}\n role=\"presentation\"\n className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}\n style={props.UNSAFE_style}\n ref={domRef}>\n {\n typeof children === 'string' || isTextOnly\n ? <Text>{children}</Text>\n : children\n }\n </span>\n </SkeletonWrapper>\n </Provider>\n );\n}\n\n/**\n * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.\n */\nlet _Badge = forwardRef(Badge);\nexport {_Badge as Badge};\n"],"names":[],"version":3,"file":"Badge.cjs.map"}
1
+ {"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AA0CM,MAAM,0DAAe,CAAA,GAAA,0BAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoIC,MAAM,0DAAQ,CAAA,GAAA,uBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,iDAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,iBACV,OAAO,gBACP,YAAY,QACZ,GAAG,YACJ,GAAG,OAAO,gCAAgC;IAC3C,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,sCAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,KAAK,CAAC,CAAA,IAAK,eAAC,CAAA,GAAA,sCAAI,EAAE,cAAc,CAAC;IAEzF,qBACE,gCAAC,CAAA,GAAA,mCAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBAAC,MAAM;gBAA+C;aAAE;YACtE;gBAAC,CAAA,GAAA,qCAAU;gBAAG;oBACZ,QAAQ,CAAA,GAAA,wCAAa,EAAE;wBAAC,MAAM;wBAAQ,MAAM;oBAAmB;oBAC/D,MAAM;gBACR;aAAE;SACH;kBACD,cAAA,gCAAC,CAAA,GAAA,yCAAc;sBACb,cAAA,gCAAC;gBACE,GAAG,CAAA,GAAA,oCAAa,EAAE,WAAW;gBAC9B,MAAK;gBACL,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;6BAAC;0BAAS;+BAAM;gBAAS,GAAG,MAAM,MAAM;gBAC1F,OAAO,MAAM,YAAY;gBACzB,KAAK;0BAEH,OAAO,aAAa,YAAY,2BAC5B,gCAAC,CAAA,GAAA,8BAAG;8BAAG;qBACP;;;;AAMhB","sources":["packages/@react-spectrum/s2/src/Badge.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport React, {createContext, forwardRef, ReactNode} from 'react';\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface BadgeStyleProps {\n /**\n * The size of the badge.\n *\n * @default 'S'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.\n *\n * @default 'neutral'\n */\n variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',\n /**\n * The fill of the badge.\n * @default 'bold'\n */\n fillStyle?: 'bold' | 'subtle' | 'outline'\n}\n\nexport interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {\n /**\n * The content to display in the badge.\n */\n children: ReactNode\n}\n\nexport const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style<BadgeStyleProps>({\n display: 'flex',\n font: 'control',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 'control',\n minHeight: 'control',\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]:only-child)': 0\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n aspectRatio: {\n ':has([slot=icon]:only-child)': 'square'\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n ':has([slot=icon]:only-child)': 0\n }\n },\n columnGap: 'text-to-visual',\n color: {\n fillStyle: {\n bold: {\n default: 'white',\n variant: {\n notice: 'black',\n orange: 'black',\n yellow: 'black',\n charteuse: 'black',\n celery: 'black'\n }\n },\n subtle: 'gray-1000',\n outline: 'gray-1000'\n }\n },\n backgroundColor: {\n fillStyle: {\n bold: {\n variant: {\n accent: 'accent',\n informative: 'informative',\n neutral: 'neutral-subdued',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n gray: 'gray',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n charteuse: 'chartreuse',\n celery: 'celery',\n green: 'green',\n seafoam: 'seafoam',\n cyan: 'cyan',\n blue: 'blue',\n indigo: 'indigo',\n purple: 'purple',\n fuchsia: 'fuchsia',\n magenta: 'magenta',\n pink: 'pink',\n turquoise: 'turquoise',\n brown: 'brown',\n cinnamon: 'cinnamon',\n silver: 'silver'\n }\n },\n subtle: {\n variant: {\n accent: 'accent-subtle',\n informative: 'informative-subtle',\n neutral: 'neutral-subtle',\n positive: 'positive-subtle',\n notice: 'notice-subtle',\n negative: 'negative-subtle',\n gray: 'gray-subtle',\n red: 'red-subtle',\n orange: 'orange-subtle',\n yellow: 'yellow-subtle',\n charteuse: 'chartreuse-subtle',\n celery: 'celery-subtle',\n green: 'green-subtle',\n seafoam: 'seafoam-subtle',\n cyan: 'cyan-subtle',\n blue: 'blue-subtle',\n indigo: 'indigo-subtle',\n purple: 'purple-subtle',\n fuchsia: 'fuchsia-subtle',\n magenta: 'magenta-subtle',\n pink: 'pink-subtle',\n turquoise: 'turquoise-subtle',\n brown: 'brown-subtle',\n cinnamon: 'cinnamon-subtle',\n silver: 'silver-subtle'\n }\n },\n outline: 'layer-2'\n }\n },\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: 2,\n borderColor: {\n default: 'transparent',\n fillStyle: {\n outline: {\n variant: {\n accent: lightDark('accent-800', 'accent-900'), // accent-visual-color\n informative: lightDark('informative-800', 'informative-900'), // informative-visual-color\n neutral: lightDark('gray-500', 'gray-600'), // neutral-visual-color\n positive: lightDark('positive-800', 'positive-900'), // positive-visual-color\n notice: lightDark('notice-800', 'notice-900'), // notice-visual-color\n negative: lightDark('negative-800', 'negative-900') // negative-visual-color\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n}, getAllowedOverrides());\n\n/**\n * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.\n */\nexport const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);\n let {\n children,\n variant = 'neutral',\n size = 'S',\n fillStyle = 'bold',\n ...otherProps\n } = props; // useProviderProps(props) in v3\n let domRef = useDOMRef(ref);\n let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n return (\n <Provider\n values={[\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n <SkeletonWrapper>\n <span\n {...filterDOMProps(otherProps)}\n role=\"presentation\"\n className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}\n style={props.UNSAFE_style}\n ref={domRef}>\n {\n typeof children === 'string' || isTextOnly\n ? <Text>{children}</Text>\n : children\n }\n </span>\n </SkeletonWrapper>\n </Provider>\n );\n});\n"],"names":[],"version":3,"file":"Badge.cjs.map"}
@@ -1 +1 @@
1
- {"mappings":"ACsDc;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;;;;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;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAgJiB;;;;EAAA;;;;EAAA;;;;EAEyB;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAnJJ;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAgJiB","sources":["31052c90be0d94da","packages/@react-spectrum/s2/src/Badge.tsx"],"sourcesContent":["@import \"08c4d7ffd2baa021\";\n@import \"1aad76937c73131b\";\n@import \"7989dc282effbbd8\";\n@import \"a50d3ac159f93c2b\";\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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport React, {createContext, forwardRef, ReactNode} from 'react';\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface BadgeStyleProps {\n /**\n * The size of the badge.\n *\n * @default 'S'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.\n *\n * @default 'neutral'\n */\n variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',\n /**\n * The fill of the badge.\n * @default 'bold'\n */\n fillStyle?: 'bold' | 'subtle' | 'outline'\n}\n\nexport interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {\n /**\n * The content to display in the badge.\n */\n children: ReactNode\n}\n\nexport const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style<BadgeStyleProps>({\n display: 'flex',\n font: 'control',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 'control',\n minHeight: 'control',\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]:only-child)': 0\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n aspectRatio: {\n ':has([slot=icon]:only-child)': 'square'\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n ':has([slot=icon]:only-child)': 0\n }\n },\n columnGap: 'text-to-visual',\n color: {\n fillStyle: {\n bold: {\n default: 'white',\n variant: {\n notice: 'black',\n orange: 'black',\n yellow: 'black',\n charteuse: 'black',\n celery: 'black'\n }\n },\n subtle: 'gray-1000',\n outline: 'gray-1000'\n }\n },\n backgroundColor: {\n fillStyle: {\n bold: {\n variant: {\n accent: 'accent',\n informative: 'informative',\n neutral: 'neutral-subdued',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n gray: 'gray',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n charteuse: 'chartreuse',\n celery: 'celery',\n green: 'green',\n seafoam: 'seafoam',\n cyan: 'cyan',\n blue: 'blue',\n indigo: 'indigo',\n purple: 'purple',\n fuchsia: 'fuchsia',\n magenta: 'magenta',\n pink: 'pink',\n turquoise: 'turquoise',\n brown: 'brown',\n cinnamon: 'cinnamon',\n silver: 'silver'\n }\n },\n subtle: {\n variant: {\n accent: 'accent-subtle',\n informative: 'informative-subtle',\n neutral: 'neutral-subtle',\n positive: 'positive-subtle',\n notice: 'notice-subtle',\n negative: 'negative-subtle',\n gray: 'gray-subtle',\n red: 'red-subtle',\n orange: 'orange-subtle',\n yellow: 'yellow-subtle',\n charteuse: 'chartreuse-subtle',\n celery: 'celery-subtle',\n green: 'green-subtle',\n seafoam: 'seafoam-subtle',\n cyan: 'cyan-subtle',\n blue: 'blue-subtle',\n indigo: 'indigo-subtle',\n purple: 'purple-subtle',\n fuchsia: 'fuchsia-subtle',\n magenta: 'magenta-subtle',\n pink: 'pink-subtle',\n turquoise: 'turquoise-subtle',\n brown: 'brown-subtle',\n cinnamon: 'cinnamon-subtle',\n silver: 'silver-subtle'\n }\n },\n outline: 'layer-2'\n }\n },\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: 2,\n borderColor: {\n default: 'transparent',\n fillStyle: {\n outline: {\n variant: {\n accent: lightDark('accent-800', 'accent-900'), // accent-visual-color\n informative: lightDark('informative-800', 'informative-900'), // informative-visual-color\n neutral: lightDark('gray-500', 'gray-600'), // neutral-visual-color\n positive: lightDark('positive-800', 'positive-900'), // positive-visual-color\n notice: lightDark('notice-800', 'notice-900'), // notice-visual-color\n negative: lightDark('negative-800', 'negative-900') // negative-visual-color\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n}, getAllowedOverrides());\n\nfunction Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);\n let {\n children,\n variant = 'neutral',\n size = 'S',\n fillStyle = 'bold',\n ...otherProps\n } = props; // useProviderProps(props) in v3\n let domRef = useDOMRef(ref);\n let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n return (\n <Provider\n values={[\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n <SkeletonWrapper>\n <span\n {...filterDOMProps(otherProps)}\n role=\"presentation\"\n className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}\n style={props.UNSAFE_style}\n ref={domRef}>\n {\n typeof children === 'string' || isTextOnly\n ? <Text>{children}</Text>\n : children\n }\n </span>\n </SkeletonWrapper>\n </Provider>\n );\n}\n\n/**\n * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.\n */\nlet _Badge = forwardRef(Badge);\nexport {_Badge as Badge};\n"],"names":[],"version":3,"file":"Badge.css.map"}
1
+ {"mappings":"ACsDc;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;;;;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;;;;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;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAmJiB;;;;EAAA;;;;EAAA;;;;EAEyB;;;;EACtC;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAtJJ;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;;AAAA;EAAA;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA;;;;;;AAmJiB","sources":["31052c90be0d94da","packages/@react-spectrum/s2/src/Badge.tsx"],"sourcesContent":["@import \"08c4d7ffd2baa021\";\n@import \"1aad76937c73131b\";\n@import \"7989dc282effbbd8\";\n@import \"a50d3ac159f93c2b\";\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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport React, {createContext, forwardRef, ReactNode} from 'react';\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface BadgeStyleProps {\n /**\n * The size of the badge.\n *\n * @default 'S'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.\n *\n * @default 'neutral'\n */\n variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',\n /**\n * The fill of the badge.\n * @default 'bold'\n */\n fillStyle?: 'bold' | 'subtle' | 'outline'\n}\n\nexport interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {\n /**\n * The content to display in the badge.\n */\n children: ReactNode\n}\n\nexport const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style<BadgeStyleProps>({\n display: 'flex',\n font: 'control',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 'control',\n minHeight: 'control',\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]:only-child)': 0\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n aspectRatio: {\n ':has([slot=icon]:only-child)': 'square'\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n ':has([slot=icon]:only-child)': 0\n }\n },\n columnGap: 'text-to-visual',\n color: {\n fillStyle: {\n bold: {\n default: 'white',\n variant: {\n notice: 'black',\n orange: 'black',\n yellow: 'black',\n charteuse: 'black',\n celery: 'black'\n }\n },\n subtle: 'gray-1000',\n outline: 'gray-1000'\n }\n },\n backgroundColor: {\n fillStyle: {\n bold: {\n variant: {\n accent: 'accent',\n informative: 'informative',\n neutral: 'neutral-subdued',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n gray: 'gray',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n charteuse: 'chartreuse',\n celery: 'celery',\n green: 'green',\n seafoam: 'seafoam',\n cyan: 'cyan',\n blue: 'blue',\n indigo: 'indigo',\n purple: 'purple',\n fuchsia: 'fuchsia',\n magenta: 'magenta',\n pink: 'pink',\n turquoise: 'turquoise',\n brown: 'brown',\n cinnamon: 'cinnamon',\n silver: 'silver'\n }\n },\n subtle: {\n variant: {\n accent: 'accent-subtle',\n informative: 'informative-subtle',\n neutral: 'neutral-subtle',\n positive: 'positive-subtle',\n notice: 'notice-subtle',\n negative: 'negative-subtle',\n gray: 'gray-subtle',\n red: 'red-subtle',\n orange: 'orange-subtle',\n yellow: 'yellow-subtle',\n charteuse: 'chartreuse-subtle',\n celery: 'celery-subtle',\n green: 'green-subtle',\n seafoam: 'seafoam-subtle',\n cyan: 'cyan-subtle',\n blue: 'blue-subtle',\n indigo: 'indigo-subtle',\n purple: 'purple-subtle',\n fuchsia: 'fuchsia-subtle',\n magenta: 'magenta-subtle',\n pink: 'pink-subtle',\n turquoise: 'turquoise-subtle',\n brown: 'brown-subtle',\n cinnamon: 'cinnamon-subtle',\n silver: 'silver-subtle'\n }\n },\n outline: 'layer-2'\n }\n },\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: 2,\n borderColor: {\n default: 'transparent',\n fillStyle: {\n outline: {\n variant: {\n accent: lightDark('accent-800', 'accent-900'), // accent-visual-color\n informative: lightDark('informative-800', 'informative-900'), // informative-visual-color\n neutral: lightDark('gray-500', 'gray-600'), // neutral-visual-color\n positive: lightDark('positive-800', 'positive-900'), // positive-visual-color\n notice: lightDark('notice-800', 'notice-900'), // notice-visual-color\n negative: lightDark('negative-800', 'negative-900') // negative-visual-color\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n}, getAllowedOverrides());\n\n/**\n * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.\n */\nexport const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);\n let {\n children,\n variant = 'neutral',\n size = 'S',\n fillStyle = 'bold',\n ...otherProps\n } = props; // useProviderProps(props) in v3\n let domRef = useDOMRef(ref);\n let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n return (\n <Provider\n values={[\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n <SkeletonWrapper>\n <span\n {...filterDOMProps(otherProps)}\n role=\"presentation\"\n className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}\n style={props.UNSAFE_style}\n ref={domRef}>\n {\n typeof children === 'string' || isTextOnly\n ? <Text>{children}</Text>\n : children\n }\n </span>\n </SkeletonWrapper>\n </Provider>\n );\n});\n"],"names":[],"version":3,"file":"Badge.css.map"}
package/dist/Badge.mjs CHANGED
@@ -189,7 +189,7 @@ const $6357025487dea614$var$badge = function anonymous(props, overrides) {
189
189
  rules += ' -_375tp1_v-c';
190
190
  return rules;
191
191
  };
192
- function $6357025487dea614$var$Badge(props, ref) {
192
+ const $6357025487dea614$export$37acb3580601e69a = /*#__PURE__*/ (0, $22gMo$forwardRef)(function Badge(props, ref) {
193
193
  [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $6357025487dea614$export$1d4627584e49159a);
194
194
  let { children: children, variant: variant = 'neutral', size: size = 'S', fillStyle: fillStyle = 'bold', ...otherProps } = props; // useProviderProps(props) in v3
195
195
  let domRef = (0, $22gMo$useDOMRef)(ref);
@@ -230,10 +230,7 @@ function $6357025487dea614$var$Badge(props, ref) {
230
230
  })
231
231
  })
232
232
  });
233
- }
234
- /**
235
- * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.
236
- */ let $6357025487dea614$export$37acb3580601e69a = /*#__PURE__*/ (0, $22gMo$forwardRef)($6357025487dea614$var$Badge);
233
+ });
237
234
 
238
235
 
239
236
  export {$6357025487dea614$export$1d4627584e49159a as BadgeContext, $6357025487dea614$export$37acb3580601e69a as Badge};
@@ -1 +1 @@
1
- {"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AA0CM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiIN,SAAS,4BAAM,KAAiB,EAAE,GAA2B;IAC3D,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,iBACV,OAAO,gBACP,YAAY,QACZ,GAAG,YACJ,GAAG,OAAO,gCAAgC;IAC3C,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,KAAK,CAAC,CAAA,IAAK,eAAC,CAAA,GAAA,YAAI,EAAE,cAAc,CAAC;IAEzF,qBACE,gBAAC,CAAA,GAAA,eAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,yCAAU;gBAAG;oBAAC,MAAM;gBAA+C;aAAE;YACtE;gBAAC,CAAA,GAAA,yCAAU;gBAAG;oBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;wBAAC,MAAM;wBAAQ,MAAM;oBAAmB;oBAC/D,MAAM;gBACR;aAAE;SACH;kBACD,cAAA,gBAAC,CAAA,GAAA,yCAAc;sBACb,cAAA,gBAAC;gBACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;gBAC9B,MAAK;gBACL,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;6BAAC;0BAAS;+BAAM;gBAAS,GAAG,MAAM,MAAM;gBAC1F,OAAO,MAAM,YAAY;gBACzB,KAAK;0BAEH,OAAO,aAAa,YAAY,2BAC5B,gBAAC,CAAA,GAAA,yCAAG;8BAAG;qBACP;;;;AAMhB;AAEA;;CAEC,GACD,IAAI,0DAAS,CAAA,GAAA,iBAAS,EAAE","sources":["packages/@react-spectrum/s2/src/Badge.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport React, {createContext, forwardRef, ReactNode} from 'react';\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface BadgeStyleProps {\n /**\n * The size of the badge.\n *\n * @default 'S'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.\n *\n * @default 'neutral'\n */\n variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',\n /**\n * The fill of the badge.\n * @default 'bold'\n */\n fillStyle?: 'bold' | 'subtle' | 'outline'\n}\n\nexport interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {\n /**\n * The content to display in the badge.\n */\n children: ReactNode\n}\n\nexport const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style<BadgeStyleProps>({\n display: 'flex',\n font: 'control',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 'control',\n minHeight: 'control',\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]:only-child)': 0\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n aspectRatio: {\n ':has([slot=icon]:only-child)': 'square'\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n ':has([slot=icon]:only-child)': 0\n }\n },\n columnGap: 'text-to-visual',\n color: {\n fillStyle: {\n bold: {\n default: 'white',\n variant: {\n notice: 'black',\n orange: 'black',\n yellow: 'black',\n charteuse: 'black',\n celery: 'black'\n }\n },\n subtle: 'gray-1000',\n outline: 'gray-1000'\n }\n },\n backgroundColor: {\n fillStyle: {\n bold: {\n variant: {\n accent: 'accent',\n informative: 'informative',\n neutral: 'neutral-subdued',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n gray: 'gray',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n charteuse: 'chartreuse',\n celery: 'celery',\n green: 'green',\n seafoam: 'seafoam',\n cyan: 'cyan',\n blue: 'blue',\n indigo: 'indigo',\n purple: 'purple',\n fuchsia: 'fuchsia',\n magenta: 'magenta',\n pink: 'pink',\n turquoise: 'turquoise',\n brown: 'brown',\n cinnamon: 'cinnamon',\n silver: 'silver'\n }\n },\n subtle: {\n variant: {\n accent: 'accent-subtle',\n informative: 'informative-subtle',\n neutral: 'neutral-subtle',\n positive: 'positive-subtle',\n notice: 'notice-subtle',\n negative: 'negative-subtle',\n gray: 'gray-subtle',\n red: 'red-subtle',\n orange: 'orange-subtle',\n yellow: 'yellow-subtle',\n charteuse: 'chartreuse-subtle',\n celery: 'celery-subtle',\n green: 'green-subtle',\n seafoam: 'seafoam-subtle',\n cyan: 'cyan-subtle',\n blue: 'blue-subtle',\n indigo: 'indigo-subtle',\n purple: 'purple-subtle',\n fuchsia: 'fuchsia-subtle',\n magenta: 'magenta-subtle',\n pink: 'pink-subtle',\n turquoise: 'turquoise-subtle',\n brown: 'brown-subtle',\n cinnamon: 'cinnamon-subtle',\n silver: 'silver-subtle'\n }\n },\n outline: 'layer-2'\n }\n },\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: 2,\n borderColor: {\n default: 'transparent',\n fillStyle: {\n outline: {\n variant: {\n accent: lightDark('accent-800', 'accent-900'), // accent-visual-color\n informative: lightDark('informative-800', 'informative-900'), // informative-visual-color\n neutral: lightDark('gray-500', 'gray-600'), // neutral-visual-color\n positive: lightDark('positive-800', 'positive-900'), // positive-visual-color\n notice: lightDark('notice-800', 'notice-900'), // notice-visual-color\n negative: lightDark('negative-800', 'negative-900') // negative-visual-color\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n}, getAllowedOverrides());\n\nfunction Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);\n let {\n children,\n variant = 'neutral',\n size = 'S',\n fillStyle = 'bold',\n ...otherProps\n } = props; // useProviderProps(props) in v3\n let domRef = useDOMRef(ref);\n let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n return (\n <Provider\n values={[\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n <SkeletonWrapper>\n <span\n {...filterDOMProps(otherProps)}\n role=\"presentation\"\n className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}\n style={props.UNSAFE_style}\n ref={domRef}>\n {\n typeof children === 'string' || isTextOnly\n ? <Text>{children}</Text>\n : children\n }\n </span>\n </SkeletonWrapper>\n </Provider>\n );\n}\n\n/**\n * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.\n */\nlet _Badge = forwardRef(Badge);\nexport {_Badge as Badge};\n"],"names":[],"version":3,"file":"Badge.mjs.map"}
1
+ {"mappings":";;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;AA0CM,MAAM,0DAAe,CAAA,GAAA,oBAAY,EAAkE;AAE1G,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoIC,MAAM,0DAAQ,CAAA,GAAA,iBAAS,EAAE,SAAS,MAAM,KAAiB,EAAE,GAA2B;IAC3F,CAAC,OAAO,IAAI,GAAG,CAAA,GAAA,yCAAsB,EAAE,OAAO,KAAK;IACnD,IAAI,YACF,QAAQ,WACR,UAAU,iBACV,OAAO,gBACP,YAAY,QACZ,GAAG,YACJ,GAAG,OAAO,gCAAgC;IAC3C,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,aAAa,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC,OAAO,CAAC,MAAM,QAAQ,EAAE,KAAK,CAAC,CAAA,IAAK,eAAC,CAAA,GAAA,YAAI,EAAE,cAAc,CAAC;IAEzF,qBACE,gBAAC,CAAA,GAAA,eAAO;QACN,QAAQ;YACN;gBAAC,CAAA,GAAA,yCAAU;gBAAG;oBAAC,MAAM;gBAA+C;aAAE;YACtE;gBAAC,CAAA,GAAA,yCAAU;gBAAG;oBACZ,QAAQ,CAAA,GAAA,yCAAa,EAAE;wBAAC,MAAM;wBAAQ,MAAM;oBAAmB;oBAC/D,MAAM;gBACR;aAAE;SACH;kBACD,cAAA,gBAAC,CAAA,GAAA,yCAAc;sBACb,cAAA,gBAAC;gBACE,GAAG,CAAA,GAAA,qBAAa,EAAE,WAAW;gBAC9B,MAAK;gBACL,WAAW,AAAC,CAAA,MAAM,gBAAgB,IAAI,EAAC,IAAK,4BAAM;6BAAC;0BAAS;+BAAM;gBAAS,GAAG,MAAM,MAAM;gBAC1F,OAAO,MAAM,YAAY;gBACzB,KAAK;0BAEH,OAAO,aAAa,YAAY,2BAC5B,gBAAC,CAAA,GAAA,yCAAG;8BAAG;qBACP;;;;AAMhB","sources":["packages/@react-spectrum/s2/src/Badge.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 {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue} from '@react-types/shared';\nimport {centerBaseline} from './CenterBaseline';\nimport {centerPadding, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};\nimport {ContextValue, Provider, SlotProps} from 'react-aria-components';\nimport {filterDOMProps} from '@react-aria/utils';\nimport {fontRelative, lightDark, style} from '../style' with {type: 'macro'};\nimport {IconContext} from './Icon';\nimport React, {createContext, forwardRef, ReactNode} from 'react';\nimport {SkeletonWrapper} from './Skeleton';\nimport {Text, TextContext} from './Content';\nimport {useDOMRef} from '@react-spectrum/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface BadgeStyleProps {\n /**\n * The size of the badge.\n *\n * @default 'S'\n */\n size?: 'S' | 'M' | 'L' | 'XL',\n /**\n * The variant changes the background color of the badge. When badge has a semantic meaning, they should use the variant for semantic colors.\n *\n * @default 'neutral'\n */\n variant?: 'accent' | 'informative' | 'neutral' | 'positive' | 'notice' | 'negative' | 'gray' | 'red' | 'orange' | 'yellow' | 'charteuse' | 'celery' | 'green' | 'seafoam' | 'cyan' | 'blue' | 'indigo' | 'purple' | 'fuchsia' | 'magenta' | 'pink' | 'turquoise' | 'brown' | 'cinnamon' | 'silver',\n /**\n * The fill of the badge.\n * @default 'bold'\n */\n fillStyle?: 'bold' | 'subtle' | 'outline'\n}\n\nexport interface BadgeProps extends DOMProps, AriaLabelingProps, StyleProps, BadgeStyleProps, SlotProps {\n /**\n * The content to display in the badge.\n */\n children: ReactNode\n}\n\nexport const BadgeContext = createContext<ContextValue<Partial<BadgeProps>, DOMRefValue<HTMLDivElement>>>(null);\n\nconst badge = style<BadgeStyleProps>({\n display: 'flex',\n font: 'control',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 'control',\n minHeight: 'control',\n paddingX: {\n default: 'edge-to-text',\n ':has([slot=icon]:only-child)': 0\n },\n '--labelPadding': {\n type: 'paddingTop',\n value: centerPadding()\n },\n aspectRatio: {\n ':has([slot=icon]:only-child)': 'square'\n },\n '--iconMargin': {\n type: 'marginTop',\n value: {\n default: fontRelative(-2),\n ':has([slot=icon]:only-child)': 0\n }\n },\n columnGap: 'text-to-visual',\n color: {\n fillStyle: {\n bold: {\n default: 'white',\n variant: {\n notice: 'black',\n orange: 'black',\n yellow: 'black',\n charteuse: 'black',\n celery: 'black'\n }\n },\n subtle: 'gray-1000',\n outline: 'gray-1000'\n }\n },\n backgroundColor: {\n fillStyle: {\n bold: {\n variant: {\n accent: 'accent',\n informative: 'informative',\n neutral: 'neutral-subdued',\n positive: 'positive',\n notice: 'notice',\n negative: 'negative',\n gray: 'gray',\n red: 'red',\n orange: 'orange',\n yellow: 'yellow',\n charteuse: 'chartreuse',\n celery: 'celery',\n green: 'green',\n seafoam: 'seafoam',\n cyan: 'cyan',\n blue: 'blue',\n indigo: 'indigo',\n purple: 'purple',\n fuchsia: 'fuchsia',\n magenta: 'magenta',\n pink: 'pink',\n turquoise: 'turquoise',\n brown: 'brown',\n cinnamon: 'cinnamon',\n silver: 'silver'\n }\n },\n subtle: {\n variant: {\n accent: 'accent-subtle',\n informative: 'informative-subtle',\n neutral: 'neutral-subtle',\n positive: 'positive-subtle',\n notice: 'notice-subtle',\n negative: 'negative-subtle',\n gray: 'gray-subtle',\n red: 'red-subtle',\n orange: 'orange-subtle',\n yellow: 'yellow-subtle',\n charteuse: 'chartreuse-subtle',\n celery: 'celery-subtle',\n green: 'green-subtle',\n seafoam: 'seafoam-subtle',\n cyan: 'cyan-subtle',\n blue: 'blue-subtle',\n indigo: 'indigo-subtle',\n purple: 'purple-subtle',\n fuchsia: 'fuchsia-subtle',\n magenta: 'magenta-subtle',\n pink: 'pink-subtle',\n turquoise: 'turquoise-subtle',\n brown: 'brown-subtle',\n cinnamon: 'cinnamon-subtle',\n silver: 'silver-subtle'\n }\n },\n outline: 'layer-2'\n }\n },\n borderStyle: 'solid',\n boxSizing: 'border-box',\n borderWidth: 2,\n borderColor: {\n default: 'transparent',\n fillStyle: {\n outline: {\n variant: {\n accent: lightDark('accent-800', 'accent-900'), // accent-visual-color\n informative: lightDark('informative-800', 'informative-900'), // informative-visual-color\n neutral: lightDark('gray-500', 'gray-600'), // neutral-visual-color\n positive: lightDark('positive-800', 'positive-900'), // positive-visual-color\n notice: lightDark('notice-800', 'notice-900'), // notice-visual-color\n negative: lightDark('negative-800', 'negative-900') // negative-visual-color\n }\n }\n }\n },\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n}, getAllowedOverrides());\n\n/**\n * Badges are used for showing a small amount of color-categorized metadata, ideal for getting a user's attention.\n */\nexport const Badge = forwardRef(function Badge(props: BadgeProps, ref: DOMRef<HTMLDivElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, BadgeContext);\n let {\n children,\n variant = 'neutral',\n size = 'S',\n fillStyle = 'bold',\n ...otherProps\n } = props; // useProviderProps(props) in v3\n let domRef = useDOMRef(ref);\n let isTextOnly = React.Children.toArray(props.children).every(c => !React.isValidElement(c));\n\n return (\n <Provider\n values={[\n [TextContext, {styles: style({paddingY: '--labelPadding', order: 1})}],\n [IconContext, {\n render: centerBaseline({slot: 'icon', styles: style({order: 0})}),\n styles: style({size: fontRelative(20), marginStart: '--iconMargin', flexShrink: 0})\n }]\n ]}>\n <SkeletonWrapper>\n <span\n {...filterDOMProps(otherProps)}\n role=\"presentation\"\n className={(props.UNSAFE_className || '') + badge({variant, size, fillStyle}, props.styles)}\n style={props.UNSAFE_style}\n ref={domRef}>\n {\n typeof children === 'string' || isTextOnly\n ? <Text>{children}</Text>\n : children\n }\n </span>\n </SkeletonWrapper>\n </Provider>\n );\n});\n"],"names":[],"version":3,"file":"Badge.mjs.map"}