@sanity/ui 3.0.0-static.17 → 3.0.0-static.19

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

@@ -1,19 +1,19 @@
 import {CloseIcon} from '@sanity/icons'
 import {
+  _composeClassNames,
   _inputElement,
   _inputPresentation,
-  composeClassNames,
-  InputStyleProps,
-  ResponsiveProp,
+  type InputStyleProps,
+  type ResponsiveProp,
   textInput,
 } from '@sanity/ui/css'
-import {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
+import type {Space, ThemeFontWeightKey} from '@sanity/ui/theme'
 import {
-  CSSProperties,
-  ElementType,
+  type CSSProperties,
+  type ElementType,
   isValidElement,
-  MouseEvent,
-  ReactNode,
+  type MouseEvent,
+  type ReactNode,
   useCallback,
   useImperativeHandle,
   useMemo,
@@ -24,9 +24,9 @@ import {isValidElementType} from 'react-is'
 import {EMPTY_RECORD} from '../../constants'
 import {useArrayProp, useCustomValidity} from '../../hooks'
 import {isRecord} from '../../lib/isRecord'
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {Box} from '../box'
-import {Button, ButtonProps} from '../button'
+import {Button, type ButtonProps} from '../button'
 import {Text} from '../text'
 
 /** @public */
@@ -177,7 +177,7 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
     <Box
       align="center"
       as="span"
-      className={composeClassNames(
+      className={_composeClassNames(
         className,
         textInput({
           border,
@@ -190,7 +190,9 @@ export function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_I
       )}
       data-icon-left={IconComponent ? '' : undefined}
       data-icon-right={IconRightComponent ? '' : undefined}
+      data-invalid={customValidity ? '' : undefined}
       data-prefix={prefix ? '' : undefined}
+      data-read-only={!disabled && readOnly ? '' : undefined}
       data-suffix={suffix ? '' : undefined}
       data-ui="TextInput"
       display="flex"

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

@@ -55,7 +55,7 @@ export default function CustomPortalStory() {
             <Text>Boundary element</Text>
             <Flex align="center" height="fill" justify="center">
               <Flex justify="center">
-                <Stack space={2}>
+                <Stack gap={2}>
                   <Tooltip
                     boundaryElement={useBoundaryElement ? boundaryElement : null}
                     content={<Text size={1}>{content}</Text>}
@@ -87,7 +87,7 @@ export default function CustomPortalStory() {
       />
 
       <Portal __unstable_name="portal1">
-        <Stack space={4}>
+        <Stack gap={4}>
           <Text size={1} weight="medium">
             Portal 1 content
           </Text>

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

@@ -40,7 +40,7 @@ export default function OverflowingBoundaryStory() {
         >
           <Flex align="center" height="fill" justify="center">
             <Flex justify="center">
-              <Stack space={2}>
+              <Stack gap={2}>
                 <Code size={1}>Placement: {placement}</Code>
                 <Button
                   disabled={buttonsVisible}

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

@@ -1,4 +1,5 @@
 import {Button, Card, Flex, Stack, Text, Tooltip, TooltipDelayGroupProvider} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
 import {useBoolean, useNumber, useSelect, useText} from '@sanity/ui-workshop'
 
 import {
@@ -29,9 +30,9 @@ export default function PropsStory() {
         gap={4}
       >
         <Stack
+          gap={4}
           padding={4}
-          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
-          space={4}
+          style={{outline: `1px solid ${vars.color.border}`, width: '100%', maxWidth: '640px'}}
         >
           <Text align="center" size={3}>
             Standalone tooltip
@@ -54,9 +55,9 @@ export default function PropsStory() {
           </Flex>
         </Stack>
         <Stack
+          gap={4}
           padding={4}
-          style={{outline: '1px solid var(--card-border-color)', width: '100%', maxWidth: '640px'}}
-          space={4}
+          style={{outline: `1px solid ${vars.color.border}`, width: '100%', maxWidth: '640px'}}
         >
           <Text align="center" size={3}>
             Grouped tooltips

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

@@ -1,4 +1,4 @@
-import {Placement} from '../../types'
+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,23 +1,24 @@
-/** @jest-environment jsdom */
-
 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 {Button, Text} from '..'
-import {Tooltip, TooltipDelayGroupProvider} from '.'
+import {Button} from '../button'
+import {Text} from '../text'
+import {Tooltip} from './tooltip'
+import {TooltipDelayGroupProvider} from './tooltipDelayGroup'
 
-// Fake timers using Jest
+// Fake timers
 beforeEach(() => {
-  jest.useFakeTimers()
+  vi.useFakeTimers()
 })
 
-// Running all pending timers and switching to real timers using Jest
+// Running all pending timers and switching to real timers
 afterEach(() => {
-  jest.runOnlyPendingTimers()
-  jest.useRealTimers()
+  vi.runOnlyPendingTimers()
+  vi.useRealTimers()
 })
 
 describe('Tooltip', () => {
@@ -44,7 +45,7 @@ describe('Tooltip', () => {
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
     })
     it('should support delays to show and hide the tooltip.', () => {
-      jest.useFakeTimers()
+      vi.useFakeTimers()
       const delay = 200
 
       render(
@@ -64,10 +65,10 @@ describe('Tooltip', () => {
 
       fireEvent.mouseEnter(button)
 
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
       // Content should not be rendered yet
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
 
       // Validate tooltip content is rendered
       screen.getByText('Tooltip content')
@@ -75,12 +76,12 @@ describe('Tooltip', () => {
       fireEvent.mouseOut(button)
       // Validate tooltip content is still showing.
       screen.getByText('Tooltip content')
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => vi.advanceTimersByTime(delay))
       // Validate tooltip content is not rendered anymore
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
     })
     it('should support different open and close delays to show and hide the tooltip.', () => {
-      jest.useFakeTimers()
+      vi.useFakeTimers()
       const openDelay = 200
       const closeDelay = 150
 
@@ -104,10 +105,10 @@ describe('Tooltip', () => {
 
       fireEvent.mouseEnter(button)
 
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
       // Content should not be rendered yet
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
 
       // Validate tooltip content is rendered
       screen.getByText('Tooltip content')
@@ -115,7 +116,7 @@ describe('Tooltip', () => {
       fireEvent.mouseOut(button)
       // Validate tooltip content is still showing.
       screen.getByText('Tooltip content')
-      act(() => jest.advanceTimersByTime(closeDelay))
+      act(() => vi.advanceTimersByTime(closeDelay))
       // Validate tooltip content is not rendered anymore
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
     })
@@ -125,7 +126,7 @@ describe('Tooltip', () => {
     it('should support groups with the same delay to open and close.', () => {
       const delay = 150
 
-      jest.useFakeTimers()
+      vi.useFakeTimers()
       render(
         <TooltipDelayGroupProvider delay={delay}>
           <Tooltip content={<Text size={1}>{'Tooltip 1'}</Text>} placement={'top'} delay={400}>
@@ -150,11 +151,11 @@ describe('Tooltip', () => {
 
       // Hovers on first button, it should show first tooltip only
       fireEvent.mouseEnter(button1)
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
       // Content should not be rendered yet, we have a delay of 150ms
       expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
 
       // Validate Tooltip 1 is rendered
       screen.getByText('Tooltip 1')
@@ -165,38 +166,38 @@ describe('Tooltip', () => {
       fireEvent.mouseEnter(button2)
 
       // Validate Tooltip 1 is not rendered, now tooltip 2 is open.
-      act(() => jest.advanceTimersByTime(1))
+      act(() => vi.advanceTimersByTime(1))
       expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(delay + 1))
+      act(() => vi.advanceTimersByTime(delay + 1))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
 
       // Hovering again, should trigger the tooltip to show immediately, as the group is not deactivated yet
       fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(1))
+      act(() => vi.advanceTimersByTime(1))
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(delay + 1))
+      act(() => vi.advanceTimersByTime(delay + 1))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
 
       // Wait 200ms, the group is deactivated, hovering again should trigger the delay
-      act(() => jest.advanceTimersByTime(200))
+      act(() => vi.advanceTimersByTime(200))
       fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(delay / 2))
+      act(() => vi.advanceTimersByTime(delay / 2))
       screen.getByText('Tooltip 2')
     })
     it('should support groups with different open and close delay.', () => {
       const openDelay = 250
       const closeDelay = 150
 
-      jest.useFakeTimers()
+      vi.useFakeTimers()
       render(
         <TooltipDelayGroupProvider
           delay={{
@@ -226,11 +227,11 @@ describe('Tooltip', () => {
 
       // Hovers on first button, it should show first tooltip only
       fireEvent.mouseEnter(button1)
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
       // Content should not be rendered yet, we have a delay of2150ms
       expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
 
       // Validate Tooltip 1 is rendered
       screen.getByText('Tooltip 1')
@@ -241,31 +242,31 @@ describe('Tooltip', () => {
       fireEvent.mouseEnter(button2)
 
       // Validate Tooltip 1 is not rendered, now tooltip 2 is open.
-      act(() => jest.advanceTimersByTime(1))
+      act(() => vi.advanceTimersByTime(1))
       expect(screen.queryByText('Tooltip 1')).not.toBeInTheDocument()
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(closeDelay + 1))
+      act(() => vi.advanceTimersByTime(closeDelay + 1))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
 
       // Hovering again, should trigger the tooltip to show immediately, as the group is not deactivated yet
       fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(1))
+      act(() => vi.advanceTimersByTime(1))
       screen.getByText('Tooltip 2')
 
       // Validate tooltip content is not rendered anymore
       fireEvent.mouseOut(button2)
-      act(() => jest.advanceTimersByTime(closeDelay + 1))
+      act(() => vi.advanceTimersByTime(closeDelay + 1))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
 
       // Wait 200ms, the group is deactivated, hovering again should trigger the delay
-      act(() => jest.advanceTimersByTime(200))
+      act(() => vi.advanceTimersByTime(200))
       fireEvent.mouseEnter(button2)
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
       expect(screen.queryByText('Tooltip 2')).not.toBeInTheDocument()
-      act(() => jest.advanceTimersByTime(openDelay / 2))
+      act(() => vi.advanceTimersByTime(openDelay / 2))
       screen.getByText('Tooltip 2')
     })
   })
@@ -274,7 +275,7 @@ describe('Tooltip', () => {
     it('Standalone tooltip closes immediately with Escape key', () => {
       const delay = 150
 
-      jest.useFakeTimers()
+      vi.useFakeTimers()
 
       render(
         <Tooltip
@@ -290,8 +291,8 @@ describe('Tooltip', () => {
 
       // Validate tooltip content is not rendered
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      fireEvent.focus(button)
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => fireEvent.focus(button))
+      act(() => vi.advanceTimersByTime(delay))
 
       // Validate tooltip content is rendered
       screen.getByText('Tooltip content')
@@ -305,7 +306,7 @@ describe('Tooltip', () => {
     it('With <TooltipDelayGroupProvider />  closes immediately with Escape key', () => {
       const delay = 150
 
-      jest.useFakeTimers()
+      vi.useFakeTimers()
 
       render(
         <TooltipDelayGroupProvider delay={{close: delay}}>
@@ -323,9 +324,9 @@ describe('Tooltip', () => {
 
       // Validate tooltip content is not rendered
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      fireEvent.focus(button)
+      act(() => fireEvent.focus(button))
 
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => vi.advanceTimersByTime(delay))
 
       // Validate tooltip content is rendered
       screen.getByText('Tooltip content')
@@ -352,9 +353,9 @@ describe('Tooltip', () => {
 
       // Assertion: tooltip does not exist in the document
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      fireEvent.focus(button)
+      act(() => fireEvent.focus(button))
 
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => vi.advanceTimersByTime(delay))
 
       // Assertion: the tooltip is not visible
       expect(screen.queryByText('Tooltip content')).toBeVisible()
@@ -378,9 +379,9 @@ describe('Tooltip', () => {
 
       // Assertion: tooltip does not exist in the document
       expect(screen.queryByText('Tooltip content')).not.toBeInTheDocument()
-      fireEvent.focus(button)
+      act(() => fireEvent.focus(button))
 
-      act(() => jest.advanceTimersByTime(delay))
+      act(() => vi.advanceTimersByTime(delay))
 
       // Assertion: the tooltip is not visible
       expect(screen.queryByText('Tooltip content')).toBeVisible()
@@ -393,12 +394,12 @@ describe('Tooltip', () => {
   })
 
   describe('Used defined events on <Tooltip /> child should fire correctly', () => {
-    const handleBlur = jest.fn()
-    const handleClick = jest.fn()
-    const handleContextMenu = jest.fn()
-    const handleFocus = jest.fn()
-    const handleMouseEnter = jest.fn()
-    const handleMouseLeave = jest.fn()
+    const handleBlur = vi.fn()
+    const handleClick = vi.fn()
+    const handleContextMenu = vi.fn()
+    const handleFocus = vi.fn()
+    const handleMouseEnter = vi.fn()
+    const handleMouseLeave = vi.fn()
 
     beforeEach(() => {
       render(
@@ -418,35 +419,35 @@ describe('Tooltip', () => {
       )
     })
 
-    afterEach(() => jest.clearAllMocks())
+    afterEach(() => vi.clearAllMocks())
 
     it('should fire the onBlur event', () => {
-      fireEvent.blur(screen.getByTestId('btn'))
+      act(() => fireEvent.blur(screen.getByTestId('btn')))
       expect(handleBlur).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onClick event', () => {
-      fireEvent.click(screen.getByTestId('btn'))
+      act(() => fireEvent.click(screen.getByTestId('btn')))
       expect(handleClick).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onContextMenu event', () => {
-      fireEvent.contextMenu(screen.getByTestId('btn'))
+      act(() => fireEvent.contextMenu(screen.getByTestId('btn')))
       expect(handleContextMenu).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onFocus event', () => {
-      fireEvent.focus(screen.getByTestId('btn'))
+      act(() => fireEvent.focus(screen.getByTestId('btn')))
       expect(handleFocus).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onMouseEnter event', () => {
-      fireEvent.mouseEnter(screen.getByTestId('btn'))
+      act(() => fireEvent.mouseEnter(screen.getByTestId('btn')))
       expect(handleMouseEnter).toHaveBeenCalledTimes(1)
     })
 
     it('should fire the onMouseLeave event', () => {
-      fireEvent.mouseLeave(screen.getByTestId('btn'))
+      act(() => fireEvent.mouseLeave(screen.getByTestId('btn')))
       expect(handleMouseLeave).toHaveBeenCalledTimes(1)
     })
   })

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

@@ -8,17 +8,22 @@ import {
   shift,
   useFloating,
 } from '@floating-ui/react-dom'
-import {composeClassNames, RadiusStyleProps, ShadowStyleProps, tooltip} from '@sanity/ui/css'
+import {
+  _composeClassNames,
+  type RadiusStyleProps,
+  type ShadowStyleProps,
+  tooltip,
+} from '@sanity/ui/css'
 import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {AnimatePresence} from 'framer-motion'
 import {
   cloneElement,
   type FocusEvent,
-  HTMLAttributes,
+  type HTMLAttributes,
   type MouseEvent as ReactMouseEvent,
   type ReactElement,
   type ReactNode,
-  RefAttributes,
+  type RefAttributes,
   useCallback,
   useEffect,
   useId,
@@ -38,7 +43,7 @@ import type {ComponentType, Placement, Props} from '../../types'
 import {type LayerOwnProps, Portal, useBoundaryElement, usePortal} from '../../utils'
 import {getElementRef} from '../../utils/getElementRef'
 import {CardProvider, useCard} from '../card'
-import {Delay} from '../types'
+import type {Delay} from '../types'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
   DEFAULT_TOOLTIP_DISTANCE,
@@ -107,7 +112,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
   const boundaryElementContext = useBoundaryElement()
 
   const {
-    animate: _animate = true,
+    animate: _animate = false,
     arrow: arrowProp = false,
     as = DEFAULT_TOOLTIP_ELEMENT,
     boundaryElement = boundaryElementContext?.element,
@@ -391,7 +396,7 @@ export function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_EL
       arrowX={arrowX}
       arrowY={arrowY}
       as={as}
-      className={composeClassNames(className, tooltip())}
+      className={_composeClassNames(className, tooltip())}
       originX={originX}
       originY={originY}
       padding={padding}

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

@@ -1,5 +1,5 @@
 import {createGlobalScopedContext} from '../../../lib/createGlobalScopedContext'
-import {TooltipDelayGroupContextValue} from './types'
+import type {TooltipDelayGroupContextValue} from './types'
 
 /**
  * @beta

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

@@ -1,9 +1,9 @@
-import {ReactElement, ReactNode, useMemo} from 'react'
+import {type ReactElement, type ReactNode, useMemo} from 'react'
 
 import {useDelayedState} from '../../../hooks/useDelayedState'
-import {Delay} from '../../types'
+import type {Delay} from '../../types'
 import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
-import {TooltipDelayGroupContextValue} from './types'
+import type {TooltipDelayGroupContextValue} from './types'
 
 /**
  * @public

package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts

@@ -1,7 +1,7 @@
 import {useContext} from 'react'
 
 import {TooltipDelayGroupContext} from './tooltipDelayGroupContext'
-import {TooltipDelayGroupContextValue} from './types'
+import type {TooltipDelayGroupContextValue} from './types'
 
 /**
  * @beta

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

@@ -1,10 +1,10 @@
 import {tooltipCard} from '@sanity/ui/css'
-import {motion, MotionStyle} from 'framer-motion'
-import {type CSSProperties, ForwardedRef, useMemo} from 'react'
+import {motion, type MotionStyle} from 'framer-motion'
+import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import {Placement} from '../../types'
-import {Arrow, Layer, LayerOwnProps, LayerProps} from '../../utils'
+import type {Placement} from '../../types'
+import {Arrow, Layer, type LayerOwnProps, type LayerProps} from '../../utils'
 import {
   DEFAULT_TOOLTIP_ARROW_HEIGHT,
   DEFAULT_TOOLTIP_ARROW_RADIUS,

package/src/core/primitives/types.ts

@@ -1,9 +1,9 @@
-import {
-  type FlexAlign,
-  type FlexDirection,
-  type FlexJustify,
-  type FlexValue,
-  type FlexWrap,
+import type {
+  FlexAlign,
+  FlexDirection,
+  FlexJustify,
+  FlexValue,
+  FlexWrap,
   GridItemColumn,
   GridItemColumnEnd,
   GridItemColumnStart,
@@ -12,21 +12,15 @@ import {
   GridItemRowStart,
 } from '@sanity/ui/css'
 
-import {
-  type BoxDisplay,
-  type BoxHeight,
-  type BoxOverflow,
-  type BoxSizing,
-  type GridAutoCols,
-  type GridAutoFlow,
-  type GridAutoRows,
-  // type GridItemColumn,
-  // type GridItemColumnEnd,
-  // type GridItemColumnStart,
-  // type GridItemRow,
-  // type GridItemRowEnd,
-  // type GridItemRowStart,
-  type Radius,
+import type {
+  BoxDisplay,
+  BoxHeight,
+  BoxOverflow,
+  BoxSizing,
+  GridAutoCols,
+  GridAutoFlow,
+  GridAutoRows,
+  Radius,
 } from '../types'
 
 /**
@@ -81,9 +75,6 @@ export interface ResponsiveGridProps {
   autoCols?: GridAutoCols | GridAutoCols[]
   autoFlow?: GridAutoFlow | GridAutoFlow[]
   columns?: number | number[]
-  // gap?: number | number[]
-  // gapX?: number | number[]
-  // gapY?: number | number[]
   rows?: number | number[]
 }
 

package/src/core/types/badge.ts

@@ -1,4 +1,4 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 /**
  * @public

package/src/core/types/button.ts

@@ -1,4 +1,4 @@
-import {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 /**
  * @public

package/src/core/types/card.ts

@@ -1,4 +1,4 @@
-import {ThemeColorCardToneKey} from '@sanity/ui/theme'
+import type {ThemeColorCardToneKey} from '@sanity/ui/theme'
 
 /** @public */
 export type CardTone = ThemeColorCardToneKey | 'inherit'

package/src/core/types/selectable.ts

@@ -1,4 +1,4 @@
-import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
 /**
  * @public