@sanity/ui 3.0.0-static.27 → 3.0.0-static.29

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

@@ -1,4 +1,4 @@
-import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {Radius, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {
   cloneElement,
   type FocusEvent,
@@ -14,8 +14,10 @@ import {
   useState,
 } from 'react'
 
-import {type ButtonProps, Popover, type PopoverProps} from '../../primitives'
-import type {Placement, Props, Radius} from '../../types'
+import type {ButtonProps} from '../../primitives/button'
+import {Popover, type PopoverProps} from '../../primitives/popover'
+import type {Placement} from '../../types/placement'
+import type {Props} from '../../types/props'
 import type {MenuProps} from './menu'
 
 /** @public */

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

@@ -1,6 +1,6 @@
 import {menuDivider} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_MENU_DIVIDER_ELEMENT = 'hr'

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

@@ -13,9 +13,12 @@ import {
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-import {Box, Flex, Popover, type PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import type {ComponentType, Props} from '../../types'
+import {Box} from '../../primitives/box'
+import {Flex} from '../../primitives/flex'
+import {Popover, type PopoverProps} from '../../primitives/popover'
+import {Text} from '../../primitives/text'
+import type {ComponentType, Props} from '../../types/props'
 import {DEFAULT_MENU_ELEMENT, Menu, type MenuProps} from './menu'
 import {useMenu} from './useMenu'
 
@@ -199,13 +202,14 @@ export function MenuGroup<E extends MenuGroupElementType = typeof DEFAULT_MENU_G
         {...rest}
         aria-pressed={as === 'button' ? withinMenu : undefined}
         as={as}
-        data-pressed={as !== 'button' ? withinMenu : undefined}
-        data-selected={!withinMenu && active ? '' : undefined}
+        // data-pressed={as !== 'button' ? withinMenu : undefined}
+        // data-selected={!withinMenu && active ? '' : undefined}
         onClick={handleClick}
         onKeyDown={handleKeyDown}
         onMouseEnter={handleMouseEnter}
         radius={radius}
         ref={setRootElement}
+        selected={withinMenu}
         tabIndex={-1}
         tone={tone}
         type={as === 'button' ? 'button' : undefined}

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

@@ -19,9 +19,11 @@ import {
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-import {Box, Flex, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import type {ComponentType, Props} from '../../types'
+import {Box} from '../../primitives/box'
+import {Flex} from '../../primitives/flex'
+import {Text} from '../../primitives/text'
+import type {ComponentType, Props} from '../../types/props'
 import {Hotkeys} from '../hotkeys'
 import {useMenu} from './useMenu'
 

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

@@ -10,8 +10,8 @@ import {
   useRef,
 } from 'react'
 
-import {Button} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {Button} from '../../primitives/button'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_TAB_ELEMENT = 'button'

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

@@ -9,8 +9,8 @@ import {
   useState,
 } from 'react'
 
-import {Flex, type FlexOwnProps} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {Flex, type FlexOwnProps} from '../../primitives/flex'
+import type {ComponentType, Props} from '../../types/props'
 import type {TabProps} from './tab'
 
 /** @public */

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

@@ -1,5 +1,5 @@
-import {Box, type BoxOwnProps} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {Box, type BoxOwnProps} from '../../primitives/box'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_TAB_PANEL_ELEMENT = 'div'

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

@@ -1,34 +1,40 @@
 import {CloseIcon} from '@sanity/icons'
 import {type RadiusStyleProps, toast} from '@sanity/ui/css'
 import {motion, type Variant, type Variants} from 'framer-motion'
-import type {ReactNode} from 'react'
+import {type ReactNode} from 'react'
 
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
-
-/** @public */
+import {Box} from '../../primitives/box'
+import {Button} from '../../primitives/button'
+import {Card} from '../../primitives/card'
+import {Flex} from '../../primitives/flex'
+import {Stack} from '../../primitives/stack'
+import {Text} from '../../primitives/text'
+import type {ComponentType, Props} from '../../types/props'
+
+/** @internal */
 export const DEFAULT_TOAST_ELEMENT = 'li'
 
-/** @public */
+/** @internal */
 export type ToastOwnProps = RadiusStyleProps & {
   closable?: boolean
   description?: ReactNode
   onClose?: () => void
   title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
-  /** @deprecated */
   duration?: number
-  /** @deprecated */
-  updatedAt?: number
 }
 
-/** @public */
+/** @internal */
 export type ToastElementType = 'li' | ComponentType
 
-/** @public */
+/** @internal */
 export type ToastProps<E extends ToastElementType = ToastElementType> = Props<ToastOwnProps, E>
 
+// Support pattern used by Sanity Studio, that works around the lack of `duration: Infinity` support in older @sanity/ui versions
+// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
+const LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24
+
 const ROLES = {
   error: 'alert',
   warning: 'alert',
@@ -53,9 +59,9 @@ const BUTTON_TONE = {
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
  *
- * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ * Toasts can be closed with a close button, or auto-dismiss when the duration expires.
  *
- * @public
+ * @internal
  */
 export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
   props: ToastProps<E>,
@@ -64,14 +70,11 @@ export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>
     as = DEFAULT_TOAST_ELEMENT,
     closable,
     description,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     duration,
     onClose,
     radius = 3,
     title,
     status,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    updatedAt,
     ...rest
   } = props as ToastProps<typeof DEFAULT_TOAST_ELEMENT>
 
@@ -84,7 +87,7 @@ export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>
   const visualDuration: number = prefersReducedMotion ? 0 : 0.26
   const transition = visualDuration ? {type: 'spring', visualDuration, bounce: 0.25} : {duration: 0}
 
-  // const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG
+  const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG
   const initial: ContainerVariants[] = ['hidden', 'initial']
   const animate: ContainerVariants[] = ['visible', 'slideIn']
   const exit: ContainerVariants[] = ['hidden', 'slideOut']
@@ -97,6 +100,7 @@ export function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>
       role={role}
       {...rest}
       custom={visualDuration}
+      data-has-duration={hasDuration ? '' : undefined}
       radius={radius}
       shadow={2}
       tone={cardTone}

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

@@ -1,7 +1,8 @@
 import {type GapStyleProps, type PaddingStyleProps, toastLayer} from '@sanity/ui/css'
 
-import {Grid, useLayer} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {Grid} from '../../primitives/grid'
+import {useLayer} from '../../primitives/layer'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @internal */
 export const DEFAULT_TOAST_LAYER_ELEMENT = 'ul'

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

@@ -3,7 +3,7 @@ import {AnimatePresence} from 'framer-motion'
 import {startTransition, useMemo, useState} from 'react'
 
 import {useMounted} from '../../hooks/useMounted'
-import {LayerProvider} from '../../primitives'
+import {LayerProvider} from '../../primitives/layer'
 import {Toast} from './toast'
 import {ToastContext} from './toastContext'
 import {ToastLayer, type ToastLayerProps} from './toastLayer'
@@ -13,7 +13,6 @@ import type {ToastContextValue, ToastParams} from './types'
 type ToastState = {
   dismiss: () => void
   id: string
-  updatedAt: number
   params: ToastParams
 }[]
 
@@ -31,8 +30,8 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
 
   const value: ToastContextValue = useMemo(() => {
     const push = (params: ToastParams) => {
-      const id = params.id || generateToastId()
-      const duration = params.duration || 5000
+      const id = params.id ?? generateToastId()
+      const duration = params.duration ?? 5000
 
       startTransition(() => {
         setState((prevState): ToastState => {
@@ -51,10 +50,17 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
            * This function will be passed to the Toast component
            * and called either on close button click or after duration.
            */
-          const dismiss = () =>
-            startTransition(() =>
-              setState((currentState) => currentState.filter((toast) => toast.id !== id)),
-            )
+          const dismiss = () => {
+            startTransition(() => {
+              if (timeoutId) {
+                clearTimeout(timeoutId)
+              }
+
+              setState((currentState) => currentState.filter((toast) => toast.id !== id))
+            })
+          }
+
+          const timeoutId = setTimeout(dismiss, duration)
 
           /**
            * Create updated state by:
@@ -67,7 +73,6 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
             {
               dismiss,
               id,
-              updatedAt: Date.now(),
               params: {...params, duration},
             },
           ]
@@ -87,7 +92,7 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
         <LayerProvider zOffset={zOffset}>
           <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>
             <AnimatePresence initial={false} mode="popLayout">
-              {state.map(({dismiss, id, params, updatedAt}) => (
+              {state.map(({dismiss, id, params}) => (
                 <Toast
                   key={id}
                   closable={params.closable}
@@ -96,7 +101,6 @@ export function ToastProvider(props: ToastProviderProps): React.JSX.Element {
                   status={params.status}
                   title={params.title}
                   duration={params.duration}
-                  updatedAt={updatedAt}
                 />
               ))}
             </AnimatePresence>

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

@@ -11,8 +11,8 @@ import {
   useState,
 } from 'react'
 
-import {Stack} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {Stack} from '../../primitives/stack'
+import type {ComponentType, Props} from '../../types/props'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'
 import {TreeContext} from './treeContext'
 import type {TreeContextValue, TreeState} from './types'

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

@@ -1,7 +1,7 @@
 import {memo, type ReactElement} from 'react'
 
-import {Stack} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {Stack} from '../../primitives/stack'
+import type {ComponentType, Props} from '../../types/props'
 import {useTree} from './useTree'
 
 /** @public */

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

@@ -15,9 +15,12 @@ import {
   useRef,
 } from 'react'
 
-import {Box, type BoxProps, type CardOwnProps, Flex, Text} from '../../primitives'
 import {Selectable, type SelectableElementType} from '../../primitives/_selectable'
-import type {ComponentType, Props} from '../../types'
+import {Box, type BoxProps} from '../../primitives/box'
+import type {CardOwnProps} from '../../primitives/card'
+import {Flex} from '../../primitives/flex'
+import {Text} from '../../primitives/text'
+import type {ComponentType, Props} from '../../types/props'
 import {TreeContext} from './treeContext'
 import {TreeGroup} from './treeGroup'
 import {useTree} from './useTree'
@@ -32,6 +35,7 @@ export type TreeItemOwnProps = CardOwnProps & {
   icon?: ElementType
   /**
    * Allows passing a custom element type to the link component
+   * @internal
    */
   linkAs?: SelectableElementType
   onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>
@@ -86,9 +90,9 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
   const itemPath = useMemo(() => path.concat([id || '']), [id, path])
   const itemKey = itemPath.join('/')
   const itemState = tree.state[itemKey]
-  const focused = tree.focusedElement === rootRef.current
   const expanded = itemState?.expanded === undefined ? expandedProp : itemState?.expanded || false
-  const tabIndex = tree.focusedElement && tree.focusedElement === rootRef.current ? 0 : -1
+  const focused = tree.focusedElement && tree.focusedElement === rootRef.current
+  const tabIndex = focused ? 0 : -1
   const contextValue = useMemo(
     () => ({...tree, level: tree.level + 1, path: itemPath}),
     [itemPath, tree],
@@ -174,12 +178,13 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
         <Selectable
           aria-expanded={expanded}
           as={linkAs}
-          data-pressed={selected ? '' : undefined}
+          // data-pressed={selected ? '' : undefined}
           data-ui="TreeItem__box"
           href={href}
           radius={radius}
           ref={treeitemRef}
           role="treeitem"
+          selected={selected}
           tabIndex={tabIndex}
           style={{
             paddingLeft: `calc(${vars.space[2]} * ${tree.level})`,
@@ -212,9 +217,11 @@ export function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITE
     >
       <Selectable
         as="button"
-        data-pressed={selected ? '' : undefined}
+        // data-pressed={selected ? '' : undefined}
+        data-focused={focused ? '' : undefined}
         data-ui="TreeItem__box"
         radius={radius}
+        selected={selected}
         style={{
           paddingLeft: `calc(${vars.space[2]} * ${tree.level})`,
         }}

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

@@ -19,7 +19,6 @@ export interface TreeContextValue {
   registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
   setExpanded: (path: string, expanded: boolean) => void
   setFocusedElement: (focusedElement: HTMLElement | null) => void
-  // space: number | number[]
   space: ResponsiveProp<Space>
   state: TreeState
 }

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

@@ -10,10 +10,10 @@ import {
   useState,
 } from 'react'
 
-import {_isScrollable} from '../../helpers'
-import {_ResizeObserver} from '../../observers'
-import {Box} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import {_isScrollable} from '../../helpers/scroll'
+import {_ResizeObserver} from '../../observers/resize'
+import {Box} from '../../primitives/box'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @beta */
 export const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'
@@ -139,6 +139,11 @@ export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VI
     })
   }, [fromIndex, gapValue, itemHeight, onChange, scrollHeight, scrollTop, toIndex])
 
+  useEffect(() => {
+    // console.log('renderItem', renderItem)
+    setItemHeight(-1)
+  }, [renderItem])
+
   const children = useMemo(() => {
     if (!renderItem || items.length === 0) return null
 
@@ -174,7 +179,7 @@ export function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VI
           insetRight={0}
           key={key}
           position="absolute"
-          style={{top: itemIndex * (itemHeight + gapValue) - gapValue}}
+          style={{top: itemIndex * (itemHeight + gapValue)}}
         >
           {node}
         </Box>

package/src/core/helpers/focus.ts

@@ -7,10 +7,6 @@ import {
   isHTMLTextAreaElement,
 } from './element'
 
-// export const globalFocusState = {
-//   IgnoreUtilFocusChanges: false,
-// }
-
 /**
  * @internal
  */
@@ -56,16 +52,12 @@ export function attemptFocus(element: HTMLElement): boolean {
     return false
   }
 
-  // globalFocusState.IgnoreUtilFocusChanges = true
-
   try {
     element.focus()
   } catch {
     // ignore
   }
 
-  // globalFocusState.IgnoreUtilFocusChanges = false
-
   return document.activeElement === element
 }
 

package/src/core/hooks/useArrayProp.ts

@@ -1,6 +1,6 @@
 import {useState} from 'react'
 
-import {_getArrayProp} from '../helpers'
+import {_getArrayProp} from '../helpers/props'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.

package/src/core/hooks/useElementRect/__workshop__/example.tsx

@@ -1,8 +1,6 @@
-import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
+import {Box, Card, Code, Container, Grid, Stack, Text, useElementRect} from '@sanity/ui'
 import {useState} from 'react'
 
-import {Grid} from '../../../primitives'
-
 export default function ExampleStory() {
   const [element, setElement] = useState<HTMLElement | null>(null)
   const rect = useElementRect(element)

package/src/core/hooks/useElementSize.ts

@@ -1,6 +1,6 @@
 import {useEffect, useState} from 'react'
 
-import {_elementSizeObserver, type ElementSize} from '../observers/elementSizeObserver'
+import {_elementSizeObserver, type ElementSize} from '../observers/elementSize'
 
 /**
  * Subscribe to the size of a DOM element.

package/src/core/hooks/useResponsiveProp.ts

@@ -1,7 +1,7 @@
 import type {Breakpoint, ResponsiveProp} from '@sanity/ui/css'
 import {useState} from 'react'
 
-import {_getResponsiveProp} from '../helpers'
+import {_getResponsiveProp} from '../helpers/props'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.

package/src/core/index.ts

@@ -1,8 +1,85 @@
 export * from './_compat'
-export * from './components'
-export * from './helpers'
-export * from './hooks'
-export * from './observers'
-export * from './primitives'
-export * from './types'
-export * from './utils'
+
+// components
+export * from './components/autocomplete/autocomplete'
+export * from './components/autocomplete/types'
+export * from './components/breadcrumbs'
+export * from './components/dialog'
+export * from './components/hotkeys'
+export * from './components/menu'
+export * from './components/tab'
+export * from './components/toast'
+export * from './components/tree'
+export * from './components/virtualList'
+
+// helpers
+export * from './helpers/animation'
+export * from './helpers/element'
+export * from './helpers/focus'
+export * from './helpers/props'
+export * from './helpers/scroll'
+
+// hooks
+export * from './hooks/useArrayProp'
+export * from './hooks/useClickOutside'
+export * from './hooks/useClickOutsideEvent'
+export * from './hooks/useCustomValidity'
+export * from './hooks/useElementRect'
+export * from './hooks/useElementSize'
+export * from './hooks/useForwardedRef'
+export * from './hooks/useGlobalKeyDown'
+export * from './hooks/useMatchMedia'
+export * from './hooks/useMediaIndex'
+export * from './hooks/usePrefersDark'
+export * from './hooks/usePrefersReducedMotion'
+export * from './hooks/useResponsiveProp'
+
+// observers
+export * from './observers/elementSize'
+export * from './observers/resize'
+
+// primitives
+export * from './primitives/_selectable'
+export * from './primitives/arrow'
+export * from './primitives/avatar'
+export * from './primitives/badge'
+export * from './primitives/box'
+export * from './primitives/button'
+export * from './primitives/card'
+export * from './primitives/checkbox'
+export * from './primitives/code'
+export * from './primitives/container'
+export * from './primitives/flex'
+export * from './primitives/grid'
+export * from './primitives/heading'
+export * from './primitives/inline'
+export * from './primitives/kbd'
+export * from './primitives/label'
+export * from './primitives/layer'
+export * from './primitives/popover'
+export * from './primitives/radio'
+export * from './primitives/root'
+export * from './primitives/select'
+export * from './primitives/skeleton'
+export * from './primitives/spinner'
+export * from './primitives/srOnly'
+export * from './primitives/stack'
+export * from './primitives/switch'
+export * from './primitives/text'
+export * from './primitives/textArea'
+export * from './primitives/textInput'
+export * from './primitives/tooltip'
+export * from './primitives/types'
+
+// utils
+export * from './utils/boundaryElement'
+export * from './utils/elementQuery'
+export * from './utils/errorBoundary'
+export * from './utils/portal'
+
+// types
+export * from './types/gridItem'
+export * from './types/placement'
+export * from './types/props'
+export * from './types/radius'
+export * from './types/textAlign'

package/src/core/observers/{elementSizeObserver.ts → elementSize.ts}

@@ -1,4 +1,4 @@
-import {_ResizeObserver} from './resizeObserver'
+import {_ResizeObserver} from './resize'
 
 /**
  * @beta

package/src/core/primitives/_selectable/index.ts

@@ -1 +1,2 @@
 export * from './selectable'
+export * from './types'

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

@@ -1,6 +1,7 @@
 import {_selectable, type SelectableStyleProps} from '@sanity/ui/css'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import type {ComponentType, Props, SelectableTone} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Box, type BoxOwnProps} from '../box'
 
 /** @internal */
@@ -11,7 +12,8 @@ export type SelectableOwnProps = BoxOwnProps &
   SelectableStyleProps & {
     disabled?: boolean
     href?: string
-    tone?: SelectableTone
+    selected?: boolean
+    tone?: ThemeColorStateToneKey
     type?: 'button'
   }
 
@@ -32,9 +34,17 @@ export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELE
     as = DEFAULT_SELECTABLE_ELEMENT,
     className,
     radius,
+    selected,
     tone,
     ...rest
   } = props as SelectableProps<typeof DEFAULT_SELECTABLE_ELEMENT>
 
-  return <Box {...rest} as={as} className={_selectable({className, radius, tone})} />
+  return (
+    <Box
+      {...rest}
+      as={as}
+      className={_selectable({className, radius, tone})}
+      data-selected={selected ? '' : undefined}
+    />
+  )
 }

package/src/core/{types/selectable.ts → primitives/_selectable/types.ts}

@@ -1,7 +1,7 @@
 import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 /**
- * @public
+ * @internal
  * @deprecated Use `ThemeColorStateToneKey` instead
  */
 export type SelectableTone = ThemeColorStateToneKey

package/src/core/primitives/arrow/arrow.tsx

@@ -2,7 +2,7 @@ import {_arrow, _arrowShape, _arrowStroke, _arrowStrokeMask, _arrowSvg, vars} fr
 import {assignInlineVars} from '@vanilla-extract/dynamic'
 import {useMemo} from 'react'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {compileCommands, getRoundedCommands, type Point} from './cmds'
 
 /** @internal */