@sanity/ui 3.0.0-static.26 → 3.0.0-static.28

package/exports/_visual-editing.ts

@@ -18,13 +18,13 @@ export {Button, type ButtonProps} from '../src/core/primitives/button/button'
 export {Card, type CardProps} from '../src/core/primitives/card/card'
 export {Flex, type FlexProps} from '../src/core/primitives/flex/flex'
 export {Grid, type GridProps} from '../src/core/primitives/grid/grid'
+export {LayerProvider} from '../src/core/primitives/layer/layerProvider'
 export {Popover, type PopoverProps} from '../src/core/primitives/popover/popover'
+export type {PopoverMargins} from '../src/core/primitives/popover/types'
 export {Spinner, type SpinnerProps} from '../src/core/primitives/spinner/spinner'
 export {Stack, type StackProps} from '../src/core/primitives/stack/stack'
 export {Text, type TextProps} from '../src/core/primitives/text/text'
 export {TextInput, type TextInputProps} from '../src/core/primitives/textInput/textInput'
 export {Tooltip, type TooltipProps} from '../src/core/primitives/tooltip/tooltip'
-export type {PopoverMargins} from '../src/core/types/popover'
-export {LayerProvider} from '../src/core/utils/layer/layerProvider'
 export {Portal, type PortalProps} from '../src/core/utils/portal/portal'
 export {PortalProvider, type PortalProviderProps} from '../src/core/utils/portal/portalProvider'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.26",
+  "version": "3.0.0-static.28",
   "keywords": [
     "react",
     "ui",
@@ -41,14 +41,14 @@
       "require": "./dist/css.cjs",
       "default": "./dist/css.js"
     },
+    "./index.css": "./dist/index.css",
     "./package.json": "./package.json",
     "./theme": {
       "source": "./exports/theme.ts",
       "import": "./dist/theme.js",
       "require": "./dist/theme.cjs",
       "default": "./dist/theme.js"
-    },
-    "./ui.css": "./dist/ui.css"
+    }
   },
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -66,9 +66,6 @@
       ]
     }
   },
