@react-spectrum/s2 0.9.0 → 0.9.2

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 (272) hide show
  1. package/dist/Accordion.cjs +2 -2
  2. package/dist/Accordion.css +2 -2
  3. package/dist/Accordion.mjs +2 -2
  4. package/dist/ActionBar.cjs +60 -60
  5. package/dist/ActionBar.css +59 -59
  6. package/dist/ActionBar.mjs +60 -60
  7. package/dist/ActionButton.cjs +187 -187
  8. package/dist/ActionButton.cjs.map +1 -1
  9. package/dist/ActionButton.css +134 -134
  10. package/dist/ActionButton.css.map +1 -1
  11. package/dist/ActionButton.mjs +187 -187
  12. package/dist/ActionButton.mjs.map +1 -1
  13. package/dist/ActionButtonGroup.cjs +15 -15
  14. package/dist/ActionButtonGroup.css +9 -9
  15. package/dist/ActionButtonGroup.mjs +15 -15
  16. package/dist/Add.cjs +10 -10
  17. package/dist/Add.css +6 -6
  18. package/dist/Add.mjs +10 -10
  19. package/dist/AlertDialog.cjs +3 -3
  20. package/dist/AlertDialog.css +3 -3
  21. package/dist/AlertDialog.mjs +3 -3
  22. package/dist/Asterisk.cjs +6 -6
  23. package/dist/Asterisk.css +4 -4
  24. package/dist/Asterisk.mjs +6 -6
  25. package/dist/Avatar.cjs +14 -14
  26. package/dist/Avatar.css +14 -14
  27. package/dist/Avatar.mjs +14 -14
  28. package/dist/AvatarGroup.cjs +120 -120
  29. package/dist/AvatarGroup.css +37 -37
  30. package/dist/AvatarGroup.mjs +120 -120
  31. package/dist/Badge.cjs +196 -196
  32. package/dist/Badge.css +129 -129
  33. package/dist/Badge.mjs +196 -196
  34. package/dist/Breadcrumbs.cjs +231 -231
  35. package/dist/Breadcrumbs.css +102 -102
  36. package/dist/Breadcrumbs.mjs +231 -231
  37. package/dist/Button.cjs +328 -328
  38. package/dist/Button.cjs.map +1 -1
  39. package/dist/Button.css +176 -176
  40. package/dist/Button.css.map +1 -1
  41. package/dist/Button.mjs +328 -328
  42. package/dist/Button.mjs.map +1 -1
  43. package/dist/ButtonGroup.cjs +20 -20
  44. package/dist/ButtonGroup.css +15 -15
  45. package/dist/ButtonGroup.mjs +20 -20
  46. package/dist/Card.cjs +294 -294
  47. package/dist/Card.css +205 -205
  48. package/dist/Card.mjs +294 -294
  49. package/dist/CardView.cjs +17 -17
  50. package/dist/CardView.css +17 -17
  51. package/dist/CardView.mjs +17 -17
  52. package/dist/CenterBaseline.cjs +1 -1
  53. package/dist/CenterBaseline.css +2 -2
  54. package/dist/CenterBaseline.mjs +1 -1
  55. package/dist/Checkbox.cjs +160 -160
  56. package/dist/Checkbox.css +94 -94
  57. package/dist/Checkbox.mjs +160 -160
  58. package/dist/CheckboxGroup.cjs +43 -43
  59. package/dist/CheckboxGroup.css +41 -41
  60. package/dist/CheckboxGroup.mjs +43 -43
  61. package/dist/Checkmark.cjs +12 -12
  62. package/dist/Checkmark.css +8 -8
  63. package/dist/Checkmark.mjs +12 -12
  64. package/dist/Chevron.cjs +12 -12
  65. package/dist/Chevron.css +10 -10
  66. package/dist/Chevron.mjs +12 -12
  67. package/dist/ClearButton.cjs +29 -29
  68. package/dist/ClearButton.css +29 -29
  69. package/dist/ClearButton.mjs +29 -29
  70. package/dist/CloseButton.cjs +54 -54
  71. package/dist/CloseButton.css +46 -46
  72. package/dist/CloseButton.mjs +54 -54
  73. package/dist/ColorArea.cjs +16 -16
  74. package/dist/ColorArea.css +16 -16
  75. package/dist/ColorArea.mjs +16 -16
  76. package/dist/ColorField.cjs +31 -31
  77. package/dist/ColorField.css +31 -31
  78. package/dist/ColorField.mjs +31 -31
  79. package/dist/ColorHandle.cjs +27 -27
  80. package/dist/ColorHandle.css +42 -42
  81. package/dist/ColorHandle.mjs +27 -27
  82. package/dist/ColorSlider.cjs +108 -108
  83. package/dist/ColorSlider.css +56 -56
  84. package/dist/ColorSlider.mjs +108 -108
  85. package/dist/ColorSwatch.cjs +29 -29
  86. package/dist/ColorSwatch.css +29 -29
  87. package/dist/ColorSwatch.mjs +29 -29
  88. package/dist/ColorSwatchPicker.cjs +27 -27
  89. package/dist/ColorSwatchPicker.css +46 -46
  90. package/dist/ColorSwatchPicker.mjs +27 -27
  91. package/dist/ColorWheel.cjs +26 -26
  92. package/dist/ColorWheel.css +17 -17
  93. package/dist/ColorWheel.mjs +26 -26
  94. package/dist/ComboBox.cjs +378 -376
  95. package/dist/ComboBox.cjs.map +1 -1
  96. package/dist/ComboBox.css +179 -179
  97. package/dist/ComboBox.css.map +1 -1
  98. package/dist/ComboBox.mjs +378 -376
  99. package/dist/ComboBox.mjs.map +1 -1
  100. package/dist/ContextualHelp.cjs +5 -5
  101. package/dist/ContextualHelp.cjs.map +1 -1
  102. package/dist/ContextualHelp.css +49 -49
  103. package/dist/ContextualHelp.css.map +1 -1
  104. package/dist/ContextualHelp.mjs +5 -5
  105. package/dist/ContextualHelp.mjs.map +1 -1
  106. package/dist/Cross.cjs +14 -14
  107. package/dist/Cross.css +10 -10
  108. package/dist/Cross.mjs +14 -14
  109. package/dist/CustomDialog.cjs +25 -25
  110. package/dist/CustomDialog.css +25 -25
  111. package/dist/CustomDialog.mjs +25 -25
  112. package/dist/Dash.cjs +10 -10
  113. package/dist/Dash.css +6 -6
  114. package/dist/Dash.mjs +10 -10
  115. package/dist/Dialog.cjs +17 -17
  116. package/dist/Dialog.css +70 -70
  117. package/dist/Dialog.mjs +17 -17
  118. package/dist/Disclosure.cjs +129 -129
  119. package/dist/Disclosure.css +104 -104
  120. package/dist/Disclosure.mjs +129 -129
  121. package/dist/Divider.cjs +25 -25
  122. package/dist/Divider.css +25 -25
  123. package/dist/Divider.mjs +25 -25
  124. package/dist/DropZone.cjs +58 -58
  125. package/dist/DropZone.css +54 -54
  126. package/dist/DropZone.mjs +58 -58
  127. package/dist/Field.cjs +340 -340
  128. package/dist/Field.cjs.map +1 -1
  129. package/dist/Field.css +144 -144
  130. package/dist/Field.mjs +340 -340
  131. package/dist/Field.mjs.map +1 -1
  132. package/dist/Form.cjs +9 -9
  133. package/dist/Form.css +9 -9
  134. package/dist/Form.mjs +9 -9
  135. package/dist/FullscreenDialog.cjs +5 -5
  136. package/dist/FullscreenDialog.css +79 -79
  137. package/dist/FullscreenDialog.mjs +5 -5
  138. package/dist/IllustratedMessage.cjs +219 -219
  139. package/dist/IllustratedMessage.css +74 -74
  140. package/dist/IllustratedMessage.mjs +219 -219
  141. package/dist/Image.cjs +14 -14
  142. package/dist/Image.cjs.map +1 -1
  143. package/dist/Image.css +14 -14
  144. package/dist/Image.css.map +1 -1
  145. package/dist/Image.mjs +14 -14
  146. package/dist/Image.mjs.map +1 -1
  147. package/dist/InlineAlert.cjs +108 -108
  148. package/dist/InlineAlert.css +90 -90
  149. package/dist/InlineAlert.mjs +108 -108
  150. package/dist/Link.cjs +49 -49
  151. package/dist/Link.css +41 -41
  152. package/dist/Link.mjs +49 -49
  153. package/dist/LinkOut.cjs +8 -8
  154. package/dist/LinkOut.css +8 -8
  155. package/dist/LinkOut.mjs +8 -8
  156. package/dist/Menu.cjs +422 -422
  157. package/dist/Menu.css +180 -180
  158. package/dist/Menu.mjs +422 -422
  159. package/dist/Meter.cjs +153 -153
  160. package/dist/Meter.css +95 -95
  161. package/dist/Meter.mjs +153 -153
  162. package/dist/Modal.cjs +58 -58
  163. package/dist/Modal.css +50 -50
  164. package/dist/Modal.mjs +58 -58
  165. package/dist/NotificationBadge.cjs +56 -56
  166. package/dist/NotificationBadge.css +51 -51
  167. package/dist/NotificationBadge.mjs +56 -56
  168. package/dist/NumberField.cjs +114 -118
  169. package/dist/NumberField.cjs.map +1 -1
  170. package/dist/NumberField.css +103 -103
  171. package/dist/NumberField.css.map +1 -1
  172. package/dist/NumberField.mjs +115 -119
  173. package/dist/NumberField.mjs.map +1 -1
  174. package/dist/Picker.cjs +273 -271
  175. package/dist/Picker.cjs.map +1 -1
  176. package/dist/Picker.css +169 -169
  177. package/dist/Picker.css.map +1 -1
  178. package/dist/Picker.mjs +273 -271
  179. package/dist/Picker.mjs.map +1 -1
  180. package/dist/Popover.cjs +85 -85
  181. package/dist/Popover.css +66 -66
  182. package/dist/Popover.mjs +85 -85
  183. package/dist/ProgressBar.cjs +163 -163
  184. package/dist/ProgressBar.css +103 -103
  185. package/dist/ProgressBar.mjs +163 -163
  186. package/dist/ProgressCircle.cjs +17 -17
  187. package/dist/ProgressCircle.css +17 -17
  188. package/dist/ProgressCircle.mjs +17 -17
  189. package/dist/Provider.cjs +10 -10
  190. package/dist/Provider.css +9 -9
  191. package/dist/Provider.mjs +10 -10
  192. package/dist/Radio.cjs +144 -144
  193. package/dist/Radio.css +81 -81
  194. package/dist/Radio.mjs +144 -144
  195. package/dist/RadioGroup.cjs +41 -41
  196. package/dist/RadioGroup.css +41 -41
  197. package/dist/RadioGroup.mjs +41 -41
  198. package/dist/SearchField.cjs +41 -41
  199. package/dist/SearchField.css +49 -49
  200. package/dist/SearchField.mjs +41 -41
  201. package/dist/SegmentedControl.cjs +171 -171
  202. package/dist/SegmentedControl.css +120 -120
  203. package/dist/SegmentedControl.mjs +171 -171
  204. package/dist/Slider.cjs +288 -288
  205. package/dist/Slider.css +152 -152
  206. package/dist/Slider.mjs +288 -288
  207. package/dist/StatusLight.cjs +115 -115
  208. package/dist/StatusLight.css +63 -63
  209. package/dist/StatusLight.mjs +115 -115
  210. package/dist/Switch.cjs +152 -152
  211. package/dist/Switch.css +76 -76
  212. package/dist/Switch.mjs +152 -152
  213. package/dist/TableView.cjs +310 -310
  214. package/dist/TableView.css +172 -172
  215. package/dist/TableView.mjs +310 -310
  216. package/dist/Tabs.cjs +113 -110
  217. package/dist/Tabs.cjs.map +1 -1
  218. package/dist/Tabs.css +92 -92
  219. package/dist/Tabs.css.map +1 -1
  220. package/dist/Tabs.mjs +113 -110
  221. package/dist/Tabs.mjs.map +1 -1
  222. package/dist/TabsPicker.cjs +123 -123
  223. package/dist/TabsPicker.css +112 -112
  224. package/dist/TabsPicker.mjs +123 -123
  225. package/dist/TagGroup.cjs +202 -202
  226. package/dist/TagGroup.cjs.map +1 -1
  227. package/dist/TagGroup.css +147 -147
  228. package/dist/TagGroup.css.map +1 -1
  229. package/dist/TagGroup.mjs +202 -202
  230. package/dist/TagGroup.mjs.map +1 -1
  231. package/dist/TextField.cjs +57 -57
  232. package/dist/TextField.css +57 -57
  233. package/dist/TextField.mjs +57 -57
  234. package/dist/Toast.cjs +118 -118
  235. package/dist/Toast.css +105 -105
  236. package/dist/Toast.mjs +118 -118
  237. package/dist/ToggleButton.cjs +3 -3
  238. package/dist/ToggleButton.css +12 -12
  239. package/dist/ToggleButton.mjs +3 -3
  240. package/dist/Tooltip.cjs +81 -81
  241. package/dist/Tooltip.css +68 -68
  242. package/dist/Tooltip.mjs +81 -81
  243. package/dist/TreeView.cjs +143 -149
  244. package/dist/TreeView.cjs.map +1 -1
  245. package/dist/TreeView.css +143 -143
  246. package/dist/TreeView.css.map +1 -1
  247. package/dist/TreeView.mjs +143 -149
  248. package/dist/TreeView.mjs.map +1 -1
  249. package/dist/types.d.ts +2 -2
  250. package/dist/types.d.ts.map +1 -1
  251. package/icons/Icon.cjs +10 -10
  252. package/icons/Icon.css +9 -9
  253. package/icons/Icon.mjs +10 -10
  254. package/icons/Skeleton.cjs +4 -3
  255. package/icons/Skeleton.cjs.map +1 -1
  256. package/icons/Skeleton.css +6 -6
  257. package/icons/Skeleton.css.map +1 -1
  258. package/icons/Skeleton.mjs +4 -3
  259. package/icons/Skeleton.mjs.map +1 -1
  260. package/package.json +45 -26
  261. package/src/ActionButton.tsx +1 -1
  262. package/src/Button.tsx +3 -3
  263. package/src/ComboBox.tsx +3 -2
  264. package/src/ContextualHelp.tsx +2 -2
  265. package/src/Image.tsx +1 -1
  266. package/src/NumberField.tsx +0 -2
  267. package/src/Picker.tsx +3 -2
  268. package/src/Skeleton.tsx +2 -1
  269. package/src/Tabs.tsx +7 -5
  270. package/src/TagGroup.tsx +1 -1
  271. package/src/TreeView.tsx +1 -6
  272. package/style/__tests__/style-macro.test.js +56 -56
