@sanity/ui 4.0.0-static.3 → 4.0.0-static.31

package/src/core/primitives/stack/{stack.tsx → Stack.tsx}

@@ -1,7 +1,7 @@
 import {stack} from '@sanity/ui/css'
 
 import type {Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
 
 /** @public */
 export const DEFAULT_STACK_ELEMENT = 'div'

package/src/core/primitives/stack/__workshop__/{plain.tsx → 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/stack/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
   ],
 }

package/src/core/primitives/switch/{switch.tsx → Switch.tsx}

@@ -8,7 +8,6 @@ import {
 import {useEffect, useImperativeHandle, useRef} from 'react'
 
 import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
 
 /** @public */
 export const DEFAULT_SWITCH_ELEMENT = 'input'
@@ -41,7 +40,6 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
     indeterminate,
     readOnly,
     ref: forwardedRef,
-    style,
     ...rest
   } = props as SwitchProps<typeof DEFAULT_SWITCH_ELEMENT>
 
@@ -60,13 +58,7 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
   }, [indeterminate])
 
   return (
-    <Box
-      className={_switch({className})}
-      data-ui="Switch"
-      display="block"
-      position="relative"
-      style={style}
-    >
+    <span className={_switch({className})} data-ui="Switch">
       <Element
         {...rest}
         className={_switchElement()}
@@ -79,6 +71,6 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
         <span className={_switchTrack()} />
         <span className={_switchThumb()} />
       </span>
-    </Box>
+    </span>
   )
 }

package/src/core/primitives/switch/__workshop__/index.ts

@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
   name: 'primitives/switch',
   title: 'Switch',
   stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
+    {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
+    {name: 'example', title: 'Example', component: lazy(() => import('./Example'))},
   ],
 }
 

package/src/core/primitives/text/{text.tsx → Text.tsx}

@@ -42,6 +42,13 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
     children,
     className,
     flex,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
     maxWidth = 'fill',
     muted,
     size = 2,
@@ -58,6 +65,13 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
         className,
         align,
         flex,
+        margin,
+        marginX,
+        marginY,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
         maxWidth,
         muted,
         size,

package/src/core/primitives/text/__workshop__/{colored.tsx → 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 → 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/text/__workshop__/index.ts

@@ -8,17 +8,17 @@ const scope: WorkshopScope = {
     {
       name: 'default',
       title: 'Text',
-      component: lazy(() => import('./example')),
+      component: lazy(() => import('./Example')),
     },
     {
       name: 'colored',
       title: 'Colored text',
-      component: lazy(() => import('./colored')),
+      component: lazy(() => import('./Colored')),
     },
     {
       name: 'optical-alignment',
       title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
+      component: lazy(() => import('./OpticalAlignment')),
     },
   ],
 }

package/src/core/primitives/textArea/{textArea.tsx → TextArea.tsx}

@@ -37,14 +37,17 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
     __unstable_disableFocusRing,
     as: Element = DEFAULT_TEXT_AREA_ELEMENT,
     border = true,
+    className,
     customValidity,
     disabled = false,
+    flex,
     fontSize = 2,
     gap = 3,
     padding = 3,
     radius = 2,
     readOnly,
     ref: forwardedRef,
+    width,
     ...rest
   } = props as TextAreaProps<typeof DEFAULT_TEXT_AREA_ELEMENT>
 
@@ -60,11 +63,14 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
   return (
     <span
       className={textArea({
+        className,
         border,
+        flex,
         fontSize,
+        gap,
         padding,
         radius,
-        gap,
+        width,
       })}
       data-invalid={customValidity ? '' : undefined}
       data-read-only={!disabled && readOnly ? '' : undefined}

package/src/core/primitives/textArea/__workshop__/{plain.tsx → 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/textArea/__workshop__/index.ts

@@ -8,7 +8,7 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
   ],
 }

package/src/core/primitives/textInput/{textInput.tsx → TextInput.tsx}

@@ -27,9 +27,9 @@ import {useCustomValidity} from '../../hooks/useCustomValidity'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {isRecord} from '../../lib/isRecord'
 import type {ComponentType, Props} from '../../types'
-import {Box} from '../box/box'
-import {Button, type ButtonProps} from '../button/button'
-import {Text} from '../text/text'
+import {Box} from '../box/Box'
+import {Button, type ButtonProps} from '../button/Button'
+import {Text} from '../text/Text'
 
 /** @public */
 export const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
