@sanity/ui 2.0.0-alpha.25 → 2.0.0-alpha.27

package/dist/index.d.ts

@@ -2,25 +2,62 @@
 
 import {AnimationEventHandler} from 'react'
 import {AriaRole} from 'react'
+import {BaseTheme} from '@sanity/ui/theme'
+import {BoxShadow} from '@sanity/ui/theme'
+import {buildTheme} from '@sanity/ui/theme'
 import {ClipboardEventHandler} from 'react'
-import {ColorTint} from '@sanity/color'
+import {COLOR_CONFIG_BASE_KEYS} from '@sanity/ui/theme'
+import {COLOR_CONFIG_BASE_TONES} from '@sanity/ui/theme'
+import {COLOR_CONFIG_BLEND_KEYS} from '@sanity/ui/theme'
+import {COLOR_CONFIG_STATE_KEYS} from '@sanity/ui/theme'
+import {COLOR_CONFIG_STATE_TONES} from '@sanity/ui/theme'
+import {ColorBlendModeTokenValue} from '@sanity/ui/theme'
+import {ColorConfigBaseKey} from '@sanity/ui/theme'
+import {ColorConfigBaseTone} from '@sanity/ui/theme'
+import {ColorConfigBlendKey} from '@sanity/ui/theme'
+import {ColorConfigOpacityValue} from '@sanity/ui/theme'
+import {ColorConfigStateKey} from '@sanity/ui/theme'
+import {ColorConfigStateTone} from '@sanity/ui/theme'
+import {ColorConfigValue} from '@sanity/ui/theme'
 import {Component} from 'react'
 import {CompositionEventHandler} from 'react'
+import {createColorTheme} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
 import {CSSProperties} from 'react'
 import {DragEventHandler} from 'react'
 import {ElementType} from 'react'
 import {FocusEventHandler} from 'react'
 import {FormEventHandler} from 'react'
 import {ForwardRefExoticComponent} from 'react'
+import {hexToRgb} from '@sanity/ui/theme'
+import {HSL} from '@sanity/ui/theme'
+import {hslToRgb} from '@sanity/ui/theme'
 import {HTMLProps} from 'react'
+import {isColorBlendModeValue} from '@sanity/ui/theme'
+import {isColorButtonMode} from '@sanity/ui/theme'
+import {isColorConfigBaseKey} from '@sanity/ui/theme'
+import {isColorConfigBaseTone} from '@sanity/ui/theme'
+import {isColorConfigBlendKey} from '@sanity/ui/theme'
+import {isColorConfigStateKey} from '@sanity/ui/theme'
+import {isColorConfigStateTone} from '@sanity/ui/theme'
+import {isColorHueKey} from '@sanity/ui/theme'
+import {isColorOpacityValue} from '@sanity/ui/theme'
+import {isColorTintKey} from '@sanity/ui/theme'
+import {isColorTokenValue} from '@sanity/ui/theme'
+import {isColorValue} from '@sanity/ui/theme'
 import {IStyledComponent} from 'styled-components'
 import {Key} from 'react'
 import {KeyboardEventHandler} from 'react'
 import {LegacyRef} from 'react'
 import {MemoExoticComponent} from 'react'
 import {MouseEventHandler} from 'react'
+import {multiply} from '@sanity/ui/theme'
 import {MutableRefObject} from 'react'
 import {NamedExoticComponent} from 'react'
+import {parseColor} from '@sanity/ui/theme'
+import {parseTokenKey} from '@sanity/ui/theme'
+import {parseTokenValue} from '@sanity/ui/theme'
+import {PartialThemeColorBuilderOpts} from '@sanity/ui/theme'
 import {PointerEventHandler} from 'react'
 import {PropsWithChildren} from 'react'
 import {ReactElement} from 'react'
@@ -29,7 +66,81 @@ import {ReactNode} from 'react'
 import {Ref} from 'react'
 import {RefAttributes} from 'react'
 import {RefCallback} from 'react'
-import type {StyledObject} from 'styled-components'
+import {RGB} from '@sanity/ui/theme'
+import {RGBA} from '@sanity/ui/theme'
+import {rgba} from '@sanity/ui/theme'
+import {rgbaToRGBA} from '@sanity/ui/theme'
+import {rgbToHex} from '@sanity/ui/theme'
+import {rgbToHsl} from '@sanity/ui/theme'
+import {RootTheme} from '@sanity/ui/theme'
+import {screen as screen_2} from '@sanity/ui/theme'
+import {studioTheme} from '@sanity/ui/theme'
+import {Theme} from '@sanity/ui/theme'
+import {THEME_COLOR_BASE_TONES} from '@sanity/ui/theme'
+import {THEME_COLOR_BLEND_MODES} from '@sanity/ui/theme'
+import {THEME_COLOR_BUTTON_MODES} from '@sanity/ui/theme'
+import {THEME_COLOR_STATE_TONES} from '@sanity/ui/theme'
+import {THEME_COLOR_STATES} from '@sanity/ui/theme'
+import {ThemeAvatar} from '@sanity/ui/theme'
+import {ThemeColor} from '@sanity/ui/theme'
+import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import {ThemeColorBase} from '@sanity/ui/theme'
+import {ThemeColorBaseTokens} from '@sanity/ui/theme'
+import {ThemeColorBaseToneKey} from '@sanity/ui/theme'
+import {ThemeColorBlendModeKey} from '@sanity/ui/theme'
+import {ThemeColorBuilderOpts} from '@sanity/ui/theme'
+import {ThemeColorButton} from '@sanity/ui/theme'
+import {ThemeColorButtonModeKey} from '@sanity/ui/theme'
+import {ThemeColorButtonState} from '@sanity/ui/theme'
+import {ThemeColorButtonStates} from '@sanity/ui/theme'
+import {ThemeColorButtonTokens} from '@sanity/ui/theme'
+import {ThemeColorButtonTones} from '@sanity/ui/theme'
+import {ThemeColorCard} from '@sanity/ui/theme'
+import {ThemeColorCardState} from '@sanity/ui/theme'
+import {ThemeColorGenericState} from '@sanity/ui/theme'
+import {ThemeColorInput} from '@sanity/ui/theme'
+import {ThemeColorInputState} from '@sanity/ui/theme'
+import {ThemeColorInputStates} from '@sanity/ui/theme'
+import {ThemeColorMuted} from '@sanity/ui/theme'
+import {ThemeColorMutedTone} from '@sanity/ui/theme'
+import {ThemeColorName} from '@sanity/ui/theme'
+import {ThemeColorScheme} from '@sanity/ui/theme'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {ThemeColorSchemes} from '@sanity/ui/theme'
+import {ThemeColorSelectable} from '@sanity/ui/theme'
+import {ThemeColorSelectableState} from '@sanity/ui/theme'
+import {ThemeColorSelectableStates} from '@sanity/ui/theme'
+import {ThemeColorSolid} from '@sanity/ui/theme'
+import {ThemeColorSolidTone} from '@sanity/ui/theme'
+import {ThemeColorSpot} from '@sanity/ui/theme'
+import {ThemeColorSpotKey} from '@sanity/ui/theme'
+import {ThemeColorStateKey} from '@sanity/ui/theme'
+import {ThemeColorStatesTokens} from '@sanity/ui/theme'
+import {ThemeColorStateTokens} from '@sanity/ui/theme'
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {ThemeColorSyntax} from '@sanity/ui/theme'
+import {ThemeColorTokens} from '@sanity/ui/theme'
+import {ThemeColorTokenValue} from '@sanity/ui/theme'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
+import {ThemeConfig} from '@sanity/ui/theme'
+import {ThemeFocusRing} from '@sanity/ui/theme'
+import {ThemeFont} from '@sanity/ui/theme'
+import {ThemeFontKey} from '@sanity/ui/theme'
+import {ThemeFonts} from '@sanity/ui/theme'
+import {ThemeFontSize} from '@sanity/ui/theme'
+import {ThemeFontWeight} from '@sanity/ui/theme'
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
+import {ThemeInput} from '@sanity/ui/theme'
+import {ThemeLayer} from '@sanity/ui/theme'
+import {ThemeShadow} from '@sanity/ui/theme'
+import {ThemeStyles} from '@sanity/ui/theme'
+import {TokenBaseKeyNode} from '@sanity/ui/theme'
+import {TokenBlendModeValueNode} from '@sanity/ui/theme'
+import {TokenButtonKeyNode} from '@sanity/ui/theme'
+import {TokenColorValueNode} from '@sanity/ui/theme'
+import {TokenHueValueNode} from '@sanity/ui/theme'
+import {TokenKeyNode} from '@sanity/ui/theme'
+import {TokenValueNode} from '@sanity/ui/theme'
 import {TouchEventHandler} from 'react'
 import {TransitionEventHandler} from 'react'
 import {UIEventHandler} from 'react'