@@ -36,300 +36,300 @@ const $4950413ac998f607$var$illustratedMessage = function anonymous(props, overr
36
36
  if (p[1] === "L") maxWidth = true;
37
37
  rules += p[0];
38
38
  }
39
- rules += ' se9';
39
+ rules += ' se91';
40
40
  if (props.size === "XL") {
41
- rules += ' ug9';
42
- rules += ' uch9';
43
- rules += ' udi9';
44
- rules += ' uea9';
45
- rules += ' ugb9';
46
- rules += ' uhd9';
47
- rules += ' uje9';
48
- rules += ' uic9';
41
+ rules += ' ug91';
42
+ rules += ' uch91';
43
+ rules += ' udi91';
44
+ rules += ' uea91';
45
+ rules += ' ugb91';
46
+ rules += ' uhd91';
47
+ rules += ' uje91';
48
+ rules += ' uic91';
49
49
  } else if (props.size === "L") {
50
- rules += ' ug9';
51
- rules += ' uch9';
52
- rules += ' udi9';
53
- rules += ' uea9';
54
- rules += ' ugb9';
55
- rules += ' uhd9';
56
- rules += ' uje9';
57
- rules += ' uic9';
50
+ rules += ' ug91';
51
+ rules += ' uch91';
52
+ rules += ' udi91';
53
+ rules += ' uea91';
54
+ rules += ' ugb91';
55
+ rules += ' uhd91';
56
+ rules += ' uje91';
57
+ rules += ' uic91';
58
58
  } else if (props.size === "S") {
59
- rules += ' ug9';
60
- rules += ' uch9';
61
- rules += ' udi9';
62
- rules += ' uea9';
63
- rules += ' ugb9';
64
- rules += ' uhd9';
65
- rules += ' uje9';
66
- rules += ' uic9';
59
+ rules += ' ug91';
60
+ rules += ' uch91';
61
+ rules += ' udi91';
62
+ rules += ' uea91';
63
+ rules += ' ugb91';
64
+ rules += ' uhd91';
65
+ rules += ' uje91';
66
+ rules += ' uic91';
67
67
  } else if (props.size === "XS") {
68
- rules += ' ug9';
69
- rules += ' uch9';
70
- rules += ' udi9';
71
- rules += ' uea9';
72
- rules += ' ugb9';
73
- rules += ' uhd9';
74
- rules += ' uje9';
75
- rules += ' uic9';
68
+ rules += ' ug91';
69
+ rules += ' uch91';
70
+ rules += ' udi91';
71
+ rules += ' uea91';
72
+ rules += ' ugb91';
73
+ rules += ' uhd91';
74
+ rules += ' uje91';
75
+ rules += ' uic91';
76
76
  } else {
77
- rules += ' ug9';
78
- rules += ' uch9';
79
- rules += ' udi9';
80
- rules += ' uea9';
81
- rules += ' ugb9';
82
- rules += ' uhd9';
83
- rules += ' uje9';
84
- rules += ' uic9';
77
+ rules += ' ug91';
78
+ rules += ' uch91';
79
+ rules += ' udi91';
80
+ rules += ' uea91';
81
+ rules += ' ugb91';
82
+ rules += ' uhd91';
83
+ rules += ' uje91';
84
+ rules += ' uic91';
85
85
  }