@@ -86,6 +86,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     className,
     clearButton,
     disabled = false,
+    flex,
     fontSize = 2,
     gap = 3,
     icon: IconComponent,
@@ -99,7 +100,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     suffix,
     customValidity,
     type = 'text',
-    weight: _width, // eslint-disable-line @typescript-eslint/no-unused-vars
+    weight: _width,
     width,
     ...rest
   } = props as TextInputProps<typeof DEFAULT_TEXT_INPUT_ELEMENT>
@@ -166,15 +167,15 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
   )
 
   return (
-    <Box
-      alignItems="center"
+    <span
       className={textInput({
         className,
         border,
+        flex,
         fontSize,
         padding,
         radius,
-        gap: gap,
+        gap,
         width,
       })}
       data-icon-left={IconComponent ? '' : undefined}
@@ -184,15 +185,14 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
       data-read-only={!disabled && readOnly ? '' : undefined}
       data-suffix={suffix ? '' : undefined}
       data-ui="TextInput"
-      display="flex"
     >
       {prefix && (
-        <Box className={textInputPrefix()} sizing="border">
+        <span className={textInputPrefix()}>
           <span>{prefix}</span>
-        </Box>
+        </span>
       )}
 
-      <Box className={textInputElement()} flex={1} position="relative">
+      <span className={textInputElement()}>
         <Element
           {...rest}
           className={_inputElement()}
@@ -203,10 +203,10 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
           type={type}
         />
 
-        <Box className={_inputPresentation()} position="absolute">
+        <span className={_inputPresentation()}>
           {IconComponent && (
-            <Box padding={padding} position="absolute" insetTop={0} insetLeft={0}>
-              <Text size={fontSize}>
+            <Box as="span" padding={padding} position="absolute" insetTop={0} insetLeft={0}>
+              <Text as="span" size={fontSize}>
                 {isValidElement(IconComponent) && IconComponent}
                 {isValidElementType(IconComponent) && <IconComponent />}
               </Text>
@@ -214,17 +214,18 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
           )}
 
           {!withClearButton && IconRightComponent && (
-            <Box padding={padding} position="absolute" insetTop={0} insetRight={0}>
-              <Text size={fontSize}>
+            <Box as="span" padding={padding} position="absolute" insetTop={0} insetRight={0}>
+              <Text as="span" size={fontSize}>
                 {isValidElement(IconRightComponent) && IconRightComponent}
                 {isValidElementType(IconRightComponent) && <IconRightComponent />}
               </Text>
             </Box>
           )}
-        </Box>
+        </span>
 
         {!disabled && !readOnly && clearButton && (
           <Box
+            as="span"
             insetTop={0}
             insetRight={0}
             padding={clearButtonBoxPadding}
@@ -246,13 +247,13 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
             />
           </Box>
         )}
-      </Box>
+      </span>
 
       {suffix && (
-        <Box className={textInputSuffix()} sizing="border">
+        <span className={textInputSuffix()}>
           <span>{suffix}</span>
-        </Box>
+        </span>
       )}
-    </Box>
+    </span>
   )
 }

package/src/core/primitives/textInput/__workshop__/{plain.tsx → 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}
     />
   )

package/src/core/primitives/textInput/__workshop__/{typed.tsx → Typed.tsx}

@@ -5,6 +5,7 @@ import {useCallback, useState} from 'react'
 import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '$workshop'
 
 export default function TypedStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
   const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text')
 
   const [value, setValue] = useState('')
@@ -16,7 +17,12 @@ export default function TypedStory(): React.JSX.Element {
   return (
     <Box padding={4}>
       <Container width={1}>
-        <TextInput onChange={handleChange} type={type} value={value} />
+        <TextInput
+          onChange={handleChange}
+          // @ts-expect-error - TODO: fix this
+          type={type}
+          value={value}
+        />
       </Container>
     </Box>
   )

package/src/core/primitives/textInput/__workshop__/index.ts

@@ -8,37 +8,37 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
     {
       name: 'custom-validity',
       title: 'Custom validity',
-      component: lazy(() => import('./customValidity')),
+      component: lazy(() => import('./CustomValidity')),
     },
     {
       name: 'typed',
       title: 'Typed',
-      component: lazy(() => import('./typed')),
+      component: lazy(() => import('./Typed')),
     },
     {
       name: 'tones',
       title: 'Tones',
-      component: lazy(() => import('./tones')),
+      component: lazy(() => import('./Tones')),
     },
     {
       name: 'clear-button',
       title: 'Clear button',
-      component: lazy(() => import('./clearButton')),
+      component: lazy(() => import('./ClearButton')),
     },
     {
       name: 'read-only',
       title: 'Read only',
-      component: lazy(() => import('./readOnly')),
+      component: lazy(() => import('./ReadOnly')),
     },
     {
       name: 'states',
       title: 'States',
-      component: lazy(() => import('./states')),
+      component: lazy(() => import('./States')),
     },
   ],
 }