@@ -38,6 +149,19 @@ import {WheelEventHandler} from 'react'
 /** @beta */
 export declare type ArrayPropPrimitive = string | number | boolean | undefined | null
 
+/** @internal */
+export declare const Arrow: ForwardRefExoticComponent<
+  Omit<
+    {
+      width: number
+      height: number
+      radius?: number | undefined
+    } & Omit<HTMLProps<HTMLDivElement>, 'width' | 'height'>,
+    'ref'
+  > &
+    RefAttributes<HTMLDivElement>
+>
+
 /**
  * @internal
  */
@@ -53,7 +177,6 @@ export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
   props: AutocompleteProps<Option> &
     Omit<
       HTMLProps<HTMLInputElement>,
-      | 'type'
       | 'value'
       | 'ref'
       | 'id'
@@ -71,6 +194,7 @@ export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
       | 'onSelect'
       | 'as'
       | 'autoComplete'
+      | 'type'
     > & {
       ref?: Ref<HTMLInputElement> | undefined
     },
@@ -264,7 +388,7 @@ export declare interface AvatarProps {
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
   as?: React.ElementType | keyof JSX.IntrinsicElements
-  color?: ThemeColorSpotKey
+  color?: ThemeColorAvatarColorKey
   initials?: string
   onImageLoadError?: (event: Error) => void
   size?: AvatarSize | AvatarSize[]
@@ -281,7 +405,7 @@ export declare interface AvatarProps {
  * @internal
  */
 export declare interface AvatarRootStyleProps {
-  $color: string
+  $color: ThemeColorSpotKey
 }
 
 /**
@@ -323,6 +447,7 @@ export declare const Badge: ForwardRefExoticComponent<
 
 /**
  * @public
+ * @deprecated No longer used
  */
 export declare type BadgeMode = 'default' | 'outline'
 
@@ -332,6 +457,7 @@ export declare type BadgeMode = 'default' | 'outline'
 export declare interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
+  /** @deprecated No longer used. */
   mode?: BadgeMode
   tone?: BadgeTone
 }
@@ -339,7 +465,7 @@ export declare interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
 /**
  * @public
  */
-export declare type BadgeTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+export declare type BadgeTone = ThemeColorStateToneKey
 
 /**
  * @public
@@ -348,57 +474,7 @@ export declare interface BaseAutocompleteOption {
   value: string
 }
 
-export declare interface BaseColorTokens {
-  _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueValue
-  bg?: ColorTokenValue
-  fg?: ColorTokenValue
-  border?: ColorTokenValue
-  focusRing?: ColorTokenValue
-  shadow?: {
-    outline?: ColorTokenValue
-    umbra?: ColorTokenValue
-    penumbra?: ColorTokenValue
-    ambient?: ColorTokenValue
-  }
-  skeleton?: {
-    from?: ColorTokenValue
-    to?: ColorTokenValue
-  }
-}
-
-/**
- * @public
- */
-export declare interface BaseTheme<Styles extends {} = {}> {
-  avatar: ThemeAvatar
-  button: {
-    textWeight: ThemeFontWeightKey
-    focusRing: FocusRing
-  }
-  card: {
-    focusRing: FocusRing
-  }
-  color: ThemeColorSchemes
-  container: number[]
-  /** @deprecated Use component-specific `focusRing` values instead */
-  focusRing: {
-    offset: number
-    width: number
-  }
-  fonts: ThemeFonts
-  input: ThemeInput
-  /**
-   * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
-   * @beta
-   */
-  layer?: ThemeLayer
-  media: number[]
-  radius: number[]
-  shadows: Array<ThemeShadow | null>
-  space: number[]
-  styles?: Styles
-}
+export {BaseTheme}
 
 /**
  * @public
@@ -430,7 +506,7 @@ export declare interface BoundaryElementProviderProps {
  * @public
  */
 export declare const Box: ForwardRefExoticComponent<
-  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -462,11 +538,7 @@ export declare interface BoxProps
   forwardedAs?: React.ElementType | keyof JSX.IntrinsicElements
 }
 
-/**
- * TODO: Rename to `ThemeBoxShadow`
- * @public
- */
-export declare type BoxShadow = [number, number, number, number]
+export {BoxShadow}
 
 /**
  * @public
@@ -478,7 +550,7 @@ export declare type BoxSizing = 'content' | 'border'
  */
 export declare const Breadcrumbs: ForwardRefExoticComponent<
   BreadcrumbsProps &
-    Omit<HTMLProps<HTMLOListElement>, 'type' | 'ref' | 'as'> &
+    Omit<HTMLProps<HTMLOListElement>, 'ref' | 'as' | 'type'> &
     RefAttributes<HTMLOListElement>
 >
 
@@ -491,8 +563,7 @@ export declare interface BreadcrumbsProps {
   space?: number | number[]
 }
 
