@sanity/ui 3.0.0-static.20 → 3.0.0-static.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.20",
+  "version": "3.0.0-static.21",
   "keywords": [
     "react",
     "ui",
@@ -48,8 +48,6 @@
       "require": "./dist/theme.cjs",
       "default": "./dist/theme.js"
     },
-    "./ui-theme.css": "./dist/ui-theme.css",
-    "./ui-system.css": "./dist/ui-system.css",
     "./ui.css": "./dist/ui.css"
   },
   "main": "./dist/index.cjs",
@@ -86,7 +84,7 @@
       "prettier --write --cache --ignore-unknown"
     ]
   },
-  "prettier": "@sanity/prettier-config",
+  "browserslist": "extends @sanity/browserslist-config",
   "release": {
     "branches": [
       "+([0-9])?(.{+([0-9]),x}).x",
@@ -108,13 +106,11 @@
     "@juggle/resize-observer": "^3.4.0",
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.0",
-    "cssnano": "^7.0.7",
+    "@vanilla-extract/css": "^1.17.2",
+    "@vanilla-extract/dynamic": "^2.1.3",
     "csstype": "^3.1.3",
     "framer-motion": "^12.9.7",
     "gzip-size": "^7.0.0",
-    "postcss": "^8.5.3",
-    "prettier": "^3.5.3",
-    "pretty-bytes": "^7.0.0",
     "react-compiler-runtime": "19.1.0-rc.2",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
@@ -127,8 +123,10 @@
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.8.0",
     "@eslint/js": "^9.26.0",
+    "@sanity/browserslist-config": "^1.0.5",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
+    "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.1.2",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-docs": "^8.6.12",
@@ -153,8 +151,10 @@
     "@types/react-dom": "^19.1.3",
     "@types/react-is": "^19.0.0",
     "@types/refractor": "^3.4.1",
+    "@vanilla-extract/rollup-plugin": "^1.3.15",
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/browser": "^3.1.4",
+    "autoprefixer": "^10.4.21",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "cac": "^6.7.14",
     "commitizen": "^4.3.1",
@@ -178,7 +178,12 @@
     "http-server": "^14.1.1",
     "husky": "^8.0.3",
     "lint-staged": "^14.0.1",
-    "npm-run-all2": "^5.0.2",
+    "mkdirp": "^3.0.1",
+    "npm-run-all2": "^8.0.4",
+    "postcss": "^8.5.3",
+    "postcss-merge-at-rules": "^1.2.0",
+    "postcss-preset-env": "^10.2.0",
+    "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-is": "^19.1.0",
@@ -212,9 +217,9 @@
     "bundle": false
   },
   "scripts": {
-    "build": "run-s clean css:build pkg:build pkg:check figma:pkg:build",
+    "build": "run-s clean pkg:build pkg:check",
     "clean": "rimraf dist",
-    "css:build": "node -r esbuild-register scripts/build",
+    "_css:build": "node -r esbuild-register scripts/build",
     "commit": "cz",
     "cypress:dev": "run-p dev cypress:open",
     "cypress:open": "cypress open",
@@ -223,7 +228,7 @@
     "figma:pkg:build": "cd figma && pnpm build",
     "format": "prettier --write --cache --ignore-unknown .",
     "lint": "eslint .",
-    "pkg:build": "pkg build --strict",
+    "pkg:build": "mkdirp dist && touch dist/ui.css && pkg build --strict",
     "pkg:check": "pkg --strict",
     "release": "semantic-release",
     "storybook:build": "storybook build",

package/src/cli/buildCommand.ts

@@ -1,100 +1,10 @@
 /* eslint-disable no-console */
 
-import {_compileSystem, _compileTheme} from '@sanity/ui/css'
-import cssnano from 'cssnano'
-import fs from 'fs/promises'
-import {gzipSizeSync} from 'gzip-size'
 import path from 'path'
-import postcss from 'postcss'
-import {format, resolveConfig} from 'prettier'
-import prettyBytes from 'pretty-bytes'
 
 export async function buildCommand(options: {cwd?: string; outDir?: string}): Promise<void> {
   const cwd = options.cwd ?? process.cwd()
   const outDir = options.outDir ?? path.resolve(cwd, 'dist')
 
-  await buildTheme({cwd, outDir})
-  await buildSystem({cwd, outDir})
-  await buildAll({cwd, outDir})
-}
-
-// @sanity/ui/ui-theme.css
-async function buildTheme(options: {cwd: string; outDir: string}) {
-  const {cwd, outDir} = options
-  const css = await prettify(_compileTheme())
-  const minified = await minify(css)
-  const prettified = await prettify(css)
-
-  const cssFile = path.resolve(outDir, 'ui-theme.css')
-  const minCssFile = path.resolve(outDir, 'ui-theme.min.css')
-
-  await fs.mkdir(outDir, {recursive: true})
-  await fs.writeFile(cssFile, prettified, 'utf-8')
-  await fs.writeFile(minCssFile, minified.css, 'utf-8')
-
-  console.log(`- built ${path.relative(cwd, cssFile)} (${prettySize(prettified)})`)
-  console.log(`- built ${path.relative(cwd, minCssFile)} (${prettySize(minified.css)})`)
-}
-
-// @sanity/ui/ui-system.css
-async function buildSystem(options: {cwd: string; outDir: string}) {
-  const {cwd, outDir} = options
-  const css = await prettify(_compileSystem())
-  const minified = await minify(css)
-  const prettified = await prettify(css)
-
-  const cssFile = path.resolve(outDir, 'ui-system.css')
-  const minCssFile = path.resolve(outDir, 'ui-system.min.css')
-
-  await fs.mkdir(outDir, {recursive: true})
-  await fs.writeFile(cssFile, prettified, 'utf-8')
-  await fs.writeFile(minCssFile, minified.css, 'utf-8')
-
-  console.log(`- built ${path.relative(cwd, cssFile)} (${prettySize(prettified)})`)
-  console.log(`- built ${path.relative(cwd, minCssFile)} (${prettySize(minified.css)})`)
-}
-
-// @sanity/ui/ui.css
-async function buildAll(options: {cwd: string; outDir: string}) {
-  const {cwd, outDir} = options
-  const css = await prettify(
-    [
-      `/* @sanity/ui/ui-theme.css */\n`,
-      _compileTheme(),
-      `\n\n/* @sanity/ui/ui-system.css */\n`,
-      _compileSystem(),
-      `\n`,
-    ].join(''),
-  )
-
-  const minified = await minify(css)
-  const prettified = await prettify(css)
-
-  const cssFile = path.resolve(outDir, 'ui.css')
-  const minCssFile = path.resolve(outDir, 'ui.min.css')
-
-  await fs.mkdir(outDir, {recursive: true})
-  await fs.writeFile(cssFile, prettified, 'utf-8')
-  await fs.writeFile(minCssFile, minified.css, 'utf-8')
-
-  console.log(`- built ${path.relative(cwd, cssFile)} (${prettySize(prettified)})`)
-  console.log(`- built ${path.relative(cwd, minCssFile)} (${prettySize(minified.css)})`)
-}
-
-async function minify(css: string) {
-  return postcss([cssnano()]).process(css, {from: undefined})
-}
-
-async function prettify(css: string) {
-  const options = await resolveConfig(__dirname)
-
-  if (!options) {
-    throw new Error('Prettier config not found')
-  }
-
-  return format(css, {...options, filepath: 'index.css', printWidth: 9999})
-}
-
-function prettySize(str: string) {
-  return `${prettyBytes(str.length)} / ${prettyBytes(gzipSizeSync(str))}`
+  console.log('TODO: buildCommand', {cwd, outDir})
 }

package/src/core/_compat/theme/themeColorProvider.tsx

@@ -22,5 +22,3 @@ export function ThemeColorProvider(props: ThemeColorProviderProps): ReactElement
     </ThemeProvider>
   )
 }
