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

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

@@ -1,5 +1,5 @@
-import {Box, Button, Dialog, DialogProps, LayerProvider, useLayer} from '@sanity/ui'
-import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
+import {Box, Button, Dialog, type DialogProps, LayerProvider, useLayer} from '@sanity/ui'
+import {type ReactNode, useCallback, useEffect, useRef, useState} from 'react'
 
 export default function WrappedStory() {
   return (

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

@@ -1,19 +1,26 @@
 import {
-  composeClassNames,
-  ContainerStyleProps,
+  _composeClassNames,
+  type ContainerStyleProps,
   dialog,
   dialogContainer,
-  ResponsiveProp,
+  type ResponsiveProp,
 } from '@sanity/ui/css'
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
-import {FocusEvent, ForwardedRef, ReactNode, useCallback, useRef} from 'react'
+import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {type FocusEvent, type ForwardedRef, type ReactNode, useCallback, useRef} from 'react'
 
 import {Z_OFFSETS} from '../../constants'
 import {focusFirstDescendant, focusLastDescendant, isHTMLElement} from '../../helpers'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {Container} from '../../primitives'
-import {CardTone, ComponentType, DialogPosition, Props, Radius} from '../../types'
-import {Layer, LayerOwnProps, LayerProps, Portal, useBoundaryElement, usePortal} from '../../utils'
+import type {CardTone, ComponentType, DialogPosition, Props, Radius} from '../../types'
+import {
+  Layer,
+  type LayerOwnProps,
+  type LayerProps,
+  Portal,
+  useBoundaryElement,
+  usePortal,
+} from '../../utils'
 import {DialogCard} from './dialogCard'
 import {isTargetWithinScope} from './isTargetWithinScope'
 import {useDialog} from './useDialog'
@@ -176,7 +183,7 @@ export function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEME
         {...rest}
         aria-labelledby={labelId}
         aria-modal
-        className={composeClassNames(className, dialog())}
+        className={_composeClassNames(className, dialog())}
         data-animate={animate ? '' : undefined}
         data-ui="Dialog"
         display="flex"

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

@@ -6,12 +6,27 @@ import {
   dialogHeader,
   dialogLayout,
 } from '@sanity/ui/css'
-import {ForwardedRef, ReactNode, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
+import {
+  type ForwardedRef,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+} from 'react'
 
 import {focusFirstDescendant} from '../../helpers'
 import {useClickOutsideEvent, useGlobalKeyDown} from '../../hooks'
-import {Box, Button, Card, CardElementType, CardOwnProps, Flex, Text} from '../../primitives'
-import {Props} from '../../types'
+import {
+  Box,
+  Button,
+  Card,
+  type CardElementType,
+  type CardOwnProps,
+  Flex,
+  Text,
+} from '../../primitives'
+import type {Props} from '../../types'
 import {useBoundaryElement, useLayer, usePortal} from '../../utils'
 import {isTargetWithinScope} from './isTargetWithinScope'
 

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

@@ -1,5 +1,5 @@
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
-import {DialogPosition} from '../../types'
+import type {DialogPosition} from '../../types'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.

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

@@ -1,7 +1,7 @@
-import {ReactElement, ReactNode, useMemo} from 'react'
+import {type ReactElement, type ReactNode, useMemo} from 'react'
 
-import {DialogPosition} from '../../types'
-import {DialogContext, DialogContextValue} from './dialogContext'
+import type {DialogPosition} from '../../types'
+import {DialogContext, type DialogContextValue} from './dialogContext'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.

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

@@ -1,6 +1,6 @@
 import {useContext} from 'react'
 
-import {DialogContext, DialogContextValue} from './dialogContext'
+import {DialogContext, type DialogContextValue} from './dialogContext'
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.

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

@@ -1,8 +1,8 @@
-import {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space} from '@sanity/ui/theme'
+import type {GapStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import type {FontTextSize, Space} from '@sanity/ui/theme'
 
 import {Box, KBD} from '../../primitives'
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
@@ -42,7 +42,7 @@ export function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_EL
     keys,
     padding,
     radius,
-    space = 0.5,
+    space = 1,
     ...rest
   } = props as HotkeysProps<typeof DEFAULT_HOTKEYS_ELEMENT>
 

package/src/core/components/menu/__workshop__/closableMenuButton.tsx

@@ -1,5 +1,6 @@
 import {AddIcon} from '@sanity/icons'
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
+import {Box, Button, Menu, MenuButton, type MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
 import {useRef} from 'react'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
@@ -16,14 +17,14 @@ export default function ClosableMenuButtonStory() {
           button={<Button text="Open" />}
           id="closable-example"
           menu={
-            <Menu padding={0} space={0}>
-              <Stack padding={1} space={1}>
+            <Menu gap={0} padding={0}>
+              <Stack gap={1} padding={1}>
                 <MenuItem text="Item 1" />
                 <MenuItem text="Item 2" />
                 <MenuItem text="Item 3" />
                 <MenuItem text="Item 4" />
               </Stack>
-              <Stack padding={1} style={{borderTop: '1px solid var(--card-border-color)'}}>
+              <Stack padding={1} style={{borderTop: `1px solid ${vars.color.border}`}}>
                 <Button
                   icon={AddIcon}
                   onClick={() => {

package/src/core/components/menu/__workshop__/constrainedInBoundary.tsx

@@ -8,12 +8,12 @@ import {
   Menu,
   MenuButton,
   MenuItem,
-  SelectableTone,
+  type SelectableTone,
   Text,
 } from '@sanity/ui'
 import {useState} from 'react'
 
-import {MenuButtonProps} from '../menuButton'
+import type {MenuButtonProps} from '../menuButton'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   constrainSize: true,

package/src/core/components/menu/__workshop__/customMenuItem.tsx

@@ -7,7 +7,7 @@ export default function CustomMenuItemStory() {
         <LayerProvider>
           <Menu>
             <MenuItem padding={3}>
-              <Stack space={3}>
+              <Stack gap={3}>
                 <Text weight="medium" size={1}>
                   First option
                 </Text>
@@ -17,7 +17,7 @@ export default function CustomMenuItemStory() {
               </Stack>
             </MenuItem>
             <MenuItem padding={3}>
-              <Stack space={3}>
+              <Stack gap={3}>
                 <Text weight="medium" size={1}>
                   Second option
                 </Text>
@@ -28,7 +28,7 @@ export default function CustomMenuItemStory() {
             </MenuItem>
             <MenuDivider />
             <MenuItem padding={3} tone="critical">
-              <Stack space={3}>
+              <Stack gap={3}>
                 <Text weight="medium" size={1}>
                   Dangerous option
                 </Text>

package/src/core/components/menu/__workshop__/disableFocusOnClose.tsx

@@ -1,5 +1,5 @@
 import {ChevronDownIcon} from '@sanity/icons'
-import {Button, Flex, Menu, MenuButton, MenuButtonProps, MenuItem} from '@sanity/ui'
+import {Button, Flex, Menu, MenuButton, type MenuButtonProps, MenuItem} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {

package/src/core/components/menu/__workshop__/groups.tsx

@@ -6,7 +6,7 @@ import {
   LayerProvider,
   Menu,
   MenuButton,
-  MenuButtonProps,
+  type MenuButtonProps,
   MenuDivider,
   MenuGroup,
   MenuItem,
@@ -29,7 +29,7 @@ export default function GroupsStory() {
   return (
     <Box padding={[4, 5, 6]}>
       <Card padding={1} radius={3} shadow={1}>
-        <Inline space={1}>
+        <Inline gap={1}>
           <LayerProvider>
             <MenuButton
               button={<Button fontSize={1} mode="bleed" padding={2} text="File" />}

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

@@ -7,7 +7,7 @@ import {
   LayerProvider,
   Menu,
   MenuButton,
-  MenuButtonProps,
+  type MenuButtonProps,
   MenuDivider,
   MenuItem,
 } from '@sanity/ui'

package/src/core/components/menu/__workshop__/menuGroupRight.tsx

@@ -14,7 +14,7 @@ import {
   Flex,
   Menu,
   MenuButton,
-  MenuButtonProps,
+  type MenuButtonProps,
   MenuDivider,
   MenuGroup,
   MenuItem,

package/src/core/components/menu/__workshop__/nestedMenu.tsx

@@ -8,7 +8,7 @@ export default function NestedMenuItems() {
         id="nested-example"
         menu={
           <Menu>
-            <Stack space={1}>
+            <Stack gap={1}>
               <MenuItem text="Item 1" />
               <MenuItem text="Item 2" />
             </Stack>

package/src/core/components/menu/__workshop__/onCloseMenuButton.tsx

@@ -1,4 +1,13 @@
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack, useToast} from '@sanity/ui'
+import {
+  Box,
+  Button,
+  Menu,
+  MenuButton,
+  type MenuButtonProps,
+  MenuItem,
+  Stack,
+  useToast,
+} from '@sanity/ui'
 import {useCallback} from 'react'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
@@ -17,14 +26,14 @@ export default function OnCloseMenuButton() {
 
   return (
     <Box padding={[4, 5, 6]}>
-      <Stack space={2}>
+      <Stack gap={2}>
         <MenuButton
           button={<Button text="With onClose callback" />}
           id="closable-example"
           onClose={handleClose}
           menu={
-            <Menu padding={0} space={0}>
-              <Stack padding={1} space={1}>
+            <Menu gap={0} padding={0}>
+              <Stack gap={1} padding={1}>
                 <MenuItem text="Item 1" />
                 <MenuItem text="Item 2" />
                 <MenuItem text="Item 3" />

package/src/core/components/menu/__workshop__/selectedItem.tsx

@@ -5,7 +5,7 @@ import {
   Code,
   Menu,
   MenuButton,
-  MenuButtonProps,
+  type MenuButtonProps,
   MenuDivider,
   MenuItem,
   Stack,
@@ -23,7 +23,7 @@ export default function SelectedItemStory() {
 
   return (
     <Box padding={[4, 5, 6]}>
-      <Stack space={4}>
+      <Stack gap={4}>
         <Code>selectedIndex={selectedIndex}</Code>
 
         <MenuButton

package/src/core/components/menu/__workshop__/withoutArrow.tsx

@@ -1,4 +1,4 @@
-import {Box, Button, Menu, MenuButton, MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
+import {Box, Button, Menu, MenuButton, type MenuButtonProps, MenuItem, Stack} from '@sanity/ui'
 
 const POPOVER_PROPS: MenuButtonProps['popover'] = {
   __unstable_margins: [1, 1, 1, 1],

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

@@ -1,17 +1,16 @@
-/** @jest-environment jsdom */
-
 /* eslint-disable no-console */
 
-import {MouseEvent, useCallback, useMemo} from 'react'
+import {type MouseEvent, useCallback, useMemo} from 'react'
+import {describe, expect, it, vi} from 'vitest'
 
 import {render} from '../../../../test'
-import {MenuContext, MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './menuContext'
 import {useMenu} from './useMenu'
 
 describe('components/menu', () => {
   describe('useMenu', () => {
     it('should get context value', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         const rootMenu = useMenu()
@@ -67,7 +66,7 @@ describe('components/menu', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {
@@ -95,7 +94,7 @@ describe('components/menu', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = jest.fn()
+      const log = vi.fn()
 
       function Debug() {
         try {

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

@@ -1,4 +1,4 @@
-import {composeClassNames, menu, type PaddingStyleProps, type ResponsiveProp} from '@sanity/ui/css'
+import {_composeClassNames, menu, type PaddingStyleProps, type ResponsiveProp} from '@sanity/ui/css'
 import type {Space} from '@sanity/ui/theme'
 import {useCallback, useEffect, useImperativeHandle, useMemo, useRef} from 'react'
 
@@ -176,7 +176,7 @@ export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(pr
         data-ui="Menu"
         {...rest}
         as={as}
-        className={composeClassNames(className, menu())}
+        className={_composeClassNames(className, menu())}
         onKeyDown={handleKeyDown}
         overflow="auto"
         outline="none"

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

@@ -1,11 +1,11 @@
-import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import type {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {
   cloneElement,
-  FocusEvent,
-  ForwardedRef,
-  KeyboardEvent,
-  MouseEvent as ReactMouseEvent,
-  ReactElement,
+  type FocusEvent,
+  type ForwardedRef,
+  type KeyboardEvent,
+  type MouseEvent as ReactMouseEvent,
+  type ReactElement,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -14,9 +14,9 @@ import {
   useState,
 } from 'react'
 
-import {ButtonProps, Popover, PopoverProps} from '../../primitives'
-import {Placement, Props, Radius} from '../../types'
-import {MenuProps} from './menu'
+import {type ButtonProps, Popover, type PopoverProps} from '../../primitives'
+import type {Placement, Props, Radius} from '../../types'
+import type {MenuProps} from './menu'
 
 /** @public */
 export type MenuButtonProps = {

package/src/core/components/menu/menuContext.ts

@@ -1,4 +1,4 @@
-import {MouseEvent as ReactMouseEvent} from 'react'
+import {type MouseEvent as ReactMouseEvent} from 'react'
 
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 

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

@@ -1,6 +1,6 @@
-import {composeClassNames, menuDivider} from '@sanity/ui/css'
+import {_composeClassNames, menuDivider} from '@sanity/ui/css'
 
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
 /** @public */
 export const DEFAULT_MENU_DIVIDER_ELEMENT = 'hr'
@@ -28,7 +28,7 @@ export function MenuDivider<E extends MenuDividerElementType = typeof DEFAULT_ME
     ...rest
   } = props as MenuDividerProps<typeof DEFAULT_MENU_DIVIDER_ELEMENT>
 
-  return <Element {...rest} className={composeClassNames(className, menuDivider())} />
+  return <Element {...rest} className={_composeClassNames(className, menuDivider())} />
 }
 
 MenuDivider.displayName = 'MenuDivider'

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

@@ -1,22 +1,22 @@
 import {ChevronRightIcon} from '@sanity/icons'
-import {RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {FontTextSize, Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
+import type {FontTextSize, Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {
-  ElementType,
+  type ElementType,
   isValidElement,
-  KeyboardEvent,
-  MouseEvent,
-  ReactNode,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
   useCallback,
   useEffect,
   useState,
 } from 'react'
 import {isValidElementType} from 'react-is'
 
-import {Box, Flex, Popover, PopoverProps, Text} from '../../primitives'
+import {Box, Flex, Popover, type PopoverProps, Text} from '../../primitives'
 import {Selectable} from '../../primitives/_selectable'
-import {ComponentType, Props} from '../../types'
-import {DEFAULT_MENU_ELEMENT, Menu, MenuProps} from './menu'
+import type {ComponentType, Props} from '../../types'
+import {DEFAULT_MENU_ELEMENT, Menu, type MenuProps} from './menu'
 import {useMenu} from './useMenu'
 
 /** @public */

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

@@ -1,7 +1,12 @@
-import {GapStyleProps, PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {
+  GapStyleProps,
+  PaddingStyleProps,
+  RadiusStyleProps,
+  ResponsiveProp,
+} from '@sanity/ui/css'
+import type {Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {
-  ElementType,
+  type ElementType,
   isValidElement,
   type MouseEvent,
   type ReactNode,
@@ -166,9 +171,7 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
             </Box>
           )}
 
-          {hotkeys && (
-            <Hotkeys gap={0.5} keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />
-          )}
+          {hotkeys && <Hotkeys keys={hotkeys} style={{marginTop: -4, marginBottom: -4}} />}
 
           {IconRightComponent && (
             <Text muted size={fontSize}>

package/src/core/components/menu/useMenu.ts

@@ -1,7 +1,7 @@
 import {useContext} from 'react'
 
 import {isRecord} from '../../lib/isRecord'
-import {MenuContext, MenuContextValue} from './menuContext'
+import {MenuContext, type MenuContextValue} from './menuContext'
 
 export function useMenu(): MenuContextValue {
   const value = useContext(MenuContext)

package/src/core/components/menu/useMenuController.ts

@@ -1,8 +1,8 @@
 import {
-  KeyboardEvent,
-  KeyboardEventHandler,
-  MouseEvent,
-  MutableRefObject,
+  type KeyboardEvent,
+  type KeyboardEventHandler,
+  type MouseEvent,
+  type MutableRefObject,
   useCallback,
   useEffect,
   useMemo,

package/src/core/components/skeleton/__workshop__/delay.tsx

@@ -32,7 +32,7 @@ export default function SkeletonDelayStory() {
               marginRight={3}
               delay={1000}
             />
-            <Stack space={2} flex={1}>
+            <Stack flex={1} gap={2}>
               <HeadingSkeleton
                 size={4}
                 style={{width: '100%'}}

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

@@ -22,7 +22,7 @@ export default function SkeletonStory() {
   return (
     <Box padding={[4, 5, 6]}>
       <Container width={1}>
-        <Stack space={4}>
+        <Stack gap={4}>
           {[1, 2, 3].map((item) => (
             <Card key={item} tone={tone} padding={2} radius={2} border>
               <Flex align="center">
@@ -32,7 +32,7 @@ export default function SkeletonStory() {
                   <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
                   <Skeleton style={{width: 40, height: 40}} radius={2} animated={animated} />
                 </Grid>
-                <Stack space={2} flex={1}>
+                <Stack gap={2} flex={1}>
                   <HeadingSkeleton style={{width: '100%'}} radius={1} animated={animated} />
                   <TextSkeleton style={{width: '100%'}} radius={1} animated={animated} />
                   <LabelSkeleton style={{width: '100%'}} radius={1} animated={animated} />

package/src/core/components/skeleton/codeSkeleton.tsx

@@ -1,8 +1,8 @@
-import {codeSkeleton, composeClassNames, ResponsiveProp} from '@sanity/ui/css'
-import {FontCodeSize} from '@sanity/ui/theme'
+import {_composeClassNames, codeSkeleton, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontCodeSize} from '@sanity/ui/theme'
 
-import {Props} from '../../types'
-import {Skeleton, SkeletonElementType, SkeletonOwnProps} from './skeleton'
+import type {Props} from '../../types'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @public */
 export const DEFAULT_CODE_SKELETON_ELEMENT = 'div'
@@ -40,7 +40,7 @@ export function CodeSkeleton<
   return (
     <Skeleton
       {...rest}
-      className={composeClassNames(
+      className={_composeClassNames(
         className,
         codeSkeleton({
           size,

package/src/core/components/skeleton/headingSkeleton.tsx

@@ -1,8 +1,8 @@
-import {composeClassNames, headingSkeleton, ResponsiveProp} from '@sanity/ui/css'
-import {FontHeadingSize} from '@sanity/ui/theme'
+import {_composeClassNames, headingSkeleton, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontHeadingSize} from '@sanity/ui/theme'
 
-import {Props} from '../../types'
-import {Skeleton, SkeletonElementType, SkeletonOwnProps} from './skeleton'
+import type {Props} from '../../types'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @public */
 export const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'
@@ -39,7 +39,7 @@ export function HeadingSkeleton<
   return (
     <Skeleton
       {...rest}
-      className={composeClassNames(
+      className={_composeClassNames(
         className,
         headingSkeleton({
           size,

package/src/core/components/skeleton/labelSkeleton.tsx

@@ -1,8 +1,8 @@
-import {composeClassNames, labelSkeleton, ResponsiveProp} from '@sanity/ui/css'
-import {FontLabelSize} from '@sanity/ui/theme'
+import {_composeClassNames, labelSkeleton, type ResponsiveProp} from '@sanity/ui/css'
+import type {FontLabelSize} from '@sanity/ui/theme'
 
-import {Props} from '../../types'
-import {Skeleton, SkeletonElementType, SkeletonOwnProps} from './skeleton'
+import type {Props} from '../../types'
+import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @public */
 export const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'
@@ -38,7 +38,7 @@ export function LabelSkeleton<
   return (
     <Skeleton
       {...rest}
-      className={composeClassNames(
+      className={_composeClassNames(
         className,
         labelSkeleton({
           size,

package/src/core/components/skeleton/skeleton.tsx

@@ -1,8 +1,8 @@
-import {composeClassNames, skeleton, SkeletonStyleProps} from '@sanity/ui/css'
+import {_composeClassNames, skeleton, type SkeletonStyleProps} from '@sanity/ui/css'
 import {useEffect, useState} from 'react'
 
-import {Box, BoxOwnProps} from '../../primitives'
-import {ComponentType, Props} from '../../types'
+import {Box, type BoxOwnProps} from '../../primitives'
+import type {ComponentType, Props} from '../../types'
 
 /** @beta */
 export const DEFAULT_SKELETON_ELEMENT = 'div'
@@ -61,7 +61,7 @@ export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON
     <Box
       data-ui="Skeleton"
       {...rest}
-      className={composeClassNames(
+      className={_composeClassNames(
         className,
         skeleton({
           radius,