@sanity/ui 3.0.0-static.15 → 3.0.0-static.17

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.15",
+  "version": "3.0.0-static.17",
   "keywords": [
     "react",
     "ui",
@@ -21,39 +21,40 @@
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
   "sideEffects": false,
-  "type": "commonjs",
+  "type": "module",
   "exports": {
     ".": {
       "source": "./exports/index.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
     "./_visual-editing": {
       "source": "./exports/_visual-editing.ts",
-      "import": "./dist/_visual-editing.mjs",
-      "require": "./dist/_visual-editing.js",
+      "import": "./dist/_visual-editing.js",
+      "require": "./dist/_visual-editing.cjs",
       "default": "./dist/_visual-editing.js"
     },
     "./css": {
       "source": "./exports/css.ts",
-      "import": "./dist/css.mjs",
-      "require": "./dist/css.js",
+      "import": "./dist/css.js",
+      "require": "./dist/css.cjs",
       "default": "./dist/css.js"
     },
     "./package.json": "./package.json",
     "./theme": {
       "source": "./exports/theme.ts",
-      "import": "./dist/theme.mjs",
-      "require": "./dist/theme.js",
+      "import": "./dist/theme.js",
+      "require": "./dist/theme.cjs",
       "default": "./dist/theme.js"
     },
-    "./sanity-palette.css": "./dist/sanity-palette.css",
-    "./sanity-theme.css": "./dist/sanity-theme.css",
-    "./system.css": "./dist/system.css"
+    "./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"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -69,10 +70,9 @@
     }
   },
   "bin": {
-    "ui": "./bin/ui.js"
+    "sanity-ui": "./bin/sanity-ui.cjs"
   },
   "files": [
-    "css.js",
     "dist",
     "exports",
     "src"
@@ -116,7 +116,7 @@
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "pretty-bytes": "^7.0.0",
-    "react-compiler-runtime": "19.1.0-rc.1",
+    "react-compiler-runtime": "19.1.0-rc.2",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
   },
@@ -131,7 +131,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
-    "@sanity/ui-workshop": "^2.1.3",
+    "@sanity/ui-workshop": "^2.1.2",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-docs": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -158,7 +158,7 @@
     "@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",
+    "babel-plugin-react-compiler": "19.1.0-rc.2",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
@@ -173,7 +173,7 @@
     "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-hooks": "0.0.0-experimental-4448b187-20250515",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^0.12.0",
@@ -218,8 +218,9 @@
     "bundle": false
   },
   "scripts": {
-    "build": "run-s clean ui:build pkg:build pkg:check figma:pkg:build",
-    "clean": "rimraf .workshop css.js dist theme.js",
+    "build": "run-s clean css:build pkg:build pkg:check figma:pkg:build",
+    "clean": "rimraf .workshop dist",
+    "css:build": "node -r esbuild-register scripts/build",
     "commit": "cz",
     "cypress:dev": "run-p dev cypress:open",
     "cypress:open": "cypress open",
@@ -236,7 +237,6 @@
     "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/cli/buildCommand.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 
-import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
+import {_compilePalette, _compileSystem, _compileTheme} from '@sanity/ui/css'
 import {buildTheme_v3, RootTheme} from '@sanity/ui/theme'
 import cssnano from 'cssnano'
 import fs from 'fs/promises'
@@ -10,6 +10,20 @@ import postcss from 'postcss'
 import {format, resolveConfig} from 'prettier'
 import prettyBytes from 'pretty-bytes'
 
+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 Promise.all([
+    buildPalette(outDir),
+    buildTheme(outDir),
+    buildSystem(outDir),
+    buildAll(outDir),
+  ])
+}
+
+//
+
 async function minify(css: string) {
   return postcss([cssnano()]).process(css, {from: undefined})
 }
@@ -28,48 +42,69 @@ 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 css = _compilePalette()
   const minified = await minify(css)
   const prettified = await prettify(css)
 
   await fs.mkdir(outDir, {recursive: true})
