@sanity/ui 3.0.0-static.18 → 3.0.0-static.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.18",
+  "version": "3.0.0-static.19",
   "keywords": [
     "react",
     "ui",
@@ -48,7 +48,6 @@
       "require": "./dist/theme.cjs",
       "default": "./dist/theme.js"
     },
-    "./ui-palette.css": "./dist/ui-palette.css",
     "./ui-theme.css": "./dist/ui-theme.css",
     "./ui-system.css": "./dist/ui-system.css",
     "./ui.css": "./dist/ui.css"
@@ -128,7 +127,6 @@
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@eslint/js": "^9.26.0",
-    "@rollup/plugin-replace": "^6.0.2",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/ui-workshop": "^2.1.2",
@@ -150,14 +148,13 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.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-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
     "@vitejs/plugin-react": "^4.4.1",
+    "@vitest/browser": "^3.1.4",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
@@ -180,12 +177,7 @@
     "globals": "^16.0.0",
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
-    "jest": "^29.7.0",
-    "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",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -200,7 +192,9 @@
     "typescript": "5.8.3",
     "typescript-eslint": "^8.32.0",
     "vite": "^5.4.19",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^3.1.4",
+    "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {
     "react": "^18 || >=19.0.0-0",
@@ -219,13 +213,13 @@
   },
   "scripts": {
     "build": "run-s clean css:build pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop dist",
+    "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:dev",
+    "dev": "run-p workshop:clean workshop:dev",
     "figma:pkg:build": "cd figma && pnpm build",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint .",
@@ -234,12 +228,13 @@
     "release": "semantic-release",
     "storybook:build": "storybook build",
     "storybook:dev": "storybook dev -p 6006",
-    "test": "jest",
+    "test": "vitest run",
     "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: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"
   }
 }

package/src/cli/buildCommand.ts

@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 
-import {_compilePalette, _compileSystem, _compileTheme} from '@sanity/ui/css'
-import {buildTheme_v3, RootTheme} from '@sanity/ui/theme'
+import {_compileSystem, _compileTheme} from '@sanity/ui/css'
 import cssnano from 'cssnano'
 import fs from 'fs/promises'
 import {gzipSizeSync} from 'gzip-size'
@@ -14,12 +13,9 @@ export async function buildCommand(options: {cwd?: string; outDir?: string}): Pr
   const cwd = options.cwd ?? process.cwd()
   const outDir = options.outDir ?? path.resolve(cwd, 'dist')
 
-  await Promise.all([
-    buildPalette(outDir),
-    buildTheme(outDir),
-    buildSystem(outDir),
-    buildAll(outDir),
-  ])
+  await buildTheme({outDir})
+  await buildSystem({outDir})
+  await buildAll({outDir})
 }
 
 //
@@ -42,23 +38,10 @@ function prettySize(str: string) {
   return `${prettyBytes(str.length)} / ${prettyBytes(gzipSizeSync(str))}`
 }
 
-// @sanity/ui/ui-palette.css
-async function buildPalette(outDir: string) {
-  const css = _compilePalette()
-  const minified = await minify(css)
-  const prettified = await prettify(css)
-
-  await fs.mkdir(outDir, {recursive: true})
-  await fs.writeFile(path.resolve(outDir, 'ui-palette.css'), prettified, 'utf-8')
-  await fs.writeFile(path.resolve(outDir, 'ui-palette.min.css'), minified.css, 'utf-8')
-
-  console.log(`- built ui-palette.css (${prettySize(prettified)})`)
-  console.log(`- built ui-palette.min.css (${prettySize(minified.css)})`)
-}
-
 // @sanity/ui/ui-theme.css