-
-ThemeColorProvider.displayName = 'ThemeColorProvider'

package/src/core/_compat/theme/themeProvider.tsx

@@ -66,5 +66,3 @@ export function ThemeProvider(props: ThemeProviderProps): ReactElement {
     </CardProvider>
   )
 }
-
-ThemeProvider.displayName = 'ThemeProvider'

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

@@ -20,7 +20,7 @@ import {
 
 import {EMPTY_ARRAY, EMPTY_RECORD} from '../../constants'
 import {_hasFocus, _raf, focusFirstDescendant} from '../../helpers'
-import {useArrayProp} from '../../hooks'
+import {useResponsiveProp} from '../../hooks'
 import {
   Box,
   type BoxProps,
@@ -196,7 +196,7 @@ export function Autocomplete<
 
   const listBoxId = `${id}-listbox`
   const options = Array.isArray(optionsProp) ? optionsProp : EMPTY_ARRAY
-  const padding = useArrayProp(paddingProp)
+  const padding = useResponsiveProp(paddingProp)
   const currentOption = useMemo(
     () => (value !== null ? options.find((o) => o.value === value) : undefined),
     [options, value],
@@ -452,20 +452,22 @@ export function Autocomplete<
     return undefined
   }, [disabled, handleClearButtonFocus, loading, value])
 
-  const openButtonBoxPadding = useMemo(
-    () =>
-      padding.map((v) => {
-        if (v === 0) return 0
-        if (v === 1) return 1
-        if (v === 2) return 1
+  const openButtonBoxPadding = useMemo(() => {
+    const result = Object.fromEntries(
+      Object.entries(padding).map(([key, value]) => {
+        if (value === 0) return [key, 0]
+        if (value === 1) return [key, 1]
+        if (value === 2) return [key, 1]
 
-        return (v as Space) - 2
-      }) as Space[],
-    [padding],
-  )
+        return [key, (value as Space) - 2]
+      }),
+    ) as ResponsiveProp<Space>
+
+    return result
+  }, [padding])
 
   const openButtonPadding = useMemo(
-    () => padding.map((v) => Math.max((v as Space) - 1, 0)) as Space[],
+    () => Object.values(padding).map((v) => Math.max((v as Space) - 1, 0)) as ResponsiveProp<Space>,
     [padding],
   )
 
@@ -690,5 +692,3 @@ export function Autocomplete<
     </div>
   )
 }
