@sanity/ui 3.0.2 → 4.0.0-static.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 (868) hide show
  1. package/README.md +7 -9
  2. package/dist/_chunks-cjs/{refractor.js → refractor.cjs} +3 -4
  3. package/dist/_chunks-cjs/refractor.cjs.map +1 -0
  4. package/dist/_chunks-es/{refractor.mjs → refractor.js} +2 -3
  5. package/dist/_chunks-es/refractor.js.map +1 -0
  6. package/dist/css/index.cjs +966 -0
  7. package/dist/css/index.cjs.map +1 -0
  8. package/dist/css/index.css +1 -0
  9. package/dist/css/index.d.cts +1370 -0
  10. package/dist/css/index.d.ts +1370 -0
  11. package/dist/css/index.js +967 -0
  12. package/dist/css/index.js.map +1 -0
  13. package/dist/index.cjs +4515 -0
  14. package/dist/index.cjs.map +1 -0
  15. package/dist/index.d.cts +2521 -0
  16. package/dist/index.d.ts +1379 -1824
  17. package/dist/index.js +3872 -1066
  18. package/dist/index.js.map +1 -1
  19. package/dist/theme.cjs +870 -0
  20. package/dist/theme.cjs.map +1 -0
  21. package/dist/theme.d.cts +499 -0
  22. package/dist/theme.d.ts +375 -1376
  23. package/dist/theme.js +548 -3790
  24. package/dist/theme.js.map +1 -1
  25. package/exports/css.ts +1 -0
  26. package/package.json +77 -76
  27. package/src/core/Root.tsx +88 -0
  28. package/src/core/RootProvider.tsx +40 -0
  29. package/src/core/__workshop__/boundary.tsx +28 -0
  30. package/src/core/__workshop__/index.ts +16 -0
  31. package/src/core/components/autocomplete/__workshop__/async.tsx +7 -7
  32. package/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx +13 -19
  33. package/src/core/components/autocomplete/__workshop__/custom.tsx +19 -17
  34. package/src/core/components/autocomplete/__workshop__/example.tsx +16 -15
  35. package/src/core/components/autocomplete/__workshop__/focusAndBlur.tsx +6 -6
  36. package/src/core/components/autocomplete/__workshop__/fullscreen.tsx +58 -60
  37. package/src/core/components/autocomplete/__workshop__/index.ts +5 -3
  38. package/src/core/components/autocomplete/{__mocks__ → __workshop__/mock}/apiStore.ts +1 -1
  39. package/src/core/components/autocomplete/{__mocks__ → __workshop__/mock}/countries.ts +1 -1
  40. package/src/core/components/autocomplete/autocomplete.tsx +121 -160
  41. package/src/core/components/autocomplete/autocompleteOption.tsx +4 -4
  42. package/src/core/components/autocomplete/autocompleteReducer.ts +1 -1
  43. package/src/core/components/autocomplete/constants.ts +2 -2
  44. package/src/core/components/autocomplete/types.ts +4 -9
  45. package/src/core/components/breadcrumbs/__workshop__/example.tsx +3 -4
  46. package/src/core/components/breadcrumbs/__workshop__/index.ts +5 -3
  47. package/src/core/components/breadcrumbs/breadcrumbs.tsx +62 -30
  48. package/src/core/components/dialog/__workshop__/activate.tsx +17 -10
  49. package/src/core/components/dialog/__workshop__/autoFocus.tsx +3 -3
  50. package/src/core/components/dialog/__workshop__/index.ts +5 -3
  51. package/src/core/components/dialog/__workshop__/layering.tsx +1 -1
  52. package/src/core/components/dialog/__workshop__/nested.tsx +5 -6
  53. package/src/core/components/dialog/__workshop__/onScroll.tsx +17 -5
  54. package/src/core/components/dialog/__workshop__/panes.tsx +13 -6
  55. package/src/core/components/dialog/__workshop__/position.tsx +5 -5
  56. package/src/core/components/dialog/__workshop__/props.tsx +9 -7
  57. package/src/core/components/dialog/__workshop__/provider.tsx +1 -1
  58. package/src/core/components/dialog/__workshop__/wrapped.tsx +3 -3
  59. package/src/core/components/dialog/dialog.tsx +117 -319
  60. package/src/core/components/dialog/dialogCard.tsx +233 -0
  61. package/src/core/components/dialog/dialogContext.ts +8 -7
  62. package/src/core/components/dialog/dialogProvider.tsx +7 -8
  63. package/src/core/components/dialog/isTargetWithinScope.ts +14 -0
  64. package/src/core/{types/dialog.ts → components/dialog/types.ts} +1 -3
  65. package/src/core/components/dialog/useDialog.ts +1 -1
  66. package/src/core/components/hotkeys/__workshop__/index.ts +5 -3
  67. package/src/core/components/hotkeys/__workshop__/plain.tsx +1 -1
  68. package/src/core/components/hotkeys/hotkeys.tsx +42 -44
  69. package/src/core/components/menu/__workshop__/asComponent.tsx +7 -7
  70. package/src/core/components/menu/__workshop__/avatarMenu.tsx +13 -7
  71. package/src/core/components/menu/__workshop__/closableMenuButton.tsx +6 -5
  72. package/src/core/components/menu/__workshop__/constrainedInBoundary.tsx +4 -5
  73. package/src/core/components/menu/__workshop__/customMenuItem.tsx +4 -4
  74. package/src/core/components/menu/__workshop__/customSelectedState.tsx +2 -6
  75. package/src/core/components/menu/__workshop__/disableFocusOnClose.tsx +2 -2
  76. package/src/core/components/menu/__workshop__/groups.tsx +3 -3
  77. package/src/core/components/menu/__workshop__/index.ts +5 -3
  78. package/src/core/components/menu/__workshop__/menuButton.tsx +6 -6
  79. package/src/core/components/menu/__workshop__/menuGroupRight.tsx +2 -2
  80. package/src/core/components/menu/__workshop__/nestedMenu.tsx +2 -2
  81. package/src/core/components/menu/__workshop__/onCloseMenuButton.tsx +14 -5
  82. package/src/core/components/menu/__workshop__/selectedItem.tsx +3 -3
  83. package/src/core/components/menu/__workshop__/shouldFocus.tsx +2 -7
  84. package/src/core/components/menu/__workshop__/tones.tsx +6 -6
  85. package/src/core/components/menu/__workshop__/withoutArrow.tsx +2 -2
  86. package/src/core/components/menu/helpers.ts +1 -1
  87. package/src/core/components/menu/menu.test.tsx +18 -17
  88. package/src/core/components/menu/menu.tsx +48 -46
  89. package/src/core/components/menu/menuButton.tsx +40 -83
  90. package/src/core/components/menu/menuContext.ts +6 -16
  91. package/src/core/components/menu/menuDivider.tsx +32 -0
  92. package/src/core/components/menu/menuGroup.tsx +67 -51
  93. package/src/core/components/menu/menuItem.tsx +76 -72
  94. package/src/core/components/menu/useMenu.ts +1 -1
  95. package/src/core/components/menu/useMenuController.ts +17 -7
  96. package/src/core/components/tab/__workshop__/example.tsx +3 -3
  97. package/src/core/components/tab/__workshop__/index.ts +5 -3
  98. package/src/core/components/tab/tab.tsx +43 -35
  99. package/src/core/components/tab/tabList.tsx +53 -33
  100. package/src/core/components/tab/tabPanel.tsx +30 -22
  101. package/src/core/components/toast/__workshop__/hook.tsx +2 -2
  102. package/src/core/components/toast/__workshop__/index.ts +5 -3
  103. package/src/core/components/toast/__workshop__/toast.tsx +6 -6
  104. package/src/core/components/toast/toast.test.tsx +15 -13
  105. package/src/core/components/toast/toast.tsx +59 -66
  106. package/src/core/components/toast/toastContext.ts +5 -5
  107. package/src/core/components/toast/toastLayer.tsx +35 -32
  108. package/src/core/components/toast/toastProvider.tsx +20 -21
  109. package/src/core/components/toast/types.ts +6 -8
  110. package/src/core/components/toast/useToast.ts +2 -4
  111. package/src/core/components/tree/__workshop__/basic.perf.ts +2 -2
  112. package/src/core/components/tree/__workshop__/basic.tsx +2 -2
  113. package/src/core/components/tree/__workshop__/index.ts +5 -3
  114. package/src/core/components/tree/__workshop__/tabFromElement.tsx +2 -2
  115. package/src/core/components/tree/helpers.ts +1 -1
  116. package/src/core/components/tree/tree.tsx +198 -187
  117. package/src/core/components/tree/treeContext.ts +5 -5
  118. package/src/core/components/tree/treeGroup.tsx +28 -12
  119. package/src/core/components/tree/treeItem.tsx +90 -58
  120. package/src/core/components/tree/types.ts +4 -1
  121. package/src/core/components/tree/useTree.ts +1 -1
  122. package/src/core/{utils → components}/virtualList/__workshop__/changingProps.tsx +1 -1
  123. package/src/core/{utils → components}/virtualList/__workshop__/elementScroll.tsx +1 -1
  124. package/src/core/{utils → components}/virtualList/__workshop__/index.ts +6 -4
  125. package/src/core/{utils → components}/virtualList/__workshop__/infiniteList.tsx +2 -2
  126. package/src/core/{utils → components}/virtualList/__workshop__/windowScrolll.tsx +1 -1
  127. package/src/core/{utils → components}/virtualList/virtualList.tsx +96 -61
  128. package/src/core/constants.ts +4 -16
  129. package/src/core/helpers/focus.ts +0 -8
  130. package/src/core/helpers/props.ts +28 -0
  131. package/src/core/hooks/useClickOutsideEvent.test.tsx +4 -5
  132. package/src/core/hooks/useClickOutsideEvent.ts +3 -9
  133. package/src/core/hooks/useDelayed.test.ts +6 -7
  134. package/src/core/hooks/useDelayedState.ts +1 -1
  135. package/src/core/hooks/useElementSize.ts +1 -1
  136. package/src/core/hooks/useMatchMedia.ts +1 -1
  137. package/src/core/hooks/useMediaIndex/__workshop__/index.ts +5 -3
  138. package/src/core/hooks/useMediaIndex/__workshop__/test.tsx +2 -2
  139. package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx +3 -18
  140. package/src/core/hooks/useMediaIndex/useMediaIndex.ts +20 -15
  141. package/src/core/hooks/usePrefersDark.hydration.test.tsx +5 -5
  142. package/src/core/hooks/usePrefersDark.test.tsx +1 -0
  143. package/src/core/hooks/usePrefersDark.ts +1 -1
  144. package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx +5 -5
  145. package/src/core/hooks/usePrefersReducedMotion.test.tsx +1 -0
  146. package/src/core/hooks/usePrefersReducedMotion.ts +1 -1
  147. package/src/core/hooks/useResponsiveProp.ts +28 -0
  148. package/src/core/index.ts +114 -9
  149. package/src/core/lib/createGlobalScopedContext.ts +6 -3
  150. package/src/core/lib/globalScope.ts +1 -1
  151. package/src/core/lib/isArray.ts +3 -0
  152. package/src/core/middleware/origin.ts +1 -1
  153. package/src/core/observers/{elementSizeObserver.ts → elementSize.ts} +2 -2
  154. package/src/core/primitives/arrow/arrow.tsx +74 -0
  155. package/src/core/primitives/avatar/__workshop__/asButton.tsx +3 -3
  156. package/src/core/primitives/avatar/__workshop__/index.ts +5 -3
  157. package/src/core/primitives/avatar/__workshop__/stack.tsx +3 -3
  158. package/src/core/primitives/avatar/__workshop__/withinButton.tsx +7 -15
  159. package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx +28 -26
  160. package/src/core/primitives/avatar/avatar.tsx +77 -122
  161. package/src/core/primitives/avatar/avatarCounter.tsx +52 -77
  162. package/src/core/primitives/avatar/avatarStack.tsx +55 -77
  163. package/src/core/primitives/avatar/types.ts +2 -17
  164. package/src/core/primitives/badge/__workshop__/index.ts +5 -3
  165. package/src/core/primitives/badge/__workshop__/props.tsx +7 -18
  166. package/src/core/primitives/badge/__workshop__/tones.tsx +7 -12
  167. package/src/core/primitives/badge/badge.test.tsx +3 -3
  168. package/src/core/primitives/badge/badge.tsx +41 -42
  169. package/src/core/primitives/box/__workshop__/index.ts +5 -3
  170. package/src/core/primitives/box/__workshop__/props.tsx +3 -3
  171. package/src/core/primitives/box/__workshop__/responsive.tsx +3 -3
  172. package/src/core/primitives/box/box.tsx +188 -97
  173. package/src/core/primitives/button/__workshop__/custom.tsx +20 -44
  174. package/src/core/primitives/button/__workshop__/customIcons.tsx +4 -4
  175. package/src/core/primitives/button/__workshop__/disabled.tsx +41 -61
  176. package/src/core/primitives/button/__workshop__/index.ts +10 -3
  177. package/src/core/primitives/button/__workshop__/mixedChildren.tsx +1 -1
  178. package/src/core/primitives/button/__workshop__/props.tsx +20 -20
  179. package/src/core/primitives/button/__workshop__/sanityUploadButton.tsx +4 -4
  180. package/src/core/primitives/button/__workshop__/stacked.tsx +15 -15
  181. package/src/core/primitives/button/__workshop__/styled1.tsx +1 -1
  182. package/src/core/primitives/button/__workshop__/styled2.tsx +1 -1
  183. package/src/core/primitives/button/__workshop__/textOverflow.tsx +13 -0
  184. package/src/core/primitives/button/__workshop__/uploadButton.tsx +3 -2
  185. package/src/core/primitives/button/button.test.tsx +5 -19
  186. package/src/core/primitives/button/button.tsx +149 -143
  187. package/src/core/primitives/button/types.ts +2 -0
  188. package/src/core/primitives/card/__workshop__/asButton.tsx +15 -15
  189. package/src/core/primitives/card/__workshop__/asComponent.tsx +4 -4
  190. package/src/core/primitives/card/__workshop__/checkered.tsx +4 -4
  191. package/src/core/primitives/card/__workshop__/index.ts +6 -4
  192. package/src/core/primitives/card/__workshop__/interactive.tsx +4 -5
  193. package/src/core/primitives/card/__workshop__/listNavigation.tsx +6 -8
  194. package/src/core/primitives/card/__workshop__/props.tsx +14 -15
  195. package/src/core/primitives/card/__workshop__/selected.tsx +11 -43
  196. package/src/core/primitives/card/__workshop__/styled.tsx +1 -1
  197. package/src/core/primitives/card/__workshop__/tones.tsx +27 -0
  198. package/src/core/primitives/card/card.tsx +77 -84
  199. package/src/core/primitives/card/cardContext.ts +10 -0
  200. package/src/core/primitives/card/cardProvider.tsx +27 -0
  201. package/src/core/primitives/card/types.ts +15 -9
  202. package/src/core/primitives/card/useCard.ts +15 -0
  203. package/src/core/primitives/checkbox/__workshop__/example.tsx +1 -1
  204. package/src/core/primitives/checkbox/__workshop__/index.ts +5 -3
  205. package/src/core/primitives/checkbox/__workshop__/props.tsx +7 -5
  206. package/src/core/primitives/checkbox/__workshop__/readOnly.tsx +1 -1
  207. package/src/core/primitives/checkbox/__workshop__/tones.tsx +20 -21
  208. package/src/core/primitives/checkbox/checkbox.tsx +33 -26
  209. package/src/core/primitives/code/__workshop__/index.ts +5 -3
  210. package/src/core/primitives/code/__workshop__/opticalAlignment.tsx +18 -43
  211. package/src/core/primitives/code/__workshop__/props.tsx +5 -8
  212. package/src/core/primitives/code/code.tsx +33 -25
  213. package/src/core/primitives/code/refractor.tsx +2 -4
  214. package/src/core/primitives/container/__workshop__/example.tsx +3 -3
  215. package/src/core/primitives/container/__workshop__/index.ts +5 -3
  216. package/src/core/primitives/container/container.tsx +27 -31
  217. package/src/core/primitives/flex/__workshop__/example.tsx +3 -3
  218. package/src/core/primitives/flex/__workshop__/gap.tsx +7 -7
  219. package/src/core/primitives/flex/__workshop__/index.ts +5 -3
  220. package/src/core/primitives/flex/flex.tsx +43 -39
  221. package/src/core/primitives/grid/__workshop__/index.ts +5 -3
  222. package/src/core/primitives/grid/__workshop__/responsive.tsx +3 -3
  223. package/src/core/primitives/grid/grid.tsx +22 -35
  224. package/src/core/primitives/heading/__workshop__/index.ts +5 -3
  225. package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx +3 -3
  226. package/src/core/primitives/heading/__workshop__/plain.tsx +13 -16
  227. package/src/core/primitives/heading/heading.tsx +60 -62
  228. package/src/core/primitives/inline/__workshop__/index.ts +5 -3
  229. package/src/core/primitives/inline/__workshop__/plain.tsx +3 -6
  230. package/src/core/primitives/inline/inline.tsx +47 -32
  231. package/src/core/primitives/kbd/__workshop__/index.ts +5 -3
  232. package/src/core/primitives/kbd/__workshop__/plain.tsx +1 -1
  233. package/src/core/primitives/kbd/kbd.tsx +43 -47
  234. package/src/core/primitives/label/__workshop__/index.ts +5 -3
  235. package/src/core/primitives/label/__workshop__/opticalAlignment.tsx +14 -8
  236. package/src/core/primitives/label/__workshop__/plain.tsx +16 -12
  237. package/src/core/primitives/label/label.tsx +57 -61
  238. package/src/core/{utils → primitives}/layer/__workshop__/_debug.tsx +1 -1
  239. package/src/core/{utils → primitives}/layer/__workshop__/index.ts +6 -4
  240. package/src/core/{utils → primitives}/layer/__workshop__/multipleRoots.tsx +6 -6
  241. package/src/core/{utils → primitives}/layer/__workshop__/nested.tsx +4 -4
  242. package/src/core/primitives/layer/__workshop__/responsiveZOffset.tsx +17 -0
  243. package/src/core/{utils → primitives}/layer/getLayerContext.test.ts +3 -1
  244. package/src/core/{utils → primitives}/layer/getLayerContext.ts +1 -1
  245. package/src/core/{utils → primitives}/layer/layer.test.tsx +16 -14
  246. package/src/core/primitives/layer/layer.tsx +42 -0
  247. package/src/core/{utils/layer/layer.tsx → primitives/layer/layerCard.tsx} +40 -48
  248. package/src/core/primitives/layer/layerContext.ts +7 -0
  249. package/src/core/{utils → primitives}/layer/layerProvider.tsx +13 -17
  250. package/src/core/{utils → primitives}/layer/useLayer.ts +2 -4
  251. package/src/core/primitives/popover/__workshop__/AlignedStory.tsx +8 -8
  252. package/src/core/primitives/popover/__workshop__/MarginsStory.tsx +1 -1
  253. package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx +4 -4
  254. package/src/core/primitives/popover/__workshop__/OpenOnMountStory.tsx +2 -2
  255. package/src/core/primitives/popover/__workshop__/PlainStory.tsx +3 -3
  256. package/src/core/primitives/popover/__workshop__/RecursiveStory.tsx +4 -6
  257. package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx +20 -13
  258. package/src/core/primitives/popover/__workshop__/TestStory.tsx +10 -7
  259. package/src/core/primitives/popover/__workshop__/index.ts +5 -3
  260. package/src/core/primitives/popover/constants.ts +1 -1
  261. package/src/core/primitives/popover/floating-ui/size.ts +2 -2
  262. package/src/core/primitives/popover/helpers.ts +4 -3
  263. package/src/core/primitives/popover/popover.tsx +310 -351
  264. package/src/core/primitives/popover/popoverLayer.tsx +149 -0
  265. package/src/core/primitives/popover/types.ts +8 -2
  266. package/src/core/primitives/radio/__workshop__/example.tsx +4 -4
  267. package/src/core/primitives/radio/__workshop__/index.ts +5 -3
  268. package/src/core/primitives/radio/__workshop__/plain.tsx +4 -4
  269. package/src/core/primitives/radio/radio.tsx +36 -23
  270. package/src/core/primitives/select/__workshop__/index.ts +5 -3
  271. package/src/core/primitives/select/__workshop__/plain.tsx +18 -6
  272. package/src/core/primitives/select/__workshop__/readOnly.tsx +2 -2
  273. package/src/core/primitives/select/select.tsx +42 -54
  274. package/src/core/primitives/selectable/selectable.tsx +50 -0
  275. package/src/core/{components → primitives}/skeleton/__workshop__/delay.tsx +4 -4
  276. package/src/core/{components → primitives}/skeleton/__workshop__/index.ts +6 -4
  277. package/src/core/{components → primitives}/skeleton/__workshop__/skeleton.tsx +6 -6
  278. package/src/core/primitives/skeleton/codeSkeleton.tsx +49 -0
  279. package/src/core/primitives/skeleton/headingSkeleton.tsx +48 -0
  280. package/src/core/primitives/skeleton/labelSkeleton.tsx +47 -0
  281. package/src/core/primitives/skeleton/skeleton.tsx +70 -0
  282. package/src/core/primitives/skeleton/textSkeleton.tsx +49 -0
  283. package/src/core/primitives/spinner/__workshop__/Props.tsx +4 -4
  284. package/src/core/primitives/spinner/__workshop__/index.ts +5 -3
  285. package/src/core/primitives/spinner/animatedSpinnerIcon.tsx +14 -0
  286. package/src/core/primitives/spinner/spinner.tsx +31 -32
  287. package/src/core/primitives/srOnly/srOnly.tsx +33 -0
  288. package/src/core/primitives/stack/__workshop__/index.ts +5 -3
  289. package/src/core/primitives/stack/__workshop__/plain.tsx +3 -3
  290. package/src/core/primitives/stack/stack.tsx +46 -29
  291. package/src/core/primitives/switch/__workshop__/example.tsx +1 -1
  292. package/src/core/primitives/switch/__workshop__/index.ts +5 -3
  293. package/src/core/primitives/switch/__workshop__/props.tsx +1 -1
  294. package/src/core/primitives/switch/switch.tsx +50 -34
  295. package/src/core/primitives/text/__workshop__/colored.tsx +10 -17
  296. package/src/core/primitives/text/__workshop__/example.tsx +10 -21
  297. package/src/core/primitives/text/__workshop__/index.ts +5 -3
  298. package/src/core/primitives/text/__workshop__/opticalAlignment.tsx +18 -43
  299. package/src/core/primitives/text/text.tsx +59 -64
  300. package/src/core/primitives/textArea/__workshop__/index.ts +5 -3
  301. package/src/core/primitives/textArea/__workshop__/plain.tsx +45 -34
  302. package/src/core/primitives/textArea/textArea.tsx +49 -84
  303. package/src/core/primitives/textInput/__workshop__/clearButton.tsx +1 -1
  304. package/src/core/primitives/textInput/__workshop__/customValidity.tsx +3 -3
  305. package/src/core/primitives/textInput/__workshop__/index.ts +5 -3
  306. package/src/core/primitives/textInput/__workshop__/plain.tsx +36 -24
  307. package/src/core/primitives/textInput/__workshop__/readOnly.tsx +1 -1
  308. package/src/core/primitives/textInput/__workshop__/states.tsx +6 -6
  309. package/src/core/primitives/textInput/__workshop__/tones.tsx +3 -3
  310. package/src/core/primitives/textInput/__workshop__/typed.tsx +3 -3
  311. package/src/core/primitives/textInput/textInput.tsx +173 -304
  312. package/src/core/primitives/tooltip/__workshop__/customPortal.tsx +6 -6
  313. package/src/core/primitives/tooltip/__workshop__/index.ts +5 -3
  314. package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx +3 -3
  315. package/src/core/primitives/tooltip/__workshop__/props.tsx +14 -9
  316. package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx +2 -2
  317. package/src/core/primitives/tooltip/constants.ts +1 -1
  318. package/src/core/primitives/tooltip/tooltip.test.tsx +63 -63
  319. package/src/core/primitives/tooltip/tooltip.tsx +115 -98
  320. package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx +5 -3
  321. package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx +4 -6
  322. package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts +1 -1
  323. package/src/core/primitives/tooltip/tooltipLayer.tsx +106 -0
  324. package/src/core/types.ts +56 -0
  325. package/src/core/utils/boundaryElement/__workshop__/index.ts +5 -3
  326. package/src/core/utils/boundaryElement/__workshop__/plain.tsx +1 -1
  327. package/src/core/utils/boundaryElement/boundaryElement.test.tsx +15 -13
  328. package/src/core/utils/boundaryElement/boundaryElementContext.ts +8 -5
  329. package/src/core/utils/boundaryElement/boundaryElementProvider.tsx +5 -11
  330. package/src/core/utils/boundaryElement/types.ts +1 -3
  331. package/src/core/utils/boundaryElement/useBoundaryElement.ts +2 -4
  332. package/src/core/utils/elementQuery/__workshop__/customMedia.tsx +20 -9
  333. package/src/core/utils/elementQuery/__workshop__/index.ts +5 -3
  334. package/src/core/utils/elementQuery/elementQuery.tsx +42 -20
  335. package/src/core/utils/errorBoundary.tsx +8 -6
  336. package/src/core/utils/getElementRef.ts +4 -1
  337. package/src/core/utils/portal/__workshop__/index.ts +5 -3
  338. package/src/core/utils/portal/__workshop__/named.tsx +4 -4
  339. package/src/core/utils/portal/portal.test.tsx +15 -13
  340. package/src/core/utils/portal/portal.tsx +36 -0
  341. package/src/core/utils/portal/portalContext.ts +16 -10
  342. package/src/core/utils/portal/portalProvider.tsx +10 -19
  343. package/src/core/utils/portal/types.ts +1 -3
  344. package/src/core/utils/portal/usePortal.ts +2 -4
  345. package/src/css/_assign.ts +3 -0
  346. package/src/css/_composeClassNames.ts +12 -0
  347. package/src/css/_fromEntries.ts +3 -0
  348. package/src/css/_getClassNames.ts +9 -0
  349. package/src/css/_responsiveClassName.ts +45 -0
  350. package/src/css/_responsiveStyle.css.ts +34 -0
  351. package/src/css/_style.css.ts +9 -0
  352. package/src/css/components/breadcrumbs/breadcrumbs.css.ts +6 -0
  353. package/src/css/components/breadcrumbs/breadcrumbs.ts +7 -0
  354. package/src/css/components/dialog/dialog.css.ts +98 -0
  355. package/src/css/components/dialog/dialog.ts +58 -0
  356. package/src/css/components/menu/menu.css.ts +14 -0
  357. package/src/css/components/menu/menu.ts +12 -0
  358. package/src/css/components/skeleton/skeleton.css.ts +128 -0
  359. package/src/css/components/skeleton/skeleton.ts +38 -0
  360. package/src/css/components/skeleton/types.ts +36 -0
  361. package/src/css/components/toast/toast.css.ts +17 -0
  362. package/src/css/components/toast/toast.ts +11 -0
  363. package/src/css/components/tree/tree.css.ts +65 -0
  364. package/src/css/components/tree/tree.ts +7 -0
  365. package/src/css/constants.ts +10 -0
  366. package/src/css/getVarName.ts +27 -0
  367. package/src/css/index.ts +146 -0
  368. package/src/css/layers.css.ts +12 -0
  369. package/src/css/primitives/_arrow/_arrow.css.ts +68 -0
  370. package/src/css/primitives/_arrow/_arrow.ts +26 -0
  371. package/src/css/primitives/_input/_input.css.ts +261 -0
  372. package/src/css/primitives/_input/input.ts +29 -0
  373. package/src/css/primitives/_input/types.ts +13 -0
  374. package/src/css/primitives/avatar/avatar.css.ts +197 -0
  375. package/src/css/primitives/avatar/avatar.ts +68 -0
  376. package/src/css/primitives/avatar/types.ts +10 -0
  377. package/src/css/primitives/badge/badge.css.ts +27 -0
  378. package/src/css/primitives/badge/badge.ts +8 -0
  379. package/src/css/primitives/badge/types.ts +13 -0
  380. package/src/css/primitives/box/box.css.ts +19 -0
  381. package/src/css/primitives/box/box.ts +82 -0
  382. package/src/css/primitives/box/types.ts +75 -0
  383. package/src/css/primitives/button/button.css.ts +287 -0
  384. package/src/css/primitives/button/button.ts +26 -0
  385. package/src/css/primitives/button/types.ts +12 -0
  386. package/src/css/primitives/card/__workshop__/color.tsx +75 -0
  387. package/src/css/primitives/card/__workshop__/index.ts +16 -0
  388. package/src/css/primitives/card/card.css.ts +387 -0
  389. package/src/css/primitives/card/card.ts +13 -0
  390. package/src/css/primitives/card/types.ts +9 -0
  391. package/src/css/primitives/checkbox/checkbox.css.ts +193 -0
  392. package/src/css/primitives/checkbox/checkbox.ts +17 -0
  393. package/src/css/primitives/code/code.css.ts +272 -0
  394. package/src/css/primitives/code/code.ts +19 -0
  395. package/src/css/primitives/code/types.ts +11 -0
  396. package/src/css/primitives/container/container.css.ts +4 -0
  397. package/src/css/primitives/container/container.ts +17 -0
  398. package/src/css/primitives/container/types.ts +9 -0
  399. package/src/css/primitives/heading/heading.css.ts +86 -0
  400. package/src/css/primitives/heading/heading.ts +22 -0
  401. package/src/css/primitives/heading/types.ts +14 -0
  402. package/src/css/primitives/kbd/kbd.css.ts +16 -0
  403. package/src/css/primitives/kbd/kbd.ts +9 -0
  404. package/src/css/primitives/kbd/types.ts +6 -0
  405. package/src/css/primitives/label/label.css.ts +87 -0
  406. package/src/css/primitives/label/label.ts +22 -0
  407. package/src/css/primitives/label/types.ts +14 -0
  408. package/src/css/primitives/popover/popover.css.ts +6 -0
  409. package/src/css/primitives/popover/popover.ts +12 -0
  410. package/src/css/primitives/radio/radio.css.ts +78 -0
  411. package/src/css/primitives/radio/radio.ts +17 -0
  412. package/src/css/primitives/root/root.css.ts +19 -0
  413. package/src/css/primitives/root/root.ts +17 -0
  414. package/src/css/primitives/root/types.ts +10 -0
  415. package/src/css/primitives/select/select.css.ts +24 -0
  416. package/src/css/primitives/select/select.ts +14 -0
  417. package/src/css/primitives/select/types.ts +5 -0
  418. package/src/css/primitives/selectable/selectable.css.ts +131 -0
  419. package/src/css/primitives/selectable/selectable.ts +9 -0
  420. package/src/css/primitives/selectable/types.ts +9 -0
  421. package/src/css/primitives/spinner/spinner.css.ts +19 -0
  422. package/src/css/primitives/spinner/spinner.ts +13 -0
  423. package/src/css/primitives/spinner/types.ts +4 -0
  424. package/src/css/primitives/srOnly/srOnly.css.ts +10 -0
  425. package/src/css/primitives/srOnly/srOnly.ts +7 -0
  426. package/src/css/primitives/stack/stack.css.ts +6 -0
  427. package/src/css/primitives/stack/stack.ts +7 -0
  428. package/src/css/primitives/switch/switch.css.ts +98 -0
  429. package/src/css/primitives/switch/switch.ts +27 -0
  430. package/src/css/primitives/text/text.css.ts +86 -0
  431. package/src/css/primitives/text/text.ts +24 -0
  432. package/src/css/primitives/text/types.ts +18 -0
  433. package/src/css/primitives/textArea/textArea.css.ts +4 -0
  434. package/src/css/primitives/textArea/textArea.ts +9 -0
  435. package/src/css/primitives/textArea/types.ts +7 -0
  436. package/src/css/primitives/textInput/textInput.css.ts +43 -0
  437. package/src/css/primitives/textInput/textInput.ts +24 -0
  438. package/src/css/primitives/textInput/types.ts +7 -0
  439. package/src/css/primitives/tooltip/tooltip.css.ts +4 -0
  440. package/src/css/primitives/tooltip/tooltip.ts +8 -0
  441. package/src/css/primitives/tooltip/types.ts +4 -0
  442. package/src/css/props/alignItems/alignItems.css.ts +22 -0
  443. package/src/css/props/alignItems/alignItems.ts +8 -0
  444. package/src/css/props/alignItems/types.ts +9 -0
  445. package/src/css/props/border/border.css.ts +65 -0
  446. package/src/css/props/border/border.ts +21 -0
  447. package/src/css/props/border/types.ts +13 -0
  448. package/src/css/props/boxSizing/boxSizing.css.ts +12 -0
  449. package/src/css/props/boxSizing/boxSizing.ts +7 -0
  450. package/src/css/props/boxSizing/types.ts +7 -0
  451. package/src/css/props/display/display.css.ts +56 -0
  452. package/src/css/props/display/display.ts +8 -0
  453. package/src/css/props/display/types.ts +16 -0
  454. package/src/css/props/flex/flex.css.ts +52 -0
  455. package/src/css/props/flex/flex.ts +8 -0
  456. package/src/css/props/flex/types.ts +9 -0
  457. package/src/css/props/flexDirection/flexDirection.css.ts +19 -0
  458. package/src/css/props/flexDirection/flexDirection.ts +8 -0
  459. package/src/css/props/flexDirection/types.ts +9 -0
  460. package/src/css/props/flexWrap/flexWrap.css.ts +16 -0
  461. package/src/css/props/flexWrap/flexWrap.ts +8 -0
  462. package/src/css/props/flexWrap/types.ts +9 -0
  463. package/src/css/props/font/font.css.ts +94 -0
  464. package/src/css/props/font/font.ts +8 -0
  465. package/src/css/props/font/types.ts +6 -0
  466. package/src/css/props/gap/gap.css.ts +40 -0
  467. package/src/css/props/gap/gap.ts +13 -0
  468. package/src/css/props/gap/types.ts +10 -0
  469. package/src/css/props/gridAutoColumns/gridAutoColumns.css.ts +19 -0
  470. package/src/css/props/gridAutoColumns/gridAutoColumns.ts +8 -0
  471. package/src/css/props/gridAutoColumns/types.ts +9 -0
  472. package/src/css/props/gridAutoFlow/gridAutoFlow.css.ts +19 -0
  473. package/src/css/props/gridAutoFlow/gridAutoFlow.ts +8 -0
  474. package/src/css/props/gridAutoFlow/types.ts +9 -0
  475. package/src/css/props/gridAutoRows/gridAutoRows.css.ts +19 -0
  476. package/src/css/props/gridAutoRows/gridAutoRows.ts +8 -0
  477. package/src/css/props/gridAutoRows/types.ts +9 -0
  478. package/src/css/props/gridColumn/gridColumn.css.ts +49 -0
  479. package/src/css/props/gridColumn/gridColumn.ts +8 -0
  480. package/src/css/props/gridColumn/types.ts +9 -0
  481. package/src/css/props/gridColumnEnd/gridColumnEnd.css.ts +46 -0
  482. package/src/css/props/gridColumnEnd/gridColumnEnd.ts +8 -0
  483. package/src/css/props/gridColumnEnd/types.ts +9 -0
  484. package/src/css/props/gridColumnStart/gridColumnStart.css.ts +46 -0
  485. package/src/css/props/gridColumnStart/gridColumnStart.ts +8 -0
  486. package/src/css/props/gridColumnStart/types.ts +9 -0
  487. package/src/css/props/gridRow/gridRow.css.ts +49 -0
  488. package/src/css/props/gridRow/gridRow.ts +8 -0
  489. package/src/css/props/gridRow/types.ts +9 -0
  490. package/src/css/props/gridRowEnd/gridRowEnd.css.ts +46 -0
  491. package/src/css/props/gridRowEnd/gridRowEnd.ts +8 -0
  492. package/src/css/props/gridRowEnd/types.ts +9 -0
  493. package/src/css/props/gridRowStart/gridRowStart.css.ts +46 -0
  494. package/src/css/props/gridRowStart/gridRowStart.ts +8 -0
  495. package/src/css/props/gridRowStart/types.ts +9 -0
  496. package/src/css/props/gridTemplateColumns/gridTemplateColumns.css.ts +43 -0
  497. package/src/css/props/gridTemplateColumns/gridTemplateColumns.ts +8 -0
  498. package/src/css/props/gridTemplateColumns/types.ts +9 -0
  499. package/src/css/props/gridTemplateRows/gridTemplateRows.css.ts +43 -0
  500. package/src/css/props/gridTemplateRows/gridTemplateRows.ts +8 -0
  501. package/src/css/props/gridTemplateRows/types.ts +9 -0
  502. package/src/css/props/height/height.css.ts +25 -0
  503. package/src/css/props/height/height.ts +8 -0
  504. package/src/css/props/height/types.ts +9 -0
  505. package/src/css/props/inset/inset.css.ts +37 -0
  506. package/src/css/props/inset/inset.ts +21 -0
  507. package/src/css/props/inset/types.ts +13 -0
  508. package/src/css/props/justifyContent/justifyContent.css.ts +25 -0
  509. package/src/css/props/justifyContent/justifyContent.ts +8 -0
  510. package/src/css/props/justifyContent/types.ts +15 -0
  511. package/src/css/props/margin/margin.css.ts +117 -0
  512. package/src/css/props/margin/margin.ts +25 -0
  513. package/src/css/props/margin/types.ts +17 -0
  514. package/src/css/props/maxWidth/maxWidth.css.ts +32 -0
  515. package/src/css/props/maxWidth/maxWidth.ts +8 -0
  516. package/src/css/props/maxWidth/types.ts +11 -0
  517. package/src/css/props/minHeight/minHeight.css.ts +13 -0
  518. package/src/css/props/minHeight/minHeight.ts +8 -0
  519. package/src/css/props/minHeight/types.ts +9 -0
  520. package/src/css/props/minWidth/minWidth.css.ts +25 -0
  521. package/src/css/props/minWidth/minWidth.ts +8 -0
  522. package/src/css/props/minWidth/types.ts +9 -0
  523. package/src/css/props/outline/outline.css.ts +10 -0
  524. package/src/css/props/outline/outline.ts +8 -0
  525. package/src/css/props/outline/types.ts +7 -0
  526. package/src/css/props/overflow/overflow.css.ts +16 -0
  527. package/src/css/props/overflow/overflow.ts +8 -0
  528. package/src/css/props/overflow/types.ts +11 -0
  529. package/src/css/props/padding/padding.css.ts +87 -0
  530. package/src/css/props/padding/padding.ts +25 -0
  531. package/src/css/props/padding/types.ts +17 -0
  532. package/src/css/props/pointerEvents/pointerEvents.css.ts +13 -0
  533. package/src/css/props/pointerEvents/pointerEvents.ts +8 -0
  534. package/src/css/props/pointerEvents/types.ts +7 -0
  535. package/src/css/props/position/position.css.ts +22 -0
  536. package/src/css/props/position/position.ts +8 -0
  537. package/src/css/props/position/types.ts +9 -0
  538. package/src/css/props/radius/radius.css.ts +21 -0
  539. package/src/css/props/radius/radius.ts +8 -0
  540. package/src/css/props/radius/types.ts +8 -0
  541. package/src/css/props/shadow/shadow.css.ts +23 -0
  542. package/src/css/props/shadow/shadow.ts +8 -0
  543. package/src/css/props/shadow/types.ts +8 -0
  544. package/src/css/props/textAlign/textAlign.css.ts +22 -0
  545. package/src/css/props/textAlign/textAlign.ts +8 -0
  546. package/src/css/props/textAlign/types.ts +7 -0
  547. package/src/css/props/textOverflow/textOverflow.css.ts +19 -0
  548. package/src/css/props/textOverflow/textOverflow.ts +8 -0
  549. package/src/css/props/textOverflow/types.ts +12 -0
  550. package/src/css/props/width/types.ts +11 -0
  551. package/src/css/props/width/width.css.ts +31 -0
  552. package/src/css/props/width/width.ts +8 -0
  553. package/src/css/theme/buildCSSTheme.ts +488 -0
  554. package/src/css/theme/defaultTheme.css.ts +64 -0
  555. package/src/css/types.ts +427 -0
  556. package/src/css/vars.css.ts +676 -0
  557. package/src/theme/_parseColorToken.ts +180 -0
  558. package/src/theme/buildTheme.ts +32 -0
  559. package/src/theme/constants.ts +90 -0
  560. package/src/theme/defaults/color.ts +197 -0
  561. package/src/theme/defaults/{config.ts → common.ts} +4 -17
  562. package/src/theme/defaults/fonts.ts +54 -31
  563. package/src/theme/index.ts +5 -5
  564. package/src/theme/{build/merge.ts → merge.ts} +6 -8
  565. package/src/theme/resolveTokens.ts +204 -0
  566. package/src/theme/types.ts +366 -0
  567. package/dist/_chunks-cjs/_visual-editing.js +0 -5409
  568. package/dist/_chunks-cjs/_visual-editing.js.map +0 -1
  569. package/dist/_chunks-cjs/refractor.js.map +0 -1
  570. package/dist/_chunks-es/_visual-editing.mjs +0 -5415
  571. package/dist/_chunks-es/_visual-editing.mjs.map +0 -1
  572. package/dist/_chunks-es/refractor.mjs.map +0 -1
  573. package/dist/_visual-editing.d.mts +0 -1011
  574. package/dist/_visual-editing.d.ts +0 -1011
  575. package/dist/_visual-editing.js +0 -31
  576. package/dist/_visual-editing.js.map +0 -1
  577. package/dist/_visual-editing.mjs +0 -31
  578. package/dist/_visual-editing.mjs.map +0 -1
  579. package/dist/index.d.mts +0 -2966
  580. package/dist/index.mjs +0 -1726
  581. package/dist/index.mjs.map +0 -1
  582. package/dist/theme.d.mts +0 -1500
  583. package/dist/theme.mjs +0 -4112
  584. package/dist/theme.mjs.map +0 -1
  585. package/exports/_visual-editing.ts +0 -31
  586. package/src/core/__workshop__/constants.ts +0 -293
  587. package/src/core/_compat.ts +0 -264
  588. package/src/core/components/autocomplete/autocomplete.styles.tsx +0 -39
  589. package/src/core/components/autocomplete/index.ts +0 -2
  590. package/src/core/components/breadcrumbs/breadcrumbs.styles.ts +0 -18
  591. package/src/core/components/breadcrumbs/index.ts +0 -1
  592. package/src/core/components/dialog/index.ts +0 -4
  593. package/src/core/components/dialog/styles.ts +0 -77
  594. package/src/core/components/hotkeys/index.ts +0 -1
  595. package/src/core/components/index.ts +0 -9
  596. package/src/core/components/menu/index.ts +0 -5
  597. package/src/core/components/menu/menuDivider.ts +0 -12
  598. package/src/core/components/skeleton/index.ts +0 -2
  599. package/src/core/components/skeleton/skeleton.tsx +0 -57
  600. package/src/core/components/skeleton/styles.ts +0 -50
  601. package/src/core/components/skeleton/textSkeleton.tsx +0 -123
  602. package/src/core/components/tab/index.ts +0 -3
  603. package/src/core/components/toast/index.ts +0 -4
  604. package/src/core/components/toast/styles.ts +0 -77
  605. package/src/core/components/tree/index.ts +0 -4
  606. package/src/core/components/tree/style.ts +0 -105
  607. package/src/core/global.ts +0 -6
  608. package/src/core/helpers/index.ts +0 -4
  609. package/src/core/hooks/index.ts +0 -12
  610. package/src/core/hooks/useArrayProp.ts +0 -31
  611. package/src/core/hooks/useClickOutside.test.tsx +0 -482
  612. package/src/core/hooks/useClickOutside.ts +0 -117
  613. package/src/core/hooks/useElementRect/__workshop__/example.tsx +0 -32
  614. package/src/core/hooks/useElementRect/__workshop__/index.ts +0 -14
  615. package/src/core/hooks/useElementRect/index.ts +0 -1
  616. package/src/core/hooks/useElementRect/useElementRect.ts +0 -13
  617. package/src/core/hooks/useForwardedRef.ts +0 -19
  618. package/src/core/hooks/useIsomorphicEffect.ts +0 -7
  619. package/src/core/hooks/useMediaIndex/index.ts +0 -1
  620. package/src/core/observers/index.ts +0 -2
  621. package/src/core/primitives/_selectable/index.ts +0 -1
  622. package/src/core/primitives/_selectable/selectable.tsx +0 -15
  623. package/src/core/primitives/_selectable/style.ts +0 -115
  624. package/src/core/primitives/avatar/index.ts +0 -4
  625. package/src/core/primitives/avatar/styles.ts +0 -167
  626. package/src/core/primitives/badge/index.ts +0 -1
  627. package/src/core/primitives/badge/styles.ts +0 -20
  628. package/src/core/primitives/badge/types.ts +0 -8
  629. package/src/core/primitives/box/index.ts +0 -1
  630. package/src/core/primitives/button/index.ts +0 -1
  631. package/src/core/primitives/button/styles.ts +0 -117
  632. package/src/core/primitives/card/__workshop__/allTones.tsx +0 -25
  633. package/src/core/primitives/card/index.ts +0 -2
  634. package/src/core/primitives/card/styles.ts +0 -147
  635. package/src/core/primitives/checkbox/index.ts +0 -1
  636. package/src/core/primitives/checkbox/styles.ts +0 -128
  637. package/src/core/primitives/code/index.ts +0 -1
  638. package/src/core/primitives/code/styles.ts +0 -77
  639. package/src/core/primitives/container/index.ts +0 -2
  640. package/src/core/primitives/container/styles.ts +0 -23
  641. package/src/core/primitives/flex/index.ts +0 -1
  642. package/src/core/primitives/grid/index.ts +0 -1
  643. package/src/core/primitives/heading/index.ts +0 -1
  644. package/src/core/primitives/heading/styles.ts +0 -64
  645. package/src/core/primitives/heading/types.ts +0 -7
  646. package/src/core/primitives/index.ts +0 -27
  647. package/src/core/primitives/inline/index.ts +0 -1
  648. package/src/core/primitives/inline/styles.ts +0 -32
  649. package/src/core/primitives/inline/types.ts +0 -6
  650. package/src/core/primitives/kbd/index.ts +0 -1
  651. package/src/core/primitives/label/index.ts +0 -1
  652. package/src/core/primitives/label/styles.ts +0 -45
  653. package/src/core/primitives/popover/index.ts +0 -2
  654. package/src/core/primitives/popover/popoverCard.tsx +0 -168
  655. package/src/core/primitives/radio/index.ts +0 -1
  656. package/src/core/primitives/radio/styles.ts +0 -117
  657. package/src/core/primitives/select/index.ts +0 -1
  658. package/src/core/primitives/select/styles.ts +0 -166
  659. package/src/core/primitives/spinner/index.ts +0 -1
  660. package/src/core/primitives/stack/index.ts +0 -1
  661. package/src/core/primitives/stack/styles.ts +0 -32
  662. package/src/core/primitives/switch/index.ts +0 -1
  663. package/src/core/primitives/switch/styles.ts +0 -173
  664. package/src/core/primitives/text/index.ts +0 -1
  665. package/src/core/primitives/text/styles.ts +0 -74
  666. package/src/core/primitives/textArea/index.ts +0 -1
  667. package/src/core/primitives/textInput/index.ts +0 -1
  668. package/src/core/primitives/tooltip/index.ts +0 -2
  669. package/src/core/primitives/tooltip/tooltipCard.tsx +0 -111
  670. package/src/core/primitives/types.ts +0 -146
  671. package/src/core/styles/border/borderStyle.ts +0 -56
  672. package/src/core/styles/border/index.ts +0 -2
  673. package/src/core/styles/border/types.ts +0 -10
  674. package/src/core/styles/box/boxStyle.ts +0 -69
  675. package/src/core/styles/box/index.ts +0 -2
  676. package/src/core/styles/box/types.ts +0 -11
  677. package/src/core/styles/card/_cardColorStyle.ts +0 -108
  678. package/src/core/styles/card/index.ts +0 -1
  679. package/src/core/styles/flex/flexItemStyle.ts +0 -27
  680. package/src/core/styles/flex/flexStyle.ts +0 -70
  681. package/src/core/styles/flex/index.ts +0 -3
  682. package/src/core/styles/flex/types.ts +0 -25
  683. package/src/core/styles/focusRing/index.ts +0 -25
  684. package/src/core/styles/font/codeFontStyle.ts +0 -13
  685. package/src/core/styles/font/headingFontStyle.ts +0 -13
  686. package/src/core/styles/font/index.ts +0 -6
  687. package/src/core/styles/font/labelFontStyle.ts +0 -13
  688. package/src/core/styles/font/responsiveFont.ts +0 -101
  689. package/src/core/styles/font/textAlignStyle.ts +0 -19
  690. package/src/core/styles/font/textFontStyle.ts +0 -13
  691. package/src/core/styles/font/types.ts +0 -35
  692. package/src/core/styles/grid/gridItemStyle.ts +0 -82
  693. package/src/core/styles/grid/gridStyle.ts +0 -108
  694. package/src/core/styles/grid/index.ts +0 -3
  695. package/src/core/styles/grid/types.ts +0 -37
  696. package/src/core/styles/helpers.ts +0 -72
  697. package/src/core/styles/index.ts +0 -5
  698. package/src/core/styles/input/index.ts +0 -2
  699. package/src/core/styles/input/responsiveInputPaddingStyle.ts +0 -78
  700. package/src/core/styles/input/textInputStyle.ts +0 -263
  701. package/src/core/styles/internal.ts +0 -12
  702. package/src/core/styles/margin/index.ts +0 -2
  703. package/src/core/styles/margin/marginStyle.ts +0 -21
  704. package/src/core/styles/margin/marginsStyle.test.ts +0 -33
  705. package/src/core/styles/margin/types.ts +0 -9
  706. package/src/core/styles/padding/index.ts +0 -2
  707. package/src/core/styles/padding/paddingStyle.test.ts +0 -33
  708. package/src/core/styles/padding/paddingStyle.ts +0 -21
  709. package/src/core/styles/padding/types.ts +0 -12
  710. package/src/core/styles/radius/index.ts +0 -2
  711. package/src/core/styles/radius/radiusStyle.ts +0 -23
  712. package/src/core/styles/radius/types.ts +0 -8
  713. package/src/core/styles/shadow/index.ts +0 -2
  714. package/src/core/styles/shadow/shadowStyle.ts +0 -29
  715. package/src/core/styles/shadow/types.ts +0 -6
  716. package/src/core/styles/types.ts +0 -8
  717. package/src/core/theme/__workshop__/build/Root.tsx +0 -367
  718. package/src/core/theme/__workshop__/build/helpers.ts +0 -46
  719. package/src/core/theme/__workshop__/build/story.tsx +0 -465
  720. package/src/core/theme/__workshop__/canvas.tsx +0 -351
  721. package/src/core/theme/__workshop__/color.tsx +0 -62
  722. package/src/core/theme/__workshop__/debug/story.tsx +0 -408
  723. package/src/core/theme/__workshop__/index.ts +0 -39
  724. package/src/core/theme/__workshop__/layer.tsx +0 -78
  725. package/src/core/theme/__workshop__/nestedProvider.tsx +0 -15
  726. package/src/core/theme/index.ts +0 -5
  727. package/src/core/theme/theme.test.tsx +0 -73
  728. package/src/core/theme/themeColorProvider.tsx +0 -29
  729. package/src/core/theme/themeContext.ts +0 -10
  730. package/src/core/theme/themeProvider.tsx +0 -62
  731. package/src/core/theme/types.ts +0 -12
  732. package/src/core/theme/useRootTheme.ts +0 -17
  733. package/src/core/theme/useTheme.ts +0 -16
  734. package/src/core/types/avatar.ts +0 -14
  735. package/src/core/types/badge.ts +0 -12
  736. package/src/core/types/box.ts +0 -19
  737. package/src/core/types/button.ts +0 -21
  738. package/src/core/types/card.ts +0 -6
  739. package/src/core/types/flex.ts +0 -30
  740. package/src/core/types/grid.ts +0 -14
  741. package/src/core/types/gridItem.ts +0 -29
  742. package/src/core/types/index.ts +0 -14
  743. package/src/core/types/placement.ts +0 -18
  744. package/src/core/types/popover.ts +0 -4
  745. package/src/core/types/radius.ts +0 -4
  746. package/src/core/types/selectable.ts +0 -6
  747. package/src/core/types/text.ts +0 -4
  748. package/src/core/utils/arrow/arrow.tsx +0 -123
  749. package/src/core/utils/arrow/index.ts +0 -1
  750. package/src/core/utils/boundaryElement/index.ts +0 -3
  751. package/src/core/utils/conditionalWrapper/conditionalWrapper.tsx +0 -21
  752. package/src/core/utils/conditionalWrapper/index.ts +0 -1
  753. package/src/core/utils/elementQuery/index.ts +0 -1
  754. package/src/core/utils/index.ts +0 -9
  755. package/src/core/utils/layer/__workshop__/responsiveZOffset.tsx +0 -13
  756. package/src/core/utils/layer/index.ts +0 -4
  757. package/src/core/utils/layer/layerContext.ts +0 -7
  758. package/src/core/utils/portal/index.ts +0 -4
  759. package/src/core/utils/portal/portal.ts +0 -32
  760. package/src/core/utils/spanWithTextOverflow.tsx +0 -10
  761. package/src/core/utils/srOnly/index.ts +0 -1
  762. package/src/core/utils/srOnly/srOnly.tsx +0 -36
  763. package/src/core/utils/virtualList/index.ts +0 -1
  764. package/src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts +0 -76
  765. package/src/theme/build/_deprecated/color/_solid/createSolidTones.ts +0 -54
  766. package/src/theme/build/_deprecated/color/button/createButtonModes.ts +0 -22
  767. package/src/theme/build/_deprecated/color/button/createButtonTones.ts +0 -55
  768. package/src/theme/build/_deprecated/color/card/createCardStates.ts +0 -60
  769. package/src/theme/build/_deprecated/color/color.test.ts +0 -63
  770. package/src/theme/build/_deprecated/color/defaults.ts +0 -390
  771. package/src/theme/build/_deprecated/color/factory.ts +0 -142
  772. package/src/theme/build/_deprecated/color/index.ts +0 -1
  773. package/src/theme/build/_deprecated/color/input/createInputModes.ts +0 -81
  774. package/src/theme/build/_deprecated/color/muted/createMuted.ts +0 -54
  775. package/src/theme/build/_deprecated/color/spot/createSpot.ts +0 -20
  776. package/src/theme/build/buildColorTheme.test.ts +0 -183
  777. package/src/theme/build/buildColorTheme.ts +0 -494
  778. package/src/theme/build/buildTheme.test.ts +0 -87
  779. package/src/theme/build/buildTheme.ts +0 -36
  780. package/src/theme/build/colorToken/colorToken.ts +0 -19
  781. package/src/theme/build/colorToken/compileColorToken.ts +0 -21
  782. package/src/theme/build/colorToken/index.ts +0 -2
  783. package/src/theme/build/colorToken/types.ts +0 -6
  784. package/src/theme/build/index.ts +0 -3
  785. package/src/theme/build/lib/color-fns/blend/index.ts +0 -3
  786. package/src/theme/build/lib/color-fns/blend/mix.ts +0 -21
  787. package/src/theme/build/lib/color-fns/blend/multiply.ts +0 -18
  788. package/src/theme/build/lib/color-fns/blend/screen.ts +0 -18
  789. package/src/theme/build/lib/color-fns/color-fns.test.ts +0 -68
  790. package/src/theme/build/lib/color-fns/contrastRatio.ts +0 -31
  791. package/src/theme/build/lib/color-fns/convert.ts +0 -150
  792. package/src/theme/build/lib/color-fns/index.ts +0 -6
  793. package/src/theme/build/lib/color-fns/parse.ts +0 -60
  794. package/src/theme/build/lib/color-fns/rgba.ts +0 -10
  795. package/src/theme/build/lib/color-fns/types.ts +0 -28
  796. package/src/theme/build/lib/isRecord.ts +0 -3
  797. package/src/theme/build/lib/utils.ts +0 -19
  798. package/src/theme/build/mixThemeColor.test.ts +0 -21
  799. package/src/theme/build/mixThemeColor.ts +0 -53
  800. package/src/theme/build/renderColorTheme.ts +0 -532
  801. package/src/theme/build/renderColorValue.ts +0 -85
  802. package/src/theme/build/resolveColorTokens.ts +0 -268
  803. package/src/theme/build/theme.test.ts +0 -27
  804. package/src/theme/config/helpers.ts +0 -55
  805. package/src/theme/config/index.ts +0 -4
  806. package/src/theme/config/system.ts +0 -115
  807. package/src/theme/config/tokens/color/index.ts +0 -1
  808. package/src/theme/config/tokens/color/types.ts +0 -133
  809. package/src/theme/config/tokens/index.ts +0 -4
  810. package/src/theme/config/tokens/parseTokenKey.test.ts +0 -64
  811. package/src/theme/config/tokens/parseTokenKey.ts +0 -67
  812. package/src/theme/config/tokens/parseTokenValue.test.ts +0 -42
  813. package/src/theme/config/tokens/parseTokenValue.ts +0 -133
  814. package/src/theme/config/tokens/types.ts +0 -53
  815. package/src/theme/config/types.ts +0 -46
  816. package/src/theme/defaults/colorPalette.ts +0 -5
  817. package/src/theme/defaults/colorTokens.ts +0 -648
  818. package/src/theme/getScopedTheme.ts +0 -91
  819. package/src/theme/system/avatar.ts +0 -14
  820. package/src/theme/system/color/_constants.ts +0 -45
  821. package/src/theme/system/color/_helpers.ts +0 -24
  822. package/src/theme/system/color/_system.ts +0 -40
  823. package/src/theme/system/color/avatar.ts +0 -15
  824. package/src/theme/system/color/badge.ts +0 -16
  825. package/src/theme/system/color/button.ts +0 -17
  826. package/src/theme/system/color/color.ts +0 -34
  827. package/src/theme/system/color/index.ts +0 -13
  828. package/src/theme/system/color/input.ts +0 -25
  829. package/src/theme/system/color/kbd.ts +0 -8
  830. package/src/theme/system/color/selectable.ts +0 -12
  831. package/src/theme/system/color/shadow.ts +0 -7
  832. package/src/theme/system/color/state.ts +0 -43
  833. package/src/theme/system/color/syntax.ts +0 -41
  834. package/src/theme/system/css.ts +0 -8
  835. package/src/theme/system/focusRing.ts +0 -7
  836. package/src/theme/system/font.ts +0 -52
  837. package/src/theme/system/index.ts +0 -11
  838. package/src/theme/system/input.ts +0 -33
  839. package/src/theme/system/layer.ts +0 -8
  840. package/src/theme/system/shadow.ts +0 -19
  841. package/src/theme/system/styles.ts +0 -13
  842. package/src/theme/system/theme.ts +0 -138
  843. package/src/theme/system/v0/avatar.ts +0 -10
  844. package/src/theme/system/v0/color/_generic.ts +0 -35
  845. package/src/theme/system/v0/color/_system.ts +0 -17
  846. package/src/theme/system/v0/color/base.ts +0 -21
  847. package/src/theme/system/v0/color/button.ts +0 -42
  848. package/src/theme/system/v0/color/card.ts +0 -19
  849. package/src/theme/system/v0/color/color.ts +0 -40
  850. package/src/theme/system/v0/color/index.ts +0 -11
  851. package/src/theme/system/v0/color/input.ts +0 -34
  852. package/src/theme/system/v0/color/muted.ts +0 -26
  853. package/src/theme/system/v0/color/selectable.ts +0 -31
  854. package/src/theme/system/v0/color/solid.ts +0 -26
  855. package/src/theme/system/v0/color/spot.ts +0 -13
  856. package/src/theme/system/v0/index.ts +0 -3
  857. package/src/theme/system/v0/input.ts +0 -23
  858. package/src/theme/versioning/getTheme_v2.ts +0 -57
  859. package/src/theme/versioning/index.ts +0 -5
  860. package/src/theme/versioning/is_v0.ts +0 -6
  861. package/src/theme/versioning/is_v2.ts +0 -6
  862. package/src/theme/versioning/themeColor_v0_v2.ts +0 -243
  863. package/src/theme/versioning/themeColor_v2_v2_9.ts +0 -49
  864. package/src/theme/versioning/v0_v2.ts +0 -94
  865. package/src/theme/versioning/v2_v0.ts +0 -127
  866. /package/src/core/observers/{resizeObserver.ts → resize.ts} +0 -0
  867. /package/src/core/{utils → primitives}/arrow/cmds.ts +0 -0
  868. /package/src/core/{utils → primitives}/layer/types.ts +0 -0