-async function buildTheme(outDir: string) {
-  const css = await prettify(_compileTheme({v3: buildTheme_v3()} as RootTheme))
+async function buildTheme(options: {outDir: string}) {
+  const {outDir} = options
+  const css = await prettify(_compileTheme())
   const minified = await minify(css)
   const prettified = await prettify(css)
 
@@ -71,7 +54,8 @@ async function buildTheme(outDir: string) {
 }
 
 // @sanity/ui/ui-system.css
-async function buildSystem(outDir: string) {
+async function buildSystem(options: {outDir: string}) {
+  const {outDir} = options
   const css = await prettify(_compileSystem())
   const minified = await minify(css)
   const prettified = await prettify(css)
@@ -85,13 +69,12 @@ async function buildSystem(outDir: string) {
 }
 
 // @sanity/ui/ui.css
-async function buildAll(outDir: string) {
+async function buildAll(options: {outDir: string}) {
+  const {outDir} = options
   const css = await prettify(
     [
-      `/* @sanity/ui/ui-palette.css */\n`,
-      _compilePalette(),
-      `\n\n/* @sanity/ui/ui-theme.css */\n`,
-      _compileTheme({v3: buildTheme_v3()} as RootTheme),
+      `/* @sanity/ui/ui-theme.css */\n`,
+      _compileTheme(),
       `\n\n/* @sanity/ui/ui-system.css */\n`,
       _compileSystem(),
       `\n`,

package/src/core/StyleTags.tsx

@@ -1,20 +1,12 @@
-import {_compilePalette, _compileSystem, _compileTheme} from '@sanity/ui/css'
-import {buildTheme_v3, RootTheme, Theme_v3} from '@sanity/ui/theme'
-import {ReactNode} from 'react'
+import {_compileSystem, _compileTheme} from '@sanity/ui/css'
+import type {ReactNode} from 'react'
 
 /** @beta */
-export function StyleTags(props: {theme?: Theme_v3}): ReactNode {
-  const {theme: themeProp} = props
-
-  const theme = themeProp ?? buildTheme_v3()
-
+export function StyleTags(): ReactNode {
   return (
     <>
-      <style href="sanity-palette" precedence="palette">
-        {_compilePalette()}
-      </style>
       <style href="sanity-theme" precedence="theme">
-        {_compileTheme({v3: theme} as RootTheme)}
+        {_compileTheme()}
       </style>
       <style href="sanity-system" precedence="system">
         {_compileSystem()}

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

@@ -1,4 +1,4 @@
-import {CSSObject} from '@sanity/ui/theme'
+import type {CSSObject} from '@sanity/ui/theme'
 
 /**
  * @internal

package/src/core/_compat/theme/theme.test.tsx

@@ -1,16 +1,15 @@
-/** @jest-environment jsdom */
-
 import {buildTheme} from '@sanity/ui/theme'
+import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
 import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
+import type {ThemeContextValue} from './types'
 import {useRootTheme} from './useRootTheme'
 
 describe('theme', () => {
   describe('useRootTheme', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootTheme = useRootTheme()
@@ -43,7 +42,7 @@ describe('theme', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

package/src/core/_compat/theme/themeColorProvider.tsx

@@ -1,5 +1,5 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {ReactElement, ReactNode} from 'react'
+import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {ReactElement, ReactNode} from 'react'
 
 import {ThemeProvider} from './themeProvider'
 import {useRootTheme} from './useRootTheme'

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

@@ -1,7 +1,7 @@
-import {Context} from 'react'
+import type {Context} from 'react'
 
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {ThemeContextValue} from './types'
+import type {ThemeContextValue} from './types'
 
 /**
  * @internal

package/src/core/_compat/theme/themeProvider.tsx

@@ -5,13 +5,13 @@ import {
   type ThemeColorCardToneKey,
   type ThemeColorSchemeKey,
 } from '@sanity/ui/theme'
-import {ReactElement, ReactNode, useContext, useMemo} from 'react'
+import {type ReactElement, type 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'
+import type {ThemeContextValue} from './types'
 
 /** @public */
 export interface ThemeProviderProps {

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

@@ -1,4 +1,4 @@
-import {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {RootTheme, ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 
 /** @public */
 export interface ThemeContextValue {

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

@@ -1,7 +1,7 @@
 import {useContext} from 'react'
 
 import {ThemeContext} from './themeContext'
-import {ThemeContextValue} from './types'
+import type {ThemeContextValue} from './types'
 
 /** @public */
 export function useRootTheme(): ThemeContextValue {

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

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

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

@@ -1,7 +1,7 @@
 import {EarthAmericasIcon, SearchIcon} from '@sanity/icons'
 import {
   Autocomplete,
-  BaseAutocompleteOption,
+  type BaseAutocompleteOption,
   Box,
   Card,
   Code,
@@ -81,7 +81,7 @@ export default function AsyncStory() {
 
   return (
     <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
-      <Stack space={[3, 3, 4]}>
+      <Stack gap={[3, 3, 4]}>
         <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="medium">
           Country
         </Text>

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

@@ -12,8 +12,8 @@ import {useCallback, useState} from 'react'
 
 import {Popover} from '../../../primitives'
 import countries from '../__mocks__/countries'
-import {AutocompleteProps} from '../autocomplete'
-import {ExampleOption} from './types'
+import type {AutocompleteProps} from '../autocomplete'
+import type {ExampleOption} from './types'
 
 export default function ConstrainedHeightStory() {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)

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

@@ -1,5 +1,5 @@
-import {Autocomplete, Box, Button, Card, Code, Container, Radius, Stack, Text} from '@sanity/ui'
-import {FontTextSize} from '@sanity/ui/theme'
+import {Autocomplete, Box, Button, Card, Code, Container, Stack, Text} from '@sanity/ui'
+import type {Radius} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 
@@ -9,16 +9,16 @@ import {
   WORKSHOP_TEXT_SIZE_OPTIONS,
 } from '../../../../../workshop/constants'
 import countries from '../__mocks__/countries'
-import {ExampleOption} from './types'
+import type {ExampleOption} from './types'
 
 export default function CustomStory() {
   const data: ExampleOption[] = countries.map((d) => ({value: d.code, title: d.name}))
   const border = useBoolean('Border', true, 'Props')
   const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = Number(useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props'))
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, undefined, 'Props') ?? 2
   const openButton = useBoolean('Open button', true, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const radius = Number(useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props'))
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, undefined, 'Props')
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, undefined, 'Props') ?? 2
   const readOnly = useBoolean('Read only', false, 'Props')
   const [value, setValue] = useState('')
 
@@ -31,7 +31,7 @@ export default function CustomStory() {
         key={option.value}
         onClick={(event) => event.preventDefault()}
         padding={padding}
-        radius={(radius - 1) as Radius}
+        radius={Math.max(radius - 1, 0) as Radius}
       >
         <Text size={fontSize}>{option.title}</Text>
       </Card>
@@ -52,8 +52,8 @@ export default function CustomStory() {
   return (
     <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
       <Container width={0}>
-        <Stack space={5}>
-          <Stack space={3}>
+        <Stack gap={5}>
+          <Stack gap={3}>
             <Text as="label" htmlFor="custom" id="custom-label" size={1} weight="medium">
               Country
             </Text>
@@ -62,14 +62,14 @@ export default function CustomStory() {
               border={border}
               disabled={disabled}
               filterOption={filterOption}
-              fontSize={fontSize as FontTextSize}
+              fontSize={fontSize}
               id="custom"
               onChange={setValue}
               openButton={openButton}
               options={options}
               padding={padding}
               placeholder="Search"
-              radius={radius as Radius}
+              radius={radius}
               readOnly={readOnly}
               renderOption={renderOption}
               renderValue={renderValue}

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

@@ -1,7 +1,6 @@
 import {Autocomplete, Box, Card, Container, Stack, Text} from '@sanity/ui'
-import {FontTextSize, Radius} from '@sanity/ui/theme'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import {PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
+import {type PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
 import {fireEvent} from '@testing-library/dom'
 import {useCallback, useMemo, useState} from 'react'
 
@@ -37,10 +36,10 @@ export default function ExampleStory() {
   const border = useBoolean('Border', true, 'Props')
   const customValidity = useText('Custom validity', '', 'Props') || undefined
   const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = Number(useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props'))
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
   const openButton = useBoolean('Open button', false, 'Props')
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const radius = Number(useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props'))
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
   const readOnly = useBoolean('Read only', false, 'Props')
   const [value, setValue] = useState('')
 
@@ -50,7 +49,7 @@ export default function ExampleStory() {
     <Card height="fill" tone={layoutTone}>
       <Container width={1}>
         <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
-          <Stack space={3}>
+          <Stack gap={3}>
             <Text as="label" htmlFor="default" size={1} weight="medium">
               Country code
             </Text>
@@ -59,14 +58,14 @@ export default function ExampleStory() {
                 border={border}
                 customValidity={customValidity}
                 disabled={disabled}
-                fontSize={fontSize as FontTextSize}
+                fontSize={fontSize}
                 onChange={handleChange}
                 id="default"
                 openButton={openButton}
                 options={options}
                 padding={padding}
                 placeholder="Search"
-                radius={radius as Radius}
+                radius={radius}
                 readOnly={readOnly}
                 ref={ref}
                 value={value}

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

@@ -10,7 +10,7 @@ export default function FocusAndBlurStory() {
 
   return (
     <Box padding={[4, 5, 6]}>
-      <Stack space={3}>
+      <Stack gap={3}>
         <Autocomplete
           id="focus-and-blur"
           onBlur={handleBlur}
@@ -21,7 +21,7 @@ export default function FocusAndBlurStory() {
           placeholder="Search"
           value={value}
         />
-        <Stack space={3}>
+        <Stack gap={3}>
           <Box muted overflow="auto" padding={3} radius={2}>
             <Code id="focus-and-blur-log" language="json" size={1}>
               {JSON.stringify(log)}

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

@@ -1,7 +1,7 @@
 import {CloseIcon, SearchIcon} from '@sanity/icons'
 import {
   Autocomplete,
-  BaseAutocompleteOption,
+  type BaseAutocompleteOption,
   Box,
   Button,
   Card,

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

@@ -1,6 +1,6 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
 import {
   type ChangeEvent,
   cloneElement,
@@ -23,7 +23,7 @@ import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
 import {useArrayProp} from '../../hooks'
 import {
   Box,
-  BoxProps,
+  type BoxProps,
   Button,
   Card,
   Popover,
@@ -31,7 +31,7 @@ import {
   Stack,
   Text,
   TextInput,
-  TextInputOwnProps,
+  type TextInputOwnProps,
 } from '../../primitives'
 import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
 import type {ComponentType, Props, Radius} from '../../types'
@@ -587,10 +587,10 @@ export function Autocomplete<
           as="ul"
           aria-multiselectable={false}
           data-ui="AutoComplete__resultsList"
+          gap={1}
           id={listBoxId}
           ref={listBoxElementRef}
           role="listbox"
-          space={1}
         >
           {filteredOptions.map((option) => {
             const active =

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

@@ -1,4 +1,4 @@
-import {KeyboardEvent, ReactElement, ReactNode, useCallback} from 'react'
+import {type KeyboardEvent, type ReactElement, type ReactNode, useCallback} from 'react'
 
 import {_isEnterToClickElement} from '../../helpers'
 

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

@@ -1,4 +1,4 @@
-import {AutocompleteMsg, AutocompleteState} from './types'
+import type {AutocompleteMsg, AutocompleteState} from './types'
 
 /**
  * @internal

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

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

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

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

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

@@ -19,13 +19,13 @@ export default function Example() {
   return (
     <Flex align="center" height="fill" justify="center">
       <Breadcrumbs
+        gap={2}
         maxLength={maxLength}
         separator={
           <Text muted size={1}>
             /
           </Text>
         }
-        space={2}
       >
         <Text size={1}>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}

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

@@ -1,10 +1,10 @@
-import {breadcrumbs, composeClassNames, GapStyleProps} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
+import {_composeClassNames, breadcrumbs, type GapStyleProps} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
 import {
   Children,
   Fragment,
   isValidElement,
-  ReactNode,
+  type ReactNode,
   useCallback,
   useMemo,
   useRef,
@@ -12,8 +12,8 @@ import {
 } from 'react'
 
 import {useClickOutsideEvent} from '../../hooks'
-import {Box, Button, ButtonProps, Flex, Popover, Stack, Text} from '../../primitives'
-import {ComponentType, Props} from '../../types'
+import {Box, Button, type ButtonProps, Flex, Popover, Stack, Text} from '../../primitives'
+import type {ComponentType, Props} from '../../types'
 
 /** @beta */
 export const DEFAULT_BREADCRUMBS_ELEMENT = 'nav'
@@ -79,7 +79,7 @@ export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BR
         <Popover
           constrainSize
           content={
-            <Stack as="ol" overflow="auto" space={gapY}>
+            <Stack as="ol" gap={gapY} overflow="auto">
               {rawItems.slice(beforeLength - 1, len - afterLength)}
             </Stack>
           }
@@ -112,7 +112,7 @@ export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BR
       as={as}
       data-ui="Breadcrumbs"
       {...rest}
-      className={composeClassNames(className, breadcrumbs())}
+      className={_composeClassNames(className, breadcrumbs())}
       gapX={gapX}
       gapY={gapY}
     >

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

@@ -28,7 +28,7 @@ export default function LayeringFocusStory() {
               onActivate={({activeElement}) => activeElement?.focus()}
               onClose={() => setFirstDialogOpen(false)}
             >
-              <Stack space={2} padding={3}>
+              <Stack gap={2} padding={3}>
                 <Button
                   mode="ghost"
                   text="Open dialog 2"
@@ -56,7 +56,7 @@ export default function LayeringFocusStory() {
                   onActivate={({activeElement}) => activeElement?.focus()}
                   onClose={() => setSecondDialogOpen(false)}
                 >
-                  <Stack space={2} padding={3}>
+                  <Stack gap={2} padding={3}>
                     <Button
                       mode="ghost"
                       text="Open dialog 3"
@@ -84,7 +84,7 @@ export default function LayeringFocusStory() {
                       onActivate={({activeElement}) => activeElement?.focus()}
                       onClose={() => setThirdDialogOpen(false)}
                     >
-                      <Stack space={2} padding={3}>
+                      <Stack gap={2} padding={3}>
                         <MenuButton
                           id="menu"
                           button={
@@ -116,7 +116,7 @@ export default function LayeringFocusStory() {
                           onActivate={({activeElement}) => activeElement?.focus()}
                           onClose={() => setFourthDialogOpen(false)}
                         >
-                          <Stack space={2} padding={3}>
+                          <Stack gap={2} padding={3}>
                             <Text>👋</Text>
                           </Stack>
                         </Dialog>

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

@@ -11,7 +11,7 @@ export default function PositionStory() {
   return (
     <Box padding={4}>
       <Box style={{padding: 'calc(100vh - 100px) 0'}}>
-        <Stack space={3}>
+        <Stack gap={3}>
           <Text align="center">
             <ArrowUpIcon />
           </Text>

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

@@ -40,7 +40,7 @@ export default function PropsStory() {
             width={width}
           >
             <Box padding={4}>
-              <Stack space={4}>
+              <Stack gap={4}>
                 <Text>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et orci vitae diam
                   aliquet imperdiet.