-  await fs.writeFile(path.resolve(outDir, 'sanity-palette.css'), prettified, 'utf-8')
-  await fs.writeFile(path.resolve(outDir, 'sanity-palette.min.css'), minified.css, 'utf-8')
+  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 sanity-palette.css (${prettySize(prettified)})`)
-  console.log(`- built sanity-palette.min.css (${prettySize(minified.css)})`)
+  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))
+  const css = await prettify(_compileTheme({v3: buildTheme_v3()} as RootTheme))
   const minified = await minify(css)
   const prettified = await prettify(css)
 
   await fs.mkdir(outDir, {recursive: true})
-  await fs.writeFile(path.resolve(outDir, 'sanity-theme.css'), prettified, 'utf-8')
-  await fs.writeFile(path.resolve(outDir, 'sanity-theme.min.css'), minified.css, 'utf-8')
+  await fs.writeFile(path.resolve(outDir, 'ui-theme.css'), prettified, 'utf-8')
+  await fs.writeFile(path.resolve(outDir, 'ui-theme.min.css'), minified.css, 'utf-8')
 
-  console.log(`- built sanity-theme.css (${prettySize(prettified)})`)
-  console.log(`- built sanity-theme.min.css (${prettySize(minified.css)})`)
+  console.log(`- built ui-theme.css (${prettySize(prettified)})`)
+  console.log(`- built ui-theme.min.css (${prettySize(minified.css)})`)
 }
 
+// @sanity/ui/ui-system.css
 async function buildSystem(outDir: string) {
-  const css = await prettify(compileSystem())
+  const css = await prettify(_compileSystem())
   const minified = await minify(css)
   const prettified = await prettify(css)
 
   await fs.mkdir(outDir, {recursive: true})
-  await fs.writeFile(path.resolve(outDir, 'system.css'), prettified, 'utf-8')
-  await fs.writeFile(path.resolve(outDir, 'system.min.css'), minified.css, 'utf-8')
+  await fs.writeFile(path.resolve(outDir, 'ui-system.css'), prettified, 'utf-8')
+  await fs.writeFile(path.resolve(outDir, 'ui-system.min.css'), minified.css, 'utf-8')
 
-  console.log(`- built system.css (${prettySize(prettified)})`)
-  console.log(`- built system.min.css (${prettySize(minified.css)})`)
+  console.log(`- built ui-system.css (${prettySize(prettified)})`)
+  console.log(`- built ui-system.min.css (${prettySize(minified.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')
+// @sanity/ui/ui.css
+async function buildAll(outDir: string) {
+  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),
+      `\n\n/* @sanity/ui/ui-system.css */\n`,
+      _compileSystem(),
+      `\n`,
+    ].join(''),
+  )
+
+  const minified = await minify(css)
+  const prettified = await prettify(css)
+
+  await fs.mkdir(outDir, {recursive: true})
+  await fs.writeFile(path.resolve(outDir, 'ui.css'), prettified, 'utf-8')
+  await fs.writeFile(path.resolve(outDir, 'ui.min.css'), minified.css, 'utf-8')
 
-  await Promise.all([buildPalette(outDir), buildTheme(outDir), buildSystem(outDir)])
+  console.log(`- built ui.css (${prettySize(prettified)})`)
+  console.log(`- built ui.min.css (${prettySize(minified.css)})`)
 }

package/src/cli/index.ts

@@ -1,20 +1,8 @@
-import cac from 'cac'
+import {cac} from 'cac'
 
 import {version} from '../../package.json'
 
-const cli = cac('ui')
-
-// cli
-//   .command('dev')
-//   .option('--cwd [cwd]', 'Output directory')
-//   .action(async (options) => {
-//     const {devCommand} = await import('./devCommand')
-
-//     await devCommand({
-//       ...options,
-//       cwd: options.cwd || process.cwd(),
-//     })
-//   })
+const cli = cac('sanity-ui')
 
 cli
   .command('build')

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

@@ -1,4 +1,4 @@
-import {compilePalette, compileSystem, compileTheme} from '@sanity/ui/css'
+import {_compilePalette, _compileSystem, _compileTheme} from '@sanity/ui/css'
 import {buildTheme_v3, RootTheme, Theme_v3} from '@sanity/ui/theme'
 import {ReactNode} from 'react'
 
