@sanity/ui 3.3.0 → 3.3.2

package/dist/index.d.mts

@@ -1,2646 +1,497 @@
-import {BaseTheme as BaseTheme_2} from '@sanity/ui/theme'
-import {Component} from 'react'
-import {Context} from 'react'
-import {createColorTheme as createColorTheme_2} from '@sanity/ui/theme'
-import {CSSObject} from '@sanity/ui/theme'
-import {ElementType as ElementType_2} from 'react'
-import {ForwardRefExoticComponent} from 'react'
-import {hexToRgb as hexToRgb_2} from '@sanity/ui/theme'
-import {HSL as HSL_2} from '@sanity/ui/theme'
-import {hslToRgb as hslToRgb_2} from '@sanity/ui/theme'
-import {HTMLProps} from 'react'
-import {multiply as multiply_2} from '@sanity/ui/theme'
-import {parseColor as parseColor_2} from '@sanity/ui/theme'
-import {PartialThemeColorBuilderOpts} from '@sanity/ui/theme'
-import {PropsWithChildren} from 'react'
-import {ReactNode} from 'react'
-import {Ref} from 'react'
-import {RefAttributes} from 'react'
-import {RGB as RGB_2} from '@sanity/ui/theme'
-import {rgba as rgba_2} from '@sanity/ui/theme'
-import {rgbToHex as rgbToHex_2} from '@sanity/ui/theme'
-import {rgbToHsl as rgbToHsl_2} from '@sanity/ui/theme'
-import {RootTheme as RootTheme_2} from '@sanity/ui/theme'
-import {screen as screen_3} 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'
-
-/** @beta */
-export declare type ArrayPropPrimitive = string | number | boolean | undefined | null
-
-/** @internal */
-export declare const Arrow: ForwardRefExoticComponent<
-  Omit<
-    {
-      width: number
-      height: number
-      radius?: number
-    } & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
- *
- * @public
- */
-export declare type Assign<T extends object, U extends object> = Omit<T, keyof U> & U
-
+import { $t as ThemeColorGenericState, At as ThemeColorScheme, Bt as ThemeColorMutedTone, Et as Theme$1, Ft as ThemeColorSolidTone, Gt as ThemeColorCardState, Hn as ThemeColorSchemeKey$1, Ht as ThemeColorInputState, It as ThemeColorSelectable, Jt as ThemeColorButtonStates, Kt as ThemeColorButton, Lt as ThemeColorSelectableState, Mt as ThemeColorSpot, Nt as ThemeColorSpotKey, Ot as ThemeInput, Pt as ThemeColorSolid, Qt as ThemeColorToneKey, Rt as ThemeColorSelectableStates, Ut as ThemeColorInputStates, Vt as ThemeColorInput, Wt as ThemeColorCard, Xt as ThemeColorBase, Yt as ThemeColorButtonTones, Zt as ThemeColorName, bt as PartialThemeColorBuilderOpts, en as ThemeAvatar, fn as CSSObject, jt as ThemeColorSchemes, kt as ThemeColor, qt as ThemeColorButtonState, un as ThemeFontWeightKey$1, wt as RootTheme$1, xt as ThemeColorBuilderOpts, zn as ThemeColorCardToneKey, zt as ThemeColorMuted } from "./theme.mjs";
+import { $ as VirtualListProps, $n as ButtonWidth, $t as AvatarStackProps, A as TooltipProps, An as GridItemColumnStart, Ar as multiply, At as ResponsiveWidthStyleProps, B as Stack, Bn as FlexValue, Bt as CardProps, C as MenuGroupProps, Cn as TextAlign, Cr as ThemeFontWeightKey, Ct as HeadingProps, D as TooltipDelayGroupContext, Dn as Placement, Dr as createColorTheme, Dt as Flex, E as TooltipDelayGroupProviderProps, En as PopoverMargins, Er as ThemeShadow, Et as GridProps, F as TextArea, Fn as GridAutoFlow, Fr as screen, Ft as CodeOwnProps, G as Select, Gn as ElementType, Gt as BadgeOwnProps, H as StackProps, Hn as DialogPosition, Ht as ButtonOwnProps, I as TextAreaProps, In as GridAutoRows, Ir as studioTheme, It as CodeProps, J as PopoverProps, Jn as TagType, Jt as BoxOwnProps, K as SelectProps, Kn as EmptyProps, Kt as BadgeProps, L as Text, Ln as FlexAlign, Lt as CardStyleProps, M as TextInputClearButtonProps, Mn as GridItemRowEnd, Mr as rgbToHex, Mt as ContainerOwnProps, N as TextInputProps, Nn as GridItemRowStart, Nr as rgbToHsl, Nt as ContainerProps, O as TooltipDelayGroupContextValue, On as GridItemColumn, Or as hexToRgb, Ot as FlexOwnProps, P as TextInputType, Pn as GridAutoCols, Pr as rgba, Pt as Code, Q as VirtualListChangeOpts, Qn as ButtonTone, Qt as AvatarStack, R as TextOwnProps, Rn as FlexDirection, Rt as Card, S as MenuGroupOwnProps, Sn as HotkeysProps, Sr as ThemeFontWeight, St as HeadingOwnProps, T as TooltipDelayGroupProvider, Tn as Radius, Tr as ThemeLayer, Tt as GridOwnProps, U as Spinner, Un as Assign, Ut as ButtonProps, V as StackOwnProps, Vn as FlexWrap, Vt as Button, W as SpinnerProps, Wn as ComponentType, Wt as Badge, X as PopoverWidth, Xn as ButtonMode, Xt as AvatarRootStyleProps, Y as PopoverUpdateCallback, Yn as CardTone, Yt as BoxProps, Z as VirtualList, Zn as ButtonTextAlign, Zt as ResponsiveAvatarSizeStyleProps, _ as TabProps, _n as ResponsivePaddingProps, _r as ThemeColorSchemeKey, _t as KBDProps, a as usePrefersDark, an as MenuDivider, ar as BadgeTone, at as LayerProviderProps, b as MenuItemProps, bn as ResponsiveWidthProps, br as ThemeFontKey, bt as InlineProps, c as isHTMLAnchorElement, cn as MenuProps, cr as AvatarStatus, ct as ErrorBoundary, d as isHTMLInputElement, dn as ResponsiveBoxProps, dr as HSL, dt as Arrow, en as AvatarCounter, er as BoxDisplay, et as PortalProvider, f as isHTMLSelectElement, fn as ResponsiveFlexItemProps, fr as RGB, ft as Label, g as Tab, gn as ResponsiveMarginProps, gr as ThemeColorButtonModeKey, gt as KBDOwnProps, h as TabListProps, hn as ResponsiveGridProps, hr as Theme, ht as KBD, i as ThemeProviderProps, in as AvatarProps, ir as BadgeMode, it as LayerProvider, j as TextInput, jn as GridItemRow, jr as parseColor, jt as Container, k as Tooltip, kn as GridItemColumnEnd, kr as hslToRgb, kt as FlexProps, l as isHTMLButtonElement, ln as Delay, lr as BaseTheme, lt as ErrorBoundaryProps, m as TabList, mn as ResponsiveGridItemProps, mr as Styles, mt as LabelProps, n as useTheme_v2, nn as Avatar, nr as BoxOverflow, nt as Portal, o as _isEnterToClickElement, on as MenuDividerProps, or as AvatarPosition, ot as Layer, p as isHTMLTextAreaElement, pn as ResponsiveFlexProps, pr as RootTheme, pt as LabelOwnProps, q as Popover, qn as Props, qt as Box, r as ThemeProvider, rn as AvatarOwnProps, rr as BoxSizing, rt as PortalProps, s as containsOrEqualsElement, sn as Menu, sr as AvatarSize, st as LayerProps, t as useTheme, tn as AvatarCounterProps, tr as BoxHeight, tt as PortalProviderProps, u as isHTMLElement, un as ResponsiveBorderProps, ur as BoxShadow, ut as ErrorBoundaryState, v as MenuItem, vn as ResponsiveRadiusProps, vr as ThemeColorSyntax, vt as Inline, w as useTooltipDelayGroup, wn as SelectableTone, wr as ThemeFonts, wt as Grid, x as MenuGroup, xn as Hotkeys, xr as ThemeFontSize, xt as Heading, y as MenuItemOwnProps, yn as ResponsiveShadowProps, yr as ThemeFont, yt as InlineOwnProps, z as TextProps, zn as FlexJustify, zt as CardOwnProps } from "./useTheme.mjs";
+import { ElementType as ElementType$1, HTMLProps, ReactNode, Ref } from "react";
 /**
- * @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>,
-      | 'aria-activedescendant'
-      | 'aria-autocomplete'
-      | 'aria-expanded'
-      | 'aria-owns'
-      | 'as'
-      | 'autoCapitalize'
-      | 'autoComplete'
-      | 'autoCorrect'
-      | 'id'
-      | 'inputMode'
-      | 'onChange'
-      | 'onSelect'
-      | 'popover'
-      | 'prefix'
-      | 'ref'
-      | 'role'
-      | 'spellCheck'
-      | 'type'
-      | 'value'
-    > & {
-      ref?: Ref<HTMLInputElement>
-    },
-) => React.JSX.Element
-
-/**
- * @internal
- */
-export declare interface AutocompleteInputChangeMsg {
-  type: 'input/change'
-  query: string | null
-}
-
-/**
- * @internal
- */
-export declare interface AutocompleteInputFoocusMsg {
-  type: 'input/focus'
+interface CheckboxProps {
+  indeterminate?: boolean;
+  customValidity?: string;
 }
-
-/**
- * @internal
- */
-export declare type AutocompleteMsg =
-  | AutocompleteRootBlurMsg
-  | AutocompleteRootClearMsg
-  | AutocompleteRootEscapeMsg
-  | AutocompleteRootOpenMsg
-  | AutocompleteRootSetActiveValueMsg
-  | AutocompleteRootSetListFocusedMsg
-  | AutocompleteInputChangeMsg
-  | AutocompleteInputFoocusMsg
-  | AutocompleteValueChangeMsg
-
 /**
+ * Checkboxes allow the user to select one or more items from a set.
+ *
  * @public
  */
-export declare type AutocompleteOpenButtonProps = ButtonOwnProps &
-  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
-
+declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").HTMLProps<HTMLInputElement>, "as" | "type"> & CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 /**
  * @public
  */
-export declare interface AutocompleteProps<
-  Option extends BaseAutocompleteOption = BaseAutocompleteOption,
-> {
-  border?: boolean
-  customValidity?: string
-  filterOption?: (query: string, option: Option) => boolean
-  fontSize?: number | number[]
-  icon?: ElementType_2 | ReactNode
-  id: string
-  /** @beta */
-  listBox?: BoxProps
-  loading?: boolean
-  onChange?: (value: string) => void
-  onQueryChange?: (query: string | null) => void
-  onSelect?: (value: string) => void
-  /** @beta */
-  openButton?: boolean | AutocompleteOpenButtonProps
-  /** @beta */
-  openOnFocus?: boolean
-  /** The options to render. */
-  options?: Option[]
-  padding?: number | number[]
-  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
-    Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
-  prefix?: ReactNode
-  radius?: Radius | Radius[]
-  /** @beta */
-  relatedElements?: HTMLElement[]
-  /** The callback function for rendering each option. */
-  renderOption?: (option: Option) => React.JSX.Element
-  /** @beta */
-  renderPopover?: (
-    props: {
-      content: React.JSX.Element | null
-      hidden: boolean
-      inputElement: HTMLInputElement | null
-      onMouseEnter: () => void
-      onMouseLeave: () => void
-    },
-    ref: Ref<HTMLDivElement>,
-  ) => ReactNode
-  renderValue?: (value: string, option?: Option) => string
-  suffix?: ReactNode
-  /** The current value. */
-  value?: string
-}
-
-/**
- * @internal
- */
-export declare interface AutocompleteRootBlurMsg {
-  type: 'root/blur'
-}
-
-/**
- * @internal
- */
-export declare interface AutocompleteRootClearMsg {
-  type: 'root/clear'
+interface BoundaryElementProviderProps {
+  children: React.ReactNode;
+  element: HTMLElement | null;
 }
-
 /**
- * @internal
+ * @public
  */
-export declare interface AutocompleteRootEscapeMsg {
-  type: 'root/escape'
+declare function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element;
+declare namespace BoundaryElementProvider {
+  var displayName: string;
 }
-
 /**
- * @internal
+ * @public
  */
-export declare interface AutocompleteRootOpenMsg {
-  type: 'root/open'
-  query: string | null
+interface BoundaryElementContextValue {
+  version: 0.0;
+  element: HTMLElement | null;
 }
-
 /**
- * @internal
+ * @public
  */
-export declare interface AutocompleteRootSetActiveValueMsg {
-  type: 'root/setActiveValue'
-  value: string
-  listFocused?: boolean
-}
-
+declare function useBoundaryElement(): BoundaryElementContextValue;
 /**
  * @internal
+ * @deprecated this component will be removed in the next major release
  */
-export declare interface AutocompleteRootSetListFocusedMsg {
-  type: 'root/setListFocused'
-  listFocused: boolean
+declare function ConditionalWrapper({
+  children,
+  condition,
+  wrapper
+}: {
+  children: React.ReactNode;
+  condition: boolean;
+  wrapper: (children: React.ReactNode) => React.ReactNode;
+}): React.ReactNode;
+declare namespace ConditionalWrapper {
+  var displayName: string;
 }
-
 /**
- * @internal
+ * DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare interface AutocompleteState {
-  activeValue: string | null
-  focused: boolean
-  listFocused: boolean
-  query: string | null
-  value: string | null
+interface MediaQueryProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements;
+  media?: number[];
 }
-
 /**
- * @internal
+ * DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare interface AutocompleteValueChangeMsg {
-  type: 'value/change'
-  value: string | null
+declare const ElementQuery: import("react").ForwardRefExoticComponent<Omit<MediaQueryProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "media">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** @public */
+interface LayerContextValue {
+  version: 0.0;
+  isTopLayer: boolean;
+  level?: number;
+  registerChild: (childLevel?: number) => () => void;
+  size: number;
+  zIndex: number;
 }
-
 /**
- * Avatars are used to represent people and other agents (e.g. bots).
- *
  * @public
  */
-export declare const Avatar: <E extends ElementType = 'div'>(
-  props: AvatarProps<E>,
-) => React.JSX.Element
-
+declare function useLayer(): LayerContextValue;
 /**
  * @public
  */
-export declare const AvatarCounter: ForwardRefExoticComponent<
-  AvatarCounterProps & RefAttributes<HTMLDivElement>
->
-
+interface PortalContextValue {
+  version: 0.0;
+  boundaryElement: HTMLElement | null;
+  element: HTMLElement | null;
+  elements?: Record<string, HTMLElement | null | undefined>;
+}
 /**
  * @public
  */
-export declare interface AvatarCounterProps {
-  count: number
-  size?: AvatarSize | AvatarSize[]
-  /** @deprecated No longer supported. */
-  tone?: 'navbar'
-}
-
+declare function usePortal(): PortalContextValue;
 /**
  * @public
  */
-export declare interface AvatarOwnProps {
-  /** @beta */
-  __unstable_hideInnerStroke?: boolean
-  animateArrowFrom?: AvatarPosition
-  arrowPosition?: AvatarPosition
-  color?: ThemeColorAvatarColorKey
-  initials?: string
-  onImageLoadError?: (event: Error) => void
-  size?: AvatarSize | AvatarSize[]
-  src?: string
-  /**
-   * The status of the entity this Avatar represents.
-   * @alpha
-   */
-  status?: AvatarStatus
-  title?: string
+interface SrOnlyProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements;
+  children?: React.ReactNode;
 }
-
 /**
  * @public
  */
-export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
-
+declare const SrOnly: import("react").ForwardRefExoticComponent<Omit<SrOnlyProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "aria-hidden">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * @public
  */
-export declare type AvatarProps<E extends ElementType = 'div'> = Props<AvatarOwnProps, E>
-
-/**
- * @internal
- */
-export declare interface AvatarRootStyleProps {
-  $color: ThemeColorAvatarColorKey
+interface RadioProps {
+  customValidity?: string;
 }
-
-/**
- * @public
- */
-export declare type AvatarSize = 0 | 1 | 2 | 3
-
 /**
+ * The `Radio` component allows the user to select one option from a set.
+ *
  * @public
  */
-export declare const AvatarStack: ForwardRefExoticComponent<
-  AvatarStackProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'ref'> & RefAttributes<HTMLDivElement>
->
-
+declare const Radio: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").HTMLProps<HTMLInputElement>, "as" | "type"> & RadioProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 /**
  * @public
  */
-export declare interface AvatarStackProps {
-  children: React.ReactNode
-  maxLength?: number
-  size?: AvatarSize | AvatarSize[]
-  /** @deprecated No longer supported. */
-  tone?: 'navbar'
+interface SwitchProps {
+  indeterminate?: boolean;
 }
-
-/**
- * @public
- */
-export declare type AvatarStatus = 'online' | 'editing' | 'inactive'
-
 /**
- * Badges are used to tag resources.
+ * 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 Badge: <E extends ElementType = 'div'>(
-  props: BadgeProps<E>,
-) => React.JSX.Element
-
+declare const Switch: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").HTMLProps<HTMLInputElement>, "as" | "type"> & SwitchProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 /**
  * @public
- * @deprecated No longer used
  */
-export declare type BadgeMode = 'default' | 'outline'
-
+type AutocompleteOpenButtonProps = ButtonOwnProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>;
 /**
  * @public
  */
-export declare interface BadgeOwnProps extends BoxOwnProps, ResponsiveRadiusProps {
-  fontSize?: number | number[]
-  /** @deprecated No longer used. */
-  mode?: BadgeMode
-  tone?: BadgeTone
+interface BaseAutocompleteOption {
+  value: string;
 }
-
-/**
- * @public
- */
-export declare type BadgeProps<E extends ElementType = 'div'> = Props<BadgeOwnProps, E>
-
-/**
- * @public
- */
-export declare type BadgeTone = ThemeColorStateToneKey
-
 /**
- * @public
+ * @internal
  */
-export declare interface BaseAutocompleteOption {
-  value: string
+interface AutocompleteState {
+  activeValue: string | null;
+  focused: boolean;
+  listFocused: boolean;
+  query: string | null;
+  value: string | null;
 }
-
 /**
- * @public
- * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
+ * @internal
  */
-export declare type BaseTheme = BaseTheme_2
-
+interface AutocompleteRootBlurMsg {
+  type: 'root/blur';
+}
 /**
- * @public
+ * @internal
  */
-export declare interface BoundaryElementContextValue {
-  version: 0.0
-  element: HTMLElement | null
+interface AutocompleteRootClearMsg {
+  type: 'root/clear';
 }
-
 /**
- * @public
+ * @internal
  */
-export declare function BoundaryElementProvider(
-  props: BoundaryElementProviderProps,
-): React.JSX.Element
-
-export declare namespace BoundaryElementProvider {
-  var displayName: string
+interface AutocompleteRootEscapeMsg {
+  type: 'root/escape';
 }
-
 /**
- * @public
+ * @internal
  */
-export declare interface BoundaryElementProviderProps {
-  children: React.ReactNode
-  element: HTMLElement | null
+interface AutocompleteRootOpenMsg {
+  type: 'root/open';
+  query: string | null;
 }
-
 /**
- * The `Box` component is a basic layout wrapper component which provides utility properties
- * for flex, margins and padding.
- *
- * @public
+ * @internal
  */
-export declare const Box: <E extends ElementType = 'div'>(props: BoxProps<E>) => React.JSX.Element
-
+interface AutocompleteRootSetActiveValueMsg {
+  type: 'root/setActiveValue';
+  value: string;
+  listFocused?: boolean;
+}
 /**
- * @public
+ * @internal
  */
-export declare type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
-
+interface AutocompleteRootSetListFocusedMsg {
+  type: 'root/setListFocused';
+  listFocused: boolean;
+}
 /**
- * @public
+ * @internal
  */
-export declare type BoxHeight = 'stretch' | 'fill'
-
+interface AutocompleteInputChangeMsg {
+  type: 'input/change';
+  query: string | null;
+}
 /**
- * @public
+ * @internal
  */
-export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
-
+interface AutocompleteInputFoocusMsg {
+  type: 'input/focus';
+}
 /**
- * The props that `Box` adds on top of the element it renders as.
- *
- * @public
+ * @internal
  */
-export declare interface BoxOwnProps
-  extends ResponsiveFlexItemProps,
-    ResponsiveBoxProps,
-    ResponsiveGridItemProps,
-    ResponsiveMarginProps,
-    ResponsivePaddingProps {
-  forwardedAs?: ElementType
+interface AutocompleteValueChangeMsg {
+  type: 'value/change';
+  value: string | null;
 }
-
 /**
- * @public
+ * @internal
  */
-export declare type BoxProps<E extends ElementType = 'div'> = Props<BoxOwnProps, E>
-
+type AutocompleteMsg = AutocompleteRootBlurMsg | AutocompleteRootClearMsg | AutocompleteRootEscapeMsg | AutocompleteRootOpenMsg | AutocompleteRootSetActiveValueMsg | AutocompleteRootSetListFocusedMsg | AutocompleteInputChangeMsg | AutocompleteInputFoocusMsg | AutocompleteValueChangeMsg;
 /**
  * @public
- * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
  */
-export declare type BoxShadow = ThemeBoxShadow
-
+interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {
+  border?: boolean;
+  customValidity?: string;
+  filterOption?: (query: string, option: Option) => boolean;
+  fontSize?: number | number[];
+  icon?: ElementType$1 | ReactNode;
+  id: string;
+  /** @beta */
+  listBox?: BoxProps;
+  loading?: boolean;
+  onChange?: (value: string) => void;
+  onQueryChange?: (query: string | null) => void;
+  onSelect?: (value: string) => void;
+  /** @beta */
+  openButton?: boolean | AutocompleteOpenButtonProps;
+  /** @beta */
+  openOnFocus?: boolean;
+  /** The options to render. */
+  options?: Option[];
+  padding?: number | number[];
+  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> & Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>;
+  prefix?: ReactNode;
+  radius?: Radius | Radius[];
+  /** @beta */
+  relatedElements?: HTMLElement[];
+  /** The callback function for rendering each option. */
+  renderOption?: (option: Option) => React.JSX.Element;
+  /** @beta */
+  renderPopover?: (props: {
+    content: React.JSX.Element | null;
+    hidden: boolean;
+    inputElement: HTMLInputElement | null;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+  }, ref: Ref<HTMLDivElement>) => ReactNode;
+  renderValue?: (value: string, option?: Option) => string;
+  suffix?: ReactNode;
+  /** The current value. */
+  value?: string;
+}
 /**
+ * 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 type BoxSizing = 'content' | 'border'
-
-/**
- * @beta
- */
-export declare const Breadcrumbs: ForwardRefExoticComponent<
-  BreadcrumbsProps &
-    Omit<HTMLProps<HTMLOListElement>, 'type' | 'as' | 'ref'> &
-    RefAttributes<HTMLOListElement>
->
-
+declare const Autocomplete: <Option extends BaseAutocompleteOption>(props: AutocompleteProps<Option> & Omit<HTMLProps<HTMLInputElement>, "aria-activedescendant" | "aria-autocomplete" | "aria-expanded" | "aria-owns" | "as" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "id" | "inputMode" | "onChange" | "onSelect" | "popover" | "prefix" | "ref" | "role" | "spellCheck" | "type" | "value"> & {
+  ref?: Ref<HTMLInputElement>;
+}) => React.JSX.Element;
 /**
  * @beta
  */
-export declare interface BreadcrumbsProps {
-  maxLength?: number
-  separator?: React.ReactNode
-  gap?: number | number[]
+interface BreadcrumbsProps {
+  maxLength?: number;
+  separator?: React.ReactNode;
+  gap?: number | number[];
   /**
    * @deprecated Use `gap` instead. `space` will be removed in v4.
    */
-  space?: number | number[]
+  space?: number | number[];
 }
-
-/**
- * @public
- */
-export declare const Button: <E extends ElementType = 'button'>(
-  props: ButtonProps<E>,
-) => React.JSX.Element
-
 /**
- * @public
+ * @beta
  */
-export declare type ButtonMode = ThemeColorButtonModeKey_2
-
+declare const Breadcrumbs: import("react").ForwardRefExoticComponent<BreadcrumbsProps & Omit<import("react").HTMLProps<HTMLOListElement>, "as" | "type" | "ref"> & import("react").RefAttributes<HTMLOListElement>>;
 /**
  * @public
  */
-export declare interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  fontSize?: number | number[]
-  mode?: ButtonMode
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
-  justify?: FlexJustify | FlexJustify[]
-  /**
-   * @beta Do not use in production, as this might change.
-   */
-  loading?: boolean
-  selected?: boolean
+interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
   /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   * @beta
    */
-  space?: number | number[]
-  gap?: number | number[]
-  muted?: boolean
-  text?: React.ReactNode
-  textAlign?: ButtonTextAlign
-  textWeight?: ThemeFontWeightKey_2
-  tone?: ButtonTone
-  type?: 'button' | 'reset' | 'submit'
-  width?: ButtonWidth
-}
-
-/**
- * @public
- */
-export declare type ButtonProps<E extends ElementType = 'button'> = Props<ButtonOwnProps, E>
-
-/**
- * @public
- */
-export declare type ButtonTextAlign = 'left' | 'right' | 'center'
-
-/**
- * @public
- */
-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: <E extends ElementType = 'div'>(props: CardProps<E>) => React.JSX.Element
-
-/**
- * @public
- */
-export declare interface CardOwnProps
-  extends BoxOwnProps,
-    ResponsiveBorderProps,
-    ResponsiveRadiusProps,
-    ResponsiveShadowProps {
+  __unstable_autoFocus?: boolean;
   /**
-   * Do not use in production.
    * @beta
    */
-  __unstable_checkered?: boolean
+  __unstable_hideCloseButton?: boolean;
+  cardRadius?: Radius | Radius[];
+  cardShadow?: number | number[];
+  contentRef?: React.ForwardedRef<HTMLDivElement>;
+  footer?: React.ReactNode;
+  header?: React.ReactNode;
+  id: string;
+  /** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
+  onActivate?: LayerProps['onActivate'];
+  onClickOutside?: () => void;
+  onClose?: () => void;
+  portal?: string;
+  position?: DialogPosition | DialogPosition[];
+  scheme?: ThemeColorSchemeKey$1;
+  zOffset?: number | number[];
   /**
-   * Do not use in production.
+   * Whether the dialog should animate in on mount.
+   *
    * @beta
+   * @defaultValue false
    */
-  __unstable_focusRing?: boolean
-  disabled?: boolean
-  muted?: boolean
-  pressed?: boolean
-  scheme?: ThemeColorSchemeKey_2
-  selected?: boolean
-  tone?: CardTone
-}
-
-/**
- * @public
- */
-export declare type CardProps<E extends ElementType = 'div'> = Props<CardOwnProps, E>
-
-/**
- * @internal
- */
-export declare interface CardStyleProps {
-  $checkered: boolean
-  $focusRing: boolean
-  $muted: boolean
-  $tone: ThemeColorToneKey
+  animate?: boolean;
 }
-
-/**
- * @public
- */
-export declare type CardTone = ThemeColorCardToneKey | 'inherit'
-
 /**
- * Checkboxes allow the user to select one or more items from a set.
+ * The Dialog component.
  *
  * @public
  */
-export declare const Checkbox: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & CheckboxProps, 'ref'> &
-    RefAttributes<HTMLInputElement>
->
-
-/**
- * @public
- */
-export declare interface CheckboxProps {
-  indeterminate?: boolean
-  customValidity?: string
-}
-
-/**
- * @public
- */
-export declare type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
-
-/**
- * @public
- */
-export declare type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
-
-/**
- * @public
- */
-export declare type ClickOutsideEventListener = (event: MouseEvent) => void
-
+declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DialogProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "width" | "id">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
- * @public
- */
-export declare type ClickOutsideListener = (event: MouseEvent) => void
-
-/**
- * @public
- */
-export declare const Code: <E extends ElementType = 'pre'>(props: CodeProps<E>) => React.JSX.Element
-
-/**
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare interface CodeOwnProps {
-  /** Define the language to use for syntax highlighting. */
-  language?: string
-  size?: number | number[]
-  weight?: string
+interface DialogContextValue {
+  version: 0.0;
+  position?: DialogPosition | DialogPosition[];
+  zOffset?: number | number[];
 }
-
 /**
- * @public
+ * @internal
  */
-export declare type CodeProps<E extends ElementType = 'pre'> = Props<CodeOwnProps, E>
-
+declare const DialogContext: import("react").Context<DialogContextValue>;
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const CodeSkeleton: ForwardRefExoticComponent<
-  Omit<
-    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'height' | 'as' | 'children'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
->
-
+interface DialogProviderProps {
+  children?: React.ReactNode;
+  position?: DialogPosition | DialogPosition[];
+  zOffset?: number | number[];
+}
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface CodeSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/** @public */
-export declare type ComponentType<P = any> =
-  | React.FunctionComponent<P>
-  | React.ComponentClass<P>
-  | React.ExoticComponent<P>
-
-/**
- * @internal
- * @deprecated this component will be removed in the next major release
- */
-export declare function ConditionalWrapper({
-  children,
-  condition,
-  wrapper,
-}: {
-  children: React.ReactNode
-  condition: boolean
-  wrapper: (children: React.ReactNode) => React.ReactNode
-}): React.ReactNode
-
-export declare namespace ConditionalWrapper {
-  var displayName: string
+declare function DialogProvider(props: DialogProviderProps): React.JSX.Element;
+declare namespace DialogProvider {
+  var displayName: string;
 }
-
-/**
- * The `Container` component wraps content layout in a defined set of widths.
- *
- * @public
- */
-export declare const Container: <E extends ElementType = 'div'>(
-  props: ContainerProps<E>,
-) => React.JSX.Element
-
-/**
- * @public
- */
-export declare interface ContainerOwnProps extends BoxOwnProps, ResponsiveWidthProps {}
-
-/**
- * @public
- */
-export declare type ContainerProps<E extends ElementType = 'div'> = Props<ContainerOwnProps, E>
-
-/**
- * @internal
- */
-export declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean
-
-/**
- * @public
- * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
- */
-export declare const createColorTheme: typeof createColorTheme_2
-
-/**
- * @public
- */
-export declare type Delay =
-  | number
-  | Partial<{
-      open: number
-      close: number
-    }>
-
-/**
- * The Dialog component.
- *
- * @public
- */
-export declare const Dialog: ForwardRefExoticComponent<
-  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'width' | 'id' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @internal
- */
-export declare const DialogContext: Context<DialogContextValue>
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface DialogContextValue {
-  version: 0.0
-  position?: DialogPosition | DialogPosition[]
-  zOffset?: number | number[]
-}
-
-/**
- * @public
- */
-export declare type DialogPosition = 'absolute' | 'fixed'
-
+declare function useDialog(): DialogContextValue;
 /**
  * @public
  */
-export declare interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
+interface MenuButtonProps {
   /**
-   * @beta
+   * @beta Do not use in production.
    */
-  __unstable_autoFocus?: boolean
+  __unstable_disableRestoreFocusOnClose?: boolean;
   /**
-   * @beta
+   * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
-  __unstable_hideCloseButton?: boolean
-  cardRadius?: Radius | Radius[]
-  cardShadow?: number | number[]
-  contentRef?: React.ForwardedRef<HTMLDivElement>
-  footer?: React.ReactNode
-  header?: React.ReactNode
-  id: string
-  /** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
-  onActivate?: LayerProps['onActivate']
-  onClickOutside?: () => void
-  onClose?: () => void
-  portal?: string
-  position?: DialogPosition | DialogPosition[]
-  scheme?: ThemeColorSchemeKey_2
-  zOffset?: number | number[]
+  boundaryElement?: HTMLElement;
+  button: React.JSX.Element;
+  id: string;
+  menu?: React.JSX.Element;
+  onClose?: () => void;
+  onOpen?: () => void;
   /**
-   * Whether the dialog should animate in on mount.
-   *
-   * @beta
-   * @defaultValue false
+   * @deprecated Use `popover={{placement: 'top'}}` instead.
    */
-  animate?: boolean
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function DialogProvider(props: DialogProviderProps): React.JSX.Element
-
-export declare namespace DialogProvider {
-  var displayName: string
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare interface DialogProviderProps {
-  children?: React.ReactNode
-  position?: DialogPosition | DialogPosition[]
-  zOffset?: number | number[]
-}
-
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare const ElementQuery: ForwardRefExoticComponent<
-  Omit<MediaQueryProps & Omit<HTMLProps<HTMLDivElement>, 'media' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @beta
- */
-export declare interface ElementRectValue {
-  width: number
-  height: number
-}
-
-/**
- * @beta
- */
-export declare interface ElementSize {
-  content: ElementRectValue
-  border: ElementRectValue
-  /** @deprecated INTERNAL ONLY */
-  _contentRect: DOMRectReadOnly
-}
-
-/**
- * @internal
- */
-export declare interface _ElementSizeListener {
-  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
-}
-
-/**
- * @internal
- */
-export declare interface _ElementSizeObserver {
-  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
-}
-
-/**
- * @internal
- */
-export declare const _elementSizeObserver: _ElementSizeObserver
-
-/**
- * @internal
- */
-export declare type _ElementSizeSubscriber = (elementRect: ElementSize) => void
-
-/** @public */
-export declare type ElementType<P = any> = TagType | ComponentType<P>
-
-/** @public */
-export declare type EmptyProps = object
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  state: ErrorBoundaryState
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState
-  componentDidCatch(error: Error, info: React.ErrorInfo): void
-  render(): React.ReactNode
-}
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export declare type ErrorBoundaryProps = PropsWithChildren<{
-  onCatch: (params: {error: Error; info: React.ErrorInfo}) => void
-}>
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export declare interface ErrorBoundaryState {
-  error: Error | null
-}
-
-/**
- * @internal
- */
-export declare function _fillCSSObject(
-  keys: string[],
-  value: string | number | CSSObject,
-): CSSObject
-
-/**
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
- *
- * @public
- */
-export declare const Flex: <E extends ElementType = 'div'>(props: FlexProps<E>) => React.JSX.Element
-
-/**
- * @public
- */
-export declare type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
-
-/**
- * @public
- */
-export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
-
-/**
- * @public
- */
-export declare type FlexJustify =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
-
-/**
- * @public
- */
-export declare interface FlexOwnProps
-  extends Omit<BoxOwnProps, 'display'>,
-    ResponsiveFlexProps,
-    ResponsiveFlexItemProps {
-  gap?: number | number[]
-}
-
-/**
- * @public
- */
-export declare type FlexProps<E extends ElementType = 'div'> = Props<FlexOwnProps, E>
-
-/**
- * @public
- */
-export declare type FlexValue = number | 'none' | 'auto' | 'initial'
-
-/**
- * @public
- */
-export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
-
-/**
- * @internal
- */
-export declare function focusFirstDescendant(element: HTMLElement): boolean
-
-/**
- * @internal
- */
-export declare function focusLastDescendant(element: HTMLElement): boolean
-
-/**
- * @internal
- */
-export declare interface FontWeightStyleProps {
-  $weight?: ThemeFontWeightKey_2
-}
-
-/**
- * @internal
- */
-export declare function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[]
-
-/**
- * @internal
- */
-export declare function _getResponsiveSpace(
-  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: <E extends ElementType = 'div'>(props: GridProps<E>) => React.JSX.Element
-
-/**
- * @public
- */
-export declare type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
-
-/**
- * @public
- */
-export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
-
-/**
- * @public
- */
-export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
-
-/**
- * @public
- */
-export declare type GridItemColumn = 'auto' | 'full' | number
-
-/**
- * @public
- */
-export declare type GridItemColumnEnd = 'auto' | number
-
-/**
- * @public
- */
-export declare type GridItemColumnStart = 'auto' | number
-
-/**
- * @public
- */
-export declare type GridItemRow = 'auto' | 'full' | number
-
-/**
- * @public
- */
-export declare type GridItemRowEnd = 'auto' | number
-
-/**
- * @public
- */
-export declare type GridItemRowStart = 'auto' | number
-
-/**
- * @public
- */
-export declare interface GridOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveGridProps {}
-
-/**
- * @public
- */
-export declare type GridProps<E extends ElementType = 'div'> = Props<GridOwnProps, E>
-
-/**
- * @internal
- */
-export declare function _hasFocus(element: HTMLElement): boolean
-
-/**
- * Typographic headings.
- *
- * @public
- */
-export declare const Heading: <E extends ElementType = 'div'>(
-  props: HeadingProps<E>,
-) => React.JSX.Element
-
-/**
- * @public
- */
-export declare interface HeadingOwnProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  muted?: boolean
-  size?: number | number[]
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey_2
-}
-
-/**
- * @public
- */
-export declare type HeadingProps<E extends ElementType = 'div'> = Props<HeadingOwnProps, E>
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare const HeadingSkeleton: ForwardRefExoticComponent<
-  Omit<
-    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'height' | 'as' | 'children'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare interface HeadingSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * @public
- * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
- */
-export declare const hexToRgb: typeof hexToRgb_2
-
-/**
- * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
- *
- * @public
- */
-export declare const Hotkeys: ForwardRefExoticComponent<
-  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as' | 'ref'> & RefAttributes<HTMLElement>
->
-
-/**
- * @public
- */
-export declare interface HotkeysProps {
-  fontSize?: number | number[]
-  gap?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-  keys?: string[]
-}
-
-/**
- * @public
- * @deprecated Use `HSL` from `@sanity/ui/theme` instead.
- */
-export declare type HSL = HSL_2
-
-/**
- * @public
- * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
- */
-export declare const hslToRgb: typeof hslToRgb_2
-
-/**
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
- *
- * @public
- */
-export declare const Inline: <E extends ElementType = 'div'>(
-  props: InlineProps<E>,
-) => React.JSX.Element
-
-/**
- * @public
- */
-export declare interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {
-  /**
-   * The spacing between children.
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-  /** The spacing between children. */
-  gap?: number | number[]
-}
-
-/**
- * @public
- */
-export declare type InlineProps<E extends ElementType = 'div'> = Props<InlineOwnProps, E>
-
-/**
- * @internal
- */
-export declare function _isEnterToClickElement(element: HTMLElement): boolean
-
-/**
- * @internal
- */
-export declare function isFocusable(element: HTMLElement): boolean
-
-/**
- * @internal
- */
-export declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement
-
-/**
- * @internal
- */
-export declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement
-
-/**
- * @internal
- */
-export declare function isHTMLElement(node: unknown): node is HTMLElement
-
-/**
- * @internal
- */
-export declare function isHTMLInputElement(element: unknown): element is HTMLInputElement
-
-/**
- * @internal
- */
-export declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement
-
-/**
- * @internal
- */
-export declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement
-
-/**
- * @internal
- */
-export declare function _isScrollable(el: Node): boolean
-
-/**
- * Used to define some text as keyboard input.
- *
- * @public
- */
-export declare const KBD: <E extends ElementType = 'kbd'>(props: KBDProps<E>) => React.JSX.Element
-
-/**
- * @public
- */
-export declare interface KBDOwnProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-}
-
-/**
- * @public
- */
-export declare type KBDProps<E extends ElementType = 'kbd'> = Props<KBDOwnProps, E>
-
-/**
- * Typographic labels.
- *
- * @public
- */
-export declare const Label: <E extends ElementType = 'div'>(
-  props: LabelProps<E>,
-) => React.JSX.Element
-
-/**
- * @public
- */
-export declare interface LabelOwnProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  muted?: boolean
-  size?: number | number[]
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey_2
-}
-
-/**
- * @public
- */
-export declare type LabelProps<E extends ElementType = 'div'> = Props<LabelOwnProps, E>
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare const LabelSkeleton: ForwardRefExoticComponent<
-  Omit<
-    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'height' | 'as' | 'children'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare interface LabelSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * @public
- */
-export declare const Layer: ForwardRefExoticComponent<
-  Omit<LayerProps & Omit<HTMLProps<HTMLDivElement>, 'as'>, 'ref'> & RefAttributes<HTMLDivElement>
->
-
-/** @public */
-export declare interface LayerContextValue {
-  version: 0.0
-  isTopLayer: boolean
-  level?: number
-  registerChild: (childLevel?: number) => () => void
-  size: number
-  zIndex: number
-}
-
-/**
- * @public
- */
-export declare interface LayerProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
-  onActivate?: (props: {activeElement: HTMLElement | null}) => void
-  zOffset?: number | number[]
-}
-
-/**
- * @public
- */
-export declare function LayerProvider(props: LayerProviderProps): React.JSX.Element
-
-export declare namespace LayerProvider {
-  var displayName: string
-}
-
-/**
- * @public
- */
-export declare interface LayerProviderProps {
-  children?: React.ReactNode
-  zOffset?: number | number[]
-}
-
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare interface MediaQueryProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  media?: number[]
-}
-
-/**
- * @internal
- */
-export declare interface _MediaStore {
-  subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => number
-}
-
-/**
- * The `Menu` component is a building block for application menus.
- *
- * @public
- */
-export declare const Menu: ForwardRefExoticComponent<
-  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'tabIndex' | 'role'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
- *
- * @public
- */
-export declare const MenuButton: ForwardRefExoticComponent<
-  MenuButtonProps & RefAttributes<HTMLButtonElement | null>
->
-
-/**
- * @public
- */
-export declare interface MenuButtonProps {
-  /**
-   * @beta Do not use in production.
-   */
-  __unstable_disableRestoreFocusOnClose?: boolean
-  /**
-   * @deprecated Use `popover={{boundaryElement: element}}` instead.
-   */
-  boundaryElement?: HTMLElement
-  button: React.JSX.Element
-  id: string
-  menu?: React.JSX.Element
-  onClose?: () => void
-  onOpen?: () => void
-  /**
-   * @deprecated Use `popover={{placement: 'top'}}` instead.
-   */
-  placement?: Placement
-  popover?: Omit<PopoverProps, 'content' | 'open'>
-  /**
-   * @deprecated Use `popover={{scheme: 'dark'}}` instead.
-   */
-  popoverScheme?: ThemeColorSchemeKey_2
-  /**
-   * @deprecated Use `popover={{radius: 2}}` instead.
-   */
-  popoverRadius?: Radius | Radius[]
-  /**
-   * @beta Do not use in production.
-   * @deprecated Use `popover={{portal: true}}` instead.
-   */
-  portal?: boolean
-  /**
-   * @deprecated Use `popover={{preventOverflow: true}}` instead.
-   */
-  preventOverflow?: boolean
-}
-
-/**
- * @public
- */
-export declare const MenuDivider: <E extends ElementType = 'hr'>(
-  props: MenuDividerProps<E>,
-) => React.JSX.Element
-
-/**
- * @public
- */
-export declare type MenuDividerProps<E extends ElementType = 'hr'> = Props<EmptyProps, E>
-
-/**
- * @public
- */
-export declare const MenuGroup: <E extends ElementType = 'button'>(
-  props: MenuGroupProps<E>,
-) => React.JSX.Element
-
-/**
- * @public
- */
-export declare interface MenuGroupOwnProps {
-  fontSize?: number | number[]
-  icon?: React.ElementType | React.ReactNode
-  menu?: Omit<
-    MenuProps,
-    | 'onClickOutside'
-    | 'onEscape'
-    | 'onItemClick'
-    | 'onKeyDown'
-    | 'onMouseEnter'
-    | 'registerElement'
-    | 'shouldFocus'
-    | 'onBlurCapture'
-  >
-  padding?: number | number[]
-  popover?: Omit<PopoverProps, 'content' | 'open'>
-  radius?: Radius | Radius[]
-  gap?: number | number[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-  text: React.ReactNode
-  tone?: SelectableTone
-}
-
-/**
- * @public
- */
-export declare type MenuGroupProps<E extends ElementType = 'button'> = Props<MenuGroupOwnProps, E>
-
-/**
- * @public
- */
-export declare const MenuItem: <E extends ElementType = 'button'>(
-  props: MenuItemProps<E>,
-) => React.JSX.Element
-
-/**
- * @public
- */
-export declare interface MenuItemOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  fontSize?: number | number[]
-  hotkeys?: string[]
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
-  pressed?: boolean
-  selected?: boolean
-  gap?: number | number[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-  text?: React.ReactNode
-  tone?: SelectableTone
-}
-
-/**
- * @public
- */
-export declare type MenuItemProps<E extends ElementType = 'button'> = Props<MenuItemOwnProps, E>
-
-/**
- * @public
- */
-export declare interface MenuProps extends ResponsivePaddingProps {
-  /**
-   * @deprecated Use `shouldFocus="first"` instead.
-   */
-  'focusFirst'?: boolean
-  /**
-   * @deprecated Use `shouldFocus="last"` instead.
-   */
-  'focusLast'?: boolean
-  'onClickOutside'?: (event: MouseEvent) => void
-  'onEscape'?: () => void
-  'onItemClick'?: () => void
-  'onItemSelect'?: (index: number) => void
-  'originElement'?: HTMLElement | null
-  'registerElement'?: (el: HTMLElement) => () => void
-  'shouldFocus'?: 'first' | 'last' | null
-  'gap'?: number | number[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  'space'?: number | number[]
-  'aria-labelledby'?: string
-  'onBlurCapture'?: (event: FocusEvent) => void
-}
-
-/**
- * @public
- * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
- */
-export declare const multiply: typeof multiply_2
-
-/**
- * @public
- * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
- */
-export declare const parseColor: typeof parseColor_2
-
-export {PartialThemeColorBuilderOpts}
-
-/**
- * Placement of floating UI elements.
- *
- * @public
- */
-export declare type Placement =
-  | 'top'
-  | 'top-start'
-  | 'top-end'
-  | 'right'
-  | 'right-start'
-  | 'right-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left'
-  | 'left-start'
-  | 'left-end'
-
-/**
- * The `Popover` component is used to display some content on top of another.
- *
- * @public
- */
-export declare const Popover: ForwardRefExoticComponent<
-  Omit<
-    PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'as' | 'children'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @beta
- */
-export declare type PopoverMargins = [number, number, number, number]
-
-/** @public */
-export declare interface PopoverProps
-  extends Omit<LayerProps, 'as'>,
-    ResponsiveRadiusProps,
-    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.JSX.Element
-  /**
-     * 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
-  /**
-   * When true, blocks all pointer interaction with elements beneath the popover until closed.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  modal?: boolean
-  open?: boolean
-  overflow?: BoxOverflow
-  padding?: number | number[]
-  placement?: Placement
-  /**
-   * When 'flip' (default), the placement is determined from the initial placement and the
-   * fallback placements in order. Whichever fits in the viewport first.
-   *
-   * When 'autoPlacement', the initial placement and all fallback placements are evaluated
-   * and the placement with the most viewport space available.
-   *
-   * Option is only relevant if either `constrainSize` or `preventOverflow` is `true`
-   */
-  placementStrategy?: 'flip' | 'autoPlacement'
-  /** Whether or not to render the popover in a portal element. */
-  portal?: boolean | string
-  preventOverflow?: boolean
-  referenceBoundary?: HTMLElement | null
-  /**
-   * When defined, the popover will be positioned relative to this element.
-   * The children of the popover won't be rendered.
-   */
-  referenceElement?: HTMLElement | null
-  scheme?: ThemeColorSchemeKey_2
-  tone?: CardTone
-  /** @beta */
-  updateRef?: Ref<PopoverUpdateCallback | undefined>
-  width?: PopoverWidth | PopoverWidth[]
-}
-
-/** @beta */
-export declare type PopoverUpdateCallback = () => void
-
-/** @public */
-export declare type PopoverWidth = number | 'auto'
-
-/**
- * @public
- */
-export declare function Portal(props: PortalProps): React.ReactPortal | null
-
-export declare namespace Portal {
-  var displayName: string
-}
-
-/**
- * @public
- */
-export declare interface PortalContextValue {
-  version: 0.0
-  boundaryElement: HTMLElement | null
-  element: HTMLElement | null
-  elements?: Record<string, HTMLElement | null | undefined>
-}
-
-/**
- * @public
- */
-export declare interface PortalProps {
-  children: React.ReactNode
-  /**
-   * @beta This API might change. DO NOT USE IN PRODUCTION.
-   */
-  __unstable_name?: string
-}
-
-/**
- * @public
- */
-export declare function PortalProvider(props: PortalProviderProps): React.JSX.Element
-
-export declare namespace PortalProvider {
-  var displayName: string
-}
-
-/**
- * @public
- */
-export declare interface PortalProviderProps {
-  /**
-   * @deprecated Use `<BoundaryElementProvider element={...} />` instead
-   */
-  boundaryElement?: HTMLElement | null
-  children: React.ReactNode
-  element?: HTMLElement | null
-  /**
-   * @beta
-   */
-  __unstable_elements?: Record<string, HTMLElement | null | undefined>
-}
-
-/**
- * Resolves the props of a polymorphic component: the props of the element/component passed to `as`
- * (defaulting to the component's own element), with the component's own props assigned on top.
- *
- * @public
- */
-export declare type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
-  E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>,
-  P & {
-    as?: E
-  }
->
-
-/**
- * The `Radio` component allows the user to select one option from a set.
- *
- * @public
- */
-export declare const Radio: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & RadioProps, 'ref'> &
-    RefAttributes<HTMLInputElement>
->
-
-/**
- * @public
- */
-export declare interface RadioProps {
-  customValidity?: string
-}
-
-/**
- * @public
- */
-export declare type Radius = number | 'full'
-
-/**
- * @internal
- */
-export declare function _raf(fn: () => void): () => void
-
-/**
- * @internal
- */
-export declare function _raf2(fn: () => void): () => void
-
-/**
- * @public
- */
-export declare function rem(pixelValue: number): string | 0
-
-/**
- * @internal
- */
-export declare const _ResizeObserver: typeof ResizeObserver
-
-/**
- * @internal
- */
-export declare function _responsive<T>(
-  media: number[],
-  values: T[],
-  callback: (value: T, index: number, array: T[]) => CSSObject,
-): CSSObject[]
-
-/**
- * @internal
- */
-export declare interface ResponsiveAvatarSizeStyleProps {
-  $size: AvatarSize[]
-}
-
-/**
- * @public
- */
-export declare interface ResponsiveBorderProps {
-  border?: boolean | boolean[]
-  borderTop?: boolean | boolean[]
-  borderRight?: boolean | boolean[]
-  borderBottom?: boolean | boolean[]
-  borderLeft?: boolean | boolean[]
-}
-
-/**
- * @public
- */
-export declare interface ResponsiveBoxProps {
-  display?: BoxDisplay | BoxDisplay[]
-  height?: BoxHeight | BoxHeight[]
-  overflow?: BoxOverflow | BoxOverflow[]
-  sizing?: BoxSizing | BoxSizing[]
-}
-
-/**
- * Get responsive CSS for the `code` font style.
- * @internal
- */
-export declare function responsiveCodeFontStyle(
-  props: ResponsiveFontStyleProps & ThemeProps,
-): CSSObject[]
-
-/**
- * @public
- */
-export declare interface ResponsiveFlexItemProps {
-  /** Sets the flex CSS attribute. The property is responsive. */
-  flex?: FlexValue | FlexValue[]
-}
-
-/**
- * @public
- */
-export declare interface ResponsiveFlexProps {
-  align?: FlexAlign | FlexAlign[]
-  direction?: FlexDirection | FlexDirection[]
-  justify?: FlexJustify | FlexJustify[]
-  wrap?: FlexWrap | FlexWrap[]
-}
-
-/**
- * @internal
- */
-export declare interface ResponsiveFontSizeStyleProps {
-  $size: number[]
-}
-
-/**
- * @internal
- */
-export declare interface ResponsiveFontStyleProps
-  extends FontWeightStyleProps,
-    ResponsiveFontSizeStyleProps,
-    ResponsiveTextAlignStyleProps {
-  $accent?: boolean
-  $muted?: boolean
-}
-
-/**
- * @public
- */
-export declare interface ResponsiveGridItemProps {
-  gridColumn?: GridItemColumn | GridItemColumn[]
-  /**
-   * @deprecated Use `gridColumn` instead. `column` will be removed in v4.
-   */
-  column?: GridItemColumn | GridItemColumn[]
-  gridColumnStart?: GridItemColumnStart | GridItemColumnStart[]
-  /**
-   * @deprecated Use `gridColumnStart` instead. `columnStart` will be removed in v4.
-   */
-  columnStart?: GridItemColumnStart | GridItemColumnStart[]
-  gridColumnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
-  /**
-   * @deprecated Use `gridColumnEnd` instead. `columnEnd` will be removed in v4.
-   */
-  columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
-  gridRow?: GridItemRow | GridItemRow[]
-  /**
-   * @deprecated Use `gridRow` instead. `row` will be removed in v4.
-   */
-  row?: GridItemRow | GridItemRow[]
-  gridRowStart?: GridItemRowStart | GridItemRowStart[]
-  /**
-   * @deprecated Use `gridRowStart` instead. `rowStart` will be removed in v4.
-   */
-  rowStart?: GridItemRowStart | GridItemRowStart[]
-  gridRowEnd?: GridItemRowEnd | GridItemRowEnd[]
-  /**
-   * @deprecated Use `gridRowEnd` instead. `rowEnd` will be removed in v4.
-   */
-  rowEnd?: GridItemRowEnd | GridItemRowEnd[]
-}
-
-/**
- * @public
- */
-export declare interface ResponsiveGridProps {
-  autoRows?: GridAutoRows | GridAutoRows[]
-  autoCols?: GridAutoCols | GridAutoCols[]
-  autoFlow?: GridAutoFlow | GridAutoFlow[]
-  /**
-   * @deprecated Use `gridTemplateColumns` instead. `columns` will be removed in v4.
-   */
-  columns?: number | number[]
-  gridTemplateColumns?: number | number[]
-  gap?: number | number[]
-  gapX?: number | number[]
-  gapY?: number | number[]
-  /**
-   * @deprecated Use `gridTemplateRows` instead. `rows` will be removed in v4.
-   */
-  rows?: number | number[]
-  gridTemplateRows?: number | number[]
-}
-
-/**
- * Get responsive CSS for the `heading` font style.
- * @internal
- */
-export declare function responsiveHeadingFont(
-  props: ResponsiveFontStyleProps & ThemeProps,
-): CSSObject[]
-
-/**
- * Get responsive CSS for the `label` font style.
- * @internal
- */
-export declare function responsiveLabelFont(
-  props: ResponsiveFontStyleProps & ThemeProps,
-): CSSObject[]
-
-/**
- * @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[]
-  marginBottom?: number | number[]
-  marginLeft?: number | number[]
-}
-
-/**
- * @public
- */
-export declare interface ResponsivePaddingProps {
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
-  paddingTop?: number | number[]
-  paddingRight?: number | number[]
-  paddingBottom?: number | number[]
-  paddingLeft?: number | number[]
-}
-
-/**
- * @public
- */
-export declare interface ResponsiveRadiusProps {
-  radius?: Radius | Radius[]
-}
-
-/**
- * @public
- */
-export declare interface ResponsiveShadowProps {
-  shadow?: number | number[]
-}
-
-/**
- * Get responsive text align styles.
- * @internal
- */
-export declare function responsiveTextAlignStyle(
-  props: ResponsiveTextAlignStyleProps & ThemeProps,
-): CSSObject[]
-
-/**
- * @internal
- */
-export declare interface ResponsiveTextAlignStyleProps {
-  $align: TextAlign[]
-}
-
-/**
- * Get responsive CSS for the `text` font style.
- * @internal
- */
-export declare function responsiveTextFont(
-  props: ResponsiveFontStyleProps & ThemeProps,
-): CSSObject[]
-
-/**
- * @public
- */
-export declare interface ResponsiveWidthProps {
-  width?: number | 'auto' | (number | 'auto')[]
-}
-
-/**
- * @internal
- */
-export declare interface ResponsiveWidthStyleProps {
-  $width: (number | 'auto')[]
-}
-
-/**
- * @public
- * @deprecated Use `RGB` from `@sanity/ui/theme` instead.
- */
-export declare type RGB = RGB_2
-
-/**
- * @public
- * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
- */
-export declare const rgba: typeof rgba_2
-
-/**
- * @public
- * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
- */
-export declare const rgbToHex: typeof rgbToHex_2
-
-/**
- * @public
- * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
- */
-export declare const rgbToHsl: typeof rgbToHsl_2
-
-/**
- * @public
- * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
- */
-export declare type RootTheme = RootTheme_2
-
-/**
- * @public
- * @deprecated Use `screen` from `@sanity/ui/theme` instead.
- */
-declare const screen_2: typeof screen_3
-export {screen_2 as screen}
-
-/**
- * The `Select` component provides control of options.
- *
- * @public
- */
-export declare const Select: ForwardRefExoticComponent<
-  Omit<SelectProps & Omit<HTMLProps<HTMLSelectElement>, 'as'>, 'ref'> &
-    RefAttributes<HTMLSelectElement>
->
-
-/**
- * @public
- */
-export declare type SelectableTone = ThemeColorStateToneKey
-
-/**
- * @public
- */
-export declare interface SelectProps {
-  fontSize?: number | number[]
-  gap?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-  customValidity?: string
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare const Skeleton: ForwardRefExoticComponent<
-  Omit<SkeletonProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<HTMLDivElement>
->
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare interface SkeletonProps
-  extends ResponsiveRadiusProps,
-    Omit<BoxOwnProps, 'children'> {
-  animated?: boolean
-  delay?: number
-}
-
-/**
- * Indicate that something is loading for an indeterminate amount of time.
- *
- * @public
- */
-export declare const Spinner: ForwardRefExoticComponent<
-  Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @public
- */
-export declare interface SpinnerProps {
-  muted?: boolean
-  size?: number | number[]
-}
-
-/**
- * @public
- */
-export declare const SrOnly: ForwardRefExoticComponent<
-  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'aria-hidden'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @public
- */
-export declare interface SrOnlyProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  children?: React.ReactNode
-}
-
-/**
- * The `Stack` component is used to place elements on top of each other.
- *
- * @public
- */
-export declare const Stack: <E extends ElementType = 'div'>(
-  props: StackProps<E>,
-) => React.JSX.Element
-
-/**
- * @public
- */
-export declare interface StackOwnProps extends BoxOwnProps {
-  gap?: number | number[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-}
-
-/**
- * @public
- */
-export declare type StackProps<E extends ElementType = 'div'> = Props<StackOwnProps, E>
-
-/**
- * @public
- * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
- */
-export declare const studioTheme: BaseTheme_2
-
-/**
- * @public
- * @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.
- */
-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<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & SwitchProps, 'ref'> &
-    RefAttributes<HTMLInputElement>
->
-
-/**
- * @public
- */
-export declare interface SwitchProps {
-  indeterminate?: boolean
-}
-
-/**
- * @public
- */
-export declare const Tab: ForwardRefExoticComponent<
-  Omit<
-    TabProps &
-      Omit<
-        HTMLProps<HTMLButtonElement>,
-        'width' | 'label' | 'id' | 'type' | 'as' | 'aria-controls'
-      >,
-    'ref'
-  > &
-    RefAttributes<HTMLButtonElement>
->
-
-/**
- * @public
- */
-export declare const TabList: ForwardRefExoticComponent<
-  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
-    RefAttributes<unknown>
->
-
-/**
- * @public
- */
-export declare interface TabListProps extends Omit<InlineOwnProps, 'height'> {
-  children: Array<React.JSX.Element | null | undefined | false>
-}
-
-/**
- * @public
- */
-export declare const TabPanel: ForwardRefExoticComponent<
-  Omit<
-    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'as' | 'role' | 'aria-labelledby'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @public
- */
-export declare interface TabPanelProps extends BoxOwnProps {
-  /**
-   * The `id` of the correlating `Tab` component.
-   */
-  'aria-labelledby': string
-  'id': string
-}
-
-/**
- * @public
- */
-export declare interface TabProps {
-  /**
-   * The `id` of the correlating `TabPanel` component.
-   */
-  'aria-controls': string
-  'id': string
-  'icon'?: React.ElementType | React.ReactNode
-  'focused'?: boolean
-  'fontSize'?: number | number[]
-  'label'?: React.ReactNode
-  'padding'?: number | number[]
-  'selected'?: boolean
-  'tone'?: ButtonTone
-}
-
-/** @public */
-export declare type TagType = keyof React.JSX.IntrinsicElements
-
-/**
- * The `Text` component is an agile, themed typographic element.
- *
- * @public
- */
-declare const Text_2: <E extends ElementType = 'div'>(props: TextProps<E>) => React.JSX.Element
-export {Text_2 as Text}
-
-/**
- * @public
- */
-export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
-
-/**
- * A multiline text input.
- *
-
- * @public
- */
-export declare const TextArea: ForwardRefExoticComponent<
-  Omit<TextAreaProps & Omit<HTMLProps<HTMLTextAreaElement>, 'as'>, 'ref'> &
-    RefAttributes<HTMLTextAreaElement>
->
-
-/**
- * @public
- */
-export declare interface TextAreaProps extends ResponsiveRadiusProps {
+  placement?: Placement;
+  popover?: Omit<PopoverProps, 'content' | 'open'>;
   /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  border?: boolean
-  customValidity?: string
-  fontSize?: number | number[]
-  padding?: number | number[]
-  weight?: ThemeFontWeightKey_2
-}
-
-/**
- * Single line text input.
- *
- * @public
- */
-export declare const TextInput: ForwardRefExoticComponent<
-  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'as' | 'prefix'>, 'ref'> &
-    RefAttributes<HTMLInputElement>
->
-
-/**
- * @public
- */
-export declare type TextInputClearButtonProps = ButtonOwnProps &
-  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>
-
-/**
- * @public
- */
-export declare interface TextInputProps {
-  /**
-   * @beta
+   * @deprecated Use `popover={{scheme: 'dark'}}` instead.
    */
-  __unstable_disableFocusRing?: boolean
-  border?: boolean
+  popoverScheme?: ThemeColorSchemeKey$1;
   /**
-   * @beta
+   * @deprecated Use `popover={{radius: 2}}` instead.
    */
-  clearButton?: boolean | TextInputClearButtonProps
-  customValidity?: string
-  fontSize?: number | number[]
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
+  popoverRadius?: Radius | Radius[];
   /**
-   * @beta
+   * @beta Do not use in production.
+   * @deprecated Use `popover={{portal: true}}` instead.
    */
-  onClear?: () => void
-  padding?: number | number[]
-  prefix?: React.ReactNode
-  radius?: Radius | Radius[]
+  portal?: boolean;
   /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   * @deprecated Use `popover={{preventOverflow: true}}` instead.
    */
-  space?: number | number[]
-  gap?: number | number[]
-  suffix?: React.ReactNode
-  type?: TextInputType
-  weight?: ThemeFontWeightKey_2
+  preventOverflow?: boolean;
 }
-
 /**
+ * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
+ *
  * @public
  */
-export declare type TextInputType =
-  | 'search'
-  | 'date'
-  | 'datetime-local'
-  | 'email'
-  | 'url'
-  | 'month'
-  | 'number'
-  | 'password'
-  | 'tel'
-  | 'time'
-  | 'text'
-  | 'week'
-  | 'color'
-
+declare const MenuButton: import("react").ForwardRefExoticComponent<MenuButtonProps & import("react").RefAttributes<HTMLButtonElement | null>>;
 /**
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare interface TextOwnProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  /** When `true` the text color will be muted. */
-  muted?: boolean
-  size?: number | number[]
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey_2
+interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxOwnProps, 'children'> {
+  animated?: boolean;
+  delay?: number;
 }
-
-/**
- * @public
- */
-export declare type TextProps<E extends ElementType = 'div'> = Props<TextOwnProps, E>
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const TextSkeleton: ForwardRefExoticComponent<
-  Omit<
-    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'height' | 'as' | 'children'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
->
-
+declare const Skeleton: import("react").ForwardRefExoticComponent<Omit<SkeletonProps & import("react").HTMLProps<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface TextSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+interface TextSkeletonProps extends SkeletonProps {
+  size?: number | number[];
 }
-
-/**
- * @public
- * @deprecated Use `Theme` from `@sanity/ui/theme` instead.
- */
-export declare type Theme = Theme_2
-
-export {ThemeAvatar}
-
-export {ThemeColor}
-
-export {ThemeColorBase}
-
-export {ThemeColorBuilderOpts}
-
-export {ThemeColorButton}
-
 /**
- * @public
- * @deprecated Use `ThemeColorButtonModeKey` from `@sanity/ui/theme` instead.
- */
-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
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element
-
-export declare namespace ThemeColorProvider {
-  var displayName: string
+interface LabelSkeletonProps extends SkeletonProps {
+  size?: number | number[];
 }
-
 /**
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare interface ThemeColorProviderProps {
-  children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey_2
-  tone?: ThemeColorCardToneKey
+interface HeadingSkeletonProps extends SkeletonProps {
+  size?: number | number[];
 }
-
-export {ThemeColorScheme}
-
-/**
- * @public
- * @deprecated Use `ThemeColorSchemeKey` from `@sanity/ui/theme` instead.
- */
-export declare type ThemeColorSchemeKey = ThemeColorSchemeKey_2
-
-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 ThemeColorSyntax = ThemeColorSyntax_2
-
-export {ThemeColorToneKey}
-
 /**
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare interface ThemeContextValue {
-  /** @deprecated No longer used */
-  version: 0.0
-  scheme: ThemeColorSchemeKey_2
-  theme: RootTheme_2
-  tone: ThemeColorCardToneKey
+interface CodeSkeletonProps extends SkeletonProps {
+  size?: number | number[];
 }
-
-/**
- * @public
- * @deprecated Use `ThemeFont` from `@sanity/ui/theme` instead.
- */
-export declare type ThemeFont = ThemeFont_2
-
 /**
- * @public
- * @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.
- */
-export declare type ThemeFontKey = ThemeFontKey_2
-
-/**
- * @public
- * @deprecated Use `ThemeFonts` from `@sanity/ui/theme` instead.
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare type ThemeFonts = ThemeFonts_2
-
+declare const TextSkeleton: import("react").ForwardRefExoticComponent<Omit<TextSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "height" | "size" | "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
- * @public
- * @deprecated Use `ThemeFontSize` from `@sanity/ui/theme` instead.
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare type ThemeFontSize = ThemeFontSize_2
-
+declare const LabelSkeleton: import("react").ForwardRefExoticComponent<Omit<LabelSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "height" | "size" | "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
- * @public
- * @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare type ThemeFontWeight = ThemeFontWeight_2
-
+declare const HeadingSkeleton: import("react").ForwardRefExoticComponent<Omit<HeadingSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "height" | "size" | "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
- * @public
- * @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare type ThemeFontWeightKey = ThemeFontWeightKey_2
-
-export {ThemeInput}
-
+declare const CodeSkeleton: import("react").ForwardRefExoticComponent<Omit<CodeSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "height" | "size" | "children">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * @public
- * @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.
- */
-export declare type ThemeLayer = ThemeLayer_2
-
-/**
- * @internal
  */
-export declare interface ThemeProps {
-  theme: Theme_2
+interface TabPanelProps extends BoxOwnProps {
+  /**
+   * The `id` of the correlating `Tab` component.
+   */
+  'aria-labelledby': string;
+  'id': string;
 }
-
 /**
  * @public
  */
-export declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element
-
-export declare namespace ThemeProvider {
-  var displayName: string
-}
-
+declare const TabPanel: import("react").ForwardRefExoticComponent<Omit<TabPanelProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "id" | "role" | "aria-labelledby">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * @public
  */
-export declare interface ThemeProviderProps {
-  children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey_2
-  theme?: RootTheme_2
-  tone?: ThemeColorCardToneKey
+interface ToastProps {
+  closable?: boolean;
+  description?: React.ReactNode;
+  onClose: () => void;
+  radius?: number | number[];
+  title?: React.ReactNode;
+  status?: 'error' | 'warning' | 'success' | 'info';
+  duration?: number;
+  updatedAt?: number;
 }
-
-/**
- * @public
- * @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.
- */
-export declare type ThemeShadow = ThemeShadow_2
-
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
  *
@@ -2648,289 +499,185 @@ export declare type ThemeShadow = ThemeShadow_2
  *
  * @public
  */
-export declare function Toast(
-  props: ToastProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      | 'as'
-      | 'height'
-      | 'ref'
-      | 'title'
-      | 'onAnimationStart'
-      | 'onDragStart'
-      | 'onDragEnd'
-      | 'onDrag'
-    >,
-): React.JSX.Element
-
-export declare namespace Toast {
-  var displayName: string
-}
-
-/**
- * @public
- */
-export declare interface ToastContextValue {
-  version: 0.0
-  /**
-   * Creates or updates a toast notification.
-   * If a toast with the same ID already exists, it will be updated.
-   * If an ID is not provided, a random one will be generated.
-   * The returned ID can be used to programatically update a toast.
-   */
-  push: (params: ToastParams) => string
+declare function Toast(props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title' | 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'>): React.JSX.Element;
+declare namespace Toast {
+  var displayName: string;
 }
-
 /**
  * @public
  */
-declare interface ToastLayerProps {
-  children: React.ReactNode
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
-  gap?: number | number[]
+interface ToastLayerProps {
+  children: React.ReactNode;
+  padding?: number | number[];
+  paddingX?: number | number[];
+  paddingY?: number | number[];
+  gap?: number | number[];
 }
-
 /**
  * @public
  */
-export declare interface ToastParams {
-  closable?: boolean
-  description?: React.ReactNode
-  duration?: number
-  id?: string
-  onClose?: () => void
-  title?: React.ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
+interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
+  children?: React.ReactNode;
+  zOffset?: number | number[];
 }
-
 /**
  * @public
  */
-export declare interface ToastProps {
-  closable?: boolean
-  description?: React.ReactNode
-  onClose: () => void
-  radius?: number | number[]
-  title?: React.ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
-  duration?: number
-  updatedAt?: number
+declare function ToastProvider(props: ToastProviderProps): React.JSX.Element;
+declare namespace ToastProvider {
+  var displayName: string;
 }
-
 /**
  * @public
  */
-export declare function ToastProvider(props: ToastProviderProps): React.JSX.Element
-
-export declare namespace ToastProvider {
-  var displayName: string
+interface ToastParams {
+  closable?: boolean;
+  description?: React.ReactNode;
+  duration?: number;
+  id?: string;
+  onClose?: () => void;
+  title?: React.ReactNode;
+  status?: 'error' | 'warning' | 'success' | 'info';
 }
-
 /**
  * @public
  */
-export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
-  children?: React.ReactNode
-  zOffset?: number | number[]
+interface ToastContextValue {
+  version: 0.0;
+  /**
+   * Creates or updates a toast notification.
+   * If a toast with the same ID already exists, it will be updated.
+   * If an ID is not provided, a random one will be generated.
+   * The returned ID can be used to programatically update a toast.
+   */
+  push: (params: ToastParams) => string;
 }
-
 /**
- * Tooltips display information when hovering, focusing or tapping.
- *
  * @public
  */
-export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'as' | 'children'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @beta
- */
-export declare const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null>
-
+declare function useToast(): ToastContextValue;
 /**
+ * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface TooltipDelayGroupContextValue {
-  setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void
-  setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void
-  openDelay: number
-  closeDelay: number
-  openTooltipId: string | null
-}
-
-/**
- * @public
- * Provides context for a group of tooltip elements that should share a delay
- * which temporarily becomes 1 ms after the first floating element of the group opens.
- */
-export declare function TooltipDelayGroupProvider(
-  props: TooltipDelayGroupProviderProps,
-): React.JSX.Element
-
-export declare namespace TooltipDelayGroupProvider {
-  var displayName: string
-}
-
-/**
- * @public
- * */
-export declare interface TooltipDelayGroupProviderProps {
-  children?: React.ReactNode
-  /**
-   * 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
-}
-
-/**
- * @public
- */
-export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
-  /** @deprecated Use `fallbackPlacements` instead. */
-  allowedAutoPlacements?: Placement[]
-  arrow?: boolean
-  boundaryElement?: HTMLElement | null
-  children?: React.JSX.Element
-  content?: React.ReactNode
-  disabled?: boolean
-  fallbackPlacements?: Placement[]
-  padding?: number | number[]
-  placement?: Placement
-  /** Whether or not to render the tooltip in a portal element. */
-  portal?: boolean | string
-  radius?: number | number[]
-  scheme?: ThemeColorSchemeKey_2
-  shadow?: number | number[]
-  /**
-   * 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
+interface TreeProps {
+  gap?: number | number[];
   /**
-   * Whether the tooltip should animate in and out.
-   *
-   * @beta
-   * @defaultValue false
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
    */
-  animate?: boolean
+  space?: number | number[];
 }
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const Tree: ForwardRefExoticComponent<
-  TreeProps &
-    Omit<HTMLProps<HTMLUListElement>, 'wrap' | 'height' | 'as' | 'ref' | 'align' | 'role'> &
-    RefAttributes<HTMLUListElement>
->
-
+declare const Tree: import("react").ForwardRefExoticComponent<TreeProps & Omit<import("react").HTMLProps<HTMLUListElement>, "as" | "height" | "wrap" | "role" | "ref" | "align"> & import("react").RefAttributes<HTMLUListElement>>;
 /**
  * @beta
  */
-export declare interface TreeContextValue {
-  version: 0.0
-  focusedElement: HTMLElement | null
-  level: number
-  path: string[]
-  registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
-  setExpanded: (path: string, expanded: boolean) => void
-  setFocusedElement: (focusedElement: HTMLElement | null) => void
-  gap: number | number[]
+interface TreeItemProps {
+  expanded?: boolean;
+  fontSize?: number | number[];
+  icon?: React.ElementType;
+  /**
+   * Allows passing a custom element type to the link component
+   */
+  linkAs?: ElementType;
+  padding?: number | number[];
+  gap?: number | number[];
   /**
    * @deprecated Use `gap` instead. `space` will be removed in v4.
    */
-  space: number | number[]
-  state: TreeState
+  space?: number | number[];
+  text?: React.ReactNode;
+  weight?: ThemeFontWeightKey$1;
 }
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function TreeItem(
-  props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>,
-): React.JSX.Element
-
-export declare namespace TreeItem {
-  var displayName: string
+declare function TreeItem(props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>): React.JSX.Element;
+declare namespace TreeItem {
+  var displayName: string;
 }
-
 /**
  * @beta
  */
-export declare interface TreeItemProps {
-  expanded?: boolean
-  fontSize?: number | number[]
-  icon?: React.ElementType
-  /**
-   * Allows passing a custom element type to the link component
-   */
-  linkAs?: ElementType
-  padding?: number | number[]
-  gap?: number | number[]
-  /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
-   */
-  space?: number | number[]
-  text?: React.ReactNode
-  weight?: ThemeFontWeightKey_2
+interface TreeState {
+  [key: string]: {
+    element: HTMLElement;
+    expanded: boolean;
+  } | undefined;
 }
-
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface TreeProps {
-  gap?: number | number[]
+interface TreeContextValue {
+  version: 0.0;
+  focusedElement: HTMLElement | null;
+  level: number;
+  path: string[];
+  registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void;
+  setExpanded: (path: string, expanded: boolean) => void;
+  setFocusedElement: (focusedElement: HTMLElement | null) => void;
+  gap: number | number[];
   /**
    * @deprecated Use `gap` instead. `space` will be removed in v4.
    */
-  space?: number | number[]
+  space: number | number[];
+  state: TreeState;
 }
-
 /**
  * @beta
  */
-export declare interface TreeState {
-  [key: string]:
-    | {
-        element: HTMLElement
-        expanded: boolean
-      }
-    | undefined
-}
-
+declare function useTree(): TreeContextValue;
+/**
+ * @internal
+ */
+declare function _raf(fn: () => void): () => void;
+/**
+ * @internal
+ */
+declare function _raf2(fn: () => void): () => void;
+/**
+ * @internal
+ */
+declare function _hasFocus(element: HTMLElement): boolean;
+/**
+ * @internal
+ */
+declare function isFocusable(element: HTMLElement): boolean;
+/**
+ * @internal
+ */
+declare function attemptFocus(element: HTMLElement): boolean;
+/**
+ * @internal
+ */
+declare function focusFirstDescendant(element: HTMLElement): boolean;
+/**
+ * @internal
+ */
+declare function focusLastDescendant(element: HTMLElement): boolean;
+/**
+ * @internal
+ */
+declare function _isScrollable(el: Node): boolean;
+/** @beta */
+type ArrayPropPrimitive = string | number | boolean | undefined | null;
 /**
  * @deprecated instead of `useArrayProp(width)` use `Array.isArray(width) ? width : [width]` instead
  * @beta
  */
-export declare function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
-  val: T | T[] | undefined,
-  defaultVal?: T[],
-): T[]
-
+declare function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(val: T | T[] | undefined, defaultVal?: T[]): T[];
+/**
+ * @public
+ */
+type ClickOutsideListener = (event: MouseEvent) => void;
 /**
  * @public
  */
-export declare function useBoundaryElement(): BoundaryElementContextValue
-
+type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[];
 /**
  * @public
  * @deprecated replaced by the new `useClickOutsideEvent` hook, instead of:
@@ -2946,53 +693,75 @@ export declare function useBoundaryElement(): BoundaryElementContextValue
  * return <button ref={buttonRef} />
  * ```
  */
-export declare function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg?: ClickOutsideElements,
-  boundaryElement?: HTMLElement | null,
-): (el: HTMLElement | null) => void
-
+declare function useClickOutside(listener: ClickOutsideListener, elementsArg?: ClickOutsideElements, boundaryElement?: HTMLElement | null): (el: HTMLElement | null) => void;
 /**
  * @public
  */
-export declare function useClickOutsideEvent(
-  listener: ClickOutsideEventListener | false | undefined,
-  elementsArg?: () => ClickOutsideEventElements,
-  boundaryElement?: () => HTMLElement | null,
-): void
-
+type ClickOutsideEventListener = (event: MouseEvent) => void;
 /**
- * @beta
+ * @public
  */
-export declare function useCustomValidity(
-  ref: {
-    current: null | {
-      setCustomValidity: (validity: string) => void
-    }
-  },
-  customValidity: string | undefined,
-): void
-
+type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[];
+/**
+ * @public
+ */
+declare function useClickOutsideEvent(listener: ClickOutsideEventListener | false | undefined, elementsArg?: () => ClickOutsideEventElements, boundaryElement?: () => HTMLElement | null): void;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function useDialog(): DialogContextValue
-
+declare function useCustomValidity(ref: {
+  current: null | {
+    setCustomValidity: (validity: string) => void;
+  };
+}, customValidity: string | undefined): void;
 /**
  * Subscribe to the rect of a DOM element.
  * @beta
  *
  * @deprecated Use `useElementSize` instead
  */
-export declare function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null
-
+declare function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null;
+/**
+ * @beta
+ */
+interface ElementRectValue {
+  width: number;
+  height: number;
+}
+/**
+ * @beta
+ */
+interface ElementSize {
+  content: ElementRectValue;
+  border: ElementRectValue;
+  /** @deprecated INTERNAL ONLY */
+  _contentRect: DOMRectReadOnly;
+}
+/**
+ * @internal
+ */
+type _ElementSizeSubscriber = (elementRect: ElementSize) => void;
+/**
+ * @internal
+ */
+interface _ElementSizeObserver {
+  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void;
+}
+/**
+ * @internal
+ */
+interface _ElementSizeListener {
+  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void;
+}
+/**
+ * @internal
+ */
+declare const _elementSizeObserver: _ElementSizeObserver;
 /**
  * Subscribe to the size of a DOM element.
  * @beta
  */
-export declare function useElementSize(element: HTMLElement | null): ElementSize | null
-
+declare function useElementSize(element: HTMLElement | null): ElementSize | null;
 /**
  * @beta
  * @deprecated use `useImperativeHandle` instead
@@ -3003,10 +772,7 @@ export declare function useElementSize(element: HTMLElement | null): ElementSize
  * +useImperativeHandle(forwardedRef, () => ref.current)
  * ```
  */
-export declare function useForwardedRef<T>(
-  ref: React.ForwardedRef<T>,
-): React.MutableRefObject<T | null>
-
+declare function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.MutableRefObject<T | null>;
 /**
  * Adds global keydown event listener to the window.
  *
@@ -3014,16 +780,7 @@ export declare function useForwardedRef<T>(
  * @param options - The options to pass to the addEventListener function (example, capture: true)
  * @beta
  */
-export declare function useGlobalKeyDown(
-  onKeyDown: (event: KeyboardEvent) => void,
-  options?: AddEventListenerOptions,
-): void
-
-/**
- * @public
- */
-export declare function useLayer(): LayerContextValue
-
+declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void, options?: AddEventListenerOptions): void;
 /**
  * Efficiently subscribes to `window.matchMedia` queries
  *
@@ -3031,35 +788,19 @@ export declare function useLayer(): LayerContextValue
  *
  * @public
  */
-export declare function useMatchMedia(
-  mediaQueryString: `(${string})`,
-  getServerSnapshot?: () => boolean,
-): boolean
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function useMediaIndex(): number
-
+declare function useMatchMedia(mediaQueryString: `(${string})`, getServerSnapshot?: () => boolean): boolean;
 /**
- * @public
+ * @internal
  */
-export declare function usePortal(): PortalContextValue
-
+interface _MediaStore {
+  subscribe: (onStoreChange: () => void) => () => void;
+  getSnapshot: () => number;
+}
 /**
- * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
- * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
- *
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
-
+declare function useMediaIndex(): number;
 /**
  * Returns true if motion should be reduced
  *
@@ -3071,70 +812,115 @@ export declare function usePrefersDark(getServerSnapshot?: () => boolean): boole
  *
  * @public
  */
-export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
-
+declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean;
 /**
- * @public
+ * @internal
  */
-export declare function useRootTheme(): ThemeContextValue
-
+declare const _ResizeObserver: typeof ResizeObserver;
 /**
- * @public
+ * @internal
  */
-export declare function useTheme(): Theme_2
-
+declare function _fillCSSObject(keys: string[], value: string | number | CSSObject): CSSObject;
 /**
  * @public
  */
-export declare function useTheme_v2(): Theme_v2
-
+declare function rem(pixelValue: number): string | 0;
 /**
- * @public
+ * @internal
  */
-export declare function useToast(): ToastContextValue
-
+declare function _responsive<T>(media: number[], values: T[], callback: (value: T, index: number, array: T[]) => CSSObject): CSSObject[];
 /**
- * @beta
+ * @internal
  */
-export declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null
-
+declare function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[];
 /**
- * @beta
+ * @internal
  */
-export declare function useTree(): TreeContextValue
-
+declare function _getResponsiveSpace(theme: Theme$1, props: string[], spaceIndexes?: number[]): CSSObject[] | null;
 /**
- * @beta
+ * @internal
+ */
+interface ThemeProps {
+  theme: Theme$1;
+}
+/**
+ * @internal
  */
-export declare const VirtualList: ForwardRefExoticComponent<
-  VirtualListProps<any> &
-    StackOwnProps &
-    Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'ref' | 'onChange'> &
-    RefAttributes<HTMLDivElement>
->
-
+interface ResponsiveFontSizeStyleProps {
+  $size: number[];
+}
 /**
- * @beta
+ * @internal
  */
-export declare interface VirtualListChangeOpts {
-  fromIndex: number
-  gap: number
-  itemHeight: number
-  scrollHeight: number
-  scrollTop: number
-  toIndex: number
+interface FontWeightStyleProps {
+  $weight?: ThemeFontWeightKey$1;
 }
-
 /**
- * @beta
+ * @internal
+ */
+interface ResponsiveTextAlignStyleProps {
+  $align: TextAlign[];
+}
+/**
+ * @internal
+ */
+interface ResponsiveFontStyleProps extends FontWeightStyleProps, ResponsiveFontSizeStyleProps, ResponsiveTextAlignStyleProps {
+  $accent?: boolean;
+  $muted?: boolean;
+}
+/**
+ * Get responsive CSS for the `code` font style.
+ * @internal
+ */
+declare function responsiveCodeFontStyle(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
+/**
+ * Get responsive CSS for the `heading` font style.
+ * @internal
+ */
+declare function responsiveHeadingFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
+/**
+ * Get responsive CSS for the `label` font style.
+ * @internal
+ */
+declare function responsiveLabelFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
+/**
+ * Get responsive text align styles.
+ * @internal
+ */
+declare function responsiveTextAlignStyle(props: ResponsiveTextAlignStyleProps & ThemeProps): CSSObject[];
+/**
+ * Get responsive CSS for the `text` font style.
+ * @internal
+ */
+declare function responsiveTextFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
+/**
+ * @public
+ */
+interface ThemeColorProviderProps {
+  children?: React.ReactNode;
+  scheme?: ThemeColorSchemeKey$1;
+  tone?: ThemeColorCardToneKey;
+}
+/**
+ * @public
  */
-export declare interface VirtualListProps<Item = any> {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  gap?: number
-  getItemKey?: (item: Item, itemIndex: number) => string
-  items?: Item[]
-  onChange?: (opts: VirtualListChangeOpts) => void
-  renderItem?: (item: Item) => React.ReactNode
+declare function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element;
+declare namespace ThemeColorProvider {
+  var displayName: string;
 }
-
-export {}
+/**
+ * @public
+ */
+interface ThemeContextValue {
+  /** @deprecated No longer used */
+  version: 0.0;
+  scheme: ThemeColorSchemeKey$1;
+  theme: RootTheme$1;
+  tone: ThemeColorCardToneKey;
+}
+/**
+ * @public
+ */
+declare function useRootTheme(): ThemeContextValue;
+export { type ArrayPropPrimitive, Arrow, Assign, Autocomplete, AutocompleteInputChangeMsg, AutocompleteInputFoocusMsg, AutocompleteMsg, AutocompleteOpenButtonProps, AutocompleteProps, AutocompleteRootBlurMsg, AutocompleteRootClearMsg, AutocompleteRootEscapeMsg, AutocompleteRootOpenMsg, AutocompleteRootSetActiveValueMsg, AutocompleteRootSetListFocusedMsg, AutocompleteState, AutocompleteValueChangeMsg, Avatar, AvatarCounter, AvatarCounterProps, AvatarOwnProps, AvatarPosition, AvatarProps, AvatarRootStyleProps, AvatarSize, AvatarStack, AvatarStackProps, AvatarStatus, Badge, BadgeMode, BadgeOwnProps, BadgeProps, BadgeTone, BaseAutocompleteOption, BaseTheme, BoundaryElementContextValue, BoundaryElementProvider, BoundaryElementProviderProps, Box, BoxDisplay, BoxHeight, BoxOverflow, BoxOwnProps, BoxProps, BoxShadow, BoxSizing, Breadcrumbs, BreadcrumbsProps, Button, ButtonMode, ButtonOwnProps, ButtonProps, ButtonTextAlign, ButtonTone, ButtonWidth, Card, CardOwnProps, CardProps, CardStyleProps, CardTone, Checkbox, CheckboxProps, ClickOutsideElements, ClickOutsideEventElements, ClickOutsideEventListener, ClickOutsideListener, Code, CodeOwnProps, CodeProps, CodeSkeleton, CodeSkeletonProps, ComponentType, ConditionalWrapper, Container, ContainerOwnProps, ContainerProps, Delay, Dialog, DialogContext, DialogContextValue, DialogPosition, DialogProps, DialogProvider, DialogProviderProps, ElementQuery, ElementRectValue, ElementSize, ElementType, EmptyProps, ErrorBoundary, ErrorBoundaryProps, ErrorBoundaryState, Flex, FlexAlign, FlexDirection, FlexJustify, FlexOwnProps, FlexProps, FlexValue, FlexWrap, FontWeightStyleProps, Grid, GridAutoCols, GridAutoFlow, GridAutoRows, GridItemColumn, GridItemColumnEnd, GridItemColumnStart, GridItemRow, GridItemRowEnd, GridItemRowStart, GridOwnProps, GridProps, HSL, Heading, HeadingOwnProps, HeadingProps, HeadingSkeleton, HeadingSkeletonProps, Hotkeys, HotkeysProps, Inline, InlineOwnProps, InlineProps, KBD, KBDOwnProps, KBDProps, Label, LabelOwnProps, LabelProps, LabelSkeleton, LabelSkeletonProps, Layer, LayerContextValue, LayerProps, LayerProvider, LayerProviderProps, MediaQueryProps, Menu, MenuButton, MenuButtonProps, MenuDivider, MenuDividerProps, MenuGroup, MenuGroupOwnProps, MenuGroupProps, MenuItem, MenuItemOwnProps, MenuItemProps, MenuProps, type PartialThemeColorBuilderOpts, Placement, Popover, PopoverMargins, PopoverProps, PopoverUpdateCallback, PopoverWidth, Portal, PortalContextValue, PortalProps, PortalProvider, PortalProviderProps, Props, RGB, Radio, RadioProps, Radius, ResponsiveAvatarSizeStyleProps, ResponsiveBorderProps, ResponsiveBoxProps, ResponsiveFlexItemProps, ResponsiveFlexProps, ResponsiveFontSizeStyleProps, ResponsiveFontStyleProps, ResponsiveGridItemProps, ResponsiveGridProps, ResponsiveMarginProps, ResponsivePaddingProps, ResponsiveRadiusProps, ResponsiveShadowProps, ResponsiveTextAlignStyleProps, ResponsiveWidthProps, ResponsiveWidthStyleProps, RootTheme, Select, SelectProps, SelectableTone, Skeleton, SkeletonProps, Spinner, SpinnerProps, SrOnly, SrOnlyProps, Stack, StackOwnProps, StackProps, Styles, Switch, SwitchProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, TagType, Text, TextAlign, TextArea, TextAreaProps, TextInput, TextInputClearButtonProps, TextInputProps, TextInputType, TextOwnProps, TextProps, TextSkeleton, TextSkeletonProps, Theme, type ThemeAvatar, type ThemeColor, type ThemeColorBase, type ThemeColorBuilderOpts, type ThemeColorButton, ThemeColorButtonModeKey, type ThemeColorButtonState, type ThemeColorButtonStates, type ThemeColorButtonTones, type ThemeColorCard, type ThemeColorCardState, type ThemeColorGenericState, type ThemeColorInput, type ThemeColorInputState, type ThemeColorInputStates, type ThemeColorMuted, type ThemeColorMutedTone, type ThemeColorName, ThemeColorProvider, ThemeColorProviderProps, type ThemeColorScheme, ThemeColorSchemeKey, type ThemeColorSchemes, type ThemeColorSelectable, type ThemeColorSelectableState, type ThemeColorSelectableStates, type ThemeColorSolid, type ThemeColorSolidTone, type ThemeColorSpot, type ThemeColorSpotKey, ThemeColorSyntax, type ThemeColorToneKey, ThemeContextValue, ThemeFont, ThemeFontKey, ThemeFontSize, ThemeFontWeight, ThemeFontWeightKey, ThemeFonts, type ThemeInput, ThemeLayer, ThemeProps, ThemeProvider, ThemeProviderProps, ThemeShadow, Toast, ToastContextValue, ToastParams, ToastProps, ToastProvider, ToastProviderProps, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupContextValue, TooltipDelayGroupProvider, TooltipDelayGroupProviderProps, TooltipProps, Tree, TreeContextValue, TreeItem, TreeItemProps, TreeProps, TreeState, VirtualList, VirtualListChangeOpts, VirtualListProps, _ElementSizeListener, _ElementSizeObserver, _ElementSizeSubscriber, _MediaStore, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useClickOutsideEvent, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMatchMedia, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useTheme_v2, useToast, useTooltipDelayGroup, useTree };
+//# sourceMappingURL=index.d.mts.map