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

package/src/core/primitives/badge/__workshop__/props.tsx

@@ -1,16 +1,13 @@
 import {Badge, Flex} from '@sanity/ui'
 import {useAction, useSelect, useText} from '@sanity/ui-workshop'
 
-import {
-  WORKSHOP_BADGE_TONE_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-} from '../../../../../workshop/constants'
+import {WORKSHOP_BADGE_TONE_OPTIONS, WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
 export default function PropsStory() {
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default', 'Props')
-  const textProp = useText('Text', 'Label', 'Props')
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1)
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1)
+  const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default')
+  const textProp = useText('Text', 'Label')
 
   return (
     <Flex align="center" height="fill" justify="center">

package/src/core/primitives/box/__workshop__/props.tsx

@@ -1,10 +1,10 @@
 import {Box, Card, Text} from '@sanity/ui'
 import {useAction, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_SPACE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
 export default function PropsStory() {
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0, 'Props')
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0)
 
   return (
     <Box padding={[4, 5, 6]}>

package/src/core/primitives/box/box.tsx

@@ -94,6 +94,7 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
     marginBottom,
     marginLeft,
     maxWidth,
+    minHeight = 0,
     minWidth = 0,
     muted,
     outline,
@@ -162,6 +163,7 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
           marginBottom,
           marginLeft,
           maxWidth,
+          minHeight,
           minWidth,
           muted,
           outline,

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

@@ -9,28 +9,26 @@ import {
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
   WORKSHOP_ICON_SYMBOL_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
   WORKSHOP_TEXT_WEIGHT_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function ButtonStory() {
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
-  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
-  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
-  const loading = useBoolean('Loading', false, 'Props')
-  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default', 'Props')
-  const textAlign =
-    useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
-  const textProp = useText('Text', 'Label', 'Props')
-  const textWeight =
-    useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
+  const disabled = useBoolean('Disabled')
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
+  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS)
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
+  const loading = useBoolean('Loading')
+  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS)
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS)
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS)
+  const selected = useBoolean('Selected')
+  const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS)
+  const textAlign = useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS)
+  const textProp = useText('Text', 'Label')
+  const textWeight = useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center">

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

@@ -8,22 +8,22 @@ import {
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
   WORKSHOP_ICON_SYMBOL_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
+} from '$workshop'
 
 export default function StackedStory() {
   const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
-  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
-  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
-  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
-  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default', 'Props')
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3)
+  const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle')
+  const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center')
+  const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default')
   const onClick = useAction('onClick')
