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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.16",
+  "version": "3.0.0-static.18",
   "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"
@@ -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

@@ -2,7 +2,7 @@ import {cac} from 'cac'
 
 import {version} from '../../package.json'
 
-const cli = cac('ui')
+const cli = cac('sanity-ui')
 
 cli
   .command('build')

package/src/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/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/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/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/core/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -1,13 +1,9 @@
 /** @jest-environment node */
 
-import {buildTheme} from '@sanity/ui/theme'
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
 
-import {ThemeProvider} from '../../_compat'
 import {useMediaIndex} from './useMediaIndex'
 
-const theme = buildTheme()
-
 function Log() {
   const mediaIndex = useMediaIndex()
 
@@ -16,21 +12,9 @@ function Log() {
 
 describe('useMediaIndex', () => {
   it(`SSR to static markup returns 0`, () => {
-    expect(
-      renderToStaticMarkup(
-        <ThemeProvider theme={theme}>
-          <Log />
-        </ThemeProvider>,
-      ),
-    ).toBe('mediaIndex: 0')
+    expect(renderToStaticMarkup(<Log />)).toBe('mediaIndex: 0')
   })
   it(`SSR to markup for hydration doesn't throw`, () => {
-    expect(
-      renderToString(
-        <ThemeProvider theme={theme}>
-          <Log />
-        </ThemeProvider>,
-      ),
-    ).toMatchInlineSnapshot(`"mediaIndex: <!-- -->0"`)
+    expect(renderToString(<Log />)).toMatchInlineSnapshot(`"mediaIndex: <!-- -->0"`)
   })
 })

package/src/core/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,14 +1,14 @@
+import {Breakpoint, BREAKPOINTS} from '@sanity/ui/css'
 import {useMemo, useSyncExternalStore} from 'react'
 
-// TODO: get from theme?
-const media = [360, 600, 900, 1200, 1800, 2400]
+const media = Object.values(BREAKPOINTS)
 
 /**
  * @internal
  */
 export interface _MediaStore {
   subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => number
+  getSnapshot: () => Breakpoint
 }
 
 type MediaQueryMinWidth = `(min-width: ${number}px)`
@@ -18,14 +18,14 @@ type MediaQuery = `screen and ${MediaQueryMinWidth | MediaQueryMaxWidth | MediaQ
 
 function _getMediaQuery(media: number[], index: number): MediaQuery {
   if (index === 0) {
-    return `screen and (max-width: ${media[index] - 1}px)`
+    return `screen and (max-width: ${media[index + 1] - 1}px)`
   }
 
   if (index === media.length) {
-    return `screen and (min-width: ${media[index - 1]}px)`
+    return `screen and (min-width: ${media[index]}px)`
   }
 
-  return `screen and (min-width: ${media[index - 1]}px) and (max-width: ${media[index] - 1}px)`
+  return `screen and (min-width: ${media[index]}px) and (max-width: ${media[index + 1] - 1}px)`
 }
 
 function _createMediaStore(): _MediaStore {
@@ -51,7 +51,7 @@ function _createMediaStore(): _MediaStore {
 
   const getSnapshot = () => {
     for (const {index, mq} of getSizes()) {
-      if (mq.matches) return index
+      if (mq.matches) return index as Breakpoint
     }
 
     return 0
@@ -87,7 +87,7 @@ function _createMediaStore(): _MediaStore {
  *
  * @link https://beta.reactjs.org/apis/react/useSyncExternalStore#adding-support-for-server-rendering
  */
-function getServerSnapshot() {
+function getServerSnapshot(): Breakpoint {
   return 0
 }
 
@@ -95,7 +95,7 @@ function getServerSnapshot() {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function useMediaIndex(): number {
+export function useMediaIndex(): Breakpoint {
   const store = useMemo(() => _createMediaStore(), [])
 
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)

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

@@ -1,49 +1,26 @@
-/* eslint-disable jsx-a11y/anchor-is-valid */
-
-import {Button, Flex, Grid, Stack, Text} from '@sanity/ui'
-
-import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../../../workshop/constants'
+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() {
-  const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
-
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Stack space={2}>
-        <Grid columns={7} gap={1}>
-          {tones.map(([title, tone]) => (
-            <Button key={tone} mode="ghost" padding={3} tone={tone}>
-              <Stack space={2}>
-                <Text>{title}</Text>
-                <Text muted>Muted</Text>
-                <Text muted>
-                  <a href="#">Link</a>
-                </Text>
-                <Text>
-                  <code>Code</code>
-                </Text>
-                <Text accent>Accent</Text>
-              </Stack>
-            </Button>
-          ))}
-        </Grid>
-        <Grid columns={7} gap={1}>
-          {tones.map(([title, tone]) => (
-            <Button key={tone} mode="default" padding={3} tone={tone}>
-              <Stack space={2}>
-                <Text>{title}</Text>
-                <Text muted>Muted</Text>
-                <Text muted>
-                  <a href="#">Link</a>
-                </Text>
-                <Text>
-                  <code>Code</code>
-                </Text>
-                <Text accent>Accent</Text>
-              </Stack>
-            </Button>
-          ))}
-        </Grid>
+        {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/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/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/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/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>

package/src/core/primitives/card/__workshop__/selected.tsx

@@ -1,29 +1,6 @@
 import {EditIcon, PublishIcon} from '@sanity/icons'
-import {Box, Card, Container, Flex, Inline, Stack, Text, useRootTheme} from '@sanity/ui'
-import {getTheme_v2, Theme, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {Box, Card, Container, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import {css, styled} from 'styled-components'
-
-const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((props: {
-  $tone: ThemeColorStateToneKey
-  theme: Theme
-}) => {
-  const {$tone} = props
-  const {color} = getTheme_v2(props.theme)
-  const tone = color.button.default[$tone]
-
-  return css`
-    &:not([data-selected]) {
-      --card-fg-color: ${tone.enabled.bg};
-      --card-muted-fg-color: ${tone.enabled.bg};
-    }
-
-    [data-ui='Card']:disabled & {
-      --card-fg-color: inherit;
-      --card-muted-fg-color: inherit;
-    }
-  `
-})
 
 export default function SelectedStory() {
   const disabled = useBoolean('Disabled', false) || false
@@ -62,31 +39,23 @@ export default function SelectedStory() {
 }
 
 function Preview({selected}: {selected: boolean}) {
-  const rootTheme = useRootTheme()
-
   return (
     <Flex>
       <Box flex={1}>
         <Text size={1}>Title</Text>
       </Box>
       <Inline space={3}>
-        <TextWithTone
-          data-selected={selected ? '' : undefined}
-          muted
-          size={1}
-          weight="medium"
-          $tone={rootTheme.tone === 'default' ? 'caution' : 'default'}
-        >
+        <Text data-selected={selected ? '' : undefined} muted size={1} weight="medium">
           <EditIcon />
-        </TextWithTone>
-        <TextWithTone
+        </Text>
+        <Text
           data-selected={selected ? '' : undefined}
           muted
           size={1}
-          $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
+          // $tone={rootTheme.tone === 'default' ? 'positive' : 'default'}
         >
           <PublishIcon />
-        </TextWithTone>
+        </Text>
       </Inline>
     </Flex>
   )

package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx

@@ -43,7 +43,7 @@ export default function OpticalAlignment() {
 
         <Flex>
           <Card padding={2} tone="neutral">
-            <Heading accent>
+            <Heading>
               <AddCircleIcon />
             </Heading>
           </Card>

package/src/core/primitives/heading/__workshop__/plain.tsx

@@ -8,7 +8,6 @@ import {
 } from '../../../../../workshop/constants'
 
 export default function PlainStory() {
-  const accent = useBoolean('Accent', false, 'Props')
   const muted = useBoolean('Muted', false, 'Props')
   const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2, 'Props')
   const textChild = useText('Text', 'Hello, world', 'Props')
@@ -18,13 +17,7 @@ export default function PlainStory() {
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Heading
-        accent={accent}
-        muted={muted}
-        size={size}
-        textOverflow={textOverflow}
-        weight={weight}
-      >
+      <Heading muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
         {textChild}
       </Heading>
     </Flex>

package/src/core/primitives/label/__workshop__/plain.tsx

@@ -9,7 +9,6 @@ import {
 } from '../../../../../workshop/constants'
 
 export default function PlainStory() {
-  const accent = useBoolean('Accent', false, 'Props')
   const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
   const muted = useBoolean('Muted', false, 'Props')
   const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS, undefined, 'Props')
@@ -21,14 +20,7 @@ export default function PlainStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Label
-          accent={accent}
-          align={align}
-          muted={muted}
-          size={size}
-          textOverflow={textOverflow}
-          weight={weight}
-        >
+        <Label align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
           {textChild}
         </Label>
       </Container>