package/src/core/primitives/tooltip/{tooltip.test.tsx → Tooltip.test.tsx}

@@ -3,10 +3,10 @@ import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {Button} from '../button/button'
-import {Text} from '../text/text'
-import {Tooltip} from './tooltip'
-import {TooltipDelayGroupProvider} from './tooltipDelayGroup'
+import {Button} from '../button/Button'
+import {Text} from '../text/Text'
+import {Tooltip} from './Tooltip'
+import {TooltipDelayGroupProvider} from './tooltipDelayGroup/TooltipDelayGroupProvider'
 
 // Fake timers
 beforeEach(() => {

package/src/core/primitives/tooltip/{tooltip.tsx → Tooltip.tsx}

@@ -37,18 +37,19 @@ import {origin} from '../../middleware/origin'
 import type {ComponentType, Delay, Placement, Props} from '../../types'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
 import {getElementRef} from '../../utils/getElementRef'
-import {Portal} from '../../utils/portal/portal'
+import {Portal} from '../../utils/portal/Portal'
 import {usePortal} from '../../utils/portal/usePortal'
-import {CardProvider} from '../card/cardProvider'
+import {CardProvider} from '../card/CardProvider'
 import {useCard} from '../card/useCard'
-import type {LayerOwnProps} from '../layer/layer'
+import type {LayerOwnProps} from '../layer/Layer'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_TOOLTIP_DISTANCE,
   DEFAULT_TOOLTIP_PADDING,
 } from './constants'
-import {useTooltipDelayGroup} from './tooltipDelayGroup'
-import {TooltipLayer} from './tooltipLayer'
+import {useTooltipDelayGroup} from './tooltipDelayGroup/useTooltipDelayGroup'
+// import {useTooltipDelayGroup} from './TooltipDelayGroup'
+import {TooltipLayer} from './TooltipLayer'
 
 /** @public */
 export const DEFAULT_TOOLTIP_ELEMENT = 'div'

package/src/core/primitives/tooltip/{tooltipLayer.tsx → TooltipLayer.tsx}

@@ -3,8 +3,8 @@ import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
 import type {Placement} from '../../types'
-import {Arrow} from '../arrow/arrow'
-import {Layer, type LayerOwnProps, type LayerProps} from '../layer/layer'
+import {Arrow} from '../arrow/Arrow'
+import {Layer, type LayerOwnProps, type LayerProps} from '../layer/Layer'
 import {
   DEFAULT_TOOLTIP_ARROW_HEIGHT,
   DEFAULT_TOOLTIP_ARROW_RADIUS,

package/src/core/primitives/tooltip/__workshop__/{customPortal.tsx → CustomPortal.tsx}

@@ -25,6 +25,7 @@ export default function CustomPortalStory(): React.JSX.Element {
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useSelect('Portal', PORTAL_OPTIONS)
   const useBoundaryElement = useBoolean('Use boundary element', true)
@@ -60,6 +61,7 @@ export default function CustomPortalStory(): React.JSX.Element {
                     boundaryElement={useBoundaryElement ? boundaryElement : null}
                     content={content ? <Text size={1}>{content}</Text> : undefined}
                     padding={2}
+                    // @ts-expect-error - TODO: fix this
                     placement={placement}
                     portal={portal}
                   >

package/src/core/primitives/tooltip/__workshop__/{overflowingBoundary.tsx → OverflowingBoundary.tsx}

@@ -9,6 +9,7 @@ export default function OverflowingBoundaryStory(): React.JSX.Element {
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',
   )
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'top')
   const portal = useBoolean('Portal', false)
   const useBoundaryElement = useBoolean('Use boundary element', true)
@@ -56,6 +57,7 @@ export default function OverflowingBoundaryStory(): React.JSX.Element {
             <Tooltip
               content={<Text size={1}>{content}</Text>}
               padding={2}
+              // @ts-expect-error - TODO: fix this
               placement={placement}
               portal={portal}
             >