@sanity/ui 3.1.11 → 3.1.12-canary.0

package/dist/index.d.mts

@@ -1,2768 +1,538 @@
-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 {DetailedHTMLProps} from 'react'
-import {ElementType} from 'react'
-import {FastOmit} from 'styled-components'
-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 {HTMLAttributes} from 'react'
-import {HTMLProps} from 'react'
-import {IStyledComponentBase} from 'styled-components/dist/types'
-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>
->
-
-/**
- * @internal
- */
-export declare function attemptFocus(element: HTMLElement): boolean
-
+import { $ as VirtualListProps, $n as BadgeMode, $r as hslToRgb, $t as AvatarRootStyleProps, A as TextInputClearButtonProps, An as GridItemColumnEnd, Ar as ThemeColorScheme, At as InlineProps, B as StackProps, Bn as FlexJustify, Br as ThemeColorSyntax, Bt as Code, C as TooltipDelayGroupProvider, Cn as HotkeysProps, Cr as ThemeColorGenericState, Ct as BoundaryElementProviderProps, D as Tooltip, Dn as PopoverMargins, Dr as ThemeColorMuted, Dt as KBD, E as TooltipDelayGroupContextValue, En as Radius, Er as ThemeColorInputStates, Et as LabelProps, F as Text, Fn as GridAutoCols, Fr as ThemeColorSelectableStates, Ft as Flex, G as Radio, Gn as ButtonMode, Gr as ThemeFontWeight, Gt as Card, H as SpinnerProps, Hn as FlexWrap, Hr as ThemeFont, Ht as Checkbox, I as TextProps, In as GridAutoFlow, Ir as ThemeColorSolid, It as FlexProps, J as PopoverProps, Jn as ButtonWidth, Jr as ThemeInput, Jt as ButtonProps, K as RadioProps, Kn as ButtonTextAlign, Kr as ThemeFontWeightKey, Kt as CardProps, L as Switch, Ln as GridAutoRows, Lr as ThemeColorSolidTone, Lt as ResponsiveWidthStyleProps, M as TextInputType, Mn as GridItemRow, Mr as ThemeColorSchemes, Mt as HeadingProps, N as TextArea, Nn as GridItemRowEnd, Nr as ThemeColorSelectable, Nt as Grid, O as TooltipProps, On as Placement, Or as ThemeColorMutedTone, Ot as KBDProps, P as TextAreaProps, Pn as GridItemRowStart, Pr as ThemeColorSelectableState, Pt as GridProps, Q as VirtualListChangeOpts, Qn as BoxSizing, Qr as hexToRgb, Qt as BoxProps, R as SwitchProps, Rn as FlexAlign, Rr as ThemeColorSpot, Rt as Container, S as useTooltipDelayGroup, Sn as Hotkeys, Sr as ThemeColorCardState, St as BoundaryElementProvider, T as TooltipDelayGroupContext, Tn as SelectableTone, Tr as ThemeColorInputState, Tt as Label, U as Select, Un as DialogPosition, Ur as ThemeFontKey, Ut as CheckboxProps, V as Spinner, Vn as FlexValue, Vr as ThemeColorToneKey, Vt as CodeProps, W as SelectProps, Wn as CardTone, Wr as ThemeFontSize, Wt as CardStyleProps, X as PopoverWidth, Xn as BoxHeight, Xr as ThemeShadow, Xt as BadgeProps, Y as PopoverUpdateCallback, Yn as BoxDisplay, Yr as ThemeLayer, Yt as Badge, Z as VirtualList, Zn as BoxOverflow, Zr as createColorTheme, Zt as Box, _ as TabProps, _n as ResponsiveMarginProps, _r as ThemeColorButtonModeKey, _t as ElementQuery, a as usePrefersDark, ai as screen, an as Avatar, ar as BoxShadow, at as PortalProviderProps, b as MenuGroup, bn as ResponsiveShadowProps, br as ThemeColorButtonTones, bt as useBoundaryElement, c as isHTMLAnchorElement, cn as Menu, cr as RGB, ct as useLayer, d as isHTMLInputElement, dn as ResponsiveBorderProps, dr as Theme, dt as LayerProviderProps, ei as multiply, en as ResponsiveAvatarSizeStyleProps, er as BadgeTone, et as SrOnly, f as isHTMLSelectElement, fn as ResponsiveBoxProps, fr as ThemeAvatar, ft as Layer, g as Tab, gn as ResponsiveGridProps, gr as ThemeColorButton, gt as ErrorBoundaryState, h as TabListProps, hn as ResponsiveGridItemProps, hr as ThemeColorBuilderOpts, ht as ErrorBoundaryProps, i as ThemeProviderProps, ii as rgba, in as AvatarCounterProps, ir as BaseTheme, it as PortalProvider, j as TextInputProps, jn as GridItemColumnStart, jr as ThemeColorSchemeKey, jt as Heading, k as TextInput, kn as GridItemColumn, kr as ThemeColorName, kt as Inline, l as isHTMLButtonElement, ln as MenuProps, lr as RootTheme, lt as LayerContextValue, m as TabList, mn as ResponsiveFlexProps, mr as ThemeColorBase, mt as ErrorBoundary, n as useTheme_v2, ni as rgbToHex, nn as AvatarStackProps, nr as AvatarSize, nt as usePortal, o as _isEnterToClickElement, oi as studioTheme, on as AvatarProps, or as HSL, ot as Portal, p as isHTMLTextAreaElement, pn as ResponsiveFlexItemProps, pr as ThemeColor, pt as LayerProps, q as Popover, qn as ButtonTone, qr as ThemeFonts, qt as Button, r as ThemeProvider, ri as rgbToHsl, rn as AvatarCounter, rr as AvatarStatus, rt as PortalContextValue, s as containsOrEqualsElement, sn as MenuDivider, sr as PartialThemeColorBuilderOpts, st as PortalProps, t as useTheme, ti as parseColor, tn as AvatarStack, tr as AvatarPosition, tt as SrOnlyProps, u as isHTMLElement, un as Delay, ur as Styles, ut as LayerProvider, v as MenuItem, vn as ResponsivePaddingProps, vr as ThemeColorButtonState, vt as MediaQueryProps, w as TooltipDelayGroupProviderProps, wn as TextAlign, wr as ThemeColorInput, wt as Arrow, x as MenuGroupProps, xn as ResponsiveWidthProps, xr as ThemeColorCard, xt as BoundaryElementContextValue, y as MenuItemProps, yn as ResponsiveRadiusProps, yr as ThemeColorButtonStates, yt as ConditionalWrapper, z as Stack, zn as FlexDirection, zr as ThemeColorSpotKey, zt as ContainerProps } from "./_chunks-dts/useTheme.mjs";
+import { CSSObject, RootTheme as RootTheme$1, Theme as Theme$1, ThemeColorCardToneKey, ThemeColorSchemeKey as ThemeColorSchemeKey$1, ThemeFontWeightKey as ThemeFontWeightKey$1 } from "@sanity/ui/theme";
+import * as react232 from "react";
+import { ElementType, HTMLProps, ReactNode, Ref } from "react";
 /**
- * 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
-
+type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>;
 /**
- * @internal
+ * @public
  */
