@sanity/ui 4.0.0-static.3 → 4.0.0-static.30

package/exports/css/index.css

@@ -0,0 +1 @@
+/* this file is used to support importing `@sanity/ui/css/index.css` in dev mode */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.3",
+  "version": "4.0.0-static.30",
   "keywords": [
     "react",
     "ui",
@@ -20,32 +20,27 @@
   },
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "type": "module",
   "exports": {
     ".": {
       "source": "./exports/index.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
     "./css": {
       "source": "./exports/css.ts",
-      "import": "./dist/css/index.js",
-      "require": "./dist/css/index.cjs",
       "default": "./dist/css/index.js"
     },
     "./css/index.css": "./dist/css/index.css",
     "./package.json": "./package.json",
     "./theme": {
       "source": "./exports/theme.ts",
-      "import": "./dist/theme.js",
-      "require": "./dist/theme.cjs",
       "default": "./dist/theme.js"
     }
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -110,93 +105,89 @@
       },
       "main",
       {
-        "name": "static",
+        "name": "v4",
         "channel": "static",
-        "prerelease": true
+        "prerelease": "static"
       }
     ],
     "extends": "@sanity/semantic-release-preset"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.4",
+    "@floating-ui/react-dom": "^2.1.6",
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.4",
-    "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/dynamic": "^2.1.5",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.23.11",
-    "react-compiler-runtime": "19.1.0-rc.2",
+    "framer-motion": "^12.23.18",
     "react-refractor": "^4.0.0",
     "use-effect-event": "^2.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
+    "@babel/core": "^7.28.4",
+    "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/js": "^9.31.0",
+    "@eslint/js": "^9.35.0",
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/pkg-utils": "^7.9.11",
+    "@sanity/pkg-utils": "^8.1.13",
     "@sanity/prettier-config": "^2.0.1",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^3.1.2",
+    "@sanity/ui-workshop": "4.0.0-static.11",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^24.0.3",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/node": "^24.5.2",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
     "@types/react-is": "^19.0.0",
-    "@vanilla-extract/rollup-plugin": "^1.4.0",
+    "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "^5.0.3",
     "@vitest/browser": "^3.2.4",
-    "autoprefixer": "^10.4.21",
-    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
+    "browserslist-config-baseline": "^0.5.0",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
-    "cssnano": "^7.1.0",
     "cypress": "^13.17.0",
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-flow": "^4.1.0",
-    "eslint": "^9.31.0",
+    "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-compact": "^8.40.0",
     "eslint-plugin-boundaries": "^5.0.1",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "0.0.0-experimental-edac0dde-20250723",
+    "eslint-plugin-react-compiler": "19.1.0-rc.2",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-66f09bd0-20250806",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^9.0.18",
+    "eslint-plugin-storybook": "^9.1.7",
     "globals": "^16.3.0",
     "husky": "^8.0.3",
-    "lightningcss": "^1.30.1",
+    "jsdom": "^26.1.0",
     "lint-staged": "^14.0.1",
     "mkdirp": "^3.0.1",
     "npm-run-all2": "^8.0.4",
-    "postcss": "^8.5.6",
-    "postcss-preset-env": "^10.2.4",
     "prettier": "^3.6.2",
     "prettier-plugin-packagejson": "^2.5.19",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-is": "^19.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-is": "^19.1.1",
     "refractor": "^5.0.0",
     "rimraf": "^5.0.10",
     "semantic-release": "24.2.7",
-    "start-server-and-test": "^2.0.12",
+    "start-server-and-test": "^2.1.1",
     "styled-components": "^6.1.19",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.8.3",
-    "typescript-eslint": "^8.38.0",
-    "vite": "^6.3.5",
+    "typescript": "5.9.2",
+    "typescript-eslint": "^8.44.0",
+    "vite": "^7.1.6",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
     "vitest-axe": "1.0.0-pre.5"
@@ -206,9 +197,9 @@
     "react-dom": "^19",
     "react-is": "^19"
   },
