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

package/exports/_visual-editing.ts

@@ -0,0 +1,31 @@
+/**
+ * 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.1",
+  "version": "3.0.0-static.2",
   "keywords": [
     "sanity",
     "ui",
@@ -20,6 +20,7 @@
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
   "sideEffects": false,
+  "type": "commonjs",
   "exports": {
     ".": {
       "source": "./exports/index.ts",
@@ -27,31 +28,40 @@
       "require": "./dist/index.js",
       "default": "./dist/index.js"
     },
+    "./_visual-editing": {
+      "source": "./exports/_visual-editing.ts",
+      "import": "./dist/_visual-editing.mjs",
+      "require": "./dist/_visual-editing.js",
+      "default": "./dist/_visual-editing.js"
+    },
     "./css": {
       "source": "./exports/css.ts",
       "import": "./dist/css.mjs",
       "require": "./dist/css.js",
       "default": "./dist/css.js"
     },
-    "./system.css": {
-      "default": "./dist/system.css"
-    },
+    "./package.json": "./package.json",
     "./theme": {
       "source": "./exports/theme.ts",
       "import": "./dist/theme.mjs",
       "require": "./dist/theme.js",
       "default": "./dist/theme.js"
     },
-    "./sanity-theme.css": {
-      "default": "./dist/sanity-theme.css"
-    },
-    "./package.json": "./package.json"
+    "./sanity-palette.css": "./dist/sanity-palette.css",
+    "./sanity-theme.css": "./dist/sanity-theme.css",
+    "./system.css": "./dist/system.css"
   },
   "main": "./dist/index.js",
-  "module": "./dist/index.esm.js",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
+      "_visual-editing": [
+        "./dist/_visual-editing.d.ts"
+      ],
+      "css": [
+        "./dist/css.d.ts"
+      ],
       "theme": [
         "./dist/theme.d.ts"
       ]
@@ -61,10 +71,10 @@
     "ui": "./bin/ui.js"
   },
   "files": [
+    "css.js",
     "dist",
     "exports",
-    "src",
-    "theme.js"
+    "src"
   ],
   "commitlint": {
     "extends": [
@@ -95,96 +105,97 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
+    "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
-    "@sanity/icons": "^3.4.0",
-    "@sanity/ui": "^2.8.10",
-    "cac": "^6.7.14",
+    "@sanity/icons": "^3.7.0",
     "csstype": "^3.1.3",
-    "dotenv-flow": "^4.1.0",
-    "framer-motion": "11.0.8",
-    "react-compiler-runtime": "19.0.0-beta-6fc168f-20241025",
+    "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.26.0",
-    "@babel/preset-env": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
-    "@babel/preset-typescript": "^7.26.0",
-    "@commitlint/cli": "^19.4.0",
-    "@commitlint/config-conventional": "^19.2.2",
-    "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.11.8",
+    "@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.23.0",
+    "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^2.0.16",
-    "@storybook/addon-a11y": "^8.4.0",
-    "@storybook/addon-docs": "^8.4.0",
-    "@storybook/addon-essentials": "^8.4.0",
-    "@storybook/addon-interactions": "^8.4.0",
-    "@storybook/addon-links": "^8.4.0",
-    "@storybook/addon-mdx-gfm": "^8.4.0",
-    "@storybook/addon-storysource": "^8.4.0",
-    "@storybook/addon-themes": "^8.4.0",
-    "@storybook/blocks": "^8.4.0",
-    "@storybook/manager-api": "^8.4.0",
-    "@storybook/react": "^8.4.0",
-    "@storybook/react-vite": "^8.4.0",
-    "@storybook/test": "^8.4.0",
-    "@storybook/theming": "^8.4.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.2",
-    "@testing-library/react": "^16.0.1",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@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": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@types/react-is": "^18.3.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.2",
+    "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
-    "@vitejs/plugin-react": "^4.3.3",
-    "babel-plugin-react-compiler": "beta",
-    "commitizen": "^4.3.0",
-    "cypress": "^13.13.2",
-    "cypress-real-events": "^1.13.0",
+    "@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",
+    "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
+    "dotenv-flow": "^4.1.0",
     "esbuild-register": "^3.6.0",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-boundaries": "^4.2.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-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-compiler": "beta",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-plugin-storybook": "^0.10.1",
+    "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",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
-    "jest-axe": "^9.0.0",
+    "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^14.0.1",
     "module-alias": "^2.2.3",
-    "npm-run-all": "^4.1.5",
     "npm-run-all2": "^5.0.2",
-    "prettier": "^3.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-is": "^18.3.1",
-    "refractor": "^4.8.1",
+    "prettier": "^3.5.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-is": "^19.1.0",
+    "refractor": "^4.9.0",
     "rimraf": "^5.0.5",
-    "semantic-release": "^24.0.0",
-    "start-server-and-test": "^2.0.5",
-    "storybook": "^8.4.0",
-    "styled-components": "^6.1.13",
+    "semantic-release": "^24.2.3",
+    "start-server-and-test": "^2.0.11",
+    "storybook": "^8.6.11",
+    "styled-components": "^6.1.16",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.6.3",
-    "vite": "^5.4.2",
-    "vite-tsconfig-paths": "^5.0.1"
+    "typescript": "5.8.2",
+    "typescript-eslint": "^8.29.0",
+    "vite": "^5.4.16",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "peerDependencies": {
     "react": "^18 || >=19.0.0-0",
@@ -202,17 +213,16 @@
     "bundle": false
   },
   "scripts": {
-    "bin:build": "./bin/ui.js build",
-    "build": "run-s clean pkg:build bin:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
+    "build": "run-s clean ui:build pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop css.js dist theme.js",
     "commit": "cz",
     "cypress:dev": "run-p dev cypress:open",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "dev": "run-p storybook:dev workshop:dev",
+    "dev": "run-p workshop:dev",
     "figma:pkg:build": "cd figma && pnpm build",
     "format": "prettier --write --cache --ignore-unknown .",
-    "lint": "eslint . --ext .cjs,.js,.jsx,.mjs,.ts,.tsx",
+    "lint": "eslint .",
     "pkg:build": "pkg build --strict",
     "pkg:check": "pkg --strict",
     "release": "semantic-release",
@@ -221,6 +231,7 @@
     "test": "jest",
     "test:browser": "start-server-and-test 'run-s workshop:build workshop:start' http://localhost:1337 'run-s cypress:run'",
     "ts:check": "tsc",
+    "ui:build": "node -r esbuild-register scripts/build",
     "watch": "pkg watch --strict",
     "workshop:build": "workshop build",
     "workshop:dev": "workshop dev",

package/src/{css/cli → cli}/buildCommand.ts

@@ -1,22 +1,21 @@
+import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
+import {buildTheme_v3, defaultPalette, RootTheme} from '@sanity/ui/theme'
 import fs from 'fs/promises'
 import path from 'path'
-import {buildTheme as buildUITheme} from '@sanity/ui/theme'
-import {compileSystem} from '../compile/compileSystem'
-import {compileTheme} from '../compile/compileTheme'
 
-async function buildSystem(outDir: string) {
-  const css = compileSystem()
+async function buildPalette(outDir: string) {
+  const css = compilePalette(defaultPalette)
 
   await fs.mkdir(outDir, {recursive: true})
 
-  await fs.writeFile(path.resolve(outDir, 'system.css'), css, 'utf-8')
+  await fs.writeFile(path.resolve(outDir, 'sanity-palette.css'), css, 'utf-8')
 
   // eslint-disable-next-line no-console
-  console.log('- system.css')
+  console.log('- sanity-palette.css')
 }
 
 async function buildTheme(outDir: string) {
-  const css = compileTheme(buildUITheme().v2!)
+  const css = compileTheme({v3: buildTheme_v3()} as RootTheme)
 
   await fs.mkdir(outDir, {recursive: true})
 
@@ -26,11 +25,24 @@ async function buildTheme(outDir: string) {
   console.log('- sanity-theme.css')
 }
 
+async function buildSystem(outDir: string) {
+  const css = compileSystem()
+
+  await fs.mkdir(outDir, {recursive: true})
+
+  await fs.writeFile(path.resolve(outDir, 'system.css'), css, 'utf-8')
+
+  // eslint-disable-next-line no-console
+  console.log('- system.css')
+}
+
 export async function buildCommand(options: {cwd?: string; outDir?: string}): Promise<void> {
   const cwd = options.cwd ?? process.cwd()
   const outDir = options.outDir ?? path.resolve(cwd, 'dist')
 
-  await buildSystem(outDir)
+  await buildPalette(outDir)
 
   await buildTheme(outDir)
+
+  await buildSystem(outDir)
 }

package/src/{css/cli → cli}/index.ts

@@ -1,6 +1,6 @@
 import cac from 'cac'
 
-import {version} from '../../../package.json'
+import {version} from '../../package.json'
 
 const cli = cac('ui')
 

package/src/core/StyleTags.tsx

@@ -0,0 +1,24 @@
+import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
+import {buildTheme_v3, RootTheme, Theme_v3} from '@sanity/ui/theme'
+import {ReactNode} from 'react'
+
+/* @beta */
+export function StyleTags(props: {theme?: Theme_v3}): ReactNode {
+  const {theme: themeProp} = props
+
+  const theme = themeProp ?? buildTheme_v3()
+
+  return (
+    <>
+      <style href="sanity-palette" precedence="palette">
+        {compilePalette(theme._palette)}
+      </style>
+      <style href="sanity-theme" precedence="theme">
+        {compileTheme({v3: theme} as RootTheme)}
+      </style>
+      <style href="sanity-system" precedence="system">
+        {compileSystem()}
+      </style>
+    </>
+  )
+}

