@sanity/ui 4.0.0-static.23 → 4.0.0-static.25

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 (300) hide show
  1. package/dist/_chunks-es/{refractor.js → Refractor.js} +1 -1
  2. package/dist/_chunks-es/{refractor.js.map → Refractor.js.map} +1 -1
  3. package/dist/css/index.css +1 -1
  4. package/dist/css/index.css.map +1 -1
  5. package/dist/css/index.d.ts +22 -6
  6. package/dist/css/index.js +29 -20
  7. package/dist/css/index.js.map +1 -1
  8. package/dist/index.d.ts +8 -13
  9. package/dist/index.js +541 -555
  10. package/dist/index.js.map +1 -1
  11. package/exports/css/index.css +1 -0
  12. package/package.json +4 -4
  13. package/src/core/Root.tsx +1 -1
  14. package/src/core/RootProvider.tsx +5 -5
  15. package/src/core/__workshop__/index.ts +1 -1
  16. package/src/core/components/autocomplete/{autocomplete.tsx → Autocomplete.tsx} +9 -9
  17. package/src/core/components/autocomplete/__workshop__/index.ts +6 -6
  18. package/src/core/components/autocomplete/types.ts +1 -1
  19. package/src/core/components/breadcrumbs/{breadcrumbs.tsx → Breadcrumbs.tsx} +6 -6
  20. package/src/core/components/breadcrumbs/__workshop__/index.ts +1 -1
  21. package/src/core/components/dialog/{dialog.tsx → Dialog.tsx} +4 -4
  22. package/src/core/components/dialog/{dialogCard.tsx → DialogCard.tsx} +5 -5
  23. package/src/core/components/dialog/{dialogProvider.tsx → DialogProvider.tsx} +1 -1
  24. package/src/core/components/dialog/__workshop__/{panes.tsx → Panes.tsx} +4 -0
  25. package/src/core/components/dialog/__workshop__/index.ts +10 -10
  26. package/src/core/components/dialog/useDialog.ts +3 -3
  27. package/src/core/components/hotkeys/{hotkeys.tsx → Hotkeys.tsx} +2 -2
  28. package/src/core/components/hotkeys/__workshop__/index.ts +1 -1
  29. package/src/core/components/menu/{menu.test.tsx → Menu.test.tsx} +1 -1
  30. package/src/core/components/menu/{menu.tsx → Menu.tsx} +3 -7
  31. package/src/core/components/menu/{menuButton.tsx → MenuButton.tsx} +3 -3
  32. package/src/core/components/menu/{menuGroup.tsx → MenuGroup.tsx} +6 -6
  33. package/src/core/components/menu/{menuItem.tsx → MenuItem.tsx} +6 -6
  34. package/src/core/components/menu/__workshop__/index.ts +16 -16
  35. package/src/core/components/menu/useMenu.ts +3 -3
  36. package/src/core/components/tab/{tab.tsx → Tab.tsx} +1 -1
  37. package/src/core/components/tab/{tabList.tsx → TabList.tsx} +2 -2
  38. package/src/core/components/tab/{tabPanel.tsx → TabPanel.tsx} +1 -1
  39. package/src/core/components/tab/__workshop__/index.ts +1 -1
  40. package/src/core/components/toast/{toast.test.tsx → Toast.test.tsx} +1 -1
  41. package/src/core/components/toast/{toast.tsx → Toast.tsx} +6 -6
  42. package/src/core/components/toast/{toastLayer.tsx → ToastLayer.tsx} +1 -1
  43. package/src/core/components/toast/{toastProvider.tsx → ToastProvider.tsx} +4 -4
  44. package/src/core/components/toast/__workshop__/index.ts +2 -2
  45. package/src/core/components/toast/useToast.ts +3 -3
  46. package/src/core/components/tree/{tree.tsx → Tree.tsx} +2 -2
  47. package/src/core/components/tree/{treeGroup.tsx → TreeGroup.tsx} +1 -1
  48. package/src/core/components/tree/{treeItem.tsx → TreeItem.tsx} +7 -7
  49. package/src/core/components/tree/__workshop__/index.ts +4 -4
  50. package/src/core/components/tree/useTree.ts +3 -3
  51. package/src/core/components/virtualList/{virtualList.tsx → VirtualList.tsx} +1 -1
  52. package/src/core/components/virtualList/__workshop__/index.ts +4 -4
  53. package/src/core/hooks/useMediaIndex/__workshop__/index.ts +1 -1
  54. package/src/core/index.ts +65 -62
  55. package/src/core/primitives/avatar/{avatar.tsx → Avatar.tsx} +4 -4
  56. package/src/core/primitives/avatar/{avatarCounter.tsx → AvatarCounter.tsx} +2 -2
  57. package/src/core/primitives/avatar/{avatarStack.tsx → AvatarStack.tsx} +3 -3
  58. package/src/core/primitives/avatar/__workshop__/PropsStory.tsx +22 -0
  59. package/src/core/primitives/avatar/__workshop__/index.ts +9 -4
  60. package/src/core/primitives/badge/{badge.test.tsx → Badge.test.tsx} +1 -1
  61. package/src/core/primitives/badge/{badge.tsx → Badge.tsx} +2 -2
  62. package/src/core/primitives/badge/__workshop__/index.ts +2 -2
  63. package/src/core/primitives/box/__workshop__/index.ts +2 -2
  64. package/src/core/primitives/button/{button.test.tsx → Button.test.tsx} +1 -1
  65. package/src/core/primitives/button/{button.tsx → Button.tsx} +8 -8
  66. package/src/core/primitives/button/__workshop__/index.ts +11 -11
  67. package/src/core/primitives/card/{card.tsx → Card.tsx} +5 -5
  68. package/src/core/primitives/card/{cardProvider.tsx → CardProvider.tsx} +1 -1
  69. package/src/core/primitives/card/__workshop__/index.ts +9 -9
  70. package/src/core/primitives/card/useCard.ts +3 -3
  71. package/src/core/primitives/checkbox/__workshop__/index.ts +4 -4
  72. package/src/core/primitives/code/{code.tsx → Code.tsx} +26 -2
  73. package/src/core/primitives/code/__workshop__/index.ts +2 -2
  74. package/src/core/primitives/container/{container.tsx → Container.tsx} +1 -1
  75. package/src/core/primitives/container/__workshop__/index.ts +1 -1
  76. package/src/core/primitives/flex/{flex.tsx → Flex.tsx} +1 -1
  77. package/src/core/primitives/flex/__workshop__/index.ts +2 -2
  78. package/src/core/primitives/grid/{grid.tsx → Grid.tsx} +1 -1
  79. package/src/core/primitives/grid/__workshop__/index.ts +1 -1
  80. package/src/core/primitives/heading/{heading.tsx → Heading.tsx} +16 -0
  81. package/src/core/primitives/heading/__workshop__/index.ts +2 -2
  82. package/src/core/primitives/inline/{inline.tsx → Inline.tsx} +1 -1
  83. package/src/core/primitives/inline/__workshop__/index.ts +1 -1
  84. package/src/core/primitives/kbd/{kbd.tsx → Kbd.tsx} +2 -2
  85. package/src/core/primitives/kbd/__workshop__/index.ts +1 -1
  86. package/src/core/primitives/label/{label.tsx → Label.tsx} +16 -0
  87. package/src/core/primitives/label/__workshop__/index.ts +2 -2
  88. package/src/core/primitives/layer/{layer.test.tsx → Layer.test.tsx} +1 -1
  89. package/src/core/primitives/layer/{layer.tsx → Layer.tsx} +3 -3
  90. package/src/core/primitives/layer/{layerCard.tsx → LayerCard.tsx} +2 -2
  91. package/src/core/primitives/layer/{layerProvider.tsx → LayerProvider.tsx} +3 -3
  92. package/src/core/primitives/layer/__workshop__/index.ts +3 -3
  93. package/src/core/primitives/layer/useLayer.ts +3 -3
  94. package/src/core/primitives/popover/{popover.tsx → Popover.tsx} +4 -4
  95. package/src/core/primitives/popover/{popoverLayer.tsx → PopoverLayer.tsx} +3 -3
  96. package/src/core/primitives/radio/{radio.tsx → Radio.tsx} +2 -2
  97. package/src/core/primitives/radio/__workshop__/index.ts +2 -2
  98. package/src/core/primitives/select/{select.tsx → Select.tsx} +7 -5
  99. package/src/core/primitives/select/__workshop__/index.ts +2 -2
  100. package/src/core/primitives/selectable/{selectable.tsx → Selectable.tsx} +1 -1
  101. package/src/core/primitives/skeleton/{codeSkeleton.tsx → CodeSkeleton.tsx} +1 -1
  102. package/src/core/primitives/skeleton/{headingSkeleton.tsx → HeadingSkeleton.tsx} +1 -1
  103. package/src/core/primitives/skeleton/{labelSkeleton.tsx → LabelSkeleton.tsx} +1 -1
  104. package/src/core/primitives/skeleton/{textSkeleton.tsx → TextSkeleton.tsx} +1 -1
  105. package/src/core/primitives/skeleton/__workshop__/index.ts +2 -2
  106. package/src/core/primitives/spinner/{spinner.tsx → Spinner.tsx} +2 -2
  107. package/src/core/primitives/stack/{stack.tsx → Stack.tsx} +1 -1
  108. package/src/core/primitives/stack/__workshop__/index.ts +1 -1
  109. package/src/core/primitives/switch/{switch.tsx → Switch.tsx} +2 -10
  110. package/src/core/primitives/switch/__workshop__/index.ts +2 -2
  111. package/src/core/primitives/text/{text.tsx → Text.tsx} +14 -0
  112. package/src/core/primitives/text/__workshop__/index.ts +3 -3
  113. package/src/core/primitives/textArea/{textArea.tsx → TextArea.tsx} +7 -1
  114. package/src/core/primitives/textArea/__workshop__/index.ts +1 -1
  115. package/src/core/primitives/textInput/{textInput.tsx → TextInput.tsx} +21 -20
  116. package/src/core/primitives/textInput/__workshop__/index.ts +7 -7
  117. package/src/core/primitives/tooltip/{tooltip.test.tsx → Tooltip.test.tsx} +4 -4
  118. package/src/core/primitives/tooltip/{tooltip.tsx → Tooltip.tsx} +6 -5
  119. package/src/core/primitives/tooltip/{tooltipLayer.tsx → TooltipLayer.tsx} +2 -2
  120. package/src/core/primitives/tooltip/__workshop__/index.ts +4 -4
  121. package/src/core/primitives/tooltip/tooltipDelayGroup/{tooltipDelayGroupProvider.tsx → TooltipDelayGroupProvider.tsx} +1 -1
  122. package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts +3 -3
  123. package/src/core/types.ts +6 -5
  124. package/src/core/utils/{errorBoundary.tsx → ErrorBoundary.tsx} +1 -1
  125. package/src/core/utils/boundaryElement/{boundaryElement.test.tsx → BoundaryElement.test.tsx} +1 -1
  126. package/src/core/utils/boundaryElement/{boundaryElementProvider.tsx → BoundaryElementProvider.tsx} +1 -1
  127. package/src/core/utils/boundaryElement/__workshop__/index.ts +1 -1
  128. package/src/core/utils/boundaryElement/useBoundaryElement.ts +3 -3
  129. package/src/core/utils/elementQuery/__workshop__/index.ts +1 -1
  130. package/src/core/utils/portal/{portal.test.tsx → Portal.test.tsx} +1 -1
  131. package/src/core/utils/portal/{portal.tsx → Portal.tsx} +1 -1
  132. package/src/core/utils/portal/{portalProvider.tsx → PortalProvider.tsx} +3 -3
  133. package/src/core/utils/portal/__workshop__/index.ts +1 -1
  134. package/src/core/utils/portal/usePortal.ts +3 -3
  135. package/src/css/_responsiveStyle.css.ts +2 -2
  136. package/src/css/primitives/_input/_input.css.ts +2 -3
  137. package/src/css/primitives/_input/input.ts +2 -0
  138. package/src/css/primitives/_input/types.ts +2 -1
  139. package/src/css/primitives/avatar/avatar.css.ts +8 -0
  140. package/src/css/primitives/box/box.css.ts +21 -1
  141. package/src/css/primitives/button/button.css.ts +1 -0
  142. package/src/css/primitives/card/__workshop__/index.ts +1 -1
  143. package/src/css/primitives/card/card.css.ts +0 -60
  144. package/src/css/primitives/checkbox/checkbox.css.ts +1 -0
  145. package/src/css/primitives/code/code.ts +4 -0
  146. package/src/css/primitives/code/types.ts +7 -1
  147. package/src/css/primitives/heading/heading.ts +4 -0
  148. package/src/css/primitives/heading/types.ts +7 -1
  149. package/src/css/primitives/label/label.ts +4 -0
  150. package/src/css/primitives/label/types.ts +7 -1
  151. package/src/css/primitives/radio/radio.css.ts +1 -1
  152. package/src/css/primitives/root/root.css.ts +1 -1
  153. package/src/css/primitives/select/select.css.ts +7 -1
  154. package/src/css/primitives/selectable/selectable.css.ts +5 -31
  155. package/src/css/primitives/switch/switch.css.ts +10 -1
  156. package/src/css/primitives/text/text.ts +2 -0
  157. package/src/css/primitives/text/types.ts +6 -1
  158. package/src/css/primitives/textInput/textInput.css.ts +15 -3
  159. package/src/css/props/width/types.ts +1 -1
  160. package/src/css/props/width/width.css.ts +5 -2
  161. package/src/core/primitives/popover/helpers.ts +0 -32
  162. package/src/core/primitives/tooltip/tooltipDelayGroup/index.ts +0 -4
  163. /package/src/core/__workshop__/{boundary.tsx → Boundary.tsx} +0 -0
  164. /package/src/core/components/autocomplete/{autocompleteOption.tsx → AutocompleteOption.tsx} +0 -0
  165. /package/src/core/components/autocomplete/__workshop__/{async.tsx → Async.tsx} +0 -0
  166. /package/src/core/components/autocomplete/__workshop__/{constrainedHeight.tsx → ConstrainedHeight.tsx} +0 -0
  167. /package/src/core/components/autocomplete/__workshop__/{custom.tsx → Custom.tsx} +0 -0
  168. /package/src/core/components/autocomplete/__workshop__/{example.tsx → Example.tsx} +0 -0
  169. /package/src/core/components/autocomplete/__workshop__/{focusAndBlur.tsx → FocusAndBlur.tsx} +0 -0
  170. /package/src/core/components/autocomplete/__workshop__/{fullscreen.tsx → Fullscreen.tsx} +0 -0
  171. /package/src/core/components/breadcrumbs/__workshop__/{example.tsx → Example.tsx} +0 -0
  172. /package/src/core/components/dialog/{dialogContext.ts → DialogContext.ts} +0 -0
  173. /package/src/core/components/dialog/__workshop__/{activate.tsx → Activate.tsx} +0 -0
  174. /package/src/core/components/dialog/__workshop__/{autoFocus.tsx → AutoFocus.tsx} +0 -0
  175. /package/src/core/components/dialog/__workshop__/{layering.tsx → Layering.tsx} +0 -0
  176. /package/src/core/components/dialog/__workshop__/{nested.tsx → Nested.tsx} +0 -0
  177. /package/src/core/components/dialog/__workshop__/{onScroll.tsx → OnScroll.tsx} +0 -0
  178. /package/src/core/components/dialog/__workshop__/{position.tsx → Position.tsx} +0 -0
  179. /package/src/core/components/dialog/__workshop__/{props.tsx → Props.tsx} +0 -0
  180. /package/src/core/components/dialog/__workshop__/{provider.tsx → Provider.tsx} +0 -0
  181. /package/src/core/components/dialog/__workshop__/{wrapped.tsx → Wrapped.tsx} +0 -0
  182. /package/src/core/components/hotkeys/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  183. /package/src/core/components/menu/{menuContext.ts → MenuContext.ts} +0 -0
  184. /package/src/core/components/menu/{menuDivider.tsx → MenuDivider.tsx} +0 -0
  185. /package/src/core/components/menu/__workshop__/{asComponent.tsx → AsComponent.tsx} +0 -0
  186. /package/src/core/components/menu/__workshop__/{avatarMenu.tsx → AvatarMenu.tsx} +0 -0
  187. /package/src/core/components/menu/__workshop__/{closableMenuButton.tsx → ClosableMenuButton.tsx} +0 -0
  188. /package/src/core/components/menu/__workshop__/{constrainedInBoundary.tsx → ConstrainedInBoundary.tsx} +0 -0
  189. /package/src/core/components/menu/__workshop__/{customMenuItem.tsx → CustomMenuItem.tsx} +0 -0
  190. /package/src/core/components/menu/__workshop__/{customSelectedState.tsx → CustomSelectedState.tsx} +0 -0
  191. /package/src/core/components/menu/__workshop__/{disableFocusOnClose.tsx → DisableFocusOnClose.tsx} +0 -0
  192. /package/src/core/components/menu/__workshop__/{groups.tsx → Groups.tsx} +0 -0
  193. /package/src/core/components/menu/__workshop__/{menuButton.tsx → MenuButton.tsx} +0 -0
  194. /package/src/core/components/menu/__workshop__/{menuGroupRight.tsx → MenuGroupRight.tsx} +0 -0
  195. /package/src/core/components/menu/__workshop__/{nestedMenu.tsx → NestedMenu.tsx} +0 -0
  196. /package/src/core/components/menu/__workshop__/{onCloseMenuButton.tsx → OnCloseMenuButton.tsx} +0 -0
  197. /package/src/core/components/menu/__workshop__/{selectedItem.tsx → SelectedItem.tsx} +0 -0
  198. /package/src/core/components/menu/__workshop__/{shouldFocus.tsx → ShouldFocus.tsx} +0 -0
  199. /package/src/core/components/menu/__workshop__/{tones.tsx → Tones.tsx} +0 -0
  200. /package/src/core/components/menu/__workshop__/{withoutArrow.tsx → WithoutArrow.tsx} +0 -0
  201. /package/src/core/components/tab/__workshop__/{example.tsx → Example.tsx} +0 -0
  202. /package/src/core/components/toast/{toastContext.ts → ToastContext.ts} +0 -0
  203. /package/src/core/components/toast/__workshop__/{hook.tsx → Hook.tsx} +0 -0
  204. /package/src/core/components/toast/__workshop__/{toast.tsx → Toast.tsx} +0 -0
  205. /package/src/core/components/tree/{treeContext.ts → TreeContext.ts} +0 -0
  206. /package/src/core/components/tree/__workshop__/{basic.tsx → Basic.tsx} +0 -0
  207. /package/src/core/components/tree/__workshop__/{tabFromElement.tsx → TabFromElement.tsx} +0 -0
  208. /package/src/core/components/virtualList/__workshop__/{changingProps.tsx → ChangingProps.tsx} +0 -0
  209. /package/src/core/components/virtualList/__workshop__/{elementScroll.tsx → ElementScroll.tsx} +0 -0
  210. /package/src/core/components/virtualList/__workshop__/{infiniteList.tsx → InfiniteList.tsx} +0 -0
  211. /package/src/core/components/virtualList/__workshop__/{windowScrolll.tsx → WindowScrolll.tsx} +0 -0
  212. /package/src/core/hooks/useMediaIndex/__workshop__/{test.tsx → Test.tsx} +0 -0
  213. /package/src/core/primitives/arrow/{arrow.tsx → Arrow.tsx} +0 -0
  214. /package/src/core/primitives/avatar/__workshop__/{asButton.tsx → AsButton.tsx} +0 -0
  215. /package/src/core/primitives/avatar/__workshop__/{stack.tsx → Stack.tsx} +0 -0
  216. /package/src/core/primitives/avatar/__workshop__/{withinButton.tsx → WithinButton.tsx} +0 -0
  217. /package/src/core/primitives/avatar/__workshop__/{withinMenuItem.tsx → WithinMenuItem.tsx} +0 -0
  218. /package/src/core/primitives/badge/__workshop__/{props.tsx → Props.tsx} +0 -0
  219. /package/src/core/primitives/badge/__workshop__/{tones.tsx → Tones.tsx} +0 -0
  220. /package/src/core/primitives/box/{box.tsx → Box.tsx} +0 -0
  221. /package/src/core/primitives/box/__workshop__/{props.tsx → Props.tsx} +0 -0
  222. /package/src/core/primitives/box/__workshop__/{responsive.tsx → Responsive.tsx} +0 -0
  223. /package/src/core/primitives/button/__workshop__/{custom.tsx → Custom.tsx} +0 -0
  224. /package/src/core/primitives/button/__workshop__/{customIcons.tsx → CustomIcons.tsx} +0 -0
  225. /package/src/core/primitives/button/__workshop__/{disabled.tsx → Disabled.tsx} +0 -0
  226. /package/src/core/primitives/button/__workshop__/{mixedChildren.tsx → MixedChildren.tsx} +0 -0
  227. /package/src/core/primitives/button/__workshop__/{props.tsx → Props.tsx} +0 -0
  228. /package/src/core/primitives/button/__workshop__/{sanityUploadButton.tsx → SanityUploadButton.tsx} +0 -0
  229. /package/src/core/primitives/button/__workshop__/{stacked.tsx → Stacked.tsx} +0 -0
  230. /package/src/core/primitives/button/__workshop__/{styled1.tsx → Styled1.tsx} +0 -0
  231. /package/src/core/primitives/button/__workshop__/{styled2.tsx → Styled2.tsx} +0 -0
  232. /package/src/core/primitives/button/__workshop__/{textOverflow.tsx → TextOverflow.tsx} +0 -0
  233. /package/src/core/primitives/button/__workshop__/{uploadButton.tsx → UploadButton.tsx} +0 -0
  234. /package/src/core/primitives/card/{cardContext.ts → CardContext.ts} +0 -0
  235. /package/src/core/primitives/card/__workshop__/{asButton.tsx → AsButton.tsx} +0 -0
  236. /package/src/core/primitives/card/__workshop__/{asComponent.tsx → AsComponent.tsx} +0 -0
  237. /package/src/core/primitives/card/__workshop__/{checkered.tsx → Checkered.tsx} +0 -0
  238. /package/src/core/primitives/card/__workshop__/{interactive.tsx → Interactive.tsx} +0 -0
  239. /package/src/core/primitives/card/__workshop__/{listNavigation.tsx → ListNavigation.tsx} +0 -0
  240. /package/src/core/primitives/card/__workshop__/{props.tsx → Props.tsx} +0 -0
  241. /package/src/core/primitives/card/__workshop__/{selected.tsx → Selected.tsx} +0 -0
  242. /package/src/core/primitives/card/__workshop__/{styled.tsx → Styled.tsx} +0 -0
  243. /package/src/core/primitives/card/__workshop__/{tones.tsx → Tones.tsx} +0 -0
  244. /package/src/core/primitives/checkbox/{checkbox.tsx → Checkbox.tsx} +0 -0
  245. /package/src/core/primitives/checkbox/__workshop__/{example.tsx → Example.tsx} +0 -0
  246. /package/src/core/primitives/checkbox/__workshop__/{props.tsx → Props.tsx} +0 -0
  247. /package/src/core/primitives/checkbox/__workshop__/{readOnly.tsx → ReadOnly.tsx} +0 -0
  248. /package/src/core/primitives/checkbox/__workshop__/{tones.tsx → Tones.tsx} +0 -0
  249. /package/src/core/primitives/code/{refractor.tsx → Refractor.tsx} +0 -0
  250. /package/src/core/primitives/code/__workshop__/{opticalAlignment.tsx → OpticalAlignment.tsx} +0 -0
  251. /package/src/core/primitives/code/__workshop__/{props.tsx → Props.tsx} +0 -0
  252. /package/src/core/primitives/container/__workshop__/{example.tsx → Example.tsx} +0 -0
  253. /package/src/core/primitives/flex/__workshop__/{example.tsx → Example.tsx} +0 -0
  254. /package/src/core/primitives/flex/__workshop__/{gap.tsx → Gap.tsx} +0 -0
  255. /package/src/core/primitives/grid/__workshop__/{responsive.tsx → Responsive.tsx} +0 -0
  256. /package/src/core/primitives/heading/__workshop__/{opticalAlignment.tsx → OpticalAlignment.tsx} +0 -0
  257. /package/src/core/primitives/heading/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  258. /package/src/core/primitives/inline/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  259. /package/src/core/primitives/kbd/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  260. /package/src/core/primitives/label/__workshop__/{opticalAlignment.tsx → OpticalAlignment.tsx} +0 -0
  261. /package/src/core/primitives/label/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  262. /package/src/core/primitives/layer/{layerContext.ts → LayerContext.ts} +0 -0
  263. /package/src/core/primitives/layer/__workshop__/{multipleRoots.tsx → MultipleRoots.tsx} +0 -0
  264. /package/src/core/primitives/layer/__workshop__/{nested.tsx → Nested.tsx} +0 -0
  265. /package/src/core/primitives/layer/__workshop__/{responsiveZOffset.tsx → ResponsiveZOffset.tsx} +0 -0
  266. /package/src/core/primitives/radio/__workshop__/{example.tsx → Example.tsx} +0 -0
  267. /package/src/core/primitives/radio/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  268. /package/src/core/primitives/select/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  269. /package/src/core/primitives/select/__workshop__/{readOnly.tsx → ReadOnly.tsx} +0 -0
  270. /package/src/core/primitives/skeleton/{skeleton.tsx → Skeleton.tsx} +0 -0
  271. /package/src/core/primitives/skeleton/__workshop__/{delay.tsx → Delay.tsx} +0 -0
  272. /package/src/core/primitives/skeleton/__workshop__/{skeleton.tsx → Skeleton.tsx} +0 -0
  273. /package/src/core/primitives/spinner/{animatedSpinnerIcon.tsx → AnimatedSpinnerIcon.tsx} +0 -0
  274. /package/src/core/primitives/srOnly/{srOnly.tsx → SrOnly.tsx} +0 -0
  275. /package/src/core/primitives/stack/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  276. /package/src/core/primitives/switch/__workshop__/{example.tsx → Example.tsx} +0 -0
  277. /package/src/core/primitives/switch/__workshop__/{props.tsx → Props.tsx} +0 -0
  278. /package/src/core/primitives/text/__workshop__/{colored.tsx → Colored.tsx} +0 -0
  279. /package/src/core/primitives/text/__workshop__/{example.tsx → Example.tsx} +0 -0
  280. /package/src/core/primitives/text/__workshop__/{opticalAlignment.tsx → OpticalAlignment.tsx} +0 -0
  281. /package/src/core/primitives/textArea/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  282. /package/src/core/primitives/textInput/__workshop__/{clearButton.tsx → ClearButton.tsx} +0 -0
  283. /package/src/core/primitives/textInput/__workshop__/{customValidity.tsx → CustomValidity.tsx} +0 -0
  284. /package/src/core/primitives/textInput/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  285. /package/src/core/primitives/textInput/__workshop__/{readOnly.tsx → ReadOnly.tsx} +0 -0
  286. /package/src/core/primitives/textInput/__workshop__/{states.tsx → States.tsx} +0 -0
  287. /package/src/core/primitives/textInput/__workshop__/{tones.tsx → Tones.tsx} +0 -0
  288. /package/src/core/primitives/textInput/__workshop__/{typed.tsx → Typed.tsx} +0 -0
  289. /package/src/core/primitives/tooltip/__workshop__/{customPortal.tsx → CustomPortal.tsx} +0 -0
  290. /package/src/core/primitives/tooltip/__workshop__/{overflowingBoundary.tsx → OverflowingBoundary.tsx} +0 -0
  291. /package/src/core/primitives/tooltip/__workshop__/{props.tsx → Props.tsx} +0 -0
  292. /package/src/core/primitives/tooltip/__workshop__/{resizableBoundary.tsx → ResizableBoundary.tsx} +0 -0
  293. /package/src/core/primitives/tooltip/tooltipDelayGroup/{tooltipDelayGroupContext.tsx → TooltipDelayGroupContext.tsx} +0 -0
  294. /package/src/core/utils/boundaryElement/{boundaryElementContext.ts → BoundaryElementContext.ts} +0 -0
  295. /package/src/core/utils/boundaryElement/__workshop__/{plain.tsx → Plain.tsx} +0 -0
  296. /package/src/core/utils/elementQuery/{elementQuery.tsx → ElementQuery.tsx} +0 -0
  297. /package/src/core/utils/elementQuery/__workshop__/{customMedia.tsx → CustomMedia.tsx} +0 -0
  298. /package/src/core/utils/portal/{portalContext.ts → PortalContext.ts} +0 -0
  299. /package/src/core/utils/portal/__workshop__/{named.tsx → Named.tsx} +0 -0
  300. /package/src/css/primitives/card/__workshop__/{color.tsx → Color.tsx} +0 -0