86
86
  if (props.size === "XL") {
87
- rules += ' vg9';
88
- rules += ' vsj9';
87
+ rules += ' vg91';
88
+ rules += ' vsj91';
89
89
  } else if (props.size === "L") {
90
- rules += ' vp9';
91
- rules += ' vsh9';
90
+ rules += ' vp91';
91
+ rules += ' vsh91';
92
92
  } else if (props.size === "S") {
93
- rules += ' vb9';
94
- rules += ' vse9';
93
+ rules += ' vb91';
94
+ rules += ' vse91';
95
95
  } else if (props.size === "XS") {
96
- rules += ' va9';
97
- rules += ' vsc9';
96
+ rules += ' va91';
97
+ rules += ' vsc91';
98
98
  } else {
99
- rules += ' vd9';
100
- rules += ' vsf9';
99
+ rules += ' vd91';
100
+ rules += ' vsf91';
101
101
  }
102
102
  if (props.size === "XL") {
103
- rules += ' wb9';
104
- rules += ' xb9';
105
- rules += ' _xa9';
103
+ rules += ' wb91';
104
+ rules += ' xb91';
105
+ rules += ' _xa91';
106
106
  } else if (props.size === "L") {
107
- rules += ' wb9';
108
- rules += ' xb9';
109
- rules += ' _xa9';
107
+ rules += ' wb91';
108
+ rules += ' xb91';
109
+ rules += ' _xa91';
110
110
  } else if (props.size === "S") {
111
- rules += ' wb9';
112
- rules += ' xb9';
113
- rules += ' _xa9';
111
+ rules += ' wb91';
112
+ rules += ' xb91';
113
+ rules += ' _xa91';
114
114
  } else if (props.size === "XS") {
115
- rules += ' wb9';
116
- rules += ' xb9';
117
- rules += ' _xa9';
115
+ rules += ' wb91';
116
+ rules += ' xb91';
117
+ rules += ' _xa91';
118
118
  } else {
119
- rules += ' wb9';
120
- rules += ' xb9';
121
- rules += ' _xa9';
119
+ rules += ' wb91';
120
+ rules += ' xb91';
121
+ rules += ' _xa91';
122
122
  }
