@sanity/ui 2.0.0-alpha.26 → 2.0.0-alpha.28

package/exports/index.ts

@@ -0,0 +1 @@
+export * from '../src/core'

package/exports/theme.ts

@@ -0,0 +1 @@
+export * from '../src/theme'

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.26",
+  "version": "2.0.0-alpha.28",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
-  "source": "./src/index.ts",
+  "source": "./exports/index.ts",
   "module": "./dist/index.esm.js",
   "main": "./dist/index.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "source": "./src/index.ts",
+      "source": "./exports/index.ts",
       "require": "./dist/index.js",
       "node": {
         "module": "./dist/index.esm.js",
@@ -18,41 +18,61 @@
       "import": "./dist/index.esm.js",
       "default": "./dist/index.esm.js"
     },
+    "./theme": {
+      "types": "./dist/theme.d.ts",
+      "source": "./exports/theme.ts",
+      "require": "./dist/theme.js",
+      "node": {
+        "module": "./dist/theme.esm.js",
+        "import": "./dist/theme.cjs.mjs"
+      },
+      "import": "./dist/theme.esm.js",
+      "default": "./dist/theme.esm.js"
+    },
     "./package.json": "./package.json"
   },
+  "typesVersions": {
+    "*": {
+      "theme": [
+        "./dist/theme.d.ts"
+      ]
+    }
+  },
   "files": [
     "dist",
+    "exports",
     "src"
   ],
   "license": "MIT",
   "scripts": {
-    "build": "run-s clean build:pkg check:pkg",
-    "build:pkg": "pkg build --strict",
-    "check:pkg": "pkg --strict",
-    "check:types": "tsc",
+    "build": "run-s clean pkg:build pkg:check figma:pkg:build",
     "clean": "rimraf .workshop dist",
     "commit": "cz",
     "cypress:dev": "run-p dev cypress:open",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "dev": "run-s workshop:dev",
+    "dev": "run-p storybook:dev workshop:dev",
+    "figma:pkg:build": "cd figma && pnpm build",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx --quiet",
+    "pkg:build": "pkg build --strict",
+    "pkg:check": "pkg --strict",
     "prepare": "husky install",
     "prepublishOnly": "pnpm build",
     "release": "semantic-release",
+    "storybook:build": "storybook build",
+    "storybook:dev": "storybook dev -p 6006",
     "test": "jest",
     "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
+    "ts:check": "tsc",
     "watch": "pkg watch --strict",
     "workshop:build": "workshop build",
     "workshop:dev": "workshop dev",
-    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "workshop:start": "http-server -a localhost -c-0 -p 1337 -s -P http://localhost:1337/index.html? dist"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "2.0.0",
-    "@sanity/color": "3.0.0-beta.6",
+    "@floating-ui/react-dom": "^2.0.4",
+    "@sanity/color": "3.0.0-beta.7",
     "@sanity/icons": "^2.4.1",
     "csstype": "^3.1.2",
     "framer-motion": "^10.16.2",
@@ -68,7 +88,7 @@
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/pkg-utils": "^2.4.8",
     "@sanity/semantic-release-preset": "^4.1.4",
-    "@sanity/ui-workshop": "^2.0.0",
+    "@sanity/ui-workshop": "^2.0.2",
     "@storybook/addon-a11y": "^7.4.5",
     "@storybook/addon-docs": "^7.4.5",
     "@storybook/addon-essentials": "^7.4.5",
@@ -102,6 +122,7 @@
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-boundaries": "^3.4.1",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^5.0.0",
@@ -127,7 +148,9 @@
     "storybook": "^7.5.2",
     "styled-components": "^6.0.7",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.2.2",
+    "vite": "^5.0.2",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "peerDependencies": {
     "react": "^18",

package/src/{__workshop__ → core/__workshop__}/constants.ts

@@ -13,10 +13,8 @@ import {
   Placement,
   TextAlign,
   TextInputType,
-  ThemeColorSpotKey,
-  ThemeColorToneKey,
-  ThemeFontWeightKey,
 } from '@sanity/ui'
+import {ThemeColorSpotKey, ThemeColorToneKey, ThemeFontWeightKey} from '@sanity/ui/theme'
 
 export const WORKSHOP_AVATAR_SIZE_OPTIONS: {[key: string]: AvatarSize} = {
   '0 (default)': 0,

package/src/core/_compat.ts

@@ -0,0 +1,115 @@
+// re-export for backwards compatibility
+export {
+  COLOR_CONFIG_BASE_KEYS,
+  COLOR_CONFIG_BASE_TONES,
+  COLOR_CONFIG_BLEND_KEYS,
+  COLOR_CONFIG_STATE_KEYS,
+  COLOR_CONFIG_STATE_TONES,
+  THEME_COLOR_BASE_TONES,
+  THEME_COLOR_BLEND_MODES,
+  THEME_COLOR_BUTTON_MODES,
+  THEME_COLOR_STATES,
+  THEME_COLOR_STATE_TONES,
+  buildTheme,
+  createColorTheme,
+  hexToRgb,
+  hslToRgb,
+  isColorBlendModeValue,
+  isColorButtonMode,
+  isColorConfigBaseKey,
+  isColorConfigBaseTone,
+  isColorConfigBlendKey,
+  isColorConfigStateKey,
+  isColorConfigStateTone,
+  isColorHueKey,
+  isColorOpacityValue,
+  isColorTintKey,
+  isColorTokenValue,
+  isColorValue,
+  multiply,
+  parseColor,
+  parseTokenKey,
+  parseTokenValue,
+  rgbToHex,
+  rgbToHsl,
+  rgba,
+  rgbaToRGBA,
+  screen,
+  studioTheme,
+  type BaseTheme,
+  type BoxShadow,
+  type CSSObject,
+  type ColorBlendModeTokenValue,
+  type ColorConfigBaseKey,
+  type ColorConfigBaseTone,
+  type ColorConfigBlendKey,
+  type ColorConfigOpacityValue,
+  type ColorConfigStateKey,
+  type ColorConfigStateTone,
+  type ColorConfigValue,
+  type HSL,
+  type PartialThemeColorBuilderOpts,
+  type RGB,
+  type RGBA,
+  type RootTheme,
+  type Theme,
+  type ThemeAvatar,
+  type ThemeColor,
+  type ThemeColorBase,
+  type ThemeColorBaseTokens,
+  type ThemeColorBaseToneKey,
+  type ThemeColorBlendModeKey,
+  type ThemeColorBuilderOpts,
+  type ThemeColorButton,
+  type ThemeColorButtonModeKey,
+  type ThemeColorButtonState,
+  type ThemeColorButtonStates,
+  type ThemeColorButtonTokens,
+  type ThemeColorButtonTones,
+  type ThemeColorCard,
+  type ThemeColorCardState,
+  type ThemeColorGenericState,
+  type ThemeColorInput,
+  type ThemeColorInputState,
+  type ThemeColorInputStates,
+  type ThemeColorMuted,
+  type ThemeColorMutedTone,
+  type ThemeColorName,
+  type ThemeColorScheme,
+  type ThemeColorSchemeKey,
+  type ThemeColorSchemes,
+  type ThemeColorSelectable,
+  type ThemeColorSelectableState,
+  type ThemeColorSelectableStates,
+  type ThemeColorSolid,
+  type ThemeColorSolidTone,
+  type ThemeColorSpot,
+  type ThemeColorSpotKey,
+  type ThemeColorStateKey,
+  type ThemeColorStateTokens,
+  type ThemeColorStateToneKey,
+  type ThemeColorStatesTokens,
+  type ThemeColorSyntax,
+  type ThemeColorTokenValue,
+  type ThemeColorTokens,
+  type ThemeColorToneKey,
+  type ThemeConfig,
+  type ThemeFocusRing,
+  type ThemeFont,
+  type ThemeFontKey,
+  type ThemeFontSize,
+  type ThemeFontWeight,
+  type ThemeFontWeightKey,
+  type ThemeFonts,
+  type ThemeInput,
+  type ThemeLayer,
+  type ThemeShadow,
+  type ThemeStyles,
+  type TokenBaseKeyNode,
+  type TokenBlendModeValueNode,
+  type TokenButtonKeyNode,
+  type TokenColorValueNode,
+  type TokenHueValueNode,
+  type TokenKeyNode,
+  type TokenValueNode,
+} from '@sanity/ui/theme'

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

@@ -79,9 +79,9 @@ export default function AsyncStory() {
   }, [doSearch, optionTitle])
 
   return (
-    <Box padding={[4, 5, 6]}>
+    <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
       <Stack space={[3, 3, 4]}>
-        <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="semibold">
+        <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="medium">
           Country
         </Text>
         <LayerProvider zOffset={100}>
@@ -96,15 +96,14 @@ export default function AsyncStory() {
             openButton={{onClick: handleOpenButtonClick}}
             options={options}
             placeholder="Search"
-            radius={1}
             renderOption={renderOption}
             renderValue={renderValue}
             value={value}
           />
         </LayerProvider>
 
-        <Card border overflow="auto" padding={3} radius={1}>
-          <Code language="json" size={[1, 1, 2]}>
+        <Card overflow="auto" padding={3} radius={2} tone="transparent">
+          <Code language="json" size={1}>
             {JSON.stringify({loading, options, query, value}, null, 2)}
           </Code>
         </Card>

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

@@ -3,6 +3,7 @@ import {
   BoundaryElementProvider,
   Box,
   Card,
+  Container,
   LayerProvider,
   Stack,
   Text,
@@ -18,28 +19,32 @@ export default function ConstrainedHeightStory() {
 
   return (
     <Card height="fill" tone="transparent">
-      <Card
-        ref={setBoundaryElement}
-        radius={3}
-        shadow={3}
-        style={{position: 'absolute', top: 20, right: 20, bottom: 20, left: 20}}
-      >
-        <Box height="fill" overflow="auto" padding={[3, 4, 5]} sizing="border">
-          <Stack space={5}>
-            <BoundaryElementProvider element={boundaryElement}>
-              <ConstrainedHeightExampleField id="example-1" label="Example 1" />
-              <ConstrainedHeightExampleField id="example-2" label="Example 2" />
-              <ConstrainedHeightExampleField id="example-3" label="Example 3" />
-              <ConstrainedHeightExampleField id="example-4" label="Example 4" />
-              <ConstrainedHeightExampleField id="example-5" label="Example 5" />
-              <ConstrainedHeightExampleField id="example-6" label="Example 6" />
-              <ConstrainedHeightExampleField id="example-7" label="Example 7" />
-              <ConstrainedHeightExampleField id="example-8" label="Example 8" />
-              <ConstrainedHeightExampleField id="example-9" label="Example 9" />
-            </BoundaryElementProvider>
-          </Stack>
-        </Box>
-      </Card>
+      <Container height="fill" padding={3} sizing="border" width={1}>
+        <Card
+          height="fill"
+          ref={setBoundaryElement}
+          radius={3}
+          shadow={3}
+          style={{position: 'relative'}}
+          // style={{position: 'absolute', top: 12, right: 12, bottom: 12, left: 12}}
+        >
+          <Box height="fill" overflow="auto" padding={[4, 4, 5]} sizing="border">
+            <Stack space={5}>
+              <BoundaryElementProvider element={boundaryElement}>
+                <ConstrainedHeightExampleField id="example-1" label="Example 1" />
+                <ConstrainedHeightExampleField id="example-2" label="Example 2" />
+                <ConstrainedHeightExampleField id="example-3" label="Example 3" />
+                <ConstrainedHeightExampleField id="example-4" label="Example 4" />
+                <ConstrainedHeightExampleField id="example-5" label="Example 5" />
+                <ConstrainedHeightExampleField id="example-6" label="Example 6" />
+                <ConstrainedHeightExampleField id="example-7" label="Example 7" />
+                <ConstrainedHeightExampleField id="example-8" label="Example 8" />
+                <ConstrainedHeightExampleField id="example-9" label="Example 9" />
+              </BoundaryElementProvider>
+            </Stack>
+          </Box>
+        </Card>
+      </Container>
     </Card>
   )
 }

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

@@ -1,4 +1,4 @@
-import {Autocomplete, Box, Button, Card, Code, Stack, Text} from '@sanity/ui'
+import {Autocomplete, Box, Button, Card, Code, Container, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 import {
@@ -48,36 +48,41 @@ export default function CustomStory() {
   const options = data.map((item) => ({value: item.value, title: item.title}))
 
   return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={3}>
-        <Text as="label" htmlFor="custom" id="custom-label" size={1} weight="semibold">
-          Country
-        </Text>
-        <Autocomplete
-          aria-describedby="custom-label"
-          border={border}
-          disabled={disabled}
-          filterOption={filterOption}
-          fontSize={fontSize}
-          id="custom"
-          onChange={setValue}
-          openButton={openButton}
-          options={options}
-          padding={padding}
-          placeholder="Search"
-          radius={radius}
-          readOnly={readOnly}
-          renderOption={renderOption}
-          renderValue={renderValue}
-          value={value}
-        />
-        <Card padding={3} radius={1} tone="transparent">
-          <Code>{JSON.stringify(value)}</Code>
-        </Card>
-        <Box>
-          <Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
-        </Box>
-      </Stack>
+    <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
+      <Container width={0}>
+        <Stack space={5}>
+          <Stack space={3}>
+            <Text as="label" htmlFor="custom" id="custom-label" size={1} weight="medium">
+              Country
+            </Text>
+            <Autocomplete
+              aria-describedby="custom-label"
+              border={border}
+              disabled={disabled}
+              filterOption={filterOption}
+              fontSize={fontSize}
+              id="custom"
+              onChange={setValue}
+              openButton={openButton}
+              options={options}
+              padding={padding}
+              placeholder="Search"
+              radius={radius}
+              readOnly={readOnly}
+              renderOption={renderOption}
+              renderValue={renderValue}
+              value={value}
+            />
+          </Stack>
+
+          <Card padding={3} radius={2} tone="transparent">
+            <Code size={1}>{JSON.stringify(value)}</Code>
+          </Card>
+          <Box>
+            <Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
+          </Box>
+        </Stack>
+      </Container>
     </Box>
   )
 }

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

@@ -47,9 +47,9 @@ export default function ExampleStory() {
   return (
     <Card height="fill" tone={layoutTone}>
       <Container width={1}>
-        <Box padding={[3, 4, 5]}>
+        <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
           <Stack space={3}>
-            <Text as="label" htmlFor="default" size={1} weight="semibold">
+            <Text as="label" htmlFor="default" size={1} weight="medium">
               Country code
             </Text>
             <Wrapper>

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

@@ -21,12 +21,14 @@ export default function FocusAndBlurStory() {
           placeholder="Search"
           value={value}
         />
-        <Stack space={1}>
+        <Stack space={3}>
           <Card overflow="auto" padding={3} radius={2} tone="transparent">
-            <Code id="focus-and-blur-log">{JSON.stringify(log)}</Code>
+            <Code id="focus-and-blur-log" language="json" size={1}>
+              {JSON.stringify(log)}
+            </Code>
           </Card>
 
-          <Button id="focus-and-blur-clear-btn" onClick={handleClear} text="Clear" />
+          <Button id="focus-and-blur-clear-btn" mode="ghost" onClick={handleClear} text="Clear" />
         </Stack>
       </Stack>
     </Box>

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

@@ -17,7 +17,6 @@ export default function LayeringFocusStory() {
           <Button
             text="Open dialog 1"
             onClick={() => setFirstDialogOpen(true)}
-            tone="primary"
             id="open-dialog-1-button"
           />
 

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

@@ -33,5 +33,9 @@ export default function LayeringStory() {
 function DebugLayer() {
   const layer = useLayer()
 
-  return <Code language="json">{JSON.stringify(layer, null, 2)}</Code>
+  return (
+    <Code language="json" size={1}>
+      {JSON.stringify(layer, null, 2)}
+    </Code>
+  )
 }

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

@@ -46,12 +46,7 @@ function Pane(props: {borderLeft?: boolean; id: string}) {
       <PortalProvider element={portalElement}>
         <PaneRoot borderLeft={borderLeft} flex={1} ref={setElement}>
           <Box padding={4}>
-            <Button
-              onClick={() => setDialogOpen(true)}
-              selected={dialogOpen}
-              text="Open dialog"
-              tone="primary"
-            />
+            <Button onClick={() => setDialogOpen(true)} selected={dialogOpen} text="Open dialog" />
           </Box>
 
           <PanePortal ref={setPortalElement} />
@@ -67,7 +62,7 @@ function Pane(props: {borderLeft?: boolean; id: string}) {
           >
             <Box padding={4}>
               <MenuButton
-                button={<Button text="Open menu" tone="primary" />}
+                button={<Button text="Open menu" />}
                 id={`${id}-menu`}
                 menu={
                   <Menu>

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

@@ -1,4 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {
@@ -11,7 +12,7 @@ import {useArrayProp, useClickOutside, useForwardedRef, useGlobalKeyDown} from '
 import {Box, Button, Card, CardProps, Container, Flex, Text} from '../../primitives'
 import {ResponsivePaddingProps, ResponsiveWidthProps} from '../../primitives/types'
 import {responsivePaddingStyle, ResponsivePaddingStyleProps} from '../../styles/internal'
-import {ThemeColorSchemeKey, useTheme} from '../../theme'
+import {useTheme} from '../../theme'
 import {DialogPosition, Radius} from '../../types'
 import {Layer, LayerProps, Portal, useBoundaryElement, useLayer, usePortal} from '../../utils'
 import {BORDER_OFFSET_X} from './constants'
@@ -317,8 +318,8 @@ const DialogCard = forwardRef(function DialogCard(
               $isContentScrollable={isContentScrollable}
               $hasScrolledFromTop={hasScrolledFromTop}
             >
-              <Flex align="center">
-                <Box flex={1} margin={1} padding={4}>
+              <Flex align="center" padding={3}>
+                <Box flex={1} padding={2}>
                   {header && (
                     <Text id={labelId} size={1} weight="medium">
                       {header}
@@ -326,13 +327,14 @@ const DialogCard = forwardRef(function DialogCard(
                   )}
                 </Box>
                 {showCloseButton && (
-                  <Box padding={3}>
+                  <Box flex="none">
                     <Button
                       aria-label="Close dialog"
                       disabled={!onClose}
                       icon={CloseIcon}
                       mode="bleed"
                       onClick={onClose}
+                      padding={2}
                     />
                   </Box>
                 )}
@@ -383,7 +385,7 @@ export const Dialog = forwardRef(function Dialog(
     onClickOutside,
     onClose,
     onFocus,
-    padding: paddingProp = 4,
+    padding: paddingProp = 3,
     portal: portalProp,
     position: positionProp = dialog.position || 'fixed',
     scheme,

package/src/{components → core/components}/dialog/styles.ts

@@ -1,7 +1,7 @@
+import {CSSObject} from '@sanity/ui/theme'
 import {css} from 'styled-components'
 import {_responsive, ThemeProps} from '../../styles'
 import {DialogPosition} from '../../types'
-import {CSSObject} from '../../types/styled'
 
 /**
  * @internal

package/src/{components → core/components}/menu/__workshop__/asComponent.tsx

@@ -24,16 +24,16 @@ export default function AsComponentStory() {
         id="test"
         menu={
           <Menu>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
               <Text>Component 1</Text>
             </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
               <Text>Component 2</Text>
             </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
               <Text>Component 3</Text>
             </MenuItem>
-            <MenuItem as={CustomLink} data-as="a" {...props} padding={3} tone="primary">
+            <MenuItem as={CustomLink} data-as="a" {...props} padding={3}>
               <Text>Component 3</Text>
             </MenuItem>
           </Menu>

package/src/{components → core/components}/menu/__workshop__/customMenuItem.tsx

@@ -8,7 +8,9 @@ export default function CustomMenuItemStory() {
           <Menu>
             <MenuItem padding={3}>
               <Stack space={3}>
-                <Text weight="semibold">First option</Text>
+                <Text weight="medium" size={1}>
+                  First option
+                </Text>
                 <Text muted size={1}>
                   Description
                 </Text>
@@ -16,7 +18,9 @@ export default function CustomMenuItemStory() {
             </MenuItem>
             <MenuItem padding={3}>
               <Stack space={3}>
-                <Text weight="semibold">Second option</Text>
+                <Text weight="medium" size={1}>
+                  Second option
+                </Text>
                 <Text muted size={1}>
                   Description
                 </Text>
@@ -25,7 +29,9 @@ export default function CustomMenuItemStory() {
             <MenuDivider />
             <MenuItem padding={3} tone="critical">
               <Stack space={3}>
-                <Text weight="semibold">Dangerous option</Text>
+                <Text weight="medium" size={1}>
+                  Dangerous option
+                </Text>
                 <Text muted size={1}>
                   Description
                 </Text>

package/src/{components → core/components}/menu/__workshop__/menuButton.tsx

@@ -34,7 +34,7 @@ export default function MenuButtonStory() {
           <Button id="prev-button" mode="ghost" text="Prev" />
           <LayerProvider>
             <MenuButton
-              button={<Button tone="primary" text="Open" />}
+              button={<Button text="Open" />}
               id="menu-button"
               menu={
                 <Menu>

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

@@ -3,7 +3,7 @@
 /* eslint-disable no-console */
 
 import React, {useCallback, useMemo} from 'react'
-import {render} from '../../../test'
+import {render} from '../../../../test'
 import {MenuContext, MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'
 

package/src/{components → core/components}/menu/menuButton.tsx

@@ -1,7 +1,7 @@
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {cloneElement, forwardRef, useCallback, useMemo, useState, useEffect, useRef} from 'react'
 import {isElement} from 'react-is'
 import {Popover, PopoverProps} from '../../primitives'
-import {ThemeColorSchemeKey} from '../../theme'
 import {Placement, Radius} from '../../types'
 import {MenuProps} from './menu'