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

package/src/core/components/menu/menuItem.tsx

@@ -4,7 +4,7 @@ import type {
   RadiusStyleProps,
   ResponsiveProp,
 } from '@sanity/ui/css'
-import type {FontTextSize, Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ElementTone, FontTextSize} from '@sanity/ui/theme'
 import {
   type ElementType,
   isValidElement,
@@ -23,7 +23,7 @@ import {Box} from '../../primitives/box/box'
 import {Flex} from '../../primitives/flex/flex'
 import {Selectable} from '../../primitives/selectable/selectable'
 import {Text} from '../../primitives/text/text'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {Hotkeys} from '../hotkeys/hotkeys'
 import {useMenu} from './useMenu'
 
@@ -41,10 +41,8 @@ export type MenuItemOwnProps = GapStyleProps &
     iconRight?: ElementType | ReactNode
     pressed?: boolean
     selected?: boolean
-    /** @deprecated Use `gap` instead. */
-    space?: ResponsiveProp<Space>
     text?: ReactNode
-    tone?: ThemeColorStateToneKey
+    tone?: ElementTone
   }
 
 /** @public */
@@ -59,13 +57,13 @@ export type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> =
 /** @public */
 export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITEM_ELEMENT>(
   props: MenuItemProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_MENU_ITEM_ELEMENT,
     children,
     disabled,
     fontSize = 1,
-    gap,
+    gap = 3,
     gapX,
     gapY,
     hotkeys,
@@ -83,22 +81,13 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
     radius = 2,
     ref: forwardedRef,
     selected: selectedProp,
-    space = 3,
     text,
     tone = 'default',
     ...rest
   } = props as MenuItemProps<typeof DEFAULT_MENU_ITEM_ELEMENT>
 
   const menu = useMenu()
-  const {
-    activeElement,
-    mount,
-    onItemClick,
-    onItemMouseEnter: _onItemMouseEnter,
-    onItemMouseLeave: _onItemMouseLeave,
-  } = menu
-  const onItemMouseEnter = _onItemMouseEnter ?? menu.onMouseEnter
-  const onItemMouseLeave = _onItemMouseLeave ?? menu.onMouseLeave
+  const {activeElement, mount, onItemClick, onItemMouseEnter, onItemMouseLeave} = menu
   const [rootElement, setRootElement] = useState<HTMLButtonElement | null>(null)
   const active = Boolean(activeElement) && activeElement === rootElement
   const ref = useRef<HTMLButtonElement | null>(null)