123
123
  if (props.size === "XL") {
124
- rules += ' _Fa9';
125
- rules += ' _Ffb9';
124
+ rules += ' _Fa91';
125
+ rules += ' _Ffb91';
126
126
  } else if (props.size === "L") {
127
- rules += ' _Fa9';
128
- rules += ' _Ffb9';
127
+ rules += ' _Fa91';
128
+ rules += ' _Ffb91';
129
129
  } else if (props.size === "S") {
130
- rules += ' _Fa9';
131
- rules += ' _Ffb9';
130
+ rules += ' _Fa91';
131
+ rules += ' _Ffb91';
132
132
  } else if (props.size === "XS") {
133
- rules += ' _Fa9';
134
- rules += ' _Ffb9';
133
+ rules += ' _Fa91';
134
+ rules += ' _Ffb91';
135
135
  } else {
136
- rules += ' _Fa9';
137
- rules += ' _Ffb9';
136
+ rules += ' _Fa91';
137
+ rules += ' _Ffb91';
138
138
  }
139
- if (props.size === "XL") rules += ' pt9';
140
- else if (props.size === "L") rules += ' pt9';
141
- else if (props.size === "S") rules += ' pt9';
142
- else if (props.size === "XS") rules += ' pt9';
143
- else rules += ' pt9';
139
+ if (props.size === "XL") rules += ' pt91';
140
+ else if (props.size === "L") rules += ' pt91';
141
+ else if (props.size === "S") rules += ' pt91';
142
+ else if (props.size === "XS") rules += ' pt91';
143
+ else rules += ' pt91';
144
144
  if (props.orientation === "horizontal") {
145
- if (!maxWidth) rules += ' Lj9';
145
+ if (!maxWidth) rules += ' Lj91';
146
146
  } else if (props.orientation === "vertical") {
147
- if (!maxWidth) rules += ' Li9';
147
+ if (!maxWidth) rules += ' Li91';
148
148
  }
149
- if (props.orientation === "horizontal") rules += ' CLJajOe9';
150
- else if (props.orientation === "vertical") rules += ' CPmblS9';
151
- if (props.orientation === "horizontal") rules += ' ECIGjJc9';
149
+ if (props.orientation === "horizontal") rules += ' CLJajOe91';
150
+ else if (props.orientation === "vertical") rules += ' CPmblS91';
151
+ if (props.orientation === "horizontal") rules += ' ECIGjJc91';
152
152
  else if (props.orientation === "vertical") {
153
- if (props.size === "L") rules += ' EbQCrs9';
154
- else rules += ' E4ICjXd9';
153
+ if (props.size === "L") rules += ' EbQCrs91';
154
+ else rules += ' E4ICjXd91';
155
155
  }
156
- if (props.orientation === "horizontal") rules += ' DpdPjR9';
157
- if (props.orientation === "horizontal") rules += ' _Dc9';
158
- else if (props.orientation === "vertical") rules += ' _Da9';
159
- if (props.orientation === "vertical") rules += ' _Wa9';
156
+ if (props.orientation === "horizontal") rules += ' DpdPjR91';
157
+ if (props.orientation === "horizontal") rules += ' _Dc91';
158
+ else if (props.orientation === "vertical") rules += ' _Da91';
159
+ if (props.orientation === "vertical") rules += ' _Wa91';
160
160
  return rules;
161
161
  };
162
162
  const $4950413ac998f607$var$illustration = function anonymous(props) {
163
163
  let rules = " ";
164
- rules += ' zTZ8xtd9';
165
- rules += ' yTZ8xtd9';
166
- rules += ' BTZ8xtd9';
167
- rules += ' ATZ8xtd9';
168
- rules += ' _dc9';
169
- if (props.isDropTarget) rules += ' -_8sjo0b-pu9';
170
- else rules += ' -_8sjo0b-pt9';
164
+ rules += ' zTZ8xtd91';
165
+ rules += ' yTZ8xtd91';
166
+ rules += ' BTZ8xtd91';
167
+ rules += ' ATZ8xtd91';
168
+ rules += ' _dc91';
169
+ if (props.isDropTarget) rules += ' -_8sjo0b-pu91';
170
+ else rules += ' -_8sjo0b-pt91';
171
171
  return rules;
172
172
  };