-
-Autocomplete.displayName = 'Autocomplete'

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

@@ -43,5 +43,3 @@ export function AutocompleteOption(props: AutocompleteOptionProps): ReactElement
     </li>
   )
 }
-
-AutocompleteOption.displayName = 'AutocompleteOption'

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

@@ -1,4 +1,4 @@
-import {_composeClassNames, breadcrumbs, type GapStyleProps} from '@sanity/ui/css'
+import {breadcrumbs, type GapStyleProps} from '@sanity/ui/css'
 import type {Space} from '@sanity/ui/theme'
 import {
   Children,
@@ -112,7 +112,7 @@ export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BR
       as={as}
       data-ui="Breadcrumbs"
       {...rest}
-      className={_composeClassNames(className, breadcrumbs())}
+      className={breadcrumbs({className})}
       gapX={gapX}
       gapY={gapY}
     >
@@ -129,5 +129,3 @@ export function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BR
     </Flex>
   )
 }
-
-Breadcrumbs.displayName = 'Breadcrumbs'

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

@@ -1,5 +1,4 @@
 import {
-  _composeClassNames,
   type ContainerStyleProps,
   dialog,
   dialogContainer,
@@ -10,7 +9,7 @@ import {type FocusEvent, type ForwardedRef, type ReactNode, useCallback, useRef}
 
 import {Z_OFFSETS} from '../../constants'
 import {focusFirstDescendant, focusLastDescendant, isHTMLElement} from '../../helpers'
-import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
+import {usePrefersReducedMotion, useResponsiveProp} from '../../hooks'
 import {Container} from '../../primitives'
 import type {CardTone, ComponentType, DialogPosition, Props, Radius} from '../../types'
 import {
@@ -57,7 +56,7 @@ export type DialogOwnProps = ContainerStyleProps &
     onClose?: () => void
     open?: boolean
     portal?: string
-    position?: DialogPosition | DialogPosition[]
+    position?: ResponsiveProp<DialogPosition>
     scheme?: ThemeColorSchemeKey
     tone?: CardTone
     zOffset?: number | number[]
@@ -111,10 +110,9 @@ export function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEME
   const portal = usePortal()
   const portalElement = portalProp ? portal.elements?.[portalProp] || null : portal.element
   const boundaryElement = useBoundaryElement().element
-  const cardRadius = useArrayProp(cardRadiusProp)
-  const position = useArrayProp(positionProp)
-  // const width = useArrayProp(widthProp)
-  const zOffset = useArrayProp(zOffsetProp)
+  const cardRadius = useResponsiveProp(cardRadiusProp)
+  const position = useResponsiveProp(positionProp)
+  const zOffset = useResponsiveProp(zOffsetProp)
   const preDivRef = useRef<HTMLDivElement | null>(null)
   const postDivRef = useRef<HTMLDivElement | null>(null)
   const cardRef = useRef<HTMLDivElement | null>(null)
@@ -183,7 +181,7 @@ export function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEME
         {...rest}
         aria-labelledby={labelId}
         aria-modal
-        className={_composeClassNames(className, dialog())}
+        className={dialog({className})}
         data-animate={animate ? '' : undefined}
         data-ui="Dialog"
         display="flex"
@@ -199,12 +197,12 @@ export function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEME
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
         <div ref={preDivRef} tabIndex={0} />
         <Container
-          align="center"
+          alignItems="center"
           className={dialogContainer()}
           data-ui="DialogCard"
-          direction="column"
+          flexDirection="column"
           display="flex"
-          justify="center"
+          justifyContent="center"
           width={width}
         >
           <DialogCard
@@ -233,5 +231,3 @@ export function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEME
     </Portal>
   )
 }