@@ -1,10 +1,10 @@
1
1
  import {card, type CardStyleProps} from '@sanity/ui/css'
2
- import {useContext} from 'react'
2
+ import {use} from 'react'
3
3
 
4
4
  import type {Props} from '../../types'
5
- import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
6
- import {CardContext} from './cardContext'
7
- import {CardProvider} from './cardProvider'
5
+ import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
6
+ import {CardContext} from './CardContext'
7
+ import {CardProvider} from './CardProvider'
8
8
 
9
9
  /** @public */
10
10
  export const DEFAULT_CARD_ELEMENT = 'div'
@@ -56,7 +56,7 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
56
56
  ...rest
57
57
  } = props as CardProps<typeof DEFAULT_CARD_ELEMENT>
58
58
 
59
- const parent = useContext(CardContext)
59
+ const parent = use(CardContext)
60
60
  const tone = toneProp === 'inherit' ? parent?.tone : toneProp
61
61
  const scheme = schemeProp === undefined ? parent?.scheme : schemeProp
62
62
 
@@ -1,7 +1,7 @@
1
1
  import type {CardTone, ColorScheme} from '@sanity/ui/theme'
2
2
  import {type ReactNode, useMemo} from 'react'
3
3
 
4
- import {CardContext} from './cardContext'
4
+ import {CardContext} from './CardContext'
5
5
  import type {_CardCompatProviderComponent} from './types'
