@sanity/ui 4.0.0-static.4 → 4.0.0-static.41

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

@@ -0,0 +1,21 @@
+import {UploadIcon} from '@sanity/icons'
+import {Button, Flex} from '@sanity/ui'
+
+import {sanityUploadButton} from './styles.css'
+
+export default function SanityUploadButtonWorkaroundStory(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button
+        className={sanityUploadButton}
+        as="label"
+        htmlFor="file"
+        icon={UploadIcon}
+        tabIndex={0}
+        text="Upload"
+      >
+        <input type="file" />
+      </Button>
+    </Flex>
+  )
+}

package/src/core/primitives/button/__workshop__/{stacked.tsx → Stacked.tsx}

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

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

@@ -0,0 +1,11 @@
+import {Button, Flex} from '@sanity/ui'
+
+import {styledButton1} from './styles.css'
+
+export default function StyledButton1Story(): React.JSX.Element {
+  return (
+    <Flex align="center" height="fill" justify="center">
+      <Button className={styledButton1} as="a" href="#" text="Test" />
+    </Flex>
+  )
+}

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

@@ -8,57 +8,57 @@ const scope: WorkshopScope = {
     {
       name: 'props',
       title: 'Props',
-      component: lazy(() => import('./props')),
+      component: lazy(() => import('./Props')),
     },
     {
       name: 'styled-1',
       title: 'Styled #1',
-      component: lazy(() => import('./styled1')),
-    },
-    {
-      name: 'styled-2',
-      title: 'Styled #2',
-      component: lazy(() => import('./styled2')),
+      component: lazy(() => import('./Styled1')),
     },
     {
       name: 'stacked',
       title: 'Stacked',
-      component: lazy(() => import('./stacked')),
+      component: lazy(() => import('./Stacked')),
     },
     {
       name: 'custom',
       title: 'Custom',
-      component: lazy(() => import('./custom')),
+      component: lazy(() => import('./Custom')),
     },
     {
       name: 'mixed-children',
       title: 'Mixed children',
-      component: lazy(() => import('./mixedChildren')),
+      component: lazy(() => import('./MixedChildren')),
     },
     {
       name: 'upload-button',
       title: 'Upload button',
-      component: lazy(() => import('./uploadButton')),
+      component: lazy(() => import('./UploadButton')),
     },
     {
       name: 'sanity-upload-button-workaround',
       title: 'SanityUploadButtonWorkaroundStory',
-      component: lazy(() => import('./sanityUploadButton')),
+      component: lazy(() => import('./SanityUploadButton')),
     },
     {
       name: 'custom-icons',
       title: 'Custom icons',
-      component: lazy(() => import('./customIcons')),
+      component: lazy(() => import('./CustomIcons')),
     },
     {
       name: 'disabled',
       title: 'Disabled',
-      component: lazy(() => import('./disabled')),
+      component: lazy(() => import('./Disabled')),
     },
     {
       name: 'text-overflow',
       title: 'Text overflow',
-      component: lazy(() => import('./textOverflow')),
+      component: lazy(() => import('./TextOverflow')),
+    },
+    {
+      name: 'data-props',
+      title: 'Data props',
+      component: lazy(() => import('./DataProps')),
     },
   ],
 }

package/src/core/primitives/button/__workshop__/styles.css.ts

@@ -0,0 +1,30 @@
+import {globalStyle, style} from '@vanilla-extract/css'
+
+export const sanityUploadButton: string = style({})
+
+globalStyle(`${sanityUploadButton} input`, {
+  appearance: 'none',
+  overflow: ['hidden', 'clip'],
+  top: 0,
+  left: 0,
+  height: '100%',
+  opacity: 0,
+  position: 'absolute',
+  maxWidth: 0,
+  width: ['100%', '-moz-available', '-webkit-fill-available', 'stretch'],
+})
+
+globalStyle(`${sanityUploadButton} > span:nth-child(2)`, {
+  width: 0,
+  flex: 'none',
+  padding: 0,
+})
+
+export const styledButton1: string = style({
+  selectors: {
+    '&:hover': {
+      backgroundColor: 'red',
+      boxShadow: 'none',
+    },
+  },
+})