package/dist/index.mjs DELETED
@@ -1,1726 +0,0 @@
1
- import { isHTMLElement, isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, EMPTY_ARRAY, useElementSize, Code, Box, _isEnterToClickElement, Card, Text, useArrayProp, EMPTY_RECORD, Button, Stack, Popover, TextInput, useClickOutsideEvent, _responsive, createGlobalScopedContext, Container, Flex, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, useTheme_v2, usePrefersReducedMotion, Portal, containsOrEqualsElement, Layer, responsivePaddingStyle, responsiveRadiusStyle, Grid, LayerProvider, isRecord, _cardColorStyle, rem } from "./_chunks-es/_visual-editing.mjs";
2
- import { Arrow, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, Checkbox, ConditionalWrapper, ElementQuery, Heading, Hotkeys, Inline, KBD, Label, Menu, MenuDivider, MenuGroup, MenuItem, PortalProvider, Radio, Select, Spinner, SrOnly, Switch, Tab, TabList, TextArea, ThemeColorProvider, ThemeProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, VirtualList, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _isScrollable, createColorTheme, hexToRgb, hslToRgb, multiply, parseColor, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen, studioTheme, useCustomValidity, useMatchMedia, useMediaIndex, usePrefersDark, useRootTheme, useTheme, useTooltipDelayGroup } from "./_chunks-es/_visual-editing.mjs";
3
- import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
4
- import { SpinnerIcon, ChevronDownIcon, CloseIcon, ToggleArrowRightIcon } from "@sanity/icons";
5
- import { useState, useRef, useEffect, useImperativeHandle, Component, forwardRef, useReducer, useCallback, useMemo, cloneElement, Children, isValidElement, Fragment, useContext, useSyncExternalStore, startTransition, memo, useId } from "react";
6
- import { styled, keyframes, css } from "styled-components";
7
- import { c } from "react-compiler-runtime";
8
- import { getTheme_v2 } from "@sanity/ui/theme";
9
- import { motion, AnimatePresence } from "framer-motion";
10
- function _raf(fn) {
11
- const frameId = requestAnimationFrame(fn);
12
- return () => {
13
- cancelAnimationFrame(frameId);
14
- };
15
- }
16
- function _raf2(fn) {
17
- let innerDispose = null;
18
- const outerDispose = _raf(() => {
19
- innerDispose = _raf(fn);
20
- });
21
- return () => {
22
- innerDispose && innerDispose(), outerDispose();
23
- };
24
- }
25
- function _hasFocus(element) {
26
- return !!document.activeElement && element.contains(document.activeElement);
27
- }
28
- function isFocusable(element) {
29
- return element.tabIndex > 0 || element.tabIndex === 0 && element.getAttribute("tabIndex") !== null ? !0 : isHTMLAnchorElement(element) ? !!element.href && element.rel !== "ignore" : isHTMLInputElement(element) ? element.type !== "hidden" && element.type !== "file" && !element.disabled : isHTMLButtonElement(element) || isHTMLSelectElement(element) || isHTMLTextAreaElement(element) ? !element.disabled : !1;
30
- }
31
- function attemptFocus(element) {
32
- if (!isFocusable(element))
33
- return !1;
34
- try {
35
- element.focus();
36
- } catch {
37
- }
38
- return document.activeElement === element;
39
- }
40
- function focusFirstDescendant(element) {
41
- for (let i = 0; i < element.childNodes.length; i++) {
42
- const child = element.childNodes[i];
43
- if (isHTMLElement(child) && (attemptFocus(child) || focusFirstDescendant(child)))
44
- return !0;
45
- }
46
- return !1;
47
- }
48
- function focusLastDescendant(element) {
49
- for (let i = element.childNodes.length - 1; i >= 0; i--) {
50
- const child = element.childNodes[i];
51
- if (isHTMLElement(child) && (attemptFocus(child) || focusLastDescendant(child)))
52
- return !0;
53
- }
54
- return !1;
55
- }
56
- function _getElements(element, elementsArg) {
57
- const ret = [element];
58
- for (const el of elementsArg)
59
- Array.isArray(el) ? ret.push(...el) : ret.push(el);
60
- return ret.filter(Boolean);
61
- }
62
- function useClickOutside(listener, t0, boundaryElement) {
63
- const $ = c(12), elementsArg = t0 === void 0 ? EMPTY_ARRAY : t0, [element, setElement] = useState(null);
64
- let t1;
65
- $[0] !== element || $[1] !== elementsArg ? (t1 = () => _getElements(element, elementsArg), $[0] = element, $[1] = elementsArg, $[2] = t1) : t1 = $[2];
66
- const [elements, setElements] = useState(t1), elementsRef = useRef(elements);
67
- let t2, t3;
68
- $[3] !== element || $[4] !== elementsArg ? (t2 = () => {
69
- const prevElements = elementsRef.current, nextElements = _getElements(element, elementsArg);
70
- if (prevElements.length !== nextElements.length) {
71
- setElements(nextElements), elementsRef.current = nextElements;
72
- return;
73
- }
74
- for (const el of prevElements)
75
- if (!nextElements.includes(el)) {
76
- setElements(nextElements), elementsRef.current = nextElements;
77
- return;
78
- }
79
- for (const el_0 of nextElements)
80
- if (!prevElements.includes(el_0)) {
81
- setElements(nextElements), elementsRef.current = nextElements;
82
- return;
83
- }
84
- }, t3 = [element, elementsArg], $[3] = element, $[4] = elementsArg, $[5] = t2, $[6] = t3) : (t2 = $[5], t3 = $[6]), useEffect(t2, t3);
85
- let t4, t5;
86
- return $[7] !== boundaryElement || $[8] !== elements || $[9] !== listener ? (t4 = () => {
87
- if (!listener)
88
- return;
89
- const handleWindowMouseDown = (evt) => {
90
- const target = evt.target;
91
- if (target instanceof Node && !(boundaryElement && !boundaryElement.contains(target))) {
92
- for (const el_1 of elements)
93
- if (target === el_1 || el_1.contains(target))
94
- return;
95
- listener(evt);
96
- }
97
- };
98
- return window.addEventListener("mousedown", handleWindowMouseDown), () => {
99
- window.removeEventListener("mousedown", handleWindowMouseDown);
100
- };
101
- }, t5 = [boundaryElement, listener, elements], $[7] = boundaryElement, $[8] = elements, $[9] = listener, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), useEffect(t4, t5), setElement;
102
- }
103
- function useElementRect(element) {
104
- return useElementSize(element)?._contentRect || null;
105
- }
106
- function useForwardedRef(ref) {
107
- const $ = c(1), innerRef = useRef(null);
108
- let t0;
109
- return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => innerRef.current, $[0] = t0) : t0 = $[0], useImperativeHandle(ref, t0), innerRef;
110
- }
111
- class ErrorBoundary extends Component {
112
- state = {
113
- error: null
114
- };
115
- static getDerivedStateFromError(error) {
116
- return {
117
- error
118
- };
119
- }
120
- componentDidCatch(error, info) {
121
- this.props.onCatch({
122
- error,
123
- info
124
- });
125
- }
126
- render() {
127
- const {
128
- error
129
- } = this.state;
130
- if (error) {
131
- const message = typeof error?.message == "string" ? error.message : "Error";
132
- return /* @__PURE__ */ jsx(Code, { children: message });
133
- }
134
- return this.props.children;
135
- }
136
- }
137
- const StyledAutocomplete = styled.div.withConfig({
138
- displayName: "StyledAutocomplete",
139
- componentId: "sc-1igauft-0"
140
- })`line-height:0;`, ListBox = styled(Box).withConfig({
141
- displayName: "ListBox",
142
- componentId: "sc-1igauft-1"
143
- })`& > ul{list-style:none;padding:0;margin:0;}`, rotate = keyframes`
144
- from {
145
- transform: rotate(0deg);
146
- }
147
-
148
- to {
149
- transform: rotate(360deg);
150
- }
151
- `, AnimatedSpinnerIcon = styled(SpinnerIcon).withConfig({
152
- displayName: "AnimatedSpinnerIcon",
153
- componentId: "sc-1igauft-2"
154
- })`animation:${rotate} 500ms linear infinite;`;
155
- function AutocompleteOption(props) {
156
- const $ = c(11), {
157
- children,
158
- id,
159
- onSelect,
160
- selected,
161
- value
162
- } = props;
163
- let t0;
164
- $[0] !== onSelect || $[1] !== value ? (t0 = () => {
165
- setTimeout(() => {
166
- onSelect(value);
167
- }, 0);
168
- }, $[0] = onSelect, $[1] = value, $[2] = t0) : t0 = $[2];
169
- const handleClick = t0;
170
- let t1;
171
- $[3] !== handleClick ? (t1 = (event) => {
172
- event.key === "Enter" && !_isEnterToClickElement(event.currentTarget) && handleClick();
173
- }, $[3] = handleClick, $[4] = t1) : t1 = $[4];
174
- const handleKeyDown = t1;
175
- let t2;
176
- return $[5] !== children || $[6] !== handleClick || $[7] !== handleKeyDown || $[8] !== id || $[9] !== selected ? (t2 = /* @__PURE__ */ jsx("li", { "aria-selected": selected, "data-ui": "AutocompleteOption", id, role: "option", onClick: handleClick, onKeyDown: handleKeyDown, children }), $[5] = children, $[6] = handleClick, $[7] = handleKeyDown, $[8] = id, $[9] = selected, $[10] = t2) : t2 = $[10], t2;
177
- }
178
- function autocompleteReducer(state, msg) {
179
- return msg.type === "input/change" ? {
180
- ...state,
181
- activeValue: null,
182
- focused: !0,
183
- query: msg.query
184
- } : msg.type === "input/focus" ? {
185
- ...state,
186
- focused: !0
187
- } : msg.type === "root/blur" ? {
188
- ...state,
189
- focused: !1,
190
- query: null
191
- } : msg.type === "root/clear" ? {
192
- ...state,
193
- activeValue: null,
194
- query: null,
195
- value: null
196
- } : msg.type === "root/escape" ? {
197
- ...state,
198
- focused: !1,
199
- query: null
200
- } : msg.type === "root/open" ? {
201
- ...state,
202
- query: state.query || msg.query
203
- } : msg.type === "root/setActiveValue" ? {
204
- ...state,
205
- activeValue: msg.value,
206
- listFocused: msg.listFocused || state.listFocused
207
- } : msg.type === "root/setListFocused" ? {
208
- ...state,
209
- listFocused: msg.listFocused
210
- } : msg.type === "value/change" ? {
211
- ...state,
212
- activeValue: msg.value,
213
- query: null,
214
- value: msg.value
215
- } : state;
216
- }
217
- const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "Home", "End", "PageUp", "PageDown", "Meta", "Tab", "CapsLock"], AUTOCOMPLETE_POPOVER_PLACEMENT = "bottom-start", AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS = ["bottom-start", "top-start"], DEFAULT_RENDER_VALUE = (value, option) => option ? option.value : value, DEFAULT_FILTER_OPTION = (query, option) => option.value.toLowerCase().indexOf(query.toLowerCase()) > -1, InnerAutocomplete = forwardRef(function(props, forwardedRef) {
218
- const {
219
- border = !0,
220
- customValidity,
221
- disabled,
222
- filterOption: filterOptionProp,
223
- fontSize = 2,
224
- icon,
225
- id,
226
- listBox = EMPTY_RECORD,
227
- loading,
228
- onBlur,
229
- onChange,
230
- onFocus,
231
- onQueryChange,
232
- onSelect,
233
- openButton,
234
- openOnFocus,
235
- options: optionsProp,
236
- padding: paddingProp = 3,
237
- popover = EMPTY_RECORD,
238
- prefix,
239
- radius = 2,
240
- readOnly,
241
- relatedElements,
242
- renderOption: renderOptionProp,
243
- renderPopover,
244
- renderValue = DEFAULT_RENDER_VALUE,
245
- suffix,
246
- value: valueProp,
247
- ...restProps
248
- } = props, [state, dispatch] = useReducer(autocompleteReducer, {
249
- activeValue: valueProp || null,
250
- focused: !1,
251
- listFocused: !1,
252
- query: null,
253
- value: valueProp || null
254
- }), {
255
- activeValue,
256
- focused,
257
- listFocused,
258
- query,
259
- value
260
- } = state, defaultRenderOption = useCallback(({
261
- value: value_0
262
- }) => /* @__PURE__ */ jsx(Card, { "data-as": "button", padding: paddingProp, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsx(Text, { size: fontSize, textOverflow: "ellipsis", children: value_0 }) }), [fontSize, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = useRef(null), resultsPopoverElementRef = useRef(null), inputElementRef = useRef(null), listBoxElementRef = useRef(null), listFocusedRef = useRef(!1), valueRef = useRef(value), valuePropRef = useRef(valueProp), popoverMouseWithinRef = useRef(!1);
263
- useImperativeHandle(forwardedRef, () => inputElementRef.current);
264
- const listBoxId = `${id}-listbox`, options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY, padding = useArrayProp(paddingProp), currentOption = useMemo(() => value !== null ? options.find((o) => o.value === value) : void 0, [options, value]), filteredOptions = useMemo(() => options.filter((option) => query ? filterOption(query, option) : !0), [filterOption, options, query]), filteredOptionsLen = filteredOptions.length, activeItemId = activeValue ? `${id}-option-${activeValue}` : void 0, expanded = query !== null && loading || focused && query !== null, handleRootBlur = useCallback((event) => {
265
- setTimeout(() => {
266
- if (popoverMouseWithinRef.current)
267
- return;
268
- const elements = (relatedElements || []).concat(rootElementRef.current ? [rootElementRef.current] : [], resultsPopoverElementRef.current ? [resultsPopoverElementRef.current] : []);
269
- let focusInside = !1;
270
- if (document.activeElement) {
271
- for (const e of elements)
272
- if (e === document.activeElement || e.contains(document.activeElement)) {
273
- focusInside = !0;
274
- break;
275
- }
276
- }
277
- focusInside === !1 && (dispatch({
278
- type: "root/blur"
279
- }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), onBlur && onBlur(event));
280
- }, 0);
281
- }, [onBlur, onQueryChange, relatedElements]), handleRootFocus = useCallback((event_0) => {
282
- const listBoxElement = listBoxElementRef.current, focusedElement = event_0.target instanceof HTMLElement ? event_0.target : null, listFocused_0 = listBoxElement?.contains(focusedElement) || !1;
283
- listFocused_0 !== listFocusedRef.current && (listFocusedRef.current = listFocused_0, dispatch({
284
- type: "root/setListFocused",
285
- listFocused: listFocused_0
286
- }));
287
- }, []), handleOptionSelect = useCallback((v) => {
288
- dispatch({
289
- type: "value/change",
290
- value: v
291
- }), popoverMouseWithinRef.current = !1, onSelect && onSelect(v), valueRef.current = v, onChange && onChange(v), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
292
- }, [onChange, onSelect, onQueryChange]), handleRootKeyDown = useCallback((event_1) => {
293
- if (event_1.key === "ArrowDown") {
294
- if (event_1.preventDefault(), !filteredOptionsLen) return;
295
- const activeOption = filteredOptions.find((o_0) => o_0.value === activeValue), activeIndex = activeOption ? filteredOptions.indexOf(activeOption) : -1, nextActiveOption = filteredOptions[(activeIndex + 1) % filteredOptionsLen];
296
- nextActiveOption && dispatch({
297
- type: "root/setActiveValue",
298
- value: nextActiveOption.value,
299
- listFocused: !0
300
- });
301
- return;
302
- }
303
- if (event_1.key === "ArrowUp") {
304
- if (event_1.preventDefault(), !filteredOptionsLen) return;
305
- const activeOption_0 = filteredOptions.find((o_1) => o_1.value === activeValue), activeIndex_0 = activeOption_0 ? filteredOptions.indexOf(activeOption_0) : -1, nextActiveOption_0 = filteredOptions[activeIndex_0 === -1 ? filteredOptionsLen - 1 : (filteredOptionsLen + activeIndex_0 - 1) % filteredOptionsLen];
306
- nextActiveOption_0 && dispatch({
307
- type: "root/setActiveValue",
308
- value: nextActiveOption_0.value,
309
- listFocused: !0
310
- });
311
- return;
312
- }
313
- if (event_1.key === "Escape") {
314
- dispatch({
315
- type: "root/escape"
316
- }), popoverMouseWithinRef.current = !1, onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
317
- return;
318
- }
319
- const target = event_1.target, listEl = listBoxElementRef.current;
320
- if ((listEl === target || listEl?.contains(target)) && !AUTOCOMPLETE_LISTBOX_IGNORE_KEYS.includes(event_1.key)) {
321
- inputElementRef.current?.focus();
322
- return;
323
- }
324
- }, [activeValue, filteredOptions, filteredOptionsLen, onQueryChange]), handleInputChange = useCallback((event_2) => {
325
- const nextQuery = event_2.currentTarget.value;
326
- dispatch({
327
- type: "input/change",
328
- query: nextQuery
329
- }), onQueryChange && onQueryChange(nextQuery);
330
- }, [onQueryChange]), dispatchOpen = useCallback(() => {
331
- dispatch({
332
- type: "root/open",
333
- query: value ? renderValue(value, currentOption) : ""
334
- });
335
- }, [currentOption, renderValue, value]), handleInputFocus = useCallback((event_3) => {
336
- focused || (dispatch({
337
- type: "input/focus"
338
- }), onFocus && onFocus(event_3), openOnFocus && dispatchOpen());
339
- }, [focused, onFocus, openOnFocus, dispatchOpen]), handlePopoverMouseEnter = useCallback(() => {
340
- popoverMouseWithinRef.current = !0;
341
- }, []), handlePopoverMouseLeave = useCallback(() => {
342
- popoverMouseWithinRef.current = !1;
343
- }, []), handleClearButtonClick = useCallback(() => {
344
- dispatch({
345
- type: "root/clear"
346
- }), valueRef.current = "", onChange && onChange(""), onQueryChange && onQueryChange(null), inputElementRef.current?.focus();
347
- }, [onChange, onQueryChange]), handleClearButtonFocus = useCallback(() => {
348
- dispatch({
349
- type: "input/focus"
350
- });
351
- }, []);
352
- useEffect(() => {
353
- if (valueProp !== valuePropRef.current) {
354
- valuePropRef.current = valueProp, valueProp !== void 0 && (dispatch({
355
- type: "value/change",
356
- value: valueProp
357
- }), valueRef.current = valueProp);
358
- return;
359
- }
360
- valueProp !== valueRef.current && (valueRef.current = valueProp || null, dispatch({
361
- type: "value/change",
362
- value: valueProp || null
363
- }));
364
- }, [valueProp]), useEffect(() => {
365
- !focused && valueRef.current && dispatch({
366
- type: "root/setActiveValue",
367
- value: valueRef.current
368
- });
369
- }, [focused]), useEffect(() => {
370
- const listElement = listBoxElementRef.current;
371
- if (!listElement) return;
372
- const activeOption_1 = filteredOptions.find((o_2) => o_2.value === activeValue);
373
- if (activeOption_1) {
374
- const activeIndex_1 = filteredOptions.indexOf(activeOption_1), activeItemElement = listElement.childNodes[activeIndex_1];
375
- if (activeItemElement) {
376
- if (_hasFocus(activeItemElement))
377
- return;
378
- focusFirstDescendant(activeItemElement);
379
- }
380
- }
381
- }, [activeValue, filteredOptions]);
382
- const clearButton = useMemo(() => {
383
- if (!loading && !disabled && value)
384
- return {
385
- "aria-label": "Clear",
386
- onFocus: handleClearButtonFocus
387
- };
388
- }, [disabled, handleClearButtonFocus, loading, value]), openButtonBoxPadding = useMemo(() => padding.map((v_0) => v_0 === 0 ? 0 : v_0 === 1 || v_0 === 2 ? 1 : v_0 - 2), [padding]), openButtonPadding = useMemo(() => padding.map((v_1) => Math.max(v_1 - 1, 0)), [padding]), openButtonProps = useMemo(() => typeof openButton == "object" ? openButton : EMPTY_RECORD, [openButton]), handleOpenClick = useCallback((event_4) => {
389
- dispatchOpen(), openButtonProps.onClick && openButtonProps.onClick(event_4), _raf(() => inputElementRef.current?.focus());
390
- }, [openButtonProps, dispatchOpen]), openButtonNode = useMemo(() => !disabled && !readOnly && openButton ? /* @__PURE__ */ jsx(Box, { "aria-hidden": expanded, padding: openButtonBoxPadding, children: /* @__PURE__ */ jsx(Button, { "aria-label": "Open", disabled: expanded, fontSize, icon: ChevronDownIcon, mode: "bleed", padding: openButtonPadding, ...openButtonProps, onClick: handleOpenClick }) }) : void 0, [disabled, expanded, fontSize, handleOpenClick, openButton, openButtonBoxPadding, openButtonPadding, openButtonProps, readOnly]), inputValue = useMemo(() => query === null ? value !== null ? renderValue(value, currentOption) : "" : query, [currentOption, query, renderValue, value]), input = /* @__PURE__ */ jsx(TextInput, { ...restProps, "aria-activedescendant": activeItemId, "aria-autocomplete": "list", "aria-expanded": expanded, "aria-owns": listBoxId, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", border, clearButton, customValidity, disabled, fontSize, icon, iconRight: loading && AnimatedSpinnerIcon, id, inputMode: "search", onChange: handleInputChange, onClear: handleClearButtonClick, onFocus: handleInputFocus, padding, prefix, radius, readOnly, ref: inputElementRef, role: "combobox", spellCheck: !1, suffix: suffix || openButtonNode, value: inputValue }), handleListBoxKeyDown = useCallback((event_5) => {
391
- event_5.key === "Tab" && listFocused && inputElementRef.current?.focus();
392
- }, [listFocused]), content2 = useMemo(() => filteredOptions.length === 0 ? null : /* @__PURE__ */ jsx(ListBox, { "data-ui": "AutoComplete__results", onKeyDown: handleListBoxKeyDown, padding: 1, ...listBox, tabIndex: -1, children: /* @__PURE__ */ jsx(Stack, { as: "ul", "aria-multiselectable": !1, "data-ui": "AutoComplete__resultsList", id: listBoxId, ref: listBoxElementRef, role: "listbox", space: 1, children: filteredOptions.map((option_0) => {
393
- const active = activeValue !== null ? option_0.value === activeValue : currentOption === option_0;
394
- return /* @__PURE__ */ jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: cloneElement(renderOption(option_0), {
395
- disabled: loading,
396
- selected: active,
397
- tabIndex: listFocused && active ? 0 : -1
398
- }) }, option_0.value);
399
- }) }) }), [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]), results = useMemo(() => renderPopover ? renderPopover({
400
- content: content2,
401
- hidden: !expanded,
402
- inputElement: inputElementRef.current,
403
- onMouseEnter: handlePopoverMouseEnter,
404
- onMouseLeave: handlePopoverMouseLeave
405
- }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsx(Popover, { arrow: !1, constrainSize: !0, content: content2, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius, ref: resultsPopoverElementRef, referenceElement: inputElementRef.current, ...popover }), [content2, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover, radius, renderPopover]);
406
- return /* @__PURE__ */ jsxs(StyledAutocomplete, { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
407
- input,
408
- results
409
- ] });
410
- });
411
- InnerAutocomplete.displayName = "ForwardRef(Autocomplete)";
412
- const Autocomplete = InnerAutocomplete, StyledBreadcrumbs = styled.ol.withConfig({
413
- displayName: "StyledBreadcrumbs",
414
- componentId: "sc-1es8h8q-0"
415
- })`margin:0;padding:0;display:flex;list-style:none;align-items:center;white-space:nowrap;line-height:0;`, ExpandButton = styled(Button).withConfig({
416
- displayName: "ExpandButton",
417
- componentId: "sc-1es8h8q-1"
418
- })`appearance:none;margin:-4px;`, Breadcrumbs = forwardRef(function(props, ref) {
419
- const {
420
- children,
421
- maxLength,
422
- separator,
423
- space: spaceRaw = 2,
424
- ...restProps
425
- } = props, space = useArrayProp(spaceRaw), [open, setOpen] = useState(!1), expandElementRef = useRef(null), popoverElementRef = useRef(null), collapse = useCallback(() => setOpen(!1), []), expand = useCallback(() => setOpen(!0), []);
426
- useClickOutsideEvent(collapse, () => [expandElementRef.current, popoverElementRef.current]);
427
- const rawItems = useMemo(() => Children.toArray(children).filter(isValidElement), [children]), items = useMemo(() => {
428
- const len = rawItems.length;
429
- if (maxLength && len > maxLength) {
430
- const beforeLength = Math.ceil(maxLength / 2), afterLength = Math.floor(maxLength / 2);
431
- return [...rawItems.slice(0, beforeLength - 1), /* @__PURE__ */ jsx(Popover, { constrainSize: !0, content: /* @__PURE__ */ jsx(Stack, { as: "ol", overflow: "auto", padding: space, space, children: rawItems.slice(beforeLength - 1, len - afterLength) }), open, placement: "top", portal: !0, ref: popoverElementRef, children: /* @__PURE__ */ jsx(ExpandButton, { fontSize: 1, mode: "bleed", onClick: open ? collapse : expand, padding: 1, ref: expandElementRef, selected: open, text: "\u2026" }) }, "button"), ...rawItems.slice(len - afterLength)];
432
- }
433
- return rawItems;
434
- }, [collapse, expand, maxLength, open, rawItems, space]);
435
- return /* @__PURE__ */ jsx(StyledBreadcrumbs, { "data-ui": "Breadcrumbs", ...restProps, ref, children: items.map((item, itemIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
436
- itemIndex > 0 && /* @__PURE__ */ jsx(Box, { "aria-hidden": !0, as: "li", paddingX: space, children: separator || /* @__PURE__ */ jsx(Text, { muted: !0, children: "/" }) }),
437
- /* @__PURE__ */ jsx(Box, { as: "li", children: item })
438
- ] }, itemIndex)) });
439
- });
440
- Breadcrumbs.displayName = "ForwardRef(Breadcrumbs)";
441
- function dialogStyle({
442
- theme
443
- }) {
444
- const {
445
- color
446
- } = getTheme_v2(theme);
447
- return {
448
- "&:not([hidden])": {
449
- display: "flex"
450
- },
451
- top: 0,
452
- left: 0,
453
- right: 0,
454
- bottom: 0,
455
- alignItems: "center",
456
- justifyContent: "center",
457
- outline: "none",
458
- background: color.backdrop
459
- };
460
- }
461
- function responsiveDialogPositionStyle(props) {
462
- const {
463
- media
464
- } = getTheme_v2(props.theme);
465
- return _responsive(media, props.$position, (position) => ({
466
- "&&": {
467
- position
468
- }
469
- }));
470
- }
471
- function animationDialogStyle(props) {
472
- return props.$animate ? css`
473
- @keyframes zoomIn {
474
- from {
475
- opacity: 0;
476
- transform: scale(0.95);
477
- }
478
- to {
479
- opacity: 1;
480
- transform: scale(1);
481
- }
482
- }
483
- @keyframes fadeIn {
484
- from {
485
- opacity: 0;
486
- }
487
- to {
488
- opacity: 1;
489
- }
490
- }
491
-
492
- animation: fadeIn 200ms ease-out;
493
- // Animates the dialog card.
494
- & > [data-ui='DialogCard'] {
495
- animation: zoomIn 200ms ease-out;
496
- }
497
- ` : css``;
498
- }
499
- const DialogContext = createGlobalScopedContext("@sanity/ui/context/dialog", {
500
- version: 0
501
- });
502
- function useDialog() {
503
- return useContext(DialogContext);
504
- }
505
- function isTargetWithinScope(boundaryElement, portalElement, target) {
506
- return !boundaryElement || !portalElement ? !0 : containsOrEqualsElement(boundaryElement, target) || containsOrEqualsElement(portalElement, target);
507
- }
508
- const StyledDialog = /* @__PURE__ */ styled(Layer).withConfig({
509
- displayName: "StyledDialog",
510
- componentId: "sc-4n4xb3-0"
511
- })(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle), DialogContainer = styled(Container).withConfig({
512
- displayName: "DialogContainer",
513
- componentId: "sc-4n4xb3-1"
514
- })`&:not([hidden]){display:flex;}width:100%;height:100%;flex-direction:column;align-items:center;justify-content:center;`, DialogCardRoot = styled(Card).withConfig({
515
- displayName: "DialogCardRoot",
516
- componentId: "sc-4n4xb3-2"
517
- })`&:not([hidden]){display:flex;}width:100%;min-height:0;max-height:100%;overflow:hidden;overflow:clip;`, DialogLayout = styled(Flex).withConfig({
518
- displayName: "DialogLayout",
519
- componentId: "sc-4n4xb3-3"
520
- })`flex:1;min-height:0;width:100%;`, DialogHeader = styled(Box).withConfig({
521
- displayName: "DialogHeader",
522
- componentId: "sc-4n4xb3-4"
523
- })`position:relative;z-index:2;`, DialogContent = styled(Box).withConfig({
524
- displayName: "DialogContent",
525
- componentId: "sc-4n4xb3-5"
526
- })`position:relative;z-index:1;overflow:auto;outline:none;`, DialogFooter = styled(Box).withConfig({
527
- displayName: "DialogFooter",
528
- componentId: "sc-4n4xb3-6"
529
- })`position:relative;z-index:3;`, DialogCard = forwardRef(function(props, forwardedRef) {
530
- const $ = c(38), {
531
- __unstable_autoFocus: autoFocus,
532
- __unstable_hideCloseButton: hideCloseButton,
533
- children,
534
- contentRef: forwardedContentRef,
535
- footer,
536
- header,
537
- id,
538
- onClickOutside,
539
- onClose,
540
- portal: portalProp,
541
- radius: radiusProp,
542
- scheme,
543
- shadow: shadowProp,
544
- width: widthProp
545
- } = props, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, radius = useArrayProp(radiusProp), shadow = useArrayProp(shadowProp), width = useArrayProp(widthProp), ref = useRef(null), contentRef = useRef(null), layer = useLayer(), {
546
- isTopLayer
547
- } = layer, labelId = `${id}_label`, showCloseButton = !!onClose && hideCloseButton === !1, showHeader = !!header || showCloseButton;
548
- let t0;
549
- $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => ref.current, $[0] = t0) : t0 = $[0], useImperativeHandle(forwardedRef, t0);
550
- let t1;
551
- $[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => contentRef.current, $[1] = t1) : t1 = $[1], useImperativeHandle(forwardedContentRef, t1);
552
- let t2, t3;
553
- $[2] !== autoFocus ? (t2 = () => {
554
- autoFocus && ref.current && focusFirstDescendant(ref.current);
555
- }, t3 = [autoFocus, ref], $[2] = autoFocus, $[3] = t2, $[4] = t3) : (t2 = $[3], t3 = $[4]), useEffect(t2, t3);
556
- let t4;
557
- $[5] !== boundaryElement || $[6] !== isTopLayer || $[7] !== onClose || $[8] !== portalElement ? (t4 = (event) => {
558
- if (!isTopLayer || !onClose)
559
- return;
560
- const target = document.activeElement;
561
- target && !isTargetWithinScope(boundaryElement, portalElement, target) || event.key === "Escape" && (event.preventDefault(), event.stopPropagation(), onClose());
562
- }, $[5] = boundaryElement, $[6] = isTopLayer, $[7] = onClose, $[8] = portalElement, $[9] = t4) : t4 = $[9], useGlobalKeyDown(t4);
563
- let t5;
564
- $[10] !== boundaryElement || $[11] !== isTopLayer || $[12] !== onClickOutside || $[13] !== portalElement ? (t5 = isTopLayer && onClickOutside && ((event_0) => {
565
- const target_0 = event_0.target;
566
- target_0 && !isTargetWithinScope(boundaryElement, portalElement, target_0) || onClickOutside();
567
- }), $[10] = boundaryElement, $[11] = isTopLayer, $[12] = onClickOutside, $[13] = portalElement, $[14] = t5) : t5 = $[14];
568
- let t6;
569
- $[15] === Symbol.for("react.memo_cache_sentinel") ? (t6 = () => [ref.current], $[15] = t6) : t6 = $[15], useClickOutsideEvent(t5, t6);
570
- let t7;
571
- $[16] !== header || $[17] !== labelId || $[18] !== onClose || $[19] !== showCloseButton || $[20] !== showHeader ? (t7 = showHeader && /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsxs(Flex, { align: "flex-start", padding: 3, children: [
572
- /* @__PURE__ */ jsx(Box, { flex: 1, padding: 2, children: header && /* @__PURE__ */ jsx(Text, { id: labelId, size: 1, weight: "semibold", children: header }) }),
573
- showCloseButton && /* @__PURE__ */ jsx(Box, { flex: "none", children: /* @__PURE__ */ jsx(Button, { "aria-label": "Close dialog", disabled: !onClose, icon: CloseIcon, mode: "bleed", onClick: onClose, padding: 2 }) })
574
- ] }) }), $[16] = header, $[17] = labelId, $[18] = onClose, $[19] = showCloseButton, $[20] = showHeader, $[21] = t7) : t7 = $[21];
575
- let t8;
576
- $[22] !== children ? (t8 = /* @__PURE__ */ jsx(DialogContent, { flex: 1, ref: contentRef, tabIndex: -1, children }), $[22] = children, $[23] = t8) : t8 = $[23];
577
- let t9;
578
- $[24] !== footer ? (t9 = footer && /* @__PURE__ */ jsx(DialogFooter, { children: footer }), $[24] = footer, $[25] = t9) : t9 = $[25];
579
- let t10;
580
- $[26] !== t7 || $[27] !== t8 || $[28] !== t9 ? (t10 = /* @__PURE__ */ jsxs(DialogLayout, { direction: "column", children: [
581
- t7,
582
- t8,
583
- t9
584
- ] }), $[26] = t7, $[27] = t8, $[28] = t9, $[29] = t10) : t10 = $[29];
585
- let t11;
586
- $[30] !== radius || $[31] !== scheme || $[32] !== shadow || $[33] !== t10 ? (t11 = /* @__PURE__ */ jsx(DialogCardRoot, { radius, ref, scheme, shadow, children: t10 }), $[30] = radius, $[31] = scheme, $[32] = shadow, $[33] = t10, $[34] = t11) : t11 = $[34];
587
- let t12;
588
- return $[35] !== t11 || $[36] !== width ? (t12 = /* @__PURE__ */ jsx(DialogContainer, { "data-ui": "DialogCard", width, children: t11 }), $[35] = t11, $[36] = width, $[37] = t12) : t12 = $[37], t12;
589
- });
590
- DialogCard.displayName = "ForwardRef(DialogCard)";
591
- const Dialog = forwardRef(function(props, ref) {
592
- const $ = c(60), dialog = useDialog(), {
593
- layer
594
- } = useTheme_v2();
595
- let _positionProp, _zOffsetProp, children, contentRef, footer, header, id, onActivate, onClickOutside, onClose, onFocus, portalProp, restProps, scheme, t0, t1, t2, t3, t4, t5, t6;
596
- $[0] !== props ? ({
597
- __unstable_autoFocus: t0,
598
- __unstable_hideCloseButton: t1,
599
- cardRadius: t2,
600
- cardShadow: t3,
601
- children,
602
- contentRef,
603
- footer,
604
- header,
605
- id,
606
- onActivate,
607
- onClickOutside,
608
- onClose,
609
- onFocus,
610
- padding: t4,
611
- portal: portalProp,
612
- position: _positionProp,
613
- scheme,
614
- width: t5,
615
- zOffset: _zOffsetProp,
616
- animate: t6,
617
- ...restProps
618
- } = props, $[0] = props, $[1] = _positionProp, $[2] = _zOffsetProp, $[3] = children, $[4] = contentRef, $[5] = footer, $[6] = header, $[7] = id, $[8] = onActivate, $[9] = onClickOutside, $[10] = onClose, $[11] = onFocus, $[12] = portalProp, $[13] = restProps, $[14] = scheme, $[15] = t0, $[16] = t1, $[17] = t2, $[18] = t3, $[19] = t4, $[20] = t5, $[21] = t6) : (_positionProp = $[1], _zOffsetProp = $[2], children = $[3], contentRef = $[4], footer = $[5], header = $[6], id = $[7], onActivate = $[8], onClickOutside = $[9], onClose = $[10], onFocus = $[11], portalProp = $[12], restProps = $[13], scheme = $[14], t0 = $[15], t1 = $[16], t2 = $[17], t3 = $[18], t4 = $[19], t5 = $[20], t6 = $[21]);
619
- const autoFocus = t0 === void 0 ? !0 : t0, hideCloseButton = t1 === void 0 ? !1 : t1, cardRadiusProp = t2 === void 0 ? 4 : t2, cardShadow = t3 === void 0 ? 3 : t3, paddingProp = t4 === void 0 ? 3 : t4, widthProp = t5 === void 0 ? 0 : t5, _animate = t6 === void 0 ? !1 : t6, positionProp = _positionProp ?? (dialog.position || "fixed"), zOffsetProp = _zOffsetProp ?? (dialog.zOffset || layer.dialog.zOffset), animate = usePrefersReducedMotion() ? !1 : _animate, portal = usePortal(), portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element, boundaryElement = useBoundaryElement().element, cardRadius = useArrayProp(cardRadiusProp), padding = useArrayProp(paddingProp), position = useArrayProp(positionProp), width = useArrayProp(widthProp), zOffset = useArrayProp(zOffsetProp), preDivRef = useRef(null), postDivRef = useRef(null), cardRef = useRef(null), focusedElementRef = useRef(null);
620
- let t7;
621
- $[22] !== onFocus ? (t7 = (event) => {
622
- onFocus?.(event);
623
- const target = event.target, cardElement = cardRef.current;
624
- if (cardElement && target === preDivRef.current) {
625
- focusLastDescendant(cardElement);
626
- return;
627
- }
628
- if (cardElement && target === postDivRef.current) {
629
- focusFirstDescendant(cardElement);
630
- return;
631
- }
632
- isHTMLElement(event.target) && (focusedElementRef.current = event.target);
633
- }, $[22] = onFocus, $[23] = t7) : t7 = $[23];
634
- const handleFocus = t7, labelId = `${id}_label`, rootClickTimeoutRef = useRef(void 0);
635
- let t8;
636
- $[24] !== boundaryElement || $[25] !== portalElement ? (t8 = () => {
637
- rootClickTimeoutRef.current && clearTimeout(rootClickTimeoutRef.current), rootClickTimeoutRef.current = setTimeout(() => {
638
- const activeElement = document.activeElement;
639
- if (activeElement && !isTargetWithinScope(boundaryElement, portalElement, activeElement)) {
640
- const target_0 = focusedElementRef.current;
641
- if (!target_0 || !document.body.contains(target_0)) {
642
- const cardElement_0 = cardRef.current;
643
- cardElement_0 && focusFirstDescendant(cardElement_0);
644
- return;
645
- }
646
- target_0.focus();
647
- }
648
- }, 0);
649
- }, $[24] = boundaryElement, $[25] = portalElement, $[26] = t8) : t8 = $[26];
650
- const handleRootClick = t8;
651
- let t9;
652
- $[27] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx("div", { ref: preDivRef, tabIndex: 0 }), $[27] = t9) : t9 = $[27];
653
- let t10;
654
- $[28] !== autoFocus || $[29] !== cardRadius || $[30] !== cardShadow || $[31] !== children || $[32] !== contentRef || $[33] !== footer || $[34] !== header || $[35] !== hideCloseButton || $[36] !== id || $[37] !== onClickOutside || $[38] !== onClose || $[39] !== portalProp || $[40] !== scheme || $[41] !== width ? (t10 = /* @__PURE__ */ jsx(DialogCard, { __unstable_autoFocus: autoFocus, __unstable_hideCloseButton: hideCloseButton, contentRef, footer, header, id, onClickOutside, onClose, portal: portalProp, radius: cardRadius, ref: cardRef, scheme, shadow: cardShadow, width, children }), $[28] = autoFocus, $[29] = cardRadius, $[30] = cardShadow, $[31] = children, $[32] = contentRef, $[33] = footer, $[34] = header, $[35] = hideCloseButton, $[36] = id, $[37] = onClickOutside, $[38] = onClose, $[39] = portalProp, $[40] = scheme, $[41] = width, $[42] = t10) : t10 = $[42];
655
- let t11;
656
- $[43] === Symbol.for("react.memo_cache_sentinel") ? (t11 = /* @__PURE__ */ jsx("div", { ref: postDivRef, tabIndex: 0 }), $[43] = t11) : t11 = $[43];
657
- let t12;
658
- $[44] !== animate || $[45] !== handleFocus || $[46] !== handleRootClick || $[47] !== id || $[48] !== labelId || $[49] !== onActivate || $[50] !== padding || $[51] !== position || $[52] !== ref || $[53] !== restProps || $[54] !== t10 || $[55] !== zOffset ? (t12 = /* @__PURE__ */ jsxs(StyledDialog, { ...restProps, $animate: animate, $padding: padding, $position: position, "aria-labelledby": labelId, "aria-modal": !0, "data-ui": "Dialog", id, onActivate, onClick: handleRootClick, onFocus: handleFocus, ref, role: "dialog", zOffset, children: [
659
- t9,
660
- t10,
661
- t11
662
- ] }), $[44] = animate, $[45] = handleFocus, $[46] = handleRootClick, $[47] = id, $[48] = labelId, $[49] = onActivate, $[50] = padding, $[51] = position, $[52] = ref, $[53] = restProps, $[54] = t10, $[55] = zOffset, $[56] = t12) : t12 = $[56];
663
- let t13;
664
- return $[57] !== portalProp || $[58] !== t12 ? (t13 = /* @__PURE__ */ jsx(Portal, { __unstable_name: portalProp, children: t12 }), $[57] = portalProp, $[58] = t12, $[59] = t13) : t13 = $[59], t13;
665
- });
666
- Dialog.displayName = "ForwardRef(Dialog)";
667
- function DialogProvider(props) {
668
- const $ = c(6), {
669
- children,
670
- position,
671
- zOffset
672
- } = props;
673
- let t0, t1;
674
- $[0] !== position || $[1] !== zOffset ? (t1 = {
675
- version: 0,
676
- position,
677
- zOffset
678
- }, $[0] = position, $[1] = zOffset, $[2] = t1) : t1 = $[2], t0 = t1;
679
- const contextValue = t0;
680
- let t2;
681
- return $[3] !== children || $[4] !== contextValue ? (t2 = /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children }), $[3] = children, $[4] = contextValue, $[5] = t2) : t2 = $[5], t2;
682
- }
683
- DialogProvider.displayName = "DialogProvider";
684
- const MenuButton = forwardRef(function(props, forwardedRef) {
685
- const $ = c(62), {
686
- __unstable_disableRestoreFocusOnClose: t0,
687
- boundaryElement: deprecated_boundaryElement,
688
- button: buttonProp,
689
- id,
690
- menu: menuProp,
691
- onClose,
692
- onOpen,
693
- placement: deprecated_placement,
694
- popoverScheme: deprecated_popoverScheme,
695
- portal: t1,
696
- popover,
697
- popoverRadius: deprecated_popoverRadius,
698
- preventOverflow: deprecated_preventOverflow
699
- } = props, disableRestoreFocusOnClose = t0 === void 0 ? !1 : t0, deprecated_portal = t1 === void 0 ? !0 : t1, [open, setOpen] = useState(!1), [shouldFocus, setShouldFocus] = useState(null), [buttonElement, setButtonElement] = useState(null);
700
- let t2;
701
- $[0] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[0] = t2) : t2 = $[0];
702
- const [menuElements, setChildMenuElements] = useState(t2), openRef = useRef(open);
703
- let t3, t4;
704
- $[1] !== onOpen || $[2] !== open ? (t3 = () => {
705
- onOpen && open && !openRef.current && onOpen();
706
- }, t4 = [onOpen, open], $[1] = onOpen, $[2] = open, $[3] = t3, $[4] = t4) : (t3 = $[3], t4 = $[4]), useEffect(t3, t4);
707
- let t5, t6;
708
- $[5] !== onClose || $[6] !== open ? (t5 = () => {
709
- onClose && !open && openRef.current && onClose();
710
- }, t6 = [onClose, open], $[5] = onClose, $[6] = open, $[7] = t5, $[8] = t6) : (t5 = $[7], t6 = $[8]), useEffect(t5, t6);
711
- let t7, t8;
712
- $[9] !== open ? (t7 = () => {
713
- openRef.current = open;
714
- }, t8 = [open], $[9] = open, $[10] = t7, $[11] = t8) : (t7 = $[10], t8 = $[11]), useEffect(t7, t8);
715
- let t9;
716
- $[12] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => {
717
- setOpen(_temp$2), setShouldFocus(null);
718
- }, $[12] = t9) : t9 = $[12];
719
- const handleButtonClick = t9;
720
- let t10;
721
- $[13] !== open ? (t10 = (event) => {
722
- open && event.preventDefault();
723
- }, $[13] = open, $[14] = t10) : t10 = $[14];
724
- const handleMouseDown = t10;
725
- let t11;
726
- $[15] === Symbol.for("react.memo_cache_sentinel") ? (t11 = (event_0) => {
727
- if (event_0.key === "ArrowDown" || event_0.key === "Enter" || event_0.key === " ") {
728
- event_0.preventDefault(), setOpen(!0), setShouldFocus("first");
729
- return;
730
- }
731
- if (event_0.key === "ArrowUp") {
732
- event_0.preventDefault(), setOpen(!0), setShouldFocus("last");
733
- return;
734
- }
735
- }, $[15] = t11) : t11 = $[15];
736
- const handleButtonKeyDown = t11;
737
- let t12;
738
- $[16] !== buttonElement || $[17] !== menuElements ? (t12 = (event_1) => {
739
- const target = event_1.target;
740
- if (target instanceof Node && !(buttonElement && (target === buttonElement || buttonElement.contains(target)))) {
741
- for (const el of menuElements)
742
- if (target === el || el.contains(target))
743
- return;
744
- setOpen(!1);
745
- }
746
- }, $[16] = buttonElement, $[17] = menuElements, $[18] = t12) : t12 = $[18];
747
- const handleMenuClickOutside = t12;
748
- let t13;
749
- $[19] !== buttonElement || $[20] !== disableRestoreFocusOnClose ? (t13 = () => {
750
- setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
751
- }, $[19] = buttonElement, $[20] = disableRestoreFocusOnClose, $[21] = t13) : t13 = $[21];
752
- const handleMenuEscape = t13;
753
- let t14;
754
- $[22] !== menuElements ? (t14 = (event_2) => {
755
- const target_0 = event_2.relatedTarget;
756
- if (target_0 instanceof Node) {
757
- for (const el_0 of menuElements)
758
- if (el_0 === target_0 || el_0.contains(target_0))
759
- return;
760
- setOpen(!1);
761
- }
762
- }, $[22] = menuElements, $[23] = t14) : t14 = $[23];
763
- const handleBlur = t14;
764
- let t15;
765
- $[24] !== buttonElement || $[25] !== disableRestoreFocusOnClose ? (t15 = () => {
766
- setOpen(!1), !disableRestoreFocusOnClose && buttonElement && buttonElement.focus();
767
- }, $[24] = buttonElement, $[25] = disableRestoreFocusOnClose, $[26] = t15) : t15 = $[26];
768
- const handleItemClick = t15;
769
- let t16;
770
- $[27] === Symbol.for("react.memo_cache_sentinel") ? (t16 = (el_1) => (setChildMenuElements((els) => els.concat([el_1])), () => setChildMenuElements((els_0) => els_0.filter((_el) => _el !== el_1))), $[27] = t16) : t16 = $[27];
771
- const registerElement = t16;
772
- let t17;
773
- $[28] !== buttonElement || $[29] !== handleBlur || $[30] !== handleItemClick || $[31] !== handleMenuClickOutside || $[32] !== handleMenuEscape || $[33] !== id || $[34] !== menuProp || $[35] !== shouldFocus ? (t17 = menuProp && cloneElement(menuProp, {
774
- "aria-labelledby": id,
775
- onBlurCapture: handleBlur,
776
- onClickOutside: handleMenuClickOutside,
777
- onEscape: handleMenuEscape,
778
- onItemClick: handleItemClick,
779
- originElement: buttonElement,
780
- registerElement,
781
- shouldFocus
782
- }), $[28] = buttonElement, $[29] = handleBlur, $[30] = handleItemClick, $[31] = handleMenuClickOutside, $[32] = handleMenuEscape, $[33] = id, $[34] = menuProp, $[35] = shouldFocus, $[36] = t17) : t17 = $[36];
783
- const menu = t17;
784
- let t18, t19;
785
- $[37] !== buttonProp || $[38] !== handleMouseDown || $[39] !== id || $[40] !== open ? (t19 = buttonProp && cloneElement(buttonProp, {
786
- "data-ui": "MenuButton",
787
- id,
788
- onClick: handleButtonClick,
789
- onKeyDown: handleButtonKeyDown,
790
- onMouseDown: handleMouseDown,
791
- "aria-haspopup": !0,
792
- "aria-expanded": open,
793
- ref: setButtonElement,
794
- selected: buttonProp.props.selected ?? open
795
- }), $[37] = buttonProp, $[38] = handleMouseDown, $[39] = id, $[40] = open, $[41] = t19) : t19 = $[41], t18 = t19;
796
- const button = t18;
797
- let t20, t21;
798
- $[42] !== buttonElement ? (t20 = () => buttonElement, t21 = [buttonElement], $[42] = buttonElement, $[43] = t20, $[44] = t21) : (t20 = $[43], t21 = $[44]), useImperativeHandle(forwardedRef, t20, t21);
799
- let t22, t23;
800
- $[45] !== popover ? (t23 = popover || {}, $[45] = popover, $[46] = t23) : t23 = $[46];
801
- let t24;
802
- $[47] !== deprecated_boundaryElement || $[48] !== deprecated_placement || $[49] !== deprecated_popoverRadius || $[50] !== deprecated_popoverScheme || $[51] !== deprecated_portal || $[52] !== deprecated_preventOverflow || $[53] !== t23 ? (t24 = {
803
- boundaryElement: deprecated_boundaryElement,
804
- overflow: "auto",
805
- placement: deprecated_placement,
806
- portal: deprecated_portal,
807
- preventOverflow: deprecated_preventOverflow,
808
- radius: deprecated_popoverRadius,
809
- scheme: deprecated_popoverScheme,
810
- ...t23
811
- }, $[47] = deprecated_boundaryElement, $[48] = deprecated_placement, $[49] = deprecated_popoverRadius, $[50] = deprecated_popoverScheme, $[51] = deprecated_portal, $[52] = deprecated_preventOverflow, $[53] = t23, $[54] = t24) : t24 = $[54], t22 = t24;
812
- const popoverProps = t22;
813
- let t25;
814
- $[55] !== button ? (t25 = button || /* @__PURE__ */ jsx(Fragment$1, {}), $[55] = button, $[56] = t25) : t25 = $[56];
815
- let t26;
816
- return $[57] !== menu || $[58] !== open || $[59] !== popoverProps || $[60] !== t25 ? (t26 = /* @__PURE__ */ jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: t25 }), $[57] = menu, $[58] = open, $[59] = popoverProps, $[60] = t25, $[61] = t26) : t26 = $[61], t26;
817
- });
818
- MenuButton.displayName = "ForwardRef(MenuButton)";
819
- function _temp$2(v) {
820
- return !v;
821
- }
822
- const keyframe = keyframes`
823
- 0% {
824
- background-position: 100%;
825
- }
826
- 100% {
827
- background-position: -100%;
828
- }
829
- `, animation = css`
830
- background-image: linear-gradient(
831
- to right,
832
- var(--card-skeleton-color-from),
833
- var(--card-skeleton-color-to),
834
- var(--card-skeleton-color-from),
835
- var(--card-skeleton-color-from),
836
- var(--card-skeleton-color-from)
837
- );
838
- background-position: 100%;
839
- background-size: 200% 100%;
840
- background-attachment: fixed;
841
- animation-name: ${keyframe};
842
- animation-timing-function: ease-in-out;
843
- animation-iteration-count: infinite;
844
- animation-duration: 2000ms;
845
- `, skeletonStyle = css`
846
- opacity: ${({
847
- $visible
848
- }) => $visible ? 1 : 0};
849
- transition: opacity 200ms ease-in;
850
-
851
- @media screen and (prefers-reduced-motion: no-preference) {
852
- ${({
853
- $animated
854
- }) => $animated ? animation : css`
855
- background-color: var(--card-skeleton-color-from);
856
- `}
857
- }
858
-
859
- @media screen and (prefers-reduced-motion: reduce) {
860
- background-color: var(--card-skeleton-color-from);
861
- }
862
- `, StyledSkeleton$1 = /* @__PURE__ */ styled(Box).withConfig({
863
- displayName: "StyledSkeleton",
864
- componentId: "sc-ebtpni-0"
865
- })(responsiveRadiusStyle, skeletonStyle), Skeleton = forwardRef(function(props, ref) {
866
- const $ = c(14);
867
- let delay, radius, restProps, t0;
868
- $[0] !== props ? ({
869
- animated: t0,
870
- delay,
871
- radius,
872
- ...restProps
873
- } = props, $[0] = props, $[1] = delay, $[2] = radius, $[3] = restProps, $[4] = t0) : (delay = $[1], radius = $[2], restProps = $[3], t0 = $[4]);
874
- const animated = t0 === void 0 ? !1 : t0, [visible, setVisible] = useState(!delay);
875
- let t1, t2;
876
- $[5] !== delay ? (t1 = () => {
877
- if (!delay)
878
- return setVisible(!0);
879
- const timeout = setTimeout(() => {
880
- setVisible(!0);
881
- }, delay);
882
- return () => {
883
- clearTimeout(timeout);
884
- };
885
- }, t2 = [delay], $[5] = delay, $[6] = t1, $[7] = t2) : (t1 = $[6], t2 = $[7]), useEffect(t1, t2);
886
- const t3 = useArrayProp(radius);
887
- let t4;
888
- return $[8] !== animated || $[9] !== ref || $[10] !== restProps || $[11] !== t3 || $[12] !== visible ? (t4 = /* @__PURE__ */ jsx(StyledSkeleton$1, { ...restProps, $animated: animated, $radius: t3, $visible: visible, ref }), $[8] = animated, $[9] = ref, $[10] = restProps, $[11] = t3, $[12] = visible, $[13] = t4) : t4 = $[13], t4;
889
- });
890
- Skeleton.displayName = "ForwardRef(Skeleton)";
891
- const StyledSkeleton = /* @__PURE__ */ styled(Skeleton).withConfig({
892
- displayName: "StyledSkeleton",
893
- componentId: "sc-2p7a1v-0"
894
- })((props) => {
895
- const {
896
- $size,
897
- $style
898
- } = props, {
899
- font,
900
- media
901
- } = getTheme_v2(props.theme), fontStyle = font[$style];
902
- return _responsive(media, $size, (sizeIndex) => {
903
- const fontSize = fontStyle.sizes[sizeIndex];
904
- return {
905
- height: fontSize.lineHeight - fontSize.ascenderHeight - fontSize.descenderHeight
906
- };
907
- });
908
- }), TextSkeleton = forwardRef(function(props, ref) {
909
- const $ = c(7);
910
- let restProps, t0;
911
- $[0] !== props ? ({
912
- size: t0,
913
- ...restProps
914
- } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
915
- const $size = useArrayProp(t0 === void 0 ? 2 : t0);
916
- let t1;
917
- return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(StyledSkeleton, { ...restProps, $size, ref, $style: "text" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
918
- });
919
- TextSkeleton.displayName = "ForwardRef(TextSkeleton)";
920
- const LabelSkeleton = forwardRef(function(props, ref) {
921
- const $ = c(7);
922
- let restProps, t0;
923
- $[0] !== props ? ({
924
- size: t0,
925
- ...restProps
926
- } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
927
- const $size = useArrayProp(t0 === void 0 ? 2 : t0);
928
- let t1;
929
- return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(StyledSkeleton, { ...restProps, $size, ref, $style: "label" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
930
- });
931
- LabelSkeleton.displayName = "ForwardRef(LabelSkeleton)";
932
- const HeadingSkeleton = forwardRef(function(props, ref) {
933
- const $ = c(7);
934
- let restProps, t0;
935
- $[0] !== props ? ({
936
- size: t0,
937
- ...restProps
938
- } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
939
- const $size = useArrayProp(t0 === void 0 ? 2 : t0);
940
- let t1;
941
- return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(StyledSkeleton, { ...restProps, $size, ref, $style: "heading" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
942
- });
943
- HeadingSkeleton.displayName = "ForwardRef(HeadingSkeleton)";
944
- const CodeSkeleton = forwardRef(function(props, ref) {
945
- const $ = c(7);
946
- let restProps, t0;
947
- $[0] !== props ? ({
948
- size: t0,
949
- ...restProps
950
- } = props, $[0] = props, $[1] = restProps, $[2] = t0) : (restProps = $[1], t0 = $[2]);
951
- const $size = useArrayProp(t0 === void 0 ? 2 : t0);
952
- let t1;
953
- return $[3] !== $size || $[4] !== ref || $[5] !== restProps ? (t1 = /* @__PURE__ */ jsx(StyledSkeleton, { ...restProps, $size, ref, $style: "code" }), $[3] = $size, $[4] = ref, $[5] = restProps, $[6] = t1) : t1 = $[6], t1;
954
- });
955
- CodeSkeleton.displayName = "ForwardRef(CodeSkeleton)";
956
- const TabPanel = forwardRef(function(props, ref) {
957
- const $ = c(9);
958
- let flex, restProps;
959
- $[0] !== props ? ({
960
- flex,
961
- ...restProps
962
- } = props, $[0] = props, $[1] = flex, $[2] = restProps) : (flex = $[1], restProps = $[2]);
963
- const t0 = props.tabIndex === void 0 ? 0 : props.tabIndex;
964
- let t1;
965
- return $[3] !== flex || $[4] !== props.children || $[5] !== ref || $[6] !== restProps || $[7] !== t0 ? (t1 = /* @__PURE__ */ jsx(Box, { "data-ui": "TabPanel", ...restProps, flex, ref, role: "tabpanel", tabIndex: t0, children: props.children }), $[3] = flex, $[4] = props.children, $[5] = ref, $[6] = restProps, $[7] = t0, $[8] = t1) : t1 = $[8], t1;
966
- });
967
- TabPanel.displayName = "ForwardRef(TabPanel)";
968
- const LOADING_BAR_HEIGHT = 2, STATUS_CARD_TONE = {
969
- error: "critical",
970
- warning: "caution",
971
- success: "positive",
972
- info: "neutral"
973
- }, BUTTON_TONE = {
974
- error: "critical",
975
- warning: "caution",
976
- success: "positive",
977
- info: "neutral"
978
- }, TextBox = styled(Flex).withConfig({
979
- displayName: "TextBox",
980
- componentId: "sc-1rr7rxo-0"
981
- })`overflow-x:auto;`, StyledToast = styled(Card).withConfig({
982
- displayName: "StyledToast",
983
- componentId: "sc-1rr7rxo-1"
984
- })`pointer-events:all;width:100%;position:relative;overflow:hidden;overflow:clip;&[data-has-duration]{padding-bottom:calc(${LOADING_BAR_HEIGHT}px / 2);}`, LoadingBar = styled.div.withConfig({
985
- displayName: "LoadingBar",
986
- componentId: "sc-1rr7rxo-2"
987
- })`display:flex;position:absolute;bottom:0px;top:0px;left:0px;right:0px;pointer-events:none;z-index:-1;overflow:hidden;overflow:clip;background:transparent;align-items:flex-end;will-change:opacity;`, LoadingBarMask = styled(Card).withConfig({
988
- displayName: "LoadingBarMask",
989
- componentId: "sc-1rr7rxo-3"
990
- })`position:absolute;top:0;left:-${LOADING_BAR_HEIGHT}px;right:-${LOADING_BAR_HEIGHT}px;bottom:${LOADING_BAR_HEIGHT}px;z-index:1;`, LoadingBarProgress = styled(Card).withConfig({
991
- displayName: "LoadingBarProgress",
992
- componentId: "sc-1rr7rxo-4"
993
- })`display:block;height:100%;width:100%;transform-origin:0% 50%;background-color:${(props) => {
994
- const {
995
- color
996
- } = getTheme_v2(props.theme);
997
- return color.button.default[props.tone].enabled.bg;
998
- }};`, ROLES = {
999
- error: "alert",
1000
- warning: "alert",
1001
- success: "alert",
1002
- info: "alert"
1003
- }, LONG_ENOUGH_BUT_NOT_TOO_LONG = 1e3 * 60 * 60 * 24 * 24;
1004
- function Toast(props) {
1005
- const $ = c(50);
1006
- let closable, description, duration, onClose, restProps, status, t0, title, updatedAt;
1007
- $[0] !== props ? ({
1008
- closable,
1009
- description,
1010
- duration,
1011
- onClose,
1012
- radius: t0,
1013
- title,
1014
- status,
1015
- updatedAt,
1016
- ...restProps
1017
- } = props, $[0] = props, $[1] = closable, $[2] = description, $[3] = duration, $[4] = onClose, $[5] = restProps, $[6] = status, $[7] = t0, $[8] = title, $[9] = updatedAt) : (closable = $[1], description = $[2], duration = $[3], onClose = $[4], restProps = $[5], status = $[6], t0 = $[7], title = $[8], updatedAt = $[9]);
1018
- const radius = t0 === void 0 ? 3 : t0, cardTone = status ? STATUS_CARD_TONE[status] : "default", buttonTone = status ? BUTTON_TONE[status] : "default", role = status ? ROLES[status] : "status", visualDuration = usePrefersReducedMotion() ? 0 : 0.26;
1019
- let t1;
1020
- $[10] !== visualDuration ? (t1 = visualDuration ? {
1021
- type: "spring",
1022
- visualDuration,
1023
- bounce: 0.25
1024
- } : {
1025
- duration: 0
1026
- }, $[10] = visualDuration, $[11] = t1) : t1 = $[11];
1027
- const transition = t1, hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG;
1028
- let t2;
1029
- $[12] === Symbol.for("react.memo_cache_sentinel") ? (t2 = ["hidden", "initial"], $[12] = t2) : t2 = $[12];
1030
- const initial = t2;
1031
- let t3;
1032
- $[13] === Symbol.for("react.memo_cache_sentinel") ? (t3 = ["visible", "slideIn"], $[13] = t3) : t3 = $[13];
1033
- const animate = t3;
1034
- let t4;
1035
- $[14] === Symbol.for("react.memo_cache_sentinel") ? (t4 = ["hidden", "slideOut"], $[14] = t4) : t4 = $[14];
1036
- const exit = t4, t5 = hasDuration ? "" : void 0;
1037
- let t6;
1038
- $[15] !== title ? (t6 = title && /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: title }), $[15] = title, $[16] = t6) : t6 = $[16];
1039
- let t7;
1040
- $[17] !== description || $[18] !== transition ? (t7 = description && /* @__PURE__ */ jsx(MotionText, { muted: !0, size: 1, variants: content, transition, children: description }), $[17] = description, $[18] = transition, $[19] = t7) : t7 = $[19];
1041
- let t8;
1042
- $[20] !== t6 || $[21] !== t7 ? (t8 = /* @__PURE__ */ jsx(TextBox, { flex: 1, padding: 3, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
1043
- t6,
1044
- t7
1045
- ] }) }), $[20] = t6, $[21] = t7, $[22] = t8) : t8 = $[22];
1046
- let t9;
1047
- $[23] !== buttonTone || $[24] !== closable || $[25] !== onClose ? (t9 = closable && /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Button, { as: "button", icon: CloseIcon, mode: "bleed", padding: 2, tone: buttonTone, onClick: onClose, style: {
1048
- verticalAlign: "top"
1049
- } }) }), $[23] = buttonTone, $[24] = closable, $[25] = onClose, $[26] = t9) : t9 = $[26];
1050
- let t10;
1051
- $[27] !== t8 || $[28] !== t9 || $[29] !== transition ? (t10 = /* @__PURE__ */ jsxs(MotionFlex, { align: "flex-start", variants: content, transition, children: [
1052
- t8,
1053
- t9
1054
- ] }), $[27] = t8, $[28] = t9, $[29] = transition, $[30] = t10) : t10 = $[30];
1055
- let t11;
1056
- $[31] !== cardTone || $[32] !== duration || $[33] !== hasDuration || $[34] !== onClose || $[35] !== radius || $[36] !== transition || $[37] !== updatedAt || $[38] !== visualDuration ? (t11 = hasDuration && /* @__PURE__ */ jsxs(MotionLoadingBar, { variants: content, transition, children: [
1057
- /* @__PURE__ */ jsx(LoadingBarMask, { tone: cardTone, radius }),
1058
- /* @__PURE__ */ jsx(MotionLoadingBarProgress, { tone: cardTone, initial: {
1059
- scaleX: 0
1060
- }, animate: {
1061
- scaleX: 1
1062
- }, transition: {
1063
- delay: visualDuration,
1064
- duration: duration / 1e3,
1065
- ease: "linear"
1066
- }, onAnimationComplete: onClose }, `progress-${updatedAt}`)
1067
- ] }), $[31] = cardTone, $[32] = duration, $[33] = hasDuration, $[34] = onClose, $[35] = radius, $[36] = transition, $[37] = updatedAt, $[38] = visualDuration, $[39] = t11) : t11 = $[39];
1068
- let t12;
1069
- return $[40] !== cardTone || $[41] !== radius || $[42] !== restProps || $[43] !== role || $[44] !== t10 || $[45] !== t11 || $[46] !== t5 || $[47] !== transition || $[48] !== visualDuration ? (t12 = /* @__PURE__ */ jsxs(MotionToast, { "data-ui": "Toast", role, ...restProps, "data-has-duration": t5, custom: visualDuration, radius, shadow: 2, tone: cardTone, forwardedAs: "li", layout: "position", variants: container, initial, animate, exit, transition, children: [
1070
- t10,
1071
- t11
1072
- ] }), $[40] = cardTone, $[41] = radius, $[42] = restProps, $[43] = role, $[44] = t10, $[45] = t11, $[46] = t5, $[47] = transition, $[48] = visualDuration, $[49] = t12) : t12 = $[49], t12;
1073
- }
1074
- Toast.displayName = "Toast";
1075
- const container = {
1076
- initial: {
1077
- y: 32,
1078
- scale: 0.5,
1079
- zIndex: 1
1080
- },
1081
- hidden: {
1082
- opacity: 0
1083
- },
1084
- visible: (visualDuration) => visualDuration ? {
1085
- opacity: 1,
1086
- transition: {
1087
- when: "beforeChildren",
1088
- staggerChildren: visualDuration / 3,
1089
- duration: visualDuration / 3
1090
- }
1091
- } : {
1092
- opacity: 1
1093
- },
1094
- slideIn: {
1095
- y: 0,
1096
- scale: 1
1097
- },
1098
- slideOut: {
1099
- zIndex: 0,
1100
- scale: 0.75
1101
- }
1102
- }, content = {
1103
- initial: {
1104
- willChange: "transform"
1105
- },
1106
- hidden: {
1107
- opacity: 0
1108
- },
1109
- visible: {
1110
- opacity: 1
1111
- }
1112
- }, MotionToast = motion.create(StyledToast), MotionFlex = motion.create(Flex), MotionText = motion.create(Text), MotionLoadingBar = motion.create(LoadingBar), MotionLoadingBarProgress = motion.create(LoadingBarProgress);
1113
- function useMounted() {
1114
- return useSyncExternalStore(subscribe, _temp$1, _temp2);
1115
- }
1116
- function _temp2() {
1117
- return !1;
1118
- }
1119
- function _temp$1() {
1120
- return !0;
1121
- }
1122
- const subscribe = () => () => {
1123
- }, ToastContext = createGlobalScopedContext("@sanity/ui/context/toast", null);
1124
- function ToastLayer(props) {
1125
- const $ = c(9), {
1126
- children,
1127
- padding: t0,
1128
- paddingX,
1129
- paddingY,
1130
- gap: t1
1131
- } = props, padding = t0 === void 0 ? 4 : t0, gap = t1 === void 0 ? 3 : t1, {
1132
- zIndex
1133
- } = useLayer();
1134
- let t2;
1135
- $[0] !== zIndex ? (t2 = {
1136
- zIndex
1137
- }, $[0] = zIndex, $[1] = t2) : t2 = $[1];
1138
- let t3;
1139
- return $[2] !== children || $[3] !== gap || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== t2 ? (t3 = /* @__PURE__ */ jsx(StyledLayer, { forwardedAs: "ul", "data-ui": "ToastProvider", padding, paddingX, paddingY, gap, columns: 1, style: t2, children }), $[2] = children, $[3] = gap, $[4] = padding, $[5] = paddingX, $[6] = paddingY, $[7] = t2, $[8] = t3) : t3 = $[8], t3;
1140
- }
1141
- ToastLayer.displayName = "ToastLayer";
1142
- const StyledLayer = styled(Grid).withConfig({
1143
- displayName: "StyledLayer",
1144
- componentId: "sc-1tbwn58-0"
1145
- })`box-sizing:border-box;position:fixed;right:0;bottom:0;list-style:none;pointer-events:none;max-width:420px;width:100%;`;
1146
- let toastId = 0;
1147
- function generateToastId() {
1148
- return String(toastId++);
1149
- }
1150
- function ToastProvider(props) {
1151
- const $ = c(13), {
1152
- children,
1153
- padding,
1154
- paddingX,
1155
- paddingY,
1156
- gap,
1157
- zOffset: t0
1158
- } = props, zOffset = t0 === void 0 ? 1 : t0;
1159
- let t1;
1160
- $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[0] = t1) : t1 = $[0];
1161
- const [state, setState] = useState(t1), mounted = useMounted();
1162
- let t2, t3;
1163
- $[1] === Symbol.for("react.memo_cache_sentinel") ? (t3 = {
1164
- version: 0,
1165
- push: (params) => {
1166
- const id = params.id || generateToastId(), duration = params.duration || 5e3;
1167
- return startTransition(() => {
1168
- setState((prevState) => {
1169
- if (duration === 0.01)
1170
- return prevState.filter((toast) => toast.id !== id);
1171
- const dismiss = () => startTransition(() => setState((currentState) => currentState.filter((toast_0) => toast_0.id !== id)));
1172
- return [...prevState.filter((toast_1) => toast_1.id !== id), {
1173
- dismiss,
1174
- id,
1175
- updatedAt: Date.now(),
1176
- params: {
1177
- ...params,
1178
- duration
1179
- }
1180
- }];
1181
- });
1182
- }), id;
1183
- }
1184
- }, $[1] = t3) : t3 = $[1], t2 = t3;
1185
- const value = t2;
1186
- let t4;
1187
- $[2] !== gap || $[3] !== mounted || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== state || $[8] !== zOffset ? (t4 = mounted && /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(ToastLayer, { padding, paddingX, paddingY, gap, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, mode: "popLayout", children: state.map(_temp) }) }) }), $[2] = gap, $[3] = mounted, $[4] = padding, $[5] = paddingX, $[6] = paddingY, $[7] = state, $[8] = zOffset, $[9] = t4) : t4 = $[9];
1188
- let t5;
1189
- return $[10] !== children || $[11] !== t4 ? (t5 = /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
1190
- children,
1191
- t4
1192
- ] }), $[10] = children, $[11] = t4, $[12] = t5) : t5 = $[12], t5;
1193
- }
1194
- function _temp(t0) {
1195
- const {
1196
- dismiss: dismiss_0,
1197
- id: id_0,
1198
- params: params_0,
1199
- updatedAt
1200
- } = t0;
1201
- return /* @__PURE__ */ jsx(Toast, { closable: params_0.closable, description: params_0.description, onClose: dismiss_0, status: params_0.status, title: params_0.title, duration: params_0.duration, updatedAt }, id_0);
1202
- }
1203
- ToastProvider.displayName = "ToastProvider";
1204
- function useToast() {
1205
- const value = useContext(ToastContext);
1206
- if (!value)
1207
- throw new Error("useToast(): missing context value");
1208
- if (!isRecord(value) || value.version !== 0)
1209
- throw new Error("useToast(): the context value is not compatible");
1210
- return value;
1211
- }
1212
- function _findPrevItemElement(state, itemElements, focusedElement) {
1213
- const idx = itemElements.indexOf(focusedElement), els = itemElements.slice(0, idx), len = els.length;
1214
- for (let i = len - 1; i >= 0; i -= 1) {
1215
- const itemKey = els[i].getAttribute("data-tree-key");
1216
- if (!itemKey)
1217
- continue;
1218
- const segments = itemKey.split("/");
1219
- segments.pop();
1220
- const p = [];
1221
- let expanded = !0;
1222
- for (let j = 0; j < segments.length; j += 1) {
1223
- p.push(segments[j]);
1224
- const k = p.join("/");
1225
- if (!state[k]?.expanded) {
1226
- expanded = !1;
1227
- break;
1228
- }
1229
- }
1230
- if (expanded)
1231
- return els[i];
1232
- }
1233
- return null;
1234
- }
1235
- function _findNextItemElement(state, itemElements, focusedElement) {
1236
- const idx = itemElements.indexOf(focusedElement), els = itemElements.slice(idx), len = itemElements.length;
1237
- for (let i = 1; i < len; i += 1) {
1238
- if (!els[i])
1239
- continue;
1240
- const itemKey = els[i].getAttribute("data-tree-key");
1241
- if (!itemKey)
1242
- continue;
1243
- const segments = itemKey.split("/");
1244
- segments.pop();
1245
- const p = [];
1246
- let expanded = !0;
1247
- for (let j = 0; j < segments.length; j += 1) {
1248
- p.push(segments[j]);
1249
- const k = p.join("/");
1250
- if (!state[k]?.expanded) {
1251
- expanded = !1;
1252
- break;
1253
- }
1254
- }
1255
- if (expanded)
1256
- return els[i];
1257
- }
1258
- return null;
1259
- }
1260
- function _focusItemElement(el) {
1261
- if (el.getAttribute("role") === "treeitem" && el.focus(), el.getAttribute("role") === "none") {
1262
- const firstChild = el.firstChild;
1263
- firstChild && firstChild instanceof HTMLElement && firstChild.focus();
1264
- }
1265
- }
1266
- const TreeContext = createGlobalScopedContext("@sanity/ui/context/tree", null), Tree = memo(forwardRef(function(props, forwardedRef) {
1267
- const $ = c(37);
1268
- let children, onFocus, restProps, t0;
1269
- $[0] !== props ? ({
1270
- children,
1271
- space: t0,
1272
- onFocus,
1273
- ...restProps
1274
- } = props, $[0] = props, $[1] = children, $[2] = onFocus, $[3] = restProps, $[4] = t0) : (children = $[1], onFocus = $[2], restProps = $[3], t0 = $[4]);
1275
- const space = t0 === void 0 ? 1 : t0, ref = useRef(null), [focusedElement, setFocusedElement] = useState(null), focusedElementRef = useRef(focusedElement);
1276
- let t1, t2;
1277
- $[5] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[5] = t2) : t2 = $[5], t1 = t2;
1278
- const path = t1;
1279
- let t3;
1280
- $[6] === Symbol.for("react.memo_cache_sentinel") ? (t3 = [], $[6] = t3) : t3 = $[6];
1281
- const [itemElements, setItemElements] = useState(t3);
1282
- let t4;
1283
- $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = {}, $[7] = t4) : t4 = $[7];
1284
- const [state, setState] = useState(t4), stateRef = useRef(state);
1285
- let t5;
1286
- $[8] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => ref.current, $[8] = t5) : t5 = $[8], useImperativeHandle(forwardedRef, t5);
1287
- let t6, t7;
1288
- $[9] !== focusedElement ? (t6 = () => {
1289
- focusedElementRef.current = focusedElement;
1290
- }, t7 = [focusedElement], $[9] = focusedElement, $[10] = t6, $[11] = t7) : (t6 = $[10], t7 = $[11]), useEffect(t6, t7);
1291
- let t8, t9;
1292
- $[12] !== state ? (t8 = () => {
1293
- stateRef.current = state;
1294
- }, t9 = [state], $[12] = state, $[13] = t8, $[14] = t9) : (t8 = $[13], t9 = $[14]), useEffect(t8, t9);
1295
- let t10;
1296
- $[15] === Symbol.for("react.memo_cache_sentinel") ? (t10 = (element, path_0, expanded, selected) => (setState((s) => ({
1297
- ...s,
1298
- [path_0]: {
1299
- element,
1300
- expanded
1301
- }
1302
- })), selected && setFocusedElement(element), () => {
1303
- setState((s_0) => {
1304
- const newState = {
1305
- ...s_0
1306
- };
1307
- return delete newState[path_0], newState;
1308
- });
1309
- }), $[15] = t10) : t10 = $[15];
1310
- const registerItem = t10;
1311
- let t11;
1312
- $[16] === Symbol.for("react.memo_cache_sentinel") ? (t11 = (path_1, expanded_0) => {
1313
- setState((s_1) => {
1314
- const itemState = s_1[path_1];
1315
- return itemState ? {
1316
- ...s_1,
1317
- [path_1]: {
1318
- ...itemState,
1319
- expanded: expanded_0
1320
- }
1321
- } : s_1;
1322
- });
1323
- }, $[16] = t11) : t11 = $[16];
1324
- const setExpanded = t11;
1325
- let t12;
1326
- const t13 = focusedElement || itemElements[0] || null;
1327
- let t14;
1328
- $[17] !== space || $[18] !== state || $[19] !== t13 ? (t14 = {
1329
- version: 0,
1330
- focusedElement: t13,
1331
- level: 0,
1332
- path,
1333
- registerItem,
1334
- setExpanded,
1335
- setFocusedElement,
1336
- space,
1337
- state
1338
- }, $[17] = space, $[18] = state, $[19] = t13, $[20] = t14) : t14 = $[20], t12 = t14;
1339
- const contextValue = t12;
1340
- let t15;
1341
- $[21] !== itemElements ? (t15 = (event) => {
1342
- if (focusedElementRef.current) {
1343
- if (event.key === "ArrowDown") {
1344
- event.preventDefault();
1345
- const nextEl = _findNextItemElement(stateRef.current, itemElements, focusedElementRef.current);
1346
- nextEl && (_focusItemElement(nextEl), setFocusedElement(nextEl));
1347
- return;
1348
- }
1349
- if (event.key === "ArrowUp") {
1350
- event.preventDefault();
1351
- const prevEl = _findPrevItemElement(stateRef.current, itemElements, focusedElementRef.current);
1352
- prevEl && (_focusItemElement(prevEl), setFocusedElement(prevEl));
1353
- return;
1354
- }
1355
- if (event.key === "ArrowLeft") {
1356
- event.preventDefault();
1357
- const itemKey = focusedElementRef.current.getAttribute("data-tree-key");
1358
- if (!itemKey)
1359
- return;
1360
- const itemState_0 = stateRef.current[itemKey];
1361
- if (!itemState_0)
1362
- return;
1363
- if (itemState_0.expanded)
1364
- setState((s_2) => {
1365
- const itemState_1 = s_2[itemKey];
1366
- return itemState_1 ? {
1367
- ...s_2,
1368
- [itemKey]: {
1369
- ...itemState_1,
1370
- expanded: !1
1371
- }
1372
- } : s_2;
1373
- });
1374
- else {
1375
- const itemPath = itemKey.split("/");
1376
- itemPath.pop();
1377
- const parentKey = itemPath.join("/"), parentState = parentKey && stateRef.current[parentKey];
1378
- parentState && (parentState.element.focus(), setFocusedElement(parentState.element));
1379
- }
1380
- return;
1381
- }
1382
- if (event.key === "ArrowRight") {
1383
- event.preventDefault();
1384
- const focusedKey = focusedElementRef.current.getAttribute("data-tree-key");
1385
- if (!focusedKey)
1386
- return;
1387
- stateRef.current[focusedKey]?.expanded || setState((s_3) => {
1388
- const itemState_2 = s_3[focusedKey];
1389
- return itemState_2 ? {
1390
- ...s_3,
1391
- [focusedKey]: {
1392
- ...itemState_2,
1393
- expanded: !0
1394
- }
1395
- } : s_3;
1396
- });
1397
- return;
1398
- }
1399
- }
1400
- }, $[21] = itemElements, $[22] = t15) : t15 = $[22];
1401
- const handleKeyDown = t15;
1402
- let t16;
1403
- $[23] !== onFocus ? (t16 = (event_0) => {
1404
- setFocusedElement(event_0.target), onFocus?.(event_0);
1405
- }, $[23] = onFocus, $[24] = t16) : t16 = $[24];
1406
- const handleFocus = t16;
1407
- let t17;
1408
- $[25] === Symbol.for("react.memo_cache_sentinel") ? (t17 = () => {
1409
- if (!ref.current)
1410
- return;
1411
- const _itemElements = Array.from(ref.current.querySelectorAll('[data-ui="TreeItem"]'));
1412
- setItemElements(_itemElements);
1413
- }, $[25] = t17) : t17 = $[25];
1414
- let t18;
1415
- $[26] !== children ? (t18 = [children], $[26] = children, $[27] = t18) : t18 = $[27], useEffect(t17, t18);
1416
- let t19;
1417
- $[28] !== children || $[29] !== handleFocus || $[30] !== handleKeyDown || $[31] !== restProps || $[32] !== space ? (t19 = /* @__PURE__ */ jsx(Stack, { as: "ul", "data-ui": "Tree", ...restProps, onFocus: handleFocus, onKeyDown: handleKeyDown, ref, role: "tree", space, children }), $[28] = children, $[29] = handleFocus, $[30] = handleKeyDown, $[31] = restProps, $[32] = space, $[33] = t19) : t19 = $[33];
1418
- let t20;
1419
- return $[34] !== contextValue || $[35] !== t19 ? (t20 = /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: t19 }), $[34] = contextValue, $[35] = t19, $[36] = t20) : t20 = $[36], t20;
1420
- }));
1421
- Tree.displayName = "Memo(ForwardRef(Tree))";
1422
- function treeItemRootStyle() {
1423
- return css`
1424
- &[role='none'] > [role='treeitem'] {
1425
- outline: none;
1426
- cursor: default;
1427
- border-radius: 3px;
1428
-
1429
- background-color: var(--card-bg-color);
1430
- color: var(--treeitem-fg-color);
1431
-
1432
- &:focus {
1433
- position: relative;
1434
- }
1435
- }
1436
-
1437
- &[role='treeitem'] {
1438
- outline: none;
1439
-
1440
- & > div {
1441
- cursor: default;
1442
- border-radius: 3px;
1443
-
1444
- background-color: var(--card-bg-color);
1445
- color: var(--treeitem-fg-color);
1446
- }
1447
-
1448
- &:focus > div {
1449
- position: relative;
1450
- }
1451
- }
1452
- `;
1453
- }
1454
- function treeItemRootColorStyle(props) {
1455
- const $tone = "default", {
1456
- color
1457
- } = getTheme_v2(props.theme), tone = color.selectable[$tone];
1458
- return css`
1459
- &[role='none'] {
1460
- & > [role='treeitem'] {
1461
- ${_cardColorStyle(color, tone.enabled)}
1462
- }
1463
-
1464
- &[data-selected] > [role='treeitem'] {
1465
- ${_cardColorStyle(color, tone.pressed)}
1466
- }
1467
-
1468
- @media (hover: hover) {
1469
- &:not([data-selected]) > [role='treeitem']:not(:focus):hover {
1470
- ${_cardColorStyle(color, tone.hovered)}
1471
- }
1472
-
1473
- & > [role='treeitem']:focus {
1474
- ${_cardColorStyle(color, tone.selected)}
1475
- }
1476
- }
1477
- }
1478
-
1479
- &[role='treeitem'] {
1480
- & > [data-ui='TreeItem__box'] {
1481
- ${_cardColorStyle(color, tone.enabled)}
1482
- }
1483
-
1484
- &[data-selected] > [data-ui='TreeItem__box'] {
1485
- ${_cardColorStyle(color, tone.pressed)}
1486
- }
1487
-
1488
- @media (hover: hover) {
1489
- &:not([data-selected]):not(:focus) > [data-ui='TreeItem__box']:hover {
1490
- ${_cardColorStyle(color, tone.hovered)}
1491
- }
1492
-
1493
- &:focus > [data-ui='TreeItem__box'] {
1494
- ${_cardColorStyle(color, tone.selected)}
1495
- }
1496
- }
1497
- }
1498
- `;
1499
- }
1500
- function treeItemBoxStyle(props) {
1501
- const {
1502
- $level
1503
- } = props, {
1504
- space
1505
- } = getTheme_v2(props.theme);
1506
- return css`
1507
- padding-left: ${rem(space[2] * $level)};
1508
-
1509
- &[data-as='a'] {
1510
- text-decoration: none;
1511
- }
1512
- `;
1513
- }
1514
- function useTree() {
1515
- const tree = useContext(TreeContext);
1516
- if (!tree)
1517
- throw new Error("Tree: missing context value");
1518
- return tree;
1519
- }
1520
- const TreeGroup = memo(function(props) {
1521
- const $ = c(9);
1522
- let children, restProps, t0;
1523
- $[0] !== props ? ({
1524
- children,
1525
- expanded: t0,
1526
- ...restProps
1527
- } = props, $[0] = props, $[1] = children, $[2] = restProps, $[3] = t0) : (children = $[1], restProps = $[2], t0 = $[3]);
1528
- const expanded = t0 === void 0 ? !1 : t0, tree = useTree(), t1 = !expanded;
1529
- let t2;
1530
- return $[4] !== children || $[5] !== restProps || $[6] !== t1 || $[7] !== tree.space ? (t2 = /* @__PURE__ */ jsx(Stack, { as: "ul", "data-ui": "TreeGroup", ...restProps, hidden: t1, marginTop: tree.space, role: "group", space: tree.space, children }), $[4] = children, $[5] = restProps, $[6] = t1, $[7] = tree.space, $[8] = t2) : t2 = $[8], t2;
1531
- }), StyledTreeItem = memo(styled.li.withConfig({
1532
- displayName: "StyledTreeItem",
1533
- componentId: "sc-iiskig-0"
1534
- })(treeItemRootStyle, treeItemRootColorStyle)), TreeItemBox = /* @__PURE__ */ styled(Box).attrs({
1535
- forwardedAs: "a"
1536
- }).withConfig({
1537
- displayName: "TreeItemBox",
1538
- componentId: "sc-iiskig-1"
1539
- })(treeItemBoxStyle), ToggleArrowText = styled(Text).withConfig({
1540
- displayName: "ToggleArrowText",
1541
- componentId: "sc-iiskig-2"
1542
- })`& > svg{transition:transform 100ms;}`, TreeItem = memo(function(props) {
1543
- const {
1544
- children,
1545
- expanded: expandedProp = !1,
1546
- fontSize = 1,
1547
- href,
1548
- icon: IconComponent,
1549
- id: idProp,
1550
- linkAs,
1551
- muted,
1552
- onClick,
1553
- padding = 2,
1554
- selected = !1,
1555
- space = 2,
1556
- text,
1557
- weight,
1558
- ...restProps
1559
- } = props, rootRef = useRef(null), treeitemRef = useRef(null), tree = useTree(), {
1560
- path,
1561
- registerItem,
1562
- setExpanded,
1563
- setFocusedElement
1564
- } = tree, _id = useId(), id = idProp || _id, itemPath = useMemo(() => path.concat([id || ""]), [id, path]), itemKey = itemPath.join("/"), itemState = tree.state[itemKey], focused = tree.focusedElement === rootRef.current, expanded = itemState?.expanded === void 0 ? expandedProp : itemState?.expanded || !1, tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1, contextValue = useMemo(() => ({
1565
- ...tree,
1566
- level: tree.level + 1,
1567
- path: itemPath
1568
- }), [itemPath, tree]), handleClick = useCallback((event) => {
1569
- onClick && onClick(event);
1570
- const target = event.target;
1571
- target instanceof HTMLElement && (target.getAttribute("data-ui") === "TreeItem" || target.closest('[data-ui="TreeItem__box"]')) && (event.stopPropagation(), setExpanded(itemKey, !expanded), setFocusedElement(rootRef.current));
1572
- }, [expanded, itemKey, onClick, setExpanded, setFocusedElement]), handleKeyDown = useCallback((event_0) => {
1573
- focused && event_0.key === "Enter" && (treeitemRef.current || rootRef.current)?.click();
1574
- }, [focused]);
1575
- useEffect(() => {
1576
- if (rootRef.current)
1577
- return registerItem(rootRef.current, itemPath.join("/"), expanded, selected);
1578
- }, [expanded, itemPath, registerItem, selected]);
1579
- const content2 = /* @__PURE__ */ jsxs(Flex, { padding, children: [
1580
- /* @__PURE__ */ jsxs(Box, { marginRight: space, style: {
1581
- visibility: IconComponent || children ? "visible" : "hidden",
1582
- pointerEvents: "none"
1583
- }, children: [
1584
- IconComponent && /* @__PURE__ */ jsx(Text, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsx(IconComponent, {}) }),
1585
- !IconComponent && /* @__PURE__ */ jsx(ToggleArrowText, { muted, size: fontSize, weight, children: /* @__PURE__ */ jsx(ToggleArrowRightIcon, { style: {
1586
- transform: expanded ? "rotate(90deg)" : void 0
1587
- } }) })
1588
- ] }),
1589
- /* @__PURE__ */ jsx(Box, { flex: 1, children: /* @__PURE__ */ jsx(Text, { muted, size: fontSize, textOverflow: "ellipsis", weight, children: text }) })
1590
- ] });
1591
- return href ? /* @__PURE__ */ jsxs(StyledTreeItem, { "data-selected": selected ? "" : void 0, "data-tree-id": id, "data-tree-key": itemKey, "data-ui": "TreeItem", ...restProps, onClick: handleClick, ref: rootRef, role: "none", children: [
1592
- /* @__PURE__ */ jsx(TreeItemBox, { $level: tree.level, "aria-expanded": expanded, as: linkAs, "data-ui": "TreeItem__box", href, ref: treeitemRef, role: "treeitem", tabIndex, children: content2 }),
1593
- /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { hidden: !expanded, children }) })
1594
- ] }) : /* @__PURE__ */ jsxs(StyledTreeItem, { "data-selected": selected ? "" : void 0, "data-ui": "TreeItem", "data-tree-id": id, "data-tree-key": itemKey, ...restProps, "aria-expanded": expanded, onClick: handleClick, onKeyDown: handleKeyDown, ref: rootRef, role: "treeitem", tabIndex, children: [
1595
- /* @__PURE__ */ jsx(TreeItemBox, { $level: tree.level, as: "div", "data-ui": "TreeItem__box", children: content2 }),
1596
- /* @__PURE__ */ jsx(TreeContext.Provider, { value: contextValue, children: children && /* @__PURE__ */ jsx(TreeGroup, { expanded, children }) })
1597
- ] });
1598
- });
1599
- TreeItem.displayName = "Memo(TreeItem)";
1600
- export {
1601
- Arrow,
1602
- Autocomplete,
1603
- Avatar,
1604
- AvatarCounter,
1605
- AvatarStack,
1606
- Badge,
1607
- BoundaryElementProvider,
1608
- Box,
1609
- Breadcrumbs,
1610
- Button,
1611
- Card,
1612
- Checkbox,
1613
- Code,
1614
- CodeSkeleton,
1615
- ConditionalWrapper,
1616
- Container,
1617
- Dialog,
1618
- DialogContext,
1619
- DialogProvider,
1620
- ElementQuery,
1621
- ErrorBoundary,
1622
- Flex,
1623
- Grid,
1624
- Heading,
1625
- HeadingSkeleton,
1626
- Hotkeys,
1627
- Inline,
1628
- KBD,
1629
- Label,
1630
- LabelSkeleton,
1631
- Layer,
1632
- LayerProvider,
1633
- Menu,
1634
- MenuButton,
1635
- MenuDivider,
1636
- MenuGroup,
1637
- MenuItem,
1638
- Popover,
1639
- Portal,
1640
- PortalProvider,
1641
- Radio,
1642
- Select,
1643
- Skeleton,
1644
- Spinner,
1645
- SrOnly,
1646
- Stack,
1647
- Switch,
1648
- Tab,
1649
- TabList,
1650
- TabPanel,
1651
- Text,
1652
- TextArea,
1653
- TextInput,
1654
- TextSkeleton,
1655
- ThemeColorProvider,
1656
- ThemeProvider,
1657
- Toast,
1658
- ToastProvider,
1659
- Tooltip,
1660
- TooltipDelayGroupContext,
1661
- TooltipDelayGroupProvider,
1662
- Tree,
1663
- TreeItem,
1664
- VirtualList,
1665
- _ResizeObserver,
1666
- _elementSizeObserver,
1667
- _fillCSSObject,
1668
- _getArrayProp,
1669
- _getResponsiveSpace,
1670
- _hasFocus,
1671
- _isEnterToClickElement,
1672
- _isScrollable,
1673
- _raf,
1674
- _raf2,
1675
- _responsive,
1676
- attemptFocus,
1677
- containsOrEqualsElement,
1678
- createColorTheme,
1679
- focusFirstDescendant,
1680
- focusLastDescendant,
1681
- hexToRgb,
1682
- hslToRgb,
1683
- isFocusable,
1684
- isHTMLAnchorElement,
1685
- isHTMLButtonElement,
1686
- isHTMLElement,
1687
- isHTMLInputElement,
1688
- isHTMLSelectElement,
1689
- isHTMLTextAreaElement,
1690
- multiply,
1691
- parseColor,
1692
- rem,
1693
- responsiveCodeFontStyle,
1694
- responsiveHeadingFont,
1695
- responsiveLabelFont,
1696
- responsiveTextAlignStyle,
1697
- responsiveTextFont,
1698
- rgbToHex,
1699
- rgbToHsl,
1700
- rgba,
1701
- screen,
1702
- studioTheme,
1703
- useArrayProp,
1704
- useBoundaryElement,
1705
- useClickOutside,
1706
- useClickOutsideEvent,
1707
- useCustomValidity,
1708
- useDialog,
1709
- useElementRect,
1710
- useElementSize,
1711
- useForwardedRef,
1712
- useGlobalKeyDown,
1713
- useLayer,
1714
- useMatchMedia,
1715
- useMediaIndex,
1716
- usePortal,
1717
- usePrefersDark,
1718
- usePrefersReducedMotion,
1719
- useRootTheme,
1720
- useTheme,
1721
- useTheme_v2,
1722
- useToast,
1723
- useTooltipDelayGroup,
1724
- useTree
1725
- };
1726
- //# sourceMappingURL=index.mjs.map