-export declare interface AutocompleteInputChangeMsg {
-  type: 'input/change'
-  query: string | null
+interface BaseAutocompleteOption {
+  value: string;
 }
-
 /**
  * @internal
  */
-export declare interface AutocompleteInputFoocusMsg {
-  type: 'input/focus'
+interface AutocompleteState {
+  activeValue: string | null;
+  focused: boolean;
+  listFocused: boolean;
+  query: string | null;
+  value: string | null;
 }
-
 /**
  * @internal
  */
-export declare type AutocompleteMsg =
-  | AutocompleteRootBlurMsg
-  | AutocompleteRootClearMsg
-  | AutocompleteRootEscapeMsg
-  | AutocompleteRootOpenMsg
-  | AutocompleteRootSetActiveValueMsg
-  | AutocompleteRootSetListFocusedMsg
-  | AutocompleteInputChangeMsg
-  | AutocompleteInputFoocusMsg
-  | AutocompleteValueChangeMsg
-
-/**
- * @public
- */
-export declare type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> &
-  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
-
-/**
- * @public
- */
-export declare interface AutocompleteProps<
-  Option extends BaseAutocompleteOption = BaseAutocompleteOption,
-> {
-  border?: boolean
-  customValidity?: string
-  filterOption?: (query: string, option: Option) => boolean
-  fontSize?: number | number[]
-  icon?: ElementType | 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
+interface AutocompleteRootBlurMsg {
+  type: 'root/blur';
 }
-
 /**
  * @internal
  */
-export declare interface AutocompleteRootBlurMsg {
-  type: 'root/blur'
+interface AutocompleteRootClearMsg {
+  type: 'root/clear';
 }
-
 /**
  * @internal
  */
-export declare interface AutocompleteRootClearMsg {
-  type: 'root/clear'
+interface AutocompleteRootEscapeMsg {
+  type: 'root/escape';
 }
-
 /**
  * @internal
  */
-export declare interface AutocompleteRootEscapeMsg {
-  type: 'root/escape'
+interface AutocompleteRootOpenMsg {
+  type: 'root/open';
+  query: string | null;
 }
-
 /**
  * @internal
  */
-export declare interface AutocompleteRootOpenMsg {
-  type: 'root/open'
-  query: string | null
+interface AutocompleteRootSetActiveValueMsg {
+  type: 'root/setActiveValue';
+  value: string;
+  listFocused?: boolean;
 }
-
 /**
  * @internal
  */
-export declare interface AutocompleteRootSetActiveValueMsg {
-  type: 'root/setActiveValue'
-  value: string
-  listFocused?: boolean
+interface AutocompleteRootSetListFocusedMsg {
+  type: 'root/setListFocused';
+  listFocused: boolean;
 }
-
 /**
  * @internal
  */
-export declare interface AutocompleteRootSetListFocusedMsg {
-  type: 'root/setListFocused'
-  listFocused: boolean
+interface AutocompleteInputChangeMsg {
+  type: 'input/change';
+  query: string | null;
 }
-
 /**
  * @internal
  */
-export declare interface AutocompleteState {
-  activeValue: string | null
-  focused: boolean
-  listFocused: boolean
-  query: string | null
-  value: string | null
+interface AutocompleteInputFoocusMsg {
+  type: 'input/focus';
 }
-
 /**
  * @internal
  */
-export declare interface AutocompleteValueChangeMsg {
-  type: 'value/change'
-  value: string | null
-}
-
-/**
- * Avatars are used to represent people and other agents (e.g. bots).
- *
- * @public
- */
-export declare const Avatar: ForwardRefExoticComponent<
-  AvatarProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
->
-
-/**
- * @public
- */
-export declare const AvatarCounter: ForwardRefExoticComponent<
-  AvatarCounterProps & RefAttributes<HTMLDivElement>
->
-
-/**
- * @public
- */
-export declare interface AvatarCounterProps {
-  count: number
-  size?: AvatarSize | AvatarSize[]
-  /** @deprecated No longer supported. */
-  tone?: 'navbar'
-}
-
-/**
- * @public
- */
-export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
-
-/**
- * @public
- */
-export declare interface AvatarProps {
-  /** @beta */
-  __unstable_hideInnerStroke?: boolean
-  animateArrowFrom?: AvatarPosition
-  arrowPosition?: AvatarPosition
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  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 AutocompleteValueChangeMsg {
+  type: 'value/change';
+  value: string | null;
 }
-
 /**
  * @internal
  */
-export declare interface AvatarRootStyleProps {
-  $color: ThemeColorAvatarColorKey
-}
-
-/**
- * @public
- */
-export declare type AvatarSize = 0 | 1 | 2 | 3
-
-/**
- * @public
- */
-export declare const AvatarStack: ForwardRefExoticComponent<
-  AvatarStackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
->
-
-/**
- * @public
- */
-export declare interface AvatarStackProps {
-  children: React.ReactNode
-  maxLength?: number
-  size?: AvatarSize | AvatarSize[]
-  /** @deprecated No longer supported. */
-  tone?: 'navbar'
-}
-
-/**
- * @public
- */
-export declare type AvatarStatus = 'online' | 'editing' | 'inactive'
-
-/**
- * Badges are used to tag resources.
- *
- * @public
- */
-export declare const Badge: ForwardRefExoticComponent<
-  Omit<BadgeProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
->
-
-/**
- * @public
- * @deprecated No longer used
- */
-export declare type BadgeMode = 'default' | 'outline'
-
-/**
- * @public
- */
-export declare interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  fontSize?: number | number[]
-  /** @deprecated No longer used. */
-  mode?: BadgeMode
-  tone?: BadgeTone
-}
-
-/**
- * @public
- */
-export declare type BadgeTone = ThemeColorStateToneKey
-
-/**
- * @public
- */
-export declare interface BaseAutocompleteOption {
-  value: string
-}
-
-/**
- * @public
- * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
- */
-export declare type BaseTheme = BaseTheme_2
-
-/**
- * @public
- */
-export declare interface BoundaryElementContextValue {
-  version: 0.0
-  element: HTMLElement | null
-}
-
-/**
- * @public
- */
-export declare function BoundaryElementProvider(
-  props: BoundaryElementProviderProps,
-): React.JSX.Element
-
-export declare namespace BoundaryElementProvider {
-  var displayName: string
-}
-
-/**
- * @public
- */
-export declare interface BoundaryElementProviderProps {
-  children: React.ReactNode
-  element: HTMLElement | null
-}
-
-/**
- * The `Box` component is a basic layout wrapper component which provides utility properties
- * for flex, margins and padding.
- *
- * @public
- */
-export declare const Box: ForwardRefExoticComponent<
-  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @public
- */
-export declare type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
-
-/**
- * @public
- */
-export declare type BoxHeight = 'stretch' | 'fill'
-
-/**
- * @public
- */
-export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
-
-/**
- * @public
- */
-export declare interface BoxProps
-  extends ResponsiveFlexItemProps,
-    ResponsiveBoxProps,
-    ResponsiveGridItemProps,
-    ResponsiveMarginProps,
-    ResponsivePaddingProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
-}
-
-/**
- * @public
- * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
- */
-export declare type BoxShadow = ThemeBoxShadow
-
-/**
- * @public
- */
-export declare type BoxSizing = 'content' | 'border'
-
-/**
- * @beta
- */
-export declare const Breadcrumbs: ForwardRefExoticComponent<
-  BreadcrumbsProps &
-    Omit<HTMLProps<HTMLOListElement>, 'type' | 'ref' | 'as'> &
-    RefAttributes<HTMLOListElement>
->
-
-/**
- * @beta
- */
-export declare interface BreadcrumbsProps {
-  maxLength?: number
-  separator?: React.ReactNode
-  space?: number | number[]
-}
-
-/**
- * @public
- */
-export declare const Button: ForwardRefExoticComponent<
-  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'width' | 'as'>, 'ref'> &
-    RefAttributes<HTMLButtonElement>
->
-
-/**
- * @public
- */
-export declare type ButtonMode = ThemeColorButtonModeKey_2
-
-/**
- * @public
- */
-export declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  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
-  space?: number | number[]
-  muted?: boolean
-  text?: React.ReactNode
-  textAlign?: ButtonTextAlign
-  textWeight?: ThemeFontWeightKey_2
-  tone?: ButtonTone
-  type?: 'button' | 'reset' | 'submit'
-  width?: ButtonWidth
-}
-
-/**
- * @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: ForwardRefExoticComponent<
-  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
+type AutocompleteMsg = AutocompleteRootBlurMsg | AutocompleteRootClearMsg | AutocompleteRootEscapeMsg | AutocompleteRootOpenMsg | AutocompleteRootSetActiveValueMsg | AutocompleteRootSetListFocusedMsg | AutocompleteInputChangeMsg | AutocompleteInputFoocusMsg | AutocompleteValueChangeMsg;
 /**
  * @public
  */
-export declare interface CardProps
-  extends BoxProps,
-    ResponsiveBorderProps,
-    ResponsiveRadiusProps,
-    ResponsiveShadowProps {
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_checkered?: boolean
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_focusRing?: boolean
-  muted?: boolean
-  pressed?: boolean
-  scheme?: ThemeColorSchemeKey_2
-  tone?: CardTone
-}
-
-/**
- * @internal
- */
-export declare interface CardStyleProps {
-  $checkered: boolean
-  $focusRing: boolean
-  $muted: boolean
-  $tone: ThemeColorToneKey
+interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {
+  border?: boolean;
+  customValidity?: string;
+  filterOption?: (query: string, option: Option) => boolean;
+  fontSize?: number | number[];
+  icon?: ElementType | 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;
 }
-
 /**
- * @public
- */
-export declare type CardTone = ThemeColorCardToneKey | 'inherit'
-
-/**
- * Checkboxes allow the user to select one or more items from a set.
+ * 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 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
-
-/**
- * @public
- */
-export declare type ClickOutsideListener = (event: MouseEvent) => void
-
-/**
- * @public
- */
-export declare const Code: ForwardRefExoticComponent<
-  Omit<CodeProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> & RefAttributes<HTMLElement>
->
-
-/**
- * @public
- */
-export declare interface CodeProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  /** Define the language to use for syntax highlighting. */
-  language?: string
-  size?: number | number[]
-  weight?: string
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare const CodeSkeleton: ForwardRefExoticComponent<
-  Omit<
-    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
->
-
+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;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface CodeSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * @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
+interface BreadcrumbsProps {
+  maxLength?: number;
+  separator?: React.ReactNode;
+  space?: number | number[];
 }
-
-/**
- * The `Container` component wraps content layout in a defined set of widths.
- *
- * @public
- */
-export declare const Container: ForwardRefExoticComponent<
-  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @public
- */
-export declare interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
-
-/**
- * @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>, 'id' | 'width' | '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 const Breadcrumbs: react232.ForwardRefExoticComponent<BreadcrumbsProps & Omit<react232.HTMLProps<HTMLOListElement>, "ref" | "as" | "type"> & react232.RefAttributes<HTMLOListElement>>;
 /**
  * @public
  */
-export declare interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
+interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
   /**
    * @beta
    */
-  __unstable_autoFocus?: boolean
+  __unstable_autoFocus?: boolean;
   /**
    * @beta
    */
-  __unstable_hideCloseButton?: boolean
-  cardRadius?: Radius | Radius[]
-  cardShadow?: number | number[]
-  contentRef?: React.ForwardedRef<HTMLDivElement>
-  footer?: React.ReactNode
-  header?: React.ReactNode
-  id: string
+  __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[]
+  onActivate?: LayerProps['onActivate'];
+  onClickOutside?: () => void;
+  onClose?: () => void;
+  portal?: string;
+  position?: DialogPosition | DialogPosition[];
+  scheme?: ThemeColorSchemeKey$1;
+  zOffset?: number | number[];
   /**
    * Whether the dialog should animate in on mount.
    *
    * @beta
    * @defaultValue false
    */
-  animate?: boolean
+  animate?: boolean;
 }
-
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * The Dialog component.
+ *
+ * @public
  */
-export declare function DialogProvider(props: DialogProviderProps): React.JSX.Element
-
-export declare namespace DialogProvider {
-  var displayName: string
-}
-
+declare const Dialog: react232.ForwardRefExoticComponent<Omit<DialogProps & Omit<react232.HTMLProps<HTMLDivElement>, "as" | "width" | "id">, "ref"> & react232.RefAttributes<HTMLDivElement>>;
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface DialogProviderProps {
-  children?: React.ReactNode
-  position?: DialogPosition | DialogPosition[]
-  zOffset?: number | number[]
+interface DialogContextValue {
+  version: 0.0;
+  position?: DialogPosition | DialogPosition[];
+  zOffset?: number | number[];
 }
-
 /**
- * DO NOT USE IN PRODUCTION.
- * @beta
+ * @internal
  */
-export declare const ElementQuery: ForwardRefExoticComponent<
-  Omit<MediaQueryProps & Omit<HTMLProps<HTMLDivElement>, 'media' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
+declare const DialogContext: react232.Context<DialogContextValue>;
 /**
+ * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface ElementRectValue {
-  width: number
-  height: number
+interface DialogProviderProps {
+  children?: React.ReactNode;
+  position?: DialogPosition | DialogPosition[];
+  zOffset?: number | number[];
 }
-
 /**
+ * This API might change. DO NOT USE IN PRODUCTION.
  * @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
+declare function DialogProvider(props: DialogProviderProps): React.JSX.Element;
+declare namespace DialogProvider {
+  var displayName: string;
 }
-
-/**
- * @internal
- */
-export declare const _elementSizeObserver: _ElementSizeObserver
-
-/**
- * @internal
- */
-export declare type _ElementSizeSubscriber = (elementRect: ElementSize) => void
-
-/**
- * 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: ForwardRefExoticComponent<
-  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'wrap' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @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 FlexProps
-  extends Omit<BoxProps, 'display'>,
-    ResponsiveFlexProps,
-    ResponsiveFlexItemProps {
-  gap?: number | number[]
-}
-
-/**
- * @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: ForwardRefExoticComponent<
-  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @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 GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
-
-/**
- * @internal
- */
-export declare function _hasFocus(element: HTMLElement): boolean
-
-/**
- * Typographic headings.
- *
- * @public
- */
-export declare const Heading: ForwardRefExoticComponent<
-  Omit<HeadingProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> &
-    RefAttributes<HTMLElement>
->
-
-/**
- * @public
- */
-export declare interface HeadingProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  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
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare const HeadingSkeleton: ForwardRefExoticComponent<
-  Omit<
-    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
-    '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' | 'ref' | 'as'> & RefAttributes<HTMLElement>
->
-
-/**
- * @public
- */
-export declare interface HotkeysProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  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: ForwardRefExoticComponent<
-  Omit<InlineProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
->
-
-/**
- * @public
- */
-export declare interface InlineProps extends Omit<BoxProps, 'display'> {
-  /** The spacing between children. */
-  space?: number | number[]
-}
-
-/**
- * @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: ForwardRefExoticComponent<
-  KBDProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLDivElement>
->
-
-/**
- * @public
- */
-export declare interface KBDProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-}
-
-/**
- * Typographic labels.
- *
- * @public
- */
-export declare const Label: ForwardRefExoticComponent<
-  Omit<LabelProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @public
- */
-export declare interface LabelProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  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
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare const LabelSkeleton: ForwardRefExoticComponent<
-  Omit<
-    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
-    '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' | 'tabIndex' | 'role' | 'as'>, '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: IStyledComponentBase<
-  'web',
-  FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>
-> &
-  string
-
-/**
- * @public
- */
-export declare function MenuGroup(
-  props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
-    MenuGroupProps,
-): React.JSX.Element
-
-export declare namespace MenuGroup {
-  var displayName: string
-}
-
-/**
- * @public
- */
-export declare interface MenuGroupProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  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[]
-  space?: number | number[]
-  text: React.ReactNode
-  tone?: SelectableTone
-}
-
-/**
- * @public
- */
-export declare const MenuItem: ForwardRefExoticComponent<
-  MenuItemProps &
-    Omit<HTMLProps<HTMLDivElement>, 'selected' | 'height' | 'ref' | 'tabIndex' | 'as'> &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @public
- */
-export declare interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  fontSize?: number | number[]
-  hotkeys?: string[]
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
-  pressed?: boolean
-  selected?: boolean
-  space?: number | number[]
-  text?: React.ReactNode
-  tone?: SelectableTone
-}
-
-/**
- * @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
-  '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' | 'children' | 'as'>,
-    '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>
-}
-
-/**
- * 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 {
-  column?: GridItemColumn | GridItemColumn[]
-  columnStart?: GridItemColumnStart | GridItemColumnStart[]
-  columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
-  row?: GridItemRow | GridItemRow[]
-  rowStart?: GridItemRowStart | GridItemRowStart[]
-  rowEnd?: GridItemRowEnd | GridItemRowEnd[]
-}
-
-/**
- * @public
- */
-export declare interface ResponsiveGridProps {
-  autoRows?: GridAutoRows | GridAutoRows[]
-  autoCols?: GridAutoCols | GridAutoCols[]
-  autoFlow?: GridAutoFlow | GridAutoFlow[]
-  columns?: number | number[]
-  gap?: number | number[]
-  gapX?: number | number[]
-  gapY?: number | number[]
-  rows?: 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[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  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<BoxProps, '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>, 'aria-hidden' | 'as'>, '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: ForwardRefExoticComponent<
-  StackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
->
-
-/**
- * @public
- */
-export declare interface StackProps extends BoxProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  space?: number | number[]
-}
-
-/**
- * @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>,
-        'label' | 'id' | 'type' | 'width' | 'aria-controls' | 'as'
-      >,
-    '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<InlineProps, 'as' | 'height'> {
-  children: Array<React.JSX.Element | null | undefined | false>
-}
-
-/**
- * @public
- */
-export declare const TabPanel: ForwardRefExoticComponent<
-  Omit<
-    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'role' | 'aria-labelledby' | 'as'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
->
-
-/**
- * @public
- */
-export declare interface TabPanelProps extends BoxProps {
-  /**
-   * 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
-}
-
-/**
- * The `Text` component is an agile, themed typographic element.
- *
- * @public
- */
-declare const Text_2: ForwardRefExoticComponent<
-  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-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 {
-  /**
-   * @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' | 'prefix' | 'as'>, 'ref'> &
-    RefAttributes<HTMLInputElement>
->
-
-/**
- * @public
+ * @beta
  */
-export declare type TextInputClearButtonProps = Omit<ButtonProps, 'as'> &
-  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>
-
+declare function useDialog(): DialogContextValue;
 /**
  * @public
  */
-export declare interface TextInputProps {
+interface MenuButtonProps {
   /**
-   * @beta
+   * @beta Do not use in production.
    */
-  __unstable_disableFocusRing?: boolean
-  border?: boolean
+  __unstable_disableRestoreFocusOnClose?: boolean;
   /**
-   * @beta
+   * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
-  clearButton?: boolean | TextInputClearButtonProps
-  customValidity?: string
-  fontSize?: number | number[]
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
+  boundaryElement?: HTMLElement;
+  button: React.JSX.Element;
+  id: string;
+  menu?: React.JSX.Element;
+  onClose?: () => void;
+  onOpen?: () => void;
   /**
-   * @beta
+   * @deprecated Use `popover={{placement: 'top'}}` instead.
+   */
+  placement?: Placement;
+  popover?: Omit<PopoverProps, 'content' | 'open'>;
+  /**
+   * @deprecated Use `popover={{scheme: 'dark'}}` instead.
+   */
+  popoverScheme?: ThemeColorSchemeKey$1;
+  /**
+   * @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.
    */
-  onClear?: () => void
-  padding?: number | number[]
-  prefix?: React.ReactNode
-  radius?: Radius | Radius[]
-  space?: 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: react232.ForwardRefExoticComponent<MenuButtonProps & react232.RefAttributes<HTMLButtonElement | null>>;
 /**
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare interface TextProps {
-  accent?: boolean
-  align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  /** 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<BoxProps, 'children'> {
+  animated?: boolean;
+  delay?: number;
 }
-
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const TextSkeleton: ForwardRefExoticComponent<
-  Omit<
-    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
->
-
+declare const Skeleton: react232.ForwardRefExoticComponent<Omit<SkeletonProps & react232.HTMLProps<HTMLDivElement>, "ref"> & react232.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.
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare type ThemeFont = ThemeFont_2
-
+declare const TextSkeleton: react232.ForwardRefExoticComponent<Omit<TextSkeletonProps & Omit<react232.HTMLProps<HTMLDivElement>, "as" | "height" | "size" | "children">, "ref"> & react232.RefAttributes<HTMLDivElement>>;
 /**
- * @public
- * @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare type ThemeFontKey = ThemeFontKey_2
-
+declare const LabelSkeleton: react232.ForwardRefExoticComponent<Omit<LabelSkeletonProps & Omit<react232.HTMLProps<HTMLDivElement>, "as" | "height" | "size" | "children">, "ref"> & react232.RefAttributes<HTMLDivElement>>;
 /**
- * @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 HeadingSkeleton: react232.ForwardRefExoticComponent<Omit<HeadingSkeletonProps & Omit<react232.HTMLProps<HTMLDivElement>, "as" | "height" | "size" | "children">, "ref"> & react232.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 CodeSkeleton: react232.ForwardRefExoticComponent<Omit<CodeSkeletonProps & Omit<react232.HTMLProps<HTMLDivElement>, "as" | "height" | "size" | "children">, "ref"> & react232.RefAttributes<HTMLDivElement>>;
 /**
  * @public
- * @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.
  */
-export declare type ThemeFontWeight = ThemeFontWeight_2
-
+interface TabPanelProps extends BoxProps {
+  /**
+   * The `id` of the correlating `Tab` component.
+   */
+  'aria-labelledby': string;
+  'id': string;
+}
 /**
  * @public
- * @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.
  */
-export declare type ThemeFontWeightKey = ThemeFontWeightKey_2
-
-export {ThemeInput}
-
+declare const TabPanel: react232.ForwardRefExoticComponent<Omit<TabPanelProps & Omit<react232.HTMLProps<HTMLDivElement>, "as" | "role" | "id" | "aria-labelledby">, "ref"> & react232.RefAttributes<HTMLDivElement>>;
 /**
  * @public
- * @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.
  */
-export declare type ThemeLayer = ThemeLayer_2
-
+interface ToastProps {
+  closable?: boolean;
+  description?: React.ReactNode;
+  onClose: () => void;
+  radius?: number | number[];
+  title?: React.ReactNode;
+  status?: 'error' | 'warning' | 'success' | 'info';
+  duration?: number;
+  updatedAt?: number;
+}
 /**
- * @internal
+ * The `Toast` component gives feedback to users when an action has taken place.
+ *
+ * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ *
+ * @public
  */
-export declare interface ThemeProps {
-  theme: Theme_2
+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
  */
-export declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element
-
-export declare namespace ThemeProvider {
-  var displayName: string
+interface ToastLayerProps {
+  children: React.ReactNode;
+  padding?: number | number[];
+  paddingX?: number | number[];
+  paddingY?: number | number[];
+  gap?: number | number[];
 }
-
 /**
  * @public
  */
-export declare interface ThemeProviderProps {
-  children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey_2
-  theme?: RootTheme_2
-  tone?: ThemeColorCardToneKey
+interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
+  children?: React.ReactNode;
+  zOffset?: number | number[];
 }
-
 /**
  * @public
- * @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.
  */
-export declare type ThemeShadow = ThemeShadow_2
-
+declare function ToastProvider(props: ToastProviderProps): React.JSX.Element;
+declare namespace ToastProvider {
+  var displayName: string;
+}
 /**
- * The `Toast` component gives feedback to users when an action has taken place.
- *
- * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
- *
  * @public
  */
-export declare function Toast(
-  props: ToastProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      | 'as'
-      | 'height'
-      | 'ref'
-      | 'title'
-      | 'onAnimationStart'
-      | 'onDragStart'
-      | 'onDragEnd'
-      | 'onDrag'
-    >,
-): React.JSX.Element
-
-export declare namespace Toast {
-  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 ToastContextValue {
-  version: 0.0
+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
+  push: (params: ToastParams) => string;
 }
-
 /**
  * @public
  */
-declare interface ToastLayerProps {
-  children: React.ReactNode
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
-  gap?: number | number[]
-}
-
+declare function useToast(): ToastContextValue;
 /**
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare interface ToastParams {
-  closable?: boolean
-  description?: React.ReactNode
-  duration?: number
-  id?: string
-  onClose?: () => void
-  title?: React.ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
+interface TreeProps {
+  space?: number | number[];
 }
-
 /**
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-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 const Tree: react232.ForwardRefExoticComponent<TreeProps & Omit<react232.HTMLProps<HTMLDivElement>, "ref" | "as" | "height" | "role" | "wrap" | "align"> & react232.RefAttributes<HTMLDivElement>>;
 /**
- * @public
+ * @beta
  */
-export declare function ToastProvider(props: ToastProviderProps): React.JSX.Element
-
-export declare namespace ToastProvider {
-  var displayName: string
+interface TreeItemProps {
+  expanded?: boolean;
+  fontSize?: number | number[];
+  icon?: React.ElementType;
+  /**
+   * Allows passing a custom element type to the link component
+   */
+  linkAs?: BoxProps['as'];
+  padding?: number | number[];
+  space?: number | number[];
+  text?: React.ReactNode;
+  weight?: ThemeFontWeightKey$1;
 }
-
 /**
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
-  children?: React.ReactNode
-  zOffset?: number | number[]
+declare function TreeItem(props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>): React.JSX.Element;
+declare namespace TreeItem {
+  var displayName: string;
 }
-
-/**
- * Tooltips display information when hovering, focusing or tapping.
- *
- * @public
- */
-export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'children' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
-
 /**
  * @beta
  */
-export declare const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null>
-
+interface TreeState {
+  [key: string]: {
+    element: HTMLElement;
+    expanded: boolean;
+  } | undefined;
+}
 /**
  * @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
+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;
+  space: number | number[];
+  state: TreeState;
 }
-
 /**
- * @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
-}
-
+ * @beta
+ */
+declare function useTree(): TreeContextValue;
 /**
- * @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
-}
-
+ * @internal
+ */
+declare function _raf(fn: () => void): () => void;
 /**
- * @public
+ * @internal
  */
-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
-  /**
-   * Whether the tooltip should animate in and out.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
-}
-
+declare function _raf2(fn: () => void): () => void;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @internal
  */
-export declare const Tree: ForwardRefExoticComponent<
-  TreeProps &
-    Omit<HTMLProps<HTMLDivElement>, 'height' | 'wrap' | 'ref' | 'role' | 'as' | 'align'> &
-    RefAttributes<HTMLDivElement>
->
-
+declare function _hasFocus(element: HTMLElement): boolean;
 /**
- * @beta
+ * @internal
  */
-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
-  space: number | number[]
-  state: TreeState
-}
-
+declare function isFocusable(element: HTMLElement): boolean;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @internal
  */
-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 attemptFocus(element: HTMLElement): boolean;
 /**
- * @beta
+ * @internal
  */
-export declare interface TreeItemProps {
-  expanded?: boolean
-  fontSize?: number | number[]
-  icon?: React.ElementType
-  /**
-   * Allows passing a custom element type to the link component
-   */
-  linkAs?: BoxProps['as']
-  padding?: number | number[]
-  space?: number | number[]
-  text?: React.ReactNode
-  weight?: ThemeFontWeightKey_2
-}
-
+declare function focusFirstDescendant(element: HTMLElement): boolean;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @internal
  */
-export declare interface TreeProps {
-  space?: number | number[]
-}
-
+declare function focusLastDescendant(element: HTMLElement): boolean;
 /**
- * @beta
+ * @internal
  */
-export declare interface TreeState {
-  [key: string]:
-    | {
-        element: HTMLElement
-        expanded: boolean
-      }
-    | undefined
-}
-
+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:
@@ -2778,53 +548,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
@@ -2835,10 +627,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.
  *
@@ -2846,16 +635,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
  *
@@ -2863,35 +643,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
  *
@@ -2903,70 +667,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> &
-    StackProps &
-    Omit<HTMLProps<HTMLDivElement>, 'children' | 'ref' | 'onChange' | 'as'> &
-    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, Autocomplete, AutocompleteInputChangeMsg, AutocompleteInputFoocusMsg, AutocompleteMsg, AutocompleteOpenButtonProps, AutocompleteProps, AutocompleteRootBlurMsg, AutocompleteRootClearMsg, AutocompleteRootEscapeMsg, AutocompleteRootOpenMsg, AutocompleteRootSetActiveValueMsg, AutocompleteRootSetListFocusedMsg, AutocompleteState, AutocompleteValueChangeMsg, Avatar, AvatarCounter, AvatarCounterProps, AvatarPosition, AvatarProps, AvatarRootStyleProps, AvatarSize, AvatarStack, AvatarStackProps, AvatarStatus, Badge, BadgeMode, BadgeProps, BadgeTone, BaseAutocompleteOption, BaseTheme, BoundaryElementContextValue, BoundaryElementProvider, BoundaryElementProviderProps, Box, BoxDisplay, BoxHeight, BoxOverflow, BoxProps, BoxShadow, BoxSizing, Breadcrumbs, BreadcrumbsProps, Button, ButtonMode, ButtonProps, ButtonTextAlign, ButtonTone, ButtonWidth, Card, CardProps, CardStyleProps, CardTone, Checkbox, CheckboxProps, ClickOutsideElements, ClickOutsideEventElements, ClickOutsideEventListener, ClickOutsideListener, Code, CodeProps, CodeSkeleton, CodeSkeletonProps, ConditionalWrapper, Container, ContainerProps, Delay, Dialog, DialogContext, DialogContextValue, DialogPosition, DialogProps, DialogProvider, DialogProviderProps, ElementQuery, ElementRectValue, ElementSize, ErrorBoundary, ErrorBoundaryProps, ErrorBoundaryState, Flex, FlexAlign, FlexDirection, FlexJustify, FlexProps, FlexValue, FlexWrap, FontWeightStyleProps, Grid, GridAutoCols, GridAutoFlow, GridAutoRows, GridItemColumn, GridItemColumnEnd, GridItemColumnStart, GridItemRow, GridItemRowEnd, GridItemRowStart, GridProps, HSL, Heading, HeadingProps, HeadingSkeleton, HeadingSkeletonProps, Hotkeys, HotkeysProps, Inline, InlineProps, KBD, KBDProps, Label, LabelProps, LabelSkeleton, LabelSkeletonProps, Layer, LayerContextValue, LayerProps, LayerProvider, LayerProviderProps, MediaQueryProps, Menu, MenuButton, MenuButtonProps, MenuDivider, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuProps, PartialThemeColorBuilderOpts, Placement, Popover, PopoverMargins, PopoverProps, PopoverUpdateCallback, PopoverWidth, Portal, PortalContextValue, PortalProps, PortalProvider, PortalProviderProps, 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, StackProps, Styles, Switch, SwitchProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Text, TextAlign, TextArea, TextAreaProps, TextInput, TextInputClearButtonProps, TextInputProps, TextInputType, TextProps, TextSkeleton, TextSkeletonProps, Theme, ThemeAvatar, ThemeColor, ThemeColorBase, ThemeColorBuilderOpts, ThemeColorButton, ThemeColorButtonModeKey, ThemeColorButtonState, ThemeColorButtonStates, ThemeColorButtonTones, ThemeColorCard, ThemeColorCardState, ThemeColorGenericState, ThemeColorInput, ThemeColorInputState, ThemeColorInputStates, ThemeColorMuted, ThemeColorMutedTone, ThemeColorName, ThemeColorProvider, ThemeColorProviderProps, ThemeColorScheme, ThemeColorSchemeKey, ThemeColorSchemes, ThemeColorSelectable, ThemeColorSelectableState, ThemeColorSelectableStates, ThemeColorSolid, ThemeColorSolidTone, ThemeColorSpot, ThemeColorSpotKey, ThemeColorSyntax, ThemeColorToneKey, ThemeContextValue, ThemeFont, ThemeFontKey, ThemeFontSize, ThemeFontWeight, ThemeFontWeightKey, ThemeFonts, 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