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

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

@@ -1,5 +1,6 @@
 import {
   arrow,
+  autoPlacement,
   autoUpdate,
   flip,
   hide,
@@ -28,8 +29,7 @@ import {Z_OFFSETS} from '../../constants'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {origin} from '../../middleware/origin'
-import type {Placement} from '../../types/placement'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Placement, Props} from '../../types'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
 import {getElementRef} from '../../utils/getElementRef'
 import {Portal} from '../../utils/portal/portal'
@@ -62,8 +62,6 @@ export type PopoverOwnProps = Omit<LayerOwnProps, 'maxWidth'> & {
    */
   animate?: boolean
   arrow?: boolean
-  /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
-  boundaryElement?: HTMLElement | null
   children?: ReactElement<{ref: ForwardedRef<HTMLElement>}>
   /**
    * When `true`, prevent overflow within the current boundary:
@@ -99,6 +97,16 @@ export type PopoverOwnProps = Omit<LayerOwnProps, 'maxWidth'> & {
   modal?: boolean
   open?: boolean
   placement?: Placement
+  /**
+   * When 'flip' (default), the placement is determined from the initial placement and the
+   * fallback placements in order. Whichever fits in the viewport first.
+   *
+   * When 'autoPlacement', the initial placement and all fallback placements are evaluated
+   * and the placement with the most viewport space available.
+   *
+   * Option is only relevant if either `constrainSize` or `preventOverflow` is `true`
+   */
+  placementStrategy?: 'flip' | 'autoPlacement'
   /** Whether or not to render the popover in a portal element. */
   portal?: boolean | string
   preventOverflow?: boolean
@@ -145,7 +153,7 @@ function ViewportOverlay() {
  */
 export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_ELEMENT>(
   props: PopoverProps<E>,
-) {
+): React.JSX.Element {
   const boundaryElementContext = useBoundaryElement()
 
   const {
@@ -153,8 +161,6 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     animate: _animate = false,
     arrow: arrowProp = false,
     as: as = DEFAULT_POPOVER_ELEMENT,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    boundaryElement = boundaryElementContext.element,
     children: childProp,
     className,
     constrainSize = false,
@@ -163,7 +169,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     fallbackPlacements = props.fallbackPlacements ??
       DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
     matchReferenceWidth,
-    floatingBoundary = props.boundaryElement ?? boundaryElementContext.element,
+    floatingBoundary = boundaryElementContext.element,
     modal,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActivate,
@@ -171,11 +177,12 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     overflow = 'hidden',
     padding,
     placement: placementProp = 'bottom',
+    placementStrategy = 'flip',
     portal,
     preventOverflow = true,
     radius = 3,
     ref: forwardedRef,
-    referenceBoundary = props.boundaryElement ?? boundaryElementContext.element,
+    referenceBoundary = boundaryElementContext.element,
     referenceElement,
     scheme,
     shadow = 3,
@@ -205,14 +212,22 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
 
     // Flip the floating element when leaving the boundary box
     if (constrainSize || preventOverflow) {
-      ret.push(
-        flip({
-          boundary: floatingBoundary || undefined,
-          fallbackPlacements,
-          padding: DEFAULT_POPOVER_PADDING,
-          rootBoundary,
-        }),
-      )
+      if (placementStrategy === 'autoPlacement') {
+        ret.push(
+          autoPlacement({
+            allowedPlacements: [placementProp].concat(fallbackPlacements),
+          }),
+        )
+      } else {
+        ret.push(
+          flip({
+            boundary: floatingBoundary || undefined,
+            fallbackPlacements,
+            padding: DEFAULT_POPOVER_PADDING,
+            rootBoundary,
+          }),
+        )
+      }
     }
 
     // Define distance between reference and floating element
@@ -287,6 +302,8 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     constrainSize,
     fallbackPlacements,
     floatingBoundary,
+    placementProp,
+    placementStrategy,
     margins,
     matchReferenceWidth,
     preventOverflow,

package/src/core/primitives/popover/popoverLayer.tsx

@@ -4,7 +4,7 @@ import {motion} from 'framer-motion'
 import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import type {Placement} from '../../types/placement'
+import type {Placement} from '../../types'
 import {Arrow} from '../arrow/arrow'
 import {Flex} from '../flex/flex'
 import {Layer, type LayerOwnProps, type LayerProps} from '../layer/layer'
@@ -41,7 +41,7 @@ export type PopoverLayerOwnProps = LayerOwnProps & {
 export type PopoverLayerProps = PopoverLayerOwnProps & LayerProps<'div'>
 
 /** @internal */
-export function PopoverLayer(props: PopoverLayerProps) {
+export function PopoverLayer(props: PopoverLayerProps): React.JSX.Element {
   const {
     __unstable_margins: marginsProp,
     animate,

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

@@ -2,7 +2,7 @@ import {Box, Container, Flex, Radio, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 
-export default function ExampleStory() {
+export default function ExampleStory(): React.JSX.Element {
   const [value, setValue] = useState('first-option')
   const disabled = useBoolean('Disabled', false)
   const readOnly = useBoolean('Read only', false)

package/src/core/primitives/radio/__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/radio',
   title: 'Radio',
   stories: [
     {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
     {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
   ],
-})
+}
+
+export default scope

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

@@ -1,7 +1,7 @@
 import {Flex, Radio} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   const checked = useBoolean('Checked', false)
   const disabled = useBoolean('Disabled', false)
   const id = 'radioStory'

package/src/core/primitives/radio/radio.tsx

@@ -2,7 +2,7 @@ import {radio, radioInput, radioPresentation} from '@sanity/ui/css'
 import {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_RADIO_ELEMENT = 'input'
@@ -25,7 +25,7 @@ export type RadioProps<E extends RadioElementType = RadioElementType> = Props<Ra
  */
 export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(
   props: RadioProps<E>,
-) {
+): React.JSX.Element {
   const {
     as: Element = DEFAULT_RADIO_ELEMENT,
     className,

package/src/core/primitives/select/__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/select',
   title: 'Select',
   stories: [
     {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
     {name: 'read-only', title: 'Read-only', component: lazy(() => import('./readOnly'))},
   ],
-})
+}
+
+export default scope

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

@@ -3,7 +3,7 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_RADIUS_OPTIONS, WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   const border = useBoolean('Border', true)
   const disabled = useBoolean('Disabled', false)
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)

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

@@ -1,6 +1,6 @@
 import {Card, Container, Label, Select, Stack} from '@sanity/ui'
 
-export default function ReadOnlyStory() {
+export default function ReadOnlyStory(): React.JSX.Element {
   return (
     <Container width={0}>
       <Card padding={4}>

package/src/core/primitives/select/select.tsx

@@ -1,16 +1,9 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {
-  _inputElement,
-  type ResponsiveProp,
-  select,
-  selectPresentation,
-  type SelectStyleProps,
-} from '@sanity/ui/css'
-import type {Space} from '@sanity/ui/theme'
+import {_inputElement, select, selectPresentation, type SelectStyleProps} from '@sanity/ui/css'
 import {useImperativeHandle, useRef} from 'react'
 
 import {useCustomValidity} from '../../hooks/useCustomValidity'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {Box} from '../box/box'
 import {Text} from '../text/text'
 
@@ -21,8 +14,6 @@ export const DEFAULT_SELECT_ELEMENT = 'select'
 export type SelectOwnProps = SelectStyleProps & {
   customValidity?: string
   readOnly?: boolean
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
 }
 
 /** @public */
@@ -38,7 +29,7 @@ export type SelectProps<E extends SelectElementType = SelectElementType> = Props
  */
 export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(
   props: SelectProps<E>,
-) {
+): React.JSX.Element {
   const {
     as: Element = DEFAULT_SELECT_ELEMENT,
     border = true,
@@ -46,12 +37,11 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
     customValidity,
     disabled,
     fontSize = 2,
-    gap,
+    gap = 2,
     padding = 3,
     radius = 1,
     readOnly,
     ref: forwardedRef,
-    space = 2,
     ...rest
   } = props as SelectProps<typeof DEFAULT_SELECT_ELEMENT>
 
@@ -67,7 +57,7 @@ export function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEME
   return (
     <div
       data-ui="Select"
-      className={select({border, fontSize, padding, radius, gap: gap ?? space})}
+      className={select({border, fontSize, gap, padding, radius})}
       data-icon-right=""
     >
       <Element {...rest} className={_inputElement()} disabled={disabled || readOnly} ref={ref}>

package/src/core/primitives/selectable/selectable.tsx

@@ -1,7 +1,7 @@
 import {_selectable, type SelectableStyleProps} from '@sanity/ui/css'
-import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ElementTone} from '@sanity/ui/theme'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {Box, type BoxOwnProps} from '../box/box'
 
 /** @internal */
@@ -13,7 +13,7 @@ export type SelectableOwnProps = BoxOwnProps &
     disabled?: boolean
     href?: string
     selected?: boolean
-    tone?: ThemeColorStateToneKey
+    tone?: ElementTone
     type?: 'button'
   }
 
@@ -29,7 +29,7 @@ export type SelectableProps<E extends SelectableElementType = SelectableElementT
 /** @internal */
 export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT>(
   props: SelectableProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_SELECTABLE_ELEMENT,
     className,

package/src/core/primitives/skeleton/__workshop__/delay.tsx

@@ -15,7 +15,7 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
-export default function SkeletonDelayStory() {
+export default function SkeletonDelayStory(): React.JSX.Element {
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
   const animated = useBoolean('Animated', true)
 

package/src/core/primitives/skeleton/__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/skeleton',
   title: 'Skeleton',
   stories: [
     {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},
     {name: 'skeleton-delay', title: 'Skeleton delay', component: lazy(() => import('./delay'))},
   ],
-})
+}
+
+export default scope

package/src/core/primitives/skeleton/__workshop__/skeleton.tsx

@@ -15,7 +15,7 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
-export default function SkeletonStory() {
+export default function SkeletonStory(): React.JSX.Element {
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
   const animated = useBoolean('Animated', true)
 
@@ -26,7 +26,7 @@ export default function SkeletonStory() {
           {[1, 2, 3].map((item) => (
             <Card key={item} tone={tone} padding={2} radius={2} border>
               <Flex align="center">
-                <Grid gap={2} columns={2} marginRight={3}>
+                <Grid gap={2} gridTemplateColumns={2} marginRight={3}>
                   <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
                   <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
                   <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />

package/src/core/primitives/skeleton/codeSkeleton.tsx

@@ -1,7 +1,7 @@
 import {codeSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontCodeSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types/props'
+import type {Props} from '../../types'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */
@@ -30,7 +30,7 @@ export type CodeSkeletonProps<E extends CodeSkeletonElementType = CodeSkeletonEl
  */
 export function CodeSkeleton<
   E extends CodeSkeletonElementType = typeof DEFAULT_CODE_SKELETON_ELEMENT,
->(props: CodeSkeletonProps<E>) {
+>(props: CodeSkeletonProps<E>): React.JSX.Element {
   const {
     className,
     size = 2,

package/src/core/primitives/skeleton/headingSkeleton.tsx

@@ -1,7 +1,7 @@
 import {headingSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontHeadingSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types/props'
+import type {Props} from '../../types'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */
@@ -29,7 +29,7 @@ export type HeadingSkeletonProps<
  */
 export function HeadingSkeleton<
   E extends HeadingSkeletonElementType = typeof DEFAULT_HEADING_SKELETON_ELEMENT,
->(props: HeadingSkeletonProps<E>) {
+>(props: HeadingSkeletonProps<E>): React.JSX.Element {
   const {
     className,
     size = 2,

package/src/core/primitives/skeleton/labelSkeleton.tsx

@@ -1,7 +1,7 @@
 import {labelSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontLabelSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types/props'
+import type {Props} from '../../types'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */
@@ -28,7 +28,7 @@ export type LabelSkeletonProps<E extends LabelSkeletonElementType = LabelSkeleto
  */
 export function LabelSkeleton<
   E extends LabelSkeletonElementType = typeof DEFAULT_LABEL_SKELETON_ELEMENT,
->(props: LabelSkeletonProps<E>) {
+>(props: LabelSkeletonProps<E>): React.JSX.Element {
   const {
     className,
     size = 2,

package/src/core/primitives/skeleton/skeleton.tsx

@@ -1,7 +1,7 @@
 import {skeleton, type SkeletonStyleProps} from '@sanity/ui/css'
 import {useEffect, useState} from 'react'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @beta */
 export const DEFAULT_SKELETON_ELEMENT = 'div'
@@ -30,7 +30,7 @@ export type SkeletonProps<E extends SkeletonElementType = SkeletonElementType> =
  */
 export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON_ELEMENT>(
   props: SkeletonProps<E>,
-) {
+): React.JSX.Element {
   const {
     as: As = DEFAULT_SKELETON_ELEMENT,
     animated = false,

package/src/core/primitives/skeleton/textSkeleton.tsx

@@ -1,7 +1,7 @@
 import {type ResponsiveProp, textSkeleton} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types/props'
+import type {Props} from '../../types'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */
@@ -30,7 +30,7 @@ export type TextSkeletonProps<E extends TextSkeletonElementType = TextSkeletonEl
  */
 export function TextSkeleton<
   E extends TextSkeletonElementType = typeof DEFAULT_TEXT_SKELETON_ELEMENT,
->(props: TextSkeletonProps<E>) {
+>(props: TextSkeletonProps<E>): React.JSX.Element {
   const {
     className,
     size = 2,

package/src/core/primitives/spinner/__workshop__/Props.tsx

@@ -3,7 +3,7 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_TEXT_FONT_SIZE_OPTIONS} from '$workshop'
 
-export default function Props() {
+export default function Props(): React.JSX.Element {
   const muted = useBoolean('Muted', false)
   const size = useSelect('Size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
 

package/src/core/primitives/spinner/__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/spinner',
   title: 'Spinner',
   stories: [
@@ -11,4 +11,6 @@ export default defineScope({
       component: lazy(() => import('./Props')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/primitives/spinner/animatedSpinnerIcon.tsx

@@ -1,11 +1,11 @@
 import {SpinnerIcon} from '@sanity/icons'
 import {animatedSpinnerIcon} from '@sanity/ui/css'
-import type {ReactElement, SVGProps} from 'react'
+import type {SVGProps} from 'react'
 
 /** @internal */
 export function AnimatedSpinnerIcon(
   props: Omit<SVGProps<SVGSVGElement>, 'className'>,
-): ReactElement {
+): React.JSX.Element {
   const {...rest} = props
 
   return (

package/src/core/primitives/spinner/spinner.tsx

@@ -1,7 +1,7 @@
 import {type ResponsiveProp, spinner} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {Text} from '../text/text'
 import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
 
@@ -30,7 +30,7 @@ export type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Pr
  */
 export function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(
   props: SpinnerProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_SPINNER_ELEMENT,
     className,

package/src/core/primitives/srOnly/srOnly.tsx

@@ -1,6 +1,6 @@
 import {srOnly} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_SR_ONLY_ELEMENT = 'span'
@@ -17,7 +17,7 @@ export type SrOnlyProps<E extends SrOnlyElementType = SrOnlyElementType> = Props
 /** @public */
 export function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEMENT>(
   props: SrOnlyProps<E>,
-) {
+): React.JSX.Element {
   const {
     as: Element = DEFAULT_SR_ONLY_ELEMENT,
     children,

package/src/core/primitives/stack/__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/stack',
   title: 'Stack',
   stories: [
@@ -11,4 +11,6 @@ export default defineScope({
       component: lazy(() => import('./plain')),
     },
   ],
-})
+}
+
+export default scope

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

@@ -3,7 +3,7 @@ import {useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_SPACE_OPTIONS} from '$workshop'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Container width={0}>

package/src/core/primitives/stack/stack.tsx

@@ -1,7 +1,6 @@
-import {type ResponsiveProp, stack} from '@sanity/ui/css'
-import type {Space} from '@sanity/ui/theme'
+import {stack} 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 */
@@ -24,10 +23,7 @@ export type StackOwnProps = Omit<
   | 'justifyContent'
   | 'rows'
   | 'gridTemplateRows'
-> & {
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-}
+>
 
 /** @public */
 export type StackElementType = BoxElementType
@@ -42,12 +38,11 @@ export type StackProps<E extends StackElementType = StackElementType> = Props<St
  */
 export function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>(
   props: StackProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_STACK_ELEMENT,
     className,
     gap,
-    space,
     ...rest
   } = props as StackProps<typeof DEFAULT_STACK_ELEMENT>
 
@@ -59,7 +54,7 @@ export function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>
       gridAutoRows="min"
       className={stack({className})}
       display="grid"
-      gap={gap ?? space}
+      gap={gap}
     />
   )
 }

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

@@ -1,7 +1,7 @@
 import {Box, Flex, Switch, 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 = checked === undefined
   const handleChange = useCallback((event: React.FormEvent<HTMLInputElement>) => {

package/src/core/primitives/switch/__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/switch',
   title: 'Switch',
   stories: [
     {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
     {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
   ],
-})
+}
+
+export default scope

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

@@ -2,7 +2,7 @@ import {Flex, Switch} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 import {useCallback} from 'react'
 
-export default function PropsStory() {
+export default function PropsStory(): React.JSX.Element {
   const checked = useBoolean('Checked', false)
   const indeterminate = useBoolean('Indeterminate', false)
   const readOnly = useBoolean('Read only', false)