-/** @internal */
-export declare function buildTheme(config?: ThemeConfig): TMP_Theme
+export {buildTheme}
 
 /**
  * @public
@@ -502,17 +573,10 @@ export declare const Button: ForwardRefExoticComponent<
     RefAttributes<HTMLButtonElement>
 >
 
-export declare interface ButtonColorTokens
-  extends Partial<Record<ColorButtonMode, ButtonModeColorTokens>> {
-  _hue?: ColorHueValue
-}
-
 /**
  * @public
  */
-export declare type ButtonMode = 'default' | 'ghost' | 'bleed'
-
-export declare type ButtonModeColorTokens = Partial<Record<'*' | ColorState, StateColorTokens>>
+export declare type ButtonMode = ThemeColorButtonModeKey
 
 /**
  * @public
@@ -546,7 +610,7 @@ export declare type ButtonTextAlign = 'left' | 'right' | 'center'
 /**
  * @public
  */
-export declare type ButtonTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+export declare type ButtonTone = ThemeColorStateToneKey
 
 /**
  * @public
@@ -560,7 +624,7 @@ export declare type ButtonWidth = 'fill'
  * @public
  */
 export declare const Card: ForwardRefExoticComponent<
-  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -599,7 +663,7 @@ export declare interface CardStyleProps {
 /**
  * @public
  */
-export declare type CardTone = ThemeColorToneKey | 'inherit'
+export declare type CardTone = ThemeColorBaseToneKey | 'inherit'
 
 /**
  * Checkboxes allow the user to select one or more items from a set.
@@ -607,7 +671,7 @@ export declare type CardTone = ThemeColorToneKey | 'inherit'
  * @public
  */
 export declare const Checkbox: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & CheckboxProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & CheckboxProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -648,7 +712,7 @@ export declare interface CodeProps {
  */
 export declare const CodeSkeleton: ForwardRefExoticComponent<
   Omit<
-    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
+    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'children' | 'as' | 'height'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -662,164 +726,31 @@ export declare interface CodeSkeletonProps extends SkeletonProps {
   size?: number | number[]
 }
 
-export declare const COLOR_BASE_TONES: readonly [
-  'transparent',
-  'default',
-  'primary',
-  'positive',
-  'caution',
-  'critical',
-]
-
-export declare const COLOR_BLEND_MODES: readonly ['multiply', 'screen']
-
-export declare const COLOR_BUTTON_MODES: readonly ['default', 'ghost', 'bleed']
-
-export declare const COLOR_CONFIG_BASE_KEYS: readonly [
-  '_hue',
-  'bg',
-  'fg',
-  'border',
-  'focusRing',
-  'muted/fg',
-  'link/fg',
-  'code/bg',
-  'code/fg',
-  'shadow/outline',
-  'shadow/umbra',
-  'shadow/penumbra',
-  'shadow/ambient',
-  'skeleton/from',
-  'skeleton/to',
-]
-
-export declare const COLOR_CONFIG_BASE_TONES: readonly [
-  '*',
-  'transparent',
-  'default',
-  'primary',
-  'positive',
-  'caution',
-  'critical',
-]
-
-export declare const COLOR_CONFIG_BLEND_KEYS: readonly ['_blend']
-
-export declare const COLOR_CONFIG_STATE_KEYS: readonly [
-  '_hue',
-  'bg',
-  'fg',
-  'border',
-  'focusRing',
-  'muted/fg',
-  'link/fg',
-  'code/bg',
-  'code/fg',
-  'skeleton/from',
-  'skeleton/to',
-]
-
-export declare const COLOR_CONFIG_STATE_TONES: readonly [
-  '*',
-  'default',
-  'primary',
-  'positive',
-  'caution',
-  'critical',
-]
-
-export declare const COLOR_HUES: readonly [
-  'gray',
-  'cyan',
-  'blue',
-  'purple',
-  'magenta',
-  'red',
-  'orange',
-  'yellow',
-  'green',
-]
-
-export declare const COLOR_STATE_TONES: readonly [
-  'default',
-  'primary',
-  'positive',
-  'caution',
-  'critical',
-]
-
-export declare const COLOR_STATES: readonly [
-  'enabled',
-  'hovered',
-  'pressed',
-  'selected',
-  'disabled',
-]
-
-export declare const COLOR_TINTS: readonly [
-  '50',
-  '100',
-  '200',
-  '300',
-  '400',
-  '500',
-  '600',
-  '700',
-  '800',
-  '900',
-  '950',
-]
-
-export declare type ColorBaseTone = (typeof COLOR_BASE_TONES)[number]
-
-export declare type ColorBlendModeTokenValue = [ColorBlendModeValue, ColorBlendModeValue]
-
-export declare type ColorBlendModeValue = (typeof COLOR_BLEND_MODES)[number]
-
-export declare type ColorButtonMode = (typeof COLOR_BUTTON_MODES)[number]
-
-export declare type ColorConfigBaseKey = (typeof COLOR_CONFIG_BASE_KEYS)[number]
-
-export declare type ColorConfigBaseTone = (typeof COLOR_CONFIG_BASE_TONES)[number]
-
-export declare type ColorConfigBlendKey = (typeof COLOR_CONFIG_BLEND_KEYS)[number]
-
-export declare type ColorConfigOpacityValue = `0` | `0.${number}` | `1`
-
-export declare type ColorConfigStateKey = (typeof COLOR_CONFIG_STATE_KEYS)[number]
-
-export declare type ColorConfigStateTone = (typeof COLOR_CONFIG_STATE_TONES)[number]
-
-export declare type ColorConfigValue =
-  | `black`
-  | `white`
-  | `black/${ColorConfigOpacityValue}`
-  | `white/${ColorConfigOpacityValue}`
-  | `${ColorHueValue}`
-  | `${ColorHueValue}/${ColorTintValue}`
-  | `${ColorHueValue}/${ColorTintValue}/${ColorConfigOpacityValue}`
-  | `${ColorTintValue}`
-  | `${ColorTintValue}/${ColorConfigOpacityValue}`
-  | ColorBlendModeValue
-
-export declare type ColorHueValue = (typeof COLOR_HUES)[number]
-
-export declare type ColorState = (typeof COLOR_STATES)[number]
-
-export declare type ColorStateTone = (typeof COLOR_STATE_TONES)[number]
-
-export declare interface ColorThemeConfig {
-  palette?: TMP_ColorPalette
-  tokens?: ColorTokens
-}
+export {COLOR_CONFIG_BASE_KEYS}
 
-export declare type ColorTintValue = (typeof COLOR_TINTS)[number]
+export {COLOR_CONFIG_BASE_TONES}
 
-export declare interface ColorTokens extends Partial<Record<ColorConfigBaseTone, BaseColorTokens>> {
-  button?: Partial<Record<ColorConfigStateTone, ButtonColorTokens>>
-}
+export {COLOR_CONFIG_BLEND_KEYS}
+
+export {COLOR_CONFIG_STATE_KEYS}
 
-export declare type ColorTokenValue = [ColorConfigValue, ColorConfigValue]
+export {COLOR_CONFIG_STATE_TONES}
+
+export {ColorBlendModeTokenValue}
+
+export {ColorConfigBaseKey}
+
+export {ColorConfigBaseTone}
+
+export {ColorConfigBlendKey}
+
+export {ColorConfigOpacityValue}
+
+export {ColorConfigStateKey}
+
+export {ColorConfigStateTone}
+
+export {ColorConfigValue}
 
 /**
  * The `Container` component wraps content layout in a defined set of widths.
@@ -827,7 +758,7 @@ export declare type ColorTokenValue = [ColorConfigValue, ColorConfigValue]
  * @public
  */
 export declare const Container: ForwardRefExoticComponent<
-  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'as'>, 'ref'> &
+  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'width' | 'as' | 'height'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -841,15 +772,9 @@ export declare interface ContainerProps extends BoxProps, ResponsiveWidthProps {
  */
 export declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean
 
-/**
- * @public
- */
-export declare function createColorTheme(
-  partialOpts?: PartialThemeColorBuilderOpts,
-): ThemeColorSchemes
+export {createColorTheme}
 
-/** @internal */
-export declare type CSSObject = StyledObject<any>
+export {CSSObject}
 
 /**
  * @public
@@ -917,6 +842,13 @@ export declare interface DialogProps extends ResponsivePaddingProps, ResponsiveW
   position?: DialogPosition | DialogPosition[]
   scheme?: ThemeColorSchemeKey
   zOffset?: number | number[]
+  /**
+   * Whether the dialog should animate in on mount.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
 }
 
 /**
@@ -1082,14 +1014,6 @@ export declare function focusFirstDescendant(element: HTMLElement): boolean
  */
 export declare function focusLastDescendant(element: HTMLElement): boolean
 
-/**
- * @public
- */
-export declare interface FocusRing {
-  offset: number
-  width: number
-}
-
 /**
  * @internal
  */
@@ -1117,7 +1041,7 @@ export declare function _getResponsiveSpace(
  * @public
  */
 export declare const Grid: ForwardRefExoticComponent<
-  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
+  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1210,7 +1134,7 @@ export declare interface HeadingProps {
  */
 export declare const HeadingSkeleton: ForwardRefExoticComponent<
   Omit<
-    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
+    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'children' | 'as' | 'height'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1224,10 +1148,7 @@ export declare interface HeadingSkeletonProps extends SkeletonProps {
   size?: number | number[]
 }
 
-/**
- * @internal
- */
-export declare function hexToRgb(hex: string): RGB
+export {hexToRgb}
 
 /**
  * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
@@ -1235,7 +1156,7 @@ export declare function hexToRgb(hex: string): RGB
  * @public
  */
 export declare const Hotkeys: ForwardRefExoticComponent<
-  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'ref' | 'size' | 'as'> & RefAttributes<HTMLElement>
+  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLElement>
 >
 
 /**
@@ -1249,19 +1170,9 @@ export declare interface HotkeysProps {
   keys?: string[]
 }
 
-/**
- * @internal
- */
-export declare interface HSL {
-  h: number
-  s: number
-  l: number
-}
+export {HSL}
 
-/**
- * @internal
- */
-export declare function hslToRgb(hsl: HSL): RGB
+export {hslToRgb}
 
 /**
  * The `Inline` component is a layout utility for aligning and spacing items horizontally.
@@ -1280,29 +1191,29 @@ export declare interface InlineProps extends Omit<BoxProps, 'display'> {
   space?: number | number[]
 }
 
-export declare function isColorBlendModeValue(str: string): str is ColorBlendModeValue
+export {isColorBlendModeValue}
 
-export declare function isColorButtonMode(str: string): str is ColorButtonMode
+export {isColorButtonMode}
 
-export declare function isColorConfigBaseKey(str: string): str is ColorConfigBaseKey
+export {isColorConfigBaseKey}
 
-export declare function isColorConfigBaseTone(str: string): str is ColorConfigBaseTone
+export {isColorConfigBaseTone}
 
-export declare function isColorConfigBlendKey(str: string): str is ColorConfigBlendKey
+export {isColorConfigBlendKey}
 
-export declare function isColorConfigStateKey(str: string): str is ColorConfigStateKey
+export {isColorConfigStateKey}
 
-export declare function isColorConfigStateTone(str: string): str is ColorConfigStateTone
+export {isColorConfigStateTone}
 
-export declare function isColorHueValue(str: string): str is ColorHueValue
+export {isColorHueKey}
 
-export declare function isColorOpacityValue(str: string): str is ColorConfigOpacityValue
+export {isColorOpacityValue}
 
-export declare function isColorTintValue(str: string): str is ColorTintValue
+export {isColorTintKey}
 
-export declare function isColorTokenValue(str: string): str is ColorConfigValue
+export {isColorTokenValue}
 
-export declare function isColorValue(str: string): str is 'black' | 'white'
+export {isColorValue}
 
 /**
  * @internal
@@ -1355,7 +1266,7 @@ export declare function _isScrollable(el: Node): boolean
  * @public
  */
 export declare const KBD: ForwardRefExoticComponent<
-  KBDProps & Omit<HTMLProps<HTMLElement>, 'ref' | 'size' | 'as'> & RefAttributes<HTMLDivElement>
+  KBDProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLDivElement>
 >
 
 /**
@@ -1402,7 +1313,7 @@ export declare interface LabelProps {
  */
 export declare const LabelSkeleton: ForwardRefExoticComponent<
   Omit<
-    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
+    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'children' | 'as' | 'height'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1479,7 +1390,7 @@ export declare interface _MediaStore {
  * @public
  */
 export declare const Menu: ForwardRefExoticComponent<
-  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'role' | 'as'>, 'ref'> &
+  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'tabIndex' | 'role' | 'as' | 'height'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1589,9 +1500,9 @@ export declare const MenuDivider: IStyledComponent<
     security?: string | undefined
     unselectable?: 'on' | 'off' | undefined
     inputMode?:
+      | 'none'
       | 'text'
       | 'search'
-      | 'none'
       | 'tel'
       | 'url'
       | 'email'
@@ -1601,7 +1512,7 @@ export declare const MenuDivider: IStyledComponent<
     is?: string | undefined
     'aria-activedescendant'?: string | undefined
     'aria-atomic'?: (boolean | 'false' | 'true') | undefined
-    'aria-autocomplete'?: 'both' | 'none' | 'inline' | 'list' | undefined
+    'aria-autocomplete'?: 'none' | 'both' | 'inline' | 'list' | undefined
     'aria-braillelabel'?: string | undefined
     'aria-brailleroledescription'?: string | undefined
     'aria-busy'?: (boolean | 'false' | 'true') | undefined
@@ -1625,17 +1536,17 @@ export declare const MenuDivider: IStyledComponent<
     'aria-description'?: string | undefined
     'aria-details'?: string | undefined
     'aria-disabled'?: (boolean | 'false' | 'true') | undefined
-    'aria-dropeffect'?: 'link' | 'none' | 'copy' | 'move' | 'execute' | 'popup' | undefined
+    'aria-dropeffect'?: 'none' | 'link' | 'copy' | 'move' | 'execute' | 'popup' | undefined
     'aria-errormessage'?: string | undefined
     'aria-expanded'?: (boolean | 'false' | 'true') | undefined
     'aria-flowto'?: string | undefined
     'aria-grabbed'?: (boolean | 'false' | 'true') | undefined
     'aria-haspopup'?:
       | boolean
+      | 'grid'
       | 'dialog'
       | 'menu'
       | 'listbox'
-      | 'grid'
       | 'false'
       | 'true'
       | 'tree'
@@ -1880,7 +1791,7 @@ export declare interface MenuGroupProps {
  */
 export declare const MenuItem: ForwardRefExoticComponent<
   MenuItemProps &
-    Omit<HTMLProps<HTMLDivElement>, 'selected' | 'ref' | 'height' | 'tabIndex' | 'as'> &
+    Omit<HTMLProps<HTMLDivElement>, 'ref' | 'tabIndex' | 'as' | 'height' | 'selected'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1922,26 +1833,15 @@ export declare interface MenuProps extends ResponsivePaddingProps {
   space?: number | number[]
 }
 
-/**
- * Apply the \`multiply\` blend mode
- * Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
- * @internal
- */
-export declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB
+export {multiply}
 
-/**
- * @internal
- */
-export declare function parseColor(color: unknown): RGB | RGBA
+export {parseColor}
 
-export declare function parseTokenKey(str: string): TokenKeyNode | undefined
+export {parseTokenKey}
 
-export declare function parseTokenValue(str: string): TokenValueNode | undefined
+export {parseTokenValue}
 
-/**
- * @public
- */
-export declare type PartialThemeColorBuilderOpts = Partial<ThemeColorBuilderOpts>
+export {PartialThemeColorBuilderOpts}
 
 /**
  * Placement of floating UI elements.
@@ -1970,7 +1870,7 @@ export declare type Placement =
 export declare const Popover: MemoExoticComponent<
   ForwardRefExoticComponent<
     Omit<
-      PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'content' | 'width' | 'as'>,
+      PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'children' | 'width' | 'as'>,
       'ref'
     > &
       RefAttributes<HTMLDivElement>
@@ -2076,7 +1976,7 @@ export declare interface PortalProviderProps {
  * @public
  */
 export declare const Radio: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & RadioProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & RadioProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2315,58 +2215,20 @@ export declare interface ResponsiveWidthStyleProps {
   $width: (number | 'auto')[]
 }
 
-/**
- * @internal
- */
-export declare interface RGB {
-  r: number
-  g: number
-  b: number
-  a?: undefined
-}
+export {RGB}
 
-/**
- * @internal
- */
-export declare interface RGBA {
-  r: number
-  g: number
-  b: number
-  a: number
-}
+export {RGBA}
 
-/**
- * @internal
- */
-export declare function rgba(color: unknown, a: number): string
+export {rgba}
 
-/**
- * @internal
- */
-export declare function rgbaToRGBA(rgba: string): RGBA
+export {rgbaToRGBA}
 
-/**
- * @internal
- */
-export declare function rgbToHex({r, g, b}: RGB): string
+export {rgbToHex}
 
-/**
- * @internal
- * @see https://css-tricks.com/converting-color-spaces-in-javascript/
- */
-export declare function rgbToHsl({r, g, b}: RGB): HSL
+export {rgbToHsl}
 
-/**
- * @public
- */
-export declare type RootTheme = BaseTheme<Styles>
+export {RootTheme}
 
-/**
- * Apply the \`screen\` blend mode
- * Source: https://www.w3.org/TR/compositing-1/#blendingscreen
- * @internal
- */
-declare function screen_2(b: RGB | RGBA, s: RGB | RGBA): RGB
 export {screen_2 as screen}
 
 /**
@@ -2382,7 +2244,7 @@ export declare const Select: ForwardRefExoticComponent<
 /**
  * @public
  */
-export declare type SelectableTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+export declare type SelectableTone = ThemeColorStateToneKey
 
 /**
  * @public
@@ -2463,49 +2325,7 @@ export declare interface StackProps extends BoxProps {
   space?: number | number[]
 }
 
-export declare interface StateColorTokens {
-  _blend?: ColorBlendModeTokenValue
-  _hue?: ColorHueValue
-  bg?: ColorTokenValue
-  bg2?: ColorTokenValue
-  fg?: ColorTokenValue
-  border?: ColorTokenValue
-  muted?: {
-    fg?: ColorTokenValue
-  }
-  accent?: {
-    fg?: ColorTokenValue
-  }
-  link?: {
-    fg?: ColorTokenValue
-  }
-  code?: {
-    bg?: ColorTokenValue
-    fg?: ColorTokenValue
-  }
-  skeleton?: {
-    from?: ColorTokenValue
-    to?: ColorTokenValue
-  }
-}
-
-/**
- * @public
- */
-export declare const studioTheme: RootTheme
-
-/**
- * TODO: Rename to `ThemeStyles`
- * @public
- */
-export declare interface Styles {
-  button?: {
-    root?: CSSObject
-  }
-  card?: {
-    root?: CSSObject
-  }
-}
+export {studioTheme}
 
 /**
  * The `Switch` component allows the user to toggle a setting on and off.
@@ -2515,7 +2335,7 @@ export declare interface Styles {
  * @public
  */
 export declare const Switch: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & SwitchProps, 'ref'> &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'as' | 'type'> & SwitchProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2534,7 +2354,7 @@ export declare const Tab: ForwardRefExoticComponent<
     TabProps &
       Omit<
         HTMLProps<HTMLButtonElement>,
-        'type' | 'label' | 'width' | 'id' | 'aria-controls' | 'as'
+        'label' | 'width' | 'id' | 'aria-controls' | 'as' | 'type'
       >,
     'ref'
   > &
@@ -2545,7 +2365,7 @@ export declare const Tab: ForwardRefExoticComponent<
  * @public
  */
 export declare const TabList: ForwardRefExoticComponent<
-  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
     RefAttributes<unknown>
 >
 
@@ -2640,7 +2460,7 @@ export declare interface TextAreaProps extends ResponsiveRadiusProps {
  * @public
  */
 export declare const TextInput: ForwardRefExoticComponent<
-  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'prefix' | 'as'>, 'ref'> &
+  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'prefix' | 'as' | 'type'>, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2722,7 +2542,7 @@ export declare interface TextProps {
  */
 export declare const TextSkeleton: ForwardRefExoticComponent<
   Omit<
-    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'size' | 'height' | 'as'>,
+    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'children' | 'as' | 'height'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -2736,271 +2556,61 @@ export declare interface TextSkeletonProps extends SkeletonProps {
   size?: number | number[]
 }
 
-/**
- * @public
- */
-export declare interface Theme {
-  sanity: Omit<RootTheme, 'color'> & {
-    color: ThemeColor
-  }
-}
+export {Theme}
 
-/**
- * @public
- */
-export declare interface ThemeAvatar {
-  sizes: {
-    /** Distance between avatars in an <AvatarStack> component (px) */
-    distance: number
-    /** Diameter (px) */
-    size: number
-  }[]
-  focusRing: FocusRing
-}
+export {THEME_COLOR_BASE_TONES}
 
-/**
- * @public
- */
-export declare interface ThemeColor {
-  dark: boolean
-  base: ThemeColorBase
-  button: ThemeColorButton
-  card: ThemeColorCard
-  input: ThemeColorInput
-  selectable?: ThemeColorSelectable
-  spot: ThemeColorSpot
-  syntax: ThemeColorSyntax
-  solid: ThemeColorSolid
-  muted: ThemeColorMuted
-}
+export {THEME_COLOR_BLEND_MODES}
 
-/**
- * @public
- */
-export declare interface ThemeColorBase {
-  bg: string
-  fg: string
-  border: string
-  focusRing: string
-  shadow: {
-    outline: string
-    umbra: string
-    penumbra: string
-    ambient: string
-  }
-  skeleton?: {
-    from: string
-    to: string
-  }
-}
+export {THEME_COLOR_BUTTON_MODES}
 
-/**
- * @public
- */
-export declare interface ThemeColorBuilderOpts {
-  base: (opts: {dark: boolean; name: ThemeColorName}) => ThemeColorBase
-  solid: (opts: {
-    base: ThemeColorBase
-    dark: boolean
-    tone: ThemeColorToneKey
-    name: ThemeColorName
-    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
-  }) => ThemeColorGenericState
-  muted: (opts: {
-    base: ThemeColorBase
-    dark: boolean
-    tone: ThemeColorToneKey
-    name: ThemeColorName
-    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
-  }) => ThemeColorGenericState
-  card: (opts: {
-    base: ThemeColorBase
-    dark: boolean
-    muted: ThemeColorMuted
-    name: ThemeColorName
-    solid: ThemeColorSolid
-    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
-  }) => ThemeColorCardState
-  button: (opts: {
-    dark: boolean
-    mode: ThemeColorButtonModeKey
-    base: ThemeColorBase
-    solid: ThemeColorSolidTone
-    muted: ThemeColorMutedTone
-  }) => ThemeColorButtonStates
-  input: (opts: {
-    base: ThemeColorBase
-    solid: ThemeColorSolidTone
-    muted: ThemeColorMutedTone
-    dark: boolean
-    mode: 'default' | 'invalid'
-    state: 'enabled' | 'disabled' | 'hovered' | 'readOnly'
-  }) => ThemeColorInputState
-  selectable: (opts: {
-    dark: boolean
-    base: ThemeColorBase
-    solid: ThemeColorSolid
-    muted: ThemeColorMuted
-    state: 'enabled' | 'disabled' | 'hovered' | 'pressed' | 'selected'
-    tone: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
-  }) => ThemeColorSelectableState
-  syntax: (opts: {base: ThemeColorBase; dark: boolean}) => ThemeColorSyntax
-  spot: (opts: {base: ThemeColorBase; dark: boolean; key: ThemeColorSpotKey}) => string
-}
+export {THEME_COLOR_STATE_TONES}
 
-/**
- * @public
- */
-export declare interface ThemeColorButton {
-  default: ThemeColorButtonTones
-  ghost: ThemeColorButtonTones
-  bleed: ThemeColorButtonTones
-}
+export {THEME_COLOR_STATES}
 
-/**
- * @public
- */
-export declare type ThemeColorButtonModeKey = 'default' | 'ghost' | 'bleed'
+export {ThemeAvatar}
 
-/**
- * @deprecated Use `ThemeColorGenericState` instead.
- * @public
- */
-export declare type ThemeColorButtonState = ThemeColorGenericState
+export {ThemeColor}
 
-/**
- * @public
- */
-export declare interface ThemeColorButtonStates {
-  enabled: ThemeColorButtonState
-  hovered: ThemeColorButtonState
-  pressed: ThemeColorButtonState
-  selected: ThemeColorButtonState
-  disabled: ThemeColorButtonState
-}
+export {ThemeColorBase}
 
-/**
- * TODO: Rename to `ThemeColorButtonMode`.
- * @public
- */
-export declare interface ThemeColorButtonTones {
-  default: ThemeColorButtonStates
-  primary: ThemeColorButtonStates
-  positive: ThemeColorButtonStates
-  caution: ThemeColorButtonStates
-  critical: ThemeColorButtonStates
-}
+export {ThemeColorBaseTokens}
 
-/**
- * @public
- */
-export declare interface ThemeColorCard {
-  enabled: ThemeColorCardState
-  hovered: ThemeColorCardState
-  pressed: ThemeColorCardState
-  selected: ThemeColorCardState
-  disabled: ThemeColorCardState
-}
+export {ThemeColorBaseToneKey}
 
-/**
- * @deprecated Use `ThemeColorGenericState` instead.
- * @public
- */
-export declare type ThemeColorCardState = ThemeColorGenericState
+export {ThemeColorBlendModeKey}
 
-/**
- * @public
- */
-export declare interface ThemeColorGenericState {
-  bg: string
-  /**
-   * @beta
-   */
-  bg2?: string
-  border: string
-  fg: string
-  iconColor: string
-  muted: {
-    fg: string
-  }
-  accent: {
-    fg: string
-  }
-  link: {
-    fg: string
-  }
-  code: {
-    bg: string
-    fg: string
-  }
-  skeleton?: {
-    from: string
-    to: string
-  }
-}
+export {ThemeColorBuilderOpts}
 
-/**
- * @public
- */
-export declare interface ThemeColorInput {
-  default: ThemeColorInputStates
-  invalid: ThemeColorInputStates
-}
+export {ThemeColorButton}
 
-/**
- * @public
- */
-export declare interface ThemeColorInputState {
-  bg: string
-  bg2: string
-  fg: string
-  border: string
-  placeholder: string
-}
+export {ThemeColorButtonModeKey}
 
-/**
- * @public
- */
-export declare interface ThemeColorInputStates {
-  enabled: ThemeColorInputState
-  disabled: ThemeColorInputState
-  hovered: ThemeColorInputState
-  readOnly: ThemeColorInputState
-}
+export {ThemeColorButtonState}
 
-/**
- * @public
- */
-export declare interface ThemeColorMuted {
-  default: ThemeColorMutedTone
-  transparent: ThemeColorMutedTone
-  primary: ThemeColorMutedTone
-  positive: ThemeColorMutedTone
-  caution: ThemeColorMutedTone
-  critical: ThemeColorMutedTone
-}
+export {ThemeColorButtonStates}
 
-/**
- * @public
- */
-export declare interface ThemeColorMutedTone {
-  enabled: ThemeColorGenericState
-  disabled: ThemeColorGenericState
-  hovered: ThemeColorGenericState
-  pressed: ThemeColorGenericState
-  selected: ThemeColorGenericState
-}
+export {ThemeColorButtonTokens}
 
-/**
- * @public
- */
-export declare type ThemeColorName =
-  | 'default'
-  | 'transparent'
-  | 'primary'
-  | 'positive'
-  | 'caution'
-  | 'critical'
+export {ThemeColorButtonTones}
+
+export {ThemeColorCard}
+
+export {ThemeColorCardState}
+
+export {ThemeColorGenericState}
+
+export {ThemeColorInput}
+
+export {ThemeColorInputState}
+
+export {ThemeColorInputStates}
+
+export {ThemeColorMuted}
+
+export {ThemeColorMutedTone}
+
+export {ThemeColorName}
 
 /**
  * @public
@@ -3013,170 +2623,46 @@ export declare function ThemeColorProvider(props: ThemeColorProviderProps): Reac
 export declare interface ThemeColorProviderProps {
   children?: React.ReactNode
   scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorName
+  tone?: ThemeColorBaseToneKey
 }
 
-/**
- * @public
- */
-export declare interface ThemeColorScheme {
-  default: ThemeColor
-  transparent: ThemeColor
-  primary: ThemeColor
-  positive: ThemeColor
-  caution: ThemeColor
-  critical: ThemeColor
-}
+export {ThemeColorScheme}
 
-/**
- * @public
- */
-export declare type ThemeColorSchemeKey = 'dark' | 'light'
+export {ThemeColorSchemeKey}
 
-/**
- * @public
- */
-export declare interface ThemeColorSchemes {
-  dark: ThemeColorScheme
-  light: ThemeColorScheme
-}
+export {ThemeColorSchemes}
 
-/**
- * @public
- */
-export declare interface ThemeColorSelectable {
-  default: ThemeColorSelectableStates
-  primary: ThemeColorSelectableStates
-  positive: ThemeColorSelectableStates
-  caution: ThemeColorSelectableStates
-  critical: ThemeColorSelectableStates
-}
+export {ThemeColorSelectable}
 
-/**
- * @deprecated Use `ThemeColorGenericState` instead.
- * @public
- */
-export declare type ThemeColorSelectableState = ThemeColorGenericState
+export {ThemeColorSelectableState}
 
-/**
- * @public
- */
-export declare interface ThemeColorSelectableStates {
-  enabled: ThemeColorSelectableState
-  hovered: ThemeColorSelectableState
-  pressed: ThemeColorSelectableState
-  selected: ThemeColorSelectableState
-  disabled: ThemeColorSelectableState
-}
+export {ThemeColorSelectableStates}
 
-/**
- * @public
- */
-export declare interface ThemeColorSolid {
-  default: ThemeColorSolidTone
-  transparent: ThemeColorSolidTone
-  primary: ThemeColorSolidTone
-  positive: ThemeColorSolidTone
-  caution: ThemeColorSolidTone
-  critical: ThemeColorSolidTone
-}
+export {ThemeColorSolid}
 
-/**
- * @public
- */
-export declare interface ThemeColorSolidTone {
-  enabled: ThemeColorGenericState
-  disabled: ThemeColorGenericState
-  hovered: ThemeColorGenericState
-  pressed: ThemeColorGenericState
-  selected: ThemeColorGenericState
-}
+export {ThemeColorSolidTone}
 
-/**
- * @public
- */
-export declare interface ThemeColorSpot {
-  gray: string
-  blue: string
-  purple: string
-  magenta: string
-  red: string
-  orange: string
-  yellow: string
-  green: string
-  cyan: string
-}
+export {ThemeColorSpot}
 
-/**
- * @public
- */
-export declare type ThemeColorSpotKey =
-  | 'gray'
-  | 'blue'
-  | 'purple'
-  | 'magenta'
-  | 'red'
-  | 'orange'
-  | 'yellow'
-  | 'green'
-  | 'cyan'
+export {ThemeColorSpotKey}
 
-/**
- * @public
- */
-export declare interface ThemeColorSyntax {
-  atrule: string
-  attrName: string
-  attrValue: string
-  attribute: string
-  boolean: string
-  builtin: string
-  cdata: string
-  char: string
-  class: string
-  className: string
-  comment: string
-  constant: string
-  deleted: string
-  doctype: string
-  entity: string
-  function: string
-  hexcode: string
-  id: string
-  important: string
-  inserted: string
-  keyword: string
-  number: string
-  operator: string
-  prolog: string
-  property: string
-  pseudoClass: string
-  pseudoElement: string
-  punctuation: string
-  regex: string
-  selector: string
-  string: string
-  symbol: string
-  tag: string
-  unit: string
-  url: string
-  variable: string
-}
+export {ThemeColorStateKey}
 
-/**
- * @public
- */
-export declare type ThemeColorToneKey =
-  | 'default'
-  | 'transparent'
-  | 'primary'
-  | 'positive'
-  | 'caution'
-  | 'critical'
+export {ThemeColorStatesTokens}
 
-export declare interface ThemeConfig {
-  color?: ColorThemeConfig
-}
+export {ThemeColorStateTokens}
+
+export {ThemeColorStateToneKey}
+
+export {ThemeColorSyntax}
+
+export {ThemeColorTokens}
+
+export {ThemeColorTokenValue}
+
+export {ThemeColorToneKey}
+
+export {ThemeConfig}
 
 /**
  * @public
@@ -3185,109 +2671,26 @@ export declare interface ThemeContextValue {
   version: 0.0
   scheme: ThemeColorSchemeKey
   theme: RootTheme
-  tone: ThemeColorName
+  tone: ThemeColorBaseToneKey
 }
 
-/**
- * @public
- */
-export declare interface ThemeFont {
-  family: string
-  weights: ThemeFontWeight
-  sizes: ThemeFontSize[]
-  /** @deprecated No longer supported. */
-  horizontalOffset?: number
-}
+export {ThemeFocusRing}
 
-/**
- * @public
- */
-export declare type ThemeFontKey = 'code' | 'heading' | 'label' | 'text'
+export {ThemeFont}
 
-/**
- * @public
- */
-export declare interface ThemeFonts {
-  code: ThemeFont
-  heading: ThemeFont
-  label: ThemeFont
-  text: ThemeFont
-}
+export {ThemeFontKey}
 
-/**
- * @public
- */
-export declare interface ThemeFontSize {
-  ascenderHeight: number
-  descenderHeight: number
-  fontSize: number
-  iconSize: number
-  letterSpacing: number
-  lineHeight: number
-}
+export {ThemeFonts}
 
-/**
- * @public
- */
-export declare interface ThemeFontWeight {
-  regular: number
-  medium: number
-  semibold: number
-  bold: number
-}
+export {ThemeFontSize}
 
-/**
- * @public
- */
-export declare type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
+export {ThemeFontWeight}
 
-/**
- * @public
- */
-export declare interface ThemeInput {
-  checkbox: {
-    size: number
-    focusRing: FocusRing
-  }
-  radio: {
-    size: number
-    markSize: number
-    focusRing: FocusRing
-  }
-  switch: {
-    width: number
-    height: number
-    padding: number
-    transitionDurationMs: number
-    transitionTimingFunction: string
-    focusRing: FocusRing
-  }
-  border: {
-    width: number
-  }
-  select: {
-    focusRing: FocusRing
-  }
-  text: {
-    focusRing: FocusRing
-  }
-}
+export {ThemeFontWeightKey}
 
-/**
- * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare interface ThemeLayer {
-  dialog: {
-    zOffset: number
-  }
-  popover: {
-    zOffset: number
-  }
-  tooltip: {
-    zOffset: number
-  }
-}
+export {ThemeInput}
+
+export {ThemeLayer}
 
 /**
  * @internal
@@ -3308,84 +2711,12 @@ export declare interface ThemeProviderProps {
   children?: React.ReactNode
   scheme?: ThemeColorSchemeKey
   theme?: RootTheme
-  tone?: ThemeColorName
+  tone?: ThemeColorBaseToneKey
 }
 
-/**
- * @public
- */
-export declare interface ThemeShadow {
-  umbra: BoxShadow
-  penumbra: BoxShadow
-  ambient: BoxShadow
-}
-
-export declare interface TMP_BaseColorTheme {
-  _blend: ColorBlendModeValue
-  dark: boolean
-  base: {
-    bg: string
-    fg: string
-    border: string
-    focusRing: string
-    shadow: {
-      outline: string
-      umbra: string
-      penumbra: string
-      ambient: string
-    }
-    skeleton: {
-      from: string
-      to: string
-    }
-  }
-  button: TMP_ButtonColorTheme
-}
-
-export declare type TMP_ButtonColorTheme = Record<ColorStateTone, TMP_ButtonModesColorTheme>
-
-export declare type TMP_ButtonModesColorTheme = Record<ColorButtonMode, TMP_ButtonStatesColorTheme>
-
-export declare type TMP_ButtonStatesColorTheme = Record<ColorState, TMP_StateColorTheme>
-
-export declare type TMP_ColorPalette = {
-  black: string | ColorTint
-  white: string | ColorTint
-} & Record<ColorHueValue, Record<ColorTintValue, string | ColorTint>>
-
-export declare type TMP_ColorTheme = Record<ColorBaseTone, TMP_BaseColorTheme>
+export {ThemeShadow}
 
-export declare interface TMP_StateColorTheme {
-  _blend: ColorBlendModeValue
-  bg: string
-  bg2?: string
-  fg: string
-  border: string
-  muted: {
-    fg: string
-  }
-  accent: {
-    fg: string
-  }
-  link: {
-    fg: string
-  }
-  code: {
-    bg: string
-    fg: string
-  }
-  skeleton?: {
-    from: string
-    to: string
-  }
-}
-
-export declare interface TMP_Theme {
-  color: {
-    light: TMP_ColorTheme
-    dark: TMP_ColorTheme
-  }
-}
+export {ThemeStyles}
 
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
@@ -3447,43 +2778,19 @@ export declare interface ToastProviderProps {
   zOffset?: number | number[]
 }
 
-export declare interface TokenBaseKeyNode {
-  type: 'base'
-  tone: ColorConfigBaseTone
-  key: ColorConfigBaseKey | ColorConfigBlendKey
-}
+export {TokenBaseKeyNode}
 
-export declare interface TokenBlendModeValueNode {
-  type: 'blendMode'
-  value?: ColorBlendModeValue
-}
+export {TokenBlendModeValueNode}
 
-export declare interface TokenButtonKeyNode {
-  type: 'button'
-  tone: ColorConfigStateTone
-  mode: ColorButtonMode
-  key: ColorConfigStateKey | ColorConfigBlendKey
-}
+export {TokenButtonKeyNode}
 
-export declare interface TokenColorValueNode {
-  type: 'color'
-  key?: 'black' | 'white' | `${ColorHueValue}/${ColorTintValue}` | ColorTintValue
-  hue?: ColorHueValue
-  tint?: ColorTintValue
-  opacity?: number
-}
+export {TokenColorValueNode}
 
-export declare interface TokenHueValueNode {
-  type: 'hue'
-  value?: ColorHueValue
-}
+export {TokenHueValueNode}
 
-export declare type TokenKeyNode = TokenBaseKeyNode | TokenButtonKeyNode
+export {TokenKeyNode}
 
-export declare type TokenValueNode =
-  | TokenColorValueNode
-  | TokenHueValueNode
-  | TokenBlendModeValueNode
+export {TokenValueNode}
 
 /**
  * Tooltips display information when hovering, focusing or tapping.
@@ -3491,7 +2798,7 @@ export declare type TokenValueNode =
  * @public
  */
 export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'content' | 'as'>, 'ref'> &
+  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'children' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -3527,11 +2834,13 @@ export declare function TooltipDelayGroupProvider(
 export declare interface TooltipDelayGroupProviderProps {
   children?: React.ReactNode
   /**
-   * @public Handles the delays to open or close a tooltip inside a group
+   * Handles the delays to open or close a tooltip inside a group
    *
    * If only a `number` is passed, it will be used for both opening and closing.
    *
    * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+   *
+   * @public
    */
   delay: Delay
 }
@@ -3552,16 +2861,27 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
   placement?: Placement
   /** Whether or not to render the tooltip in a portal element. */
   portal?: boolean | string
+  radius?: number | number[]
   scheme?: ThemeColorSchemeKey
   shadow?: number | number[]
   /**
-   * @public Adds a delay to open or close the tooltip.  Defaults to 0.
+   * Adds a delay to open or close the tooltip.
    *
    * If only a `number` is passed, it will be used for both opening and closing.
    *
    * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+   *
+   * @public
+   * @defaultValue 0
    */
   delay?: Delay
+  /**
+   * Whether the tooltip should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
 }
 
 /**
@@ -3571,7 +2891,7 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
 export declare const Tree: MemoExoticComponent<
   ForwardRefExoticComponent<
     TreeProps &
-      Omit<HTMLProps<HTMLDivElement>, 'ref' | 'wrap' | 'height' | 'role' | 'as' | 'align'> &
+      Omit<HTMLProps<HTMLDivElement>, 'wrap' | 'ref' | 'role' | 'as' | 'height' | 'align'> &
       RefAttributes<HTMLDivElement>
   >
 >