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

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>

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

@@ -12,11 +12,15 @@ import {
 
 export default function AlignedStory(): React.JSX.Element {
   const constrainSize = useBoolean('Constrain size', false)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS)
   const portal = useBoolean('Portal', true)
+  // @ts-expect-error - TODO: fix this
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
 
+  // @ts-expect-error - TODO: fix this
   const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
 
   const [open, setOpen] = useState(false)
@@ -49,7 +53,13 @@ export default function AlignedStory(): React.JSX.Element {
   return (
     <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
       <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1} sizing="border">
-        <Flex align={flexAlign} height="fill" justify={flexJustify}>
+        <Flex
+          // @ts-expect-error - TODO: fix this
+          align={flexAlign}
+          height="fill"
+          // @ts-expect-error - TODO: fix this
+          justify={flexJustify}
+        >
           <Popover
             constrainSize={constrainSize}
             content={content}
@@ -58,8 +68,10 @@ export default function AlignedStory(): React.JSX.Element {
             overflow="auto"
             padding={3}
             portal={portal}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             ref={popoverElementRef}
+            // @ts-expect-error - TODO: fix this
             width={width}
           >
             <Button

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

@@ -5,6 +5,7 @@ import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
 export default function MatchReferenceWidthStory(): React.JSX.Element {
   const arrow = useBoolean('Arrow', true)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
 
   return (
@@ -18,6 +19,7 @@ export default function MatchReferenceWidthStory(): React.JSX.Element {
         }
         matchReferenceWidth
         open
+        // @ts-expect-error - TODO: fix this
         placement={placement}
         radius={2}
       >

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

@@ -15,11 +15,15 @@ export default function PlainStory(): React.JSX.Element {
   const constrainSize = useBoolean('Constrain size', true)
   const matchReferenceWidth = useBoolean('Match reference width', false)
   const open = useBoolean('Open', true)
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
   const portal = useBoolean('Portal', true)
   const preventOverflow = useBoolean('Prevent overflow', true)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  // @ts-expect-error - TODO: fix this
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
@@ -53,11 +57,15 @@ export default function PlainStory(): React.JSX.Element {
               floatingBoundary={boundaryElementFlag ? boundaryElement : undefined}
               matchReferenceWidth={matchReferenceWidth}
               open={open}
+              // @ts-expect-error - TODO: fix this
               padding={padding}
+              // @ts-expect-error - TODO: fix this
               placement={placement}
               portal={portal}
               preventOverflow={preventOverflow}
+              // @ts-expect-error - TODO: fix this
               radius={radius}
+              // @ts-expect-error - TODO: fix this
               width={width}
             >
               <Button text="This button is the popover reference" />

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

@@ -26,6 +26,7 @@ export default function SidePanelStory(): React.JSX.Element {
   const sidePanelWidth = useSelect('Side panel width', SIDE_PANEL_WIDTH, SIDE_PANEL_WIDTH.md)
   const [sidePanel, setSidePanel] = useState<HTMLDivElement | null>(null)
   const updateRef = useRef<PopoverUpdateCallback>(undefined)
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS) ?? 'inherit'
 
   useEffect(() => updateRef.current?.(), [sidePanelWidth])
@@ -48,7 +49,12 @@ export default function SidePanelStory(): React.JSX.Element {
 
             <Card border padding={3}>
               <Text size={1}>
-                Some editor <InlineObject tone={tone} updateRef={updateRef} />
+                Some editor{' '}
+                <InlineObject
+                  // @ts-expect-error - TODO: fix this
+                  tone={tone}
+                  updateRef={updateRef}
+                />
               </Text>
             </Card>
           </Stack>

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

@@ -25,11 +25,14 @@ export default function TestStory(): React.JSX.Element {
   const constrainSize = useBoolean('Constrain size', true)
   const matchReferenceWidth = useBoolean('Match reference width', false)
   const open = useBoolean('Open', true)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
   const portal = useBoolean('Render in portal', true)
   const preventOverflow = useBoolean('Prevent overflow', true)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const referenceWide = useBoolean('Reference wide?', false)
+  // @ts-expect-error - TODO: fix this
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
 
   const text = useText('Text', 'Test')
@@ -81,11 +84,14 @@ export default function TestStory(): React.JSX.Element {
                   open={open}
                   overflow="hidden"
                   padding={3}
+                  // @ts-expect-error - TODO: fix this
                   placement={placement}
                   portal={portal}
                   preventOverflow={preventOverflow}
+                  // @ts-expect-error - TODO: fix this
                   radius={radius}
                   updateRef={updateRef}
+                  // @ts-expect-error - TODO: fix this
                   width={width}
                 >
                   {button}

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

@@ -171,7 +171,6 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     matchReferenceWidth,
     floatingBoundary = boundaryElementContext.element,
     modal,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActivate,
     open,
     overflow = 'hidden',

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

@@ -6,7 +6,9 @@ import {WORKSHOP_RADIUS_OPTIONS, WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$worksho
 export default function PlainStory(): React.JSX.Element {
   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)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS)
   const readOnly = useBoolean('Read only', false)
 
@@ -21,8 +23,10 @@ export default function PlainStory(): React.JSX.Element {
           <Select
             border={border}
             disabled={disabled}
+            // @ts-expect-error - TODO: fix this
             fontSize={fontSize}
             id="select-example"
+            // @ts-expect-error - TODO: fix this
             radius={radius}
             readOnly={readOnly}
           >

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

@@ -16,6 +16,7 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function SkeletonDelayStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
   const animated = useBoolean('Animated', true)
 
@@ -23,7 +24,14 @@ export default function SkeletonDelayStory(): React.JSX.Element {
     <Box padding={[4, 5, 6]}>
       <Container width={1}>
         <Text muted>Delayed by 2000ms</Text>
-        <Card tone={tone} marginTop={4} padding={2} radius={2} border>
+        <Card
+          // @ts-expect-error - TODO: fix this
+          tone={tone}
+          marginTop={4}
+          padding={2}
+          radius={2}
+          border
+        >
           <Flex align="center">
             <Skeleton
               style={{width: 90, height: 90}}

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

@@ -16,6 +16,7 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
 export default function SkeletonStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
   const animated = useBoolean('Animated', true)
 
@@ -24,7 +25,14 @@ export default function SkeletonStory(): React.JSX.Element {
       <Container width={1}>
         <Stack gap={4}>
           {[1, 2, 3].map((item) => (
-            <Card key={item} tone={tone} padding={2} radius={2} border>
+            <Card
+              key={item}
+              // @ts-expect-error - TODO: fix this
+              tone={tone}
+              padding={2}
+              radius={2}
+              border
+            >
               <Flex align="center">
                 <Grid gap={2} gridTemplateColumns={2} marginRight={3}>
                   <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />

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

@@ -5,11 +5,16 @@ import {WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
 
 export default function Props(): React.JSX.Element {
   const muted = useBoolean('Muted', false)
+  // @ts-expect-error - TODO: fix this
   const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Spinner muted={muted} size={size} />
+      <Spinner
+        muted={muted}
+        // @ts-expect-error - TODO: fix this
+        size={size}
+      />
     </Flex>
   )
 }

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

@@ -7,7 +7,10 @@ export default function PlainStory(): React.JSX.Element {
   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)}>
+        <Stack
+          // @ts-expect-error - TODO: fix this
+          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

@@ -11,11 +11,18 @@ const ColoredText = styled(Text)<{$color: AvatarColor}>`
 `
 
 export default function ColoredTextStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const color = useSelect('Color', WORKSHOP_AVATAR_COLOR_OPTIONS, 'gray') ?? 'gray'
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <ColoredText align="center" $color={color} size={4} weight="bold">
+      <ColoredText
+        align="center"
+        // @ts-expect-error - TODO: fix this
+        $color={color}
+        size={4}
+        weight="bold"
+      >
         {color}
       </ColoredText>
     </Flex>

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

@@ -9,17 +9,31 @@ import {
 } from '$workshop'
 
 export default function TextStory(): 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_TEXT_FONT_SIZE_OPTIONS, 1)
   const text = useText('Text', 'Hello, world')
+  // @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_TEXT_WEIGHT_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Container width={0}>
-        <Text align={align} muted={muted} size={size} textOverflow={textOverflow} weight={weight}>
+        <Text
+          // @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}
+        >
           {text}
         </Text>
       </Container>

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

@@ -10,15 +10,19 @@ import {
 } from '$workshop'
 
 export default function PlainStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
 
   const border = useBoolean('Border', true)
   const customValidity = useText('Custom validity')
   const disableFocusRing = useBoolean('Disable focus ring (unstable)', false)
   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 padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
   const placeholder = useText('Placeholder', 'Placeholder')
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const readOnly = useBoolean('Read only', false)
 
@@ -32,6 +36,7 @@ export default function PlainStory(): React.JSX.Element {
       justifyContent="center"
       padding={[4, 5, 6]}
       sizing="border"
+      // @ts-expect-error - TODO: fix this
       tone={tone}
     >
       <Container width={0}>
@@ -44,11 +49,14 @@ export default function PlainStory(): React.JSX.Element {
             border={border}
             customValidity={customValidity}
             disabled={disabled}
+            // @ts-expect-error - TODO: fix this
             fontSize={fontSize}
             id="text-area-example"
             onChange={(e) => setValue(e.target.value)}
+            // @ts-expect-error - TODO: fix this
             padding={padding}
             placeholder={placeholder}
+            // @ts-expect-error - TODO: fix this
             radius={radius}
             readOnly={readOnly}
             rows={10}

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

@@ -53,16 +53,23 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
   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, 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, 'search')
+  // @ts-expect-error - TODO: fix this
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, 'cube')
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
   const placeholder = useText('Placeholder')
   const prefix = useBoolean('Prefix', false)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const readOnly = useBoolean('Read only', false)
   const suffix = useBoolean('Suffix', false)
+  // @ts-expect-error - TODO: fix this
   const weight = useSelect('Weight', WORKSHOP_FONT_WEIGHT_OPTIONS)
 
   const [value, setValue] = useState('')
@@ -77,33 +84,56 @@ function TextInputTest(props: {inputRef: React.Ref<HTMLInputElement>}) {
       border={border}
       customValidity={customValidity}
       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]}
       id="text-input-example"
       name="test"
       onChange={handleChange}
+      // @ts-expect-error - TODO: fix this
       padding={padding}
       placeholder={placeholder}
       prefix={
         prefix && (
-          <Box padding={padding}>
-            <Text size={fontSize}>Prefix</Text>
+          <Box
+            // @ts-expect-error - TODO: fix this
+            padding={padding}
+          >
+            <Text
+              // @ts-expect-error - TODO: fix this
+              size={fontSize}
+            >
+              Prefix
+            </Text>
           </Box>
         )
       }
+      // @ts-expect-error - TODO: fix this
       radius={radius}
       readOnly={readOnly}
       ref={ref}
       suffix={
         suffix && (
-          <Box padding={padding}>
-            <Text size={fontSize}>Suffix</Text>
+          <Box
+            // @ts-expect-error - TODO: fix this
+            padding={padding}
+          >
+            <Text
+              // @ts-expect-error - TODO: fix this
+              size={fontSize}
+            >
+              Suffix
+            </Text>
           </Box>
         )
       }
       value={value}
+      // @ts-expect-error - TODO: fix this
       weight={weight}
     />
   )