173
173
  const $4950413ac998f607$var$heading = function anonymous(props) {
174
174
  let rules = " ";
175
- rules += ' zPCJngb9';
176
- rules += ' yPCJngb9';
177
- rules += ' BPCJngb9';
178
- rules += ' APCJngb9';
175
+ rules += ' zPCJngb91';
176
+ rules += ' yPCJngb91';
177
+ rules += ' BPCJngb91';
178
+ rules += ' APCJngb91';
179
179
  if (props.size === "L") {
180
- rules += ' ug9';
181
- rules += ' uch9';
182
- rules += ' udi9';
183
- rules += ' uea9';
184
- rules += ' ugb9';
185
- rules += ' uhd9';
186
- rules += ' uje9';
187
- rules += ' uic9';
180
+ rules += ' ug91';
181
+ rules += ' uch91';
182
+ rules += ' udi91';
183
+ rules += ' uea91';
184
+ rules += ' ugb91';
185
+ rules += ' uhd91';
186
+ rules += ' uje91';
187
+ rules += ' uic91';
188
188
  } else if (props.size === "M") {
189
- rules += ' ug9';
190
- rules += ' uch9';
191
- rules += ' udi9';
192
- rules += ' uea9';
193
- rules += ' ugb9';
194
- rules += ' uhd9';
195
- rules += ' uje9';
196
- rules += ' uic9';
189
+ rules += ' ug91';
190
+ rules += ' uch91';
191
+ rules += ' udi91';
192
+ rules += ' uea91';
193
+ rules += ' ugb91';
194
+ rules += ' uhd91';
195
+ rules += ' uje91';
196
+ rules += ' uic91';
197
197
  } else if (props.size === "S") {
198
- rules += ' ug9';
199
- rules += ' uch9';
200
- rules += ' udi9';
201
- rules += ' uea9';
202
- rules += ' ugb9';
203
- rules += ' uhd9';
204
- rules += ' uje9';
205
- rules += ' uic9';
198
+ rules += ' ug91';
199
+ rules += ' uch91';
200
+ rules += ' udi91';
201
+ rules += ' uea91';
202
+ rules += ' ugb91';
203
+ rules += ' uhd91';
204
+ rules += ' uje91';
205
+ rules += ' uic91';
206
206
  }
207
207
  if (props.size === "L") {
208
- rules += ' vj9';
209
- rules += ' vsm9';
208
+ rules += ' vj91';
209
+ rules += ' vsm91';
210
210
  } else if (props.size === "M") {
211
- rules += ' vi9';
212
- rules += ' vsl9';
211
+ rules += ' vi91';
212
+ rules += ' vsl91';
213
213
  } else if (props.size === "S") {
214
- rules += ' vp9';
215
- rules += ' vsh9';
214
+ rules += ' vp91';
215
+ rules += ' vsh91';
216
216
  }
217
217
  if (props.size === "L") {
218
- rules += ' wd9';
219
- rules += ' xd9';
220
- rules += ' _xa9';
221
- rules += ' wfd9';
222
- rules += ' xfd9';
223
- rules += ' _xfa9';
218
+ rules += ' wd91';
219
+ rules += ' xd91';
220
+ rules += ' _xa91';
221
+ rules += ' wfd91';
222
+ rules += ' xfd91';
223
+ rules += ' _xfa91';
224
224
  } else if (props.size === "M") {
225
- rules += ' wd9';
226
- rules += ' xd9';
227
- rules += ' _xa9';
228
- rules += ' wfd9';
229
- rules += ' xfd9';
230
- rules += ' _xfa9';
225
+ rules += ' wd91';
226
+ rules += ' xd91';
227
+ rules += ' _xa91';
228
+ rules += ' wfd91';
229
+ rules += ' xfd91';
230
+ rules += ' _xfa91';
231
231
  } else if (props.size === "S") {
232
- rules += ' wd9';
233
- rules += ' xd9';
234
- rules += ' _xa9';
235
- rules += ' wfd9';
236
- rules += ' xfd9';
237
- rules += ' _xfa9';
232
+ rules += ' wd91';
233
+ rules += ' xd91';
234
+ rules += ' _xa91';
235
+ rules += ' wfd91';
236
+ rules += ' xfd91';
237
+ rules += ' _xfa91';
238
238
  }
239
239
  if (props.size === "L") {
240
- rules += ' _Fa9';
241
- rules += ' _Ffb9';
240
+ rules += ' _Fa91';
241
+ rules += ' _Ffb91';
242
242
  } else if (props.size === "M") {
243
- rules += ' _Fa9';
244
- rules += ' _Ffb9';
243
+ rules += ' _Fa91';
244
+ rules += ' _Ffb91';
245
245
  } else if (props.size === "S") {
246
- rules += ' _Fa9';
247
- rules += ' _Ffb9';
246
+ rules += ' _Fa91';
247
+ rules += ' _Ffb91';
248
248
  }
249
- if (props.size === "L") rules += ' po9';
250
- else if (props.size === "M") rules += ' po9';
251
- else if (props.size === "S") rules += ' po9';
252
- rules += ' _dd9';
253
- rules += ' Jy9';
254
- rules += ' Gy9';
255
- rules += ' Iy9';
256
- rules += ' Hy9';
249
+ if (props.size === "L") rules += ' po91';
250
+ else if (props.size === "M") rules += ' po91';
251
+ else if (props.size === "S") rules += ' po91';
252
+ rules += ' _dd91';
253
+ rules += ' Jy91';
254
+ rules += ' Gy91';
255
+ rules += ' Iy91';
256
+ rules += ' Hy91';
257
257
  return rules;
258
258
  };
