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

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

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

package/src/core/primitives/text/text.tsx

@@ -1,6 +1,6 @@
 import {text, textOverflow, type TextOverflowStyleProps, type TextStyleProps} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_TEXT_ELEMENT = 'div'
@@ -31,9 +31,10 @@ export type TextProps<E extends TextElementType = TextElementType> = Props<TextO
  *
  * @public
  */
-export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(props: TextProps<E>) {
+export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
+  props: TextProps<E>,
+): React.JSX.Element {
   const {
-    accent,
     align,
     as: Element = DEFAULT_TEXT_ELEMENT,
     children,
@@ -53,7 +54,6 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(pr
       {...rest}
       className={text({
         className,
-        accent,
         align,
         flex,
         maxWidth,

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

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

@@ -9,7 +9,7 @@ import {
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
 } from '$workshop'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS)
 
   const border = useBoolean('Border', true)

package/src/core/primitives/textArea/textArea.tsx

@@ -1,15 +1,8 @@
-import {
-  _inputElement,
-  _inputPresentation,
-  type ResponsiveProp,
-  textArea,
-  type TextAreaStyleProps,
-} from '@sanity/ui/css'
-import type {Space} from '@sanity/ui/theme'
+import {_inputElement, _inputPresentation, textArea, type TextAreaStyleProps} 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_TEXT_AREA_ELEMENT = 'textarea'
@@ -21,8 +14,6 @@ export type TextAreaOwnProps = TextAreaStyleProps & {
    */
   __unstable_disableFocusRing?: boolean
   customValidity?: string
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
 }
 
 /** @public */
@@ -41,7 +32,7 @@ export type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> =
  */
 export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(
   props: TextAreaProps<E>,
-) {
+): React.JSX.Element {
   const {
     __unstable_disableFocusRing,
     as: Element = DEFAULT_TEXT_AREA_ELEMENT,
@@ -49,12 +40,11 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
     customValidity,
     disabled = false,
     fontSize = 2,
-    gap,
+    gap = 3,
     padding = 3,
     radius = 2,
     readOnly,
     ref: forwardedRef,
-    space = 3,
     ...rest
   } = props as TextAreaProps<typeof DEFAULT_TEXT_AREA_ELEMENT>
 
@@ -74,7 +64,7 @@ export function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_ARE
         fontSize,
         padding,
         radius,
-        gap: gap ?? space,
+        gap,
       })}
       data-invalid={customValidity ? '' : undefined}
       data-read-only={!disabled && readOnly ? '' : undefined}

package/src/core/primitives/textInput/__workshop__/clearButton.tsx

@@ -2,7 +2,7 @@ import {Box, TextInput} from '@sanity/ui'
 import {useText} from '@sanity/ui-workshop'
 import {useCallback, useState} from 'react'
 
-export default function ClearButtonStory() {
+export default function ClearButtonStory(): React.JSX.Element {
   const customValidity = useText('Custom validitiy')
 
   const [value, setValue] = useState('')

package/src/core/primitives/textInput/__workshop__/customValidity.tsx

@@ -1,7 +1,7 @@
 import {Button, Card, Container, Stack, TextInput} from '@sanity/ui'
 import {useText} from '@sanity/ui-workshop'
 
-export default function CustomValidityStory() {
+export default function CustomValidityStory(): React.JSX.Element {
   const customValidity = useText('Custom validity', 'Invalid value') || undefined
 
   return (

package/src/core/primitives/textInput/__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/text-input',
   title: 'TextInput',
   stories: [
@@ -41,4 +41,6 @@ export default defineScope({
       component: lazy(() => import('./states')),
     },
   ],
-})
+}
+
+export default scope

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

@@ -29,7 +29,7 @@ const typingPerfTest: PerfTestProps<HTMLInputElement> = {
   },
 }
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   const {ref, Wrapper} = usePerfTest(typingPerfTest)
 
   return (

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

@@ -1,6 +1,6 @@
 import {Flex, TextInput} from '@sanity/ui'
 
-export default function ReadOnlyStory() {
+export default function ReadOnlyStory(): React.JSX.Element {
   return (
     <Flex padding={4}>
       <TextInput id="text-input-example" readOnly />

package/src/core/primitives/textInput/__workshop__/states.tsx

@@ -1,7 +1,7 @@
 import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
-export default function StatesStory() {
+export default function StatesStory(): React.JSX.Element {
   const invalid = useBoolean('Invalid', false)
   const onChange = useAction('onChange')
 

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

@@ -1,7 +1,7 @@
 import {Box, Card, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
-export default function TonesStory() {
+export default function TonesStory(): React.JSX.Element {
   const transparentTone = useBoolean('Transparent', true)
   const neutralTone = useBoolean('Neutral', true)
   const primaryTone = useBoolean('Primary', true)

package/src/core/primitives/textInput/__workshop__/typed.tsx

@@ -4,7 +4,7 @@ import {useCallback, useState} from 'react'
 
 import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '$workshop'
 
-export default function TypedStory() {
+export default function TypedStory(): React.JSX.Element {
   const type = useSelect('Type', WORKSHOP_TEXT_INPUT_TYPE_OPTIONS, 'text')
 
   const [value, setValue] = useState('')

package/src/core/primitives/textInput/textInput.tsx

@@ -9,7 +9,7 @@ import {
   textInputPrefix,
   textInputSuffix,
 } from '@sanity/ui/css'
-import type {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
+import type {FontWeight, Space} from '@sanity/ui/theme'
 import {
   type ElementType,
   isValidElement,
@@ -26,7 +26,7 @@ import {EMPTY_RECORD} from '../../constants'
 import {useCustomValidity} from '../../hooks/useCustomValidity'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {isRecord} from '../../lib/isRecord'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {Box} from '../box/box'
 import {Button, type ButtonProps} from '../button/button'
 import {Text} from '../text/text'
@@ -58,10 +58,8 @@ export type TextInputOwnProps = InputStyleProps & {
    */
   onClear?: () => void
   prefix?: ReactNode
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
   suffix?: ReactNode
-  weight?: ThemeFontWeightKey
+  weight?: FontWeight
 }
 
 /** @public */
@@ -80,7 +78,7 @@ export type TextInputProps<E extends TextInputElementType = TextInputElementType
  */
 export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_INPUT_ELEMENT>(
   props: TextInputProps<E>,
-) {
+): React.JSX.Element {
   const {
     __unstable_disableFocusRing,
     as: Element = DEFAULT_TEXT_INPUT_ELEMENT,
@@ -89,7 +87,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     clearButton,
     disabled = false,
     fontSize = 2,
-    gap,
+    gap = 3,
     icon: IconComponent,
     iconRight: IconRightComponent,
     onClear,
@@ -98,7 +96,6 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     radius = 2,
     readOnly,
     ref: forwardedRef,
-    space = 3,
     suffix,
     customValidity,
     type = 'text',
@@ -177,7 +174,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
         fontSize,
         padding,
         radius,
-        gap: gap ?? space,
+        gap: gap,
         width,
       })}
       data-icon-left={IconComponent ? '' : undefined}

package/src/core/primitives/tooltip/__workshop__/customPortal.tsx

@@ -20,7 +20,7 @@ const PORTAL_OPTIONS = {
   'portal1': 'portal1',
 }
 
-export default function CustomPortalStory() {
+export default function CustomPortalStory(): React.JSX.Element {
   const content = useText(
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',

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

package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx

@@ -4,7 +4,7 @@ import {useCallback, useState} from 'react'
 
 import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
-export default function OverflowingBoundaryStory() {
+export default function OverflowingBoundaryStory(): React.JSX.Element {
   const content = useText(
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',

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

@@ -8,7 +8,7 @@ import {
   WORKSHOP_SPACE_OPTIONS,
 } from '$workshop'
 
-export default function PropsStory() {
+export default function PropsStory(): React.JSX.Element {
   const arrow = useBoolean('Arrow', false)
   const content = useText('Content', 'Tooltip content')
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 2)

package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx

@@ -4,7 +4,7 @@ import {useState} from 'react'
 
 import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
-export default function ResizableBoundaryStory() {
+export default function ResizableBoundaryStory(): React.JSX.Element {
   const content = useText(
     'Content',
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis consectetur malesuada. Sed lobortis est dolor, eget imperdiet velit placerat et. Aenean posuere mi non aliquet iaculis. Donec fermentum pulvinar purus at sagittis. Ut tincidunt massa odio, sed finibus justo ullamcorper id. Nam venenatis justo non ligula elementum cursus. Pellentesque laoreet justo in mollis sagittis. In lacinia ornare ultrices. Suspendisse potenti.',

package/src/core/primitives/tooltip/constants.ts

@@ -1,4 +1,4 @@
-import type {Placement} from '../../types/placement'
+import type {Placement} from '../../types'
 
 export const DEFAULT_TOOLTIP_ARROW_WIDTH = 15
 export const DEFAULT_TOOLTIP_ARROW_HEIGHT = 6

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

@@ -1,10 +1,8 @@
-import '../../../../test/mocks/resizeObserver.mock'
-import '../../../../test/mocks/matchMedia.mock'
-
 import {act, fireEvent, screen} from '@testing-library/react'
 import {afterEach, beforeEach, describe, expect, it, vi} from 'vitest'
 
-import {render} from '../../../../test'
+import {render} from '$test/utils'
+
 import {Button} from '../button/button'
 import {Text} from '../text/text'
 import {Tooltip} from './tooltip'

package/src/core/primitives/tooltip/tooltip.tsx

@@ -9,7 +9,7 @@ import {
   useFloating,
 } from '@floating-ui/react-dom'
 import {type RadiusStyleProps, type ShadowStyleProps, tooltip} from '@sanity/ui/css'
-import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {CardTone, ColorScheme} from '@sanity/ui/theme'
 import {AnimatePresence} from 'framer-motion'
 import {
   cloneElement,
@@ -34,8 +34,7 @@ import {Z_OFFSETS} from '../../constants'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {origin} from '../../middleware/origin'
-import type {Placement} from '../../types/placement'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Delay, Placement, Props} from '../../types'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
 import {getElementRef} from '../../utils/getElementRef'
 import {Portal} from '../../utils/portal/portal'
@@ -43,7 +42,6 @@ import {usePortal} from '../../utils/portal/usePortal'
 import {CardProvider} from '../card/cardProvider'
 import {useCard} from '../card/useCard'
 import type {LayerOwnProps} from '../layer/layer'
-import type {Delay} from '../types'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_TOOLTIP_DISTANCE,
@@ -59,8 +57,6 @@ export const DEFAULT_TOOLTIP_ELEMENT = 'div'
 export type TooltipOwnProps = LayerOwnProps &
   RadiusStyleProps &
   ShadowStyleProps & {
-    /** @deprecated Use `fallbackPlacements` instead. */
-    allowedAutoPlacements?: Placement[]
     /**
      * Whether the tooltip should animate in and out.
      *
@@ -88,8 +84,8 @@ export type TooltipOwnProps = LayerOwnProps &
     placement?: Placement
     /** Whether or not to render the tooltip in a portal element. */
     portal?: boolean | string
-    scheme?: ThemeColorSchemeKey
-    tone?: ThemeColorCardToneKey
+    scheme?: ColorScheme
+    tone?: CardTone
   }
 
 /** @public */
@@ -108,7 +104,7 @@ export type TooltipProps<E extends TooltipElementType = TooltipElementType> = Pr
  */
 export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
   props: TooltipProps<E>,
-) {
+): React.JSX.Element {
   const boundaryElementContext = useBoundaryElement()
 
   const {

package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx

@@ -1,11 +1,13 @@
+import type {Context} from 'react'
+
 import {createGlobalScopedContext} from '../../../lib/createGlobalScopedContext'
 import type {TooltipDelayGroupContextValue} from './types'
 
 /**
  * @beta
  */
-export const TooltipDelayGroupContext =
+export const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null> =
   createGlobalScopedContext<TooltipDelayGroupContextValue | null>(
-    '@sanity/ui/context/tooltipDelayGroup',
+    '@sanity/ui/v3/tooltipDelayGroup',
     null,
   )

package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx

@@ -1,7 +1,7 @@
-import {type ReactElement, type ReactNode, useMemo} from 'react'
+import {type ReactNode, useMemo} from 'react'
 
 import {useDelayedState} from '../../../hooks/useDelayedState'
-import type {Delay} from '../../types'
+import type {Delay} from '../../../types'
 import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
 import type {TooltipDelayGroupContextValue} from './types'
 
@@ -27,7 +27,9 @@ export interface TooltipDelayGroupProviderProps {
  * Provides context for a group of tooltip elements that should share a delay
  * which temporarily becomes 1 ms after the first floating element of the group opens.
  */
-export function TooltipDelayGroupProvider(props: TooltipDelayGroupProviderProps): ReactElement {
+export function TooltipDelayGroupProvider(
+  props: TooltipDelayGroupProviderProps,
+): React.JSX.Element {
   const {children, delay} = props
   const [isGroupActive, setIsGroupActive] = useDelayedState(false)
   const [openTooltipId, setOpenTooltipId] = useDelayedState<string | null>(null)

package/src/core/primitives/tooltip/tooltipLayer.tsx

@@ -2,7 +2,7 @@ import {motion, type MotionStyle} 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 {Layer, type LayerOwnProps, type LayerProps} from '../layer/layer'
 import {
@@ -30,7 +30,7 @@ export interface TooltipLayerOwnProps extends LayerOwnProps {
 export type TooltipLayerProps = TooltipLayerOwnProps & LayerProps<'div'>
 
 /** @internal */
-export function TooltipLayer(props: TooltipLayerProps) {
+export function TooltipLayer(props: TooltipLayerProps): React.JSX.Element {
   const {
     animate,
     arrow,

package/src/core/{types/props.ts → types.ts}

@@ -27,3 +27,30 @@ export type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
   E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
   P & {as?: E}
 >
+
+/**
+ * Placement of floating UI elements.
+ *
+ * @public
+ */
+export type Placement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+
+/** @public */
+export type Delay =
+  | number
+  | Partial<{
+      open: number
+      close: number
+    }>

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

package/src/core/utils/boundaryElement/__workshop__/plain.tsx

@@ -1,7 +1,7 @@
 import {BoundaryElementProvider, Button, Card, Text, Tooltip} from '@sanity/ui'
 import {useState} from 'react'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
   return (

package/src/core/utils/boundaryElement/boundaryElement.test.tsx

@@ -1,6 +1,7 @@
 import {describe, expect, it, vi} from 'vitest'
 
-import {render} from '../../../../test'
+import {render} from '$test/utils'
+
 import {BoundaryElementContext} from './boundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
 import {useBoundaryElement} from './useBoundaryElement'

package/src/core/utils/boundaryElement/boundaryElementContext.ts

@@ -1,7 +1,10 @@
+import type {Context} from 'react'
+
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import type {BoundaryElementContextValue} from './types'
 
-export const BoundaryElementContext = createGlobalScopedContext<BoundaryElementContextValue | null>(
-  '@sanity/ui/context/boundaryElement',
-  null,
-)
+export const BoundaryElementContext: Context<BoundaryElementContextValue | null> =
+  createGlobalScopedContext<BoundaryElementContextValue | null>(
+    '@sanity/ui/v3/boundaryElement',
+    null,
+  )

package/src/core/utils/boundaryElement/boundaryElementProvider.tsx

@@ -1,4 +1,4 @@
-import {type ReactElement, type ReactNode, useMemo} from 'react'
+import {type ReactNode, useMemo} from 'react'
 
 import {BoundaryElementContext} from './boundaryElementContext'
 import type {BoundaryElementContextValue} from './types'
@@ -10,7 +10,7 @@ export interface BoundaryElementProviderProps {
 }
 
 /** @public */
-export function BoundaryElementProvider(props: BoundaryElementProviderProps): ReactElement {
+export function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element {
   const {children, element} = props
   const value: BoundaryElementContextValue = useMemo(() => ({version: 0.0, element}), [element])
 

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -24,7 +24,7 @@ const TestCard = styled(Card)`
   }
 `
 
-export default function CustomMediaQuery() {
+export default function CustomMediaQuery(): React.JSX.Element {
   return (
     <Box padding={4}>
       <Box marginBottom={4}>

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

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -2,7 +2,7 @@ import {BREAKPOINTS} from '@sanity/ui/css'
 import {useImperativeHandle, useMemo, useState} from 'react'
 
 import {useElementSize} from '../../hooks/useElementSize'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
 /** @beta */
@@ -36,7 +36,7 @@ const DEFAULT_BREAKPOINTS = Object.values(BREAKPOINTS)
  */
 export function ElementQuery<
   E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT,
->(props: ElementQueryProps<E>) {
+>(props: ElementQueryProps<E>): React.JSX.Element {
   const {
     as: Element = DEFAULT_ELEMENT_QUERY_ELEMENT,
     children,

package/src/core/utils/getElementRef.ts

@@ -7,7 +7,7 @@
 // https://github.com/facebook/react/pull/28348
 //
 // Access the ref using the method that doesn't yield a warning.
-export function getElementRef(element: React.ReactElement) {
+export function getElementRef(element: React.ReactElement): React.Ref<unknown> | undefined {
   // React <=18 in DEV
   let getter = Object.getOwnPropertyDescriptor(element.props, 'ref')?.get
   let mayWarn = getter && 'isReactWarning' in getter && getter.isReactWarning

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