package/src/core/primitives/card/{card.tsx → Card.tsx}

@@ -1,10 +1,10 @@
 import {card, type CardStyleProps} from '@sanity/ui/css'
-import {useContext} from 'react'
+import {use} from 'react'
 
 import type {Props} from '../../types'
-import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
-import {CardContext} from './cardContext'
-import {CardProvider} from './cardProvider'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box/Box'
+import {CardContext} from './CardContext'
+import {CardProvider} from './CardProvider'
 
 /** @public */
 export const DEFAULT_CARD_ELEMENT = 'div'
@@ -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,
@@ -57,7 +56,7 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
     ...rest
   } = props as CardProps<typeof DEFAULT_CARD_ELEMENT>
 
-  const parent = useContext(CardContext)
+  const parent = use(CardContext)
   const tone = toneProp === 'inherit' ? parent?.tone : toneProp
   const scheme = schemeProp === undefined ? parent?.scheme : schemeProp
 
@@ -72,10 +71,11 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
         tone,
       })}
       data-checkered={checkered ? '' : undefined}
-      data-disabled={disabled ? '' : undefined}
-      data-focus-ring={focusRing ? '' : undefined}
-      data-pressed={pressed ? '' : undefined}
-      data-selected={selected ? '' : 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 ? '' : props['data-disabled']}
+      data-focus-ring={focusRing ? '' : props['data-focus-ring']}
+      data-pressed={pressed ? '' : props['data-pressed']}
+      data-selected={selected ? '' : props['data-selected']}
       radius={radius}
       style={style}
     />

package/src/core/primitives/card/{cardContext.ts → CardContext.ts}

@@ -7,4 +7,4 @@ import type {CardContextValue} from './types'
  * @internal
  */
 export const CardContext: Context<CardContextValue | null> =
-  createGlobalScopedContext<CardContextValue | null>('@sanity/ui/v3/card', null)
+  createGlobalScopedContext<CardContextValue | null>('@sanity/ui/v4/card', null)

package/src/core/primitives/card/{cardProvider.tsx → CardProvider.tsx}

@@ -1,7 +1,7 @@
 import type {CardTone, ColorScheme} from '@sanity/ui/theme'
-import {type ReactNode, useMemo} from 'react'
+import {type ReactNode} from 'react'
 
-import {CardContext} from './cardContext'
+import {CardContext} from './CardContext'
 import type {_CardCompatProviderComponent} from './types'
 
 /** @public */
@@ -14,14 +14,5 @@ export function CardProvider(props: {
 }): React.JSX.Element {
   const {children, tone, scheme, unstable_CompatProvider} = props
 
-  return (
-    <CardContext.Provider
-      value={useMemo(
-        () => ({tone, scheme, unstable_CompatProvider}),
-        [tone, scheme, unstable_CompatProvider],
-      )}
-    >
-      {children}
-    </CardContext.Provider>
-  )
+  return <CardContext value={{tone, scheme, unstable_CompatProvider}}>{children}</CardContext>
 }

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

@@ -0,0 +1,30 @@
+import {Card, Stack, Text} from '@sanity/ui'
+import type {CardTone} from '@sanity/ui/theme'
+import {useSelect} from '@sanity/ui-workshop'
+
+import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
+
+export default function DataPropsStory(): React.JSX.Element {
+  // @ts-expect-error - TODO: fix this
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS, 'default') as CardTone | undefined
+
+  return (
+    <Stack gap={1} padding={4}>
+      <Card as="button" data-enabled="" padding={3} tone={tone}>
+        <Text>Card</Text>
+      </Card>
+      <Card as="button" data-hovered="" padding={3} tone={tone}>
+        <Text>Card</Text>
+      </Card>
+      <Card as="button" data-pressed="" padding={3} tone={tone}>
+        <Text>Card</Text>
+      </Card>
+      <Card as="button" data-selected="" padding={3} tone={tone}>
+        <Text>Card</Text>
+      </Card>
+      <Card as="button" data-disabled="" padding={3} tone={tone}>
+        <Text>Card</Text>
+      </Card>
+    </Stack>
+  )
+}

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__/{styled.tsx → Styled.tsx}