-  "packageManager": "pnpm@10.13.1",
+  "packageManager": "pnpm@10.17.0",
   "engines": {
-    "node": ">=20.19"
+    "node": ">=20.19 <22 || >=22.12"
   },
   "publishConfig": {
     "access": "public"
@@ -218,7 +209,6 @@
       "cypress"
     ],
     "overrides": {
-      "@sanity/ui-workshop": "file:registry/sanity-ui-workshop-3.0.0-local.12.tgz",
       "@types/react": "$@types/react",
       "@types/react-dom": "$@types/react-dom",
       "@types/react-is": "$@types/react-is",

package/src/core/Root.tsx

@@ -1,7 +1,7 @@
 import {box, root, type RootStyleProps} from '@sanity/ui/css'
 import {useCallback, useImperativeHandle, useRef, useState} from 'react'
 
-import {Box, type BoxOwnProps} from './primitives/box/box'
+import {Box, type BoxOwnProps} from './primitives/box/Box'
 import {RootProvider} from './RootProvider'
 import type {Props} from './types'
 

package/src/core/RootProvider.tsx

@@ -1,11 +1,11 @@
 import type {CardTone, ColorScheme} from '@sanity/ui/theme'
 import type {ReactNode} from 'react'
 
-import {ToastProvider} from './components/toast/toastProvider'
-import {CardProvider} from './primitives/card/cardProvider'
-import {LayerProvider} from './primitives/layer/layerProvider'
-import {BoundaryElementProvider} from './utils/boundaryElement/boundaryElementProvider'
-import {PortalProvider} from './utils/portal/portalProvider'
+import {ToastProvider} from './components/toast/ToastProvider'
+import {CardProvider} from './primitives/card/CardProvider'
+import {LayerProvider} from './primitives/layer/LayerProvider'
+import {BoundaryElementProvider} from './utils/boundaryElement/BoundaryElementProvider'
+import {PortalProvider} from './utils/portal/PortalProvider'
 
 /** @public */
 export interface RootProviderProps {

package/src/core/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'boundary',
       title: 'Boundary',
-      component: lazy(() => import('./boundary')),
+      component: lazy(() => import('./Boundary')),
     },
   ],
 }

package/src/core/components/autocomplete/{autocomplete.tsx → Autocomplete.tsx}

@@ -22,16 +22,16 @@ import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_raf} from '../../helpers/animation'
 import {_hasFocus, focusFirstDescendant} from '../../helpers/focus'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import {Box, type BoxOwnProps} from '../../primitives/box/box'
-import {Button} from '../../primitives/button/button'
-import {Popover, type PopoverProps} from '../../primitives/popover/popover'
-import {Selectable} from '../../primitives/selectable/selectable'
-import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
-import {Stack} from '../../primitives/stack/stack'
-import {Text} from '../../primitives/text/text'
-import {TextInput, type TextInputOwnProps} from '../../primitives/textInput/textInput'
+import {Box, type BoxOwnProps} from '../../primitives/box/Box'
+import {Button} from '../../primitives/button/Button'
+import {Popover, type PopoverProps} from '../../primitives/popover/Popover'
+import {Selectable} from '../../primitives/selectable/Selectable'
+import {AnimatedSpinnerIcon} from '../../primitives/spinner/AnimatedSpinnerIcon'
+import {Stack} from '../../primitives/stack/Stack'
+import {Text} from '../../primitives/text/Text'
+import {TextInput, type TextInputOwnProps} from '../../primitives/textInput/TextInput'
 import type {ComponentType, Props} from '../../types'
-import {AutocompleteOption} from './autocompleteOption'
+import {AutocompleteOption} from './AutocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
   AUTOCOMPLETE_LISTBOX_IGNORE_KEYS,
@@ -63,7 +63,7 @@ export type AutocompleteOwnProps<O extends BaseAutocompleteOption = BaseAutocomp
     /** The options to render. */
     options?: O[]
     padding?: ResponsiveProp<Space>
-    popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
+    popover?: Omit<PopoverProps<'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
     prefix?: ReactNode
     radius?: Radius | Radius[]
     /** @beta */

package/src/core/components/autocomplete/__workshop__/{custom.tsx → Custom.tsx}

