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

package/exports/_visual-editing.ts

@@ -2,8 +2,6 @@
  * These are internal exports for usage in `@sanity/visual-editing` and `@sanity/insert-menu`,
  * which are used in environments where the regular `@sanity/ui` export is far too heavy due to imports from refractor and more.
  */
-export {ThemeProvider, type ThemeProviderProps} from '../src/core/_compat/theme/themeProvider'
-export {useTheme_v2} from '../src/core/_compat/theme/useTheme'
 export {Hotkeys, type HotkeysProps} from '../src/core/components/hotkeys/hotkeys'
 export {Menu, type MenuProps} from '../src/core/components/menu/menu'
 export {MenuDivider} from '../src/core/components/menu/menuDivider'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.33",
+  "version": "3.0.0-static.35",
   "keywords": [
     "react",
     "ui",
@@ -121,7 +121,7 @@
     "@commitlint/config-conventional": "^19.8.0",
     "@eslint/js": "^9.29.0",
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/pkg-utils": "^7.2.6",
+    "@sanity/pkg-utils": "^7.6.1",
     "@sanity/prettier-config": "^1.0.4",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^3.0.0",
@@ -187,8 +187,7 @@
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19",
-    "react-is": "^19",
-    "styled-components": "^6"
+    "react-is": "^19"
   },
   "engines": {
     "node": ">=14.0.0"

package/src/core/Root.tsx

@@ -3,7 +3,7 @@ import {useCallback, useImperativeHandle, useRef, useState} from 'react'
 
 import {Box, type BoxOwnProps} from './primitives/box/box'
 import {RootProvider} from './RootProvider'
-import type {Props} from './types/props'
+import type {Props} from './types'
 
 /** @public */
 export const DEFAULT_ROOT_ELEMENT = 'html'
@@ -22,7 +22,9 @@ export type RootProps<E extends RootElementType = RootElementType> = Props<RootO
  *
  * @public
  */
-export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(props: RootProps<E>) {
+export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(
+  props: RootProps<E>,
+): React.JSX.Element {
   const {
     as: as = DEFAULT_ROOT_ELEMENT,
     children,

package/src/core/RootProvider.tsx

@@ -1,4 +1,4 @@
-import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {CardTone, ColorScheme} from '@sanity/ui/theme'
 import type {ReactNode} from 'react'
 
 import {ToastProvider} from './components/toast/toastProvider'
@@ -12,12 +12,12 @@ export interface RootProviderProps {
   boundaryElement?: HTMLElement | null
   children?: ReactNode
   portalElement?: HTMLElement | null
-  scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorCardToneKey
+  scheme?: ColorScheme
+  tone?: CardTone
 }
 
 /** @public */
-export function RootProvider(props: RootProviderProps) {
+export function RootProvider(props: RootProviderProps): React.JSX.Element {
   const {
     boundaryElement = null,
     children,

package/src/core/__workshop__/boundary.tsx

@@ -1,6 +1,6 @@
 import {Box, Button, Root, Stack, Text, useCard, useToast} from '@sanity/ui'
 
-export default function BoundaryStory() {
+export default function BoundaryStory(): React.JSX.Element {
   const {scheme} = useCard()
 
   return (

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

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

@@ -14,7 +14,7 @@ import {useCallback, useEffect, useRef, useState} from 'react'
 
 import {countriesStore} from './mock/apiStore'
 
-export default function AsyncStory() {
+export default function AsyncStory(): React.JSX.Element {
   const [options, setOptions] = useState<BaseAutocompleteOption[]>([])
   const [loading, setLoading] = useState(false)
   const searchRef = useRef<{cancel: () => void} | null>(null)

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

@@ -12,10 +12,10 @@ import {
 } from '@sanity/ui'
 import {useCallback, useState} from 'react'
 
-import countries from './mock/countries'
+import {countries} from './mock/countries'
 import type {ExampleOption} from './types'
 
-export default function ConstrainedHeightStory() {
+export default function ConstrainedHeightStory(): React.JSX.Element {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
 
   return (

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

@@ -9,10 +9,10 @@ import {
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
 } from '$workshop'
 
-import countries from './mock/countries'
+import {countries} from './mock/countries'
 import type {ExampleOption} from './types'
 
-export default function CustomStory() {
+export default function CustomStory(): React.JSX.Element {
   const data: ExampleOption[] = countries.map((d) => ({value: d.code, title: d.name}))
   const border = useBoolean('Border', true)
   const disabled = useBoolean('Disabled', false)

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

@@ -11,7 +11,7 @@ import {
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
 } from '$workshop'
 
-import countries from './mock/countries'
+import {countries} from './mock/countries'
 
 const typingPerfTest: PerfTestProps<HTMLInputElement> = {
   name: 'typing',
@@ -29,7 +29,7 @@ const typingPerfTest: PerfTestProps<HTMLInputElement> = {
   },
 }
 
-export default function ExampleStory() {
+export default function ExampleStory(): React.JSX.Element {
   const {ref, Wrapper} = usePerfTest(typingPerfTest)
 
   const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS)

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

@@ -1,7 +1,7 @@
 import {Autocomplete, Box, Button, Code, Stack} from '@sanity/ui'
 import {useCallback, useState} from 'react'
 
-export default function FocusAndBlurStory() {
+export default function FocusAndBlurStory(): React.JSX.Element {
   const [value, setValue] = useState('')
   const [log, setLog] = useState<string[]>([])
   const handleBlur = useCallback(() => setLog((v) => v.concat(['blur'])), [])

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

@@ -21,7 +21,7 @@ import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
 import {countriesStore} from './mock/apiStore'
 
-export default function Fullscreen() {
+export default function FullscreenStory(): React.JSX.Element {
   const error = useBoolean('Error', false)
 
   const {push: pushToast} = useToast()

package/src/core/components/autocomplete/__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: 'components/autocomplete',
   title: 'Autocomplete',
   stories: [
@@ -36,4 +36,6 @@ export default defineScope({
       component: lazy(() => import('./fullscreen')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/components/autocomplete/__workshop__/mock/apiStore.ts

@@ -1,4 +1,4 @@
-import countries from './countries'
+import {countries} from './countries'
 
 export const countriesStore = {
   search(

package/src/core/components/autocomplete/__workshop__/mock/countries.ts

@@ -1,4 +1,4 @@
-export default [
+export const countries: {name: string; code: string}[] = [
   {name: 'Afghanistan', code: 'AF'},
   {name: 'Åland Islands', code: 'AX'},
   {name: 'Albania', code: 'AL'},

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

@@ -30,7 +30,7 @@ import {AnimatedSpinnerIcon} from '../../primitives/spinner/animatedSpinnerIcon'
 import {Stack} from '../../primitives/stack/stack'
 import {Text} from '../../primitives/text/text'
 import {TextInput, type TextInputOwnProps} from '../../primitives/textInput/textInput'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
@@ -110,7 +110,7 @@ const DEFAULT_FILTER_OPTION = (query: string, option: BaseAutocompleteOption) =>
 export function Autocomplete<
   E extends AutocompleteElementType = typeof DEFAULT_AUTOCOMPLETE_ELEMENT,
   O extends BaseAutocompleteOption = BaseAutocompleteOption,
->(props: AutocompleteProps<E, O>) {
+>(props: AutocompleteProps<E, O>): React.JSX.Element {
   const {
     as = DEFAULT_AUTOCOMPLETE_ELEMENT,
     border = true,

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

@@ -1,4 +1,4 @@
-import {type KeyboardEvent, type ReactElement, type ReactNode, useCallback} from 'react'
+import {type KeyboardEvent, type ReactNode, useCallback} from 'react'
 
 import {_isEnterToClickElement} from '../../helpers/element'
 
@@ -10,7 +10,7 @@ export interface AutocompleteOptionProps {
   value: string
 }
 
-export function AutocompleteOption(props: AutocompleteOptionProps): ReactElement {
+export function AutocompleteOption(props: AutocompleteOptionProps): React.JSX.Element {
   const {children, id, onSelect, selected, value} = props
 
   const handleClick = useCallback(() => {

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

@@ -1,9 +1,9 @@
-import type {Placement} from '../../types/placement'
+import type {Placement} from '../../types'
 
 /**
  * @internal
  */
-export const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = [
+export const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS: string[] = [
   'Control',
   'Shift',
   'Alt',

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

@@ -12,7 +12,7 @@ const BREADCRUMBS_MAX_LENGTH_OPTIONS = {
   '7': 7,
 }
 
-export default function Example() {
+export default function ExampleStory(): React.JSX.Element {
   const maxLength = useSelect('Max. length', BREADCRUMBS_MAX_LENGTH_OPTIONS)
 
   return (

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

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

@@ -1,5 +1,4 @@
 import {breadcrumbs, type GapStyleProps} from '@sanity/ui/css'
-import type {Space} from '@sanity/ui/theme'
 import {
   Children,
   Fragment,
@@ -18,7 +17,7 @@ import {Flex} from '../../primitives/flex/flex'
 import {Popover} from '../../primitives/popover/popover'
 import {Stack} from '../../primitives/stack/stack'
 import {Text} from '../../primitives/text/text'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @beta */
 export const DEFAULT_BREADCRUMBS_ELEMENT = 'nav'
@@ -28,8 +27,6 @@ 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 */
@@ -44,20 +41,17 @@ export type BreadcrumbsProps<E extends BreadcrumbsElementType = BreadcrumbsEleme
 /** @beta */
 export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BREADCRUMBS_ELEMENT>(
   props: BreadcrumbsProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_BREADCRUMBS_ELEMENT,
     children,
     className,
     expandButton: expandButtonProps,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    gap: _gapProp,
-    gapX = props.gap ?? (props.space as Space | undefined) ?? 2,
-    gapY = props.gap ?? (props.space as Space | undefined) ?? 2,
+    gap = 2,
+    gapX,
+    gapY,
     maxLength,
     separator,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    space: _spaceProp,
     ...rest
   } = props as BreadcrumbsProps<typeof DEFAULT_BREADCRUMBS_ELEMENT>
 
@@ -118,6 +112,7 @@ export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BR
       data-ui="Breadcrumbs"
       {...rest}
       className={breadcrumbs({className})}
+      gap={gap}
       gapX={gapX}
       gapY={gapY}
     >

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

@@ -12,7 +12,7 @@ import {
 } from '@sanity/ui'
 import {useState} from 'react'
 
-export default function LayeringFocusStory() {
+export default function LayeringFocusStory(): React.JSX.Element {
   const [firstDialogOpen, setFirstDialogOpen] = useState<boolean>(false)
   const [secondDialogOpen, setSecondDialogOpen] = useState<boolean>(false)
   const [thirdDialogOpen, setThirdDialogOpen] = useState<boolean>(false)

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

@@ -1,7 +1,7 @@
 import {Box, Button, Dialog, Text} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
 
-export default function AutoFocusStory() {
+export default function AutoFocusStory(): React.JSX.Element {
   const autoFocus = useBoolean('Auto-focus', true)
   const open = useBoolean('Open', false)
   const handleClose = useAction('onClose')

package/src/core/components/dialog/__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: 'components/dialog',
   title: 'Dialog',
   stories: [
@@ -16,4 +16,6 @@ export default defineScope({
     {name: 'activate', title: 'Activate', component: lazy(() => import('./activate'))},
     {name: 'wrapped', title: 'Wrapped', component: lazy(() => import('./wrapped'))},
   ],
-})
+}
+
+export default scope

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

@@ -1,7 +1,7 @@
 import {Box, Card, Code, Dialog, Layer, LayerProvider, useLayer} from '@sanity/ui'
 import {useAction} from '@sanity/ui-workshop'
 
-export default function LayeringStory() {
+export default function LayeringStory(): React.JSX.Element {
   return (
     <Box padding={[4, 5, 6]}>
       <LayerProvider>

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

@@ -1,7 +1,7 @@
 import {Box, Button, Dialog, LayerProvider, Menu, MenuButton, MenuItem} from '@sanity/ui'
 import {useEffect, useRef, useState} from 'react'
 
-export default function NestedStory() {
+export default function NestedStory(): React.JSX.Element {
   const [open1] = useState(true)
   const [open2, setOpen2] = useState(false)
   const [open3, setOpen3] = useState(false)
@@ -51,14 +51,13 @@ export default function NestedStory() {
                     <MenuButton
                       button={<Button text="Test" />}
                       id="menu3"
-                      popover={{animate: true}}
+                      popover={{animate: true, portal: true}}
                       menu={
                         <Menu>
                           <MenuItem text="Test" />
                           <MenuItem text="Test" />
                         </Menu>
                       }
-                      portal
                     />
                   </Box>
                 </Dialog>

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

@@ -2,7 +2,7 @@ import {Dialog, LayerProvider, Stack, Text} from '@sanity/ui'
 import {useAction} from '@sanity/ui-workshop'
 import {useEffect, useRef} from 'react'
 
-export default function OnScrollStory() {
+export default function OnScrollStory(): React.JSX.Element {
   const ref = useRef<HTMLDivElement | null>(null)
   const handleScroll = useAction('scroll')
 

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

@@ -13,7 +13,7 @@ import {
 import {useCallback, useState} from 'react'
 import {styled} from 'styled-components'
 
-export default function PanesStory() {
+export default function PanesStory(): React.JSX.Element {
   return (
     <Flex height="fill">
       <Pane id="A" />

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

@@ -4,7 +4,7 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '$workshop'
 
-export default function PositionStory() {
+export default function PositionStory(): React.JSX.Element {
   const open = useBoolean('Open', true)
   const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS)
 

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

@@ -4,7 +4,7 @@ import {useCallback, useRef, useState} from 'react'
 
 import {WORKSHOP_CONTAINER_WIDTH_OPTIONS} from '$workshop'
 
-export default function PropsStory() {
+export default function PropsStory(): React.JSX.Element {
   const animate = useBoolean('Animate', false)
   const header = useText('Header', 'Props example')
   const onClickOutside = useBoolean('Close when click outside', false)

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

@@ -1,6 +1,6 @@
 import {Dialog, DialogProvider} from '@sanity/ui'
 
-export default function ProviderStory() {
+export default function ProviderStory(): React.JSX.Element {
   return (
     <DialogProvider position="absolute" zOffset={1000}>
       <Dialog header="Outer" id="provider-example">

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

@@ -1,7 +1,7 @@
 import {Box, Button, Dialog, type DialogProps, LayerProvider, useLayer} from '@sanity/ui'
 import {type ReactNode, useCallback, useEffect, useRef, useState} from 'react'
 
-export default function WrappedStory() {
+export default function WrappedStory(): React.JSX.Element {
   return (
     <LayerProvider zOffset={100}>
       <Box padding={4}>

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

@@ -4,7 +4,7 @@ import {
   dialogContainer,
   type ResponsiveProp,
 } from '@sanity/ui/css'
-import type {Radius, ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {CardTone, ColorScheme, Radius} from '@sanity/ui/theme'
 import {type FocusEvent, type ForwardedRef, type ReactNode, useCallback, useRef} from 'react'
 
 import {Z_OFFSETS} from '../../constants'
@@ -12,10 +12,9 @@ import {isHTMLElement} from '../../helpers/element'
 import {focusFirstDescendant, focusLastDescendant} from '../../helpers/focus'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {useResponsiveProp} from '../../hooks/useResponsiveProp'
-import type {CardTone} from '../../primitives/card/types'
 import {Container} from '../../primitives/container/container'
 import {Layer, type LayerOwnProps, type LayerProps} from '../../primitives/layer/layer'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
 import {Portal} from '../../utils/portal/portal'
 import {usePortal} from '../../utils/portal/usePortal'
@@ -57,8 +56,8 @@ export type DialogOwnProps = ContainerStyleProps &
     open?: boolean
     portal?: string
     position?: ResponsiveProp<DialogPosition>
-    scheme?: ThemeColorSchemeKey
-    tone?: CardTone
+    scheme?: ColorScheme
+    tone?: CardTone | 'inherit'
     zOffset?: number | number[]
   }
 
@@ -75,7 +74,7 @@ export type DialogProps<E extends DialogElementType = DialogElementType> = Props
  */
 export function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEMENT>(
   props: DialogProps<E>,
-) {
+): React.JSX.Element {
   const context = useDialog()
   const {
     __unstable_autoFocus: autoFocus = true,

package/src/core/components/dialog/dialogCard.tsx

@@ -27,7 +27,7 @@ import {Card, type CardElementType, type CardOwnProps} from '../../primitives/ca
 import {Flex} from '../../primitives/flex/flex'
 import {useLayer} from '../../primitives/layer/useLayer'
 import {Text} from '../../primitives/text/text'
-import type {Props} from '../../types/props'
+import type {Props} from '../../types'
 import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
 import {usePortal} from '../../utils/portal/usePortal'
 import {isTargetWithinScope} from './isTargetWithinScope'
@@ -68,7 +68,7 @@ export type DialogCardProps<E extends DialogCardElementType = DialogCardElementT
 
 export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIALOG_CARD_ELEMENT>(
   props: DialogCardProps<E>,
-) {
+): React.JSX.Element {
   const {
     __unstable_autoFocus: autoFocus,
     __unstable_hideCloseButton: hideCloseButton,

package/src/core/components/dialog/dialogContext.ts

@@ -1,4 +1,5 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
+import type {Context} from 'react'
 
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import type {DialogPosition} from './types'
@@ -16,7 +17,5 @@ export interface DialogContextValue {
 /**
  * @internal
  */
-export const DialogContext = createGlobalScopedContext<DialogContextValue>(
-  '@sanity/ui/context/dialog',
-  {version: 0.0},
-)
+export const DialogContext: Context<DialogContextValue> =
+  createGlobalScopedContext<DialogContextValue>('@sanity/ui/v3/dialog', {version: 0.0})

package/src/core/components/dialog/dialogProvider.tsx

@@ -1,5 +1,5 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
-import {type ReactElement, type ReactNode, useMemo} from 'react'
+import {type ReactNode, useMemo} from 'react'
 
 import {DialogContext, type DialogContextValue} from './dialogContext'
 import type {DialogPosition} from './types'
@@ -18,7 +18,7 @@ export interface DialogProviderProps {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function DialogProvider(props: DialogProviderProps): ReactElement {
+export function DialogProvider(props: DialogProviderProps): React.JSX.Element {
   const {children, position, zOffset} = props
 
   const contextValue: DialogContextValue = useMemo(

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

package/src/core/components/hotkeys/__workshop__/plain.tsx

@@ -1,6 +1,6 @@
 import {Flex, Hotkeys} from '@sanity/ui'
 
-export default function PlainStory() {
+export default function PlainStory(): React.JSX.Element {
   return (
     <Flex align="center" height="fill" justify="center">
       <Hotkeys keys={['Ctrl', 'Shift', 'P']} />