@@ -1,14 +1,11 @@
 import {Card, Flex, Text} from '@sanity/ui'
-import {styled} from 'styled-components'
-
-const StyledCard = styled(Card).attrs({forwardedAs: 'ol'})``
 
 export default function StyledCardStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
-      <StyledCard>
+      <Card as="ol">
         <Text as="li">Styled</Text>
-      </StyledCard>
+      </Card>
     </Flex>
   )
 }

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

@@ -5,15 +5,16 @@ 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'))},
+    {name: 'data-props', title: 'Data props', component: lazy(() => import('./DataProps'))},
   ],
 }
 

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

@@ -1,15 +1,20 @@
-import {useContext} from 'react'
+import {use} from 'react'
 
-import {CardContext} from './cardContext'
+import {CardContext} from './CardContext'
 import type {CardContextValue} from './types'
 
 /** @public */
 export function useCard(): CardContextValue {
-  const card = useContext(CardContext)
+  const card = use(CardContext)
 
-  if (!card) {
-    throw new Error('useCard(): missing context value')
-  }
+  assertCardContext(card)
 
   return card
 }
+
+/** @internal */
+export function assertCardContext(card: CardContextValue | null): asserts card is CardContextValue {
+  if (!card) {
+    throw new Error('useCard(): missing context value', {cause: card})
+  }
+}

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'
@@ -31,6 +31,14 @@ export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
     children,
     className,
     language: languageProp,
+    margin,
+    marginX,
+    marginY,
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    maxWidth,
     size = 2,
     weight = 'regular',
     ...rest
@@ -39,7 +47,23 @@ export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
   const language = typeof languageProp === 'string' ? languageProp : undefined
 
   return (
-    <Element data-ui="Code" {...rest} className={code({className, size, weight})}>
+    <Element
+      data-ui="Code"
+      {...rest}
+      className={code({
+        className,
+        margin,
+        marginX,
+        marginY,
+        marginTop,
+        marginRight,
+        marginBottom,
+        marginLeft,
+        maxWidth,
+        size,
+        weight,
+      })}
+    >
       <Suspense fallback={<code>{children}</code>}>
         <LazyRefractor language={language} value={children} />
       </Suspense>

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}

@@ -1,34 +1,32 @@
 import {Card, Code, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import {styled} from 'styled-components'
 
 import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '$workshop'
 
-const DebugCard = styled(Card)`
-  outline: 1px solid red;
-  &:not([hidden]) {
-    display: flex;
-  }
-  align-items: center;
-  justify-content: center;
-`
+import {debugCard} from './styles.css'
 
 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%'}}>
-      <DebugCard flex={1}>
+    <Flex
+      // @ts-expect-error - TODO: fix this
+      direction={direction}
+      height="fill"
+      style={{width: '100%'}}
+    >
+      <Card className={debugCard} flex={1}>
         <Code size={1}>1</Code>
-      </DebugCard>
+      </Card>
 
-      <DebugCard flex={[1, 2, 3]}>
+      <Card className={debugCard} flex={[1, 2, 3]}>
         <Code size={1}>[1,2,3]</Code>
-      </DebugCard>
+      </Card>
 
-      <DebugCard flex={['none', 'none', 1]}>
+      <Card className={debugCard} flex={['none', 'none', 1]}>
         <Code size={1}>['none', 'none', 1]</Code>
-      </DebugCard>
+      </Card>
     </Flex>
   )
 }

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/flex/__workshop__/styles.css.ts

@@ -0,0 +1,12 @@
+import {style} from '@vanilla-extract/css'
+
+export const debugCard: string = style({
+  outline: '1px solid red',
+  alignItems: 'center',
+  justifyContent: 'center',
+  selectors: {
+    '&:not([hidden])': {
+      display: 'flex',
+    },
+  },
+})