@@ -16,9 +16,12 @@ export default function CustomStory(): React.JSX.Element {
   const data: ExampleOption[] = countries.map((d) => ({value: d.code, title: d.name}))
   const border = useBoolean('Border', true)
   const disabled = useBoolean('Disabled', false)
+  // @ts-expect-error - TODO: fix this
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
   const openButton = useBoolean('Open button', true)
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const readOnly = useBoolean('Read only', false)
   const [value, setValue] = useState('')
@@ -31,10 +34,17 @@ export default function CustomStory(): React.JSX.Element {
         href="#"
         key={option.value}
         onClick={(event) => event.preventDefault()}
+        // @ts-expect-error - TODO: fix this
         padding={padding}
+        // @ts-expect-error - TODO: fix this
         radius={Math.max((radius ?? 0) - 1, 0) as Radius}
       >
-        <Text size={fontSize}>{option.title}</Text>
+        <Text
+          // @ts-expect-error - TODO: fix this
+          size={fontSize}
+        >
+          {option.title}
+        </Text>
       </Card>
     ),
     [fontSize, padding, radius],
@@ -63,13 +73,16 @@ export default function CustomStory(): React.JSX.Element {
               border={border}
               disabled={disabled}
               filterOption={filterOption}
+              // @ts-expect-error - TODO: fix this
               fontSize={fontSize}
               id="custom"
               onChange={setValue}
               openButton={openButton}
               options={options}
+              // @ts-expect-error - TODO: fix this
               padding={padding}
               placeholder="Search"
+              // @ts-expect-error - TODO: fix this
               radius={radius}
               readOnly={readOnly}
               renderOption={renderOption}

package/src/core/components/autocomplete/__workshop__/{example.tsx → Example.tsx}

@@ -32,14 +32,18 @@ const typingPerfTest: PerfTestProps<HTMLInputElement> = {
 export default function ExampleStory(): React.JSX.Element {
   const {ref, Wrapper} = usePerfTest(typingPerfTest)
 
+  // @ts-expect-error - TODO: fix this
   const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS)
   const options = useMemo(() => countries.map((country) => ({value: country.code})), [])
   const border = useBoolean('Border', true)
   const customValidity = useText('Custom validity')
   const disabled = useBoolean('Disabled', false)
+  // @ts-expect-error - TODO: fix this
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
   const openButton = useBoolean('Open button', false)
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const readOnly = useBoolean('Read only', false)
   const [value, setValue] = useState('')
@@ -47,7 +51,11 @@ export default function ExampleStory(): React.JSX.Element {
   const handleChange = useCallback((value: string) => setValue(value), [])
 
   return (
-    <Card height="fill" tone={layoutTone}>
+    <Card
+      height="fill"
+      // @ts-expect-error - TODO: fix this
+      tone={layoutTone}
+    >
       <Container width={1}>
         <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
           <Stack gap={3}>
@@ -59,13 +67,16 @@ export default function ExampleStory(): React.JSX.Element {
                 border={border}
                 customValidity={customValidity}
                 disabled={disabled}
+                // @ts-expect-error - TODO: fix this
                 fontSize={fontSize}
                 onChange={handleChange}
                 id="default"
                 openButton={openButton}
                 options={options}
+                // @ts-expect-error - TODO: fix this
                 padding={padding}
                 placeholder="Search"
+                // @ts-expect-error - TODO: fix this
                 radius={radius}
                 readOnly={readOnly}
                 ref={ref}

package/src/core/components/autocomplete/__workshop__/index.ts

@@ -8,32 +8,32 @@ const scope: WorkshopScope = {
     {
       name: 'example',
       title: 'Example',
-      component: lazy(() => import('./example')),
+      component: lazy(() => import('./Example')),
     },
     {
       name: 'custom',
       title: 'Custom',
-      component: lazy(() => import('./custom')),
+      component: lazy(() => import('./Custom')),
     },
     {
       name: 'async',
       title: 'Async',
-      component: lazy(() => import('./async')),
+      component: lazy(() => import('./Async')),
     },
     {
       name: 'constrained-height',
       title: 'Constrained height',
-      component: lazy(() => import('./constrainedHeight')),
+      component: lazy(() => import('./ConstrainedHeight')),
     },
     {
       name: 'focus-and-blur',
       title: 'Focus and blur',
-      component: lazy(() => import('./focusAndBlur')),
+      component: lazy(() => import('./FocusAndBlur')),
     },
     {
       name: 'fullscreen',
       title: 'Fullscreen',
-      component: lazy(() => import('./fullscreen')),
+      component: lazy(() => import('./Fullscreen')),
     },
   ],
 }

package/src/core/components/autocomplete/types.ts

@@ -1,4 +1,4 @@
-import type {ButtonProps} from '../../primitives/button/button'
+import type {ButtonProps} from '../../primitives/button/Button'
 
 /** @public */
 export type AutocompleteOpenButtonProps = Omit<ButtonProps<'button'>, 'as'>

package/src/core/components/breadcrumbs/{breadcrumbs.tsx → Breadcrumbs.tsx}

@@ -11,12 +11,12 @@ import {
 } from 'react'
 
 import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
-import {Box} from '../../primitives/box/box'
-import {Button, type ButtonProps} from '../../primitives/button/button'
-import {Flex} from '../../primitives/flex/flex'
-import {Popover} from '../../primitives/popover/popover'
-import {Stack} from '../../primitives/stack/stack'
-import {Text} from '../../primitives/text/text'
+import {Box} from '../../primitives/box/Box'
+import {Button, type ButtonProps} from '../../primitives/button/Button'
+import {Flex} from '../../primitives/flex/Flex'
+import {Popover} from '../../primitives/popover/Popover'
+import {Stack} from '../../primitives/stack/Stack'
+import {Text} from '../../primitives/text/Text'
 import type {ComponentType, Props} from '../../types'
 
 /** @beta */

package/src/core/components/breadcrumbs/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'example',
       title: 'Example',
-      component: lazy(() => import('./example')),
+      component: lazy(() => import('./Example')),
     },
   ],
 }

package/src/core/components/dialog/{dialog.tsx → Dialog.tsx}

@@ -12,13 +12,13 @@ import {isHTMLElement} from '../../helpers/element'
 import {focusFirstDescendant, focusLastDescendant} from '../../helpers/focus'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import {Container} from '../../primitives/container/container'
-import {Layer, type LayerOwnProps, type LayerProps} from '../../primitives/layer/layer'
+import {Container} from '../../primitives/container/Container'
+import {Layer, type LayerOwnProps, type LayerProps} from '../../primitives/layer/Layer'
 import type {ComponentType, Props} from '../../types'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
-import {Portal} from '../../utils/portal/portal'
+import {Portal} from '../../utils/portal/Portal'
 import {usePortal} from '../../utils/portal/usePortal'
-import {DialogCard} from './dialogCard'
+import {DialogCard} from './DialogCard'
 import {isTargetWithinScope} from './isTargetWithinScope'
 import type {DialogPosition} from './types'
 import {useDialog} from './useDialog'

package/src/core/components/dialog/{dialogCard.tsx → DialogCard.tsx}

@@ -21,12 +21,12 @@ import {
 import {focusFirstDescendant} from '../../helpers/focus'
 import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
 import {useGlobalKeyDown} from '../../hooks/useGlobalKeyDown'
-import {Box} from '../../primitives/box/box'
-import {Button} from '../../primitives/button/button'
-import {Card, type CardElementType, type CardOwnProps} from '../../primitives/card/card'
-import {Flex} from '../../primitives/flex/flex'
+import {Box} from '../../primitives/box/Box'
+import {Button} from '../../primitives/button/Button'
+import {Card, type CardElementType, type CardOwnProps} from '../../primitives/card/Card'
+import {Flex} from '../../primitives/flex/Flex'
 import {useLayer} from '../../primitives/layer/useLayer'
-import {Text} from '../../primitives/text/text'
+import {Text} from '../../primitives/text/Text'
 import type {Props} from '../../types'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
 import {usePortal} from '../../utils/portal/usePortal'

package/src/core/components/dialog/{dialogProvider.tsx → DialogProvider.tsx}

@@ -1,7 +1,7 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
 import {type ReactNode, useMemo} from 'react'
 
-import {DialogContext, type DialogContextValue} from './dialogContext'
+import {DialogContext, type DialogContextValue} from './DialogContext'
 import type {DialogPosition} from './types'
 
 /**

package/src/core/components/dialog/__workshop__/{panes.tsx → Panes.tsx}

@@ -79,6 +79,10 @@ function Pane(props: {borderLeft?: boolean; id: string}) {
                     <MenuItem text="Item 3" />
                   </Menu>
                 }
+                popover={{
+                  modal: true,
+                  portal: true,
+                }}
               />
             </Box>
           </Dialog>

package/src/core/components/dialog/__workshop__/{position.tsx → Position.tsx}

@@ -6,6 +6,7 @@ import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '$workshop'
 
 export default function PositionStory(): React.JSX.Element {
   const open = useBoolean('Open', true)
+  // @ts-expect-error - TODO: fix this
   const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS)
 
   return (
@@ -22,7 +23,14 @@ export default function PositionStory(): React.JSX.Element {
         </Stack>
 
         <LayerProvider>
-          {open && <Dialog header="Position example" id="position-example" position={position} />}
+          {open && (
+            <Dialog
+              header="Position example"
+              id="position-example"
+              // @ts-expect-error - TODO: fix this
+              position={position}
+            />
+          )}
         </LayerProvider>
       </Box>
     </Box>

package/src/core/components/dialog/__workshop__/{props.tsx → Props.tsx}

@@ -9,6 +9,7 @@ export default function PropsStory(): React.JSX.Element {
   const header = useText('Header', 'Props example')
   const onClickOutside = useBoolean('Close when click outside', false)
   const hideCloseButton = useBoolean('Hide close button', false)
+  // @ts-expect-error - TODO: fix this
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS)
   const [open, setOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement | null>(null)
@@ -37,6 +38,7 @@ export default function PropsStory(): React.JSX.Element {
             onClickOutside={onClickOutside ? handleClose : undefined}
             onClose={handleClose}
             open={open}
+            // @ts-expect-error - TODO: fix this
             width={width}
           >
             <Box padding={4}>

package/src/core/components/dialog/__workshop__/index.ts

@@ -5,16 +5,16 @@ const scope: WorkshopScope = {
   name: 'components/dialog',
   title: 'Dialog',
   stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'nested', title: 'Nested', component: lazy(() => import('./nested'))},
-    {name: 'on-scroll', title: 'On scroll', component: lazy(() => import('./onScroll'))},
-    {name: 'layering', title: 'Layering', component: lazy(() => import('./layering'))},
-    {name: 'position', title: 'Position', component: lazy(() => import('./position'))},
-    {name: 'provider', title: 'Provider', component: lazy(() => import('./provider'))},
-    {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./autoFocus'))},
-    {name: 'panes', title: 'Panes', component: lazy(() => import('./panes'))},
-    {name: 'activate', title: 'Activate', component: lazy(() => import('./activate'))},
-    {name: 'wrapped', title: 'Wrapped', component: lazy(() => import('./wrapped'))},
+    {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
+    {name: 'nested', title: 'Nested', component: lazy(() => import('./Nested'))},
+    {name: 'on-scroll', title: 'On scroll', component: lazy(() => import('./OnScroll'))},
+    {name: 'layering', title: 'Layering', component: lazy(() => import('./Layering'))},
+    {name: 'position', title: 'Position', component: lazy(() => import('./Position'))},
+    {name: 'provider', title: 'Provider', component: lazy(() => import('./Provider'))},
+    {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./AutoFocus'))},
+    {name: 'panes', title: 'Panes', component: lazy(() => import('./Panes'))},
+    {name: 'activate', title: 'Activate', component: lazy(() => import('./Activate'))},
+    {name: 'wrapped', title: 'Wrapped', component: lazy(() => import('./Wrapped'))},
   ],
 }
 

package/src/core/components/dialog/useDialog.ts

@@ -1,11 +1,11 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
-import {DialogContext, type DialogContextValue} from './dialogContext'
+import {DialogContext, type DialogContextValue} from './DialogContext'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 export function useDialog(): DialogContextValue {
-  return useContext(DialogContext)
+  return use(DialogContext)
 }

package/src/core/components/hotkeys/{hotkeys.tsx → Hotkeys.tsx}

@@ -1,8 +1,8 @@
 import type {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
 import type {FontTextSize, Space} from '@sanity/ui/theme'
 
-import {Box} from '../../primitives/box/box'
-import {KBD} from '../../primitives/kbd/kbd'
+import {Box} from '../../primitives/box/Box'
+import {KBD} from '../../primitives/kbd/Kbd'
 import type {ComponentType, Props} from '../../types'
 
 /** @public */

package/src/core/components/hotkeys/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
   ],
 }

package/src/core/components/menu/{menu.test.tsx → Menu.test.tsx}

@@ -5,7 +5,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {MenuContext, type MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './MenuContext'
 import {useMenu} from './useMenu'
 
 describe('components/menu', () => {