@sanity/ui 2.0.0-alpha.9 → 2.0.0-beta.10

package/dist/index.d.ts

@@ -2,16 +2,18 @@
 
 import {AnimationEventHandler} from 'react'
 import {AriaRole} from 'react'
+import {BaseTheme as BaseTheme_2} from '@sanity/ui/theme'
 import {ClipboardEventHandler} from 'react'
-import {ColorTints} from '@sanity/color'
 import {Component} from 'react'
 import {CompositionEventHandler} from 'react'
+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 {HSL as HSL_2} from '@sanity/ui/theme'
 import {HTMLProps} from 'react'
 import {IStyledComponent} from 'styled-components'
 import {Key} from 'react'
@@ -21,6 +23,7 @@ import {MemoExoticComponent} from 'react'
 import {MouseEventHandler} from 'react'
 import {MutableRefObject} from 'react'
 import {NamedExoticComponent} from 'react'
+import {PartialThemeColorBuilderOpts} from '@sanity/ui/theme'
 import {PointerEventHandler} from 'react'
 import {PropsWithChildren} from 'react'
 import {ReactElement} from 'react'
@@ -29,7 +32,54 @@ import {ReactNode} from 'react'
 import {Ref} from 'react'
 import {RefAttributes} from 'react'
 import {RefCallback} from 'react'
-import type {StyledObject} from 'styled-components'
+import {RGB as RGB_2} from '@sanity/ui/theme'
+import {RootTheme as RootTheme_2} from '@sanity/ui/theme'
+import {Theme as Theme_2} from '@sanity/ui/theme'
+import {Theme_v2} from '@sanity/ui/theme'
+import {ThemeAvatar} from '@sanity/ui/theme'
+import {ThemeBoxShadow} from '@sanity/ui/theme'
+import {ThemeColor} from '@sanity/ui/theme'
+import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import {ThemeColorBase} from '@sanity/ui/theme'
+import {ThemeColorBuilderOpts} from '@sanity/ui/theme'
+import {ThemeColorButton} from '@sanity/ui/theme'
+import {ThemeColorButtonModeKey as ThemeColorButtonModeKey_2} from '@sanity/ui/theme'
+import {ThemeColorButtonState} from '@sanity/ui/theme'
+import {ThemeColorButtonStates} from '@sanity/ui/theme'
+import {ThemeColorButtonTones} from '@sanity/ui/theme'
+import {ThemeColorCard} from '@sanity/ui/theme'
+import {ThemeColorCardState} from '@sanity/ui/theme'
+import {ThemeColorCardToneKey} 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 as ThemeColorSchemeKey_2} 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 {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {ThemeColorSyntax as ThemeColorSyntax_2} from '@sanity/ui/theme'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
+import {ThemeFont as ThemeFont_2} from '@sanity/ui/theme'
+import {ThemeFontKey as ThemeFontKey_2} from '@sanity/ui/theme'
+import {ThemeFonts as ThemeFonts_2} from '@sanity/ui/theme'
+import {ThemeFontSize as ThemeFontSize_2} from '@sanity/ui/theme'
+import {ThemeFontWeight as ThemeFontWeight_2} from '@sanity/ui/theme'
+import {ThemeFontWeightKey as ThemeFontWeightKey_2} from '@sanity/ui/theme'
+import {ThemeInput} from '@sanity/ui/theme'
+import {ThemeLayer as ThemeLayer_2} from '@sanity/ui/theme'
+import {ThemeShadow as ThemeShadow_2} from '@sanity/ui/theme'
+import {ThemeStyles} from '@sanity/ui/theme'
 import {TouchEventHandler} from 'react'
 import {TransitionEventHandler} from 'react'
 import {UIEventHandler} from 'react'
@@ -38,35 +88,51 @@ 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>, 'height' | 'width'>,
+    'ref'
+  > &
+    RefAttributes<HTMLDivElement>
+>
+
 /**
  * @internal
  */
 export declare function attemptFocus(element: HTMLElement): boolean
 
 /**
+ * The Autocomplete component is typically used for search components.
+ * It consists of a text input for writing a query, and properties for rendering suggestions.
+ *
  * @public
  */
 export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
   props: AutocompleteProps<Option> &
     Omit<
       HTMLProps<HTMLInputElement>,
-      | 'type'
-      | 'value'
-      | 'ref'
-      | 'as'
       | 'id'
-      | 'spellCheck'
+      | 'type'
       | 'role'
-      | 'prefix'
-      | 'autoCapitalize'
-      | 'autoCorrect'
-      | 'inputMode'
       | 'aria-activedescendant'
       | 'aria-autocomplete'
       | 'aria-expanded'
       | 'aria-owns'
       | 'onChange'
       | 'onSelect'
+      | 'value'
+      | 'ref'
+      | 'spellCheck'
+      | 'prefix'
+      | 'autoCapitalize'
+      | 'autoCorrect'
+      | 'inputMode'
+      | 'as'
       | 'autoComplete'
     > & {
       ref?: Ref<HTMLInputElement> | undefined
@@ -128,6 +194,7 @@ export declare interface AutocompleteProps<
   onSelect?: (value: string) => void
   /** @beta */
   openButton?: boolean | AutocompleteOpenButtonProps
+  /** The options to render. */
   options?: Option[]
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
@@ -136,6 +203,7 @@ export declare interface AutocompleteProps<
   radius?: Radius | Radius[]
   /** @beta */
   relatedElements?: HTMLElement[]
+  /** The callback function for rendering each option. */
   renderOption?: (option: Option) => ReactElement
   /** @beta */
   renderPopover?: (
@@ -150,6 +218,7 @@ export declare interface AutocompleteProps<
   ) => ReactNode
   renderValue?: (value: string, option?: Option) => string
   suffix?: ReactNode
+  /** The current value. */
   value?: string
 }
 
@@ -219,6 +288,8 @@ export declare interface AutocompleteValueChangeMsg {
 }
 
 /**
+ * Avatars are used to represent people and other agents (e.g. bots).
+ *
  * @public
  */
 export declare const Avatar: ForwardRefExoticComponent<
@@ -251,10 +322,12 @@ export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
  * @public
  */
 export declare interface AvatarProps {
+  /** @beta */
+  __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
   as?: React.ElementType | keyof JSX.IntrinsicElements
-  color?: ThemeColorSpotKey
+  color?: ThemeColorAvatarColorKey
   initials?: string
   onImageLoadError?: (event: Error) => void
   size?: AvatarSize | AvatarSize[]
@@ -271,13 +344,13 @@ export declare interface AvatarProps {
  * @internal
  */
 export declare interface AvatarRootStyleProps {
-  $color: string
+  $color: ThemeColorAvatarColorKey
 }
 
 /**
  * @public
  */
-export declare type AvatarSize = 0 | 1 | 2
+export declare type AvatarSize = 0 | 1 | 2 | 3
 
 /**
  * @public
@@ -303,6 +376,8 @@ export declare interface AvatarStackProps {
 export declare type AvatarStatus = 'online' | 'editing' | 'inactive'
 
 /**
+ * Badges are used to tag resources.
+ *
  * @public
  */
 export declare const Badge: ForwardRefExoticComponent<
@@ -311,6 +386,7 @@ export declare const Badge: ForwardRefExoticComponent<
 
 /**
  * @public
+ * @deprecated No longer used
  */
 export declare type BadgeMode = 'default' | 'outline'
 
@@ -320,6 +396,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
 }
@@ -327,7 +404,7 @@ export declare interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
 /**
  * @public
  */
-export declare type BadgeTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+export declare type BadgeTone = ThemeColorStateToneKey
 
 /**
  * @public
@@ -338,36 +415,9 @@ export declare interface BaseAutocompleteOption {
 
 /**
  * @public
+ * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
  */
-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 declare type BaseTheme = BaseTheme_2
 
 /**
  * @public
@@ -393,10 +443,13 @@ export declare interface BoundaryElementProviderProps {
 }
 
 /**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
  * @public
  */
 export declare const Box: ForwardRefExoticComponent<
-  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
+  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -429,10 +482,10 @@ export declare interface BoxProps
 }
 
 /**
- * TODO: Rename to `ThemeBoxShadow`
  * @public
+ * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
  */
-export declare type BoxShadow = [number, number, number, number]
+export declare type BoxShadow = ThemeBoxShadow
 
 /**
  * @public
@@ -461,14 +514,14 @@ export declare interface BreadcrumbsProps {
  * @public
  */
 export declare const Button: ForwardRefExoticComponent<
-  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'as'>, 'ref'> &
+  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'width' | 'as'>, 'ref'> &
     RefAttributes<HTMLButtonElement>
 >
 
 /**
  * @public
  */
-export declare type ButtonMode = 'default' | 'ghost' | 'bleed'
+export declare type ButtonMode = ThemeColorButtonModeKey_2
 
 /**
  * @public
@@ -491,6 +544,7 @@ export declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveR
   text?: React.ReactNode
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
+  width?: ButtonWidth
 }
 
 /**
@@ -501,13 +555,21 @@ export declare type ButtonTextAlign = 'left' | 'right' | 'center'
 /**
  * @public
  */
-export declare type ButtonTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+export declare type ButtonTone = ThemeColorStateToneKey
+
+/**
+ * @public
+ */
+export declare type ButtonWidth = 'fill'
 
 /**
+ * The `Card` component acts much like a `Box`, but with a background and foreground color.
+ * Components within a `Card` inherit its colors.
+ *
  * @public
  */
 export declare const Card: ForwardRefExoticComponent<
-  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
+  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -530,14 +592,8 @@ export declare interface CardProps
    */
   __unstable_focusRing?: boolean
   pressed?: boolean
-  scheme?: ThemeColorSchemeKey
+  scheme?: ThemeColorSchemeKey_2
   tone?: CardTone
-  /**
-   * @internal
-   * Used by the popover, as it creates a new html element that it's ouside of the previous scope of the card.
-   * So if it's inheriting styles from the parent, it needs to create a new cars context
-   */
-  updateCssVars?: boolean
 }
 
 /**
@@ -547,16 +603,16 @@ export declare interface CardStyleProps {
   $checkered: boolean
   $focusRing: boolean
   $tone: ThemeColorToneKey
-  $scheme: ThemeColorSchemeKey
-  $updateCssVars: boolean
 }
 
 /**
  * @public
  */
