@sanity/ui 4.0.0-static.2 → 4.0.0-static.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "4.0.0-static.2",
+  "version": "4.0.0-static.21",
   "keywords": [
     "react",
     "ui",
@@ -20,32 +20,27 @@
   },
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "type": "module",
   "exports": {
     ".": {
       "source": "./exports/index.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
       "default": "./dist/index.js"
     },
     "./css": {
       "source": "./exports/css.ts",
-      "import": "./dist/css/index.js",
-      "require": "./dist/css/index.cjs",
       "default": "./dist/css/index.js"
     },
     "./css/index.css": "./dist/css/index.css",
     "./package.json": "./package.json",
     "./theme": {
       "source": "./exports/theme.ts",
-      "import": "./dist/theme.js",
-      "require": "./dist/theme.cjs",
       "default": "./dist/theme.js"
     }
   },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "typesVersions": {
     "*": {
@@ -118,15 +113,13 @@
     "extends": "@sanity/semantic-release-preset"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.1.4",
+    "@floating-ui/react-dom": "^2.1.5",
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.4",
-    "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/dynamic": "^2.1.5",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.23.9",
-    "react-compiler-runtime": "19.1.0-rc.2",
+    "framer-motion": "^12.23.12",
     "react-refractor": "^4.0.0",
     "use-effect-event": "^2.0.3"
   },
@@ -137,68 +130,66 @@
     "@babel/preset-typescript": "^7.27.1",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
-    "@eslint/js": "^9.31.0",
+    "@eslint/js": "^9.33.0",
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/pkg-utils": "^7.9.10",
+    "@sanity/pkg-utils": "^7.11.7",
     "@sanity/prettier-config": "^2.0.1",
     "@sanity/semantic-release-preset": "^5.0.0",
-    "@sanity/ui-workshop": "^2.1.6",
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
+    "@sanity/ui-workshop": "4.0.0-static.11",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
     "@types/node": "^24.0.3",
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
     "@types/react-is": "^19.0.0",
-    "@vanilla-extract/rollup-plugin": "^1.3.17",
-    "@vanilla-extract/vite-plugin": "^5.1.0",
-    "@vitejs/plugin-react": "^4.7.0",
-    "@vitest/browser": "^3.2.3",
-    "autoprefixer": "^10.4.21",
+    "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/vite-plugin": "^5.1.1",
+    "@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",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
-    "cssnano": "^7.1.0",
     "cypress": "^13.17.0",
     "cypress-real-events": "^1.14.0",
     "cz-conventional-changelog": "^3.3.0",
     "dotenv-flow": "^4.1.0",
-    "eslint": "^9.31.0",
+    "eslint": "^9.33.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-formatter-compact": "^8.40.0",
     "eslint-plugin-boundaries": "^5.0.1",
     "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.0.11",
-    "globals": "^16.2.0",
+    "eslint-plugin-storybook": "^9.1.1",
+    "globals": "^16.3.0",
     "husky": "^8.0.3",
-    "lightningcss": "^1.30.1",
+    "jsdom": "^26.1.0",
     "lint-staged": "^14.0.1",
     "mkdirp": "^3.0.1",
     "npm-run-all2": "^8.0.4",
-    "postcss": "^8.5.6",
-    "postcss-preset-env": "^10.2.3",
-    "prettier": "^3.5.3",
-    "prettier-plugin-packagejson": "^2.5.15",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-is": "^19.1.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-packagejson": "^2.5.19",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-is": "^19.1.1",
     "refractor": "^5.0.0",
     "rimraf": "^5.0.10",
     "semantic-release": "24.2.7",
-    "start-server-and-test": "^2.0.11",
-    "styled-components": "^6.1.17",
+    "start-server-and-test": "^2.0.13",
+    "styled-components": "^6.1.19",
     "tsconfig-paths": "^4.2.0",
-    "typescript": "5.8.3",
-    "typescript-eslint": "^8.38.0",
-    "vite": "^6.3.5",
+    "typescript": "5.9.2",
+    "typescript-eslint": "^8.39.0",
+    "vite": "^7.1.1",
     "vite-tsconfig-paths": "^5.1.4",
-    "vitest": "^3.2.3",
+    "vitest": "^3.2.4",
     "vitest-axe": "1.0.0-pre.5"
   },
   "peerDependencies": {
@@ -206,9 +197,9 @@
     "react-dom": "^19",
     "react-is": "^19"
   },
-  "packageManager": "pnpm@10.12.1",
+  "packageManager": "pnpm@10.14.0",
   "engines": {
-    "node": ">=20.19"
+    "node": ">=20.19 <22 || >=22.12"
   },
   "publishConfig": {
     "access": "public"
@@ -218,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/menu/menu.tsx

@@ -19,7 +19,7 @@ export type MenuOwnProps = PaddingStyleProps & {
   'gap'?: ResponsiveProp<Space>
   'onClickOutside'?: (event: MouseEvent) => void
   'onEscape'?: () => void
-  'onItemClick'?: () => void
+  'onItemClick'?: (event: React.MouseEvent<HTMLButtonElement>) => void
   'onItemSelect'?: (index: number) => void
   'originElement'?: HTMLElement | null
   'registerElement'?: (el: HTMLElement) => () => void

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

@@ -159,11 +159,16 @@ export function MenuButton(props: MenuButtonProps): React.JSX.Element {
     [menuElements],
   )
 
-  const handleItemClick = useCallback(() => {
-    setOpen(false)
-    if (disableRestoreFocusOnClose) return
-    if (buttonElement) buttonElement.focus()
-  }, [buttonElement, disableRestoreFocusOnClose])
+  const handleItemClick = useCallback(
+    (e: ReactMouseEvent<HTMLButtonElement>) => {
+      if (e.defaultPrevented) return
+
+      setOpen(false)
+      if (disableRestoreFocusOnClose) return
+      if (buttonElement) buttonElement.focus()
+    },
+    [buttonElement, disableRestoreFocusOnClose],
+  )
 
   const registerElement = useCallback((el: HTMLElement) => {
     setChildMenuElements((els) => els.concat([el]))

package/src/core/components/menu/menuContext.ts

@@ -9,7 +9,7 @@ export interface MenuContextValue {
   mount: (element: HTMLElement | null, selected?: boolean) => () => void
   onClickOutside?: (event: MouseEvent) => void
   onEscape?: () => void
-  onItemClick?: () => void
+  onItemClick?: (event: ReactMouseEvent<HTMLButtonElement>) => void
   onItemMouseEnter?: (event: ReactMouseEvent<HTMLElement>) => void
   onItemMouseLeave?: (event: ReactMouseEvent<HTMLElement>) => void
   registerElement?: (el: HTMLElement) => () => void

package/src/core/components/menu/menuGroup.tsx

@@ -127,10 +127,13 @@ export function MenuGroup<E extends MenuGroupElementType = typeof DEFAULT_MENU_G
     [onClick],
   )
 
-  const handleChildItemClick = useCallback(() => {
-    setOpen(false)
-    onItemClick?.()
-  }, [onItemClick])
+  const handleChildItemClick = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      setOpen(false)
+      onItemClick?.(e)
+    },
+    [onItemClick],
+  )
 
   const handleMenuMouseEnter = useCallback(() => setWithinMenu(true), [])
 

package/src/core/components/menu/menuItem.tsx

@@ -104,7 +104,7 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
     (event: MouseEvent<HTMLButtonElement>) => {
       if (disabled) return
       if (onClick) onClick(event)
-      if (onItemClick) onItemClick()
+      if (onItemClick) onItemClick(event)
     },
     [disabled, onClick, onItemClick],
   )

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}