@sanity/ui 4.0.0-static.9 → 4.0.0-v4.1

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

@@ -5,15 +5,15 @@ const scope: WorkshopScope = {
   name: 'primitives/card',
   title: 'Card',
   stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'styled', title: 'Styled', component: lazy(() => import('./styled'))},
-    {name: 'interactive', title: 'Interactive', component: lazy(() => import('./interactive'))},
-    {name: 'tones', title: 'Tones', component: lazy(() => import('./tones'))},
-    {name: 'as-button', title: 'As button', component: lazy(() => import('./asButton'))},
-    {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./listNavigation'))},
-    {name: 'checkered', title: 'Checkered', component: lazy(() => import('./checkered'))},
-    {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
-    {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
+    {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
+    {name: 'styled', title: 'Styled', component: lazy(() => import('./Styled'))},
+    {name: 'interactive', title: 'Interactive', component: lazy(() => import('./Interactive'))},
+    {name: 'tones', title: 'Tones', component: lazy(() => import('./Tones'))},
+    {name: 'as-button', title: 'As button', component: lazy(() => import('./AsButton'))},
+    {name: 'list-nav', title: 'List navigation', component: lazy(() => import('./ListNavigation'))},
+    {name: 'checkered', title: 'Checkered', component: lazy(() => import('./Checkered'))},
+    {name: 'as-component', title: 'As component', component: lazy(() => import('./AsComponent'))},
+    {name: 'selected', title: 'Selected', component: lazy(() => import('./Selected'))},
   ],
 }
 

package/src/core/primitives/card/useCard.ts

@@ -1,6 +1,6 @@
 import {useContext} from 'react'
 
-import {CardContext} from './cardContext'
+import {CardContext} from './CardContext'
 import type {CardContextValue} from './types'
 
 /** @public */

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

@@ -5,10 +5,10 @@ const scope: WorkshopScope = {
   name: 'primitives/checkbox',
   title: 'Checkbox',
   stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
-    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
-    {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./tones'))},
+    {name: 'props', title: 'Props', component: lazy(() => import('./Props'))},
+    {name: 'example', title: 'Example', component: lazy(() => import('./Example'))},
+    {name: 'read-only', title: 'Read-only', component: lazy(() => import('./ReadOnly'))},
+    {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./Tones'))},
   ],
 }
 

package/src/core/primitives/code/{code.tsx → Code.tsx}

@@ -4,7 +4,7 @@ import {lazy, Suspense} from 'react'
 
 import type {ComponentType, Props} from '../../types'
 
-const LazyRefractor = lazy(() => import('./refractor'))
+const LazyRefractor = lazy(() => import('./Refractor'))
 
 /** @public */
 export const DEFAULT_CODE_ELEMENT = 'pre'

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

@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
     {
       name: 'props',
       title: 'Props',
-      component: lazy(() => import('./props')),
+      component: lazy(() => import('./Props')),
     },
     {
       name: 'optical-alignment',
       title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
+      component: lazy(() => import('./OpticalAlignment')),
     },
   ],
 }

package/src/core/primitives/container/{container.tsx → Container.tsx}

@@ -1,7 +1,7 @@
 import {container, type ContainerStyleProps} 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_CONTAINER_ELEMENT = 'div'

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

@@ -4,7 +4,7 @@ import {lazy} from 'react'
 const scope: WorkshopScope = {
   name: 'primitives/container',
   title: 'Container',
-  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./example'))}],
+  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./Example'))}],
 }
 
 export default scope

package/src/core/primitives/flex/{flex.tsx → Flex.tsx}

@@ -7,7 +7,7 @@ import type {
 } 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_FLEX_ELEMENT = 'div'

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

@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
   name: 'primitives/flex',
   title: 'Flex',
   stories: [
-    {name: 'plain', title: 'Plain', component: lazy(() => import('./example'))},
-    {name: 'gap', title: 'Gap', component: lazy(() => import('./gap'))},
+    {name: 'plain', title: 'Plain', component: lazy(() => import('./Example'))},
+    {name: 'gap', title: 'Gap', component: lazy(() => import('./Gap'))},
   ],
 }
 

package/src/core/primitives/grid/{grid.tsx → Grid.tsx}

@@ -1,5 +1,5 @@
 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_GRID_ELEMENT = 'div'

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

@@ -5,7 +5,7 @@ const scope: WorkshopScope = {
   name: 'primitives/grid',
   title: 'Grid',
   stories: [
-    {name: 'responsive', title: 'Responsive', component: lazy(() => import('./responsive'))},
+    {name: 'responsive', title: 'Responsive', component: lazy(() => import('./Responsive'))},
   ],
 }
 

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

@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
     {
       name: 'optical-alignment',
       title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
+      component: lazy(() => import('./OpticalAlignment')),
     },
   ],
 }

package/src/core/primitives/inline/{inline.tsx → Inline.tsx}

@@ -1,5 +1,5 @@
 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_INLINE_ELEMENT = 'div'

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

@@ -4,7 +4,7 @@ import {lazy} from 'react'
 const scope: WorkshopScope = {
   name: 'primitives/inline',
   title: 'Inline',
-  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
+  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))}],
 }
 
 export default scope

package/src/core/primitives/kbd/{kbd.tsx → Kbd.tsx}