-export declare type CardTone = ThemeColorToneKey | 'inherit'
+export declare type CardTone = ThemeColorCardToneKey | 'inherit'
 
 /**
+ * Checkboxes allow the user to select one or more items from a set.
+ *
  * @public
  */
 export declare const Checkbox: ForwardRefExoticComponent<
@@ -581,7 +637,7 @@ export declare type ClickOutsideListener = (event: MouseEvent) => void
  * @public
  */
 export declare const Code: ForwardRefExoticComponent<
-  Omit<CodeProps & Omit<HTMLProps<HTMLElement>, 'as' | 'size'>, 'ref'> & RefAttributes<HTMLElement>
+  Omit<CodeProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> & RefAttributes<HTMLElement>
 >
 
 /**
@@ -589,6 +645,7 @@ export declare const Code: ForwardRefExoticComponent<
  */
 export declare interface CodeProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
   weight?: string
@@ -600,7 +657,7 @@ export declare interface CodeProps {
  */
 export declare const CodeSkeleton: ForwardRefExoticComponent<
   Omit<
-    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'size' | 'height'>,
+    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'children' | 'size' | 'as'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -615,10 +672,25 @@ export declare interface CodeSkeletonProps extends SkeletonProps {
 }
 
 /**
+ * @internal
+ */
+export declare function ConditionalWrapper({
+  children,
+  condition,
+  wrapper,
+}: {
+  children: React.ReactNode
+  condition: boolean
+  wrapper: (children: React.ReactNode) => React.ReactNode
+}): React.ReactNode
+
+/**
+ * The `Container` component wraps content layout in a defined set of widths.
+ *
  * @public
  */
 export declare const Container: ForwardRefExoticComponent<
-  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width'>, 'ref'> &
+  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -633,239 +705,10 @@ export declare interface ContainerProps extends BoxProps, ResponsiveWidthProps {
 export declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean
 
 /**
- * @internal
- * @deprecated Use studioTheme instead.
- */
-export declare function createColorTheme(): null
-
-/**
- * @beta
- */
-export declare const createCssVars: (
-  scheme: ThemeColorSchemeKey,
-  tones: Record<ThemeColorName, ColorTints>,
-  defaultTone?: ThemeColorName,
-) => Record<string, string>
-
-/** @internal */
-export declare type CSSObject = StyledObject<any>
-
-/**
- * @beta
- */
-export declare type CSSVariableKey = ThemeColorName & ('spot' | 'syntax' | 'mutable')
-
-/**
- * @beta
+ * @public
+ * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
  */
-export declare const cssVars: {
-  /**
-   * This variables are mutable, they can be updated by other components.
-   * The main component that updates them is the card, these are the only ones that should be exposed for use from the cards.
-   */
-  mutable: Record<
-    'bg-color' | 'muted-fg-color' | 'icon-color' | 'fg-color' | 'bg-image' | 'accent-color',
-    string
-  >
-  default: Record<
-    | 'text-primary'
-    | 'text-secondary'
-    | 'text-inactive'
-    | 'text-code'
-    | 'text-muted'
-    | 'text-link'
-    | 'text-accent'
-    | 'bg-base'
-    | 'bg-base-hover'
-    | 'bg-base-active'
-    | 'bg-accent'
-    | 'bg-accent-hover'
-    | 'bg-accent-active'
-    | 'bg-tint'
-    | 'bg-tint-code'
-    | 'icon-default'
-    | 'icon-inverted'
-    | 'border-base'
-    | 'border-base-hover'
-    | 'border-accent'
-    | 'border-accent-inverted'
-    | 'base-bg-card'
-    | 'base-bg-raw'
-    | 'base-shadow-outline-color'
-    | 'base-shadow-umbra-color'
-    | 'base-shadow-penumbra-color'
-    | 'base-shadow-ambient-color'
-    | 'base-text-color'
-    | 'skeleton-from'
-    | 'skeleton-to',
-    string
-  >
-  transparent: Record<
-    | 'text-primary'
-    | 'text-secondary'
-    | 'text-inactive'
-    | 'text-code'
-    | 'text-muted'
-    | 'text-link'
-    | 'text-accent'
-    | 'bg-base'
-    | 'bg-base-hover'
-    | 'bg-base-active'
-    | 'bg-accent'
-    | 'bg-accent-hover'
-    | 'bg-accent-active'
-    | 'bg-tint'
-    | 'bg-tint-code'
-    | 'icon-default'
-    | 'icon-inverted'
-    | 'border-base'
-    | 'border-base-hover'
-    | 'border-accent'
-    | 'border-accent-inverted'
-    | 'base-bg-card'
-    | 'base-bg-raw'
-    | 'base-shadow-outline-color'
-    | 'base-shadow-umbra-color'
-    | 'base-shadow-penumbra-color'
-    | 'base-shadow-ambient-color'
-    | 'base-text-color'
-    | 'skeleton-from'
-    | 'skeleton-to',
-    string
-  >
-  primary: Record<
-    | 'text-primary'
-    | 'text-secondary'
-    | 'text-inactive'
-    | 'text-code'
-    | 'text-muted'
-    | 'text-link'
-    | 'text-accent'
-    | 'bg-base'
-    | 'bg-base-hover'
-    | 'bg-base-active'
-    | 'bg-accent'
-    | 'bg-accent-hover'
-    | 'bg-accent-active'
-    | 'bg-tint'
-    | 'bg-tint-code'
-    | 'icon-default'
-    | 'icon-inverted'
-    | 'border-base'
-    | 'border-base-hover'
-    | 'border-accent'
-    | 'border-accent-inverted'
-    | 'base-bg-card'
-    | 'base-bg-raw'
-    | 'base-shadow-outline-color'
-    | 'base-shadow-umbra-color'
-    | 'base-shadow-penumbra-color'
-    | 'base-shadow-ambient-color'
-    | 'base-text-color'
-    | 'skeleton-from'
-    | 'skeleton-to',
-    string
-  >
-  positive: Record<
-    | 'text-primary'
-    | 'text-secondary'
-    | 'text-inactive'
-    | 'text-code'
-    | 'text-muted'
-    | 'text-link'
-    | 'text-accent'
-    | 'bg-base'
-    | 'bg-base-hover'
-    | 'bg-base-active'
-    | 'bg-accent'
-    | 'bg-accent-hover'
-    | 'bg-accent-active'
-    | 'bg-tint'
-    | 'bg-tint-code'
-    | 'icon-default'
-    | 'icon-inverted'
-    | 'border-base'
-    | 'border-base-hover'
-    | 'border-accent'
-    | 'border-accent-inverted'
-    | 'base-bg-card'
-    | 'base-bg-raw'
-    | 'base-shadow-outline-color'
-    | 'base-shadow-umbra-color'
-    | 'base-shadow-penumbra-color'
-    | 'base-shadow-ambient-color'
-    | 'base-text-color'
-    | 'skeleton-from'
-    | 'skeleton-to',
-    string
-  >
-  caution: Record<
-    | 'text-primary'
-    | 'text-secondary'
-    | 'text-inactive'
-    | 'text-code'
-    | 'text-muted'
-    | 'text-link'
-    | 'text-accent'
-    | 'bg-base'
-    | 'bg-base-hover'
-    | 'bg-base-active'
-    | 'bg-accent'
-    | 'bg-accent-hover'
-    | 'bg-accent-active'
-    | 'bg-tint'
-    | 'bg-tint-code'
-    | 'icon-default'
-    | 'icon-inverted'
-    | 'border-base'
-    | 'border-base-hover'
-    | 'border-accent'
-    | 'border-accent-inverted'
-    | 'base-bg-card'
-    | 'base-bg-raw'
-    | 'base-shadow-outline-color'
-    | 'base-shadow-umbra-color'
-    | 'base-shadow-penumbra-color'
-    | 'base-shadow-ambient-color'
-    | 'base-text-color'
-    | 'skeleton-from'
-    | 'skeleton-to',
-    string
-  >
-  critical: Record<
-    | 'text-primary'
-    | 'text-secondary'
-    | 'text-inactive'
-    | 'text-code'
-    | 'text-muted'
-    | 'text-link'
-    | 'text-accent'
-    | 'bg-base'
-    | 'bg-base-hover'
-    | 'bg-base-active'
-    | 'bg-accent'
-    | 'bg-accent-hover'
-    | 'bg-accent-active'
-    | 'bg-tint'
-    | 'bg-tint-code'
-    | 'icon-default'
-    | 'icon-inverted'
-    | 'border-base'
-    | 'border-base-hover'
-    | 'border-accent'
-    | 'border-accent-inverted'
-    | 'base-bg-card'
-    | 'base-bg-raw'
-    | 'base-shadow-outline-color'
-    | 'base-shadow-umbra-color'
-    | 'base-shadow-penumbra-color'
-    | 'base-shadow-ambient-color'
-    | 'base-text-color'
-    | 'skeleton-from'
-    | 'skeleton-to',
-    string
-  >
-}
+export declare const createColorTheme: any
 
 /**
  * @public
@@ -878,10 +721,12 @@ export declare type Delay =
     }>
 
 /**
+ * The Dialog component.
+ *
  * @public
  */
 export declare const Dialog: ForwardRefExoticComponent<
-  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'width' | 'id'>, 'ref'> &
+  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'width' | 'id' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -929,8 +774,15 @@ export declare interface DialogProps extends ResponsivePaddingProps, ResponsiveW
   onClose?: () => void
   portal?: string
   position?: DialogPosition | DialogPosition[]
-  scheme?: ThemeColorSchemeKey
+  scheme?: ThemeColorSchemeKey_2
   zOffset?: number | number[]
+  /**
+   * Whether the dialog should animate in on mount.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
 }
 
 /**
@@ -1036,10 +888,12 @@ export declare function _fillCSSObject(
 ): CSSObject
 
 /**
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
  * @public
  */
 export declare const Flex: ForwardRefExoticComponent<
-  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'wrap'>, 'ref'> &
+  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'wrap' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1094,19 +948,11 @@ export declare function focusFirstDescendant(element: HTMLElement): boolean
  */
 export declare function focusLastDescendant(element: HTMLElement): boolean
 
-/**
- * @public
- */
-export declare interface FocusRing {
-  offset: number
-  width: number
-}
-
 /**
  * @internal
  */
 export declare interface FontWeightStyleProps {
-  $weight?: ThemeFontWeightKey
+  $weight?: ThemeFontWeightKey_2
 }
 
 /**
@@ -1118,16 +964,18 @@ export declare function _getArrayProp<T = number>(val: T | T[] | undefined, defa
  * @internal
  */
 export declare function _getResponsiveSpace(
-  theme: Theme,
+  theme: Theme_2,
   props: string[],
   spaceIndexes?: number[],
 ): CSSObject[] | null
 
 /**
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
+ *
  * @public
  */
 export declare const Grid: ForwardRefExoticComponent<
-  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>, 'ref'> &
+  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1187,10 +1035,12 @@ export declare interface GridProps extends Omit<BoxProps, 'display'>, Responsive
 export declare function _hasFocus(element: HTMLElement): boolean
 
 /**
+ * Typographic headings.
+ *
  * @public
  */
 export declare const Heading: ForwardRefExoticComponent<
-  Omit<HeadingProps & Omit<HTMLProps<HTMLElement>, 'as' | 'size'>, 'ref'> &
+  Omit<HeadingProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLElement>
 >
 
@@ -1209,7 +1059,7 @@ export declare interface HeadingProps {
    * @beta
    */
   textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey
+  weight?: ThemeFontWeightKey_2
 }
 
 /**
@@ -1218,7 +1068,7 @@ export declare interface HeadingProps {
  */
 export declare const HeadingSkeleton: ForwardRefExoticComponent<
   Omit<
-    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'size' | 'height'>,
+    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'children' | 'size' | 'as'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1233,15 +1083,18 @@ export declare interface HeadingSkeletonProps extends SkeletonProps {
 }
 
 /**
- * @internal
+ * @public
+ * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
  */
-export declare function hexToRgb(hex: string): RGB
+export declare const hexToRgb: any
 
 /**
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
+ *
  * @public
  */
 export declare const Hotkeys: ForwardRefExoticComponent<
-  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'ref' | 'as' | 'size'> & RefAttributes<HTMLElement>
+  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLElement>
 >
 
 /**
@@ -1256,20 +1109,20 @@ export declare interface HotkeysProps {
 }
 
 /**
- * @internal
+ * @public
+ * @deprecated Use `HSL` from `@sanity/ui/theme` instead.
  */
-export declare interface HSL {
-  h: number
-  s: number
-  l: number
-}
+export declare type HSL = HSL_2
 
 /**
- * @internal
+ * @public
+ * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
  */
-export declare function hslToRgb(hsl: HSL): RGB
+export declare const hslToRgb: any
 
 /**
+ * The `Inline` component is a layout utility for aligning and spacing items horizontally.
+ *
  * @public
  */
 export declare const Inline: ForwardRefExoticComponent<
@@ -1280,6 +1133,7 @@ export declare const Inline: ForwardRefExoticComponent<
  * @public
  */
 export declare interface InlineProps extends Omit<BoxProps, 'display'> {
+  /** The spacing between children. */
   space?: number | number[]
 }
 
@@ -1329,10 +1183,12 @@ export declare function isHTMLTextAreaElement(element: unknown): element is HTML
 export declare function _isScrollable(el: Node): boolean
 
 /**
+ * Used to define some text as keyboard input.
+ *
  * @public
  */
 export declare const KBD: ForwardRefExoticComponent<
-  KBDProps & Omit<HTMLProps<HTMLElement>, 'ref' | 'as' | 'size'> & RefAttributes<HTMLDivElement>
+  KBDProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLDivElement>
 >
 
 /**
@@ -1346,10 +1202,12 @@ export declare interface KBDProps {
 }
 
 /**
+ * Typographic labels.
+ *
  * @public
  */
 export declare const Label: ForwardRefExoticComponent<
-  Omit<LabelProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'size'>, 'ref'> &
+  Omit<LabelProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1368,7 +1226,7 @@ export declare interface LabelProps {
    * @beta
    */
   textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey
+  weight?: ThemeFontWeightKey_2
 }
 
 /**
@@ -1377,7 +1235,7 @@ export declare interface LabelProps {
  */
 export declare const LabelSkeleton: ForwardRefExoticComponent<
   Omit<
-    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'size' | 'height'>,
+    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'children' | 'size' | 'as'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1449,14 +1307,18 @@ export declare interface _MediaStore {
 }
 
 /**
+ * The `Menu` component is a building block for application menus.
+ *
  * @public
  */
 export declare const Menu: ForwardRefExoticComponent<
-  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height' | 'tabIndex' | 'role'>, 'ref'> &
+  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'role' | 'tabIndex' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
 /**
+ * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
+ *
  * @public
  */
 export declare const MenuButton: ForwardRefExoticComponent<
@@ -1488,7 +1350,7 @@ export declare interface MenuButtonProps {
   /**
    * @deprecated Use `popover={{scheme: 'dark'}}` instead.
    */
-  popoverScheme?: ThemeColorSchemeKey
+  popoverScheme?: ThemeColorSchemeKey_2
   /**
    * @deprecated Use `popover={{radius: 2}}` instead.
    */
@@ -1519,7 +1381,7 @@ export declare const MenuDivider: IStyledComponent<
     accessKey?: string | undefined
     autoFocus?: boolean | undefined
     className?: string | undefined
-    contentEditable?: 'inherit' | (boolean | 'false' | 'true') | undefined
+    contentEditable?: 'inherit' | (boolean | 'false' | 'true') | 'plaintext-only' | undefined
     contextMenu?: string | undefined
     dir?: string | undefined
     draggable?: (boolean | 'false' | 'true') | undefined
@@ -1533,7 +1395,7 @@ export declare const MenuDivider: IStyledComponent<
     style?: CSSProperties | undefined
     tabIndex?: number | undefined
     title?: string | undefined
-    translate?: 'yes' | 'no' | undefined
+    translate?: 'no' | 'yes' | undefined
     radioGroup?: string | undefined
     role?: AriaRole | undefined
     about?: string | undefined
@@ -1558,11 +1420,11 @@ export declare const MenuDivider: IStyledComponent<
     itemRef?: string | undefined
     results?: number | undefined
     security?: string | undefined
-    unselectable?: 'on' | 'off' | undefined
+    unselectable?: 'off' | 'on' | undefined
     inputMode?:
-      | 'search'
-      | 'text'
       | 'none'
+      | 'text'
+      | 'search'
       | 'tel'
       | 'url'
       | 'email'
@@ -1572,7 +1434,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' | 'inline' | 'both' | 'list' | undefined
     'aria-braillelabel'?: string | undefined
     'aria-brailleroledescription'?: string | undefined
     'aria-busy'?: (boolean | 'false' | 'true') | undefined
@@ -1584,31 +1446,31 @@ export declare const MenuDivider: IStyledComponent<
     'aria-controls'?: string | undefined
     'aria-current'?:
       | boolean
-      | 'time'
       | 'page'
       | 'false'
       | 'true'
       | 'step'
       | 'location'
       | 'date'
+      | 'time'
       | undefined
     'aria-describedby'?: string | undefined
     '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' | 'copy' | 'move' | 'link' | '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
-      | 'dialog'
-      | 'menu'
-      | 'listbox'
       | 'grid'
+      | 'listbox'
+      | 'menu'
       | 'false'
       | 'true'
+      | 'dialog'
       | 'tree'
       | undefined
     'aria-hidden'?: (boolean | 'false' | 'true') | undefined
@@ -1628,8 +1490,8 @@ export declare const MenuDivider: IStyledComponent<
     'aria-pressed'?: boolean | 'mixed' | 'false' | 'true' | undefined
     'aria-readonly'?: (boolean | 'false' | 'true') | undefined
     'aria-relevant'?:
-      | 'text'
       | 'all'
+      | 'text'
       | 'additions'
       | 'additions removals'
       | 'additions text'
@@ -1851,7 +1713,7 @@ export declare interface MenuGroupProps {
  */
 export declare const MenuItem: ForwardRefExoticComponent<
   MenuItemProps &
-    Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as' | 'height' | 'tabIndex' | 'selected'> &
+    Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'ref' | 'as' | 'selected'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1868,7 +1730,7 @@ export declare interface MenuItemProps extends ResponsivePaddingProps, Responsiv
   selected?: boolean
   space?: number | number[]
   text?: React.ReactNode
-  tone?: ThemeColorToneKey
+  tone?: SelectableTone
 }
 
 /**
@@ -1894,16 +1756,18 @@ export declare interface MenuProps extends ResponsivePaddingProps {
 }
 
 /**
- * Apply the \`multiply\` blend mode
- * Source: https://www.w3.org/TR/compositing-1/#blendingmultiply
- * @internal
+ * @public
+ * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
  */
-export declare function multiply(b: RGB | RGBA, s: RGB | RGBA): RGB
+export declare const multiply: any
 
 /**
- * @internal
+ * @public
+ * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
  */
-export declare function parseColor(color: unknown): RGB | RGBA
+export declare const parseColor: any
+
+export {PartialThemeColorBuilderOpts}
 
 /**
  * Placement of floating UI elements.
@@ -1924,11 +1788,15 @@ export declare type Placement =
   | 'left-start'
   | 'left-end'
 
-/** @public */
+/**
+ * The `Popover` component is used to display some content on top of another.
+ *
+ * @public
+ */
 export declare const Popover: MemoExoticComponent<
   ForwardRefExoticComponent<
     Omit<
-      PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'content' | 'width'>,
+      PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'children' | 'as'>,
       'ref'
     > &
       RefAttributes<HTMLDivElement>
@@ -1947,25 +1815,52 @@ export declare interface PopoverProps
     ResponsiveShadowProps {
   /** @beta */
   __unstable_margins?: PopoverMargins
+  /**
+   * Whether the popover should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
   arrow?: boolean
   /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
+  /**
+     * When `true`, prevent overflow within the current boundary:
+     * - by flipping on its side axis
+     * - by resizing
+     /*
+     * Note that:
+     * - setting `preventOverflow` to `true` also prevents overflow on its side axis
+     * - setting `matchReferenceWidth` to `true` also causes the popover to resize
+     *
+     * @defaultValue false
+     */
   constrainSize?: boolean
   content?: React.ReactNode
   disabled?: boolean
   fallbackPlacements?: Placement[]
   floatingBoundary?: HTMLElement | null
+  /**
+   * When `true`, set the maximum width to match the reference element, and also prevent overflow within
+   * the current boundary by resizing.
+   *
+   * Note that setting `constrainSize` to `true` also causes the popover to resize
+   *
+   * @defaultValue false
+   */
   matchReferenceWidth?: boolean
   open?: boolean
   overflow?: BoxOverflow
   padding?: number | number[]
   placement?: Placement
+  /** Whether or not to render the popover in a portal element. */
   portal?: boolean | string
   preventOverflow?: boolean
   referenceBoundary?: HTMLElement | null
   referenceElement?: HTMLElement | null
-  scheme?: ThemeColorSchemeKey
+  scheme?: ThemeColorSchemeKey_2
   tone?: CardTone
   /** @beta */
   updateRef?:
@@ -2028,6 +1923,8 @@ export declare interface PortalProviderProps {
 }
 
 /**
+ * The `Radio` component allows the user to select one option from a set.
+ *
  * @public
  */
 export declare const Radio: ForwardRefExoticComponent<
@@ -2116,6 +2013,7 @@ export declare function responsiveCodeFontStyle(
  * @public
  */
 export declare interface ResponsiveFlexItemProps {
+  /** Sets the flex CSS attribute. The property is responsive. */
   flex?: FlexValue | FlexValue[]
 }
 
@@ -2193,8 +2091,11 @@ export declare function responsiveLabelFont(
  * @public
  */
 export declare interface ResponsiveMarginProps {
+  /** Applies margins to all sides. The property is responsive. */
   margin?: number | number[]
+  /** Applies margins to the left and right sides. The property is responsive. */
   marginX?: number | number[]
+  /** Applies margins to the top and bottom sides. The property is responsive. */
   marginY?: number | number[]
   marginTop?: number | number[]
   marginRight?: number | number[]
@@ -2267,60 +2168,45 @@ export declare interface ResponsiveWidthStyleProps {
 }
 
 /**
- * @internal
- */
-export declare interface RGB {
-  r: number
-  g: number
-  b: number
-  a?: undefined
-}
-
-/**
- * @internal
- */
-export declare interface RGBA {
-  r: number
-  g: number
-  b: number
-  a: number
-}
-
-/**
- * @internal
+ * @public
+ * @deprecated Use `RGB` from `@sanity/ui/theme` instead.
  */
-export declare function rgba(color: unknown, a: number): string
+export declare type RGB = RGB_2
 
 /**
- * @internal
+ * @public
+ * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
  */
-export declare function rgbaToRGBA(rgba: string): RGBA
+export declare const rgba: any
 
 /**
- * @internal
+ * @public
+ * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
  */
-export declare function rgbToHex({r, g, b}: RGB): string
+export declare const rgbToHex: any
 
 /**
- * @internal
- * @see https://css-tricks.com/converting-color-spaces-in-javascript/
+ * @public
+ * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
  */
-export declare function rgbToHsl({r, g, b}: RGB): HSL
+export declare const rgbToHsl: any
 
 /**
  * @public
+ * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
  */
-export declare type RootTheme = BaseTheme<Styles>
+export declare type RootTheme = RootTheme_2
 
 /**
- * Apply the \`screen\` blend mode
- * Source: https://www.w3.org/TR/compositing-1/#blendingscreen
- * @internal
+ * @public
+ * @deprecated Use `screen` from `@sanity/ui/theme` instead.
  */
-declare function screen_2(b: RGB | RGBA, s: RGB | RGBA): RGB
+declare const screen_2: any
 export {screen_2 as screen}
 
 /**
+ * The `Select` component provides control of options.
+ *
  * @public
  */
 export declare const Select: ForwardRefExoticComponent<
@@ -2331,7 +2217,7 @@ export declare const Select: ForwardRefExoticComponent<
 /**
  * @public
  */
-export declare type SelectableTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'
+export declare type SelectableTone = ThemeColorStateToneKey
 
 /**
  * @public
@@ -2362,10 +2248,12 @@ export declare interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxPr
 }
 
 /**
+ * Indicate that something is loading for an indeterminate amount of time.
+ *
  * @public
  */
 export declare const Spinner: ForwardRefExoticComponent<
-  Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'size'>, 'ref'> &
+  Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2381,7 +2269,7 @@ export declare interface SpinnerProps {
  * @public
  */
 export declare const SrOnly: ForwardRefExoticComponent<
-  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'aria-hidden'>, 'ref'> &
+  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2394,6 +2282,8 @@ export declare interface SrOnlyProps {
 }
 
 /**
+ * The `Stack` component is used to place elements on top of each other.
+ *
  * @public
  */
 export declare const Stack: ForwardRefExoticComponent<
@@ -2410,23 +2300,21 @@ export declare interface StackProps extends BoxProps {
 
 /**
  * @public
+ * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
  */
-export declare const studioTheme: RootTheme
+export declare const studioTheme: any
 
 /**
- * TODO: Rename to `ThemeStyles`
  * @public
+ * @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.
  */
-export declare interface Styles {
-  button?: {
-    root?: CSSObject
-  }
-  card?: {
-    root?: CSSObject
-  }
-}
+export declare type Styles = ThemeStyles
 
 /**
+ * The `Switch` component allows the user to toggle a setting on and off.
+ *
+ * Extends all properties of an `<input type="checkbox" />` element, except type.
+ *
  * @public
  */
 export declare const Switch: ForwardRefExoticComponent<
@@ -2446,7 +2334,11 @@ export declare interface SwitchProps {
  */
 export declare const Tab: ForwardRefExoticComponent<
   Omit<
-    TabProps & Omit<HTMLProps<HTMLButtonElement>, 'type' | 'label' | 'as' | 'id' | 'aria-controls'>,
+    TabProps &
+      Omit<
+        HTMLProps<HTMLButtonElement>,
+        'width' | 'id' | 'type' | 'aria-controls' | 'label' | 'as'
+      >,
     'ref'
   > &
     RefAttributes<HTMLButtonElement>
@@ -2456,7 +2348,7 @@ export declare const Tab: ForwardRefExoticComponent<
  * @public
  */
 export declare const TabList: ForwardRefExoticComponent<
-  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'height'>, 'ref'> &
+  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
     RefAttributes<unknown>
 >
 
@@ -2472,7 +2364,7 @@ export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'>
  */
 export declare const TabPanel: ForwardRefExoticComponent<
   Omit<
-    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'id' | 'role' | 'aria-labelledby'>,
+    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'role' | 'aria-labelledby' | 'as'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -2508,10 +2400,12 @@ export declare interface TabProps {
 }
 
 /**
+ * The `Text` component is an agile, themed typographic element.
+ *
  * @public
  */
 declare const Text_2: ForwardRefExoticComponent<
-  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'size'>, 'ref'> &
+  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 export {Text_2 as Text}
@@ -2522,6 +2416,9 @@ export {Text_2 as Text}
 export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
 
 /**
+ * A multiline text input.
+ *
+
  * @public
  */
 export declare const TextArea: ForwardRefExoticComponent<
@@ -2537,15 +2434,16 @@ export declare interface TextAreaProps extends ResponsiveRadiusProps {
   customValidity?: string
   fontSize?: number | number[]
   padding?: number | number[]
-  weight?: ThemeFontWeightKey
-  tone?: ThemeColorToneKey
+  weight?: ThemeFontWeightKey_2
 }
 
 /**
+ * Single line text input.
+ *
  * @public
  */
 export declare const TextInput: ForwardRefExoticComponent<
-  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'as' | 'prefix'>, 'ref'> &
+  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'prefix' | 'as'>, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2559,6 +2457,10 @@ export declare type TextInputClearButtonProps = Omit<ButtonProps, 'as'> &
  * @public
  */
 export declare interface TextInputProps {
+  /**
+   * @beta
+   */
+  __unstable_disableFocusRing?: boolean
   border?: boolean
   /**
    * @beta
@@ -2578,8 +2480,7 @@ export declare interface TextInputProps {
   space?: number | number[]
   suffix?: React.ReactNode
   type?: TextInputType
-  weight?: ThemeFontWeightKey
-  tone?: ThemeColorToneKey
+  weight?: ThemeFontWeightKey_2
 }
 
 /**
@@ -2606,6 +2507,7 @@ export declare interface TextProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** When `true` the text color will be muted. */
   muted?: boolean
   size?: number | number[]
   /**
@@ -2614,7 +2516,7 @@ export declare interface TextProps {
    * @beta
    */
   textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey
+  weight?: ThemeFontWeightKey_2
 }
 
 /**
@@ -2623,7 +2525,7 @@ export declare interface TextProps {
  */
 export declare const TextSkeleton: ForwardRefExoticComponent<
   Omit<
-    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'size' | 'height'>,
+    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'children' | 'size' | 'as'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -2639,202 +2541,156 @@ export declare interface TextSkeletonProps extends SkeletonProps {
 
 /**
  * @public
+ * @deprecated Use `Theme` from `@sanity/ui/theme` instead.
  */
-export declare interface Theme {
-  sanity: RootTheme
-}
+export declare type Theme = Theme_2
 
-/**
- * @public
- */
-export declare interface ThemeAvatar {
-  sizes: {
-    distance: number
-    size: number
-  }[]
-  focusRing: FocusRing
-}
+export {ThemeAvatar}
+
+export {ThemeColor}
+
+export {ThemeColorBase}
+
+export {ThemeColorBuilderOpts}
+
+export {ThemeColorButton}
 
 /**
  * @public
+ * @deprecated Use `ThemeColorButtonModeKey` from `@sanity/ui/theme` instead.
  */
-export declare type ThemeColorName =
-  | 'default'
-  | 'transparent'
-  | 'primary'
-  | 'positive'
-  | 'caution'
-  | 'critical'
+export declare type ThemeColorButtonModeKey = ThemeColorButtonModeKey_2
+
+export {ThemeColorButtonState}
+
+export {ThemeColorButtonStates}
+
+export {ThemeColorButtonTones}
+
+export {ThemeColorCard}
+
+export {ThemeColorCardState}
+
+export {ThemeColorGenericState}
+
+export {ThemeColorInput}
+
+export {ThemeColorInputState}
+
+export {ThemeColorInputStates}
+
+export {ThemeColorMuted}
+
+export {ThemeColorMutedTone}
+
+export {ThemeColorName}
 
 /**
  * @public
- * @deprecated Use `toneContext` instead.
  */
 export declare function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement
 
 /**
  * @public
- * @deprecated
  */
 export declare interface ThemeColorProviderProps {
   children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey
-  tone?: ThemeColorName
+  scheme?: ThemeColorSchemeKey_2
+  tone?: ThemeColorCardToneKey
 }
 
-/**
- * @public
- */
-export declare type ThemeColorSchemeKey = 'dark' | 'light'
+export {ThemeColorScheme}
 
 /**
  * @public
+ * @deprecated Use `ThemeColorSchemeKey` from `@sanity/ui/theme` instead.
  */
-export declare interface ThemeColorSchemes {
-  tones: Record<ThemeColorName, ColorTints>
-}
+export declare type ThemeColorSchemeKey = ThemeColorSchemeKey_2
 
-/**
- * @public
- */
-export declare type ThemeColorSpotKey =
-  | 'gray'
-  | 'blue'
-  | 'purple'
-  | 'magenta'
-  | 'red'
-  | 'orange'
-  | 'yellow'
-  | 'green'
-  | 'cyan'
+export {ThemeColorSchemes}
+
+export {ThemeColorSelectable}
+
+export {ThemeColorSelectableState}
+
+export {ThemeColorSelectableStates}
+
+export {ThemeColorSolid}
+
+export {ThemeColorSolidTone}
+
+export {ThemeColorSpot}
+
+export {ThemeColorSpotKey}
 
 /**
  * @public
+ * @deprecated Use `ThemeColorSyntax` from `@sanity/ui/theme` instead.
  */
-export declare type ThemeColorToneKey =
-  | 'default'
-  | 'transparent'
-  | 'primary'
-  | 'positive'
-  | 'caution'
-  | 'critical'
+export declare type ThemeColorSyntax = ThemeColorSyntax_2
+
+export {ThemeColorToneKey}
 
 /**
  * @public
  */
 export declare interface ThemeContextValue {
+  /** @deprecated No longer used */
   version: 0.0
-  scheme: ThemeColorSchemeKey
-  theme: RootTheme
-  tone: ThemeColorName
+  scheme: ThemeColorSchemeKey_2
+  theme: RootTheme_2
+  tone: ThemeColorCardToneKey
 }
 
 /**
  * @public
+ * @deprecated Use `ThemeFont` from `@sanity/ui/theme` instead.
  */
-export declare interface ThemeFont {
-  family: string
-  weights: ThemeFontWeight
-  sizes: ThemeFontSize[]
-  /** @deprecated No longer supported. */
-  horizontalOffset?: number
-}
+export declare type ThemeFont = ThemeFont_2
 
 /**
  * @public
+ * @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.
  */
-export declare type ThemeFontKey = 'code' | 'heading' | 'label' | 'text'
+export declare type ThemeFontKey = ThemeFontKey_2
 
 /**
  * @public
+ * @deprecated Use `ThemeFonts` from `@sanity/ui/theme` instead.
  */
-export declare interface ThemeFonts {
-  code: ThemeFont
-  heading: ThemeFont
-  label: ThemeFont
-  text: ThemeFont
-}
+export declare type ThemeFonts = ThemeFonts_2
 
 /**
  * @public
+ * @deprecated Use `ThemeFontSize` from `@sanity/ui/theme` instead.
  */
-export declare interface ThemeFontSize {
-  ascenderHeight: number
-  descenderHeight: number
-  fontSize: number
-  iconSize: number
-  letterSpacing: number
-  lineHeight: number
-}
+export declare type ThemeFontSize = ThemeFontSize_2
 
 /**
  * @public
+ * @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.
  */
-export declare interface ThemeFontWeight {
-  regular: number
-  medium: number
-  semibold: number
-  bold: number
-}
+export declare type ThemeFontWeight = ThemeFontWeight_2
 
 /**
  * @public
+ * @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.
  */
-export declare type ThemeFontWeightKey = 'regular' | 'medium' | 'semibold' | 'bold'
+export declare type ThemeFontWeightKey = ThemeFontWeightKey_2
 
-/**
- * @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 {ThemeInput}
 
 /**
- * THIS API MAY BE UNSTABLE. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
+ * @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.
  */
-export declare interface ThemeLayer {
-  dialog: {
-    zOffset: number
-  }
-  popover: {
-    zOffset: number
-  }
-  tooltip: {
-    zOffset: number
-  }
-}
+export declare type ThemeLayer = ThemeLayer_2
 
 /**
  * @internal
  */
 export declare interface ThemeProps {
-  theme: Theme
+  theme: Theme_2
 }
 
 /**
@@ -2847,21 +2703,22 @@ export declare function ThemeProvider(props: ThemeProviderProps): React.ReactEle
  */
 export declare interface ThemeProviderProps {
   children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey
-  theme?: RootTheme
-  tone?: ThemeColorName
+  scheme?: ThemeColorSchemeKey_2
+  theme?: RootTheme_2
+  tone?: ThemeColorCardToneKey
 }
 
 /**
  * @public
+ * @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.
  */
-export declare interface ThemeShadow {
-  umbra: BoxShadow
-  penumbra: BoxShadow
-  ambient: BoxShadow
-}
+export declare type ThemeShadow = ThemeShadow_2
 
 /**
+ * The `Toast` component gives feedback to users when an action has taken place.
+ *
+ * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ *
  * @public
  */
 export declare function Toast(
@@ -2896,6 +2753,7 @@ export declare interface ToastProps {
   closable?: boolean
   description?: React.ReactNode
   onClose?: () => void
+  radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
 }
@@ -2917,10 +2775,12 @@ export declare interface ToastProviderProps {
 }
 
 /**
+ * Tooltips display information when hovering, focusing or tapping.
+ *
  * @public
  */
 export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'children' | 'as' | 'content'>, 'ref'> &
+  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'children' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2956,11 +2816,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
 }
@@ -2971,6 +2833,7 @@ export declare interface TooltipDelayGroupProviderProps {
 export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
   /** @deprecated Use `fallbackPlacements` instead. */
   allowedAutoPlacements?: Placement[]
+  arrow?: boolean
   boundaryElement?: HTMLElement | null
   children?: React.ReactElement
   content?: React.ReactNode
@@ -2978,17 +2841,29 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
   fallbackPlacements?: Placement[]
   padding?: number | number[]
   placement?: Placement
+  /** Whether or not to render the tooltip in a portal element. */
   portal?: boolean | string
-  scheme?: ThemeColorSchemeKey
+  radius?: number | number[]
+  scheme?: ThemeColorSchemeKey_2
   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
 }
 
 /**
@@ -2998,7 +2873,7 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
 export declare const Tree: MemoExoticComponent<
   ForwardRefExoticComponent<
     TreeProps &
-      Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as' | 'wrap' | 'height' | 'role' | 'align'> &
+      Omit<HTMLProps<HTMLDivElement>, 'height' | 'role' | 'wrap' | 'ref' | 'as' | 'align'> &
       RefAttributes<HTMLDivElement>
   >
 >
@@ -3023,7 +2898,7 @@ export declare interface TreeContextValue {
  * @beta
  */
 export declare const TreeItem: NamedExoticComponent<
-  TreeItemProps & Omit<HTMLProps<HTMLLIElement>, 'ref' | 'as' | 'role'>
+  TreeItemProps & Omit<HTMLProps<HTMLLIElement>, 'role' | 'ref' | 'as'>
 >
 
 /**
@@ -3040,7 +2915,7 @@ export declare interface TreeItemProps {
   padding?: number | number[]
   space?: number | number[]
   text?: React.ReactNode
-  weight?: ThemeFontWeightKey
+  weight?: ThemeFontWeightKey_2
 }
 
 /**
@@ -3165,7 +3040,12 @@ export declare function useRootTheme(): ThemeContextValue
 /**
  * @public
  */
-export declare function useTheme(): Theme
+export declare function useTheme(): Theme_2
+
+/**
+ * @public
+ */
+export declare function useTheme_v2(): Theme_v2
 
 /**
  * @public
@@ -3188,7 +3068,7 @@ export declare function useTree(): TreeContextValue
 export declare const VirtualList: ForwardRefExoticComponent<
   VirtualListProps<any> &
     StackProps &
-    Omit<HTMLProps<HTMLDivElement>, 'children' | 'ref' | 'as' | 'onChange'> &
+    Omit<HTMLProps<HTMLDivElement>, 'children' | 'onChange' | 'ref' | 'as'> &
     RefAttributes<HTMLDivElement>
 >