@sanity/ui 3.0.0-static.33 → 3.0.0-static.34

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

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/button',
   title: 'Button',
   stories: [
@@ -61,4 +61,6 @@ export default defineScope({
       component: lazy(() => import('./textOverflow')),
     },
   ],
-})
+}
+
+export default scope

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

@@ -1,7 +1,7 @@
 import {AddIcon} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
 
-export default function MixedChildrenStory() {
+export default function MixedChildrenStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
       <Button fontSize={[2, 2, 3]} icon={AddIcon} mode="ghost" padding={[3, 3, 4]} text="Create">

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

@@ -13,7 +13,7 @@ import {
   WORKSHOP_TEXT_WEIGHT_OPTIONS,
 } from '$workshop'
 
-export default function ButtonStory() {
+export default function ButtonStory(): React.JSX.Element {
   const disabled = useBoolean('Disabled')
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
   const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS)

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

@@ -25,7 +25,7 @@ const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`
   }
 `
 
-export default function SanityUploadButtonWorkaroundStory() {
+export default function SanityUploadButtonWorkaroundStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
       <SanityUploadButton htmlFor="file" icon={UploadIcon} tabIndex={0} text="Upload">

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

@@ -11,7 +11,7 @@ import {
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
 } from '$workshop'
 
-export default function StackedStory() {
+export default function StackedStory(): React.JSX.Element {
   const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
   const disabled = useBoolean('Disabled', false)
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)

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

@@ -8,7 +8,7 @@ const StyledButton1 = styled.a`
   }
 `
 
-export default function StyledButton1Story() {
+export default function StyledButton1Story(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
       <Button as={StyledButton1} href="#" text="Test" />

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

@@ -8,7 +8,7 @@ const StyledButton2 = styled(Button)<{$color?: boolean}>`
   }
 `
 
-export default function StyledButton2Story() {
+export default function StyledButton2Story(): React.JSX.Element {
   const props = {href: '#', text: 'Test'}
 
   return (

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

@@ -1,7 +1,7 @@
 import {Button, Flex} from '@sanity/ui'
 import {useText} from '@sanity/ui-workshop'
 
-export default function TextOverflowStory() {
+export default function TextOverflowStory(): React.JSX.Element {
   const text = useText('Text', 'Long text that should overflow')
 
   return (

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

@@ -1,7 +1,7 @@
 import {Button, Flex} from '@sanity/ui'
 import {useCallback, useRef} from 'react'
 
-export default function UploadButtonStory() {
+export default function UploadButtonStory(): React.JSX.Element {
   const inputRef = useRef<HTMLInputElement | null>(null)
 
   const handleKeyDown = useCallback((event: React.KeyboardEvent) => {

package/src/core/primitives/button/button.test.tsx

@@ -3,7 +3,8 @@ import {screen} from '@testing-library/react'
 import {describe, expect, it} from 'vitest'
 import {axe} from 'vitest-axe'
 
-import {render} from '../../../../test'
+import {render} from '$test/utils'
+
 import {Button} from './button'
 
 describe('atoms/button', () => {

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

@@ -8,11 +8,11 @@ import type {
   Width,
 } from '@sanity/ui/css'
 import {button, buttonLoadingBox} from '@sanity/ui/css'
-import type {FontTextSize, Space} from '@sanity/ui/theme'
+import type {FontTextSize} from '@sanity/ui/theme'
 import {type ElementType as ReactElementType, isValidElement, type ReactNode} from 'react'
 import {isValidElementType} from 'react-is'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {Box} from '../box/box'
 import {Spinner} from '../spinner/spinner'
 import {Text, type TextOwnProps} from '../text/text'
@@ -36,8 +36,6 @@ export type ButtonOwnProps = ButtonStyleProps &
     /** @beta Do not use in production, as this might change.*/
     'loading'?: boolean
     'selected'?: boolean
-    /** @deprecated Use `gap` instead. */
-    'space'?: ResponsiveProp<Space>
     'textAlign'?: ButtonTextAlign
     'muted'?: boolean
     'target'?: string
@@ -56,7 +54,7 @@ export type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props
 /** @public */
 export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
   props: ButtonProps<E>,
-) {
+): React.JSX.Element {
   const {
     align = 'center',
     as: Element = DEFAULT_BUTTON_ELEMENT,
@@ -65,7 +63,7 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     disabled,
     flex,
     fontSize = 1,
-    gap = props.space ?? props.padding ?? 3,
+    gap = props.padding ?? 3,
     gapX,
     gapY,
     icon: IconComponent,
@@ -82,7 +80,6 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     paddingRight,
     radius = 2,
     selected,
-    space = props.gap ?? props.space ?? props.padding ?? 3, // eslint-disable-line @typescript-eslint/no-unused-vars
     text,
     textAlign,
     textOverflow = 'ellipsis',

package/src/core/primitives/button/types.ts

@@ -1,22 +1,2 @@
-import type {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
-
-/**
- * @public
- * @deprecated Use `ThemeColorButtonModeKey` instead
- */
-export type ButtonMode = ThemeColorButtonModeKey
-
 /** @public */
 export type ButtonTextAlign = 'left' | 'right' | 'center'
-
-/**
- * @public
- * @deprecated Use `ThemeColorStateToneKey` instead
- */
-export type ButtonTone = ThemeColorStateToneKey
-
-/**
- * @public
- * @deprecated Use `Width` from `@sanity/ui/css` instead.
- */
-export type ButtonWidth = 'fill'

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

@@ -2,13 +2,13 @@ import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
 
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
-export default function AsButtonStory() {
+export default function AsButtonStory(): React.JSX.Element {
   const tones = Object.entries(WORKSHOP_CARD_TONE_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Container>
-        <Grid columns={3} gap={1}>
+        <Grid gridTemplateColumns={3} gap={1}>
           <Box>
             <Text align="center" size={1} weight="medium">
               Enabled

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

@@ -14,7 +14,7 @@ const CustomLink = forwardRef(function CustomLink(
   )
 })
 
-export default function AsComponentStory() {
+export default function AsComponentStory(): React.JSX.Element {
   const props = {href: '#'}
 
   return (

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

@@ -1,11 +1,11 @@
 import {Card, Flex, Stack, Text} from '@sanity/ui'
-import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
+import {CARD_TONES} from '@sanity/ui/theme'
 
-export default function CheckeredStory() {
+export default function CheckeredStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Stack gap={1}>
-        {THEME_COLOR_CARD_TONES.map((tone) => (
+        {CARD_TONES.map((tone) => (
           <Card
             __unstable_checkered
             border

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

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/card',
   title: 'Card',
   stories: [
@@ -15,4 +15,6 @@ export default defineScope({
     {name: 'as-component', title: 'As component', component: lazy(() => import('./asComponent'))},
     {name: 'selected', title: 'Selected', component: lazy(() => import('./selected'))},
   ],
-})
+}
+
+export default scope

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

@@ -1,7 +1,7 @@
 import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
-export default function InteractiveCardStory() {
+export default function InteractiveCardStory(): React.JSX.Element {
   const pressed = useBoolean('Pressed', false)
   const selected = useBoolean('Selected', false)
 

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

@@ -1,6 +1,6 @@
 import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
 
-export default function ListNavigationStory() {
+export default function ListNavigationStory(): React.JSX.Element {
   return (
     <Box height="fill" padding={[3, 4, 5]} sizing="border">
       <Card height="fill" shadow={1}>

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

@@ -9,7 +9,7 @@ import {
   WORKSHOP_SPACE_OPTIONS,
 } from '$workshop'
 
-export default function PropsStory() {
+export default function PropsStory(): React.JSX.Element {
   const as = useSelect('As', WORKSHOP_CARD_AS_OPTIONS, 'div')
   const border = useBoolean('Border', false)
   const checkered = useBoolean('Checkered', false)

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

@@ -2,7 +2,7 @@ import {EditIcon, PublishIcon} from '@sanity/icons'
 import {Box, Card, Container, Flex, Inline, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
-export default function SelectedStory() {
+export default function SelectedStory(): React.JSX.Element {
   const disabled = useBoolean('Disabled', false)
   const selected = useBoolean('Selected', false)
 

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

@@ -3,7 +3,7 @@ import {styled} from 'styled-components'
 
 const StyledCard = styled(Card).attrs({forwardedAs: 'ol'})``
 
-export default function StyledCardStory() {
+export default function StyledCardStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
       <StyledCard>

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

@@ -1,13 +1,13 @@
 import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
+import {CARD_TONES} from '@sanity/ui/theme'
 
-export default function TonesStory() {
+export default function TonesStory(): React.JSX.Element {
   return (
     <Card height="fill" tone="transparent">
       <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
         <Container width={0}>
           <Stack gap={3}>
-            {THEME_COLOR_CARD_TONES.map((tone) => (
+            {CARD_TONES.map((tone) => (
               <Card
                 key={tone}
                 padding={3}

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

@@ -1,7 +1,7 @@
 import {card, type CardStyleProps} from '@sanity/ui/css'
 import {useContext} from 'react'
 
-import type {Props} from '../../types/props'
+import type {Props} from '../../types'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
 import {CardContext} from './cardContext'
 import {CardProvider} from './cardProvider'
@@ -39,7 +39,9 @@ export type CardProps<E extends CardElementType = CardElementType> = Props<CardO
  *
  * @public
  */
-export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(props: CardProps<E>) {
+export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
+  props: CardProps<E>,
+): React.JSX.Element {
   const {
     __unstable_checkered: checkered = false,
     __unstable_focusRing: focusRing = false,

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

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

package/src/core/primitives/card/cardProvider.tsx

@@ -1,4 +1,4 @@
-import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {CardTone, ColorScheme} from '@sanity/ui/theme'
 import {type ReactNode, useMemo} from 'react'
 
 import {CardContext} from './cardContext'
@@ -7,11 +7,11 @@ import type {_CardCompatProviderComponent} from './types'
 /** @public */
 export function CardProvider(props: {
   children?: ReactNode
-  tone: ThemeColorCardToneKey
-  scheme: ThemeColorSchemeKey
+  tone: CardTone
+  scheme: ColorScheme
   /** @internal */
   unstable_CompatProvider?: _CardCompatProviderComponent
-}) {
+}): React.JSX.Element {
   const {children, tone, scheme, unstable_CompatProvider} = props
 
   return (

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

@@ -1,31 +1,17 @@
-import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {CardTone, ColorScheme} from '@sanity/ui/theme'
 import type {ComponentType, ReactNode} from 'react'
 
-/** @public */
-export type CardTone = ThemeColorCardToneKey | 'inherit'
-
-/**
- * @internal
- * @deprecated Use `CardStyleProps` from `@sanity/ui/css` instead.
- */
-export interface CardStyleProps {
-  $checkered: boolean
-  $focusRing: boolean
-  $muted: boolean
-  $tone: ThemeColorCardToneKey
-}
-
 /** @internal */
 export type _CardCompatProviderComponent = ComponentType<{
   children?: ReactNode
-  tone: ThemeColorCardToneKey
-  scheme: ThemeColorSchemeKey
+  tone: CardTone | 'inherit'
+  scheme: ColorScheme
 }>
 
 /** @public */
 export interface CardContextValue {
-  tone: ThemeColorCardToneKey
-  scheme: ThemeColorSchemeKey
+  tone: CardTone
+  scheme: ColorScheme
   /** @internal */
   unstable_CompatProvider?: _CardCompatProviderComponent
 }

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

@@ -1,7 +1,7 @@
 import {Box, Checkbox, Flex, Text} from '@sanity/ui'
 import {useCallback, useState} from 'react'
 
-export default function ExampleStory() {
+export default function ExampleStory(): React.JSX.Element {
   const [checked, setChecked] = useState<boolean | undefined>(undefined)
   const [indeterminate] = useState(checked === undefined)
   const handleChange = useCallback(() => setChecked((val) => !val), [])

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

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/checkbox',
   title: 'Checkbox',
   stories: [
@@ -10,4 +10,6 @@ export default defineScope({
     {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
     {name: 'multiple-tones', title: 'Multiple tones', component: lazy(() => import('./tones'))},
   ],
-})
+}
+
+export default scope

package/src/core/primitives/checkbox/__workshop__/props.tsx

@@ -1,7 +1,7 @@
 import {Box, Checkbox, Flex, Text} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
-export default function PropsStory() {
+export default function PropsStory(): React.JSX.Element {
   const checked = useBoolean('Checked', false)
   const disabled = useBoolean('Disabled', false)
   const indeterminate = useBoolean('Indeterminate', false)

package/src/core/primitives/checkbox/__workshop__/readOnly.tsx

@@ -1,6 +1,6 @@
 import {Box, Checkbox, Flex, Text} from '@sanity/ui'
 
-export default function ReadOnlyStory() {
+export default function ReadOnlyStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Flex align="center" as="label">

package/src/core/primitives/checkbox/__workshop__/tones.tsx

@@ -1,11 +1,11 @@
 import {Card, Checkbox, Flex, Stack, Text} from '@sanity/ui'
-import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
+import {CARD_TONES} from '@sanity/ui/theme'
 
-export default function MultipleTonesStory() {
+export default function MultipleTonesStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Stack gap={1}>
-        {THEME_COLOR_CARD_TONES.map((tone) => (
+        {CARD_TONES.map((tone) => (
           <Card
             alignItems="center"
             as="label"

package/src/core/primitives/checkbox/checkbox.tsx

@@ -3,7 +3,7 @@ import {checkbox, checkboxInput, checkboxPresentation} from '@sanity/ui/css'
 import {useEffect, useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks/useCustomValidity'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_CHECKBOX_ELEMENT = 'input'
@@ -30,7 +30,7 @@ export type CheckboxProps<E extends CheckboxElementType = CheckboxElementType> =
  */
 export function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(
   props: CheckboxProps<E>,
-) {
+): React.JSX.Element {
   const {
     as: Element = DEFAULT_CHECKBOX_ELEMENT,
     className,

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

@@ -1,7 +1,7 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/code',
   title: 'Code',
   stories: [
@@ -16,4 +16,6 @@ export default defineScope({
       component: lazy(() => import('./opticalAlignment')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/primitives/code/__workshop__/opticalAlignment.tsx

@@ -3,7 +3,7 @@ import {Box, Code, Stack} from '@sanity/ui'
 import {vars} from '@sanity/ui/css'
 import {FONT_CODE_SIZE} from '@sanity/ui/theme'
 
-export default function OpticalAlignment() {
+export default function OpticalAlignment(): React.JSX.Element {
   return (
     <Stack gap={3} padding={[4, 5, 6]}>
       {FONT_CODE_SIZE.map((size) => (

package/src/core/primitives/code/__workshop__/props.tsx

@@ -3,7 +3,7 @@ import {useSelect, useText} from '@sanity/ui-workshop'
 
 import {WORKSHOP_CODE_LANGUAGE_OPTIONS, WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
 
-export default function PropsStory() {
+export default function PropsStory(): React.JSX.Element {
   const code = useText('Code', `console.log('Hello, world')`)
   const language = useSelect('Language', WORKSHOP_CODE_LANGUAGE_OPTIONS, 'typescript')
   const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 1)

package/src/core/primitives/code/code.tsx

@@ -2,7 +2,7 @@ import {code, type CodeStyleProps, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontCodeSize} from '@sanity/ui/theme'
 import {lazy, Suspense} from 'react'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 const LazyRefractor = lazy(() => import('./refractor'))
 
@@ -23,7 +23,9 @@ export type CodeElementType = 'div' | 'pre' | ComponentType
 export type CodeProps<E extends CodeElementType = CodeElementType> = Props<CodeOwnProps, E>
 
 /** @public */
-export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(props: CodeProps<E>) {
+export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
+  props: CodeProps<E>,
+): React.JSX.Element {
   const {
     as: Element = DEFAULT_CODE_ELEMENT,
     children,

package/src/core/primitives/code/refractor.tsx

@@ -4,7 +4,7 @@ export default function LazyRefractor(
   props: Partial<Pick<React.ComponentProps<typeof Refractor>, 'language'>> & {
     value: React.ReactNode
   },
-) {
+): React.JSX.Element {
   const {language: languageProp, value} = props
   const language = typeof languageProp === 'string' ? languageProp : undefined
   const registered = language ? Refractor.hasLanguage(language) : false

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

@@ -3,7 +3,7 @@ import {useAction, useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '$workshop'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 0)
 
   return (

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

@@ -1,8 +1,10 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+const scope: WorkshopScope = {
   name: 'primitives/container',
   title: 'Container',
   stories: [{name: 'plain', title: 'Plain', component: lazy(() => import('./example'))}],
-})
+}
+
+export default scope

package/src/core/primitives/container/container.tsx

@@ -1,6 +1,6 @@
 import {container, type ContainerStyleProps} from '@sanity/ui/css'
 
-import type {Props} from '../../types/props'
+import type {Props} from '../../types'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box/box'
 
 /** @public */
@@ -25,7 +25,7 @@ export type ContainerProps<E extends ContainerElementType = ContainerElementType
  */
 export function Container<E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT>(
   props: ContainerProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_CONTAINER_ELEMENT,
     className,

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

@@ -13,7 +13,7 @@ const DebugCard = styled(Card)`
   justify-content: center;
 `
 
-export default function ExampleStory() {
+export default function ExampleStory(): React.JSX.Element {
   const direction = useSelect('Direction', WORKSHOP_FLEX_DIRECTION_OPTIONS, 'row')
 
   return (

package/src/core/primitives/flex/__workshop__/gap.tsx

@@ -1,6 +1,6 @@
 import {Card, Flex, Text} from '@sanity/ui'
 
-export default function GapStory() {
+export default function GapStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Flex align="center" gap={[1, 2, 3, 4]} justify="center" wrap="wrap">

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

@@ -1,11 +1,13 @@
-import {defineScope} from '@sanity/ui-workshop'
+import type {WorkshopScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
-export default defineScope({
+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'))},
   ],
-})
+}
+
+export default scope