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

package/exports/_visual-editing.ts

@@ -2,7 +2,6 @@
  * 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'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.19",
+  "version": "3.0.0-static.20",
   "keywords": [
     "react",
     "ui",
@@ -197,10 +197,10 @@
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {
-    "react": "^18 || >=19.0.0-0",
-    "react-dom": "^18 || >=19.0.0-0",
-    "react-is": "^18 || >=19.0.0-0",
-    "styled-components": "^5.2 || ^6"
+    "react": "^19",
+    "react-dom": "^19",
+    "react-is": "^19",
+    "styled-components": "^6"
   },
   "engines": {
     "node": ">=14.0.0"
@@ -230,7 +230,7 @@
     "storybook:dev": "storybook dev -p 6006",
     "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",
+    "typecheck": "tsc",
     "watch": "pkg watch --strict",
     "workshop:build": "workshop build",
     "workshop:clean": "rimraf .workshop",

package/src/cli/buildCommand.ts

@@ -13,64 +13,50 @@ 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 buildTheme({outDir})
-  await buildSystem({outDir})
-  await buildAll({outDir})
-}
-
-//
-
-async function minify(css: string) {
-  return postcss([cssnano()]).process(css, {from: undefined})
-}
-
-async function prettify(css: string) {
-  const options = await resolveConfig(__dirname)
-
-  if (!options) {
-    throw new Error('Prettier config not found')
-  }
-
-  return format(css, {...options, filepath: 'index.css', printWidth: 9999})
-}
-
-function prettySize(str: string) {
-  return `${prettyBytes(str.length)} / ${prettyBytes(gzipSizeSync(str))}`
+  await buildTheme({cwd, outDir})
+  await buildSystem({cwd, outDir})
+  await buildAll({cwd, outDir})
 }
 
 // @sanity/ui/ui-theme.css
-async function buildTheme(options: {outDir: string}) {
-  const {outDir} = options
+async function buildTheme(options: {cwd: string; outDir: string}) {
+  const {cwd, outDir} = options
   const css = await prettify(_compileTheme())
   const minified = await minify(css)
   const prettified = await prettify(css)
 
+  const cssFile = path.resolve(outDir, 'ui-theme.css')
+  const minCssFile = path.resolve(outDir, 'ui-theme.min.css')
+
   await fs.mkdir(outDir, {recursive: true})
-  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')
+  await fs.writeFile(cssFile, prettified, 'utf-8')
+  await fs.writeFile(minCssFile, minified.css, 'utf-8')
 
-  console.log(`- built ui-theme.css (${prettySize(prettified)})`)
-  console.log(`- built ui-theme.min.css (${prettySize(minified.css)})`)
+  console.log(`- built ${path.relative(cwd, cssFile)} (${prettySize(prettified)})`)
+  console.log(`- built ${path.relative(cwd, minCssFile)} (${prettySize(minified.css)})`)
 }
 
 // @sanity/ui/ui-system.css
-async function buildSystem(options: {outDir: string}) {
-  const {outDir} = options
+async function buildSystem(options: {cwd: string; outDir: string}) {
+  const {cwd, outDir} = options
   const css = await prettify(_compileSystem())
   const minified = await minify(css)
   const prettified = await prettify(css)
 
+  const cssFile = path.resolve(outDir, 'ui-system.css')
+  const minCssFile = path.resolve(outDir, 'ui-system.min.css')
+
   await fs.mkdir(outDir, {recursive: true})
-  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')
+  await fs.writeFile(cssFile, prettified, 'utf-8')
+  await fs.writeFile(minCssFile, minified.css, 'utf-8')
 
-  console.log(`- built ui-system.css (${prettySize(prettified)})`)
-  console.log(`- built ui-system.min.css (${prettySize(minified.css)})`)
+  console.log(`- built ${path.relative(cwd, cssFile)} (${prettySize(prettified)})`)
+  console.log(`- built ${path.relative(cwd, minCssFile)} (${prettySize(minified.css)})`)
 }
 
 // @sanity/ui/ui.css
-async function buildAll(options: {outDir: string}) {
-  const {outDir} = options
+async function buildAll(options: {cwd: string; outDir: string}) {
+  const {cwd, outDir} = options
   const css = await prettify(
     [
       `/* @sanity/ui/ui-theme.css */\n`,
@@ -84,10 +70,31 @@ async function buildAll(options: {outDir: string}) {
   const minified = await minify(css)
   const prettified = await prettify(css)
 
+  const cssFile = path.resolve(outDir, 'ui.css')
+  const minCssFile = path.resolve(outDir, 'ui.min.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 fs.writeFile(cssFile, prettified, 'utf-8')
+  await fs.writeFile(minCssFile, minified.css, 'utf-8')
+
+  console.log(`- built ${path.relative(cwd, cssFile)} (${prettySize(prettified)})`)
+  console.log(`- built ${path.relative(cwd, minCssFile)} (${prettySize(minified.css)})`)
+}
+
+async function minify(css: string) {
+  return postcss([cssnano()]).process(css, {from: undefined})
+}
+
+async function prettify(css: string) {
+  const options = await resolveConfig(__dirname)
+
+  if (!options) {
+    throw new Error('Prettier config not found')
+  }
 
-  console.log(`- built ui.css (${prettySize(prettified)})`)
-  console.log(`- built ui.min.css (${prettySize(minified.css)})`)
+  return format(css, {...options, filepath: 'index.css', printWidth: 9999})
+}
+
+function prettySize(str: string) {
+  return `${prettyBytes(str.length)} / ${prettyBytes(gzipSizeSync(str))}`
 }

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

@@ -12,7 +12,7 @@ import {
 } from '@sanity/ui'
 import {useCallback, useEffect, useRef, useState} from 'react'
 
-import {countriesStore} from '../__mocks__/apiStore'
+import {countriesStore} from './mock/apiStore'
 
 export default function AsyncStory() {
   const [options, setOptions] = useState<BaseAutocompleteOption[]>([])

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

@@ -11,8 +11,8 @@ import {
 import {useCallback, useState} from 'react'
 
 import {Popover} from '../../../primitives'
-import countries from '../__mocks__/countries'
 import type {AutocompleteProps} from '../autocomplete'
+import countries from './mock/countries'
 import type {ExampleOption} from './types'
 
 export default function ConstrainedHeightStory() {

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

@@ -6,20 +6,21 @@ import {useCallback, useState} from 'react'
 import {
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
-import countries from '../__mocks__/countries'
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '$workshop'
+
+import countries from './mock/countries'
 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 = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, undefined, 'Props') ?? 2
-  const openButton = useBoolean('Open button', true, '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 border = useBoolean('Border', true)
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  const openButton = useBoolean('Open button', true)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const readOnly = useBoolean('Read only', false)
   const [value, setValue] = useState('')
 
   const renderOption = useCallback(
@@ -31,7 +32,7 @@ export default function CustomStory() {
         key={option.value}
         onClick={(event) => event.preventDefault()}
         padding={padding}
-        radius={Math.max(radius - 1, 0) as Radius}
+        radius={Math.max((radius ?? 0) - 1, 0) as Radius}
       >
         <Text size={fontSize}>{option.title}</Text>
       </Card>

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

@@ -8,9 +8,10 @@ import {
   WORKSHOP_CARD_TONE_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
-import countries from '../__mocks__/countries'
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '$workshop'
+
+import countries from './mock/countries'
 
 const typingPerfTest: PerfTestProps<HTMLInputElement> = {
   name: 'typing',
@@ -31,16 +32,16 @@ const typingPerfTest: PerfTestProps<HTMLInputElement> = {
 export default function ExampleStory() {
   const {ref, Wrapper} = usePerfTest(typingPerfTest)
 
-  const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Layout')
+  const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS)
   const options = useMemo(() => countries.map((country) => ({value: country.code})), [])
-  const border = useBoolean('Border', true, 'Props')
-  const customValidity = useText('Custom validity', '', 'Props') || undefined
-  const disabled = useBoolean('Disabled', false, '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 = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
+  const border = useBoolean('Border', true)
+  const customValidity = useText('Custom validity')
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
+  const openButton = useBoolean('Open button', false)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  const readOnly = useBoolean('Read only', false)
   const [value, setValue] = useState('')
 
   const handleChange = useCallback((value: string) => setValue(value), [])

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

@@ -19,10 +19,10 @@ import {
 import {useBoolean} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
-import {countriesStore} from '../__mocks__/apiStore'
+import {countriesStore} from './mock/apiStore'
 
 export default function Fullscreen() {
-  const error = useBoolean('Error', false, 'Props')
+  const error = useBoolean('Error', false)
 
   const {push: pushToast} = useToast()
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
@@ -174,60 +174,59 @@ export default function Fullscreen() {
   }, [value])
 
   return (
-    <Card style={{display: 'flex', flexDirection: 'column', minHeight: '100%'}} tone="transparent">
+    <Card display="flex" direction="column" minHeight="full" tone="transparent">
       <PortalProvider element={portalElement}>
-        <Flex direction="column" flex={1} height="fill">
-          <Card hidden={open} padding={2}>
-            <Flex align="center">
-              <Box flex={1} />
-              <Button
-                aria-label="Open search"
-                icon={SearchIcon}
-                mode="ghost"
-                onClick={handleOpen}
-                ref={openSearchButtonElementRef}
-              />
-            </Flex>
+        <Card hidden={open} padding={2}>
+          <Flex align="center">
+            <Box flex={1} />
+            <Button
+              aria-label="Open search"
+              icon={SearchIcon}
+              mode="bleed"
+              onClick={handleOpen}
+              ref={openSearchButtonElementRef}
+            />
+          </Flex>
+        </Card>
+        <Layer hidden={!open} style={{position: 'sticky', top: 0}}>
+          <Card padding={2} shadow={1}>
+            <Autocomplete
+              filterOption={filterOption}
+              fontSize={1}
+              icon={SearchIcon}
+              id="fullsceen-example"
+              listBox={{padding: 2}}
+              loading={loading}
+              onQueryChange={handleQueryChange}
+              onSelect={handleSelect}
+              options={options}
+              placeholder="Search"
+              radius={2}
+              ref={inputRef}
+              relatedElements={relatedElements}
+              renderOption={renderOption}
+              renderPopover={renderPopover}
+              renderValue={renderValue}
+              suffix={
+                <Box padding={1}>
+                  <Button
+                    aria-label="Close search"
+                    icon={CloseIcon}
+                    onClick={handleClose}
+                    padding={2}
+                    mode="bleed"
+                    ref={setCloseSearchButtonElement}
+                  />
+                </Box>
+              }
+              value={value}
+            />
           </Card>
-          <Layer hidden={!open} style={{position: 'sticky', top: 0}}>
-            <Card padding={2} shadow={1}>
-              <Autocomplete
-                filterOption={filterOption}
-                icon={SearchIcon}
-                id="fullsceen-example"
-                listBox={{padding: 2}}
-                loading={loading}
-                onQueryChange={handleQueryChange}
-                onSelect={handleSelect}
-                options={options}
-                placeholder="Search"
-                radius={2}
-                ref={inputRef}
-                relatedElements={relatedElements}
-                renderOption={renderOption}
-                renderPopover={renderPopover}
-                renderValue={renderValue}
-                suffix={
-                  <Box padding={1}>
-                    <Button
-                      aria-label="Close search"
-                      icon={CloseIcon}
-                      onClick={handleClose}
-                      padding={2}
-                      mode="bleed"
-                      ref={setCloseSearchButtonElement}
-                    />
-                  </Box>
-                }
-                value={value}
-              />
-            </Card>
-          </Layer>
-          <Card flex={1} hidden={!open} ref={setPortalElement} style={{position: 'relative'}} />
-          <Box flex={1} hidden={open} padding={4}>
-            <Heading>Welcome to this app</Heading>
-          </Box>
-        </Flex>
+        </Layer>
+        <Card flex={1} hidden={!open} position="relative" ref={setPortalElement} />
+        <Box flex={1} hidden={open} padding={4}>
+          <Heading>Welcome to this app</Heading>
+        </Box>
       </PortalProvider>
     </Card>
   )

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

@@ -13,8 +13,7 @@ const BREADCRUMBS_MAX_LENGTH_OPTIONS = {
 }
 
 export default function Example() {
-  const maxLength =
-    useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS, 0, 'Props') || undefined
+  const maxLength = useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center">

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

@@ -2,8 +2,8 @@ import {Box, Button, Dialog, Text} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
 export default function AutoFocusStory() {
-  const autoFocus = useBoolean('Auto-focus', true, 'Props')
-  const open = useBoolean('Open', false, 'Props')
+  const autoFocus = useBoolean('Auto-focus', true)
+  const open = useBoolean('Open', false)
   const handleClose = useAction('onClose')
 
   if (!open) {

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

@@ -1,4 +1,4 @@
-import {Box, Dialog, LayerProvider, Text} from '@sanity/ui'
+import {Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useAction} from '@sanity/ui-workshop'
 import {useEffect, useRef} from 'react'
 
@@ -19,8 +19,8 @@ export default function OnScrollStory() {
   return (
     <LayerProvider>
       <Dialog contentRef={ref} header="On scroll example" id="on-scroll-example">
-        <Box padding={4} paddingTop={1}>
-          <Text muted>
+        <Stack gap={4} padding={4} paddingTop={1}>
+          <Text muted size={1}>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
             hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi
             imperdiet quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis,
@@ -32,7 +32,19 @@ export default function OnScrollStory() {
             mattis tristique nunc ac lacinia. Vestibulum non pulvinar turpis, posuere consequat
             arcu. Fusce ut urna blandit, finibus nisi a, molestie elit. Nulla sed eleifend mi.
           </Text>
-        </Box>
+
+          <Text muted size={1}>
+            Aliquam quis finibus ex. Fusce semper lorem sed orci tempor gravida. Cras dui urna,
+            congue quis ipsum in, viverra facilisis libero. Vivamus vehicula libero quam, at posuere
+            leo ornare imperdiet. Cras eu neque eu tellus scelerisque iaculis ac id ex. Vestibulum
+            quam enim, lacinia ac ultricies at, molestie ut nisi. Vivamus vitae elit vel ante
+            feugiat iaculis. Pellentesque vel diam volutpat, luctus magna at, laoreet tellus.
+            Aliquam congue id nisi at sollicitudin. In sed nisi libero. Nulla ornare, mauris et
+            pulvinar hendrerit, ligula leo auctor enim, vestibulum laoreet metus nisl a nulla. Sed
+            et interdum sapien. Mauris lacinia interdum nisi quis ultrices. Etiam lobortis, dui
+            semper ornare fringilla, felis lacus feugiat dui, vitae rhoncus tellus tortor ut ipsum.
+          </Text>
+        </Stack>
       </Dialog>
     </LayerProvider>
   )

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

@@ -2,11 +2,11 @@ import {ArrowDownIcon, ArrowUpIcon} from '@sanity/icons'
 import {Box, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '$workshop'
 
 export default function PositionStory() {
-  const open = useBoolean('Open', true, 'Props')
-  const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS, 'fixed', 'Props')
+  const open = useBoolean('Open', true)
+  const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS)
 
   return (
     <Box padding={4}>

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

@@ -2,14 +2,14 @@ import {Box, Button, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useCallback, useRef, useState} from 'react'
 
-import {WORKSHOP_WIDTH_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '$workshop'
 
 export default function PropsStory() {
-  const animate = useBoolean('Animate', false, 'Props')
-  const header = useText('Header', 'Props example', 'Props')
-  const onClickOutside = useBoolean('Close when click outside', false, 'Props') || false
-  const hideCloseButton = useBoolean('Hide close button', false, 'Props') || false
-  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 0, 'Props')
+  const animate = useBoolean('Animate', false)
+  const header = useText('Header', 'Props example')
+  const onClickOutside = useBoolean('Close when click outside', false)
+  const hideCloseButton = useBoolean('Hide close button', false)
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS)
   const [open, setOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement | null>(null)
 

package/src/core/components/menu/__workshop__/menuButton.tsx

@@ -14,11 +14,11 @@ import {
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useMemo} from 'react'
 
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function MenuButtonStory() {
-  const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
-  const portal = useBoolean('Portal', false, 'Props')
+  const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
+  const portal = useBoolean('Portal', false)
 
   const popover: MenuButtonProps['popover'] = useMemo(
     () => ({

package/src/core/components/menu/__workshop__/tones.tsx

@@ -3,11 +3,11 @@ import {Box, Card, LayerProvider, Menu, MenuItem} from '@sanity/ui'
 import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function TonesStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const parentTone = useSelect('Parent tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
+  const disabled = useBoolean('Disabled', false)
+  const parentTone = useSelect('Parent tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
 
   return (
     <LayerProvider>

package/src/core/components/skeleton/__workshop__/delay.tsx

@@ -13,10 +13,10 @@ import {
 } from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function SkeletonDelayStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
   const animated = useBoolean('Animated', true)
 
   return (

package/src/core/components/skeleton/__workshop__/skeleton.tsx

@@ -13,10 +13,10 @@ import {
 } from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function SkeletonStory() {
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, '', 'Props') || 'default'
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
   const animated = useBoolean('Animated', true)
 
   return (

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

@@ -5,7 +5,7 @@ import {useState} from 'react'
 
 export default function ExampleStory() {
   const [tab, setTab] = useState('foo')
-  const useLongTitle = useBoolean('Use long title', false, 'Props') || false
+  const useLongTitle = useBoolean('Use long title', false)
 
   const longTitle =
     "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."

package/src/core/components/toast/__workshop__/toast.tsx

@@ -1,13 +1,13 @@
 import {Box, Container, Toast} from '@sanity/ui'
 import {useAction, useBoolean, useSelect, useString, useText} from '@sanity/ui-workshop'
 
-import {WORKSHOP_TOAST_STATUS_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_TOAST_STATUS_OPTIONS} from '$workshop'
 
 export default function ToastStory() {
-  const closable = useBoolean('Closable', false, 'Props')
-  const title = useString('Title', 'Toast title', 'Props')
-  const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS, '', 'Props') || undefined
-  const description = useText('Description', '', 'Props')
+  const closable = useBoolean('Closable', false)
+  const title = useString('Title', 'Toast title')
+  const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS)
+  const description = useText('Description')
   const handleClose = useAction('onClose')
 
   return (

package/src/core/primitives/avatar/__workshop__/asButton.tsx

@@ -1,10 +1,10 @@
 import {Avatar, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
 export default function AsButtonStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (
     <Flex align="center" height="fill" justify="center">

package/src/core/primitives/avatar/__workshop__/stack.tsx

@@ -1,10 +1,10 @@
 import {Avatar, AvatarCounter, AvatarStack, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
 export default function StackStory() {
-  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1, 'Props')
+  const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (
     <Flex align="center" height="fill" justify="center">

package/src/core/primitives/avatar/__workshop__/withinButton.tsx

@@ -10,7 +10,7 @@ import {Avatar} from '../avatar'
 import {AvatarStack} from '../avatarStack'
 
 export default function WithinButtonStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
+  const disabled = useBoolean('Disabled', false)
 
   return (
     <Container width={1}>

package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx

@@ -13,7 +13,7 @@ import {
 import {useBoolean} from '@sanity/ui-workshop'
 
 export default function WithinMenuItemStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
+  const disabled = useBoolean('Disabled', false)
 
   return (
     <Container width={1}>