package/src/core/_compat/index.ts

@@ -1,2 +1,9 @@
-export * from './types'
 export * from './styles'
+export * from './theme'
+export * from './types'
+export {
+  /** @deprecated use `px` from `@sanity/ui/css` */
+  px,
+  /** @deprecated use `rem` from `@sanity/ui/css` */
+  rem,
+} from '@sanity/ui/css'

package/src/core/_compat/styles/_responsive.ts

@@ -0,0 +1,19 @@
+import {CSSObject} from '@sanity/ui/theme'
+
+/**
+ * @internal
+ * @deprecated do not use
+ */
+export function _responsive<T>(
+  media: number[],
+  values: T[],
+  callback: (value: T, index: number, array: T[]) => CSSObject,
+): CSSObject[] {
+  const statements = values?.map(callback) || []
+
+  return statements.map((statement, mediaIndex) => {
+    if (mediaIndex === 0) return statement
+
+    return {[`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement}
+  })
+}

package/src/core/_compat/styles/index.ts

@@ -1,5 +1 @@
-export * from './helpers'
-export * from './types'
-
-// beta
-export * from './font'
+export * from './_responsive'

package/src/core/{theme → _compat/theme}/theme.test.tsx

@@ -1,8 +1,8 @@
 /** @jest-environment jsdom */
-/* eslint-disable @typescript-eslint/no-explicit-any */
 
 import {buildTheme} from '@sanity/ui/theme'
-import {render} from '../../../test'
+
+import {render} from '../../../../test'
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 import {useRootTheme} from './useRootTheme'

package/src/core/{theme → _compat/theme}/themeColorProvider.tsx

@@ -1,4 +1,6 @@
 import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {ReactElement, ReactNode} from 'react'
+
 import {ThemeProvider} from './themeProvider'
 import {useRootTheme} from './useRootTheme'
 
@@ -6,7 +8,7 @@ import {useRootTheme} from './useRootTheme'
  * @public
  */
 export interface ThemeColorProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
   scheme?: ThemeColorSchemeKey
   tone?: ThemeColorCardToneKey
 }
@@ -14,7 +16,7 @@ export interface ThemeColorProviderProps {
 /**
  * @public
  */
-export function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement {
+export function ThemeColorProvider(props: ThemeColorProviderProps): ReactElement {
   const {children, scheme, tone} = props
   const root = useRootTheme()
 

package/src/core/{theme → _compat/theme}/themeContext.ts

@@ -1,4 +1,4 @@
-import {createGlobalScopedContext} from '../lib/createGlobalScopedContext'
+import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import {ThemeContextValue} from './types'
 
 /**

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

@@ -1,12 +1,13 @@
 import {
+  getScopedTheme,
   type RootTheme,
+  type Theme,
   type ThemeColorCardToneKey,
   type ThemeColorSchemeKey,
-  type Theme,
-  getScopedTheme,
 } from '@sanity/ui/theme'
-import {useContext, useMemo} from 'react'
+import {ReactElement, ReactNode, useContext, useMemo} from 'react'
 import {ThemeProvider as StyledThemeProvider} from 'styled-components'
+
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 
@@ -14,7 +15,7 @@ import {ThemeContextValue} from './types'
  * @public
  */
 export interface ThemeProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
   scheme?: ThemeColorSchemeKey
   theme?: RootTheme
   tone?: ThemeColorCardToneKey
@@ -23,14 +24,12 @@ export interface ThemeProviderProps {
 /**
  * @public
  */
-export function ThemeProvider(props: ThemeProviderProps): React.ReactElement {
+export function ThemeProvider(props: ThemeProviderProps): ReactElement {
   const parentTheme = useContext(ThemeContext)
-  const {
-    children,
-    scheme = parentTheme?.scheme || 'light',
-    theme: rootTheme = parentTheme?.theme || null,
-    tone = parentTheme?.tone || 'default',
-  } = props
+  const {children} = props
+  const scheme = props.scheme ?? (parentTheme?.scheme || 'light')
+  const rootTheme = props.theme ?? (parentTheme?.theme || null)
+  const tone = props.tone ?? (parentTheme?.tone || 'default')
 
   const themeContext: ThemeContextValue | null = useMemo(() => {
     if (!rootTheme) return null

package/src/core/{theme → _compat/theme}/useRootTheme.ts

@@ -1,4 +1,5 @@
 import {useContext} from 'react'
+
 import {ThemeContext} from './themeContext'
 import {ThemeContextValue} from './types'
 

package/src/core/{theme → _compat/theme}/useTheme.ts

@@ -1,5 +1,5 @@
-import {Theme, Theme_v2, getTheme_v2} from '@sanity/ui/theme'
-import {useTheme as useStyledTheme} from '../lib/styled'
+import {getTheme_v2, Theme, Theme_v2} from '@sanity/ui/theme'
+import {useTheme as useStyledTheme} from 'styled-components'
 
 /**
  * @public

package/src/core/_compat/types.ts

@@ -2,22 +2,24 @@
 
 import {
   type BaseTheme as _BaseTheme,
-  type ThemeBoxShadow,
+  buildTheme,
   type HSL as _HSL,
   type PartialThemeColorBuilderOpts,
   type RGB as _RGB,
   type RootTheme as _RootTheme,
-  type ThemeStyles,
   type Theme as _Theme,
   type ThemeAvatar,
+  type ThemeBoxShadow,
   type ThemeColor,
   type ThemeColorBase,
   type ThemeColorBuilderOpts,
   type ThemeColorButton,
   type ThemeColorButtonModeKey as _ThemeColorButtonModeKey,
+  type ThemeColorButtonState,
   type ThemeColorButtonStates,
   type ThemeColorButtonTones,
   type ThemeColorCard,
+  type ThemeColorCardState,
   type ThemeColorGenericState,
   type ThemeColorInput,
   type ThemeColorInputState,
@@ -29,6 +31,7 @@ import {
   type ThemeColorSchemeKey as _ThemeColorSchemeKey,
   type ThemeColorSchemes,
   type ThemeColorSelectable,
+  type ThemeColorSelectableState,
   type ThemeColorSelectableStates,
   type ThemeColorSolid,
   type ThemeColorSolidTone,
@@ -38,17 +41,14 @@ import {
   type ThemeColorToneKey,
   type ThemeFont as _ThemeFont,
   type ThemeFontKey as _ThemeFontKey,
+  type ThemeFonts as _ThemeFonts,
   type ThemeFontSize as _ThemeFontSize,
   type ThemeFontWeight as _ThemeFontWeight,
   type ThemeFontWeightKey as _ThemeFontWeightKey,
-  type ThemeFonts as _ThemeFonts,
   type ThemeInput,
   type ThemeLayer as _ThemeLayer,
   type ThemeShadow as _ThemeShadow,
-  type ThemeColorButtonState,
-  type ThemeColorCardState,
-  type ThemeColorSelectableState,
-  buildTheme,
+  type ThemeStyles,
 } from '@sanity/ui/theme'
 
 /**
@@ -166,9 +166,11 @@ export {
   type ThemeColorBase,
   type ThemeColorBuilderOpts,
   type ThemeColorButton,
+  type ThemeColorButtonState,
   type ThemeColorButtonStates,
   type ThemeColorButtonTones,
   type ThemeColorCard,
+  type ThemeColorCardState,
   type ThemeColorGenericState,
   type ThemeColorInput,
   type ThemeColorInputState,
@@ -179,6 +181,7 @@ export {
   type ThemeColorScheme,
   type ThemeColorSchemes,
   type ThemeColorSelectable,
+  type ThemeColorSelectableState,
   type ThemeColorSelectableStates,
   type ThemeColorSolid,
   type ThemeColorSolidTone,
@@ -186,9 +189,6 @@ export {
   type ThemeColorSpotKey,
   type ThemeColorToneKey,
   type ThemeInput,
-  type ThemeColorButtonState,
-  type ThemeColorCardState,
-  type ThemeColorSelectableState,
 }
 
 import {
@@ -197,9 +197,9 @@ import {
   hslToRgb as _hslToRgb,
   multiply as _multiply,
   parseColor as _parseColor,
+  rgba as _rgba,
   rgbToHex as _rgbToHex,
   rgbToHsl as _rgbToHsl,
-  rgba as _rgba,
   screen as _screen,
 } from '@sanity/ui/theme'
 

package/src/core/components/autocomplete/__mocks__/apiStore.ts

@@ -1,4 +1,4 @@
-import countries from '../__fixtures__/countries'
+import countries from './countries'
 
 export const countriesStore = {
   search(

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

@@ -11,6 +11,7 @@ import {
   Text,
 } from '@sanity/ui'
 import {useCallback, useEffect, useRef, useState} from 'react'
+
 import {countriesStore} from '../__mocks__/apiStore'
 
 export default function AsyncStory() {