@sanity/ui 3.0.0-static.17 → 3.0.0-static.19

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

@@ -7,12 +7,17 @@ import type {
   ResponsiveProp,
   Width,
 } from '@sanity/ui/css'
-import {button, buttonLoadingBox, composeClassNames} from '@sanity/ui/css'
-import type {FontTextSize, Space} from '@sanity/ui/theme'
+import {_composeClassNames, button, buttonLoadingBox} from '@sanity/ui/css'
+import type {
+  FontTextSize,
+  Space,
+  ThemeColorButtonModeKey,
+  ThemeColorStateToneKey,
+} from '@sanity/ui/theme'
 import {type ElementType as ReactElementType, isValidElement, type ReactNode} from 'react'
 import {isValidElementType} from 'react-is'
 
-import type {ButtonMode, ButtonTextAlign, ButtonTone, ComponentType, Props} from '../../types'
+import type {ButtonTextAlign, ComponentType, Props} from '../../types'
 import {Box} from '../box'
 import {Spinner} from '../spinner'
 import type {TextOwnProps} from '../text'
@@ -30,7 +35,7 @@ export type ButtonOwnProps = ButtonStyleProps &
     'data-ui'?: string
     'disabled'?: boolean
     'fontSize'?: ResponsiveProp<FontTextSize>
-    'mode'?: ButtonMode
+    'mode'?: ThemeColorButtonModeKey
     'icon'?: ReactElementType | ReactNode
     'iconRight'?: ReactElementType | ReactNode
     'justify'?: FlexStyleProps['justify']
@@ -45,7 +50,7 @@ export type ButtonOwnProps = ButtonStyleProps &
     'text'?: ReactNode
     'textOverflow'?: TextOwnProps['textOverflow']
     'textWeight'?: TextOwnProps['weight']
-    'tone'?: ButtonTone
+    'tone'?: ThemeColorStateToneKey
     'width'?: ResponsiveProp<Width>
   }
 
@@ -108,7 +113,7 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     <Element
       data-ui="Button"
       {...rest}
-      className={composeClassNames(className, button({display, flex, radius, width}))}
+      className={_composeClassNames(className, button({display, flex, radius, width}))}
       data-disabled={loading || disabled ? '' : undefined}
       data-mode={mode}
       data-tone={tone}

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

@@ -8,12 +8,12 @@ export default function AsButtonStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Container>
-        <Grid columns={3} gap={2}>
+        <Grid columns={3} gap={1}>
           <Box>
             <Text align="center" size={1} weight="medium">
               Enabled
             </Text>
