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

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

@@ -11,7 +11,7 @@ export default function ExampleStory() {
   return (
     <Box padding={[3, 4, 5]}>
       <Container width={1}>
-        <Stack space={4}>
+        <Stack gap={4}>
           <Grid columns={[1, 2, 3]}>
             <Card ref={setElement} tone="transparent">
               <Text>rect</Text>

package/src/core/hooks/useElementSize.ts

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

package/src/core/hooks/useForwardedRef.ts

@@ -1,4 +1,4 @@
-import {ForwardedRef, MutableRefObject, useImperativeHandle, useRef} from 'react'
+import {type ForwardedRef, type MutableRefObject, useImperativeHandle, useRef} from 'react'
 
 /**
  * @beta

package/src/core/hooks/useMediaIndex/__workshop__/test.tsx

@@ -5,7 +5,7 @@ export default function TestStory() {
 
   return (
     <Card padding={[3, 4, 5]}>
-      <Stack space={2}>
+      <Stack gap={2}>
         <Text weight="medium">The current media index is {mediaIndex}.</Text>
         <Text muted>Try resizing the browser.</Text>
       </Stack>

package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx

@@ -1,6 +1,7 @@
 /** @jest-environment node */
 
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
 import {useMediaIndex} from './useMediaIndex'
 

package/src/core/hooks/useMediaIndex/useMediaIndex.ts

@@ -1,4 +1,4 @@
-import {Breakpoint, BREAKPOINTS} from '@sanity/ui/css'
+import {type Breakpoint, BREAKPOINTS} from '@sanity/ui/css'
 import {useMemo, useSyncExternalStore} from 'react'
 
 const media = Object.values(BREAKPOINTS)
@@ -21,7 +21,7 @@ function _getMediaQuery(media: number[], index: number): MediaQuery {
     return `screen and (max-width: ${media[index + 1] - 1}px)`
   }
 
-  if (index === media.length) {
+  if (index === media.length - 1) {
     return `screen and (min-width: ${media[index]}px)`
   }
 

package/src/core/hooks/usePrefersDark.hydration.test.tsx

@@ -1,10 +1,10 @@
-/** @jest-environment jsdom */
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration
  */
 import {waitFor} from '@testing-library/dom'
 import {hydrateRoot} from 'react-dom/client'
+import {afterAll, beforeAll, describe, expect, it, vi} from 'vitest'
 
 import {usePrefersDark} from './usePrefersDark'
 
@@ -20,8 +20,8 @@ describe('usePrefersDark SSR hydration', () => {
   beforeAll(() => {
     window.matchMedia = () =>
       ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
         matches: true,
       }) as any
   })
@@ -31,7 +31,7 @@ describe('usePrefersDark SSR hydration', () => {
   })
 
   it(`hydrates without any warnings`, async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation()
+    const spy = vi.spyOn(console, 'error') // .mockImplementation()
 
     const node = document.createElement('div')
 

package/src/core/hooks/usePrefersDark.test.tsx

@@ -1,5 +1,6 @@
 /** @jest-environment node */
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
 import {usePrefersDark} from './usePrefersDark'
 

package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx

@@ -1,10 +1,10 @@
-/** @jest-environment jsdom */
 /**
  * As this hook is used for top-level theming it's likely to be called while server-rendering
  * and that's why it's worth it to have a testing suite for hydration
  */
 import {waitFor} from '@testing-library/dom'
 import {hydrateRoot} from 'react-dom/client'
+import {afterAll, beforeAll, describe, expect, it, vi} from 'vitest'
 
 import {usePrefersReducedMotion} from './usePrefersReducedMotion'
 
@@ -20,8 +20,8 @@ describe('usePrefersReducedMotion SSR hydration', () => {
   beforeAll(() => {
     window.matchMedia = () =>
       ({
-        addEventListener: jest.fn(),
-        removeEventListener: jest.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
         matches: true,
       }) as any
   })
@@ -31,7 +31,7 @@ describe('usePrefersReducedMotion SSR hydration', () => {
   })
 
   it(`hydrates without any warnings`, async () => {
-    const spy = jest.spyOn(console, 'error').mockImplementation()
+    const spy = vi.spyOn(console, 'error') // .mockImplementation()
 
     const node = document.createElement('div')
 

package/src/core/hooks/usePrefersReducedMotion.test.tsx

@@ -1,5 +1,6 @@
 /** @jest-environment node */
 import {renderToStaticMarkup, renderToString} from 'react-dom/server'
+import {describe, expect, it} from 'vitest'
 
 import {usePrefersReducedMotion} from './usePrefersReducedMotion'
 

package/src/core/middleware/origin.ts

@@ -1,4 +1,4 @@
-import {Middleware} from '@floating-ui/react-dom'
+import type {Middleware} from '@floating-ui/react-dom'
 
 /**
  * Custom floating-ui middleware which calculates transform-origin X + Y offsets

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

@@ -1,7 +1,7 @@
-import {_selectable, composeClassNames, SelectableStyleProps} from '@sanity/ui/css'
+import {_composeClassNames, _selectable, type SelectableStyleProps} from '@sanity/ui/css'
 
 import type {ComponentType, Props, SelectableTone} from '../../types'
-import {Box, BoxOwnProps} from '../box'
+import {Box, type BoxOwnProps} from '../box'
 
 /** @internal */
 export const DEFAULT_SELECTABLE_ELEMENT = 'button'
@@ -37,7 +37,7 @@ export function Selectable<E extends SelectableElementType = typeof DEFAULT_SELE
   } = props as SelectableProps<typeof DEFAULT_SELECTABLE_ELEMENT>
 
   return (
-    <Box {...rest} as={as} className={composeClassNames(className, _selectable({radius, tone}))} />
+    <Box {...rest} as={as} className={_composeClassNames(className, _selectable({radius, tone}))} />
   )
 }
 

package/src/core/primitives/avatar/__workshop__/withinButton.tsx

@@ -14,7 +14,7 @@ export default function WithinButtonStory() {
 
   return (
     <Container width={1}>
-      <Stack paddingX={4} paddingY={[5, 6, 7]} space={1}>
+      <Stack gap={1} paddingX={4} paddingY={[5, 6, 7]}>
         <Button disabled={disabled} padding={1}>
           <Flex align="center" flex={1} gap={3} padding={2}>
             <Box flex={1}>

package/src/core/primitives/avatar/avatar.tsx

@@ -1,12 +1,12 @@
 import {
+  _composeClassNames,
   avatar,
   avatarArrow,
   avatarImage,
   avatarInitials,
-  composeClassNames,
-  ResponsiveProp,
+  type ResponsiveProp,
 } from '@sanity/ui/css'
-import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import type {AvatarColor} from '@sanity/ui/theme'
 import {useCallback, useEffect, useMemo, useState} from 'react'
 
 import {useArrayProp} from '../../hooks'
@@ -23,7 +23,7 @@ export interface AvatarOwnProps {
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
-  color?: ThemeColorAvatarColorKey
+  color?: AvatarColor
   initials?: string
   onImageLoadError?: (event: Error) => void
   size?: ResponsiveProp<AvatarSize>
@@ -54,7 +54,7 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
     __unstable_hideInnerStroke,
     as: Element = DEFAULT_AVATAR_ELEMENT,
     className,
-    color = 'gray',
+    color = 'magenta',
     src,
     title,
     initials,
@@ -114,7 +114,7 @@ export function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEME
       data-ui="Avatar"
       {...rest}
       aria-label={title}
-      className={composeClassNames(className, avatar({color, size: sizeProp}))}
+      className={_composeClassNames(className, avatar({color, size: sizeProp}))}
       data-arrow-position={arrowPosition}
       data-image-error={imageError ? '' : undefined}
       title={title}

package/src/core/primitives/avatar/avatarCounter.tsx

@@ -1,9 +1,9 @@
-import {avatarCounter, composeClassNames, ResponsiveProp} from '@sanity/ui/css'
+import {_composeClassNames, avatarCounter, type ResponsiveProp} from '@sanity/ui/css'
 import type {AvatarSize, FontLabelSize} from '@sanity/ui/theme'
 import {useMemo} from 'react'
 
 import {useArrayProp} from '../../hooks'
-import {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 import {Box} from '../box'
 import {Label} from '../label'
 
@@ -54,7 +54,7 @@ export function AvatarCounter<
       {...rest}
       align="center"
       as={as}
-      className={composeClassNames(className, avatarCounter({size}))}
+      className={_composeClassNames(className, avatarCounter({size}))}
       display="flex"
       justify="center"
       paddingX={2}

package/src/core/primitives/avatar/avatarStack.tsx

@@ -1,11 +1,11 @@
-import {avatarStack, composeClassNames, ResponsiveProp} from '@sanity/ui/css'
-import {AvatarSize} from '@sanity/ui/theme'
-import {Children, cloneElement, isValidElement, ReactElement} from 'react'
+import {_composeClassNames, avatarStack, type ResponsiveProp} from '@sanity/ui/css'
+import type {AvatarSize} from '@sanity/ui/theme'
+import {Children, cloneElement, isValidElement, type ReactElement} from 'react'
 
 import {useArrayProp} from '../../hooks'
-import {ComponentType, Props} from '../../types'
-import {Box, BoxOwnProps} from '../box'
-import {AvatarProps} from './avatar'
+import type {ComponentType, Props} from '../../types'
+import {Box, type BoxOwnProps} from '../box'
+import type {AvatarProps} from './avatar'
 import {AvatarCounter} from './avatarCounter'
 
 /** @public */
@@ -62,7 +62,7 @@ export function AvatarStack<E extends AvatarStackElementType = typeof DEFAULT_AV
       {...rest}
       align="center"
       as={as}
-      className={composeClassNames(className, avatarStack({size}))}
+      className={_composeClassNames(className, avatarStack({size}))}
       display="flex"
     >
       {len === 0 && (

package/src/core/primitives/avatar/types.ts

@@ -1,6 +1,4 @@
-import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
-
-import {AvatarSize} from '../../types'
+import type {AvatarSize, ThemeColorAvatarColorKey} from '@sanity/ui/theme'
 
 /**
  * @internal

package/src/core/primitives/badge/badge.test.tsx

@@ -1,6 +1,5 @@
-/** @jest-environment jsdom */
-
-import {axe} from 'jest-axe'
+import {describe, expect, it} from 'vitest'
+import {axe} from 'vitest-axe'
 
 import {render} from '../../../../test'
 import {Badge} from './badge'

package/src/core/primitives/badge/badge.tsx

@@ -1,6 +1,6 @@
 import type {PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/ui/css'
-import {badge, composeClassNames} from '@sanity/ui/css'
-import {FontTextSize} from '@sanity/ui/theme'
+import {_composeClassNames, badge} from '@sanity/ui/css'
+import type {FontTextSize} from '@sanity/ui/theme'
 
 import type {BadgeTone, ComponentType, Props} from '../../types'
 import {Box} from '../box'
@@ -46,7 +46,7 @@ export function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>
       data-ui="Badge"
       {...rest}
       as={as}
-      className={composeClassNames(
+      className={_composeClassNames(
         className,
         badge({
           radius,

package/src/core/primitives/box/__workshop__/responsive.tsx

@@ -1,4 +1,5 @@
 import {Box, Text} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
 
 export default function ResponsiveStory() {
   return (
@@ -9,7 +10,7 @@ export default function ResponsiveStory() {
         flex={[1, 2, 3, 4, 5, 6, 7]}
         padding={3}
         sizing={['content', 'border', 'content', 'border', 'content', 'border', 'content']}
-        style={{outline: '1px solid var(--card-border-color)'}}
+        style={{outline: `1px solid ${vars.color.border}`}}
       >
         <Text align="center" muted>
           This is a box with responsive props

package/src/core/primitives/box/box.tsx

@@ -4,7 +4,7 @@ import type {
   InsetStyleProps,
   PositionStyleProps,
 } from '@sanity/ui/css'
-import {box, composeClassNames} from '@sanity/ui/css'
+import {_composeClassNames, box} from '@sanity/ui/css'
 
 import type {ComponentType, Props} from '../../types'
 
@@ -20,6 +20,7 @@ export type BoxElementType =
   | 'article'
   | 'aside'
   | 'blockquote'
+  | 'body'
   | 'button'
   | 'details'
   | 'div'
@@ -29,6 +30,7 @@ export type BoxElementType =
   | 'figcaption'
   | 'footer'
   | 'form'
+  | 'html'
   | 'iframe'
   | 'kbd'
   | 'label'
@@ -123,7 +125,7 @@ export function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props
     <Element
       data-ui="Box"
       {...rest}
-      className={composeClassNames(
+      className={_composeClassNames(
         className,
         box({
           align,

package/src/core/primitives/button/__workshop__/custom.tsx

@@ -4,12 +4,12 @@ import {THEME_COLOR_BUTTON_MODES, THEME_COLOR_STATE_TONES} from '@sanity/ui/them
 export default function CustomStory() {
   return (
     <Flex align="center" height="fill" justify="center" padding={4} sizing="border">
-      <Stack space={2}>
+      <Stack gap={2}>
         {THEME_COLOR_BUTTON_MODES.map((mode) => (
           <Grid columns={7} gap={1} key={mode}>
             {THEME_COLOR_STATE_TONES.map((tone) => (
               <Button key={tone} mode={mode} padding={3} tone={tone}>
-                <Stack space={2}>
+                <Stack gap={2}>
                   <Text>Text</Text>
                   <Text muted>Muted</Text>
                   <Text>

package/src/core/primitives/button/__workshop__/customIcons.tsx

@@ -4,9 +4,9 @@ import {Button, Flex, Inline} from '@sanity/ui'
 export default function CustomIconsStory() {
   return (
     <Flex align="center" height="fill" justify="center">
-      <Inline space={1}>
-        <Button fontSize={1} icon={RocketIcon} padding={2} space={2} text="Rocket" />
-        <Button fontSize={1} icon={CustomIcon} padding={2} space={2} text="Heart" />
+      <Inline gap={1}>
+        <Button fontSize={1} gap={2} icon={RocketIcon} padding={2} text="Rocket" />
+        <Button fontSize={1} gap={2} icon={CustomIcon} padding={2} text="Heart" />
       </Inline>
     </Flex>
   )

package/src/core/primitives/button/__workshop__/disabled.tsx

@@ -5,20 +5,20 @@ import {Container} from '../../container/container'
 import {Grid} from '../../grid/grid'
 import {Stack} from '../../stack/stack'
 import {Text} from '../../text/text'
-import {Button, ButtonProps} from '../button'
+import {Button} from '../button'
 
 const GAP = 4
 const COLUMNS = 3
 
-const DEFAULT_PROPS: ButtonProps = {
+const DEFAULT_PROPS = {
   icon: SquareIcon,
   iconRight: SquareIcon,
-}
+} as const
 
 function Layout() {
   return (
     <Container width={2}>
-      <Stack space={4}>
+      <Stack gap={4}>
         <Grid columns={COLUMNS} gap={GAP}>
           <Text size={1} weight="semibold">
             Default
@@ -31,21 +31,21 @@ function Layout() {
           </Text>
         </Grid>
 
-        <Stack space={2}>
+        <Stack gap={2}>
           <Grid columns={COLUMNS} gap={GAP}>
-            <Stack space={2}>
+            <Stack gap={2}>
               <Button {...DEFAULT_PROPS} mode="default" text="Enabled" />
               <Button {...DEFAULT_PROPS} disabled mode="default" text="Disabled" />
               <Button {...DEFAULT_PROPS} disabled mode="default" muted text="Disabled (muted)" />
             </Stack>
 
-            <Stack space={2}>
+            <Stack gap={2}>
               <Button {...DEFAULT_PROPS} mode="ghost" text="Enabled" />
               <Button {...DEFAULT_PROPS} disabled mode="ghost" text="Disabled" />
               <Button {...DEFAULT_PROPS} disabled mode="ghost" muted text="Disabled (muted)" />
             </Stack>
 
-            <Stack space={2}>
+            <Stack gap={2}>
               <Button {...DEFAULT_PROPS} mode="bleed" text="Enabled" />
               <Button {...DEFAULT_PROPS} mode="bleed" disabled text="Disabled" />
               <Button {...DEFAULT_PROPS} disabled mode="bleed" muted text="Disabled (muted)" />
@@ -60,7 +60,7 @@ function Layout() {
 export default function DisabledButtonStory() {
   return (
     <Stack>
-      <Stack space={4}>
+      <Stack gap={4}>
         <Card padding={5} scheme="light">
           <Layout />
         </Card>

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

@@ -1,6 +1,5 @@
 import {icons} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
-import {FontTextSize} from '@sanity/ui/theme'
 import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 
 import {
@@ -17,6 +16,7 @@ import {
 export default function ButtonStory() {
   const disabled = useBoolean('Disabled', false, 'Props')
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
   const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
@@ -25,7 +25,6 @@ export default function ButtonStory() {
   const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const selected = useBoolean('Selected', false, 'Props')
-  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const tone = useSelect('Tone', WORKSHOP_BUTTON_TONE_OPTIONS, 'default', 'Props')
   const textAlign =
     useSelect('Text align', WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS, undefined, 'Props') || undefined
@@ -37,7 +36,8 @@ export default function ButtonStory() {
     <Flex align="center" height="fill" justify="center">
       <Button
         disabled={disabled}
-        fontSize={fontSize as FontTextSize}
+        fontSize={fontSize}
+        gap={gap}
         icon={icon && icons[icon]}
         iconRight={iconRight && icons[iconRight]}
         justify={justify}
@@ -47,7 +47,6 @@ export default function ButtonStory() {
         paddingX={paddingX}
         paddingY={paddingY}
         selected={selected}
-        space={space}
         textAlign={textAlign}
         text={textProp}
         textWeight={textWeight}

package/src/core/primitives/button/__workshop__/stacked.tsx

@@ -1,6 +1,5 @@
 import {icons} from '@sanity/icons'
 import {Box, Button, Card, Container, Flex, Stack} from '@sanity/ui'
-import {FontTextSize} from '@sanity/ui/theme'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 
 import {
@@ -16,6 +15,7 @@ export default function StackedStory() {
   const tones = Object.entries(WORKSHOP_BUTTON_TONE_OPTIONS)
   const disabled = useBoolean('Disabled', false, 'Props')
   const fontSize = useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props')
+  const gap = useSelect('Gap', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const icon = useSelect('Icon', WORKSHOP_ICON_SYMBOL_OPTIONS, 'add-circle', 'Props')
   const iconRight = useSelect('Icon (right)', WORKSHOP_ICON_SYMBOL_OPTIONS, '', 'Props')
   const justify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'center', 'Props')
@@ -24,18 +24,18 @@ export default function StackedStory() {
   const paddingX = useSelect('Padding X', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const paddingY = useSelect('Padding Y', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
   const selected = useBoolean('Selected', false, 'Props')
-  const space = useSelect('Space', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
 
   return (
     <Card height="fill">
       <Flex align="center" height="fill" justify="center">
         <Container width={0} style={{textAlign: 'center'}}>
           <Box padding={4}>
-            <Stack space={1}>
+            <Stack gap={1}>
               {tones.map(([title, tone]) => (
                 <Button
                   disabled={disabled}
-                  fontSize={fontSize as FontTextSize}
+                  fontSize={fontSize}
+                  gap={gap}
                   icon={icon && icons[icon]}
                   iconRight={iconRight && icons[iconRight]}
                   justify={justify}
@@ -45,7 +45,6 @@ export default function StackedStory() {
                   paddingX={paddingX}
                   paddingY={paddingY}
                   selected={selected}
-                  space={space}
                   text={title}
                   tone={tone}
                 />

package/src/core/primitives/button/button.test.tsx

@@ -1,8 +1,7 @@
-/** @jest-environment jsdom */
-
 import {AddIcon} from '@sanity/icons'
 import {screen} from '@testing-library/react'
-import {axe} from 'jest-axe'
+import {describe, expect, it} from 'vitest'
+import {axe} from 'vitest-axe'
 
 import {render} from '../../../../test'
 import {Button} from './button'

package/src/core/primitives/button/button.tsx

@@ -7,12 +7,17 @@ import type {
   ResponsiveProp,
   Width,
 } from '@sanity/ui/css'
-import {button, buttonLoadingBox, composeClassNames} from '@sanity/ui/css'
-import type {FontTextSize, Space} from '@sanity/ui/theme'
+import {_composeClassNames, button, buttonLoadingBox} from '@sanity/ui/css'
+import type {
+  FontTextSize,
+  Space,
+  ThemeColorButtonModeKey,
+  ThemeColorStateToneKey,
+} from '@sanity/ui/theme'
 import {type ElementType as ReactElementType, isValidElement, type ReactNode} from 'react'
 import {isValidElementType} from 'react-is'
 
-import type {ButtonMode, ButtonTextAlign, ButtonTone, ComponentType, Props} from '../../types'
+import type {ButtonTextAlign, ComponentType, Props} from '../../types'
 import {Box} from '../box'
 import {Spinner} from '../spinner'
 import type {TextOwnProps} from '../text'
@@ -30,7 +35,7 @@ export type ButtonOwnProps = ButtonStyleProps &
     'data-ui'?: string
     'disabled'?: boolean
     'fontSize'?: ResponsiveProp<FontTextSize>
-    'mode'?: ButtonMode
+    'mode'?: ThemeColorButtonModeKey
     'icon'?: ReactElementType | ReactNode
     'iconRight'?: ReactElementType | ReactNode
     'justify'?: FlexStyleProps['justify']
@@ -45,7 +50,7 @@ export type ButtonOwnProps = ButtonStyleProps &
     'text'?: ReactNode
     'textOverflow'?: TextOwnProps['textOverflow']
     'textWeight'?: TextOwnProps['weight']
-    'tone'?: ButtonTone
+    'tone'?: ThemeColorStateToneKey
     'width'?: ResponsiveProp<Width>
   }
 
@@ -108,7 +113,7 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     <Element
       data-ui="Button"
       {...rest}
-      className={composeClassNames(className, button({display, flex, radius, width}))}
+      className={_composeClassNames(className, button({display, flex, radius, width}))}
       data-disabled={loading || disabled ? '' : undefined}
       data-mode={mode}
       data-tone={tone}