6
6
 
7
7
  /** @public */
@@ -5,15 +5,15 @@ const scope: WorkshopScope = {
5
5
  name: 'primitives/card',
6
6
  title: 'Card',
7
7
  stories: [
8
- {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
9
- {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
10
- {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
11
- {name: 'tones', title: 'Tones', component: lazy(() => import('./tones'))},
12
- {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
13
- {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
14
- {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
15
- {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
16
- {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
8
+ {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
9
+ {name: 'styled', title: 'Styled', component: lazy(() => import('./Styled'))},
10
+ {name: 'interactive', title: 'Interactive', component: lazy(() => import('./Interactive'))},
11
+ {name: 'tones', title: 'Tones', component: lazy(() => import('./Tones'))},
12
+ {name: 'as-button', title: 'As button', component: lazy(() => import('./AsButton'))},
13
+ {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./ListNavigation'))},
14
+ {name: 'checkered', title: 'Checkered', component: lazy(() => import('./Checkered'))},
15
+ {name: 'as-component', title: 'As component', component: lazy(() => import('./AsComponent'))},
16
+ {name: 'selected', title: 'Selected', component: lazy(() => import('./Selected'))},
17
17
  ],
18
18
  }
19
19
 
@@ -1,11 +1,11 @@
1
- import {useContext} from 'react'
1
+ import {use} from 'react'
2
2
 
3
- import {CardContext} from './cardContext'
3
+ import {CardContext} from './CardContext'
4
4
  import type {CardContextValue} from './types'
5
5
 
6
6
  /** @public */
7
7
  export function useCard(): CardContextValue {
8
- const card = useContext(CardContext)
8
+ const card = use(CardContext)
9
9
 
10
10
  if (!card) {
11
11
  throw new Error('useCard(): missing context value')
@@ -5,10 +5,10 @@ const scope: WorkshopScope = {
5
5
  name: 'primitives/checkbox',
6
6
  title: 'Checkbox',
7
7
  stories: [
8
- {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
9
- {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
10
- {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
11
- {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./tones'))},
8
+ {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
9
+ {name: 'example', title: 'Example', component: lazy(() => import('./Example'))},
10
+ {name: 'read-only', title: 'Read-only', component: lazy(() => import('./ReadOnly'))},
11
+ {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./Tones'))},
12
12
  ],
13
13
  }
14
14
 
@@ -4,7 +4,7 @@ import {lazy, Suspense} from 'react'
4
4
 
5
5
  import type {ComponentType, Props} from '../../types'
6
6
 
7
- const LazyRefractor = lazy(() => import('./refractor'))
7
+ const LazyRefractor = lazy(() => import('./Refractor'))
8
8
 
9
9
  /** @public */
10
10
  export const DEFAULT_CODE_ELEMENT = 'pre'
@@ -31,6 +31,14 @@ export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
31
31
  children,
32
32
  className,
33
33
  language: languageProp,
34
+ margin,
35
+ marginX,
36
+ marginY,
37
+ marginTop,
38
+ marginRight,
39
+ marginBottom,
40
+ marginLeft,
41
+ maxWidth,
34
42
  size = 2,
35
43
  weight = 'regular',
36
44
  ...rest
@@ -39,7 +47,23 @@ export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
39
47
  const language = typeof languageProp === 'string' ? languageProp : undefined
40
48
 
41
49
  return (
42
- <Element data-ui="Code" {...rest} className={code({className, size, weight})}>
50
+ <Element
51
+ data-ui="Code"
52
+ {...rest}
53
+ className={code({
54
+ className,
55
+ margin,
56
+ marginX,
57
+ marginY,
58
+ marginTop,
59
+ marginRight,
60
+ marginBottom,
61
+ marginLeft,
62
+ maxWidth,
63
+ size,
64
+ weight,
65
+ })}
66
+ >
43
67
  <Suspense fallback={<code>{children}</code>}>
44
68
  <LazyRefractor language={language} value={children} />
45
69
  </Suspense>
@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
8
8
  {
9
9
  name: 'props',
10
10
  title: 'Props',
11
- component: lazy(() => import('./props')),
11
+ component: lazy(() => import('./Props')),
12
12
  },
13
13
  {
14
14
  name: 'optical-alignment',
15
15
  title: 'Optical alignment',
16
- component: lazy(() => import('./opticalAlignment')),
16
+ component: lazy(() => import('./OpticalAlignment')),
17
17
  },
18
18
  ],
19
19
  }
@@ -1,7 +1,7 @@
1
1
  import {container, type ContainerStyleProps} from '@sanity/ui/css'
2
2
 
3
3
  import type {Props} from '../../types'
4
- import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
4
+ import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
5
5
 
6
6
  /** @public */
7
7
  export const DEFAULT_CONTAINER_ELEMENT = 'div'
@@ -4,7 +4,7 @@ import {lazy} from 'react'
4
4
  const scope: WorkshopScope = {
5
5
  name: 'primitives/container',
6
6
  title: 'Container',
7
- stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./example'))}],
7
+ stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./Example'))}],
8
8
  }
9
9
 
10
10
  export default scope
@@ -7,7 +7,7 @@ import type {
7
7
  } from '@sanity/ui/css'
8
8
 
9
9
  import type {Props} from '../../types'
10
- import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
10
+ import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
11
11
 
12
12
  /** @public */
13
13
  export const DEFAULT_FLEX_ELEMENT = 'div'
@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
5
5
  name: 'primitives/flex',
6
6
  title: 'Flex',
7
7
  stories: [
8
- {name: 'plain', title: 'Plain', component: lazy(() => import('./example'))},
9
- {name: 'gap', title: 'Gap', component: lazy(() => import('./gap'))},
8
+ {name: 'plain', title: 'Plain', component: lazy(() => import('./Example'))},
9
+ {name: 'gap', title: 'Gap', component: lazy(() => import('./Gap'))},
10
10
  ],
11
11
  }
12
12
 
@@ -1,5 +1,5 @@
1
1
  import type {Props} from '../../types'
2
- import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
2
+ import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
3
3
 
4
4
  /** @public */
5
5
  export const DEFAULT_GRID_ELEMENT = 'div'
@@ -5,7 +5,7 @@ const scope: WorkshopScope = {
5
5
  name: 'primitives/grid',
6
6
  title: 'Grid',
7
7
  stories: [
8
- {name: 'responsive', title: 'Responsive', component: lazy(() => import('./responsive'))},
8
+ {name: 'responsive', title: 'Responsive', component: lazy(() => import('./Responsive'))},
9
9
  ],
10
10
  }
11
11
 
@@ -46,6 +46,14 @@ export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_EL
46
46
  children,
47
47
  className,
48
48
  flex,
49
+ margin,
50
+ marginX,
51
+ marginY,
52
+ marginTop,
53
+ marginRight,
54
+ marginBottom,
55
+ marginLeft,
56
+ maxWidth,
49
57
  muted = false,
50
58
  size = 2,
51
59
  textOverflow: textOverflowProp,
@@ -61,6 +69,14 @@ export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_EL
61
69
  className,
62
70
  align,
63
71
  flex,
72
+ margin,
73
+ marginX,
74
+ marginY,
75
+ marginTop,
76
+ marginRight,
77
+ marginBottom,
78
+ marginLeft,
79
+ maxWidth,
64
80
  muted,
65
81
  size,
66
82
  weight,
@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
8
8
  {
9
9
  name: 'plain',
10
10
  title: 'Plain',
11
- component: lazy(() => import('./plain')),
11
+ component: lazy(() => import('./Plain')),
12
12
  },
13
13
  {
14
14
  name: 'optical-alignment',
15
15
  title: 'Optical alignment',
16
- component: lazy(() => import('./opticalAlignment')),
16
+ component: lazy(() => import('./OpticalAlignment')),
17
17
  },
18
18
  ],
19
19
  }
@@ -1,5 +1,5 @@
1
1
  import type {Props} from '../../types'
2
- import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
2
+ import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
3
3
 
4
4
  /** @public */
5
5
  export const DEFAULT_INLINE_ELEMENT = 'div'
@@ -4,7 +4,7 @@ import {lazy} from 'react'
4
4
  const scope: WorkshopScope = {
5
5
  name: 'primitives/inline',
6
6
  title: 'Inline',
7
- stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
7
+ stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))}],
8
8
  }
9
9
 
10
10
  export default scope
@@ -2,8 +2,8 @@ import {kbd, type RadiusStyleProps, type ResponsiveProp} from '@sanity/ui/css'
2
2
  import type {FontTextSize} from '@sanity/ui/theme'
3
3
 
4
4
  import type {ComponentType, Props} from '../../types'
5
- import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
6
- import {Text} from '../text/text'
5
+ import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
6
+ import {Text} from '../text/Text'
7
7
 
8
8
  /** @public */
9
9
  export const DEFAULT_KBD_ELEMENT = 'kbd'
@@ -4,7 +4,7 @@ import {lazy} from 'react'
4
4
  const scope: WorkshopScope = {
5
5
  name: 'primitives/kbd',
6
6
  title: 'KBD',
7
- stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
7
+ stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))}],
8
8
  }
9
9
 
10
10
  export default scope
@@ -44,6 +44,14 @@ export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>
44
44
  as: Element = DEFAULT_LABEL_ELEMENT,
45
45
  children,
46
46
  className,
47
+ margin,
48
+ marginX,
49
+ marginY,
50
+ marginTop,
51
+ marginRight,
52
+ marginBottom,
53
+ marginLeft,
54
+ maxWidth,
47
55
  muted = false,
48
56
  size = 1,
49
57
  textOverflow: textOverflowProp,
@@ -58,6 +66,14 @@ export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>
58
66
  className={label({
59
67
  className,
60
68
  align,
69
+ margin,
70
+ marginX,
71
+ marginY,
72
+ marginTop,
73
+ marginRight,
74
+ marginBottom,
75
+ marginLeft,
76
+ maxWidth,
61
77
  muted,
62
78
  size,
63
79
  weight,
@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
8
8
  {
9
9
  name: 'plain',
10
10
  title: 'Plain',
11
- component: lazy(() => import('./plain')),
11
+ component: lazy(() => import('./Plain')),
12
12
  },
13
13
  {
14
14
  name: 'optical-alignment',
15
15
  title: 'Optical alignment',
16
- component: lazy(() => import('./opticalAlignment')),
16
+ component: lazy(() => import('./OpticalAlignment')),
17
17
  },
18
18
  ],
19
19
  }
@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
2
2
 
3
3
  import {render} from '$test/utils'
4
4
 
5
- import {LayerContext} from './layerContext'
5
+ import {LayerContext} from './LayerContext'
6
6
  import type {LayerContextValue} from './types'
7
7
  import {useLayer} from './useLayer'
8
8
 
@@ -1,9 +1,9 @@
1
1
  import type {ResponsiveProp} from '@sanity/ui/css'
2
2
 
3
- import type {CardElementType, CardOwnProps} from '../../primitives/card/card'
3
+ import type {CardElementType, CardOwnProps} from '../../primitives/card/Card'
4
4
  import type {Props} from '../../types'
5
- import {LayerCard} from './layerCard'
6
- import {LayerProvider} from './layerProvider'
5
+ import {LayerCard} from './LayerCard'
6
+ import {LayerProvider} from './LayerProvider'
7
7
 
8
8
  /** @public */
9
9
  export const DEFAULT_LAYER_ELEMENT = 'div'
@@ -2,9 +2,9 @@ import {type FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} fr
2
2
 
3
3
  import {EMPTY_RECORD} from '../../constants'
4
4
  import {containsOrEqualsElement, isHTMLElement} from '../../helpers/element'
5
- import {Card, type CardElementType} from '../../primitives/card/card'
5
+ import {Card, type CardElementType} from '../../primitives/card/Card'
6
6
  import type {Props} from '../../types'
7
- import type {LayerElementType, LayerOwnProps} from './layer'
7
+ import type {LayerElementType, LayerOwnProps} from './Layer'
8
8
  import {useLayer} from './useLayer'
9
9
 
10
10
  /** @internal */
@@ -1,10 +1,10 @@
1
1
  import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
2
- import {type ReactNode, useCallback, useContext, useEffect, useMemo, useState} from 'react'
2
+ import {type ReactNode, use, useCallback, useEffect, useMemo, useState} from 'react'
3
3
 
4
4
  import {useMediaIndex} from '../../hooks/useMediaIndex/useMediaIndex'
5
5
  import {useResponsiveProp} from '../../hooks/useResponsiveProp'
6
6
  import {getLayerContext} from './getLayerContext'
7
- import {LayerContext} from './layerContext'
7
+ import {LayerContext} from './LayerContext'
8
8
  import type {LayerContextValue} from './types'
9
9
 
10
10
  /** @public */
@@ -18,7 +18,7 @@ export function LayerProvider(props: LayerProviderProps): React.JSX.Element {
18
18
  const {children, zOffset: zOffsetProp = 0} = props
19
19
 
20
20
  // Get parent context values
21
- const parentContextValue = useContext(LayerContext)
21
+ const parentContextValue = use(LayerContext)
22
22
  const parent = parentContextValue && getLayerContext(parentContextValue)
23
23
  const parentRegisterChild = parent?.registerChild
24
24
  const parentLevel = parent?.level ?? 0
@@ -8,17 +8,17 @@ const scope: WorkshopScope = {
8
8
  {
9
9
  name: 'nested',
10
10
  title: 'Nested',
11
- component: lazy(() => import('./nested')),
11
+ component: lazy(() => import('./Nested')),
12
12
  },
13
13
  {
14
14
  name: 'multiple-roots',
15
15
  title: 'Multiple roots',
16
- component: lazy(() => import('./multipleRoots')),
16
+ component: lazy(() => import('./MultipleRoots')),
17
17
  },
18
18
  {
19
19
  name: 'responsive-z-offset',
20
20
  title: 'Responsive z-offset',
21
- component: lazy(() => import('./responsiveZOffset')),
21
+ component: lazy(() => import('./ResponsiveZOffset')),
22
22
  },
23
23
  ],
24
24
  }
@@ -1,12 +1,12 @@
1
- import {useContext} from 'react'
1
+ import {use} from 'react'
2
2
 
3
3
  import {getLayerContext} from './getLayerContext'
4
- import {LayerContext} from './layerContext'
4
+ import {LayerContext} from './LayerContext'
5
5
  import type {LayerContextValue} from './types'
6
6
 
7
7
  /** @public */
8
8
  export function useLayer(): LayerContextValue {
9
- const value = useContext(LayerContext)
9
+ const value = use(LayerContext)
10
10
 
11
11
  if (!value) {
12
12
  throw new Error('useLayer(): missing context value')
@@ -32,10 +32,10 @@ import {origin} from '../../middleware/origin'
32
32
  import type {ComponentType, Placement, Props} from '../../types'
33
33
  import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
34
34
  import {getElementRef} from '../../utils/getElementRef'
35
- import {Portal} from '../../utils/portal/portal'
36
- import {CardProvider} from '../card/cardProvider'
35
+ import {Portal} from '../../utils/portal/Portal'
36
+ import {CardProvider} from '../card/CardProvider'
37
37
  import {useCard} from '../card/useCard'
38
- import {type LayerOwnProps} from '../layer/layer'
38
+ import {type LayerOwnProps} from '../layer/Layer'
39
39
  import {useLayer} from '../layer/useLayer'
40
40
  import {
41
41
  DEFAULT_FALLBACK_PLACEMENTS,
@@ -44,7 +44,7 @@ import {
44
44
  DEFAULT_POPOVER_PADDING,
45
45
  } from './constants'
46
46
  import {size} from './floating-ui/size'
47
- import {PopoverLayer} from './popoverLayer'
47
+ import {PopoverLayer} from './PopoverLayer'
48
48
  import type {PopoverMargins, PopoverUpdateCallback} from './types'
49
49
 
50
50
  /** @public */
@@ -5,9 +5,9 @@ import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
5
5
 
6
6
  import {POPOVER_MOTION_PROPS} from '../../constants'
7
7
  import type {Placement} from '../../types'
8
- import {Arrow} from '../arrow/arrow'
9
- import {Flex} from '../flex/flex'
10
- import {Layer, type LayerOwnProps, type LayerProps} from '../layer/layer'
8
+ import {Arrow} from '../arrow/Arrow'
9
+ import {Flex} from '../flex/Flex'
10
+ import {Layer, type LayerOwnProps, type LayerProps} from '../layer/Layer'
11
11
  import {
12
12
  DEFAULT_POPOVER_ARROW_HEIGHT,
13
13
  DEFAULT_POPOVER_ARROW_RADIUS,
@@ -47,7 +47,7 @@ export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>
47
47
  useCustomValidity(ref, customValidity)
48
48
 
49
49
  return (
50
- <div className={radio({className})} data-ui="Radio" style={style}>
50
+ <span className={radio({className})} data-ui="Radio" style={style}>
51
51
  <Element
52
52
  {...rest}
53
53
  className={radioInput()}
@@ -59,6 +59,6 @@ export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>
59
59
  type="radio"
60
60
  />
61
61
  <span className={radioPresentation()} />
62
- </div>
62
+ </span>
63
63
  )
64
64
  }
@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
5
5
  name: 'primitives/radio',
6
6
  title: 'Radio',
7
7
  stories: [
8
- {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
9
- {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
8
+ {name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))},
9
+ {name: 'example', title: 'Example', component: lazy(() => import('./Example'))},
10
10
  ],
11
11
  }
12
12
 
@@ -4,8 +4,8 @@ import {useImperativeHandle, useRef} from 'react'
4
4
 
5
5
  import {useCustomValidity} from '../../hooks/useCustomValidity'
6
6
  import type {ComponentType, Props} from '../../types'
7
- import {Box} from '../box/box'
8
- import {Text} from '../text/text'
7
+ import {Box} from '../box/Box'
8
+ import {Text} from '../text/Text'
9
9
 
10
10
  /** @public */
11
11
  export const DEFAULT_SELECT_ELEMENT = 'select'
@@ -36,12 +36,14 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
36
36
  children,
37
37
  customValidity,
38
38
  disabled,
39
+ flex,
39
40
  fontSize = 2,
40
41
  gap = 2,
41
42
  padding = 3,
42
43
  radius = 1,
43
44
  readOnly,
44
45
  ref: forwardedRef,
46
+ width = 'fill',
45
47
  ...rest
46
48
  } = props as SelectProps<typeof DEFAULT_SELECT_ELEMENT>
47
49
 
@@ -55,9 +57,9 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
55
57
  useCustomValidity(ref, customValidity)
56
58
 
57
59
  return (
58
- <div
60
+ <span
59
61
  data-ui="Select"
60
- className={select({border, fontSize, gap, padding, radius})}
62
+ className={select({border, fontSize, flex, gap, padding, radius, width})}
61
63
  data-icon-right=""
62
64
  >
63
65
  <Element {...rest} className={_inputElement()} disabled={disabled || readOnly} ref={ref}>
@@ -70,6 +72,6 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
70
72
  </Text>
71
73
  </Box>
72
74
  </span>
73
- </div>
75
+ </span>
74
76
  )
75
77
  }
@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
5
5
  name: 'primitives/select',
6
6
  title: 'Select',
7
7
  stories: [
8
- {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
9
- {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
8
+ {name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))},
9
+ {name: 'read-only', title: 'Read-only', component: lazy(() => import('./ReadOnly'))},
10
10
  ],
11
11
  }
12
12
 
@@ -2,7 +2,7 @@ import {_selectable, type SelectableStyleProps} from '@sanity/ui/css'
2
2
  import type {ElementTone} from '@sanity/ui/theme'
3
3
 
4
4
  import type {ComponentType, Props} from '../../types'
5
- import {Box, type BoxOwnProps} from '../box/box'
5
+ import {Box, type BoxOwnProps} from '../box/Box'
6
6
 
7
7
  /** @internal */
8
8
  export const DEFAULT_SELECTABLE_ELEMENT = 'button'
@@ -2,7 +2,7 @@ import {codeSkeleton, type ResponsiveProp} from '@sanity/ui/css'
2
2
  import type {FontCodeSize} from '@sanity/ui/theme'
3
3
 
4
4
  import type {Props} from '../../types'
5
- import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
5
+ import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
6
6
 
7
7
  /** @beta */
8
8
  export const DEFAULT_CODE_SKELETON_ELEMENT = 'div'
@@ -2,7 +2,7 @@ import {headingSkeleton, type ResponsiveProp} from '@sanity/ui/css'
2
2
  import type {FontHeadingSize} from '@sanity/ui/theme'
3
3
 
4
4
  import type {Props} from '../../types'
5
- import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
5
+ import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
6
6
 
7
7
  /** @beta */
8
8
  export const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'
@@ -2,7 +2,7 @@ import {labelSkeleton, type ResponsiveProp} from '@sanity/ui/css'
2
2
  import type {FontLabelSize} from '@sanity/ui/theme'
3
3
 
4
4
  import type {Props} from '../../types'
5
- import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
5
+ import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
6
6
 
7
7
  /** @beta */
8
8
  export const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'
@@ -2,7 +2,7 @@ import {type ResponsiveProp, textSkeleton} from '@sanity/ui/css'
2
2
  import type {FontTextSize} from '@sanity/ui/theme'
3
3
 
4
4
  import type {Props} from '../../types'
5
- import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
5
+ import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './Skeleton'
6
6
 
7
7
  /** @beta */
8
8
  export const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'