-  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
+  const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3)
+  const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3)
+  const selected = useBoolean('Selected', false)
 
   return (
     <Card height="fill">

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

@@ -1,6 +1,6 @@
 import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
 
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function AsButtonStory() {
   const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)

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

@@ -2,8 +2,8 @@ import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
 export default function InteractiveCardStory() {
-  const pressed = useBoolean('Pressed', false, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
+  const pressed = useBoolean('Pressed', false)
+  const selected = useBoolean('Selected', false)
 
   return (
     <Flex align="center" height="fill" justify="center">

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

@@ -7,19 +7,19 @@ import {
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SHADOW_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function PropsStory() {
-  const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div', 'Props')
-  const border = useBoolean('Border', false, 'Props')
-  const checkered = useBoolean('Checkered', false, 'Props')
-  const muted = useBoolean('Muted', false, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const pressed = useBoolean('Pressed', false, 'Props')
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0, 'Props')
-  const selected = useBoolean('Selected', false, 'Props')
-  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0, 'Props')
-  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Props')
+  const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div')
+  const border = useBoolean('Border', false)
+  const checkered = useBoolean('Checkered', false)
+  const muted = useBoolean('Muted', false)
+  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  const pressed = useBoolean('Pressed', false)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0)
+  const selected = useBoolean('Selected', false)
+  const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0)
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">

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

@@ -3,8 +3,8 @@ import {Box, Card, Container, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
 export default function SelectedStory() {
-  const disabled = useBoolean('Disabled', false) || false
-  const selected = useBoolean('Selected', false) || false
+  const disabled = useBoolean('Disabled', false)
+  const selected = useBoolean('Selected', false)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">

package/src/core/primitives/checkbox/__workshop__/props.tsx

@@ -2,14 +2,14 @@ import {Box, Checkbox, Flex, Text} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
 export default function PropsStory() {
-  const checked = useBoolean('Checked', false, 'Props')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const indeterminate = useBoolean('Indeterminate', false, 'Props')
-  const invalid = useBoolean('Invalid', false, 'Props')
+  const checked = useBoolean('Checked', false)
+  const disabled = useBoolean('Disabled', false)
+  const indeterminate = useBoolean('Indeterminate', false)
+  const invalid = useBoolean('Invalid', false)
   const onChange = useAction('onChange')
   const onFocus = useAction('onFocus')
   const onBlur = useAction('onBlur')
-  const readOnly = useBoolean('Read only', false, 'Props')
+  const readOnly = useBoolean('Read only', false)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">

package/src/core/primitives/code/__workshop__/props.tsx

@@ -1,15 +1,12 @@
 import {Box, Code} from '@sanity/ui'
 import {useSelect, useText} from '@sanity/ui-workshop'
 
-import {
-  WORKSHOP_CODE_LANGUAGE_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
+import {WORKSHOP_CODE_LANGUAGE_OPTIONS, WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
 
 export default function PropsStory() {
-  const code = useText('Code', `console.log('Hello, world')`, 'Props')
-  const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript', 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1, 'Props')
+  const code = useText('Code', `console.log('Hello, world')`)
+  const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript')
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1)
 
   return (
     <Box padding={[4, 5, 6]}>

package/src/core/primitives/code/code.tsx

@@ -29,7 +29,7 @@ export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(pr
     className,
     language: languageProp,
     size = 2,
-    weight,
+    weight = 'regular',
     ...rest
   } = props as CodeProps<typeof DEFAULT_CODE_ELEMENT>
 

package/src/core/primitives/container/__workshop__/example.tsx

@@ -1,10 +1,10 @@
 import {Card, Container, Flex, Text} from '@sanity/ui'
 import {useAction, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '$workshop'
 
 export default function PlainStory() {
-  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0, 'Props')
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">

package/src/core/primitives/flex/__workshop__/example.tsx

@@ -2,7 +2,7 @@ import {Card, Code, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import {styled} from 'styled-components'
 
-import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '$workshop'
 
 const DebugCard = styled(Card)`
   outline: 1px solid red;
@@ -14,7 +14,7 @@ const DebugCard = styled(Card)`
 `
 
 export default function ExampleStory() {
-  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row', 'Props')
+  const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row')
 
   return (
     <Flex direction={direction} height="fill" style={{width: '100%'}}>

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

@@ -5,15 +5,19 @@ import {
   WORKSHOP_FONT_WEIGHT_OPTIONS,
   WORKSHOP_HEADING_FONT_SIZE_OPTIONS,
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function PlainStory() {
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2, 'Props')
-  const textChild = useText('Text', 'Hello, world', 'Props')
-  const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
+  const muted = useBoolean('Muted', false)
+  const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2)
+  const textChild = useText('Text', 'Hello, world')
+  const textOverflow = useSelect(
+    'Text overflow',
+    WORKSHOP_TEXT_OVERFLOW_OPTIONS,
+    undefined,
+    'Props',
+  )
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">

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

@@ -51,7 +51,7 @@ export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_EL
     muted = false,
     size = 2,
     textOverflow: textOverflowProp,
-    weight,
+    weight = 'regular',
     ...rest
   } = props as HeadingProps<typeof DEFAULT_HEADING_ELEMENT>
 

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

@@ -1,15 +1,12 @@
 import {Card, Flex, Inline, Text} from '@sanity/ui'
 import {useAction, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_SPACE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
 export default function PlainStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Inline
-        gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}
-        onClick={useAction('onClick')}
-      >
+      <Inline gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0)} onClick={useAction('onClick')}>
         <Card padding={1} shadow={1}>
           <Text size={1}>Inline item</Text>
         </Card>

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

@@ -6,16 +6,15 @@ import {
   WORKSHOP_LABEL_FONT_SIZE_OPTIONS,
   WORKSHOP_TEXT_ALIGN_OPTIONS,
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function PlainStory() {
-  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')
-  const textChild = useText('Text', 'Label text', 'Props')
-  const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, '', 'Props') || undefined
-  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS, '', 'Props') || undefined
+  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
+  const muted = useBoolean('Muted', false)
+  const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS)
+  const textChild = useText('Text', 'Label text')
+  const textOverflow = useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS)
+  const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">

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

@@ -49,7 +49,7 @@ export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>
     muted = false,
     size = 1,
     textOverflow: textOverflowProp,
-    weight = 'medium',
+    weight = 'regular',
     ...rest
   } = props
 

package/src/core/primitives/popover/__workshop__/AlignedStory.tsx

@@ -4,20 +4,20 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useRef, useState} from 'react'
 
 import {
+  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_FLEX_ALIGN_OPTIONS,
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
-  WORKSHOP_WIDTH_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function AlignedStory() {
   const constrainSize = useBoolean('Constrain size', false)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS)
   const portal = useBoolean('Portal', true)
-  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 'auto')
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
 
-  const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS, 'flex-start')
-  const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'flex-end')
+  const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS)
+  const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
 
   const [open, setOpen] = useState(false)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)

package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx

@@ -1,11 +1,11 @@
 import {Box, Button, Container, Flex, Popover, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
 export default function MatchReferenceWidthStory() {
-  const arrow = useBoolean('Arrow', true, 'Props')
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom', 'Props')
+  const arrow = useBoolean('Arrow', true)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">

package/src/core/primitives/popover/__workshop__/PlainStory.tsx

@@ -7,7 +7,7 @@ import {
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function PlainStory() {
   const arrow = useBoolean('Arrow', true)

package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx

@@ -1,7 +1,7 @@
 import {useSelect} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useRef, useState} from 'react'
 
-import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 import type {CardTone} from '../../../types'
 import {BoundaryElementProvider} from '../../../utils'
 import {Box} from '../../box'

package/src/core/primitives/popover/__workshop__/TestStory.tsx

@@ -3,9 +3,11 @@ import {useRef, useState} from 'react'
 
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
+  // WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
+
 import {BoundaryElementProvider, PortalProvider} from '../../../utils'
 import {Button} from '../../button'
 import {Card} from '../../card'

package/src/core/primitives/radio/__workshop__/example.tsx

@@ -4,8 +4,8 @@ import {useCallback, useState} from 'react'
 
 export default function ExampleStory() {
   const [value, setValue] = useState('first-option')
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
+  const disabled = useBoolean('Disabled', false)
+  const readOnly = useBoolean('Read only', false)
 
   const handleChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value)

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

@@ -2,14 +2,14 @@ import {Flex, Radio} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
 export default function PlainStory() {
-  const checked = useBoolean('Checked', false, 'Props')
-  const disabled = useBoolean('Disabled', false, 'Props')
+  const checked = useBoolean('Checked', false)
+  const disabled = useBoolean('Disabled', false)
   const id = 'radioStory'
   const name = 'radioStory'
   const onBlur = useAction('onBlur')
   const onChange = useAction('onChange')
   const onFocus = useAction('onFocus')
-  const readOnly = useBoolean('Read only', false, 'Props')
+  const readOnly = useBoolean('Read only', false)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[3, 4, 5]} sizing="border">

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

@@ -1,17 +1,14 @@
 import {Card, Container, Label, Select, Stack} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
-} from '../../../../../workshop/constants'
+import {WORKSHOP_RADIUS_OPTIONS, WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
 
 export default function PlainStory() {
   const border = useBoolean('Border', true)
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2, 'Props')
-  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, undefined, 'Props')
-  const readOnly = useBoolean('Read only', false, 'Props')
+  const disabled = useBoolean('Disabled', false)
+  const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
+  const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS)
+  const readOnly = useBoolean('Read only', false)
 
   return (
     <Container width={0}>

package/src/core/primitives/spinner/__workshop__/Props.tsx

@@ -1,11 +1,11 @@
 import {Flex, Spinner} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
 
 export default function Props() {
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const muted = useBoolean('Muted', false)
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
 
   return (
     <Flex align="center" height="fill" justify="center">

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

@@ -1,13 +1,13 @@
 import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_SPACE_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
 export default function PlainStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Stack gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}>
+        <Stack gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0)}>
           <Card padding={[2, 3, 4]} shadow={1}>
             <Text align="center" muted>
               Stack item

package/src/core/primitives/text/__workshop__/colored.tsx

@@ -4,14 +4,14 @@ import type {AvatarColor} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import {styled} from 'styled-components'
 
-import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_AVATAR_COLOR_OPTIONS} from '$workshop'
 
 const ColoredText = styled(Text)<{$color: AvatarColor}>`
   ${varNames.color.fg}: ${({$color}) => vars.color.avatar[$color].bg};
 `
 
 export default function ColoredTextStory() {
-  const color = useSelect('Color', WORKSHOP_SPOT_COLOR_OPTIONS, 'magenta') || 'magenta'
+  const color = useSelect('Color', WORKSHOP_AVATAR_COLOR_OPTIONS, 'gray') ?? 'gray'
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">

package/src/core/primitives/text/__workshop__/example.tsx

@@ -3,21 +3,18 @@ import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 
 import {
   WORKSHOP_TEXT_ALIGN_OPTIONS,
+  WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
   WORKSHOP_TEXT_WEIGHT_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function TextStory() {
-  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS, '', 'Props') || undefined
-  const muted = useBoolean('Muted', false, 'Props')
-  const size = useSelect('Size', WORKSHOP_TEXT_SIZE_OPTIONS, 1, 'Props')
-  const text = useText('Text', 'Hello, world', 'Props')
-
-  const textOverflow =
-    useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS, undefined, 'Props') || undefined
-
-  const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS, '', 'Props') || undefined
+  const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
+  const muted = useBoolean('Muted', false)
+  const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1)
+  const text = useText('Text', 'Hello, world')
+  const textOverflow = useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS)
+  const weight = useSelect('Weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">