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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.16",
+  "version": "4.0.0-static.18",
   "keywords": [
     "react",
     "ui",
@@ -132,10 +132,10 @@
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/js": "^9.32.0",
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/pkg-utils": "^7.11.0",
+    "@sanity/pkg-utils": "^7.11.4",
     "@sanity/prettier-config": "^2.0.1",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^3.1.2",
+    "@sanity/ui-workshop": "4.0.0-static.8",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
@@ -146,7 +146,7 @@
     "@types/react-is": "^19.0.0",
     "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/vite-plugin": "^5.1.1",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "^5.0.0",
     "@vitest/browser": "^3.2.4",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "browserslist-config-baseline": "^0.5.0",
@@ -163,7 +163,8 @@
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "0.0.0-experimental-edac0dde-20250723",
+    "eslint-plugin-react-compiler": "19.1.0-rc.2",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-66f09bd0-20250806",
     "eslint-plugin-react-refresh": "^0.4.20",
     "eslint-plugin-simple-import-sort": "^12.1.1",
     "eslint-plugin-storybook": "^9.1.1",
@@ -186,7 +187,7 @@
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.9.2",
     "typescript-eslint": "^8.39.0",
-    "vite": "^6.3.5",
+    "vite": "^7.1.0",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.4",
     "vitest-axe": "1.0.0-pre.5"
@@ -208,7 +209,6 @@
       "cypress"
     ],
     "overrides": {
-      "@sanity/ui-workshop": "file:registry/sanity-ui-workshop-3.0.0-local.12.tgz",
       "@types/react": "$@types/react",
       "@types/react-dom": "$@types/react-dom",
       "@types/react-is": "$@types/react-is",

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

@@ -16,9 +16,12 @@ export default function CustomStory(): React.JSX.Element {
   const data: ExampleOption[] = countries.map((d) => ({value: d.code, title: d.name}))
   const border = useBoolean('Border', true)
   const disabled = useBoolean('Disabled', false)
+  // @ts-expect-error - TODO: fix this
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
   const openButton = useBoolean('Open button', true)
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const readOnly = useBoolean('Read only', false)
   const [value, setValue] = useState('')
@@ -31,10 +34,17 @@ export default function CustomStory(): React.JSX.Element {
         href="#"
         key={option.value}
         onClick={(event) => event.preventDefault()}
+        // @ts-expect-error - TODO: fix this
         padding={padding}
+        // @ts-expect-error - TODO: fix this
         radius={Math.max((radius ?? 0) - 1, 0) as Radius}
       >
-        <Text size={fontSize}>{option.title}</Text>
+        <Text
+          // @ts-expect-error - TODO: fix this
+          size={fontSize}
+        >
+          {option.title}
+        </Text>
       </Card>
     ),
     [fontSize, padding, radius],
@@ -63,13 +73,16 @@ export default function CustomStory(): React.JSX.Element {
               border={border}
               disabled={disabled}
               filterOption={filterOption}
+              // @ts-expect-error - TODO: fix this
               fontSize={fontSize}
               id="custom"
               onChange={setValue}
               openButton={openButton}
               options={options}
+              // @ts-expect-error - TODO: fix this
               padding={padding}
               placeholder="Search"
+              // @ts-expect-error - TODO: fix this
               radius={radius}
               readOnly={readOnly}
               renderOption={renderOption}

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

@@ -32,14 +32,18 @@ const typingPerfTest: PerfTestProps<HTMLInputElement> = {
 export default function ExampleStory(): React.JSX.Element {
   const {ref, Wrapper} = usePerfTest(typingPerfTest)
 
+  // @ts-expect-error - TODO: fix this
   const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS)
   const options = useMemo(() => countries.map((country) => ({value: country.code})), [])
   const border = useBoolean('Border', true)
   const customValidity = useText('Custom validity')
   const disabled = useBoolean('Disabled', false)
+  // @ts-expect-error - TODO: fix this
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
   const openButton = useBoolean('Open button', false)
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const readOnly = useBoolean('Read only', false)
   const [value, setValue] = useState('')
@@ -47,7 +51,11 @@ export default function ExampleStory(): React.JSX.Element {
   const handleChange = useCallback((value: string) => setValue(value), [])
 
   return (
-    <Card height="fill" tone={layoutTone}>
+    <Card
+      height="fill"
+      // @ts-expect-error - TODO: fix this
+      tone={layoutTone}
+    >
       <Container width={1}>
         <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
           <Stack gap={3}>
@@ -59,13 +67,16 @@ export default function ExampleStory(): React.JSX.Element {
                 border={border}
                 customValidity={customValidity}
                 disabled={disabled}
+                // @ts-expect-error - TODO: fix this
                 fontSize={fontSize}
                 onChange={handleChange}
                 id="default"
                 openButton={openButton}
                 options={options}
+                // @ts-expect-error - TODO: fix this
                 padding={padding}
                 placeholder="Search"
+                // @ts-expect-error - TODO: fix this
                 radius={radius}
                 readOnly={readOnly}
                 ref={ref}

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

@@ -6,6 +6,7 @@ import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '$workshop'
 
 export default function PositionStory(): React.JSX.Element {
   const open = useBoolean('Open', true)
+  // @ts-expect-error - TODO: fix this
   const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS)
 
   return (
@@ -22,7 +23,14 @@ export default function PositionStory(): React.JSX.Element {
         </Stack>
 
         <LayerProvider>
-          {open && <Dialog header="Position example" id="position-example" position={position} />}
+          {open && (
+            <Dialog
+              header="Position example"
+              id="position-example"
+              // @ts-expect-error - TODO: fix this
+              position={position}
+            />
+          )}
         </LayerProvider>
       </Box>
     </Box>

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

@@ -9,6 +9,7 @@ export default function PropsStory(): React.JSX.Element {
   const header = useText('Header', 'Props example')
   const onClickOutside = useBoolean('Close when click outside', false)
   const hideCloseButton = useBoolean('Hide close button', false)
+  // @ts-expect-error - TODO: fix this
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS)
   const [open, setOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement | null>(null)
@@ -37,6 +38,7 @@ export default function PropsStory(): React.JSX.Element {
             onClickOutside={onClickOutside ? handleClose : undefined}
             onClose={handleClose}
             open={open}
+            // @ts-expect-error - TODO: fix this
             width={width}
           >
             <Box padding={4}>

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

@@ -17,6 +17,7 @@ import {useMemo} from 'react'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function MenuButtonStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
   const portal = useBoolean('Portal', false)
 
@@ -29,7 +30,11 @@ export default function MenuButtonStory(): React.JSX.Element {
   )
 
   return (
-    <Card height="fill" tone={layoutTone}>
+    <Card
+      height="fill"
+      // @ts-expect-error - TODO: fix this
+      tone={layoutTone}
+    >
       <Box padding={[4, 5, 6]}>
         <Grid gridTemplateColumns={3} gap={2}>
           <Button id="prev-button" mode="ghost" text="Prev" />

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

@@ -7,12 +7,18 @@ import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function TonesStory(): React.JSX.Element {
   const disabled = useBoolean('Disabled', false)
+  // @ts-expect-error - TODO: fix this
   const parentTone = useSelect('Parent tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
 
   return (
     <LayerProvider>
       <Box padding={[4, 5, 6]}>
-        <Card radius={3} shadow={3} tone={parentTone}>
+        <Card
+          radius={3}
+          shadow={3}
+          // @ts-expect-error - TODO: fix this
+          tone={parentTone}
+        >
           <Menu>
             {ELEMENT_TONES.map((tone) => (
               <MenuItem disabled={disabled} icon={CubeIcon} key={tone} text={tone} tone={tone} />

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

@@ -6,6 +6,7 @@ import {WORKSHOP_TOAST_STATUS_OPTIONS} from '$workshop'
 export default function ToastStory(): React.JSX.Element {
   const closable = useBoolean('Closable', false)
   const title = useString('Title', 'Toast title')
+  // @ts-expect-error - TODO: fix this
   const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS)
   const description = useText('Description')
   const handleClose = useAction('onClose')
@@ -17,6 +18,7 @@ export default function ToastStory(): React.JSX.Element {
           closable={closable}
           description={description}
           onClose={handleClose}
+          // @ts-expect-error - TODO: fix this
           status={status}
           title={title}
         />

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

@@ -4,11 +4,18 @@ import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
 export default function AsButtonStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Avatar as="button" color="purple" initials="uq" size={size} />
+      <Avatar
+        as="button"
+        color="purple"
+        initials="uq"
+        // @ts-expect-error - TODO: fix this
+        size={size}
+      />
     </Flex>
   )
 }

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

@@ -4,11 +4,15 @@ import {useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '$workshop'
 
 export default function StackStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const size = useSelect('Size', WORKSHOP_AVATAR_SIZE_OPTIONS, 1)
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <AvatarStack size={size}>
+      <AvatarStack
+        // @ts-expect-error - TODO: fix this
+        size={size}
+      >
         <AvatarCounter count={2} />
         <Avatar color="magenta" initials="uq" />
         <Avatar

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

@@ -4,14 +4,25 @@ import {useAction, useSelect, useText} from '@sanity/ui-workshop'
 import {WORKSHOP_BADGE_TONE_OPTIONS, WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
 export default function PropsStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 1)
+  // @ts-expect-error - TODO: fix this
   const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 1)
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_BADGE_TONE_OPTIONS, 'default')
   const textProp = useText('Text', 'Label')
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Badge onClick={useAction('onClick')} paddingX={paddingX} paddingY={paddingY} tone={tone}>
+      <Badge
+        onClick={useAction('onClick')}
+        // @ts-expect-error - TODO: fix this
+        paddingX={paddingX}
+        // @ts-expect-error - TODO: fix this
+        paddingY={paddingY}
+        // @ts-expect-error - TODO: fix this
+        tone={tone}
+      >
         {textProp}
       </Badge>
     </Flex>

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

@@ -4,12 +4,17 @@ import {useAction, useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
 export default function PropsStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 0)
 
   return (
     <Box padding={[4, 5, 6]}>
       <Card border tone="inherit">
-        <Box onClick={useAction('onClick')} padding={padding}>
+        <Box
+          onClick={useAction('onClick')}
+          // @ts-expect-error - TODO: fix this
+          padding={padding}
+        >
           <Text>
             Box with <code>padding={padding}</code>
           </Text>

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

@@ -15,39 +15,61 @@ import {
 
 export default function ButtonStory(): React.JSX.Element {
   const disabled = useBoolean('Disabled')
+  // @ts-expect-error - TODO: fix this
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
   const loading = useBoolean('Loading')
+  // @ts-expect-error - TODO: fix this
   const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS)
   const selected = useBoolean('Selected')
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const textAlign = useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS)
   const textProp = useText('Text', 'Label')
+  // @ts-expect-error - TODO: fix this
   const textWeight = useSelect('Text weight', WORKSHOP_TEXT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center">
       <Button
         disabled={disabled}
+        // @ts-expect-error - TODO: fix this
         fontSize={fontSize}
+        // @ts-expect-error - TODO: fix this
         gap={gap}
+        // @ts-expect-error - TODO: fix this
         icon={icon && icons[icon]}
+        // @ts-expect-error - TODO: fix this
         iconRight={iconRight && icons[iconRight]}
+        // @ts-expect-error - TODO: fix this
         justify={justify}
         loading={loading}
+        // @ts-expect-error - TODO: fix this
         mode={mode}
         onClick={useAction('onClick')}
+        // @ts-expect-error - TODO: fix this
         paddingX={paddingX}
+        // @ts-expect-error - TODO: fix this
         paddingY={paddingY}
         selected={selected}
+        // @ts-expect-error - TODO: fix this
         textAlign={textAlign}
         text={textProp}
+        // @ts-expect-error - TODO: fix this
         textWeight={textWeight}
+        // @ts-expect-error - TODO: fix this
         tone={tone}
       />
     </Flex>

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

@@ -14,14 +14,22 @@ import {
 export default function StackedStory(): React.JSX.Element {
   const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
   const disabled = useBoolean('Disabled', false)
+  // @ts-expect-error - TODO: fix this
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
+  // @ts-expect-error - TODO: fix this
   const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3)
+  // @ts-expect-error - TODO: fix this
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle')
+  // @ts-expect-error - TODO: fix this
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center')
+  // @ts-expect-error - TODO: fix this
   const mode = useSelect('Mode', WORKSHOP_BUTTON_MODE_OPTIONS, 'default')
   const onClick = useAction('onClick')
+  // @ts-expect-error - TODO: fix this
   const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3)
+  // @ts-expect-error - TODO: fix this
   const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3)
   const selected = useBoolean('Selected', false)
 
@@ -34,15 +42,23 @@ export default function StackedStory(): React.JSX.Element {
               {tones.map(([title, tone]) => (
                 <Button
                   disabled={disabled}
+                  // @ts-expect-error - TODO: fix this
                   fontSize={fontSize}
+                  // @ts-expect-error - TODO: fix this
                   gap={gap}
+                  // @ts-expect-error - TODO: fix this
                   icon={icon && icons[icon]}
+                  // @ts-expect-error - TODO: fix this
                   iconRight={iconRight && icons[iconRight]}
+                  // @ts-expect-error - TODO: fix this
                   justify={justify}
                   key={tone}
+                  // @ts-expect-error - TODO: fix this
                   mode={mode}
                   onClick={onClick}
+                  // @ts-expect-error - TODO: fix this
                   paddingX={paddingX}
+                  // @ts-expect-error - TODO: fix this
                   paddingY={paddingY}
                   selected={selected}
                   text={title}

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

@@ -10,30 +10,40 @@ import {
 } from '$workshop'
 
 export default function PropsStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div')
   const border = useBoolean('Border', false)
   const checkered = useBoolean('Checkered', false)
   const muted = useBoolean('Muted', false)
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
   const pressed = useBoolean('Pressed', false)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 0)
   const selected = useBoolean('Selected', false)
+  // @ts-expect-error - TODO: fix this
   const shadow = useSelect('Shadow', WORKSHOP_SHADOW_OPTIONS, 0)
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default')
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Card
         __unstable_checkered={checkered}
+        // @ts-expect-error - TODO: fix this
         as={as}
         border={border}
         muted={muted}
         onClick={useAction('onClick')}
+        // @ts-expect-error - TODO: fix this
         padding={padding}
         pressed={pressed}
+        // @ts-expect-error - TODO: fix this
         radius={radius}
         selected={selected}
+        // @ts-expect-error - TODO: fix this
         shadow={shadow}
+        // @ts-expect-error - TODO: fix this
         tone={tone}
       >
         <Stack gap={3}>

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

@@ -38,7 +38,7 @@ export default function SelectedStory(): React.JSX.Element {
   )
 }
 
-function Preview({selected}: {selected: boolean}) {
+function Preview({selected}: {selected: boolean | undefined}) {
   return (
     <Flex>
       <Box flex={1}>

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

@@ -47,7 +47,6 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
     __unstable_focusRing: focusRing = false,
     as = DEFAULT_CARD_ELEMENT,
     className,
-    disabled,
     pressed,
     radius = 0,
     scheme: schemeProp,
@@ -72,7 +71,8 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
         tone,
       })}
       data-checkered={checkered ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
+      // Extract the disabled prop without removing it from `...rest` so that the underlying <button> or <a> has `[disabled]` when needed
+      data-disabled={props.disabled ? '' : undefined}
       data-focus-ring={focusRing ? '' : undefined}
       data-pressed={pressed ? '' : undefined}
       data-selected={selected ? '' : undefined}

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

@@ -6,11 +6,16 @@ import {WORKSHOP_CODE_LANGUAGE_OPTIONS, WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$
 export default function PropsStory(): React.JSX.Element {
   const code = useText('Code', `console.log('Hello, world')`)
   const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript')
+  // @ts-expect-error - TODO: fix this
   const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1)
 
   return (
     <Box padding={[4, 5, 6]}>
-      <Code language={language} size={size}>
+      <Code
+        language={language}
+        // @ts-expect-error - TODO: fix this
+        size={size}
+      >
         {code}
       </Code>
     </Box>

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

@@ -4,11 +4,16 @@ import {useAction, useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '$workshop'
 
 export default function PlainStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Container onClick={useAction('onClick')} width={width}>
+      <Container
+        onClick={useAction('onClick')}
+        // @ts-expect-error - TODO: fix this
+        width={width}
+      >
         <Card padding={4} shadow={1}>
           <Text size={1}>
             Container with <code>max-width={width}</code>

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

@@ -14,10 +14,16 @@ const DebugCard = styled(Card)`
 `
 
 export default function ExampleStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row')
 
   return (
-    <Flex direction={direction} height="fill" style={{width: '100%'}}>
+    <Flex
+      // @ts-expect-error - TODO: fix this
+      direction={direction}
+      height="fill"
+      style={{width: '100%'}}
+    >
       <DebugCard flex={1}>
         <Code size={1}>1</Code>
       </DebugCard>

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

@@ -9,19 +9,30 @@ import {
 
 export default function PlainStory(): React.JSX.Element {
   const muted = useBoolean('Muted', false)
+  // @ts-expect-error - TODO: fix this
   const size = useSelect('Size', WORKSHOP_HEADING_FONT_SIZE_OPTIONS, 2)
   const textChild = useText('Text', 'Hello, world')
   const textOverflow = useSelect(
     'Text overflow',
+    // @ts-expect-error - TODO: fix this
     WORKSHOP_TEXT_OVERFLOW_OPTIONS,
     undefined,
     'Props',
   )
+  // @ts-expect-error - TODO: fix this
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Heading muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
+      <Heading
+        muted={muted}
+        // @ts-expect-error - TODO: fix this
+        size={size}
+        // @ts-expect-error - TODO: fix this
+        textOverflow={textOverflow}
+        // @ts-expect-error - TODO: fix this
+        weight={weight}
+      >
         {textChild}
       </Heading>
     </Flex>

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

@@ -6,7 +6,11 @@ import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 export default function PlainStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Inline gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0)} onClick={useAction('onClick')}>
+      <Inline
+        // @ts-expect-error - TODO: fix this
+        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

@@ -9,17 +9,31 @@ import {
 } from '$workshop'
 
 export default function PlainStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const align = useSelect('Align', WORKSHOP_TEXT_ALIGN_OPTIONS)
   const muted = useBoolean('Muted', false)
+  // @ts-expect-error - TODO: fix this
   const size = useSelect('Size', WORKSHOP_LABEL_FONT_SIZE_OPTIONS)
   const textChild = useText('Text', 'Label text')
+  // @ts-expect-error - TODO: fix this
   const textOverflow = useSelect('Text overflow', WORKSHOP_TEXT_OVERFLOW_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>
-        <Label align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
+        <Label
+          // @ts-expect-error - TODO: fix this
+          align={align}
+          muted={muted}
+          // @ts-expect-error - TODO: fix this
+          size={size}
+          // @ts-expect-error - TODO: fix this
+          textOverflow={textOverflow}
+          // @ts-expect-error - TODO: fix this
+          weight={weight}
+        >
           {textChild}
         </Label>
       </Container>