@@ -2,8 +2,8 @@ import {kbd, type RadiusStyleProps, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
 import type {ComponentType, Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
-import {Text} from '../text/text'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
+import {Text} from '../text/Text'
 
 /** @public */
 export const DEFAULT_KBD_ELEMENT = 'kbd'

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

@@ -4,7 +4,7 @@ import {lazy} from 'react'
 const scope: WorkshopScope = {
   name: 'primitives/kbd',
   title: 'KBD',
-  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))}],
+  stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))}],
 }
 
 export default scope

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

@@ -8,12 +8,12 @@ const scope: WorkshopScope = {
     {
       name: 'plain',
       title: 'Plain',
-      component: lazy(() => import('./plain')),
+      component: lazy(() => import('./Plain')),
     },
     {
       name: 'optical-alignment',
       title: 'Optical alignment',
-      component: lazy(() => import('./opticalAlignment')),
+      component: lazy(() => import('./OpticalAlignment')),
     },
   ],
 }

package/src/core/primitives/layer/{layer.test.tsx → Layer.test.tsx}

@@ -2,7 +2,7 @@ import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '$test/utils'
 
-import {LayerContext} from './layerContext'
+import {LayerContext} from './LayerContext'
 import type {LayerContextValue} from './types'
 import {useLayer} from './useLayer'
 

package/src/core/primitives/layer/{layer.tsx → Layer.tsx}

@@ -1,9 +1,9 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
 
-import type {CardElementType, CardOwnProps} from '../../primitives/card/card'
+import type {CardElementType, CardOwnProps} from '../../primitives/card/Card'
 import type {Props} from '../../types'
-import {LayerCard} from './layerCard'
-import {LayerProvider} from './layerProvider'
+import {LayerCard} from './LayerCard'
+import {LayerProvider} from './LayerProvider'
 
 /** @public */
 export const DEFAULT_LAYER_ELEMENT = 'div'

package/src/core/primitives/layer/{layerCard.tsx → LayerCard.tsx}

@@ -2,9 +2,9 @@ import {type FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} fr
 
 import {EMPTY_RECORD} from '../../constants'
 import {containsOrEqualsElement, isHTMLElement} from '../../helpers/element'
-import {Card, type CardElementType} from '../../primitives/card/card'
+import {Card, type CardElementType} from '../../primitives/card/Card'
 import type {Props} from '../../types'
-import type {LayerElementType, LayerOwnProps} from './layer'
+import type {LayerElementType, LayerOwnProps} from './Layer'
 import {useLayer} from './useLayer'
 
 /** @internal */

package/src/core/primitives/layer/{layerProvider.tsx → LayerProvider.tsx}

@@ -4,7 +4,7 @@ import {type ReactNode, useCallback, useContext, useEffect, useMemo, useState} f
 import {useMediaIndex} from '../../hooks/useMediaIndex/useMediaIndex'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {getLayerContext} from './getLayerContext'
-import {LayerContext} from './layerContext'
+import {LayerContext} from './LayerContext'
 import type {LayerContextValue} from './types'
 
 /** @public */

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

@@ -8,17 +8,17 @@ const scope: WorkshopScope = {
     {
       name: 'nested',
       title: 'Nested',
-      component: lazy(() => import('./nested')),
+      component: lazy(() => import('./Nested')),
     },
     {
       name: 'multiple-roots',
       title: 'Multiple roots',
-      component: lazy(() => import('./multipleRoots')),
+      component: lazy(() => import('./MultipleRoots')),
     },
     {
       name: 'responsive-z-offset',
       title: 'Responsive z-offset',
-      component: lazy(() => import('./responsiveZOffset')),
+      component: lazy(() => import('./ResponsiveZOffset')),
     },
   ],
 }

package/src/core/primitives/layer/useLayer.ts

@@ -1,7 +1,7 @@
 import {useContext} from 'react'
 
 import {getLayerContext} from './getLayerContext'
-import {LayerContext} from './layerContext'
+import {LayerContext} from './LayerContext'
 import type {LayerContextValue} from './types'
 
 /** @public */

package/src/core/primitives/popover/{popover.tsx → Popover.tsx}

@@ -32,10 +32,10 @@ import {origin} from '../../middleware/origin'
 import type {ComponentType, Placement, Props} from '../../types'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
 import {getElementRef} from '../../utils/getElementRef'
-import {Portal} from '../../utils/portal/portal'
-import {CardProvider} from '../card/cardProvider'
+import {Portal} from '../../utils/portal/Portal'
+import {CardProvider} from '../card/CardProvider'
 import {useCard} from '../card/useCard'
-import {type LayerOwnProps} from '../layer/layer'
+import {type LayerOwnProps} from '../layer/Layer'
 import {useLayer} from '../layer/useLayer'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
@@ -44,7 +44,7 @@ import {
   DEFAULT_POPOVER_PADDING,
 } from './constants'
 import {size} from './floating-ui/size'
-import {PopoverLayer} from './popoverLayer'
+import {PopoverLayer} from './PopoverLayer'
 import type {PopoverMargins, PopoverUpdateCallback} from './types'
 
 /** @public */
@@ -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/popover/{popoverLayer.tsx → PopoverLayer.tsx}

@@ -5,9 +5,9 @@ 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 {Flex} from '../flex/flex'
-import {Layer, type LayerOwnProps, type LayerProps} from '../layer/layer'
+import {Arrow} from '../arrow/Arrow'
+import {Flex} from '../flex/Flex'
+import {Layer, type LayerOwnProps, type LayerProps} from '../layer/Layer'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
   DEFAULT_POPOVER_ARROW_RADIUS,

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" />