@@ -11,13 +11,13 @@ export function StyleTags(props: {theme?: Theme_v3}): ReactNode {
   return (
     <>
       <style href="sanity-palette" precedence="palette">
-        {compilePalette()}
+        {_compilePalette()}
       </style>
       <style href="sanity-theme" precedence="theme">
-        {compileTheme({v3: theme} as RootTheme)}
+        {_compileTheme({v3: theme} as RootTheme)}
       </style>
       <style href="sanity-system" precedence="system">
-        {compileSystem()}
+        {_compileSystem()}
       </style>
     </>
   )

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

@@ -1,5 +1,4 @@
 export * from './helpers'
-export * from './studioTheme'
 export * from './styles'
 export * from './theme'
 export * from './types'

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

@@ -52,13 +52,13 @@ export function ThemeProvider(props: ThemeProviderProps): ReactElement {
 
   return (
     <CardProvider
-      compat_provider={
+      scheme={scheme}
+      tone={tone}
+      unstable_CompatProvider={
         // 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>

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

@@ -103,11 +103,11 @@ export default function AsyncStory() {
           />
         </LayerProvider>
 
-        <Card overflow="auto" padding={3} radius={2} tone="transparent">
+        <Box muted overflow="auto" padding={3} radius={2}>
           <Code language="json" size={1}>
             {JSON.stringify({loading, options, query, value}, null, 2)}
           </Code>
-        </Card>
+        </Box>
       </Stack>
     </Box>
   )

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

@@ -77,9 +77,9 @@ export default function CustomStory() {
             />
           </Stack>
 
-          <Card padding={3} radius={2} tone="transparent">
+          <Box muted padding={3} radius={2}>
             <Code size={1}>{JSON.stringify(value)}</Code>
-          </Card>
+          </Box>
           <Box>
             <Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
           </Box>

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

@@ -1,4 +1,4 @@
-import {Autocomplete, Box, Button, Card, Code, Stack} from '@sanity/ui'
+import {Autocomplete, Box, Button, Code, Stack} from '@sanity/ui'
 import {useCallback, useState} from 'react'
 
 export default function FocusAndBlurStory() {
@@ -22,11 +22,11 @@ export default function FocusAndBlurStory() {
           value={value}
         />
         <Stack space={3}>
-          <Card overflow="auto" padding={3} radius={2} tone="transparent">
+          <Box muted overflow="auto" padding={3} radius={2}>
             <Code id="focus-and-blur-log" language="json" size={1}>
               {JSON.stringify(log)}
             </Code>
-          </Card>
+          </Box>
 
           <Button id="focus-and-blur-clear-btn" mode="ghost" onClick={handleClear} text="Clear" />
         </Stack>

package/src/{ui → core}/components/tab/tabList.tsx

@@ -1,6 +1,8 @@
+import {ResponsiveProp} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
 import {Children, cloneElement, KeyboardEvent, ReactElement, useCallback, useState} from 'react'
 
-import {Inline, InlineOwnProps} from '../../primitives'
+import {Flex, FlexOwnProps} from '../../primitives'
 import {ComponentType, Props} from '../../types'
 import {TabProps} from './tab'
 
@@ -11,8 +13,10 @@ export const DEFAULT_TAB_LIST_ELEMENT = 'div'
 export type TabListChild = ReactElement<Props<TabProps, 'button'>> | null | undefined | false
 
 /** @public */
-export type TabListOwnProps = Omit<InlineOwnProps, 'as' | 'height'> & {
+export type TabListOwnProps = Omit<FlexOwnProps, 'as' | 'height'> & {
   children: TabListChild[]
+  /** @deprecated Use `gap` instead */
+  space?: ResponsiveProp<Space>
 }
 
 /** @public */
@@ -31,6 +35,9 @@ export function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_E
   const {
     as = DEFAULT_TAB_LIST_ELEMENT,
     children: childrenProp,
+    gap = 1,
+    space = 1,
+    wrap = 'nowrap',
     ...rest
   } = props as TabListProps<typeof DEFAULT_TAB_LIST_ELEMENT>
 
@@ -62,9 +69,17 @@ export function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_E
   )
 
   return (
-    <Inline data-ui="TabList" {...rest} as={as} onKeyDown={handleKeyDown} role="tablist">
+    <Flex
+      data-ui="TabList"
+      {...rest}
+      as={as}
+      gap={gap ?? space}
+      onKeyDown={handleKeyDown}
+      role="tablist"
+      wrap={wrap}
+    >
       {tabs}
-    </Inline>
+    </Flex>
   )
 }
 

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

@@ -4,7 +4,6 @@ export * from './helpers'
 export * from './hooks'
 export * from './observers'
 export * from './primitives'
-export * from './RootClassNames'
 export * from './StyleTags'
 export * from './types'
 export * from './utils'

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

@@ -29,6 +29,7 @@ export type BoxElementType =
   | 'figcaption'
   | 'footer'
   | 'form'
+  | 'iframe'
   | 'kbd'
   | 'label'
   | 'legend'
@@ -112,6 +113,7 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
     rowStart,
     rowEnd,
     sizing = 'border',
+    textAlign,
     width,
     wrap,
     ...rest
@@ -179,6 +181,7 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
           rowStart,
           rowEnd,
           sizing,
+          textAlign,
           width,
           wrap,
         }),

package/src/core/primitives/button/__workshop__/custom.tsx

@@ -0,0 +1,27 @@
+import {Button, Flex, Grid, Hotkeys, Stack, Text} from '@sanity/ui'
+import {THEME_COLOR_BUTTON_MODES, THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+
+export default function CustomStory() {
+  return (
+    <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
+      <Stack space={2}>
+        {THEME_COLOR_BUTTON_MODES.map((mode) => (
+          <Grid columns={7} gap={1} key={mode}>
+            {THEME_COLOR_STATE_TONES.map((tone) => (
+              <Button key={tone} mode={mode} padding={3} tone={tone}>
+                <Stack space={2}>
+                  <Text>Text</Text>
+                  <Text muted>Muted</Text>
+                  <Text>
+                    <code>Code</code>
+                  </Text>
+                  <Hotkeys keys={['Cmd', 'C']} />
+                </Stack>
+              </Button>
+            ))}
+          </Grid>
+        ))}
+      </Stack>
+    </Flex>
+  )
+}

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

@@ -108,8 +108,10 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     <Element
       data-ui="Button"
       {...rest}
-      className={composeClassNames(className, button({display, flex, mode, radius, tone, width}))}
+      className={composeClassNames(className, button({display, flex, radius, width}))}
       data-disabled={loading || disabled ? '' : undefined}
+      data-mode={mode}
+      data-tone={tone}
       data-selected={selected ? '' : undefined}
       disabled={Boolean(loading || disabled)}
       // @ts-expect-error - TODO: fix this

package/src/{ui → core}/primitives/card/__workshop__/asButton.tsx

@@ -30,9 +30,6 @@ export default function AsButtonStory() {
                     <Text muted size={1}>
                       Muted
                     </Text>
-                    <Text accent size={1}>
-                      Accent
-                    </Text>
                   </Stack>
                 </Card>
               ))}
@@ -61,9 +58,6 @@ export default function AsButtonStory() {
                     <Text size={1} muted>
                       Muted
                     </Text>
-                    <Text accent size={1}>
-                      Accent
-                    </Text>
                   </Stack>
                 </Card>
               ))}
@@ -92,9 +86,6 @@ export default function AsButtonStory() {
                     <Text size={1} muted>
                       Muted
                     </Text>
-                    <Text accent size={1}>
-                      Accent
-                    </Text>
                   </Stack>
                 </Card>
               ))}

package/src/{ui → core}/primitives/card/__workshop__/interactive.tsx

@@ -21,7 +21,6 @@ export default function InteractiveCardStory() {
               Text <code>Code</code>
             </Text>
             <Text muted>Muted</Text>
-            <Text accent>Accent</Text>
           </Stack>
         </Card>
       </div>

package/src/{ui → core}/primitives/card/__workshop__/props.tsx

@@ -45,9 +45,6 @@ export default function PropsStory() {
             Text with {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <a href="#">link</a>.
           </Text>
-          <Text accent size={1}>
-            Text with accent color.
-          </Text>
         </Stack>
       </Card>
     </Flex>