@sanity/ui 3.0.0-static.10 → 3.0.0-static.2

package/exports/_visual-editing.ts

@@ -2,30 +2,30 @@
  * These are internal exports for usage in `@sanity/visual-editing` and `@sanity/insert-menu`,
  * which are used in environments where the regular `@sanity/ui` export is far too heavy due to imports from refractor and more.
  */
-export {studioTheme} from '../src/ui/_compat'
-export {ThemeProvider, type ThemeProviderProps} from '../src/ui/_compat/theme/themeProvider'
-export {useTheme_v2} from '../src/ui/_compat/theme/useTheme'
-export {Hotkeys, type HotkeysProps} from '../src/ui/components/hotkeys/hotkeys'
-export {Menu, type MenuProps} from '../src/ui/components/menu/menu'
-export {MenuDivider} from '../src/ui/components/menu/menuDivider'
-export {MenuGroup, type MenuGroupProps} from '../src/ui/components/menu/menuGroup'
-export {MenuItem, type MenuItemProps} from '../src/ui/components/menu/menuItem'
-export {Tab, type TabProps} from '../src/ui/components/tab/tab'
-export {TabList, type TabListProps} from '../src/ui/components/tab/tabList'
-export {isHTMLAnchorElement, isHTMLElement} from '../src/ui/helpers/element'
-export {usePrefersDark} from '../src/ui/hooks/usePrefersDark'
-export {Box, type BoxProps} from '../src/ui/primitives/box/box'
-export {Button, type ButtonProps} from '../src/ui/primitives/button/button'
-export {Card, type CardProps} from '../src/ui/primitives/card/card'
-export {Flex, type FlexProps} from '../src/ui/primitives/flex/flex'
-export {Grid, type GridProps} from '../src/ui/primitives/grid/grid'
-export {Popover, type PopoverProps} from '../src/ui/primitives/popover/popover'
-export {Spinner, type SpinnerProps} from '../src/ui/primitives/spinner/spinner'
-export {Stack, type StackProps} from '../src/ui/primitives/stack/stack'
-export {Text, type TextProps} from '../src/ui/primitives/text/text'
-export {TextInput, type TextInputProps} from '../src/ui/primitives/textInput/textInput'
-export {Tooltip, type TooltipProps} from '../src/ui/primitives/tooltip/tooltip'
-export type {PopoverMargins} from '../src/ui/types/popover'
-export {LayerProvider} from '../src/ui/utils/layer/layerProvider'
-export {Portal, type PortalProps} from '../src/ui/utils/portal/portal'
-export {PortalProvider, type PortalProviderProps} from '../src/ui/utils/portal/portalProvider'
+export {studioTheme} from '../src/core/_compat'
+export {ThemeProvider, type ThemeProviderProps} from '../src/core/_compat/theme/themeProvider'
+export {useTheme_v2} from '../src/core/_compat/theme/useTheme'
+export {Hotkeys, type HotkeysProps} from '../src/core/components/hotkeys/hotkeys'
+export {Menu, type MenuProps} from '../src/core/components/menu/menu'
+export {MenuDivider} from '../src/core/components/menu/menuDivider'
+export {MenuGroup, type MenuGroupProps} from '../src/core/components/menu/menuGroup'
+export {MenuItem, type MenuItemProps} from '../src/core/components/menu/menuItem'
+export {Tab, type TabProps} from '../src/core/components/tab/tab'
+export {TabList, type TabListProps} from '../src/core/components/tab/tabList'
+export {isHTMLAnchorElement, isHTMLElement} from '../src/core/helpers/element'
+export {usePrefersDark} from '../src/core/hooks/usePrefersDark'
+export {Box, type BoxProps} from '../src/core/primitives/box/box'
+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 {Popover, type PopoverProps} from '../src/core/primitives/popover/popover'
+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/exports/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.10",
+  "version": "3.0.0-static.2",
   "keywords": [
     "sanity",
     "ui",
@@ -109,50 +109,50 @@
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.0",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.9.7",
-    "react-compiler-runtime": "19.1.0-rc.1",
+    "framer-motion": "^12.6.3",
+    "react-compiler-runtime": "19.0.0-beta-e993439-20250405",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.27.1",
-    "@babel/preset-env": "^7.27.1",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
+    "@babel/core": "^7.26.10",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.27.0",
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
-    "@eslint/js": "^9.26.0",
-    "@rollup/plugin-replace": "^6.0.2",
+    "@eslint/js": "^9.23.0",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
-    "@sanity/ui-workshop": "^2.1.3",
-    "@storybook/addon-a11y": "^8.6.12",
-    "@storybook/addon-docs": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-mdx-gfm": "^8.6.12",
-    "@storybook/addon-storysource": "^8.6.12",
-    "@storybook/addon-themes": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/manager-api": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/test": "^8.6.12",
-    "@storybook/theming": "^8.6.12",
+    "@sanity/semantic-release-preset": "^5.0.0",
+    "@sanity/ui-workshop": "^2.0.34",
+    "@storybook/addon-a11y": "^8.6.11",
+    "@storybook/addon-docs": "^8.6.11",
+    "@storybook/addon-essentials": "^8.6.11",
+    "@storybook/addon-interactions": "^8.6.11",
+    "@storybook/addon-links": "^8.6.11",
+    "@storybook/addon-mdx-gfm": "^8.6.11",
+    "@storybook/addon-storysource": "^8.6.11",
+    "@storybook/addon-themes": "^8.6.11",
+    "@storybook/blocks": "^8.6.11",
+    "@storybook/manager-api": "^8.6.11",
+    "@storybook/react": "^8.6.11",
+    "@storybook/react-vite": "^8.6.11",
+    "@storybook/test": "^8.6.11",
+    "@storybook/theming": "^8.6.11",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
+    "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.7",
-    "@types/react": "^19.1.3",
-    "@types/react-dom": "^19.1.3",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.2",
     "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
-    "@vitejs/plugin-react": "^4.4.1",
-    "babel-plugin-react-compiler": "19.1.0-rc.1",
+    "@vitejs/plugin-react": "^4.3.4",
+    "babel-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
@@ -160,15 +160,16 @@
     "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": "^9.23.0",
+    "eslint-config-prettier": "^10.1.1",
     "eslint-formatter-compact": "^8.40.0",
     "eslint-plugin-boundaries": "^5.0.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "0.0.0-experimental-7a2c7045-20250506",
-    "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
+    "eslint-plugin-react-hooks": "experimental",
+    "eslint-plugin-react-refresh": "^0.4.19",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^0.12.0",
     "globals": "^16.0.0",
@@ -178,7 +179,6 @@
     "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^14.0.1",
-    "magic-string": "^0.30.17",
     "module-alias": "^2.2.3",
     "npm-run-all2": "^5.0.2",
     "prettier": "^3.5.3",
@@ -189,12 +189,12 @@
     "rimraf": "^5.0.5",
     "semantic-release": "^24.2.3",
     "start-server-and-test": "^2.0.11",
-    "storybook": "^8.6.12",
-    "styled-components": "^6.1.17",
+    "storybook": "^8.6.11",
+    "styled-components": "^6.1.16",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.8.3",
-    "typescript-eslint": "^8.32.0",
-    "vite": "^5.4.19",
+    "typescript": "5.8.2",
+    "typescript-eslint": "^8.29.0",
+    "vite": "^5.4.16",
     "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {

package/src/cli/buildCommand.ts

@@ -1,10 +1,10 @@
 import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
-import {buildTheme_v3, RootTheme} from '@sanity/ui/theme'
+import {buildTheme_v3, defaultPalette, RootTheme} from '@sanity/ui/theme'
 import fs from 'fs/promises'
 import path from 'path'
 
 async function buildPalette(outDir: string) {
-  const css = compilePalette()
+  const css = compilePalette(defaultPalette)
 
   await fs.mkdir(outDir, {recursive: true})
 

package/src/{ui → core}/StyleTags.tsx

@@ -11,7 +11,7 @@ export function StyleTags(props: {theme?: Theme_v3}): ReactNode {
   return (
     <>
       <style href="sanity-palette" precedence="palette">
-        {compilePalette()}
+        {compilePalette(theme._palette)}
       </style>
       <style href="sanity-theme" precedence="theme">
         {compileTheme({v3: theme} as RootTheme)}

package/src/core/_compat/theme/themeContext.ts

@@ -0,0 +1,10 @@
+import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
+import {ThemeContextValue} from './types'
+
+/**
+ * @internal
+ */
+export const ThemeContext = createGlobalScopedContext<ThemeContextValue | null>(
+  '@sanity/ui/context/theme',
+  null,
+)

package/src/{ui → core}/_compat/theme/themeProvider.tsx

@@ -8,8 +8,6 @@ import {
 import {ReactElement, ReactNode, useContext, useMemo} from 'react'
 import {ThemeProvider as StyledThemeProvider} from 'styled-components'
 
-import {CardProvider} from '../../primitives/card/cardProvider'
-import {ThemeColorProvider} from './themeColorProvider'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 
@@ -55,19 +53,9 @@ export function ThemeProvider(props: ThemeProviderProps): ReactElement {
   }
 
   return (
-    <CardProvider
-      compat_provider={
-        // Render a theme provider around the card if the scheme or tone differs from the root theme.
-        // This is needed for backwards compatibility with the legacy theme API.
-        ThemeColorProvider
-      }
-      scheme={scheme}
-      tone={tone}
-    >
-      <ThemeContext.Provider value={themeContext}>
-        <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
-      </ThemeContext.Provider>
-    </CardProvider>
+    <ThemeContext.Provider value={themeContext}>
+      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
+    </ThemeContext.Provider>
   )
 }
 

package/src/{ui → core}/_compat/types.ts

@@ -261,14 +261,4 @@ export const screen = _screen
  * @public
  * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
  */
-export const studioTheme = (() => {
-  let theme: ReturnType<typeof buildTheme> | undefined
-  return {
-    get value() {
-      if (!theme) {
-        theme = buildTheme()
-      }
-      return theme
-    },
-  }
-})()
+export const studioTheme = buildTheme()

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

@@ -131,7 +131,7 @@ function AsyncOption(props: {
 
   return (
     <Card
-      as="button"
+      data-as="button"
       disabled={disabled}
       padding={3}
       radius={1}

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

@@ -21,9 +21,17 @@ export default function ConstrainedHeightStory() {
   return (
     <Card height="fill" tone="transparent">
       <Container height="fill" padding={3} sizing="border" width={1}>
-        <Card height="fill" ref={setBoundaryElement} radius={4} shadow={3} tone="default">
+        <Card
+          height="fill"
+          ref={setBoundaryElement}
+          radius={3}
+          shadow={3}
+          style={{position: 'relative'}}
+          tone="default"
+          // style={{position: 'absolute', top: 12, right: 12, bottom: 12, left: 12}}
+        >
           <Box height="fill" overflow="auto" padding={[4, 4, 5]} sizing="border">
-            <Stack gap={5}>
+            <Stack space={5}>
               <BoundaryElementProvider element={boundaryElement}>
                 <ConstrainedHeightExampleField id="example-1" label="Example 1" />
                 <ConstrainedHeightExampleField id="example-2" label="Example 2" />
@@ -96,8 +104,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
           open
           overflow="auto"
           placement="bottom-start"
-          portal
-          radius={3}
+          radius={1}
           ref={popoverRef}
           referenceElement={inputElement}
         />
@@ -107,7 +114,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
   )
 
   return (
-    <Stack gap={3}>
+    <Stack space={3}>
       <Text size={1} weight="medium">
         {label}
       </Text>
@@ -119,7 +126,7 @@ function ConstrainedHeightExampleField({id, label}: {id: string; label: string})
           openButton
           options={options}
           placeholder="Search"
-          radius={2}
+          radius={1}
           renderOption={renderOption}
           renderPopover={renderPopover}
           renderValue={renderValue}

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

@@ -11,6 +11,7 @@ import {
   Layer,
   Portal,
   PortalProvider,
+  Skeleton,
   Stack,
   Text,
   TextSkeleton,
@@ -252,7 +253,7 @@ function AsyncOption(props: {
   return (
     <Card
       aria-label={data?.title}
-      as="button"
+      data-as="a"
       disabled={disabled}
       padding={2}
       radius={2}
@@ -261,9 +262,9 @@ function AsyncOption(props: {
       tabIndex={tabIndex}
     >
       <Flex align="center">
-        <Box muted radius={2} style={{width: 35, height: 35}} />
+        <Skeleton radius={2} style={{width: 35, height: 35}} />
         <Box flex={1} marginLeft={3}>
-          <Stack gap={2}>
+          <Stack space={2}>
             {loading && (
               <>
                 <TextSkeleton style={{maxWidth: 200}} />

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

@@ -34,7 +34,6 @@ import {
   Text,
   TextInput,
 } from '../../primitives'
-// import {Selectable} from '../../primitives/_selectable'
 import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
 import {Props, Radius} from '../../types'
 import {AutocompleteOption} from './autocompleteOption'
@@ -128,7 +127,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     customValidity,
     disabled,
     filterOption: filterOptionProp,
-    fontSize = 2,
+    fontSize = 1,
     icon,
     id,
     listBox = EMPTY_RECORD,
@@ -167,7 +166,13 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const defaultRenderOption = useCallback(
     ({value}: BaseAutocompleteOption) => (
-      <Card as="button" padding={paddingProp} radius={2} tone="inherit">
+      <Card
+        as="button"
+        // data-as="button"
+        padding={paddingProp}
+        radius={2}
+        tone="inherit"
+      >
         <Text size={fontSize} textOverflow="ellipsis">
           {value}
         </Text>
@@ -665,7 +670,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         overflow="auto"
         placement={AUTOCOMPLETE_POPOVER_PLACEMENT}
         portal
-        radius={3}
+        radius={radius}
         ref={resultsPopoverElementRef}
         referenceElement={inputElementRef.current}
         {...popover}
@@ -678,6 +683,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
     popover,
+    radius,
     renderPopover,
   ])
 

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

@@ -26,7 +26,7 @@ import {
   useRef,
 } from 'react'
 
-import {Z_OFFSETS} from '../../constants'
+import {useTheme_v2} from '../../_compat'
 import {
   containsOrEqualsElement,
   focusFirstDescendant,
@@ -282,6 +282,7 @@ export const Dialog = forwardRef(function Dialog(
   ref: ForwardedRef<HTMLDivElement>,
 ) {
   const context = useDialog()
+  const {layer} = useTheme_v2()
   const {
     __unstable_autoFocus: autoFocus = true,
     __unstable_hideCloseButton: hideCloseButton = false,
@@ -308,8 +309,8 @@ export const Dialog = forwardRef(function Dialog(
     tone,
     ...restProps
   } = props
-  const positionProp = _positionProp ?? context.position ?? 'fixed'
-  const zOffsetProp = _zOffsetProp ?? context.zOffset ?? Z_OFFSETS.dialog
+  const positionProp = _positionProp ?? (context.position || 'fixed')
+  const zOffsetProp = _zOffsetProp ?? (context.zOffset || layer.dialog.zOffset)
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()

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

@@ -2,7 +2,7 @@ import {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
 import {FontTextSize, Space} from '@sanity/ui/theme'
 import {ForwardedRef, forwardRef} from 'react'
 
-import {Box, KBD} from '../../primitives'
+import {Box, Inline, KBD} from '../../primitives'
 import {Props} from '../../types'
 
 /**
@@ -25,10 +25,10 @@ export const Hotkeys = forwardRef(function Hotkeys(
   props: Props<HotkeysProps, 'div'>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {fontSize, gap, gapX, gapY, keys, padding, radius, space = 0.5, ...restProps} = props
+  const {fontSize, gap, gapX, gapY, keys, padding, radius, space = 1, ...restProps} = props
 
   if (!keys || keys.length === 0) {
-    return undefined
+    return <></>
   }
 
   return (
@@ -42,11 +42,13 @@ export const Hotkeys = forwardRef(function Hotkeys(
       gapY={gapY}
       ref={ref}
     >
-      {keys.map((key, i) => (
-        <KBD fontSize={fontSize} key={i} padding={padding} radius={radius}>
-          {key}
-        </KBD>
-      ))}
+      <Inline as="span" gap={gap}>
+        {keys.map((key, i) => (
+          <KBD display="block" fontSize={fontSize} key={i} padding={padding} radius={radius}>
+            {key}
+          </KBD>
+        ))}
+      </Inline>
     </Box>
   )
 })

package/src/{ui → core}/components/toast/toast.tsx

@@ -109,6 +109,7 @@ export function Toast(
       animate={animate}
       exit={exit}
       transition={transition}
+      width="fill"
       position="relative"
     >
       <MotionFlex align="flex-start" variants={content} transition={transition}>

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

@@ -77,9 +77,3 @@ export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | '
   bottom: 'top',
   left: 'right',
 }
-
-export const Z_OFFSETS = {
-  dialog: 600,
-  popover: 400,
-  tooltip: 200,
-}

package/src/core/hooks/useMatchMedia.ts

@@ -0,0 +1,46 @@
+import {useDebugValue, useMemo, useSyncExternalStore} from 'react'
+
+/**
+ * Efficiently subscribes to `window.matchMedia` queries
+ *
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ *
+ * @public
+ */
+export function useMatchMedia(
+  mediaQueryString: `(${string})`,
+  getServerSnapshot?: () => boolean,
+): boolean {
+  const {subscribe, getSnapshot} = useMemo(() => {
+    /**
+     * `subscribe` and `getSnapshot` are only called on the client and both need access to the same `matchMedia` instance
+     * we don't want to eagerly instantiate it to ensure it's only created when actually used
+     */
+    let MEDIA_QUERY_CACHE: MediaQueryList | undefined
+
+    const getMatchMedia = (): MediaQueryList => {
+      if (!MEDIA_QUERY_CACHE) {
+        // As this function is only called during `subscribe` and `getSnapshot`, we can assume that the
+        // the `window` global is available and we're in a browser environment
+        MEDIA_QUERY_CACHE = window.matchMedia(mediaQueryString)
+      }
+
+      return MEDIA_QUERY_CACHE
+    }
+
+    return {
+      subscribe: (onStoreChange: () => void): (() => void) => {
+        const matchMedia = getMatchMedia()
+
+        matchMedia.addEventListener('change', onStoreChange)
+
+        return () => matchMedia.removeEventListener('change', onStoreChange)
+      },
+      getSnapshot: () => getMatchMedia().matches,
+    }
+  }, [mediaQueryString])
+
+  useDebugValue(mediaQueryString)
+
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}

package/src/{ui → core}/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,7 +1,6 @@
 import {useMemo, useSyncExternalStore} from 'react'
 
-// TODO: get from theme?
-const media = [360, 600, 900, 1200, 1800, 2400]
+import {useTheme_v2} from '../../_compat'
 
 /**
  * @internal
@@ -28,7 +27,7 @@ function _getMediaQuery(media: number[], index: number): MediaQuery {
   return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`
 }
 
-function _createMediaStore(): _MediaStore {
+function _createMediaStore(media: number[]): _MediaStore {
   const mediaLen = media.length
   let sizes: {mq: MediaQueryList; index: number}[]
 
@@ -96,7 +95,8 @@ function getServerSnapshot() {
  * @beta
  */
 export function useMediaIndex(): number {
-  const store = useMemo(() => _createMediaStore(), [])
+  const {media} = useTheme_v2()
+  const store = useMemo(() => _createMediaStore(media), [media])
 
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)
 }

package/src/{ui → core}/primitives/box/box.tsx

@@ -32,10 +32,7 @@ export const Box = forwardRef(function Box(
   const {
     align,
     as: As = 'div',
-    autoCols,
-    autoFlow,
-    autoRows,
-    border = false,
+    border,
     borderTop,
     borderRight,
     borderBottom,
@@ -66,7 +63,6 @@ export const Box = forwardRef(function Box(
     marginBottom,
     marginLeft,
     maxWidth,
-    minWidth = 0,
     overflow,
     padding = 0,
     paddingX,
@@ -97,9 +93,6 @@ export const Box = forwardRef(function Box(
         className,
         box({
           align,
-          autoCols,
-          autoFlow,
-          autoRows,
           border,
           borderTop,
           borderRight,
@@ -131,7 +124,6 @@ export const Box = forwardRef(function Box(
           marginBottom,
           marginLeft,
           maxWidth,
-          minWidth,
           muted,
           padding,
           paddingX,