259
259
  const $4950413ac998f607$var$content = function anonymous(props) {
260
260
  let rules = " ";
261
261
  if (props.size === "L") {
262
- rules += ' ug9';
263
- rules += ' uch9';
264
- rules += ' udi9';
265
- rules += ' uea9';
266
- rules += ' ugb9';
267
- rules += ' uhd9';
268
- rules += ' uje9';
269
- rules += ' uic9';
262
+ rules += ' ug91';
263
+ rules += ' uch91';
264
+ rules += ' udi91';
265
+ rules += ' uea91';
266
+ rules += ' ugb91';
267
+ rules += ' uhd91';
268
+ rules += ' uje91';
269
+ rules += ' uic91';
270
270
  } else if (props.size === "M") {
271
- rules += ' ug9';
272
- rules += ' uch9';
273
- rules += ' udi9';
274
- rules += ' uea9';
275
- rules += ' ugb9';
276
- rules += ' uhd9';
277
- rules += ' uje9';
278
- rules += ' uic9';
271
+ rules += ' ug91';
272
+ rules += ' uch91';
273
+ rules += ' udi91';
274
+ rules += ' uea91';
275
+ rules += ' ugb91';
276
+ rules += ' uhd91';
277
+ rules += ' uje91';
278
+ rules += ' uic91';
279
279
  } else if (props.size === "S") {
280
- rules += ' ug9';
281
- rules += ' uch9';
282
- rules += ' udi9';
283
- rules += ' uea9';
284
- rules += ' ugb9';
285
- rules += ' uhd9';
286
- rules += ' uje9';
287
- rules += ' uic9';
280
+ rules += ' ug91';
281
+ rules += ' uch91';
282
+ rules += ' udi91';
283
+ rules += ' uea91';
284
+ rules += ' ugb91';
285
+ rules += ' uhd91';
286
+ rules += ' uje91';
287
+ rules += ' uic91';
288
288
  }
289
289
  if (props.size === "L") {
290
- rules += ' vd9';
291
- rules += ' vsf9';
290
+ rules += ' vd91';
291
+ rules += ' vsf91';
292
292
  } else if (props.size === "M") {
293
- rules += ' vd9';
294
- rules += ' vsf9';
293
+ rules += ' vd91';
294
+ rules += ' vsf91';
295
295
  } else if (props.size === "S") {
296
- rules += ' vb9';
297
- rules += ' vse9';
296
+ rules += ' vb91';
297
+ rules += ' vse91';
298
298
  }
299
299
  if (props.size === "L") {
300
- rules += ' wb9';
301
- rules += ' xb9';
302
- rules += ' _xa9';
300
+ rules += ' wb91';
301
+ rules += ' xb91';
302
+ rules += ' _xa91';
303
303
  } else if (props.size === "M") {
304
- rules += ' wb9';
305
- rules += ' xb9';
306
- rules += ' _xa9';
304
+ rules += ' wb91';
305
+ rules += ' xb91';
306
+ rules += ' _xa91';
307
307
  } else if (props.size === "S") {
308
- rules += ' wb9';
309
- rules += ' xb9';
310
- rules += ' _xa9';
308
+ rules += ' wb91';
309
+ rules += ' xb91';
310
+ rules += ' _xa91';
311
311
  }
312
312
  if (props.size === "L") {
313
- rules += ' _Fb9';
314
- rules += ' _Ffc9';
313
+ rules += ' _Fb91';
314
+ rules += ' _Ffc91';
315
315
  } else if (props.size === "M") {
316
- rules += ' _Fb9';
317
- rules += ' _Ffc9';
316
+ rules += ' _Fb91';
317
+ rules += ' _Ffc91';
318
318
  } else if (props.size === "S") {
319
- rules += ' _Fb9';
320
- rules += ' _Ffc9';
319
+ rules += ' _Fb91';
320
+ rules += ' _Ffc91';
321
321
  }
322
- if (props.size === "L") rules += ' pt9';
323
- else if (props.size === "M") rules += ' pt9';
324
- else if (props.size === "S") rules += ' pt9';
325
- rules += ' zk52g2d9';
326
- rules += ' yk52g2d9';
327
- rules += ' Bk52g2d9';
328
- rules += ' Ak52g2d9';
329
- rules += ' _de9';
322
+ if (props.size === "L") rules += ' pt91';
323
+ else if (props.size === "M") rules += ' pt91';
324
+ else if (props.size === "S") rules += ' pt91';
325
+ rules += ' zk52g2d91';
326
+ rules += ' yk52g2d91';
327
+ rules += ' Bk52g2d91';
328
+ rules += ' Ak52g2d91';
329
+ rules += ' _de91';
330
330
  return rules;
331
331
  };
332
- const $4950413ac998f607$var$buttonGroup = " zmlKpq9 ymlKpq9 BmlKpq9 AmlKpq9 JC9";
332
+ const $4950413ac998f607$var$buttonGroup = " zmlKpq91 ymlKpq91 BmlKpq91 AmlKpq91 JC91";
333
333
  const $4950413ac998f607$export$d661ef89ad42d682 = /*#__PURE__*/ (0, $3JmRZ$createContext)(null);