-  "bin": {
-    "sanity-ui": "./bin/sanity-ui.cjs"
-  },
   "files": [
     "dist",
     "exports",
@@ -120,28 +117,14 @@
     "@babel/preset-env": "^7.27.1",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
+    "@commitlint/cli": "19.5.0",
+    "@commitlint/config-conventional": "19.5.0",
     "@eslint/js": "^9.26.0",
     "@sanity/browserslist-config": "^1.0.5",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^2.1.2",
-    "@storybook/addon-a11y": "^8.6.14",
-    "@storybook/addon-docs": "^8.6.14",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.14",
-    "@storybook/addon-mdx-gfm": "^8.6.12",
-    "@storybook/addon-storysource": "^8.6.12",
-    "@storybook/addon-themes": "^8.6.14",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/react": "^8.6.14",
-    "@storybook/react-vite": "^8.6.14",
-    "@storybook/test": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
+    "@sanity/ui-workshop": "^3.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
@@ -152,6 +135,7 @@
     "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
     "@vanilla-extract/rollup-plugin": "^1.3.15",
+    "@vanilla-extract/vite-plugin": "^5.0.3",
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/browser": "^3.1.4",
     "autoprefixer": "^10.4.21",
@@ -163,7 +147,6 @@
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-flow": "^4.1.0",
-    "esbuild-register": "^3.6.0",
     "eslint": "^9.26.0",
     "eslint-config-prettier": "^10.1.2",
     "eslint-formatter-compact": "^8.40.0",
@@ -174,9 +157,8 @@
     "eslint-plugin-react-hooks": "0.0.0-experimental-4448b187-20250515",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-storybook": "^9.0.5",
     "globals": "^16.0.0",
-    "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "lightningcss": "^1.30.1",
     "lint-staged": "^14.0.1",
@@ -185,21 +167,21 @@
     "postcss": "^8.5.3",
     "postcss-preset-env": "^10.2.0",
     "prettier": "^3.5.3",
+    "prettier-plugin-packagejson": "^2.5.15",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-is": "^19.1.0",
     "refractor": "^4.9.0",
     "rimraf": "^5.0.10",
-    "semantic-release": "^24.2.3",
+    "semantic-release": "23.1.1",
     "start-server-and-test": "^2.0.11",
-    "storybook": "^8.6.14",
     "styled-components": "^6.1.17",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.32.0",
-    "vite": "^5.4.19",
+    "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.1.4",
+    "vitest": "^3.2.2",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {
@@ -220,27 +202,27 @@
   "scripts": {
     "build": "run-s clean pkg:build pkg:check",
     "clean": "rimraf dist",
-    "_css:build": "node -r esbuild-register scripts/build",
     "commit": "cz",
     "cypress:dev": "run-p dev cypress:open",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
     "dev": "run-p workshop:clean workshop:dev",
-    "figma:pkg:build": "cd figma && pnpm build",
+    "figma:build": "pnpm run --filter 'figma-plugin-sanity-ui' build",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint .",
-    "pkg:build": "mkdirp dist && touch dist/ui.css && pkg build --strict",
+    "pkg:build": "mkdirp dist && touch dist/index.css && NODE_ENV=production pkg build --strict",
     "pkg:check": "pkg --strict",
+    "pkg:watch": "mkdirp dist && touch dist/index.css && pkg watch --strict",
     "release": "semantic-release",
-    "storybook:build": "storybook build",
-    "storybook:dev": "storybook dev -p 6006",
+    "storybook:build": "pnpm run --filter 'sanity-ui-storybook' build",
+    "storybook:dev": "pnpm run --filter 'sanity-ui-storybook' dev",
     "test": "vitest run",
-    "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "test:browser": "start-server-and-test 'run-s workshop:build workshop:preview' http://localhost:1337 'run-s cypress:run'",
     "typecheck": "tsc",
     "watch": "pkg watch --strict",
     "workshop:build": "workshop build",
     "workshop:clean": "rimraf .workshop",
-    "workshop:dev": "node -r esbuild-register ../ui-workshop/scripts/dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
+    "workshop:dev": "workshop dev",
+    "workshop:preview": "workshop preview"
   }
 }

package/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx

@@ -1,17 +1,17 @@
 import {
   Autocomplete,
+  type AutocompleteProps,
   BoundaryElementProvider,
   Box,
   Card,
   Container,
   LayerProvider,
+  Popover,
   Stack,
   Text,
 } from '@sanity/ui'
 import {useCallback, useState} from 'react'
 
-import {Popover} from '../../../primitives'
-import type {AutocompleteProps} from '../autocomplete'
 import countries from './mock/countries'
 import type {ExampleOption} from './types'
 

package/src/core/components/autocomplete/__workshop__/fullscreen.tsx

@@ -174,7 +174,7 @@ export default function Fullscreen() {
   }, [value])
 
   return (
-    <Card display="flex" direction="column" minHeight="full" tone="transparent">
+    <Card display="flex" flexDirection="column" minHeight="full" tone="transparent">
       <PortalProvider element={portalElement}>
         <Card hidden={open} padding={2}>
           <Flex align="center">

package/src/core/components/autocomplete/autocomplete.tsx

@@ -1,6 +1,6 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import type {ResponsiveProp} from '@sanity/ui/css'
-import type {Space} from '@sanity/ui/theme'
+import type {Radius, Space} from '@sanity/ui/theme'
 import {
   type ChangeEvent,
   cloneElement,
@@ -19,22 +19,18 @@ import {
 } from 'react'
 
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
-import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useResponsiveProp} from '../../hooks'
-import {
-  Box,
-  type BoxProps,
-  Button,
-  Card,
-  Popover,
-  type PopoverProps,
-  Stack,
-  Text,
-  TextInput,
-  type TextInputOwnProps,
-} from '../../primitives'
+import {_raf} from '../../helpers/animation'
+import {_hasFocus, focusFirstDescendant} from '../../helpers/focus'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import {Box, type BoxOwnProps} from '../../primitives/box'
+import {Button} from '../../primitives/button'
+import {Card} from '../../primitives/card'
+import {Popover, type PopoverProps} from '../../primitives/popover'
 import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
-import type {ComponentType, Props, Radius} from '../../types'
+import {Stack} from '../../primitives/stack'
+import {Text} from '../../primitives/text'
+import {TextInput, type TextInputOwnProps} from '../../primitives/textInput'
+import type {ComponentType, Props} from '../../types/props'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
@@ -55,7 +51,7 @@ export type AutocompleteOwnProps<O extends BaseAutocompleteOption = BaseAutocomp
     filterOption?: (query: string, option: O) => boolean
     icon?: ElementType | ReactNode
     /** @beta */
-    listBox?: BoxProps
+    listBox?: BoxOwnProps
     loading?: boolean
     onChange?: (value: string) => void
     onQueryChange?: (query: string | null) => void

package/src/core/components/autocomplete/autocompleteOption.tsx

@@ -1,6 +1,6 @@
 import {type KeyboardEvent, type ReactElement, type ReactNode, useCallback} from 'react'
 
-import {_isEnterToClickElement} from '../../helpers'
+import {_isEnterToClickElement} from '../../helpers/element'
 
 export interface AutocompleteOptionProps {
   children: ReactNode

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

@@ -1,4 +1,6 @@
-import type {Placement} from '../../types'
+// import type {Placement} from '../../types'
+
+import type {Placement} from '../../types/placement'
 
 /**
  * @internal

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

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

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -11,9 +11,14 @@ import {
   useState,
 } from 'react'
 
-import {useClickOutsideEvent} from '../../hooks'
-import {Box, Button, type ButtonProps, Flex, Popover, Stack, Text} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
+import {Box} from '../../primitives/box'
+import {Button, type ButtonProps} from '../../primitives/button'
+import {Flex} from '../../primitives/flex'
+import {Popover} from '../../primitives/popover'
+import {Stack} from '../../primitives/stack'
+import {Text} from '../../primitives/text'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @beta */
 export const DEFAULT_BREADCRUMBS_ELEMENT = 'nav'

package/src/core/components/dialog/__workshop__/activate.tsx

@@ -1,8 +1,16 @@
+import {
+  Button,
+  Flex,
+  Layer,
+  LayerProvider,
+  Menu,
+  MenuButton,
+  MenuItem,
+  Stack,
+  Text,
+} from '@sanity/ui'
 import {useState} from 'react'
 
-import {Button, Flex, Stack, Text} from '../../../primitives'
-import {Layer, LayerProvider} from '../../../utils'
-import {Menu, MenuButton, MenuItem} from '../../menu'
 import {Dialog} from '../dialog'
 
 export default function LayeringFocusStory() {

package/src/core/components/dialog/__workshop__/panes.tsx

@@ -1,11 +1,18 @@
+import {
+  BoundaryElementProvider,
+  Box,
+  Button,
+  Card,
+  Dialog,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuItem,
+  PortalProvider,
+} from '@sanity/ui'
 import {useCallback, useState} from 'react'
 import {styled} from 'styled-components'
 
-import {Box, Button, Card, Flex} from '../../../primitives'
-import {BoundaryElementProvider, PortalProvider} from '../../../utils'
-import {Menu, MenuButton, MenuItem} from '../../menu'
-import {Dialog} from '../dialog'
-
 export default function PanesStory() {
   return (
     <Flex height="fill">

package/src/core/components/dialog/dialog.tsx

@@ -4,24 +4,23 @@ import {
   dialogContainer,
   type ResponsiveProp,
 } from '@sanity/ui/css'
-import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {Radius, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {type FocusEvent, type ForwardedRef, type ReactNode, useCallback, useRef} from 'react'
 
 import {Z_OFFSETS} from '../../constants'
-import {focusFirstDescendant, focusLastDescendant, isHTMLElement} from '../../helpers'
-import {usePrefersReducedMotion, useResponsiveProp} from '../../hooks'
-import {Container} from '../../primitives'
-import type {CardTone, ComponentType, DialogPosition, Props, Radius} from '../../types'
-import {
-  Layer,
-  type LayerOwnProps,
-  type LayerProps,
-  Portal,
-  useBoundaryElement,
-  usePortal,
-} from '../../utils'
+import {isHTMLElement} from '../../helpers/element'
+import {focusFirstDescendant, focusLastDescendant} from '../../helpers/focus'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
+import type {CardTone} from '../../primitives/card'
+import {Container} from '../../primitives/container'
+import {Layer, type LayerOwnProps, type LayerProps} from '../../primitives/layer'
+import type {ComponentType, Props} from '../../types/props'
+import {useBoundaryElement} from '../../utils/boundaryElement'
+import {Portal, usePortal} from '../../utils/portal'
 import {DialogCard} from './dialogCard'
 import {isTargetWithinScope} from './isTargetWithinScope'
+import type {DialogPosition} from './types'
 import {useDialog} from './useDialog'
 
 /** @public */

package/src/core/components/dialog/dialogCard.tsx

@@ -1,5 +1,13 @@
 import {CloseIcon} from '@sanity/icons'
-import {dialogCard, dialogContent, dialogFooter, dialogHeader, dialogLayout} from '@sanity/ui/css'
+import {
+  dialogCard,
+  dialogContent,
+  dialogFooter,
+  dialogHeader,
+  dialogScroller,
+  dialogScrollerShadowBottom,
+  dialogScrollerShadowTop,
+} from '@sanity/ui/css'
 import {
   type ForwardedRef,
   type ReactNode,
@@ -7,21 +15,21 @@ import {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
 } from 'react'
 
-import {focusFirstDescendant} from '../../helpers'
-import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
-import {
-  Box,
-  Button,
-  Card,
-  type CardElementType,
-  type CardOwnProps,
-  Flex,
-  Text,
-} from '../../primitives'
-import type {Props} from '../../types'
-import {useBoundaryElement, useLayer, usePortal} from '../../utils'
+import {focusFirstDescendant} from '../../helpers/focus'
+import {useClickOutsideEvent} from '../../hooks/useClickOutsideEvent'
+import {useGlobalKeyDown} from '../../hooks/useGlobalKeyDown'
+import {Box} from '../../primitives/box'
+import {Button} from '../../primitives/button'
+import {Card, type CardElementType, type CardOwnProps} from '../../primitives/card'
+import {Flex} from '../../primitives/flex'
+import {useLayer} from '../../primitives/layer'
+import {Text} from '../../primitives/text'
+import type {Props} from '../../types/props'
+import {useBoundaryElement} from '../../utils/boundaryElement'
+import {usePortal} from '../../utils/portal'
 import {isTargetWithinScope} from './isTargetWithinScope'
 
 /** @internal */
@@ -87,6 +95,7 @@ export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIAL
   const labelId = `${id}_label`
   const showCloseButton = Boolean(onClose) && hideCloseButton === false
   const showHeader = Boolean(header) || showCloseButton
+  const [scrollTop, setScrollTop] = useState(0)
 
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(forwardedRef, () => ref.current)
   useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(
@@ -141,50 +150,77 @@ export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIAL
     () => [ref.current],
   )
 
+  useEffect(() => {
+    const el = contentRef.current
+
+    if (!el) return
+
+    const handleScroll = () => {
+      // console.log('scroll', el.scrollTop)
+      setScrollTop(el.scrollTop)
+    }
+
+    el.addEventListener('scroll', handleScroll, {passive: true})
+
+    return () => {
+      el.removeEventListener('scroll', handleScroll)
+    }
+  }, [])
+
   return (
-    <Card {...rest} as={as} className={dialogCard()} display="flex" ref={ref}>
-      <Flex className={dialogLayout()} direction="column" flex={1}>
-        {showHeader && (
-          <Box className={dialogHeader()} position="relative">
-            <Flex align="flex-start" padding={3}>
-              <Box flex={1} padding={2}>
-                {header && (
-                  <Text id={labelId} size={1} weight="semibold">
-                    {header}
-                  </Text>
-                )}
-              </Box>
-              {showCloseButton && (
-                <Box flex="none">
-                  <Button
-                    aria-label="Close dialog"
-                    disabled={!onClose}
-                    icon={CloseIcon}
-                    mode="bleed"
-                    onClick={onClose}
-                    padding={2}
-                  />
-                </Box>
-              )}
-            </Flex>
+    <Card
+      {...rest}
+      as={as}
+      className={dialogCard()}
+      display="flex"
+      flexDirection="column"
+      ref={ref}
+    >
+      {showHeader && (
+        <Flex align="flex-start" className={dialogHeader()} padding={3} position="relative">
+          <Box flex={1} padding={2}>
+            {header && (
+              <Text id={labelId} size={1} weight="semibold">
+                {header}
+              </Text>
+            )}
           </Box>
+
+          {showCloseButton && (
+            <Box flex="none">
+              <Button
+                aria-label="Close dialog"
+                disabled={!onClose}
+                icon={CloseIcon}
+                mode="bleed"
+                onClick={onClose}
+                padding={2}
+              />
+            </Box>
+          )}
+        </Flex>
+      )}
+
+      <Box className={dialogContent()} flex={1} position="relative" tabIndex={-1}>
+        {showHeader && (
+          <div
+            className={dialogScrollerShadowTop()}
+            style={{opacity: Math.min(scrollTop, 32) / 32}}
+          />
         )}
-        <Box
-          className={dialogContent()}
-          flex={1}
-          overflow="auto"
-          position="relative"
-          ref={contentRef}
-          tabIndex={-1}
-        >
+
+        <Box className={dialogScroller()} overflow="auto" ref={contentRef}>
           {children}
         </Box>
-        {footer && (
-          <Box className={dialogFooter()} position="relative">
-            {footer}
-          </Box>
-        )}
-      </Flex>
+
+        {footer && <div className={dialogScrollerShadowBottom()} />}
+      </Box>
+
+      {footer && (
+        <Box className={dialogFooter()} position="relative">
+          {footer}
+        </Box>
+      )}
     </Card>
   )
 }

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

@@ -1,7 +1,7 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
 
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import type {DialogPosition} from '../../types'
+import type {DialogPosition} from './types'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.

package/src/core/components/dialog/dialogProvider.tsx

@@ -1,8 +1,8 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
 import {type ReactElement, type ReactNode, useMemo} from 'react'
 
-import type {DialogPosition} from '../../types'
 import {DialogContext, type DialogContextValue} from './dialogContext'
+import type {DialogPosition} from './types'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.

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

@@ -1,4 +1,5 @@
 export * from './dialog'
 export * from './dialogContext'
 export * from './dialogProvider'
+export * from './types'
 export * from './useDialog'

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

@@ -1,4 +1,4 @@
-import {containsOrEqualsElement} from '../../helpers'
+import {containsOrEqualsElement} from '../../helpers/element'
 
 export function isTargetWithinScope(
   boundaryElement: HTMLElement | null,

package/src/core/components/hotkeys/hotkeys.tsx

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

package/src/core/components/menu/__workshop__/avatarMenu.tsx

@@ -1,10 +1,16 @@
 import {UsersIcon} from '@sanity/icons'
-
-import {Avatar, Badge, Box, Button, Flex, Text} from '../../../primitives'
-import {Hotkeys} from '../../hotkeys'
-import {Menu} from '../menu'
-import {MenuButton} from '../menuButton'
-import {MenuItem} from '../menuItem'
+import {
+  Avatar,
+  Badge,
+  Box,
+  Button,
+  Flex,
+  Hotkeys,
+  Menu,
+  MenuButton,
+  MenuItem,
+  Text,
+} from '@sanity/ui'
 
 export default function AvatarMenuStory() {
   return (

package/src/core/components/menu/__workshop__/customSelectedState.tsx

@@ -1,11 +1,7 @@
 import {ChevronDownIcon} from '@sanity/icons'
+import {Box, Button, Menu, MenuButton, MenuItem} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
-import {Box, Button} from '../../../primitives'
-import {Menu} from '../menu'
-import {MenuButton} from '../menuButton'
-import {MenuItem} from '../menuItem'
-
 const selectedOptions = {
   undefined: 'undefined',
   true: true,

package/src/core/components/menu/__workshop__/shouldFocus.tsx

@@ -1,8 +1,7 @@
+import {Button, Flex, LayerProvider, Popover} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import {Fragment, useCallback, useState} from 'react'
 
-import {Button, Flex, Popover} from '../../../primitives'
-import {LayerProvider} from '../../../utils'
 import {Menu} from '../menu'
 import {MenuDivider} from '../menuDivider'
 import {MenuItem} from '../menuItem'