@@ -157,7 +146,7 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
       type={as === 'button' ? 'button' : undefined}
     >
       {(IconComponent || text || IconRightComponent) && (
-        <Flex as="span" gap={gap ?? space} gapX={gapX} gapY={gapY} align="center" {...paddingProps}>
+        <Flex as="span" gap={gap} gapX={gapX} gapY={gapY} align="center" {...paddingProps}>
           {IconComponent && (
             <Text muted size={fontSize}>
               {isValidElement(IconComponent) && IconComponent}

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

@@ -3,7 +3,7 @@ import {Box, Card, Tab, TabList, TabPanel, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 import {useState} from 'react'
 
-export default function ExampleStory() {
+export default function ExampleStory(): React.JSX.Element {
   const [tab, setTab] = useState('foo')
   const useLongTitle = useBoolean('Use long title', false)
 

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

package/src/core/components/tab/tab.tsx

@@ -1,5 +1,5 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
-import type {FontTextSize, Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {FontTextSize, Space, ElementTone} from '@sanity/ui/theme'
 import {
   type ElementType,
   type FocusEvent,
@@ -11,7 +11,7 @@ import {
 } from 'react'
 
 import {Button} from '../../primitives/button/button'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_TAB_ELEMENT = 'button'
@@ -29,7 +29,7 @@ export type TabOwnProps = {
   'label'?: ReactNode
   'padding'?: ResponsiveProp<Space>
   'selected'?: boolean
-  'tone'?: ThemeColorStateToneKey
+  'tone'?: ElementTone
 }
 
 /** @public */
@@ -39,7 +39,9 @@ export type TabElementType = 'button' | ComponentType
 export type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>
 
 /** @public */
-export function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(props: TabProps<E>) {
+export function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(
+  props: TabProps<E>,
+): React.JSX.Element {
   const {
     as = DEFAULT_TAB_ELEMENT,
     icon,

package/src/core/components/tab/tabList.tsx

@@ -1,5 +1,3 @@
-import {type ResponsiveProp} from '@sanity/ui/css'
-import type {Space} from '@sanity/ui/theme'
 import {
   Children,
   cloneElement,
@@ -10,7 +8,7 @@ import {
 } from 'react'
 
 import {Flex, type FlexOwnProps} from '../../primitives/flex/flex'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import type {TabProps} from './tab'
 
 /** @public */
@@ -22,8 +20,6 @@ export type TabListChild = ReactElement<Props<TabProps, 'button'>> | null | unde
 /** @public */
 export type TabListOwnProps = Omit<FlexOwnProps, 'as' | 'height'> & {
   children: TabListChild[]
-  /** @deprecated Use `gap` instead */
-  space?: ResponsiveProp<Space>
 }
 
 /** @public */
@@ -38,12 +34,11 @@ export type TabListProps<E extends TabListElementType = TabListElementType> = Pr
 /** @public */
 export function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_ELEMENT>(
   props: TabListProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_TAB_LIST_ELEMENT,
     children: childrenProp,
     gap = 1,
-    space = 1,
     wrap = 'nowrap',
     ...rest
   } = props as TabListProps<typeof DEFAULT_TAB_LIST_ELEMENT>
@@ -80,7 +75,7 @@ export function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_E
       data-ui="TabList"
       {...rest}
       as={as}
-      gap={gap ?? space}
+      gap={gap}
       onKeyDown={handleKeyDown}
       role="tablist"
       wrap={wrap}

package/src/core/components/tab/tabPanel.tsx

@@ -1,5 +1,5 @@
 import {Box, type BoxOwnProps} from '../../primitives/box/box'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_TAB_PANEL_ELEMENT = 'div'
@@ -25,7 +25,7 @@ export type TabPanelProps<E extends TabPanelElementType = TabPanelElementType> =
 /** @public */
 export function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANEL_ELEMENT>(
   props: TabPanelProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_TAB_PANEL_ELEMENT,
     children,

package/src/core/components/toast/__workshop__/hook.tsx

@@ -1,6 +1,6 @@
 import {Box, Button, Inline, ToastProvider, useToast} from '@sanity/ui'
 
-export default function HookStory() {
+export default function HookStory(): React.JSX.Element {
   const toast = useToast()
 
   return (

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

package/src/core/components/toast/__workshop__/toast.tsx

@@ -3,7 +3,7 @@ import {useAction, useBoolean, useSelect, useString, useText} from '@sanity/ui-w
 
 import {WORKSHOP_TOAST_STATUS_OPTIONS} from '$workshop'
 
-export default function ToastStory() {
+export default function ToastStory(): React.JSX.Element {
   const closable = useBoolean('Closable', false)
   const title = useString('Title', 'Toast title')
   const status = useSelect('Status', WORKSHOP_TOAST_STATUS_OPTIONS)

package/src/core/components/toast/toast.test.tsx

@@ -1,6 +1,7 @@
 import {describe, expect, it, vi} from 'vitest'
 
-import {render} from '../../../../test'
+import {render} from '$test/utils'
+
 import {ToastContext} from './toastContext'
 import type {ToastContextValue} from './types'
 import {useToast} from './useToast'

package/src/core/components/toast/toast.tsx

@@ -10,7 +10,7 @@ import {Card} from '../../primitives/card/card'
 import {Flex} from '../../primitives/flex/flex'
 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'
 
 /** @internal */
 export const DEFAULT_TOAST_ELEMENT = 'li'
@@ -65,7 +65,7 @@ const BUTTON_TONE = {
  */
 export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
   props: ToastProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_TOAST_ELEMENT,
     closable,

package/src/core/components/toast/toastContext.ts

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

package/src/core/components/toast/toastLayer.tsx

@@ -2,7 +2,7 @@ import {type GapStyleProps, type PaddingStyleProps, toastLayer} from '@sanity/ui
 
 import {Grid} from '../../primitives/grid/grid'
 import {useLayer} from '../../primitives/layer/useLayer'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @internal */
 export const DEFAULT_TOAST_LAYER_ELEMENT = 'ul'
@@ -24,7 +24,7 @@ export type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElementT
  */
 export function ToastLayer<E extends ToastLayerElementType = typeof DEFAULT_TOAST_LAYER_ELEMENT>(
   props: ToastLayerProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_TOAST_LAYER_ELEMENT,
     children,
@@ -45,7 +45,7 @@ export function ToastLayer<E extends ToastLayerElementType = typeof DEFAULT_TOAS
       paddingX={paddingX}
       paddingY={paddingY}
       gap={gap}
-      columns={1}
+      gridTemplateColumns={1}
       style={{zIndex}}
     >
       {children}

package/src/core/components/tree/__workshop__/basic.perf.ts

@@ -8,7 +8,7 @@ function test<ElementType = unknown>(
   return {name: title, run}
 }
 
-export const perfTests = [
+export const perfTests: PerfTestProps<HTMLDivElement>[] = [
   test('Toggle tree groups', async ({target}: {target: HTMLDivElement}) => {
     const apples = await findByTestId(target, 'apples')
     const oranges = await findByTestId(target, 'oranges')

package/src/core/components/tree/__workshop__/basic.tsx

@@ -5,7 +5,7 @@ import {useCallback, useState} from 'react'
 
 import {perfTests} from './basic.perf'
 
-export default function BasicStory() {
+export default function BasicStory(): React.JSX.Element {
   const {ref, Wrapper} = usePerfTest(perfTests[0])
 
   const [id, setId] = useState('')

package/src/core/components/tree/__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/tree',
   title: 'Tree',
   stories: [
@@ -18,4 +18,6 @@ export default defineScope({
       // options: {perfTests: () => import('./basic.perf')},
     },
   ],
-})
+}
+
+export default scope

package/src/core/components/tree/__workshop__/tabFromElement.tsx

@@ -5,7 +5,7 @@ import {useCallback, useState} from 'react'
 
 import {perfTests} from './basic.perf'
 
-export default function BasicStory() {
+export default function BasicStory(): React.JSX.Element {
   const {ref, Wrapper} = usePerfTest(perfTests[0])
 
   const [id, setId] = useState('')

package/src/core/components/tree/tree.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react'
 
 import {Stack} from '../../primitives/stack/stack'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
 import {TreeContext} from './treeContext'
 import type {TreeContextValue, TreeState} from './types'
@@ -26,8 +26,6 @@ export const DEFAULT_TREE_ELEMENT = 'div'
  */
 export type TreeOwnProps = {
   gap?: ResponsiveProp<Space>
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
 }
 
 /** @beta */
@@ -40,11 +38,12 @@ export type TreeProps<E extends TreeElementType = TreeElementType> = Props<TreeO
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(props: TreeProps<E>) {
+export function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
+  props: TreeProps<E>,
+): React.JSX.Element {
   const {
     children,
-    gap,
-    space = 1,
+    gap = 1,
     onFocus,
     ref: forwardedRef,
     ...rest
@@ -103,15 +102,15 @@ export function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(pr
     () => ({
       version: 0.0,
       focusedElement: focusedElement || itemElements[0] || null,
+      gap,
       level: 0,
       path,
       registerItem,
       setExpanded,
       setFocusedElement,
-      space,
       state,
     }),
-    [focusedElement, itemElements, path, registerItem, setExpanded, space, state],
+    [focusedElement, gap, itemElements, path, registerItem, setExpanded, state],
   )
 
   const handleKeyDown = useCallback(
@@ -236,7 +235,7 @@ export function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(pr
         as="ul"
         data-ui="Tree"
         {...rest}
-        gap={gap ?? space}
+        gap={gap}
         onFocus={handleFocus}
         onKeyDown={handleKeyDown}
         ref={ref}

package/src/core/components/tree/treeContext.ts

@@ -1,10 +1,10 @@
+import type {Context} from 'react'
+
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import type {TreeContextValue} from './types'
 
 /**
  * @internal
  */
-export const TreeContext = createGlobalScopedContext<TreeContextValue | null>(
-  '@sanity/ui/context/tree',
-  null,
-)
+export const TreeContext: Context<TreeContextValue | null> =
+  createGlobalScopedContext<TreeContextValue | null>('@sanity/ui/v3/tree', null)

package/src/core/components/tree/treeGroup.tsx

@@ -1,7 +1,5 @@
-import {memo, type ReactElement} from 'react'
-
 import {Stack} from '../../primitives/stack/stack'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {useTree} from './useTree'
 
 /** @public */
@@ -21,9 +19,9 @@ export type TreeGroupProps<E extends TreeGroupElementType = TreeGroupElementType
   E
 >
 
-export const TreeGroup = memo(function TreeGroup(
+export const TreeGroup = function TreeGroup(
   props: Props<TreeGroupProps, 'div'>,
-): ReactElement {
+): React.JSX.Element {
   const {
     children,
     expanded = false,
@@ -38,11 +36,11 @@ export const TreeGroup = memo(function TreeGroup(
       data-ui="TreeGroup"
       {...rest}
       hidden={!expanded}
-      marginTop={tree.space}
+      marginTop={tree.gap}
       role="group"
-      gap={tree.space}
+      gap={tree.gap}
     >
       {children}
     </Stack>
   )
-})
+}

package/src/core/components/tree/treeItem.tsx

@@ -1,6 +1,6 @@
 import {ToggleArrowRightIcon} from '@sanity/icons'
 import {type ResponsiveProp, treeItem, vars} from '@sanity/ui/css'
-import type {FontTextSize, Space, ThemeFontWeightKey} from '@sanity/ui/theme'
+import type {FontTextSize, FontWeight, Space} from '@sanity/ui/theme'
 import {
   type ElementType,
   type KeyboardEvent,
@@ -20,7 +20,7 @@ import type {CardOwnProps} from '../../primitives/card/card'
 import {Flex} from '../../primitives/flex/flex'
 import {Selectable, type SelectableElementType} from '../../primitives/selectable/selectable'
 import {Text} from '../../primitives/text/text'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 import {TreeContext} from './treeContext'
 import {TreeGroup} from './treeGroup'
 import {useTree} from './useTree'
@@ -42,7 +42,7 @@ export type TreeItemOwnProps = CardOwnProps & {
   padding?: ResponsiveProp<Space>
   space?: ResponsiveProp<Space>
   text?: ReactNode
-  weight?: ThemeFontWeightKey
+  weight?: FontWeight
 }
 
 /** @beta */
@@ -60,7 +60,7 @@ export type TreeItemProps<E extends TreeItemElementType = TreeItemElementType> =
  */
 export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITEM_ELEMENT>(
   props: TreeItemProps<E>,
-) {
+): React.JSX.Element {
   const {
     children,
     className,

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

@@ -14,11 +14,11 @@ export interface TreeState {
 export interface TreeContextValue {
   version: 0.0
   focusedElement: HTMLElement | null
+  gap: ResponsiveProp<Space>
   level: number
   path: string[]
   registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
   setExpanded: (path: string, expanded: boolean) => void
   setFocusedElement: (focusedElement: HTMLElement | null) => void
-  space: ResponsiveProp<Space>
   state: TreeState
 }

package/src/core/components/virtualList/__workshop__/changingProps.tsx

@@ -3,7 +3,7 @@ import {useCallback, useState} from 'react'
 
 const data = Array.from(new Array(1000)).map((_, key) => ({key}))
 
-export default function ChangingProps() {
+export default function ChangingPropsStory(): React.JSX.Element {
   const [expanded, setExpanded] = useState(false)
 
   const toggleExpand = useCallback(() => setExpanded((v) => !v), [])

package/src/core/components/virtualList/__workshop__/elementScroll.tsx

@@ -3,7 +3,7 @@ import {useCallback} from 'react'
 
 const data = Array.from(new Array(1000)).map((_, key) => ({key}))
 
-export default function ElementScroll() {
+export default function ElementScrollStory(): React.JSX.Element {
   const renderItem = useCallback((item: {key: number}) => {
     return (
       <Card padding={3} radius={2} shadow={1}>

package/src/core/components/virtualList/__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/virtual-list',
   title: 'VirtualList',
   stories: [
@@ -26,4 +26,6 @@ export default defineScope({
       component: lazy(() => import('./changingProps')),
     },
   ],
-})
+}
+
+export default scope

package/src/core/components/virtualList/__workshop__/infiniteList.tsx

@@ -11,7 +11,7 @@ function getData(len: number, offsetIndex = 0): Item[] {
 
 const ITEMS_PER_PAGE = 1000
 
-export default function InfiniteList() {
+export default function InfiniteListStory(): React.JSX.Element {
   const [data, setData] = useState<Item[]>(() => getData(ITEMS_PER_PAGE))
   const offsetRef = useRef(0)
 

package/src/core/components/virtualList/__workshop__/windowScrolll.tsx

@@ -3,7 +3,7 @@ import {useCallback} from 'react'
 
 const data = Array.from(new Array(1000)).map((_, key) => ({key}))
 
-export default function Example() {
+export default function WindowScrollStory(): React.JSX.Element {
   const renderItem = useCallback((item: {key: number}) => {
     return (
       <Card padding={3} radius={2} shadow={1}>

package/src/core/components/virtualList/virtualList.tsx

@@ -13,7 +13,7 @@ import {
 import {_isScrollable} from '../../helpers/scroll'
 import {_ResizeObserver} from '../../observers/resize'
 import {Box} from '../../primitives/box/box'
-import type {ComponentType, Props} from '../../types/props'
+import type {ComponentType, Props} from '../../types'
 
 /** @beta */
 export const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'
@@ -49,7 +49,7 @@ export type VirtualListProps<E extends VirtualListElementType = VirtualListEleme
 /** @beta */
 export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VIRTUAL_LIST_ELEMENT>(
   props: VirtualListProps<E>,
-) {
+): React.JSX.Element {
   const {
     as = DEFAULT_VIRTUAL_LIST_ELEMENT,
     gap = 0,

package/src/core/constants.ts

@@ -1,20 +1,13 @@
 import type {Transition, Variant} from 'framer-motion'
 
-/**
- * @internal
- */
 export const EMPTY_ARRAY: never[] = []
 
-/**
- * @internal
- */
 export const EMPTY_RECORD: Record<string, never> = {}
 
 const POPOVER_MOTION_DURATION = 0.2
 
 /**
  * Shared `framer-motion` variants used by `Popover` and `Tooltip` components.
- * @internal
  */
 export const POPOVER_MOTION_PROPS: {
   card: {
@@ -67,17 +60,6 @@ export const POPOVER_MOTION_PROPS: {
   },
 }
 
-/**
- * @internal
- * @deprecated No longer used.
- */
-export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | 'right'> = {
-  top: 'bottom',
-  right: 'left',
-  bottom: 'top',
-  left: 'right',
-}
-
 export const Z_OFFSETS = {
   dialog: 600,
   popover: 400,

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