334
334
  const $4950413ac998f607$export$406dbc84c317ece0 = /*#__PURE__*/ (0, $3JmRZ$forwardRef)(function IllustratedMessage(props, ref) {
335
335
  [props, ref] = (0, $5ce63c423902f47d$export$764f6146fadd77f7)(props, ref, $4950413ac998f607$export$d661ef89ad42d682);
package/dist/Image.cjs CHANGED
@@ -55,21 +55,21 @@ function $053b76ed3d29e13b$var$reducer(state, action) {
55
55
  return state;
56
56
  }
57
57
  }
58
- const $053b76ed3d29e13b$var$wrapperStyles = " gH9 _Nc9 Pc9";
58
+ const $053b76ed3d29e13b$var$wrapperStyles = " gH91 _Nc91 Pc91";
59
59
  const $053b76ed3d29e13b$var$imgStyles = function anonymous(props) {
60
60
  let rules = " ";
61
- rules += ' sb9';
62
- rules += ' Za9';
63
- rules += ' Fb9';
64
- rules += ' _H40ub4c9';
65
- rules += ' __D40ub4c9';
66
- if (props.isRevealed) rules += ' _Ib9';
67
- else rules += ' _Ia9';
68
- if (props.isTransitioning) rules += ' Yf9';
69
- else rules += ' Ye9';
70
- rules += ' Xe9';
71
- if (props.isTransitioning) rules += ' _2b9';
72
- else rules += ' _2b9';
61
+ rules += ' sb91';
62
+ rules += ' Za91';
63
+ rules += ' Fb91';
64
+ rules += ' _H40ub4c91';
65
+ rules += ' __D40ub4c91';
66
+ if (props.isRevealed) rules += ' _Ib91';
67
+ else rules += ' _Ia91';
68
+ if (props.isTransitioning) rules += ' Yf91';
69
+ else rules += ' Ye91';
70
+ rules += ' Xe91';
71
+ if (props.isTransitioning) rules += ' _2b91';
72
+ else rules += ' _2b91';
73
73
  return rules;
74
74
  };
75
75
  const $053b76ed3d29e13b$export$3e431a229df88919 = /*#__PURE__*/ (0, $kwMay$react.forwardRef)(function Image(props, domRef) {
@@ -143,7 +143,7 @@ const $053b76ed3d29e13b$export$3e431a229df88919 = /*#__PURE__*/ (0, $kwMay$react
143
143
  errorState,
144
144
  !errorState && /*#__PURE__*/ (0, $kwMay$reactjsxruntime.jsx)("img", {
145
145
  ...$053b76ed3d29e13b$var$getFetchPriorityProp(fetchPriority),
146
- src: src,
146
+ src: src || undefined,
147
147
  alt: alt,
148
148
  crossOrigin: crossOrigin,
149
149
  decoding: decoding,
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n /** The URL of the image. */\n src?: string,\n // TODO\n // srcSet?: string,\n // sizes?: string,\n /** Accessible alt text for the image. */\n alt?: string,\n /**\n * Indicates if the fetching of the image must be done using a CORS request.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n */\n crossOrigin?: 'anonymous' | 'use-credentials',\n /**\n * Whether the browser should decode images synchronously or asynchronously.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n */\n decoding?: 'async' | 'auto' | 'sync',\n /**\n * Provides a hint of the relative priority to use when fetching the image.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n */\n fetchPriority?: 'high' | 'low' | 'auto',\n /**\n * Whether the image should be loaded immediately or lazily when scrolled into view.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n */\n loading?: 'eager' | 'lazy',\n /**\n * A string indicating which referrer to use when fetching the resource.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n */\n referrerPolicy?: HTMLAttributeReferrerPolicy,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StyleString,\n /** A function that is called to render a fallback when the image fails to load. */\n renderError?: () => ReactNode,\n /**\n * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n * If not provided, the default image group is used.\n */\n group?: ImageGroup\n}\n\ninterface ImageContextValue extends ImageProps {\n hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n state: ImageState,\n src: string,\n startTime: number,\n loadTime: number\n}\n\ntype Action = \n | {type: 'update', src: string}\n | {type: 'loaded'}\n | {type: 'revealed'}\n | {type: 'error'};\n\nfunction createState(src: string): State {\n return {\n state: 'loading',\n src,\n startTime: Date.now(),\n loadTime: 0\n };\n}\n\nfunction reducer(state: State, action: Action): State {\n switch (action.type) {\n case 'update': {\n return {\n state: 'loading',\n src: action.src,\n startTime: Date.now(),\n loadTime: 0\n };\n }\n case 'loaded':\n case 'error': {\n return {\n ...state,\n state: action.type\n };\n }\n case 'revealed': {\n return {\n ...state,\n state: 'revealed',\n loadTime: Date.now() - state.startTime\n };\n }\n default:\n return state;\n }\n}\n\nconst wrapperStyles = style({\n backgroundColor: 'gray-100',\n overflow: 'hidden'\n});\n\nconst imgStyles = style({\n display: 'block',\n width: 'full',\n height: 'full',\n objectFit: 'inherit',\n objectPosition: 'inherit',\n opacity: {\n default: 0,\n isRevealed: 1\n },\n transition: {\n default: 'none',\n isTransitioning: 'opacity'\n },\n transitionDuration: 500\n});\n\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n let {\n src = '',\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n renderError,\n group = DefaultImageGroup,\n // TODO\n // srcSet,\n // sizes,\n alt,\n crossOrigin,\n decoding,\n fetchPriority,\n loading,\n referrerPolicy,\n slot\n } = props;\n let hidden = (props as ImageContextValue).hidden;\n \n let {revealAll, register, unregister, load} = useContext(group);\n let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n if (src !== lastSrc && !hidden) {\n dispatch({type: 'update', src});\n }\n\n if (state === 'loaded' && revealAll && !hidden) {\n dispatch({type: 'revealed'});\n }\n\n let imgRef = useRef<HTMLImageElement | null>(null);\n useLayoutEffect(() => {\n if (hidden) {\n return;\n }\n\n register(src);\n return () => {\n unregister(src);\n };\n }, [hidden, register, unregister, src]);\n\n let onLoad = useCallback(() => {\n load(src);\n dispatch({type: 'loaded'});\n }, [load, src]);\n\n let onError = useCallback(() => {\n dispatch({type: 'error'});\n unregister(src);\n }, [unregister, src]);\n\n let isSkeleton = useIsSkeleton();\n let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n let animation = useLoadingAnimation(isAnimating);\n useLayoutEffect(() => {\n if (hidden) {\n return;\n }\n\n // If the image is already loaded, update state immediately instead of waiting for onLoad.\n if (state === 'loading' && imgRef.current?.complete) {\n // Queue a microtask so we don't hit React's update limit.\n // TODO: is this necessary?\n queueMicrotask(onLoad);\n }\n\n animation(domRef.current);\n });\n\n if (props.alt == null && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'The `alt` prop was not provided to an image. ' +\n 'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n 'is decorative or redundant with displayed text and should not be announced by screen readers.'\n );\n }\n\n let errorState = !isSkeleton && state === 'error' && renderError?.();\n let isRevealed = state === 'revealed' && !isSkeleton;\n let isTransitioning = isRevealed && loadTime > 200;\n return useMemo(() => hidden ? null : (\n <div\n ref={domRef}\n slot={slot || undefined}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' ' + (isAnimating ? loadingStyle : '')}>\n {errorState}\n {!errorState && (\n <img\n {...getFetchPriorityProp(fetchPriority)}\n src={src}\n alt={alt}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n ref={imgRef}\n onLoad={onLoad}\n onError={onError}\n className={imgStyles({isRevealed, isTransitioning})} />\n )}\n </div>\n ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n const pieces = version.split('.');\n const major = parseInt(pieces[0], 10);\n if (major >= 19) {\n return {fetchPriority};\n }\n return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.cjs.map"}
1
+ {"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n /** The URL of the image. */\n src?: string,\n // TODO\n // srcSet?: string,\n // sizes?: string,\n /** Accessible alt text for the image. */\n alt?: string,\n /**\n * Indicates if the fetching of the image must be done using a CORS request.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n */\n crossOrigin?: 'anonymous' | 'use-credentials',\n /**\n * Whether the browser should decode images synchronously or asynchronously.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n */\n decoding?: 'async' | 'auto' | 'sync',\n /**\n * Provides a hint of the relative priority to use when fetching the image.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n */\n fetchPriority?: 'high' | 'low' | 'auto',\n /**\n * Whether the image should be loaded immediately or lazily when scrolled into view.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n */\n loading?: 'eager' | 'lazy',\n /**\n * A string indicating which referrer to use when fetching the resource.\n * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n */\n referrerPolicy?: HTMLAttributeReferrerPolicy,\n /** Spectrum-defined styles, returned by the `style()` macro. */\n styles?: StyleString,\n /** A function that is called to render a fallback when the image fails to load. */\n renderError?: () => ReactNode,\n /**\n * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n * If not provided, the default image group is used.\n */\n group?: ImageGroup\n}\n\ninterface ImageContextValue extends ImageProps {\n hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n state: ImageState,\n src: string,\n startTime: number,\n loadTime: number\n}\n\ntype Action = \n | {type: 'update', src: string}\n | {type: 'loaded'}\n | {type: 'revealed'}\n | {type: 'error'};\n\nfunction createState(src: string): State {\n return {\n state: 'loading',\n src,\n startTime: Date.now(),\n loadTime: 0\n };\n}\n\nfunction reducer(state: State, action: Action): State {\n switch (action.type) {\n case 'update': {\n return {\n state: 'loading',\n src: action.src,\n startTime: Date.now(),\n loadTime: 0\n };\n }\n case 'loaded':\n case 'error': {\n return {\n ...state,\n state: action.type\n };\n }\n case 'revealed': {\n return {\n ...state,\n state: 'revealed',\n loadTime: Date.now() - state.startTime\n };\n }\n default:\n return state;\n }\n}\n\nconst wrapperStyles = style({\n backgroundColor: 'gray-100',\n overflow: 'hidden'\n});\n\nconst imgStyles = style({\n display: 'block',\n width: 'full',\n height: 'full',\n objectFit: 'inherit',\n objectPosition: 'inherit',\n opacity: {\n default: 0,\n isRevealed: 1\n },\n transition: {\n default: 'none',\n isTransitioning: 'opacity'\n },\n transitionDuration: 500\n});\n\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n let {\n src = '',\n styles,\n UNSAFE_className = '',\n UNSAFE_style,\n renderError,\n group = DefaultImageGroup,\n // TODO\n // srcSet,\n // sizes,\n alt,\n crossOrigin,\n decoding,\n fetchPriority,\n loading,\n referrerPolicy,\n slot\n } = props;\n let hidden = (props as ImageContextValue).hidden;\n \n let {revealAll, register, unregister, load} = useContext(group);\n let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n if (src !== lastSrc && !hidden) {\n dispatch({type: 'update', src});\n }\n\n if (state === 'loaded' && revealAll && !hidden) {\n dispatch({type: 'revealed'});\n }\n\n let imgRef = useRef<HTMLImageElement | null>(null);\n useLayoutEffect(() => {\n if (hidden) {\n return;\n }\n\n register(src);\n return () => {\n unregister(src);\n };\n }, [hidden, register, unregister, src]);\n\n let onLoad = useCallback(() => {\n load(src);\n dispatch({type: 'loaded'});\n }, [load, src]);\n\n let onError = useCallback(() => {\n dispatch({type: 'error'});\n unregister(src);\n }, [unregister, src]);\n\n let isSkeleton = useIsSkeleton();\n let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n let animation = useLoadingAnimation(isAnimating);\n useLayoutEffect(() => {\n if (hidden) {\n return;\n }\n\n // If the image is already loaded, update state immediately instead of waiting for onLoad.\n if (state === 'loading' && imgRef.current?.complete) {\n // Queue a microtask so we don't hit React's update limit.\n // TODO: is this necessary?\n queueMicrotask(onLoad);\n }\n\n animation(domRef.current);\n });\n\n if (props.alt == null && process.env.NODE_ENV !== 'production') {\n console.warn(\n 'The `alt` prop was not provided to an image. ' +\n 'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n 'is decorative or redundant with displayed text and should not be announced by screen readers.'\n );\n }\n\n let errorState = !isSkeleton && state === 'error' && renderError?.();\n let isRevealed = state === 'revealed' && !isSkeleton;\n let isTransitioning = isRevealed && loadTime > 200;\n return useMemo(() => hidden ? null : (\n <div\n ref={domRef}\n slot={slot || undefined}\n style={UNSAFE_style}\n className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' ' + (isAnimating ? loadingStyle : '')}>\n {errorState}\n {!errorState && (\n <img\n {...getFetchPriorityProp(fetchPriority)}\n src={src || undefined}\n alt={alt}\n crossOrigin={crossOrigin}\n decoding={decoding}\n loading={loading}\n referrerPolicy={referrerPolicy}\n ref={imgRef}\n onLoad={onLoad}\n onError={onError}\n className={imgStyles({isRevealed, isTransitioning})} />\n )}\n </div>\n ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n const pieces = version.split('.');\n const major = parseInt(pieces[0], 10);\n if (major >= 19) {\n return {fetchPriority};\n }\n return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.cjs.map"}