@sanity/ui 3.0.0-static.2 → 3.0.0-static.20

package/src/core/components/autocomplete/autocomplete.tsx

@@ -1,17 +1,15 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
+import type {ResponsiveProp} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
 import {
-  ChangeEvent,
+  type ChangeEvent,
   cloneElement,
-  ElementType,
-  FocusEvent,
-  ForwardedRef,
-  forwardRef,
-  KeyboardEvent,
-  MouseEvent,
-  ReactElement,
-  ReactNode,
+  type ElementType,
+  type FocusEvent,
+  type ForwardedRef,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -25,17 +23,18 @@ import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
 import {useArrayProp} from '../../hooks'
 import {
   Box,
-  BoxProps,
+  type BoxProps,
   Button,
   Card,
   Popover,
-  PopoverProps,
+  type PopoverProps,
   Stack,
   Text,
   TextInput,
+  type TextInputOwnProps,
 } from '../../primitives'
 import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
-import {Props, Radius} from '../../types'
+import type {ComponentType, Props, Radius} from '../../types'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
@@ -43,58 +42,62 @@ import {
   AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS,
   AUTOCOMPLETE_POPOVER_PLACEMENT,
 } from './constants'
-import {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'
-
-/**
- * @public
- */
-export interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {
-  border?: boolean
-  customValidity?: string
-  disabled?: boolean
-  filterOption?: (query: string, option: Option) => boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  icon?: ElementType | ReactNode
-  id: string
-  /** @beta */
-  listBox?: BoxProps
-  loading?: boolean
-  onChange?: (value: string) => void
-  onQueryChange?: (query: string | null) => void
-  onSelect?: (value: string) => void
-  /** @beta */
-  openButton?: boolean | AutocompleteOpenButtonProps
-  /** @beta */
-  openOnFocus?: boolean
-  /** The options to render. */
-  options?: Option[]
-  padding?: ResponsiveProp<Space>
-  // padding?: number | number[]
-  popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
-  prefix?: ReactNode
-  radius?: Radius | Radius[]
-  readOnly?: boolean
-  ref?: ForwardedRef<HTMLInputElement>
-  /** @beta */
-  relatedElements?: HTMLElement[]
-  /** The callback function for rendering each option. */
-  renderOption?: (option: Option) => React.JSX.Element
-  /** @beta */
-  renderPopover?: (
-    props: {
-      content: React.JSX.Element | null
-      hidden: boolean
-      inputElement: HTMLInputElement | null
-      onMouseEnter: () => void
-      onMouseLeave: () => void
-    },
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => ReactNode
-  renderValue?: (value: string, option?: Option) => string
-  suffix?: ReactNode
-  /** The current value. */
-  value?: string
-}
+import type {AutocompleteOpenButtonProps, BaseAutocompleteOption} from './types'
+
+/** @public */
+export const DEFAULT_AUTOCOMPLETE_ELEMENT = 'input'
+
+/** @public */
+export type AutocompleteOwnProps<O extends BaseAutocompleteOption = BaseAutocompleteOption> =
+  TextInputOwnProps & {
+    border?: boolean
+    customValidity?: string
+    filterOption?: (query: string, option: O) => boolean
+    icon?: ElementType | ReactNode
+    /** @beta */
+    listBox?: BoxProps
+    loading?: boolean
+    onChange?: (value: string) => void
+    onQueryChange?: (query: string | null) => void
+    onSelect?: (value: string) => void
+    /** @beta */
+    openButton?: boolean | AutocompleteOpenButtonProps
+    /** @beta */
+    openOnFocus?: boolean
+    /** The options to render. */
+    options?: O[]
+    padding?: ResponsiveProp<Space>
+    popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
+    prefix?: ReactNode
+    radius?: Radius | Radius[]
+    /** @beta */
+    relatedElements?: HTMLElement[]
+    /** The callback function for rendering each option. */
+    renderOption?: (option: O) => React.JSX.Element
+    /** @beta */
+    renderPopover?: (
+      props: {
+        content: React.JSX.Element | null
+        hidden: boolean
+        inputElement: HTMLInputElement | null
+        onMouseEnter: () => void
+        onMouseLeave: () => void
+      },
+      ref: ForwardedRef<HTMLDivElement>,
+    ) => ReactNode
+    renderValue?: (value: string, option?: O) => string
+    suffix?: ReactNode
+    value?: string
+  }
+
+/** @public */
+export type AutocompleteElementType = 'input' | ComponentType
+
+/** @public */
+export type AutocompleteProps<
+  E extends AutocompleteElementType = AutocompleteElementType,
+  O extends BaseAutocompleteOption = BaseAutocompleteOption,
+> = Props<AutocompleteOwnProps<O>, E>
 
 const DEFAULT_RENDER_VALUE = (value: string, option?: BaseAutocompleteOption) =>
   option ? option.value : value
@@ -102,32 +105,23 @@ const DEFAULT_RENDER_VALUE = (value: string, option?: BaseAutocompleteOption) =>
 const DEFAULT_FILTER_OPTION = (query: string, option: BaseAutocompleteOption) =>
   option.value.toLowerCase().indexOf(query.toLowerCase()) > -1
 
-const InnerAutocomplete = forwardRef(function InnerAutocomplete<
-  Option extends BaseAutocompleteOption,
->(
-  props: Omit<
-    Props<AutocompleteProps<Option>, 'div'>,
-    | 'aria-activedescendant'
-    | 'aria-autocomplete'
-    | 'aria-expanded'
-    | 'aria-owns'
-    | 'as'
-    | 'autoCapitalize'
-    | 'autoComplete'
-    | 'autoCorrect'
-    | 'inputMode'
-    | 'role'
-    | 'spellCheck'
-    | 'type'
-  >,
-  forwardedRef: ForwardedRef<HTMLInputElement>,
-) {
+/**
+ * The Autocomplete component is typically used for search components.
+ * It consists of a text input for writing a query, and properties for rendering suggestions.
+ *
+ * @public
+ */
+export function Autocomplete<
+  E extends AutocompleteElementType = typeof DEFAULT_AUTOCOMPLETE_ELEMENT,
+  O extends BaseAutocompleteOption = BaseAutocompleteOption,
+>(props: AutocompleteProps<E, O>) {
   const {
+    as = DEFAULT_AUTOCOMPLETE_ELEMENT,
     border = true,
     customValidity,
     disabled,
     filterOption: filterOptionProp,
-    fontSize = 1,
+    fontSize = 2,
     icon,
     id,
     listBox = EMPTY_RECORD,
@@ -145,14 +139,15 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     prefix,
     radius = 2,
     readOnly,
+    ref: forwardedRef,
     relatedElements,
     renderOption: renderOptionProp,
     renderPopover,
     renderValue = DEFAULT_RENDER_VALUE,
     suffix,
     value: valueProp,
-    ...restProps
-  } = props
+    ...rest
+  } = props as AutocompleteProps<typeof DEFAULT_AUTOCOMPLETE_ELEMENT, O>
 
   const [state, dispatch] = useReducer(autocompleteReducer, {
     activeValue: valueProp || null,
@@ -166,13 +161,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const defaultRenderOption = useCallback(
     ({value}: BaseAutocompleteOption) => (
-      <Card
-        as="button"
-        // data-as="button"
-        padding={paddingProp}
-        radius={2}
-        tone="inherit"
-      >
+      <Card as="button" padding={paddingProp} radius={2} tone="inherit">
         <Text size={fontSize} textOverflow="ellipsis">
           {value}
         </Text>
@@ -191,7 +180,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   const rootElementRef = useRef<HTMLDivElement | null>(null)
   const resultsPopoverElementRef = useRef<HTMLDivElement | null>(null)
   const inputElementRef = useRef<HTMLInputElement | null>(null)
-  const listBoxElementRef = useRef<HTMLDivElement | null>(null)
+  const listBoxElementRef = useRef<HTMLUListElement | null>(null)
 
   // Value refs
   const listFocusedRef = useRef(false)
@@ -540,7 +529,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const input = (
     <TextInput
-      {...restProps}
+      {...rest}
       aria-activedescendant={activeItemId}
       aria-autocomplete="list"
       aria-expanded={expanded}
@@ -548,6 +537,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       autoCapitalize="off"
       autoComplete="off"
       autoCorrect="off"
+      as={as}
       border={border}
       clearButton={clearButton}
       customValidity={customValidity}
@@ -597,10 +587,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
           as="ul"
           aria-multiselectable={false}
           data-ui="AutoComplete__resultsList"
+          gap={1}
           id={listBoxId}
           ref={listBoxElementRef}
           role="listbox"
-          space={1}
         >
           {filteredOptions.map((option) => {
             const active =
@@ -670,7 +660,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
         overflow="auto"
         placement={AUTOCOMPLETE_POPOVER_PLACEMENT}
         portal
-        radius={radius}
+        radius={3}
         ref={resultsPopoverElementRef}
         referenceElement={inputElementRef.current}
         {...popover}
@@ -683,7 +673,6 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
     popover,
-    radius,
     renderPopover,
   ])
 
@@ -700,29 +689,6 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
       {results}
     </div>
   )
-})
-
-InnerAutocomplete.displayName = 'ForwardRef(Autocomplete)'
+}
 
-/**
- * The Autocomplete component is typically used for search components.
- * It consists of a text input for writing a query, and properties for rendering suggestions.
- *
- * @public
- */
-export const Autocomplete = InnerAutocomplete as <Option extends BaseAutocompleteOption>(
-  props: Omit<
-    Props<AutocompleteProps<Option>, 'input'>,
-    | 'aria-activedescendant'
-    | 'aria-autocomplete'
-    | 'aria-expanded'
-    | 'aria-owns'
-    | 'autoCapitalize'
-    | 'autoComplete'
-    | 'autoCorrect'
-    | 'inputMode'
-    | 'role'
-    | 'spellCheck'
-    | 'type'
-  >,
-) => ReactElement
+Autocomplete.displayName = 'Autocomplete'

package/src/core/components/autocomplete/autocompleteOption.tsx

@@ -1,4 +1,4 @@
-import {KeyboardEvent, ReactElement, ReactNode, useCallback} from 'react'
+import {type KeyboardEvent, type ReactElement, type ReactNode, useCallback} from 'react'
 
 import {_isEnterToClickElement} from '../../helpers'
 
@@ -43,3 +43,5 @@ export function AutocompleteOption(props: AutocompleteOptionProps): ReactElement
     </li>
   )
 }
+
+AutocompleteOption.displayName = 'AutocompleteOption'

package/src/core/components/autocomplete/autocompleteReducer.ts

@@ -1,4 +1,4 @@
-import {AutocompleteMsg, AutocompleteState} from './types'
+import type {AutocompleteMsg, AutocompleteState} from './types'
 
 /**
  * @internal

package/src/core/components/autocomplete/constants.ts

@@ -1,4 +1,4 @@
-import {Placement} from '../../types'
+import type {Placement} from '../../types'
 
 /**
  * @internal

package/src/core/components/autocomplete/types.ts

@@ -1,14 +1,9 @@
-import {ButtonProps} from '../../primitives'
-import {Props} from '../../types'
+import type {ButtonProps} from '../../primitives'
 
-/**
- * @public
- */
-export type AutocompleteOpenButtonProps = Omit<Props<ButtonProps, 'button'>, 'as'>
+/** @public */
+export type AutocompleteOpenButtonProps = Omit<ButtonProps<'button'>, 'as'>
 
-/**
- * @public
- */
+/** @public */
 export interface BaseAutocompleteOption {
   value: string
 }

package/src/core/components/breadcrumbs/__workshop__/example.tsx

@@ -13,19 +13,18 @@ const BREADCRUMBS_MAX_LENGTH_OPTIONS = {
 }
 
 export default function Example() {
-  const maxLength =
-    useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS, 0, 'Props') || undefined
+  const maxLength = useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS)
 
   return (
     <Flex align="center" height="fill" justify="center">
       <Breadcrumbs
+        gap={2}
         maxLength={maxLength}
         separator={
           <Text muted size={1}>
             /
           </Text>
         }
-        space={2}
       >
         <Text size={1}>
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -1,12 +1,10 @@
-import {breadcrumbs, composeClassNames, GapStyleProps} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
+import {_composeClassNames, breadcrumbs, type GapStyleProps} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
 import {
   Children,
-  ForwardedRef,
-  forwardRef,
   Fragment,
   isValidElement,
-  ReactNode,
+  type ReactNode,
   useCallback,
   useMemo,
   useRef,
@@ -14,28 +12,36 @@ import {
 } from 'react'
 
 import {useClickOutsideEvent} from '../../hooks'
-import {Box, Button, ButtonProps, Flex, Popover, Stack, Text} from '../../primitives'
-import {Props} from '../../types'
-
-/**
- * @beta
- */
-export interface BreadcrumbsProps extends GapStyleProps {
-  expandButton?: Omit<ButtonProps, 'onClick' | 'selected'>
+import {Box, Button, type ButtonProps, Flex, Popover, Stack, Text} from '../../primitives'
+import type {ComponentType, Props} from '../../types'
+
+/** @beta */
+export const DEFAULT_BREADCRUMBS_ELEMENT = 'nav'
+
+/** @beta */
+export type BreadcrumbsOwnProps = GapStyleProps & {
+  expandButton?: Omit<ButtonProps<'button'>, 'as' | 'onClick' | 'selected'>
   maxLength?: number
   separator?: ReactNode
   /** @deprecated - Use `gap`, `gapX`, `gapY` instead */
   space?: number | number[]
 }
 
-/**
- * @beta
- */
-export const Breadcrumbs = forwardRef(function Breadcrumbs(
-  props: Props<BreadcrumbsProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+/** @beta */
+export type BreadcrumbsElementType = 'div' | 'nav' | ComponentType
+
+/** @beta */
+export type BreadcrumbsProps<E extends BreadcrumbsElementType = BreadcrumbsElementType> = Props<
+  BreadcrumbsOwnProps,
+  E
+>
+
+/** @beta */
+export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BREADCRUMBS_ELEMENT>(
+  props: BreadcrumbsProps<E>,
 ) {
   const {
+    as = DEFAULT_BREADCRUMBS_ELEMENT,
     children,
     className,
     expandButton: expandButtonProps,
@@ -47,8 +53,9 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
     separator,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     space: _spaceProp,
-    ...restProps
-  } = props
+    ...rest
+  } = props as BreadcrumbsProps<typeof DEFAULT_BREADCRUMBS_ELEMENT>
+
   const [open, setOpen] = useState(false)
   const expandElementRef = useRef<HTMLButtonElement | null>(null)
   const popoverElementRef = useRef<HTMLDivElement | null>(null)
@@ -72,7 +79,7 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
         <Popover
           constrainSize
           content={
-            <Stack as="ol" overflow="auto" space={gapY}>
+            <Stack as="ol" gap={gapY} overflow="auto">
               {rawItems.slice(beforeLength - 1, len - afterLength)}
             </Stack>
           }
@@ -102,13 +109,12 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
 
   return (
     <Flex
-      as="nav"
+      as={as}
       data-ui="Breadcrumbs"
-      {...restProps}
-      className={composeClassNames(className, breadcrumbs())}
+      {...rest}
+      className={_composeClassNames(className, breadcrumbs())}
       gapX={gapX}
       gapY={gapY}
-      ref={ref}
     >
       {items.map((item, itemIndex) => (
         <Fragment key={itemIndex}>
@@ -122,6 +128,6 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
       ))}
     </Flex>
   )
-})
+}
 
-Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'
+Breadcrumbs.displayName = 'Breadcrumbs'

package/src/core/components/dialog/__workshop__/activate.tsx

@@ -28,7 +28,7 @@ export default function LayeringFocusStory() {
               onActivate={({activeElement}) => activeElement?.focus()}
               onClose={() => setFirstDialogOpen(false)}
             >
-              <Stack space={2} padding={3}>
+              <Stack gap={2} padding={3}>
                 <Button
                   mode="ghost"
                   text="Open dialog 2"
@@ -56,7 +56,7 @@ export default function LayeringFocusStory() {
                   onActivate={({activeElement}) => activeElement?.focus()}
                   onClose={() => setSecondDialogOpen(false)}
                 >
-                  <Stack space={2} padding={3}>
+                  <Stack gap={2} padding={3}>
                     <Button
                       mode="ghost"
                       text="Open dialog 3"
@@ -84,7 +84,7 @@ export default function LayeringFocusStory() {
                       onActivate={({activeElement}) => activeElement?.focus()}
                       onClose={() => setThirdDialogOpen(false)}
                     >
-                      <Stack space={2} padding={3}>
+                      <Stack gap={2} padding={3}>
                         <MenuButton
                           id="menu"
                           button={
@@ -116,7 +116,7 @@ export default function LayeringFocusStory() {
                           onActivate={({activeElement}) => activeElement?.focus()}
                           onClose={() => setFourthDialogOpen(false)}
                         >
-                          <Stack space={2} padding={3}>
+                          <Stack gap={2} padding={3}>
                             <Text>👋</Text>
                           </Stack>
                         </Dialog>

package/src/core/components/dialog/__workshop__/autoFocus.tsx

@@ -2,8 +2,8 @@ import {Box, Button, Dialog, Text} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
 export default function AutoFocusStory() {
-  const autoFocus = useBoolean('Auto-focus', true, 'Props')
-  const open = useBoolean('Open', false, 'Props')
+  const autoFocus = useBoolean('Auto-focus', true)
+  const open = useBoolean('Open', false)
   const handleClose = useAction('onClose')
 
   if (!open) {

package/src/core/components/dialog/__workshop__/onScroll.tsx

@@ -1,4 +1,4 @@
-import {Box, Dialog, LayerProvider, Text} from '@sanity/ui'
+import {Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useAction} from '@sanity/ui-workshop'
 import {useEffect, useRef} from 'react'
 
@@ -19,8 +19,8 @@ export default function OnScrollStory() {
   return (
     <LayerProvider>
       <Dialog contentRef={ref} header="On scroll example" id="on-scroll-example">
-        <Box padding={4} paddingTop={1}>
-          <Text muted>
+        <Stack gap={4} padding={4} paddingTop={1}>
+          <Text muted size={1}>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
             hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi
             imperdiet quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis,
@@ -32,7 +32,19 @@ export default function OnScrollStory() {
             mattis tristique nunc ac lacinia. Vestibulum non pulvinar turpis, posuere consequat
             arcu. Fusce ut urna blandit, finibus nisi a, molestie elit. Nulla sed eleifend mi.
           </Text>
-        </Box>
+
+          <Text muted size={1}>
+            Aliquam quis finibus ex. Fusce semper lorem sed orci tempor gravida. Cras dui urna,
+            congue quis ipsum in, viverra facilisis libero. Vivamus vehicula libero quam, at posuere
+            leo ornare imperdiet. Cras eu neque eu tellus scelerisque iaculis ac id ex. Vestibulum
+            quam enim, lacinia ac ultricies at, molestie ut nisi. Vivamus vitae elit vel ante
+            feugiat iaculis. Pellentesque vel diam volutpat, luctus magna at, laoreet tellus.
+            Aliquam congue id nisi at sollicitudin. In sed nisi libero. Nulla ornare, mauris et
+            pulvinar hendrerit, ligula leo auctor enim, vestibulum laoreet metus nisl a nulla. Sed
+            et interdum sapien. Mauris lacinia interdum nisi quis ultrices. Etiam lobortis, dui
+            semper ornare fringilla, felis lacus feugiat dui, vitae rhoncus tellus tortor ut ipsum.
+          </Text>
+        </Stack>
       </Dialog>
     </LayerProvider>
   )

package/src/core/components/dialog/__workshop__/position.tsx

@@ -2,16 +2,16 @@ import {ArrowDownIcon, ArrowUpIcon} from '@sanity/icons'
 import {Box, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '$workshop'
 
 export default function PositionStory() {
-  const open = useBoolean('Open', true, 'Props')
-  const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS, 'fixed', 'Props')
+  const open = useBoolean('Open', true)
+  const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS)
 
   return (
     <Box padding={4}>
       <Box style={{padding: 'calc(100vh - 100px) 0'}}>
-        <Stack space={3}>
+        <Stack gap={3}>
           <Text align="center">
             <ArrowUpIcon />
           </Text>

package/src/core/components/dialog/__workshop__/props.tsx

@@ -2,14 +2,14 @@ import {Box, Button, Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useCallback, useRef, useState} from 'react'
 
-import {WORKSHOP_WIDTH_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '$workshop'
 
 export default function PropsStory() {
-  const animate = useBoolean('Animate', false, 'Props')
-  const header = useText('Header', 'Props example', 'Props')
-  const onClickOutside = useBoolean('Close when click outside', false, 'Props') || false
-  const hideCloseButton = useBoolean('Hide close button', false, 'Props') || false
-  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 0, 'Props')
+  const animate = useBoolean('Animate', false)
+  const header = useText('Header', 'Props example')
+  const onClickOutside = useBoolean('Close when click outside', false)
+  const hideCloseButton = useBoolean('Hide close button', false)
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS)
   const [open, setOpen] = useState(false)
   const buttonRef = useRef<HTMLButtonElement | null>(null)
 
@@ -40,7 +40,7 @@ export default function PropsStory() {
             width={width}
           >
             <Box padding={4}>
-              <Stack space={4}>
+              <Stack gap={4}>
                 <Text>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et orci vitae diam
                   aliquet imperdiet.

package/src/core/components/dialog/__workshop__/wrapped.tsx

@@ -1,5 +1,5 @@
-import {Box, Button, Dialog, DialogProps, LayerProvider, useLayer} from '@sanity/ui'
-import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
+import {Box, Button, Dialog, type DialogProps, LayerProvider, useLayer} from '@sanity/ui'
+import {type ReactNode, useCallback, useEffect, useRef, useState} from 'react'
 
 export default function WrappedStory() {
   return (