-
-Dialog.displayName = 'Dialog'

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

@@ -1,11 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
-import {
-  dialogCardRoot,
-  dialogContent,
-  dialogFooter,
-  dialogHeader,
-  dialogLayout,
-} from '@sanity/ui/css'
+import {dialogCard, dialogContent, dialogFooter, dialogHeader, dialogLayout} from '@sanity/ui/css'
 import {
   type ForwardedRef,
   type ReactNode,
@@ -148,7 +142,7 @@ export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIAL
   )
 
   return (
-    <Card {...rest} as={as} className={dialogCardRoot()} display="flex" ref={ref}>
+    <Card {...rest} as={as} className={dialogCard()} display="flex" ref={ref}>
       <Flex className={dialogLayout()} direction="column" flex={1}>
         {showHeader && (
           <Box className={dialogHeader()} position="relative">
@@ -194,5 +188,3 @@ export function DialogCard<E extends DialogCardElementType = typeof DEFAULT_DIAL
     </Card>
   )
 }
-
-DialogCard.displayName = 'DialogCard'

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

@@ -1,3 +1,5 @@
+import type {ResponsiveProp} from '@sanity/ui/css'
+
 import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'
 import type {DialogPosition} from '../../types'
 
@@ -7,8 +9,8 @@ import type {DialogPosition} from '../../types'
  */
 export interface DialogContextValue {
   version: 0.0
-  position?: DialogPosition | DialogPosition[]
-  zOffset?: number | number[]
+  position?: ResponsiveProp<DialogPosition>
+  zOffset?: ResponsiveProp<number>
 }
 
 /**

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

@@ -1,3 +1,4 @@
+import type {ResponsiveProp} from '@sanity/ui/css'
 import {type ReactElement, type ReactNode, useMemo} from 'react'
 
 import type {DialogPosition} from '../../types'
@@ -9,8 +10,8 @@ import {DialogContext, type DialogContextValue} from './dialogContext'
  */
 export interface DialogProviderProps {
   children?: ReactNode
-  position?: DialogPosition | DialogPosition[]
-  zOffset?: number | number[]
+  position?: ResponsiveProp<DialogPosition>
+  zOffset?: ResponsiveProp<number>
 }
 
 /**
@@ -31,5 +32,3 @@ export function DialogProvider(props: DialogProviderProps): ReactElement {
 
   return <DialogContext.Provider value={contextValue}>{children}</DialogContext.Provider>
 }
-
-DialogProvider.displayName = 'DialogProvider'

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

@@ -68,5 +68,3 @@ export function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_EL
     </Box>
   )
 }
-
-Hotkeys.displayName = 'Hotkeys'

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

@@ -1,4 +1,4 @@
-import {_composeClassNames, menu, type PaddingStyleProps, type ResponsiveProp} from '@sanity/ui/css'
+import {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={menu({className})}
         onKeyDown={handleKeyDown}
         overflow="auto"
         outline="none"
@@ -190,5 +190,3 @@ export function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(pr
     </MenuContext.Provider>
   )
 }
-
-Menu.displayName = 'Menu'

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

@@ -267,5 +267,3 @@ export function MenuButton(props: MenuButtonProps) {
     </Popover>
   )
 }
-
-MenuButton.displayName = 'MenuButton'

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

@@ -1,4 +1,4 @@
-import {_composeClassNames, menuDivider} from '@sanity/ui/css'
+import {menuDivider} from '@sanity/ui/css'
 
 import type {ComponentType, Props} from '../../types'
 
@@ -28,7 +28,5 @@ 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={menuDivider({className})} />
 }
-
-MenuDivider.displayName = 'MenuDivider'

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

@@ -232,5 +232,3 @@ export function MenuGroup<E extends MenuGroupElementType = typeof DEFAULT_MENU_G
     </Popover>
   )
 }
-
-MenuGroup.displayName = 'MenuGroup'

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

@@ -4,7 +4,7 @@ import type {
   RadiusStyleProps,
   ResponsiveProp,
 } from '@sanity/ui/css'
-import type {Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
+import type {FontTextSize, Space, ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {
   type ElementType,
   isValidElement,
@@ -33,7 +33,7 @@ export type MenuItemOwnProps = GapStyleProps &
   PaddingStyleProps &
   RadiusStyleProps & {
     disabled?: boolean
-    fontSize?: number | number[]
+    fontSize?: ResponsiveProp<FontTextSize>
     hotkeys?: string[]
     icon?: ElementType | ReactNode
     iconRight?: ElementType | ReactNode
@@ -190,5 +190,3 @@ export function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITE
     </Selectable>
   )
 }
-
-MenuItem.displayName = 'MenuItem'

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

@@ -1,10 +1,10 @@
-import {_composeClassNames, codeSkeleton, type ResponsiveProp} from '@sanity/ui/css'
+import {codeSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontCodeSize} from '@sanity/ui/theme'
 
 import type {Props} from '../../types'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
-/** @public */
+/** @beta */
 export const DEFAULT_CODE_SKELETON_ELEMENT = 'div'
 
 /** @beta */
@@ -12,7 +12,7 @@ export type CodeSkeletonOwnProps = SkeletonOwnProps & {
   size?: ResponsiveProp<FontCodeSize>
 }
 
-/** @public */
+/** @beta */
 export type CodeSkeletonElementType = SkeletonElementType
 
 /**
@@ -40,14 +40,10 @@ export function CodeSkeleton<
   return (
     <Skeleton
       {...rest}
-      className={_composeClassNames(
+      className={codeSkeleton({
         className,
-        codeSkeleton({
-          size,
-        }),
-      )}
+        size,
+      })}
     />
   )
 }
-
-CodeSkeleton.displayName = 'CodeSkeleton'

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

@@ -1,10 +1,10 @@
-import {_composeClassNames, headingSkeleton, type ResponsiveProp} from '@sanity/ui/css'
+import {headingSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontHeadingSize} from '@sanity/ui/theme'
 
 import type {Props} from '../../types'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
-/** @public */
+/** @beta */
 export const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'
 
 /** @beta */
@@ -12,7 +12,7 @@ export type HeadingSkeletonOwnProps = SkeletonOwnProps & {
   size?: ResponsiveProp<FontHeadingSize>
 }
 
-/** @public */
+/** @beta */
 export type HeadingSkeletonElementType = SkeletonElementType
 
 /**
@@ -39,14 +39,10 @@ export function HeadingSkeleton<
   return (
     <Skeleton
       {...rest}
-      className={_composeClassNames(
+      className={headingSkeleton({
         className,
-        headingSkeleton({
-          size,
-        }),
-      )}
+        size,
+      })}
     />
   )
 }
-
-HeadingSkeleton.displayName = 'HeadingSkeleton'

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

@@ -1,10 +1,10 @@
-import {_composeClassNames, labelSkeleton, type ResponsiveProp} from '@sanity/ui/css'
+import {labelSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontLabelSize} from '@sanity/ui/theme'
 
 import type {Props} from '../../types'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
-/** @public */
+/** @beta */
 export const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'
 
 /** @beta */
@@ -12,7 +12,7 @@ export type LabelSkeletonOwnProps = SkeletonOwnProps & {
   size?: ResponsiveProp<FontLabelSize>
 }
 
-/** @public */
+/** @beta */
 export type LabelSkeletonElementType = SkeletonElementType
 
 /**
@@ -38,14 +38,10 @@ export function LabelSkeleton<
   return (
     <Skeleton
       {...rest}
-      className={_composeClassNames(
+      className={labelSkeleton({
         className,
-        labelSkeleton({
-          size,
-        }),
-      )}
+        size,
+      })}
     />
   )
 }
-
-LabelSkeleton.displayName = 'LabelSkeleton'

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

@@ -1,4 +1,4 @@
-import {_composeClassNames, skeleton, type SkeletonStyleProps} from '@sanity/ui/css'
+import {skeleton, type SkeletonStyleProps} from '@sanity/ui/css'
 import {useEffect, useState} from 'react'
 
 import {Box, type BoxOwnProps} from '../../primitives'
@@ -61,16 +61,12 @@ export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON
     <Box
       data-ui="Skeleton"
       {...rest}
-      className={_composeClassNames(
+      className={skeleton({
         className,
-        skeleton({
-          radius,
-        }),
-      )}
+        radius,
+      })}
       data-animated={animated ? '' : undefined}
       data-visible={visible ? '' : undefined}
     />
   )
 }
-
-Skeleton.displayName = 'Skeleton'