-            <Stack marginTop={3} space={2}>
+            <Stack marginTop={3} gap={1}>
               {tones.map(([title, tone]) => (
                 <Card
                   __unstable_focusRing
@@ -23,13 +23,16 @@ export default function AsButtonStory() {
                   style={{textAlign: 'center'}}
                   tone={tone}
                 >
-                  <Stack space={2}>
+                  <Stack gap={3}>
                     <Text size={1} weight="medium">
                       {title}
                     </Text>
                     <Text muted size={1}>
                       Muted
                     </Text>
+                    <Text size={1}>
+                      <code>Code</code>
+                    </Text>
                   </Stack>
                 </Card>
               ))}
@@ -40,7 +43,7 @@ export default function AsButtonStory() {
             <Text align="center" size={1} weight="medium">
               Disabled
             </Text>
-            <Stack marginTop={3} space={2}>
+            <Stack marginTop={3} gap={1}>
               {tones.map(([title, tone]) => (
                 <Card
                   __unstable_focusRing
@@ -51,13 +54,16 @@ export default function AsButtonStory() {
                   style={{textAlign: 'center'}}
                   tone={tone}
                 >
-                  <Stack space={2}>
+                  <Stack gap={3}>
                     <Text size={1} weight="medium">
                       {title}
                     </Text>
                     <Text size={1} muted>
                       Muted
                     </Text>
+                    <Text size={1}>
+                      <code>Code</code>
+                    </Text>
                   </Stack>
                 </Card>
               ))}
@@ -68,7 +74,7 @@ export default function AsButtonStory() {
             <Text align="center" size={1} weight="medium">
               Selected
             </Text>
-            <Stack marginTop={3} space={2}>
+            <Stack marginTop={3} gap={1}>
               {tones.map(([title, tone]) => (
                 <Card
                   __unstable_focusRing
@@ -79,13 +85,16 @@ export default function AsButtonStory() {
                   style={{textAlign: 'center'}}
                   tone={tone}
                 >
-                  <Stack space={2}>
+                  <Stack gap={3}>
                     <Text size={1} weight="medium">
                       {title}
                     </Text>
                     <Text size={1} muted>
                       Muted
                     </Text>
+                    <Text size={1}>
+                      <code>Code</code>
+                    </Text>
                   </Stack>
                 </Card>
               ))}

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

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

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

@@ -8,7 +8,7 @@ export default defineScope({
     {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('./allTones'))},
+    {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'))},

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

@@ -16,7 +16,7 @@ export default function InteractiveCardStory() {
           selected={selected}
           tabIndex={0}
         >
-          <Stack space={3}>
+          <Stack gap={3}>
             <Text>
               Text <code>Code</code>
             </Text>

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

@@ -21,7 +21,7 @@ export default function ListNavigationStory() {
 
 function List1() {
   return (
-    <Stack space={1}>
+    <Stack gap={1}>
       <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
         <Preview />
       </Card>
@@ -43,7 +43,7 @@ function List1() {
 
 function List2() {
   return (
-    <Stack space={1}>
+    <Stack gap={1}>
       <Card __unstable_focusRing as="a" href="#" padding={2} radius={2}>
         <Preview />
       </Card>
@@ -67,7 +67,7 @@ function Preview() {
   return (
     <Flex align="center" gap={2}>
       <Skeleton radius="full" style={{width: 33, height: 33}} />
-      <Stack flex={1} space={2}>
+      <Stack flex={1} gap={2}>
         <Text size={1} weight="medium">
           Preview
         </Text>

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

@@ -1,4 +1,4 @@
-import {Card, Flex, Radius, Stack, Text} from '@sanity/ui'
+import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {
@@ -31,12 +31,12 @@ export default function PropsStory() {
         onClick={useAction('onClick')}
         padding={padding}
         pressed={pressed}
-        radius={radius as Radius}
+        radius={radius}
         selected={selected}
         shadow={shadow}
         tone={tone}
       >
-        <Stack space={3}>
+        <Stack gap={3}>
           <Text size={1}>
             Card with <code>padding={padding}</code>, <code>tone={tone}</code>, and{' '}
             <code>shadow={shadow}</code>.

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

@@ -9,7 +9,7 @@ export default function SelectedStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
       <Container width={0}>
-        <Stack space={1}>
+        <Stack gap={1}>
           <Card
             __unstable_focusRing
             as="button"
@@ -44,7 +44,7 @@ function Preview({selected}: {selected: boolean}) {
       <Box flex={1}>
         <Text size={1}>Title</Text>
       </Box>
-      <Inline space={3}>
+      <Inline gap={3}>
         <Text data-selected={selected ? '' : undefined} muted size={1} weight="medium">
           <EditIcon />
         </Text>

package/src/core/primitives/card/__workshop__/{allTones.tsx → tones.tsx}

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

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

@@ -1,7 +1,7 @@
-import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
+import {_composeClassNames, card, type CardStyleProps} from '@sanity/ui/css'
 
-import {Props} from '../../types'
-import {Box, BoxElementType, BoxOwnProps} from '../box'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 import {CardProvider} from './cardProvider'
 import {useCard} from './useCard'
 
@@ -64,7 +64,7 @@ export function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(pr
       data-ui="Card"
       {...rest}
       as={as}
-      className={composeClassNames(
+      className={_composeClassNames(
         className,
         card({
           scheme: scheme === parent?.scheme ? undefined : scheme,

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

@@ -1,7 +1,7 @@
-import {Context} from 'react'
+import type {Context} from 'react'
 
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {CardContextValue} from './types'
+import type {CardContextValue} from './types'
 
 /**
  * @internal

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

@@ -1,8 +1,8 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {ReactNode, useMemo} from 'react'
+import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {type ReactNode, useMemo} from 'react'
 
 import {CardContext} from './cardContext'
-import {_CardCompatProviderComponent} from './types'
+import type {_CardCompatProviderComponent} from './types'
 
 export function CardProvider(props: {
   children?: ReactNode

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

@@ -1,5 +1,5 @@
-import {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {ComponentType, ReactNode} from 'react'
+import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {ComponentType, ReactNode} from 'react'
 
 /**
  * @internal

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

@@ -1,7 +1,8 @@
 import {useContext} from 'react'
 
 import {CardContext} from './cardContext'
+import type {CardContextValue} from './types'
 
-export function useCard() {
+export function useCard(): CardContextValue | null {
   return useContext(CardContext)
 }

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

@@ -5,6 +5,7 @@ export default function PropsStory() {
   const checked = useBoolean('Checked', false, 'Props')
   const disabled = useBoolean('Disabled', false, 'Props')
   const indeterminate = useBoolean('Indeterminate', false, 'Props')
+  const invalid = useBoolean('Invalid', false, 'Props')
   const onChange = useAction('onChange')
   const onFocus = useAction('onFocus')
   const onBlur = useAction('onBlur')
@@ -15,6 +16,7 @@ export default function PropsStory() {
       <Flex align="center" as="label">
         <Checkbox
           checked={checked}
+          customValidity={invalid ? 'Invalid' : undefined}
           disabled={disabled}
           indeterminate={indeterminate}
           onChange={onChange}

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

@@ -1,27 +1,18 @@
-import {Card, Checkbox, Flex, Stack} from '@sanity/ui'
+import {Card, Checkbox, Flex, Stack, Text} from '@sanity/ui'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
 
 export default function MultipleTonesStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
-      <Stack>
-        <Card padding={3} tone="neutral">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="primary">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="suggest">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="positive">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="caution">
-          <Checkbox />
-        </Card>
-        <Card padding={3} tone="critical">
-          <Checkbox />
-        </Card>
+      <Stack gap={1}>
+        {THEME_COLOR_CARD_TONES.map((tone) => (
+          <Card align="center" as="label" display="flex" gap={2} padding={3} radius={3} tone={tone}>
+            <Checkbox />
+            <Text muted size={1}>
+              {tone}
+            </Text>
+          </Card>
+        ))}
       </Stack>
     </Flex>
   )

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

@@ -1,9 +1,9 @@
 import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
-import {checkbox, checkboxInput, composeClassNames} from '@sanity/ui/css'
+import {_composeClassNames, checkbox, checkboxInput} from '@sanity/ui/css'
 import {useEffect, useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks'
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_CHECKBOX_ELEMENT = 'input'
@@ -61,14 +61,12 @@ export function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX
   useCustomValidity(ref, customValidity)
 
   return (
-    <span className={composeClassNames(className, checkbox())} data-ui="Checkbox" style={style}>
+    <span className={_composeClassNames(className, checkbox())} data-ui="Checkbox" style={style}>
       <Element
         {...rest}
         checked={checked}
-        className={composeClassNames(className, checkboxInput())}
-        data-disabled={disabled ? '' : undefined}
-        data-read-only={!disabled && readOnly ? '' : undefined}
-        data-error={customValidity ? '' : undefined}
+        className={_composeClassNames(className, checkboxInput())}
+        data-invalid={customValidity ? '' : undefined}
         disabled={disabled || readOnly}
         type="checkbox"
         readOnly={readOnly}

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

@@ -4,7 +4,7 @@ import {Box, Card, Code, Flex, Stack} from '@sanity/ui'
 export default function OpticalAlignment() {
   return (
     <Box padding={[4, 5, 6]}>
-      <Stack space={1}>
+      <Stack gap={1}>
         <Flex>
           <Card padding={0} scheme="dark">
             <Code size={4}>Hamburgefonstiv M</Code>

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

@@ -1,7 +1,7 @@
-import {code, composeClassNames, FontStyleProps} from '@sanity/ui/css'
+import {_composeClassNames, code, type FontStyleProps} from '@sanity/ui/css'
 import {lazy, Suspense} from 'react'
 
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
 const LazyRefractor = lazy(() => import('./refractor'))
 
@@ -39,7 +39,7 @@ export function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(pr
     <Element
       data-ui="Code"
       {...rest}
-      className={composeClassNames(className, code({size, weight}))}
+      className={_composeClassNames(className, code({size, weight}))}
     >
       <Suspense fallback={<code>{children}</code>}>
         <LazyRefractor language={language} value={children} />

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

@@ -1,7 +1,7 @@
-import {composeClassNames, container, ContainerStyleProps} from '@sanity/ui/css'
+import {_composeClassNames, container, type ContainerStyleProps} from '@sanity/ui/css'
 
-import {Props} from '../../types'
-import {Box, BoxElementType, BoxOwnProps} from '../box'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
 /** @public */
 export const DEFAULT_CONTAINER_ELEMENT = 'div'
@@ -38,7 +38,7 @@ export function Container<E extends ContainerElementType = typeof DEFAULT_CONTAI
       data-ui="Container"
       {...rest}
       as={as}
-      className={composeClassNames(className, container({width}))}
+      className={_composeClassNames(className, container({width}))}
     />
   )
 }

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

@@ -1,5 +1,5 @@
-import {Props} from '../../types'
-import {Box, BoxElementType, BoxOwnProps} from '../box'
+import type {Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
 /** @public */
 export const DEFAULT_FLEX_ELEMENT = 'div'

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

@@ -4,7 +4,7 @@ import {Box, Card, Flex, Heading, Stack} from '@sanity/ui'
 export default function OpticalAlignment() {
   return (
     <Box padding={[4, 5, 6]}>
-      <Stack space={1}>
+      <Stack gap={1}>
         <Flex>
           <Card padding={0} tone="neutral">
             <Heading size={5}>Hamburgefonstiv M</Heading>

package/src/core/primitives/heading/heading.tsx

@@ -1,5 +1,5 @@
 import {
-  composeClassNames,
+  _composeClassNames,
   heading,
   type HeadingStyleProps,
   textOverflow,
@@ -59,7 +59,7 @@ export function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_EL
     <Element
       data-ui="Heading"
       {...rest}
-      className={composeClassNames(
+      className={_composeClassNames(
         className,
         heading({
           accent,

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

@@ -7,8 +7,8 @@ export default function PlainStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Inline
+        gap={useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}
         onClick={useAction('onClick')}
-        space={useSelect('Space', WORKSHOP_SPACE_OPTIONS, 0, 'Props')}
       >
         <Card padding={1} shadow={1}>
           <Text size={1}>Inline item</Text>

package/src/core/primitives/inline/inline.tsx

@@ -1,5 +1,5 @@
-import {FlexStyleProps, GridStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
+import type {FlexStyleProps, GridStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
 
 import type {Props} from '../../types'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box'

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

@@ -1,5 +1,6 @@
 /**
  * @internal
+ * @deprecated Use `GapStyleProps` from `@sanity/ui/css` instead.
  */
 export interface ResponsiveInlineSpaceStyleProps {
   $space: number[]

package/src/core/primitives/kbd/kbd.tsx

@@ -1,8 +1,8 @@
-import {composeClassNames, kbd, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize} from '@sanity/ui/theme'
+import {_composeClassNames, kbd, type RadiusStyleProps, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontTextSize} from '@sanity/ui/theme'
 
-import {ComponentType, Props} from '../../types'
-import {Box, BoxElementType, BoxOwnProps} from '../box'
+import type {ComponentType, Props} from '../../types'
+import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 import {Text} from '../text'
 
 /** @public */
@@ -42,7 +42,7 @@ export function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(props
       data-ui="KBD"
       {...rest}
       as={as as BoxElementType}
-      className={composeClassNames(className, kbd({radius}))}
+      className={_composeClassNames(className, kbd({radius}))}
       display={display}
       muted
       padding={padding}

package/src/core/primitives/label/label.tsx

@@ -1,12 +1,12 @@
 import {
-  composeClassNames,
+  _composeClassNames,
   label,
-  LabelStyleProps,
+  type LabelStyleProps,
   textOverflow,
-  TextOverflowStyleProps,
+  type TextOverflowStyleProps,
 } from '@sanity/ui/css'
 
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_LABEL_ELEMENT = 'div'
@@ -57,7 +57,7 @@ export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>
     <Element
       data-ui="Label"
       {...rest}
-      className={composeClassNames(
+      className={_composeClassNames(
         className,
         label({
           accent,

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

@@ -1,4 +1,4 @@
-import {Button, Card, Popover, PortalProvider, Radius, Text} from '@sanity/ui'
+import {Button, Card, Popover, PortalProvider, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useState} from 'react'
 
@@ -57,7 +57,7 @@ export default function PlainStory() {
               placement={placement}
               portal={portal}
               preventOverflow={preventOverflow}
-              radius={radius as Radius}
+              radius={radius}
               width={width}
             >
               <Button text="This button is the popover reference" />

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

@@ -1,5 +1,5 @@
-import {Button, Flex, LayerProvider, Placement, Popover, useLayer} from '@sanity/ui'
-import {ThemeColorToneKey} from '@sanity/ui/theme'
+import {Button, Flex, LayerProvider, type Placement, Popover, useLayer} from '@sanity/ui'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
 export default function RecursiveStory() {
@@ -13,7 +13,6 @@ export default function RecursiveStory() {
 }
 
 const placements: Placement[] = ['top', 'right', 'bottom', 'left']
-const tones: ThemeColorToneKey[] = ['primary', 'positive', 'caution', 'critical']
 
 function RecursiveExample({onClose}: {onClose?: () => void}) {
   const [open, setOpen] = useState(false)
@@ -56,7 +55,7 @@ function RecursiveExample({onClose}: {onClose?: () => void}) {
       padding={1}
       placement={fallbackPlacements[3]}
       portal
-      tone={tones[seed]}
+      tone={THEME_COLOR_CARD_TONES[seed]}
     >
       <Button
         mode="bleed"

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

@@ -2,15 +2,15 @@ import {useSelect} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useRef, useState} from 'react'
 
 import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../../../workshop/constants'
-import {CardTone} from '../../../types'
+import type {CardTone} from '../../../types'
 import {BoundaryElementProvider} from '../../../utils'
 import {Box} from '../../box'
 import {Card} from '../../card'
 import {Flex} from '../../flex'
 import {Stack} from '../../stack'
 import {Text} from '../../text'
-import {Popover, PopoverProps} from '../popover'
-import {PopoverUpdateCallback} from '../types'
+import {Popover, type PopoverProps} from '../popover'
+import type {PopoverUpdateCallback} from '../types'
 
 const SIDE_PANEL_WIDTH = {
   sm: 300,
@@ -38,7 +38,7 @@ export default function SidePanelStory() {
       </Card>
       <BoundaryElementProvider element={sidePanel}>
         <Card borderLeft flex="none" ref={setSidePanel} style={{width: sidePanelWidth}} width={0}>
-          <Stack padding={4} space={5}>
+          <Stack gap={5} padding={4}>
             <Text muted size={1}>
               Click the <code>reference</code> text below to toggle the popover.
             </Text>