npm - @sanity/ui - Versions diffs - 4.0.0-beta.2 → 4.0.0-beta.3 - Mend

@sanity/ui 4.0.0-beta.2 → 4.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/dist/index.d.ts CHANGED Viewed

@@ -1,2190 +1,1617 @@
-import type {AvatarColor} from '@sanity/ui-tokens'
-import type {AvatarSize} from '@sanity/ui-tokens'
-import {BadgeStyleProps} from '@sanity/ui-css'
-import {BoxStyleProps} from '@sanity/ui-css'
-import {Breakpoint} from '@sanity/ui-css'
-import {BREAKPOINTS} from '@sanity/ui-css'
-import {ButtonStyleProps} from '@sanity/ui-css'
-import {CardStyleProps} from '@sanity/ui-css'
-import type {CardTone} from '@sanity/ui-tokens'
-import {CodeStyleProps} from '@sanity/ui-css'
-import type {ColorScheme} from '@sanity/ui-tokens'
-import {Component} from 'react'
-import type {ComponentType as ComponentType_2} from 'react'
-import {ContainerStyleProps} from '@sanity/ui-css'
-import type {ContainerWidth} from '@sanity/ui-tokens'
-import type {Context} from 'react'
-import type {ElementTone} from '@sanity/ui-tokens'
-import {ElementType as ElementType_2} from 'react'
-import {ErrorInfo} from 'react'
-import {FlexStyleProps} from '@sanity/ui-css'
-import type {FontCodeSize} from '@sanity/ui-tokens'
-import type {FontHeadingSize} from '@sanity/ui-tokens'
-import type {FontLabelSize} from '@sanity/ui-tokens'
-import type {FontTextSize} from '@sanity/ui-tokens'
-import type {FontWeight} from '@sanity/ui-tokens'
-import {ForwardedRef} from 'react'
-import {GapStyleProps} from '@sanity/ui-css'
-import {GridStyleProps} from '@sanity/ui-css'
-import {HeadingStyleProps} from '@sanity/ui-css'
-import {HTMLMotionProps} from 'motion/react'
-import {InlineStyleProps} from '@sanity/ui-css'
-import {InputStyleProps} from '@sanity/ui-css'
-import {KBDStyleProps} from '@sanity/ui-css'
-import {LabelStyleProps} from '@sanity/ui-css'
-import {LazyExoticComponent} from 'react'
-import {MaxWidth} from '@sanity/ui-css'
-import {MouseEventHandler} from 'react'
-import {PaddingStyleProps} from '@sanity/ui-css'
-import {PropsWithChildren} from 'react'
-import type {Radius} from '@sanity/ui-tokens'
-import {RadiusStyleProps} from '@sanity/ui-css'
-import {ReactElement} from 'react'
-import {ReactNode} from 'react'
-import {ReactPortal} from 'react'
-import {Ref} from 'react'
-import {ResponsiveProp} from '@sanity/ui-css'
-import {ResponsivePropArray} from '@sanity/ui-css'
-import {RootStyleProps} from '@sanity/ui-css'
-import {SelectableStyleProps} from '@sanity/ui-css'
-import {SelectStyleProps} from '@sanity/ui-css'
-import type {Shadow} from '@sanity/ui-tokens'
-import {ShadowStyleProps} from '@sanity/ui-css'
-import {SkeletonStyleProps} from '@sanity/ui-css'
-import type {Space} from '@sanity/ui-tokens'
-import {StackStyleProps} from '@sanity/ui-css'
-import type {Strategy} from '@floating-ui/react-dom'
-import {TextAreaStyleProps} from '@sanity/ui-css'
-import {TextOverflowStyleProps} from '@sanity/ui-css'
-import {TextStyleProps} from '@sanity/ui-css'
-import {vars} from '@sanity/ui-css'
+import { BREAKPOINTS, BadgeStyleProps, BoxStyleProps, Breakpoint, ButtonStyleProps, CardStyleProps, CodeStyleProps, ContainerStyleProps, FlexStyleProps, GapStyleProps, GridStyleProps, HeadingStyleProps, InlineStyleProps, InputStyleProps, KBDStyleProps, LabelStyleProps, MaxWidth, PaddingStyleProps, RadiusStyleProps, ResponsiveProp, ResponsiveProp as ResponsiveProp$1, ResponsivePropArray, RootStyleProps, SelectStyleProps, SelectableStyleProps, ShadowStyleProps, SkeletonStyleProps, StackStyleProps, TextAreaStyleProps, TextOverflowStyleProps, TextStyleProps, vars } from "@sanity/ui-css";
+import { AvatarColor, AvatarSize, CardTone, ColorScheme, ContainerWidth, ElementTone, FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize, FontWeight, Radius, Shadow, Space } from "@sanity/ui-tokens";
+import * as _$_sanity_color0 from "@sanity/color";
+import { COLOR_HUES as HUES, COLOR_TINTS as TINTS } from "@sanity/color";
+import * as _$react from "react";
+import { Component, ComponentType as ComponentType$1, Context, ElementType as ElementType$1, ErrorInfo, ForwardedRef, MouseEventHandler, PropsWithChildren, ReactElement, ReactNode, ReactPortal, Ref } from "react";
+import { Strategy } from "@floating-ui/react-dom";
+import { HTMLMotionProps } from "motion/react";
+export * from "@sanity/ui-tokens";
+/** @internal */
+declare const _CODE_TOKEN_KEYS: readonly ["atrule", "attrName", "attrValue", "attribute", "boolean", "builtin", "cdata", "char", "class", "className", "comment", "constant", "deleted", "doctype", "entity", "function", "hexcode", "id", "important", "inserted", "keyword", "number", "operator", "prolog", "property", "pseudoClass", "pseudoElement", "punctuation", "regex", "selector", "string", "symbol", "tag", "unit", "url", "variable"];
 /**
- * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
+ * Available avatar color mode values for the `_avatarColor` collection.
  *
- * @public
- */
-export declare type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
-/**
- * @internal
- */
-export declare function attemptFocus(element: HTMLElement): boolean
-/**
- * The Autocomplete component is typically used for search components.
- * It consists of a text input for writing a query, and properties for rendering suggestions.
+ * @remarks
+ * Avatar colors map to color hues: gray, red, orange, yellow, green,
+ * cyan, blue, purple, magenta.
  *
  * @public
  */
-export declare function Autocomplete<
-  E extends AutocompleteElementType = typeof DEFAULT_AUTOCOMPLETE_ELEMENT,
-  Option extends BaseAutocompleteOption = BaseAutocompleteOption,
->(props: AutocompleteProps<E, Option>): React.JSX.Element
+declare const AVATAR_COLORS: _$_sanity_color0.ColorHueKey[];
 /** @public */
-export declare type AutocompleteElementType = 'input' | ComponentType
-/**
- * @internal
- */
-export declare interface AutocompleteInputChangeMsg {
-  type: 'input/change'
-  query: string | null
-}
-/**
- * @internal
- */
-export declare interface AutocompleteInputFoocusMsg {
-  type: 'input/focus'
-}
-/**
- * @internal
- */
-export declare type AutocompleteMsg =
-  | AutocompleteRootBlurMsg
-  | AutocompleteRootClearMsg
-  | AutocompleteRootEscapeMsg
-  | AutocompleteRootOpenMsg
-  | AutocompleteRootSetActiveValueMsg
-  | AutocompleteRootSetListFocusedMsg
-  | AutocompleteInputChangeMsg
-  | AutocompleteInputFoocusMsg
-  | AutocompleteValueChangeMsg
-/** @public */
-export declare type AutocompleteOpenButtonProps = Omit<ButtonProps<'button'>, 'as'>
-/** @public */
-export declare type AutocompleteOwnProps<
-  Option extends BaseAutocompleteOption = BaseAutocompleteOption,
-> = TextInputOwnProps & {
-  border?: boolean
-  customValidity?: string
-  filterOption?: (query: string, option: Option) => boolean
-  icon?: ElementType_2 | ReactNode
-  /** @beta */
-  listBox?: BoxOwnProps
-  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?: ResponsiveProp<Space>
-  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
-  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: ForwardedRef<HTMLDivElement>,
-  ) => ReactNode
-  renderValue?: (value: string, option?: Option) => string
-  suffix?: ReactNode
-  value?: string
-}
+declare const AVATAR_SIZE: readonly [0, 1, 2, 3];
+/** @beta */
+declare const BG_PATTERNS: readonly ["checkered", "halftone", "grid"];
 /** @public */
-export declare type AutocompleteProps<
-  E extends AutocompleteElementType = AutocompleteElementType,
-  Option extends BaseAutocompleteOption = BaseAutocompleteOption,
-> = Props<AutocompleteOwnProps<Option>, E>
-/**
- * @internal
- */
-export declare interface AutocompleteRootBlurMsg {
-  type: 'root/blur'
-}
-/**
- * @internal
- */
-export declare interface AutocompleteRootClearMsg {
-  type: 'root/clear'
-}
-/**
- * @internal
- */
-export declare interface AutocompleteRootEscapeMsg {
-  type: 'root/escape'
-}
-/**
- * @internal
- */
-export declare interface AutocompleteRootOpenMsg {
-  type: 'root/open'
-  query: string | null
-}
-/**
- * @internal
- */
-export declare interface AutocompleteRootSetActiveValueMsg {
-  type: 'root/setActiveValue'
-  value: string
-  listFocused?: boolean
-}
+declare const BORDER_STYLE: readonly ["default", "muted", "none"];
+/** @public */
+declare const BORDER_WIDTH: readonly [0, 1, 2];
+/** @public */
+declare const BUTTON_MODES: readonly ["default", "ghost", "bleed"];
 /**
- * @internal
+ * Available card tone mode values for the `_cardTone` collection.
+ *
+ * @public
  */
-export declare interface AutocompleteRootSetListFocusedMsg {
-  type: 'root/setListFocused'
-  listFocused: boolean
-}
+declare const CARD_TONES: readonly ["default", "neutral", "primary", "suggest", "positive", "caution", "critical", "transparent"];
 /**
- * @internal
+ * Available color scheme mode values for the `_colorScheme` collection.
+ *
+ * @public
  */
-export declare interface AutocompleteState {
-  activeValue: string | null
-  focused: boolean
-  listFocused: boolean
-  query: string | null
-  value: string | null
-}
+declare const COLOR_SCHEMES: readonly ["light", "dark"];
 /**
- * @internal
+ * Available color variant types.
+ *
+ * @public
  */
-export declare interface AutocompleteValueChangeMsg {
-  type: 'value/change'
-  value: string | null
-}
+declare const COLOR_VARIANTS: readonly ["tinted", "solid"];
+/** @public */
+declare const CONTAINER_SCALE: readonly [0, 1, 2, 3, 4, 5];
+/** @public */
+declare const CONTAINER: [...typeof CONTAINER_SCALE, 'auto'];
 /**
- * Avatars are used to represent people and other agents (e.g. bots).
+ * Available element tone mode values for the `_elementTone` collection.
  *
  * @public
  */
-export declare function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(
-  props: AvatarProps<E>,
-): React.JSX.Element
+declare const ELEMENT_TONES: readonly ["default", "neutral", "primary", "suggest", "positive", "caution", "critical"];
 /** @public */
-export declare function AvatarCounter<
-  E extends AvatarCounterElementType = typeof DEFAULT_AVATAR_COUNTER_ELEMENT,
->(props: AvatarCounterProps<E>): React.JSX.Element
+declare const FONT_CODE_SIZE: readonly [0, 1, 2, 3, 4];
 /** @public */
-export declare type AvatarCounterElementType = 'button' | 'div' | 'span' | ComponentType
+declare const FONT_HEADING_SIZE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 /** @public */
-export declare interface AvatarCounterOwnProps {
-  count: number
-  size?: ResponsiveProp<AvatarSize>
-}
+declare const FONT_LABEL_SIZE: readonly [0, 1, 2, 3, 4, 5];
 /** @public */
-export declare type AvatarCounterProps<
-  E extends AvatarCounterElementType = AvatarCounterElementType,
-> = Props<AvatarCounterOwnProps, E>
+declare const FONT_TEXT_SIZE: readonly [0, 1, 2, 3, 4];
 /** @public */
-export declare type AvatarElementType = 'a' | 'button' | 'div' | 'span' | ComponentType
+declare const FONT_WEIGHT: readonly ["regular", "medium", "semibold", "bold"];
 /** @public */
-export declare interface AvatarOwnProps {
-  /** @beta */
-  __unstable_hideInnerStroke?: boolean
-  animateArrowFrom?: AvatarPosition
-  arrowPosition?: AvatarPosition
-  color?: AvatarColor
-  initials?: string
-  onImageLoadError?: (event: Error) => void
-  size?: ResponsiveProp<AvatarSize>
-  src?: string
-  title?: string
-}
-/** @public */
-export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
-/** @public */
-export declare type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props<
-  AvatarOwnProps,
-  E
->
-/** @public */
-export declare function AvatarStack<
-  E extends AvatarStackElementType = typeof DEFAULT_AVATAR_STACK_ELEMENT,
->(props: AvatarStackProps<E>): React.JSX.Element
-/** @public */
-export declare type AvatarStackChild = ReactElement<AvatarProps<'div'>> | null | undefined | false
-/** @public */
-export declare type AvatarStackElementType = 'div' | 'span' | ComponentType
-/** @public */
-export declare type AvatarStackOwnProps = Omit<
-  BoxOwnProps,
-  'align' | 'alignItems' | 'display' | 'justify' | 'justifyContent'
-> & {
-  children: AvatarStackChild | AvatarStackChild[]
-  maxLength?: number
-  size?: ResponsiveProp<AvatarSize>
-}
+declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, "full"];
+/** @public */
+declare const SHADOW: readonly [0, 1, 2, 3, 4, 5];
 /** @public */
-export declare type AvatarStackProps<E extends AvatarStackElementType = AvatarStackElementType> =
-  Props<AvatarStackOwnProps, E>
+declare const SPACE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 /**
- * Badges are used to tag resources.
+ * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
  *
  * @public
  */
-export declare function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(
-  props: BadgeProps<E>,
-): React.JSX.Element
+type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U;
 /** @public */
-export declare type BadgeElementType = 'div' | 'span' | ComponentType
+type EmptyProps = {};
 /** @public */
-export declare interface BadgeOwnProps extends BadgeStyleProps {
-  fontSize?: ResponsiveProp<FontTextSize>
-}
-/** @public */
-export declare type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<
-  BadgeOwnProps,
-  E
->
-/** @public */
-export declare interface BaseAutocompleteOption {
-  value: string
-}
+type TagType = keyof React.JSX.IntrinsicElements;
 /** @public */
-export declare type BoundaryElementContextValue = HTMLElement | null
+type ComponentType<P = any> = React.FunctionComponent<P> | React.ComponentClass<P> | React.ExoticComponent<P>;
 /** @public */
-export declare function BoundaryElementProvider(
-  props: BoundaryElementProviderProps,
-): React.JSX.Element
+type ElementType<P> = TagType | ComponentType<P>;
 /** @public */
-export declare interface BoundaryElementProviderProps {
-  children: ReactNode
-  element: HTMLElement | null
-}
+type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>, P & {
+  as?: E;
+}>;
 /**
- * The `Box` component is a basic layout wrapper component which provides utility properties
- * for flex, margins and padding.
+ * Placement of floating UI elements.
  *
  * @public
  */
-export declare function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
-  props: BoxProps<E>,
-): React.JSX.Element
-/** @public */
-export declare type BoxElementType =
-  | 'a'
-  | 'article'
-  | 'aside'
-  | 'blockquote'
-  | 'body'
-  | 'button'
-  | 'details'
-  | 'div'
-  | 'header'
-  | 'fieldset'
-  | 'figure'
-  | 'figcaption'
-  | 'footer'
-  | 'form'
-  | 'html'
-  | 'iframe'
-  | 'kbd'
-  | 'label'
-  | 'legend'
-  | 'li'
-  | 'main'
-  | 'nav'
-  | 'ol'
-  | 'pre'
-  | 'section'
-  | 'span'
-  | 'summary'
-  | 'table'
-  | 'tbody'
-  | 'td'
-  | 'tfoot'
-  | 'th'
-  | 'thead'
-  | 'tr'
-  | 'ul'
-  | ComponentType
-/** @public */
-export declare type BoxOwnProps = BoxStyleProps
-/** @public */
-export declare type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>
-/** @beta */
-export declare function Breadcrumbs<
-  E extends BreadcrumbsElementType = typeof DEFAULT_BREADCRUMBS_ELEMENT,
->(props: BreadcrumbsProps<E>): React.JSX.Element
-/** @beta */
-export declare type BreadcrumbsElementType = 'div' | 'nav' | ComponentType
-/** @beta */
-export declare type BreadcrumbsOwnProps = GapStyleProps & {
-  expandButton?: Omit<ButtonProps, 'as' | 'onClick' | 'selected'>
-  maxLength?: number
-  popover?: PopoverProps
-  separator?: ReactNode
-}
-/** @beta */
-export declare type BreadcrumbsProps<E extends BreadcrumbsElementType = BreadcrumbsElementType> =
-  Props<BreadcrumbsOwnProps, E>
-export {BREAKPOINTS}
-/** @public */
-export declare function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
-  props: ButtonProps<E>,
-): React.JSX.Element
-/** @public */
-export declare type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
-/** @public */
-export declare interface ButtonOwnProps extends ButtonStyleProps {
-  'data-ui'?: string
-  'fontSize'?: ResponsiveProp<FontTextSize>
-  'icon'?: React.ElementType | React.ReactNode
-  'iconRight'?: React.ElementType | React.ReactNode
-  /** @beta Do not use in production, as this might change.*/
-  'loading'?: boolean
-  'muted'?: boolean
-  'selected'?: boolean
-  'textAlign'?: TextOwnProps['align']
-  'text'?: React.ReactNode
-  'textOverflow'?: TextOwnProps['textOverflow']
-  'textWeight'?: TextOwnProps['weight']
-  'tooltip'?: Omit<TooltipProps<'div'>, 'as' | 'children'>
-}
+type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+/** @public */
+type Delay = number | Partial<{
+  open: number;
+  close: number;
+}>;
 /** @public */
-export declare type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<
-  ButtonOwnProps,
-  E
->
+declare const DEFAULT_BOX_ELEMENT = "div";
 /** @public */
-export declare type ButtonTextAlign = 'left' | 'right' | 'center'
+type BoxOwnProps = BoxStyleProps;
+/** @public */
+type BoxElementType = 'a' | 'article' | 'aside' | 'blockquote' | 'body' | 'button' | 'details' | 'div' | 'header' | 'fieldset' | 'figure' | 'figcaption' | 'footer' | 'form' | 'html' | 'iframe' | 'kbd' | 'label' | 'legend' | 'li' | 'main' | 'nav' | 'ol' | 'pre' | 'section' | 'span' | 'summary' | 'table' | 'tbody' | 'td' | 'tfoot' | 'th' | 'thead' | 'tr' | 'ul' | ComponentType;
+/** @public */
+type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>;
 /**
- * The `Card` component acts much like a `Box`, but with a background and foreground color.
- * Components within a `Card` inherit its colors.
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
  *
  * @public
  */
-export declare function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
-  props: CardProps<E>,
-): React.JSX.Element
-/** @internal */
-export declare type _CardCompatProviderComponent = ComponentType_2<{
-  children?: ReactNode
-  tone: CardTone | 'inherit'
-  scheme: ColorScheme
-}>
-/** @public */
-export declare interface CardContextValue {
-  tone: CardTone
-  scheme: ColorScheme
-}
+declare function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props: BoxProps<E>): React.JSX.Element;
 /** @public */
-export declare type CardElementType = BoxElementType
-/** @internal */
-export declare interface _CardInternalContextValue {
-  CompatProvider?: _CardCompatProviderComponent
-  root: boolean
-}
+declare const DEFAULT_CARD_ELEMENT = "div";
 /** @public */
-export declare interface CardOwnProps extends Omit<CardStyleProps, 'tone'> {
+interface CardOwnProps extends Omit<CardStyleProps, 'tone'> {
   /**
    * Do not use in production.
    * @beta
    * @deprecated Use `__unstable_pattern` instead.
    */
-  __unstable_checkered?: boolean
+  __unstable_checkered?: boolean;
   /**
    * Do not use in production.
    * @beta
    */
-  __unstable_focusRing?: boolean
-  disabled?: boolean
-  pressed?: boolean
-  selected?: boolean
-  target?: string
-  tone?: CardTone | 'inherit'
+  __unstable_focusRing?: boolean;
+  disabled?: boolean;
+  pressed?: boolean;
+  selected?: boolean;
+  target?: string;
+  tone?: CardTone | 'inherit';
 }
 /** @public */
-export declare type CardProps<E extends CardElementType = CardElementType> = Props<CardOwnProps, E>
+type CardElementType = BoxElementType;
 /** @public */
-export declare function CardProvider(props: {
-  children?: ReactNode
-  tone: CardTone
-  scheme: ColorScheme
-}): React.JSX.Element
+type CardProps<E extends CardElementType = CardElementType> = Props<CardOwnProps, E>;
 /**
- * Checkboxes allow the user to select one or more items from a set.
+ * 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 function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(
-  props: CheckboxProps<E>,
-): React.JSX.Element
+declare function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(props: CardProps<E>): React.JSX.Element;
 /** @public */
-export declare type CheckboxElementType = 'input' | ComponentType
+declare const DEFAULT_LAYER_ELEMENT = "div";
 /** @public */
-export declare type CheckboxOwnProps = {
-  indeterminate?: boolean
-  customValidity?: string
+interface LayerOwnProps extends CardOwnProps {
+  /** 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?: ResponsiveProp$1<number>;
 }
-/** @public */
-export declare type CheckboxProps<E extends CheckboxElementType = CheckboxElementType> = Props<
-  CheckboxOwnProps,
-  E
->
-/** @public */
-export declare type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
 /** @public */
-export declare type ClickOutsideEventListener = (event: MouseEvent) => void
+type LayerElementType = CardElementType;
 /** @public */
-export declare function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
-  props: CodeProps<E>,
-): React.JSX.Element
+type LayerProps<E extends LayerElementType = LayerElementType> = Props<LayerOwnProps, E>;
 /** @public */
-export declare type CodeElementType = 'div' | 'pre' | ComponentType
-/** @public */
-export declare type CodeOwnProps = CodeStyleProps & {
-  /** Define the language to use for syntax highlighting. */
-  language?: string
+declare function Layer<E extends LayerElementType = typeof DEFAULT_LAYER_ELEMENT>(props: LayerProps<E>): React.JSX.Element;
+/** @internal */
+interface PopoverLayerOwnProps extends LayerOwnProps {
+  /**
+   * Whether the popover should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean;
+  children?: React.ReactNode;
+  originX?: number;
+  originY?: number;
+  referenceWidth?: number;
+  strategy?: Strategy;
+  x?: number;
+  y?: number;
 }
 /** @public */
-export declare type CodeProps<E extends CodeElementType = CodeElementType> = Props<CodeOwnProps, E>
+type PopoverLayerProps = Assign<HTMLMotionProps<'div'>, PopoverLayerOwnProps>;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function CodeSkeleton<
-  E extends CodeSkeletonElementType = typeof DEFAULT_CODE_SKELETON_ELEMENT,
->(props: CodeSkeletonProps<E>): React.JSX.Element
-/** @beta */
-export declare type CodeSkeletonElementType = SkeletonElementType
+type PopoverMargins = [number, number, number, number];
 /** @beta */
-export declare type CodeSkeletonOwnProps = SkeletonOwnProps & {
-  size?: ResponsiveProp<FontCodeSize>
-}
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare type CodeSkeletonProps<E extends CodeSkeletonElementType = CodeSkeletonElementType> =
-  Props<CodeSkeletonOwnProps, E>
+type PopoverUpdateCallback = () => void;
 /** @public */
-export declare type ComponentType<P = any> =
-  | React.FunctionComponent<P>
-  | React.ComponentClass<P>
-  | React.ExoticComponent<P>
-/**
- * The `Container` component wraps content layout in a defined set of widths.
- *
- * @public
- */
-export declare function Container<
-  E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT,
->(props: ContainerProps<E>): React.JSX.Element
+type PopoverWidth = Exclude<ContainerWidth, 'auto'>;
 /** @public */
-export declare type ContainerElementType = BoxElementType
+type PopoverOwnProps = Omit<PopoverLayerOwnProps, 'maxWidth'> & {
+  /** @beta */__unstable_distance?: number;
+  /**
+   * @beta
+   * @deprecated Will be removed in the next major version */
+  __unstable_margins?: PopoverMargins; /** @beta */
+  __unstable_shift?: number;
+  /**
+   * @deprecated Will be removed in the next major version
+   */
+  arrow?: boolean;
+  children?: ReactElement<{
+    ref: ForwardedRef<HTMLElement>;
+  }>;
+  /**
+   * 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?: 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;
+  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; /** @beta */
+  updateRef?: Ref<PopoverUpdateCallback | undefined>;
+  width?: ResponsiveProp$1<MaxWidth>;
+};
 /** @public */
-export declare type ContainerOwnProps = ContainerStyleProps
+type PopoverElementType = 'div';
 /** @public */
-export declare type ContainerProps<E extends ContainerElementType = ContainerElementType> = Props<
-  ContainerOwnProps,
-  E
->
+type PopoverProps = Assign<PopoverLayerProps, PopoverOwnProps>;
 /**
- * @internal
+ * The `Popover` component is used to display some content on top of another.
+ *
+ * @public
  */
-export declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean
-/** @public */
-export declare const DEFAULT_AUTOCOMPLETE_ELEMENT = 'input'
-/** @public */
-export declare const DEFAULT_AVATAR_COUNTER_ELEMENT = 'span'
-/** @public */
-export declare const DEFAULT_AVATAR_ELEMENT = 'span'
-/** @public */
-export declare const DEFAULT_AVATAR_STACK_ELEMENT = 'span'
-/** @public */
-export declare const DEFAULT_BADGE_ELEMENT = 'span'
-/** @public */
-export declare const DEFAULT_BOX_ELEMENT = 'div'
-/** @beta */
-export declare const DEFAULT_BREADCRUMBS_ELEMENT = 'nav'
-/** @public */
-export declare const DEFAULT_BUTTON_ELEMENT = 'button'
-/** @public */
-export declare const DEFAULT_CARD_ELEMENT = 'div'
-/** @public */
-export declare const DEFAULT_CHECKBOX_ELEMENT = 'input'
-/** @public */
-export declare const DEFAULT_CODE_ELEMENT = 'pre'
-/** @beta */
-export declare const DEFAULT_CODE_SKELETON_ELEMENT = 'div'
-/** @public */
-export declare const DEFAULT_CONTAINER_ELEMENT = 'div'
-/** @public */
-export declare const DEFAULT_DIALOG_ELEMENT = 'div'
-/** @beta */
-export declare const DEFAULT_ELEMENT_QUERY_ELEMENT = 'div'
-/** @public */
-export declare const DEFAULT_FLEX_ELEMENT = 'div'
-/** @public */
-export declare const DEFAULT_GRID_ELEMENT = 'div'
-/** @public */
-export declare const DEFAULT_HEADING_ELEMENT = 'div'
-/** @beta */
-export declare const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'
+declare function Popover(props: PopoverProps): React.JSX.Element;
 /** @public */
-export declare const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
+declare const DEFAULT_TEXT_ELEMENT = "div";
 /** @public */
-export declare const DEFAULT_INLINE_CODE_ELEMENT = 'code'
+type TextOwnProps = TextStyleProps & TextOverflowStyleProps;
 /** @public */
-export declare const DEFAULT_INLINE_ELEMENT = 'div'
+type TextElementType = 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'li' | 'p' | 'span' | 'summary' | 'time' | ComponentType;
 /** @public */
-export declare const DEFAULT_KBD_ELEMENT = 'kbd'
-/** @public */
-export declare const DEFAULT_LABEL_ELEMENT = 'div'
-/** @beta */
-export declare const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'
-/** @public */
-export declare const DEFAULT_LAYER_ELEMENT = 'div'
-/** @public */
-export declare const DEFAULT_MENU_DIVIDER_ELEMENT = 'hr'
-/** @public */
-export declare const DEFAULT_MENU_ELEMENT = 'div'
-/** @public */
-export declare const DEFAULT_MENU_GROUP_ELEMENT = 'button'
-/** @public */
-export declare const DEFAULT_MENU_ITEM_ELEMENT = 'button'
-/** @public */
-export declare const DEFAULT_RADIO_ELEMENT = 'input'
-/** @public */
-export declare const DEFAULT_ROOT_ELEMENT = 'html'
-/** @public */
-export declare const DEFAULT_SELECT_ELEMENT = 'select'
-/** @public */
-export declare const DEFAULT_SELECTABLE_ELEMENT = 'button'
-/** @beta */
-export declare const DEFAULT_SKELETON_ELEMENT = 'div'
+type TextProps<E extends TextElementType = TextElementType> = Props<TextOwnProps, E>;
+/**
+ * The `Text` component is an agile, themed typographic element.
+ *
+ * @public
+ */
+declare function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(props: TextProps<E>): React.JSX.Element;
 /** @public */
-export declare const DEFAULT_SPINNER_ELEMENT = 'div'
+declare const DEFAULT_TOOLTIP_ELEMENT = "div";
 /** @public */
-export declare const DEFAULT_SR_ONLY_ELEMENT = 'span'
+type TooltipOwnProps = LayerOwnProps & RadiusStyleProps & ShadowStyleProps & {
+  /**
+   * Whether the tooltip should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean; /** @deprecated Will be removed in the next major version */
+  arrow?: boolean;
+  boundaryElement?: HTMLElement | null;
+  children?: React.ReactElement<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+  content?: React.ReactNode;
+  /**
+   * 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;
+  disabled?: boolean;
+  fallbackPlacements?: Placement[];
+  hotkeys?: string[];
+  placement?: Placement; /** Whether or not to render the tooltip in a portal element. */
+  portal?: boolean | string;
+  scheme?: ColorScheme;
+  text?: React.ReactNode;
+  textSize?: ResponsiveProp$1<FontTextSize>;
+  tone?: CardTone;
+};
+/** @public */
+type TooltipElementType = 'div' | 'span' | ComponentType;
+/** @public */
+type TooltipProps<E extends TooltipElementType = TooltipElementType> = Props<TooltipOwnProps, E>;
+/**
+ * Tooltips display information when hovering, focusing or tapping.
+ *
+ * @public
+ */
+declare function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(props: TooltipProps<E>): React.JSX.Element;
 /** @public */
-export declare const DEFAULT_STACK_ELEMENT = 'div'
+declare const DEFAULT_BUTTON_ELEMENT = "button";
 /** @public */
-export declare const DEFAULT_SWITCH_ELEMENT = 'input'
+interface ButtonOwnProps extends ButtonStyleProps {
+  'data-ui'?: string;
+  'fontSize'?: ResponsiveProp$1<FontTextSize>;
+  'icon'?: React.ElementType | React.ReactNode;
+  'iconRight'?: React.ElementType | React.ReactNode;
+  /** @beta Do not use in production, as this might change.*/
+  'loading'?: boolean;
+  'muted'?: boolean;
+  'selected'?: boolean;
+  'textAlign'?: TextOwnProps['align'];
+  'text'?: React.ReactNode;
+  'textOverflow'?: TextOwnProps['textOverflow'];
+  'textWeight'?: TextOwnProps['weight'];
+  'tooltip'?: Omit<TooltipProps<'div'>, 'as' | 'children'>;
+}
 /** @public */
-export declare const DEFAULT_TAB_ELEMENT = 'button'
+type ButtonElementType = 'a' | 'button' | 'label' | ComponentType;
 /** @public */
-export declare const DEFAULT_TAB_LIST_ELEMENT = 'div'
+type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<ButtonOwnProps, E>;
 /** @public */
-export declare const DEFAULT_TAB_PANEL_ELEMENT = 'div'
+declare function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(props: ButtonProps<E>): React.JSX.Element;
 /** @public */
-export declare const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'
+declare const DEFAULT_TEXT_INPUT_ELEMENT = "input";
 /** @public */
-export declare const DEFAULT_TEXT_ELEMENT = 'div'
+type TextInputClearButtonProps = Omit<ButtonProps<'button'>, 'as' | 'onClick' | 'onMouseDown'>;
 /** @public */
-export declare const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
-/** @beta */
-export declare const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
-/** @internal */
-export declare const DEFAULT_TOAST_ELEMENT = 'li'
+type TextInputOwnProps = InputStyleProps & {
+  /**
+   * @beta
+   */
+  __unstable_disableFocusRing?: boolean;
+  /**
+   * @beta
+   */
+  clearButton?: boolean | TextInputClearButtonProps;
+  customValidity?: string;
+  icon?: ElementType$1 | ReactNode;
+  iconRight?: ElementType$1 | ReactNode;
+  /**
+   * @beta
+   */
+  onClear?: () => void;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  /**
+   * @deprecated Use `fontWeight` instead
+   */
+  weight?: FontWeight;
+};
 /** @public */
-export declare const DEFAULT_TOOLTIP_ELEMENT = 'div'
-/** @beta */
-export declare const DEFAULT_TREE_ELEMENT = 'div'
-/** @beta */
-export declare const DEFAULT_TREE_ITEM_ELEMENT = 'a'
-/** @beta */
-export declare const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'
+type TextInputElementType = 'input' | ComponentType;
 /** @public */
-export declare type Delay =
-  | number
-  | Partial<{
-      open: number
-      close: number
-    }>
+type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<TextInputOwnProps, E>;
 /**
- * The Dialog component.
+ * Single line text input.
  *
  * @public
  */
-export declare function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEMENT>(
-  props: DialogProps<E>,
-): React.JSX.Element
+declare function TextInput<E extends TextInputElementType = typeof DEFAULT_TEXT_INPUT_ELEMENT>(props: TextInputProps<E>): React.JSX.Element;
+/** @public */
+type AutocompleteOpenButtonProps = Omit<ButtonProps<'button'>, 'as'>;
+/** @public */
+interface BaseAutocompleteOption {
+  value: string;
+}
 /**
  * @internal
  */
-export declare const DialogContext: Context<DialogContextValue>
+interface AutocompleteState {
+  activeValue: string | null;
+  focused: boolean;
+  listFocused: boolean;
+  query: string | null;
+  value: string | null;
+}
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @internal
  */
-export declare interface DialogContextValue {
-  version: 0.0
-  position?: ResponsiveProp<DialogPosition>
-  zOffset?: ResponsiveProp<number>
+interface AutocompleteRootBlurMsg {
+  type: 'root/blur';
 }
-/** @public */
-export declare type DialogElementType = 'div' | 'span' | ComponentType
+/**
+ * @internal
+ */
+interface AutocompleteRootClearMsg {
+  type: 'root/clear';
+}
+/**
+ * @internal
+ */
+interface AutocompleteRootEscapeMsg {
+  type: 'root/escape';
+}
+/**
+ * @internal
+ */
+interface AutocompleteRootOpenMsg {
+  type: 'root/open';
+  query: string | null;
+}
+/**
+ * @internal
+ */
+interface AutocompleteRootSetActiveValueMsg {
+  type: 'root/setActiveValue';
+  value: string;
+  listFocused?: boolean;
+}
+/**
+ * @internal
+ */
+interface AutocompleteRootSetListFocusedMsg {
+  type: 'root/setListFocused';
+  listFocused: boolean;
+}
+/**
+ * @internal
+ */
+interface AutocompleteInputChangeMsg {
+  type: 'input/change';
+  query: string | null;
+}
+/**
+ * @internal
+ */
+interface AutocompleteInputFoocusMsg {
+  type: 'input/focus';
+}
+/**
+ * @internal
+ */
+interface AutocompleteValueChangeMsg {
+  type: 'value/change';
+  value: string | null;
+}
+/**
+ * @internal
+ */
+type AutocompleteMsg = AutocompleteRootBlurMsg | AutocompleteRootClearMsg | AutocompleteRootEscapeMsg | AutocompleteRootOpenMsg | AutocompleteRootSetActiveValueMsg | AutocompleteRootSetListFocusedMsg | AutocompleteInputChangeMsg | AutocompleteInputFoocusMsg | AutocompleteValueChangeMsg;
+/** @public */
+declare const DEFAULT_AUTOCOMPLETE_ELEMENT = "input";
+/** @public */
+type AutocompleteOwnProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> = TextInputOwnProps & {
+  border?: boolean;
+  customValidity?: string;
+  filterOption?: (query: string, option: Option) => boolean;
+  icon?: ElementType$1 | ReactNode; /** @beta */
+  listBox?: BoxOwnProps;
+  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?: ResponsiveProp$1<Space>;
+  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>;
+  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: ForwardedRef<HTMLDivElement>) => ReactNode;
+  renderValue?: (value: string, option?: Option) => string;
+  suffix?: ReactNode;
+  value?: string;
+};
+/** @public */
+type AutocompleteElementType = 'input' | ComponentType;
+/** @public */
+type AutocompleteProps<E extends AutocompleteElementType = AutocompleteElementType, Option extends BaseAutocompleteOption = BaseAutocompleteOption> = Props<AutocompleteOwnProps<Option>, E>;
+/**
+ * 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
+ */
+declare function Autocomplete<E extends AutocompleteElementType = typeof DEFAULT_AUTOCOMPLETE_ELEMENT, Option extends BaseAutocompleteOption = BaseAutocompleteOption>(props: AutocompleteProps<E, Option>): React.JSX.Element;
+/** @beta */
+declare const DEFAULT_BREADCRUMBS_ELEMENT = "nav";
+/** @beta */
+type BreadcrumbsOwnProps = GapStyleProps & {
+  expandButton?: Omit<ButtonProps, 'as' | 'onClick' | 'selected'>;
+  maxLength?: number;
+  popover?: PopoverProps;
+  separator?: ReactNode;
+};
+/** @beta */
+type BreadcrumbsElementType = 'div' | 'nav' | ComponentType;
+/** @beta */
+type BreadcrumbsProps<E extends BreadcrumbsElementType = BreadcrumbsElementType> = Props<BreadcrumbsOwnProps, E>;
+/** @beta */
+declare function Breadcrumbs<E extends BreadcrumbsElementType = typeof DEFAULT_BREADCRUMBS_ELEMENT>(props: BreadcrumbsProps<E>): React.JSX.Element;
+/** @public */
+type DialogPosition = 'absolute' | 'fixed';
+/** @public */
+declare const DEFAULT_DIALOG_ELEMENT = "div";
 /** @public */
-export declare interface DialogOwnProps
-  extends
-    Omit<ContainerStyleProps, 'id' | 'position' | 'radius' | 'shadow'>,
-    Omit<LayerOwnProps, 'id' | 'position' | 'radius' | 'shadow' | 'width'> {
+interface DialogOwnProps extends Omit<ContainerStyleProps, 'id' | 'position' | 'radius' | 'shadow'>, Omit<LayerOwnProps, 'id' | 'position' | 'radius' | 'shadow' | 'width'> {
   /**
    * @beta
    */
-  __unstable_autoFocus?: boolean
+  __unstable_autoFocus?: boolean;
   /**
    * @beta
    */
-  __unstable_hideCloseButton?: boolean
+  __unstable_hideCloseButton?: boolean;
   /**
    * Whether the dialog should animate in on mount.
    *
    * @beta
    * @defaultValue false
    */
-  animate?: boolean
-  cardRadius?: ResponsiveProp<Radius>
-  contentRef?: ForwardedRef<HTMLDivElement>
-  footer?: ReactNode
-  header?: ReactNode
-  id: string
+  animate?: boolean;
+  cardRadius?: ResponsiveProp$1<Radius>;
+  contentRef?: ForwardedRef<HTMLDivElement>;
+  footer?: ReactNode;
+  header?: 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
-  open?: boolean
-  portal?: string
-  position?: ResponsiveProp<DialogPosition>
+  onActivate?: LayerProps['onActivate'];
+  onClickOutside?: () => void;
+  onClose?: () => void;
+  open?: boolean;
+  portal?: string;
+  position?: ResponsiveProp$1<DialogPosition>;
   /**
    * @deprecated Not in use – will be removed in the next major version.
    */
-  shadow?: ResponsiveProp<Shadow>
+  shadow?: ResponsiveProp$1<Shadow>;
 }
 /** @public */
-export declare type DialogPosition = 'absolute' | 'fixed'
+type DialogElementType = 'div' | 'span' | ComponentType;
 /** @public */
-export declare type DialogProps<E extends DialogElementType = DialogElementType> = Props<
-  DialogOwnProps,
-  E
->
+type DialogProps<E extends DialogElementType = DialogElementType> = Props<DialogOwnProps, E>;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * The Dialog component.
+ *
+ * @public
  */
-export declare function DialogProvider(props: DialogProviderProps): React.JSX.Element
+declare function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEMENT>(props: DialogProps<E>): React.JSX.Element;
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface DialogProviderProps {
-  children?: ReactNode
-  position?: ResponsiveProp<DialogPosition>
-  zOffset?: ResponsiveProp<number>
+interface DialogContextValue {
+  version: 0.0;
+  position?: ResponsiveProp$1<DialogPosition>;
+  zOffset?: ResponsiveProp$1<number>;
 }
 /**
- * DO NOT USE IN PRODUCTION.
- * @beta
+ * @internal
  */
-export declare function ElementQuery<
-  E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT,
->(props: ElementQueryProps<E>): React.JSX.Element
-/** @beta */
-export declare type ElementQueryElementType = 'div' | ComponentType
+declare const DialogContext: Context<DialogContextValue>;
 /**
- * DO NOT USE IN PRODUCTION.
+ * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare type ElementQueryOwnProps = {
-  media?: number[]
+interface DialogProviderProps {
+  children?: ReactNode;
+  position?: ResponsiveProp$1<DialogPosition>;
+  zOffset?: ResponsiveProp$1<number>;
 }
 /**
- * DO NOT USE IN PRODUCTION.
+ * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare type ElementQueryProps<E extends ElementQueryElementType = ElementQueryElementType> =
-  Props<ElementQueryOwnProps, E>
+declare function DialogProvider(props: DialogProviderProps): React.JSX.Element;
 /**
+ * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface ElementRectValue {
-  width: number
-  height: number
+declare function useDialog(): DialogContextValue;
+/** @public */
+declare const DEFAULT_HOTKEYS_ELEMENT = "kbd";
+/** @public */
+interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
+  /** @deprecated No longer supported. */
+  fontSize?: never;
+  /** @deprecated No longer supported. */
+  padding?: never;
+  keys: string[];
 }
+/** @public */
+type HotkeysElementType = 'kbd' | ComponentType;
+/** @public */
+type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<HotkeysOwnProps, E>;
 /**
- * @beta
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
+ *
+ * @example
+ * ```tsx
+ * import {Hotkeys} from '@sanity/ui'
+ *
+ * <Hotkeys keys={['⌘', 'K']} />
+ * ```
+ *
+ * @public
  */
-export declare interface ElementSize {
-  content: ElementRectValue
-  border: ElementRectValue
-  /** @deprecated INTERNAL ONLY */
-  _contentRect: DOMRectReadOnly
+declare function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(props: HotkeysProps<E>): React.JSX.Element | undefined;
+/** @public */
+declare const DEFAULT_MENU_ELEMENT = "div";
+/** @public */
+type MenuOwnProps = PaddingStyleProps & {
+  'gap'?: ResponsiveProp$1<Space>;
+  'onClickOutside'?: (event: MouseEvent) => void;
+  'onEscape'?: () => void;
+  'onItemClick'?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  'onItemSelect'?: (index: number) => void;
+  'originElement'?: HTMLElement | null;
+  'registerElement'?: (el: HTMLElement) => () => void;
+  'shouldFocus'?: 'first' | 'last' | null;
+  'aria-labelledby'?: string;
+};
+/** @public */
+type MenuElementType = 'div' | 'span' | ComponentType;
+/** @public */
+type MenuProps<E extends MenuElementType = MenuElementType> = Props<MenuOwnProps, E>;
+/**
+ * The `Menu` component is a building block for application menus.
+ *
+ * @public
+ */
+declare function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(props: MenuProps<E>): React.JSX.Element;
+/** @public */
+type MenuButtonProps = {
+  /**
+   * @beta Do not use in production.
+   */
+  __unstable_disableRestoreFocusOnClose?: boolean;
+  button: ReactElement<ButtonProps>;
+  id: string;
+  menu?: ReactElement;
+  onClose?: () => void;
+  onOpen?: () => void;
+  popover?: Omit<PopoverProps, 'content' | 'open'>;
+  ref?: ForwardedRef<HTMLButtonElement | null>;
+};
+/**
+ * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
+ *
+ * @public
+ */
+declare function MenuButton(props: MenuButtonProps): React.JSX.Element;
+/** @public */
+declare const DEFAULT_MENU_DIVIDER_ELEMENT = "hr";
+/** @public */
+type MenuDividerOwnProps = {};
+/** @public */
+type MenuDividerElementType = 'div' | 'hr' | 'span' | ComponentType;
+/** @public */
+type MenuDividerProps<E extends MenuDividerElementType = MenuDividerElementType> = Props<MenuDividerOwnProps, E>;
+/** @public */
+declare function MenuDivider<E extends MenuDividerElementType = typeof DEFAULT_MENU_DIVIDER_ELEMENT>(props: MenuDividerProps<E>): React.JSX.Element;
+/** @public */
+declare const DEFAULT_MENU_GROUP_ELEMENT = "button";
+/** @public */
+type MenuGroupOwnProps = RadiusStyleProps & {
+  disabled?: boolean;
+  fontSize?: ResponsiveProp$1<FontTextSize>;
+  gap?: ResponsiveProp$1<Space>;
+  icon?: ElementType$1 | ReactNode;
+  menu?: Omit<MenuProps<typeof DEFAULT_MENU_ELEMENT>, 'onClickOutside' | 'onEscape' | 'onItemClick' | 'onKeyDown' | 'onMouseEnter' | 'registerElement' | 'shouldFocus' | 'onBlurCapture'>;
+  padding?: ResponsiveProp$1<Space>;
+  popover?: Omit<PopoverProps, 'content' | 'open'>;
+  text?: ReactNode;
+  tone?: ElementTone;
+};
+/** @public */
+type MenuGroupElementType = 'button' | ComponentType;
+/** @public */
+type MenuGroupProps<E extends MenuGroupElementType = MenuGroupElementType> = Props<MenuGroupOwnProps, E>;
+/** @public */
+declare function MenuGroup<E extends MenuGroupElementType = typeof DEFAULT_MENU_GROUP_ELEMENT>(props: MenuGroupProps<E>): React.JSX.Element;
+/** @public */
+declare const DEFAULT_MENU_ITEM_ELEMENT = "button";
+/** @public */
+type MenuItemOwnProps = GapStyleProps & PaddingStyleProps & RadiusStyleProps & {
+  disabled?: boolean;
+  fontSize?: ResponsiveProp$1<FontTextSize>;
+  hotkeys?: string[];
+  icon?: ElementType$1 | ReactNode;
+  iconRight?: ElementType$1 | ReactNode;
+  pressed?: boolean;
+  selected?: boolean;
+  text?: ReactNode;
+  tone?: ElementTone;
+};
+/** @public */
+type MenuItemElementType = 'button' | 'a' | ComponentType;
+/** @public */
+type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> = Props<MenuItemOwnProps, E>;
+/** @public */
+declare function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITEM_ELEMENT>(props: MenuItemProps<E>): React.JSX.Element;
+/** @public */
+declare const DEFAULT_TAB_ELEMENT = "button";
+/** @public */
+interface TabOwnProps extends ButtonOwnProps {
+  /**
+   * The `id` of the corresponding `TabPanel` component.
+   */
+  'aria-controls': string;
+  'id': string;
+  'focused'?: boolean;
+  'label'?: React.ReactNode;
+  'onActivate'?: () => void;
 }
+/** @public */
+type TabElementType = 'button' | ComponentType;
+/** @public */
+type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>;
+/** @public */
+declare function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(props: TabProps<E>): React.JSX.Element;
+/** @public */
+declare const DEFAULT_FLEX_ELEMENT = "div";
+/** @public */
+type FlexOwnProps = FlexStyleProps;
+/** @public */
+type FlexElementType = BoxElementType;
+/** @public */
+type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>;
 /**
- * @internal
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
+ * @public
  */
-export declare interface _ElementSizeListener {
-  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
+declare function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(props: FlexProps<E>): React.JSX.Element;
+/** @public */
+declare const DEFAULT_TAB_LIST_ELEMENT = "div";
+/** @public */
+interface TabListOwnProps extends FlexOwnProps {
+  autoActivate?: boolean;
 }
+/** @public */
+type TabListElementType = 'div' | 'span' | ComponentType;
+/** @public */
+type TabListProps<E extends TabListElementType = TabListElementType> = Omit<Props<TabListOwnProps, E>, 'role'>;
+/** @public */
+declare function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_ELEMENT>(props: TabListProps<E>): React.JSX.Element;
+/** @public */
+declare const DEFAULT_TAB_PANEL_ELEMENT = "div";
+/** @public */
+type TabPanelOwnProps = BoxOwnProps & {
+  /**
+   * The `id` of the corresponding `Tab` component.
+   */
+  'aria-labelledby': string;
+  'id': string;
+};
+/** @public */
+type TabPanelElementType = 'div' | 'span' | ComponentType;
+/** @public */
+type TabPanelProps<E extends TabPanelElementType = TabPanelElementType> = Props<TabPanelOwnProps, E>;
+/** @public */
+declare function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANEL_ELEMENT>(props: TabPanelProps<E>): React.JSX.Element;
+/** @internal */
+declare const DEFAULT_TOAST_ELEMENT = "li";
+/** @internal */
+type ToastOwnProps = RadiusStyleProps & {
+  closable?: boolean;
+  description?: ReactNode;
+  onClose?: () => void;
+  title?: ReactNode;
+  status?: 'error' | 'warning' | 'success' | 'info';
+  duration?: number;
+};
+/** @internal */
+type ToastElementType = 'li' | ComponentType;
+/** @internal */
+type ToastProps<E extends ToastElementType = ToastElementType> = Props<ToastOwnProps, E>;
 /**
+ * The `Toast` component gives feedback to users when an action has taken place.
+ *
+ * Toasts can be closed with a close button, or auto-dismiss when the duration expires.
+ *
  * @internal
  */
-export declare interface _ElementSizeObserver {
-  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
+declare function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(props: ToastProps<E>): React.JSX.Element;
+/** @internal */
+type ToastLayerOwnProps = GapStyleProps & PaddingStyleProps;
+/** @internal */
+type ToastLayerElementType = 'ul' | ComponentType;
+/** @internal */
+type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElementType> = Props<ToastLayerOwnProps, E>;
+/** @public */
+interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
+  children?: React.ReactNode;
+  zOffset?: ResponsiveProp$1<number>;
+}
+/** @public */
+declare function ToastProvider(props: ToastProviderProps): React.JSX.Element;
+/** @public */
+interface ToastParams {
+  closable?: boolean;
+  description?: ReactNode;
+  duration?: number;
+  id?: string;
+  onClose?: () => void;
+  title?: ReactNode;
+  status?: 'error' | 'warning' | 'success' | 'info';
+}
+/** @public */
+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;
 }
+/** @public */
+declare function useToast(): ToastContextValue;
+/** @public */
+declare const DEFAULT_STACK_ELEMENT = "div";
+/** @public */
+type StackOwnProps = StackStyleProps;
+/** @public */
+type StackElementType = BoxElementType;
+/** @public */
+type StackProps<E extends StackElementType = StackElementType> = Props<StackOwnProps, E>;
 /**
- * @internal
+ * The `Stack` component is used to place elements on top of each other.
+ *
+ * @public
  */
-export declare const _elementSizeObserver: _ElementSizeObserver
+declare function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>(props: StackProps<E>): React.JSX.Element;
+/** @beta */
+declare const DEFAULT_TREE_ELEMENT = "div";
 /**
- * @internal
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+type TreeOwnProps = Omit<StackOwnProps, 'position'>;
+/** @beta */
+type TreeElementType = 'div' | ComponentType;
+/** @beta */
+type TreeProps<E extends TreeElementType = TreeElementType> = Props<TreeOwnProps, E>;
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare type _ElementSizeSubscriber = (elementRect: ElementSize) => void
+declare function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(props: TreeProps<E>): React.JSX.Element;
 /** @public */
-export declare type ElementType<P> = TagType | ComponentType<P>
+declare const DEFAULT_SELECTABLE_ELEMENT = "button";
 /** @public */
-export declare type EmptyProps = {}
+interface SelectableOwnProps extends SelectableStyleProps {
+  selected?: boolean;
+}
+/** @public */
+type SelectableElementType = 'a' | 'button' | 'span' | ComponentType;
+/** @public */
+type SelectableProps<E extends SelectableElementType = SelectableElementType> = Props<SelectableOwnProps, E>;
+/** @public */
+declare function Selectable<E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT>(props: SelectableProps<E>): React.JSX.Element;
+/** @beta */
+declare const DEFAULT_TREE_ITEM_ELEMENT = "a";
+/** @beta */
+type TreeItemOwnProps = SelectableOwnProps & {
+  expanded?: boolean;
+  fontSize?: ResponsiveProp$1<FontTextSize>;
+  icon?: ElementType$1;
+  /**
+   * Allows passing a custom element type to the link component
+   * @internal
+   */
+  linkAs?: SelectableElementType;
+  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>;
+  padding?: ResponsiveProp$1<Space>;
+  gap?: ResponsiveProp$1<Space>; /** @deprecated Use `gap` instead */
+  space?: never;
+  text?: ReactNode;
+  weight?: FontWeight;
+};
+/** @beta */
+type TreeItemElementType = 'a' | 'li' | ComponentType;
+/** @beta */
+type TreeItemProps<E extends TreeItemElementType = TreeItemElementType> = Props<TreeItemOwnProps, E>;
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+declare function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITEM_ELEMENT>(props: TreeItemProps<E>): React.JSX.Element;
 /**
- * DO NOT USE IN PRODUCTION
  * @beta
  */
-export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  state: ErrorBoundaryState
-  static displayName: string
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState
-  componentDidCatch(error: Error, info: ErrorInfo): void
-  render(): ReactNode
+interface TreeState {
+  [key: string]: {
+    element: HTMLElement;
+    expanded: boolean;
+  } | undefined;
 }
 /**
- * DO NOT USE IN PRODUCTION
  * @beta
  */
-export declare type ErrorBoundaryProps = PropsWithChildren<{
-  onCatch: (params: {error: Error; info: ErrorInfo}) => void
-}>
+interface TreeContextValue {
+  version: 0.0;
+  focusedElement: HTMLElement | null;
+  gap: ResponsiveProp$1<Space>;
+  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;
+  state: TreeState;
+}
 /**
- * DO NOT USE IN PRODUCTION
  * @beta
  */
-export declare interface ErrorBoundaryState {
-  error: Error | null
+declare function useTree(): TreeContextValue;
+/** @beta */
+declare const DEFAULT_VIRTUAL_LIST_ELEMENT = "div";
+/** @beta */
+interface VirtualListChangeOpts {
+  fromIndex: number;
+  gap: number;
+  itemHeight: number;
+  scrollHeight: number;
+  scrollTop: number;
+  toIndex: number;
+}
+/** @beta */
+interface VirtualListOwnProps<Item = any> {
+  gap?: Space;
+  getItemKey?: (item: Item, itemIndex: number) => string;
+  items?: Item[];
+  onChange?: (opts: VirtualListChangeOpts) => void;
+  renderItem?: (item: Item) => ReactNode;
 }
+/** @beta */
+type VirtualListElementType = 'div' | ComponentType;
+/** @beta */
+type VirtualListProps<E extends VirtualListElementType = VirtualListElementType, Item = any> = Props<VirtualListOwnProps<Item>, E>;
+/** @beta */
+declare function VirtualList<E extends VirtualListElementType = typeof DEFAULT_VIRTUAL_LIST_ELEMENT, Item = any>(props: VirtualListProps<E, Item>): React.JSX.Element;
 /**
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
- *
- * @public
+ * @internal
  */
-export declare function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(
-  props: FlexProps<E>,
-): React.JSX.Element
-/** @public */
-export declare type FlexElementType = BoxElementType
-/** @public */
-export declare type FlexOwnProps = FlexStyleProps
-/** @public */
-export declare type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>
+declare function _raf(fn: () => void): () => void;
 /**
  * @internal
  */
-export declare function focusFirstDescendant(element: HTMLElement): boolean
+declare function _raf2(fn: () => void): () => void;
 /**
  * @internal
  */
-export declare function focusLastDescendant(element: HTMLElement): boolean
+declare function _isEnterToClickElement(element: HTMLElement): boolean;
 /**
  * @internal
  */
-export declare function _getResponsiveProp<T>(
-  val: ResponsiveProp<T> | undefined,
-  defaultVal?: ResponsivePropArray<T>,
-): ResponsivePropArray<T>
+declare function isHTMLElement(node: unknown): node is HTMLElement;
 /**
- * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
- *
- * @public
+ * @internal
  */
-export declare function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(
-  props: GridProps<E>,
-): React.JSX.Element
-/** @public */
-export declare type GridElementType = BoxElementType
-/** @public */
-export declare type GridOwnProps = GridStyleProps
-/** @public */
-export declare type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>
+declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement;
 /**
  * @internal
  */
-export declare function _hasFocus(element: HTMLElement): boolean
+declare function isHTMLInputElement(element: unknown): element is HTMLInputElement;
 /**
- * Typographic headings.
- *
- * @public
+ * @internal
  */
-export declare function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(
-  props: HeadingProps<E>,
-): React.JSX.Element
-/** @public */
-export declare type HeadingElementType =
-  | 'div'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
-  | 'span'
-  | ComponentType
-/** @public */
-export declare type HeadingOwnProps = HeadingStyleProps & TextOverflowStyleProps
-/** @public */
-export declare type HeadingProps<E extends HeadingElementType = HeadingElementType> = Props<
-  HeadingOwnProps,
-  E
->
+declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @internal
  */
-export declare function HeadingSkeleton<
-  E extends HeadingSkeletonElementType = typeof DEFAULT_HEADING_SKELETON_ELEMENT,
->(props: HeadingSkeletonProps<E>): React.JSX.Element
-/** @beta */
-export declare type HeadingSkeletonElementType = SkeletonElementType
-/** @beta */
-export declare type HeadingSkeletonOwnProps = SkeletonOwnProps & {
-  size?: ResponsiveProp<FontHeadingSize>
-}
+declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @internal
  */
-export declare type HeadingSkeletonProps<
-  E extends HeadingSkeletonElementType = HeadingSkeletonElementType,
-> = Props<HeadingSkeletonOwnProps, E>
+declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement;
 /**
- * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
- *
- * @example
- * ```tsx
- * import {Hotkeys} from '@sanity/ui'
- *
- * <Hotkeys keys={['⌘', 'K']} />
- * ```
- *
- * @public
+ * @internal
  */
-export declare function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(
-  props: HotkeysProps<E>,
-): React.JSX.Element | undefined
-/** @public */
-export declare type HotkeysElementType = 'kbd' | ComponentType
-/** @public */
-export declare interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
-  /** @deprecated No longer supported. */
-  fontSize?: never
-  /** @deprecated No longer supported. */
-  padding?: never
-  keys: string[]
-}
-/** @public */
-export declare type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<
-  HotkeysOwnProps,
-  E
->
+declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean;
 /**
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
- *
- * @public
+ * @internal
  */
-export declare function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(
-  props: InlineProps<E>,
-): React.JSX.Element
-/** @public */
-export declare function InlineCode(props: InlineCodeProps): React.JSX.Element
-/** @public */
-export declare interface InlineCodeProps {
-  children: React.ReactNode
-  /** Language to use for syntax highlighting. */
-  language?: string
-}
-/** @public */
-export declare type InlineElementType = BoxElementType
-/** @public */
-export declare type InlineOwnProps = InlineStyleProps
-/** @public */
-export declare type InlineProps<E extends InlineElementType = InlineElementType> = Props<
-  InlineOwnProps,
-  E
->
+declare function _hasFocus(element: HTMLElement): boolean;
+/**
+ * @internal
+ */
+declare function isFocusable(element: HTMLElement): boolean;
 /**
  * @internal
  */
-export declare function _isEnterToClickElement(element: HTMLElement): boolean
+declare function attemptFocus(element: HTMLElement): boolean;
 /**
  * @internal
  */
-export declare function isFocusable(element: HTMLElement): boolean
+declare function focusFirstDescendant(element: HTMLElement): boolean;
 /**
  * @internal
  */
-export declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement
+declare function focusLastDescendant(element: HTMLElement): boolean;
 /**
  * @internal
  */
-export declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement
+declare function _getResponsiveProp<T>(val: ResponsiveProp$1<T> | undefined, defaultVal?: ResponsivePropArray<T>): ResponsivePropArray<T>;
 /**
  * @internal
  */
-export declare function isHTMLElement(node: unknown): node is HTMLElement
+declare function _isScrollable(el: Node): boolean;
+/** @public */
+type ClickOutsideEventListener = (event: MouseEvent) => void;
+/** @public */
+type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[];
+/** @public */
+declare function useClickOutsideEvent(listener: ClickOutsideEventListener | false | undefined, elementsArg?: () => ClickOutsideEventElements, boundaryElement?: () => HTMLElement | null): void;
+/**
+ * @beta
+ */
+declare function useCustomValidity(ref: {
+  current: null | {
+    setCustomValidity: (validity: string) => void;
+  };
+}, customValidity: string | undefined): void;
+/**
+ * @beta
+ */
+interface ElementRectValue {
+  width: number;
+  height: number;
+}
+/**
+ * @beta
+ */
+interface ElementSize {
+  content: ElementRectValue;
+  border: ElementRectValue;
+  /** @deprecated INTERNAL ONLY */
+  _contentRect: DOMRectReadOnly;
+}
 /**
  * @internal
  */
-export declare function isHTMLInputElement(element: unknown): element is HTMLInputElement
+type _ElementSizeSubscriber = (elementRect: ElementSize) => void;
 /**
  * @internal
  */
-export declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement
+interface _ElementSizeObserver {
+  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void;
+}
 /**
  * @internal
  */
-export declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement
+interface _ElementSizeListener {
+  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void;
+}
 /**
  * @internal
  */
-export declare function _isScrollable(el: Node): boolean
+declare const _elementSizeObserver: _ElementSizeObserver;
 /**
- * Used to define some text as keyboard input.
+ * Subscribe to the size of a DOM element.
+ * @beta
+ */
+declare function useElementSize(element: HTMLElement | null): ElementSize | null;
+/**
+ * Adds global keydown event listener to the window.
  *
- * @public
+ * @param onKeyDown - The function to call when a keydown event is triggered.
+ * @param options - The options to pass to the addEventListener function (example, capture: true)
+ * @beta
  */
-export declare function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(
-  props: KBDProps<E>,
-): React.JSX.Element
-/** @public */
-export declare type KBDElementType = 'kbd' | ComponentType
-/** @public */
-export declare type KBDOwnProps = KBDStyleProps
-/** @public */
-export declare type KBDProps<E extends KBDElementType = KBDElementType> = Props<KBDOwnProps, E>
+declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void, options?: AddEventListenerOptions): void;
 /**
- * Typographic labels.
+ * Efficiently subscribes to `window.matchMedia` queries
+ *
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * @public
  */
-export declare function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(
-  props: LabelProps<E>,
-): React.JSX.Element
-/** @public */
-export declare type LabelElementType =
-  | 'div'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
-  | 'li'
-  | 'p'
-  | 'span'
-  | ComponentType
-/** @public */
-export declare type LabelOwnProps = LabelStyleProps & TextOverflowStyleProps
-/** @public */
-export declare type LabelProps<E extends LabelElementType = LabelElementType> = Props<
-  LabelOwnProps,
-  E
->
+declare function useMatchMedia(mediaQueryString: `(${string})`, getServerSnapshot?: () => boolean): boolean;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @internal
  */
-export declare function LabelSkeleton<
-  E extends LabelSkeletonElementType = typeof DEFAULT_LABEL_SKELETON_ELEMENT,
->(props: LabelSkeletonProps<E>): React.JSX.Element
-/** @beta */
-export declare type LabelSkeletonElementType = SkeletonElementType
-/** @beta */
-export declare type LabelSkeletonOwnProps = SkeletonOwnProps & {
-  size?: ResponsiveProp<FontLabelSize>
+interface _MediaStore {
+  subscribe: (onStoreChange: () => void) => () => void;
+  getSnapshot: () => Breakpoint;
 }
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare type LabelSkeletonProps<
-  E extends LabelSkeletonElementType = LabelSkeletonElementType,
-> = Props<LabelSkeletonOwnProps, E>
-/** @public */
-export declare function Layer<E extends LayerElementType = typeof DEFAULT_LAYER_ELEMENT>(
-  props: LayerProps<E>,
-): React.JSX.Element
-/** @public */
-export declare interface LayerContextValue {
-  version: 0.0
-  isTopLayer: boolean
-  level?: number
-  registerChild: (childLevel?: number) => () => void
-  size: number
-  zIndex: number
+declare function useMediaIndex(): Breakpoint;
+/**
+ * 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://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
+ */
+declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean;
+/**
+ * Returns true if motion should be reduced
+ *
+ * @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-reduced-motion: no-preference)` since it's the most common scheme (https://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-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
+ * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
+ *
+ * @public
+ */
+declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean;
+interface SyntaxProps {
+  language?: string;
+  value: React.ReactNode;
 }
+declare function Syntax(props: SyntaxProps): React.JSX.Element;
+/** @internal */
+declare const LazySyntax: _$react.LazyExoticComponent<typeof Syntax>;
 /** @public */
-export declare type LayerElementType = CardElementType
+type AvatarPosition = 'top' | 'bottom' | 'inside';
 /** @public */
-export declare interface LayerOwnProps extends CardOwnProps {
-  /** 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?: ResponsiveProp<number>
+declare const DEFAULT_AVATAR_ELEMENT = "span";
+/** @public */
+interface AvatarOwnProps {
+  /** @beta */
+  __unstable_hideInnerStroke?: boolean;
+  animateArrowFrom?: AvatarPosition;
+  arrowPosition?: AvatarPosition;
+  color?: AvatarColor;
+  initials?: string;
+  onImageLoadError?: (event: Error) => void;
+  size?: ResponsiveProp$1<AvatarSize>;
+  src?: string;
+  title?: string;
 }
 /** @public */
-export declare type LayerProps<E extends LayerElementType = LayerElementType> = Props<
-  LayerOwnProps,
-  E
->
+type AvatarElementType = 'a' | 'button' | 'div' | 'span' | ComponentType;
+/** @public */
+type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props<AvatarOwnProps, E>;
+/**
+ * Avatars are used to represent people and other agents (e.g. bots).
+ *
+ * @public
+ */
+declare function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(props: AvatarProps<E>): React.JSX.Element;
 /** @public */
-export declare function LayerProvider(props: LayerProviderProps): React.JSX.Element
+declare const DEFAULT_AVATAR_COUNTER_ELEMENT = "span";
 /** @public */
-export declare interface LayerProviderProps {
-  children?: ReactNode
-  zOffset?: ResponsiveProp<number>
+interface AvatarCounterOwnProps {
+  count: number;
+  size?: ResponsiveProp$1<AvatarSize>;
 }
-/** @internal */
-export declare const LazySyntax: LazyExoticComponent<Syntax>
+/** @public */
+type AvatarCounterElementType = 'button' | 'div' | 'span' | ComponentType;
+/** @public */
+type AvatarCounterProps<E extends AvatarCounterElementType = AvatarCounterElementType> = Props<AvatarCounterOwnProps, E>;
+/** @public */
+declare function AvatarCounter<E extends AvatarCounterElementType = typeof DEFAULT_AVATAR_COUNTER_ELEMENT>(props: AvatarCounterProps<E>): React.JSX.Element;
+/** @public */
+declare const DEFAULT_AVATAR_STACK_ELEMENT = "span";
+/** @public */
+type AvatarStackChild = ReactElement<AvatarProps<'div'>> | null | undefined | false;
+/** @public */
+type AvatarStackOwnProps = Omit<BoxOwnProps, 'align' | 'alignItems' | 'display' | 'justify' | 'justifyContent'> & {
+  children: AvatarStackChild | AvatarStackChild[];
+  maxLength?: number;
+  size?: ResponsiveProp$1<AvatarSize>;
+};
+/** @public */
+type AvatarStackElementType = 'div' | 'span' | ComponentType;
+/** @public */
+type AvatarStackProps<E extends AvatarStackElementType = AvatarStackElementType> = Props<AvatarStackOwnProps, E>;
+/** @public */
+declare function AvatarStack<E extends AvatarStackElementType = typeof DEFAULT_AVATAR_STACK_ELEMENT>(props: AvatarStackProps<E>): React.JSX.Element;
+/** @public */
+declare const DEFAULT_BADGE_ELEMENT = "span";
+/** @public */
+interface BadgeOwnProps extends BadgeStyleProps {
+  fontSize?: ResponsiveProp$1<FontTextSize>;
+}
+/** @public */
+type BadgeElementType = 'div' | 'span' | ComponentType;
+/** @public */
+type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<BadgeOwnProps, E>;
 /**
- * @internal
+ * Badges are used to tag resources.
+ *
+ * @public
  */
-export declare interface _MediaStore {
-  subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => Breakpoint
+declare function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(props: BadgeProps<E>): React.JSX.Element;
+/** @public */
+type ButtonTextAlign = 'left' | 'right' | 'center';
+/** @public */
+declare function CardProvider(props: {
+  children?: ReactNode;
+  tone: CardTone;
+  scheme: ColorScheme;
+}): React.JSX.Element;
+/** @public */
+interface CardContextValue {
+  tone: CardTone;
+  scheme: ColorScheme;
+}
+/** @internal */
+type _CardCompatProviderComponent = ComponentType$1<{
+  children?: ReactNode;
+  tone: CardTone | 'inherit';
+  scheme: ColorScheme;
+}>;
+/** @internal */
+interface _CardInternalContextValue {
+  CompatProvider?: _CardCompatProviderComponent;
+  root: boolean;
 }
+/** @public */
+declare function useCard(): CardContextValue;
+/** @public */
+declare const DEFAULT_CHECKBOX_ELEMENT = "input";
+/** @public */
+type CheckboxOwnProps = {
+  indeterminate?: boolean;
+  customValidity?: string;
+};
+/** @public */
+type CheckboxElementType = 'input' | ComponentType;
+/** @public */
+type CheckboxProps<E extends CheckboxElementType = CheckboxElementType> = Props<CheckboxOwnProps, E>;
 /**
- * The `Menu` component is a building block for application menus.
+ * Checkboxes allow the user to select one or more items from a set.
  *
  * @public
  */
-export declare function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
-  props: MenuProps<E>,
-): React.JSX.Element
+declare function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(props: CheckboxProps<E>): React.JSX.Element;
+/** @public */
+declare const DEFAULT_CODE_ELEMENT = "pre";
+/** @public */
+type CodeOwnProps = CodeStyleProps & {
+  /** Define the language to use for syntax highlighting. */language?: string;
+};
+/** @public */
+type CodeElementType = 'div' | 'pre' | ComponentType;
+/** @public */
+type CodeProps<E extends CodeElementType = CodeElementType> = Props<CodeOwnProps, E>;
+/** @public */
+declare function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(props: CodeProps<E>): React.JSX.Element;
+/** @public */
+declare const DEFAULT_CONTAINER_ELEMENT = "div";
+/** @public */
+type ContainerOwnProps = ContainerStyleProps;
+/** @public */
+type ContainerElementType = BoxElementType;
+/** @public */
+type ContainerProps<E extends ContainerElementType = ContainerElementType> = Props<ContainerOwnProps, E>;
 /**
- * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
+ * The `Container` component wraps content layout in a defined set of widths.
  *
  * @public
  */
-export declare function MenuButton(props: MenuButtonProps): React.JSX.Element
-/** @public */
-export declare type MenuButtonProps = {
-  /**
-   * @beta Do not use in production.
-   */
-  __unstable_disableRestoreFocusOnClose?: boolean
-  button: ReactElement<ButtonProps>
-  id: string
-  menu?: ReactElement
-  onClose?: () => void
-  onOpen?: () => void
-  popover?: Omit<PopoverProps, 'content' | 'open'>
-  ref?: ForwardedRef<HTMLButtonElement | null>
-}
-/** @public */
-export declare function MenuDivider<
-  E extends MenuDividerElementType = typeof DEFAULT_MENU_DIVIDER_ELEMENT,
->(props: MenuDividerProps<E>): React.JSX.Element
-/** @public */
-export declare type MenuDividerElementType = 'div' | 'hr' | 'span' | ComponentType
-/** @public */
-export declare type MenuDividerOwnProps = {}
-/** @public */
-export declare type MenuDividerProps<E extends MenuDividerElementType = MenuDividerElementType> =
-  Props<MenuDividerOwnProps, E>
-/** @public */
-export declare type MenuElementType = 'div' | 'span' | ComponentType
-/** @public */
-export declare function MenuGroup<
-  E extends MenuGroupElementType = typeof DEFAULT_MENU_GROUP_ELEMENT,
->(props: MenuGroupProps<E>): React.JSX.Element
-/** @public */
-export declare type MenuGroupElementType = 'button' | ComponentType
-/** @public */
-export declare type MenuGroupOwnProps = RadiusStyleProps & {
-  disabled?: boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  gap?: ResponsiveProp<Space>
-  icon?: ElementType_2 | ReactNode
-  menu?: Omit<
-    MenuProps<typeof DEFAULT_MENU_ELEMENT>,
-    | 'onClickOutside'
-    | 'onEscape'
-    | 'onItemClick'
-    | 'onKeyDown'
-    | 'onMouseEnter'
-    | 'registerElement'
-    | 'shouldFocus'
-    | 'onBlurCapture'
-  >
-  padding?: ResponsiveProp<Space>
-  popover?: Omit<PopoverProps, 'content' | 'open'>
-  text?: ReactNode
-  tone?: ElementTone
-}
-/** @public */
-export declare type MenuGroupProps<E extends MenuGroupElementType = MenuGroupElementType> = Props<
-  MenuGroupOwnProps,
-  E
->
-/** @public */
-export declare function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITEM_ELEMENT>(
-  props: MenuItemProps<E>,
-): React.JSX.Element
-/** @public */
-export declare type MenuItemElementType = 'button' | 'a' | ComponentType
-/** @public */
-export declare type MenuItemOwnProps = GapStyleProps &
-  PaddingStyleProps &
-  RadiusStyleProps & {
-    disabled?: boolean
-    fontSize?: ResponsiveProp<FontTextSize>
-    hotkeys?: string[]
-    icon?: ElementType_2 | ReactNode
-    iconRight?: ElementType_2 | ReactNode
-    pressed?: boolean
-    selected?: boolean
-    text?: ReactNode
-    tone?: ElementTone
-  }
-/** @public */
-export declare type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> = Props<
-  MenuItemOwnProps,
-  E
->
-/** @public */
-export declare type MenuOwnProps = PaddingStyleProps & {
-  'gap'?: ResponsiveProp<Space>
-  'onClickOutside'?: (event: MouseEvent) => void
-  'onEscape'?: () => void
-  'onItemClick'?: (event: React.MouseEvent<HTMLButtonElement>) => void
-  'onItemSelect'?: (index: number) => void
-  'originElement'?: HTMLElement | null
-  'registerElement'?: (el: HTMLElement) => () => void
-  'shouldFocus'?: 'first' | 'last' | null
-  'aria-labelledby'?: string
+declare function Container<E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT>(props: ContainerProps<E>): React.JSX.Element;
+/**
+ * @internal
+ */
+interface ResponsiveWidthStyleProps {
+  $width: (number | 'auto')[];
 }
 /** @public */
-export declare type MenuProps<E extends MenuElementType = MenuElementType> = Props<MenuOwnProps, E>
+declare const DEFAULT_GRID_ELEMENT = "div";
+/** @public */
+type GridOwnProps = GridStyleProps;
+/** @public */
+type GridElementType = BoxElementType;
+/** @public */
+type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>;
 /**
- * Placement of floating UI elements.
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
  *
  * @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'
+declare function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(props: GridProps<E>): React.JSX.Element;
+/** @public */
+declare const DEFAULT_HEADING_ELEMENT = "div";
+/** @public */
+type HeadingOwnProps = HeadingStyleProps & TextOverflowStyleProps;
+/** @public */
+type HeadingElementType = 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'span' | ComponentType;
+/** @public */
+type HeadingProps<E extends HeadingElementType = HeadingElementType> = Props<HeadingOwnProps, E>;
 /**
- * The `Popover` component is used to display some content on top of another.
+ * Typographic headings.
  *
  * @public
  */
-export declare function Popover(props: PopoverProps): React.JSX.Element
+declare function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(props: HeadingProps<E>): React.JSX.Element;
 /** @public */
-export declare type PopoverElementType = 'div'
-/** @internal */
-declare interface PopoverLayerOwnProps extends LayerOwnProps {
-  /**
-   * Whether the popover should animate in and out.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
-  children?: React.ReactNode
-  originX?: number
-  originY?: number
-  referenceWidth?: number
-  strategy?: Strategy
-  x?: number
-  y?: number
-}
+declare const DEFAULT_INLINE_ELEMENT = "div";
+/** @public */
+type InlineOwnProps = InlineStyleProps;
 /** @public */
-declare type PopoverLayerProps = Assign<HTMLMotionProps<'div'>, PopoverLayerOwnProps>
+type InlineElementType = BoxElementType;
+/** @public */
+type InlineProps<E extends InlineElementType = InlineElementType> = Props<InlineOwnProps, E>;
 /**
- * @beta
+ * The `Inline` component is a layout utility for aligning and spacing items horizontally.
+ *
+ * @public
  */
-export declare type PopoverMargins = [number, number, number, number]
+declare function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(props: InlineProps<E>): React.JSX.Element;
 /** @public */
-export declare type PopoverOwnProps = Omit<PopoverLayerOwnProps, 'maxWidth'> & {
-  /** @beta */
-  __unstable_distance?: number
-  /**
-   * @beta
-   * @deprecated Will be removed in the next major version */
-  __unstable_margins?: PopoverMargins
-  /** @beta */
-  __unstable_shift?: number
-  /**
-   * @deprecated Will be removed in the next major version
-   */
-  arrow?: boolean
-  children?: ReactElement<{
-    ref: ForwardedRef<HTMLElement>
-  }>
-  /**
-   * 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?: 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
-  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
-  /** @beta */
-  updateRef?: Ref<PopoverUpdateCallback | undefined>
-  width?: ResponsiveProp<MaxWidth>
-}
+declare const DEFAULT_KBD_ELEMENT = "kbd";
 /** @public */
-export declare type PopoverProps = Assign<PopoverLayerProps, PopoverOwnProps>
-/** @beta */
-export declare type PopoverUpdateCallback = () => void
+type KBDOwnProps = KBDStyleProps;
+/** @public */
+type KBDElementType = 'kbd' | ComponentType;
+/** @public */
+type KBDProps<E extends KBDElementType = KBDElementType> = Props<KBDOwnProps, E>;
+/**
+ * Used to define some text as keyboard input.
+ *
+ * @public
+ */
+declare function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(props: KBDProps<E>): React.JSX.Element;
 /** @public */
-export declare type PopoverWidth = Exclude<ContainerWidth, 'auto'>
+declare const DEFAULT_LABEL_ELEMENT = "div";
 /** @public */
-export declare function Portal(props: PortalProps): ReactPortal | null
+type LabelOwnProps = LabelStyleProps & TextOverflowStyleProps;
 /** @public */
-export declare interface PortalContextValue {
-  version: 0.0
-  boundaryElement: HTMLElement | null
-  element: HTMLElement | null
-  elements?: Record<string, HTMLElement | null | undefined>
-}
+type LabelElementType = 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'li' | 'p' | 'span' | ComponentType;
 /** @public */
-export declare interface PortalProps {
-  children: ReactNode
-  /**
-   * @beta This API might change. DO NOT USE IN PRODUCTION.
-   */
-  __unstable_name?: string
+type LabelProps<E extends LabelElementType = LabelElementType> = Props<LabelOwnProps, E>;
+/**
+ * Typographic labels.
+ *
+ * @public
+ */
+declare function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(props: LabelProps<E>): React.JSX.Element;
+/** @public */
+interface LayerProviderProps {
+  children?: ReactNode;
+  zOffset?: ResponsiveProp$1<number>;
 }
 /** @public */
-export declare function PortalProvider(props: PortalProviderProps): React.JSX.Element
+declare function LayerProvider(props: LayerProviderProps): React.JSX.Element;
 /** @public */
-export declare interface PortalProviderProps {
-  children: ReactNode
-  element?: HTMLElement | null
-  /**
-   * @beta
-   */
-  __unstable_elements?: Record<string, HTMLElement | null | undefined>
+interface LayerContextValue {
+  version: 0.0;
+  isTopLayer: boolean;
+  level?: number;
+  registerChild: (childLevel?: number) => () => void;
+  size: number;
+  zIndex: number;
 }
 /** @public */
-export declare type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
-  E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>,
-  P & {
-    as?: E
-  }
->
+declare function useLayer(): LayerContextValue;
+/** @public */
+declare const DEFAULT_RADIO_ELEMENT = "input";
+/** @public */
+type RadioOwnProps = {
+  customValidity?: string;
+};
+/** @public */
+type RadioElementType = 'input' | ComponentType;
+/** @public */
+type RadioProps<E extends RadioElementType = RadioElementType> = Props<RadioOwnProps, E>;
 /**
  * The `Radio` component allows the user to select one option from a set.
  *
  * @public
  */
-export declare function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(
-  props: RadioProps<E>,
-): React.JSX.Element
+declare function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(props: RadioProps<E>): React.JSX.Element;
 /** @public */
-export declare type RadioElementType = 'input' | ComponentType
+declare const DEFAULT_SELECT_ELEMENT = "select";
 /** @public */
-export declare type RadioOwnProps = {
-  customValidity?: string
-}
+type SelectOwnProps = SelectStyleProps & {
+  customValidity?: string;
+  readOnly?: boolean;
+};
 /** @public */
-export declare type RadioProps<E extends RadioElementType = RadioElementType> = Props<
-  RadioOwnProps,
-  E
->
+type SelectElementType = 'select' | ComponentType;
+/** @public */
+type SelectProps<E extends SelectElementType = SelectElementType> = Props<SelectOwnProps, E>;
+/**
+ * The `Select` component provides control of options.
+ *
+ * @public
+ */
+declare function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(props: SelectProps<E>): React.JSX.Element;
+/** @beta */
+declare const DEFAULT_SKELETON_ELEMENT = "div";
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+type SkeletonOwnProps = SkeletonStyleProps & {
+  animated?: boolean;
+  delay?: number;
+};
+/** @beta */
+type SkeletonElementType = 'div' | 'span' | ComponentType;
+/** @beta */
+type SkeletonProps<E extends SkeletonElementType = SkeletonElementType> = Props<SkeletonOwnProps, E>;
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+declare function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON_ELEMENT>(props: SkeletonProps<E>): React.JSX.Element;
+/** @beta */
+declare const DEFAULT_CODE_SKELETON_ELEMENT = "div";
+/** @beta */
+type CodeSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp$1<FontCodeSize>;
+};
+/** @beta */
+type CodeSkeletonElementType = SkeletonElementType;
 /**
- * @internal
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare function _raf(fn: () => void): () => void
+type CodeSkeletonProps<E extends CodeSkeletonElementType = CodeSkeletonElementType> = Props<CodeSkeletonOwnProps, E>;
 /**
- * @internal
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare function _raf2(fn: () => void): () => void
-export {ResponsiveProp}
+declare function CodeSkeleton<E extends CodeSkeletonElementType = typeof DEFAULT_CODE_SKELETON_ELEMENT>(props: CodeSkeletonProps<E>): React.JSX.Element;
+/** @beta */
+declare const DEFAULT_HEADING_SKELETON_ELEMENT = "div";
+/** @beta */
+type HeadingSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp$1<FontHeadingSize>;
+};
+/** @beta */
+type HeadingSkeletonElementType = SkeletonElementType;
 /**
- * @internal
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare interface ResponsiveWidthStyleProps {
-  $width: (number | 'auto')[]
-}
+type HeadingSkeletonProps<E extends HeadingSkeletonElementType = HeadingSkeletonElementType> = Props<HeadingSkeletonOwnProps, E>;
 /**
- * The `Root` component.
- *
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(
-  props: RootProps<E>,
-): React.JSX.Element
-/** @public */
-export declare type RootElementType = 'html' | 'div'
-/** @public */
-export declare type RootOwnProps = RootStyleProps
-/** @public */
-export declare type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>
-/** @public */
-export declare function RootProvider(props: RootProviderProps): React.JSX.Element
-/** @public */
-export declare interface RootProviderProps {
-  boundaryElement: HTMLElement | null
-  children?: ReactNode
-  portalElement: HTMLElement | null
-  scheme: ColorScheme
-  tone: CardTone
-}
+declare function HeadingSkeleton<E extends HeadingSkeletonElementType = typeof DEFAULT_HEADING_SKELETON_ELEMENT>(props: HeadingSkeletonProps<E>): React.JSX.Element;
+/** @beta */
+declare const DEFAULT_LABEL_SKELETON_ELEMENT = "div";
+/** @beta */
+type LabelSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp$1<FontLabelSize>;
+};
+/** @beta */
+type LabelSkeletonElementType = SkeletonElementType;
 /**
- * The `Select` component provides control of options.
- *
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(
-  props: SelectProps<E>,
-): React.JSX.Element
-/** @public */
-export declare function Selectable<
-  E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT,
->(props: SelectableProps<E>): React.JSX.Element
-/** @public */
-export declare type SelectableElementType = 'a' | 'button' | 'span' | ComponentType
-/** @public */
-export declare interface SelectableOwnProps extends SelectableStyleProps {
-  selected?: boolean
-}
-/** @public */
-export declare type SelectableProps<E extends SelectableElementType = SelectableElementType> =
-  Props<SelectableOwnProps, E>
-/** @public */
-export declare type SelectElementType = 'select' | ComponentType
-/** @public */
-export declare type SelectOwnProps = SelectStyleProps & {
-  customValidity?: string
-  readOnly?: boolean
-}
-/** @public */
-export declare type SelectProps<E extends SelectElementType = SelectElementType> = Props<
-  SelectOwnProps,
-  E
->
+type LabelSkeletonProps<E extends LabelSkeletonElementType = LabelSkeletonElementType> = Props<LabelSkeletonOwnProps, E>;
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON_ELEMENT>(
-  props: SkeletonProps<E>,
-): React.JSX.Element
+declare function LabelSkeleton<E extends LabelSkeletonElementType = typeof DEFAULT_LABEL_SKELETON_ELEMENT>(props: LabelSkeletonProps<E>): React.JSX.Element;
+/** @beta */
+declare const DEFAULT_TEXT_SKELETON_ELEMENT = "div";
+/** @beta */
+type TextSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp$1<FontTextSize>;
+};
 /** @beta */
-export declare type SkeletonElementType = 'div' | 'span' | ComponentType
+type TextSkeletonElementType = SkeletonElementType;
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare type SkeletonOwnProps = SkeletonStyleProps & {
-  animated?: boolean
-  delay?: number
-}
-/** @beta */
-export declare type SkeletonProps<E extends SkeletonElementType = SkeletonElementType> = Props<
-  SkeletonOwnProps,
-  E
->
+type TextSkeletonProps<E extends TextSkeletonElementType = TextSkeletonElementType> = Props<TextSkeletonOwnProps, E>;
 /**
- * Indicate that something is loading for an indeterminate amount of time.
- *
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(
-  props: SpinnerProps<E>,
-): React.JSX.Element
-/** @public */
-export declare type SpinnerElementType = 'div' | 'span' | ComponentType
-/** @public */
-export declare type SpinnerOwnProps = {
-  muted?: boolean
-  size?: ResponsiveProp<FontTextSize>
-}
-/** @public */
-export declare type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<
-  SpinnerOwnProps,
-  E
->
-/** @public */
-export declare function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEMENT>(
-  props: SrOnlyProps<E>,
-): React.JSX.Element
+declare function TextSkeleton<E extends TextSkeletonElementType = typeof DEFAULT_TEXT_SKELETON_ELEMENT>(props: TextSkeletonProps<E>): React.JSX.Element;
 /** @public */
-export declare type SrOnlyElementType = 'span' | ComponentType
+declare const DEFAULT_SPINNER_ELEMENT = "div";
 /** @public */
-export declare type SrOnlyOwnProps = {}
+type SpinnerOwnProps = {
+  muted?: boolean;
+  size?: ResponsiveProp$1<FontTextSize>;
+};
 /** @public */
-export declare type SrOnlyProps<E extends SrOnlyElementType = SrOnlyElementType> = Props<
-  SrOnlyOwnProps,
-  E
->
-/**
- * The `Stack` component is used to place elements on top of each other.
- *
- * @public
- */
-export declare function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>(
-  props: StackProps<E>,
-): React.JSX.Element
-/** @public */
-export declare type StackElementType = BoxElementType
+type SpinnerElementType = 'div' | 'span' | ComponentType;
 /** @public */
-export declare type StackOwnProps = StackStyleProps
-/** @public */
-export declare type StackProps<E extends StackElementType = StackElementType> = Props<
-  StackOwnProps,
-  E
->
+type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<SpinnerOwnProps, E>;
 /**
- * The `Switch` component allows the user to toggle a setting on and off.
- *
- * Extends all properties of an `<input type="checkbox" />` element, except type.
+ * Indicate that something is loading for an indeterminate amount of time.
  *
  * @public
  */
-export declare function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEMENT>(
-  props: SwitchProps<E>,
-): React.JSX.Element
-/** @public */
-export declare type SwitchElementType = 'input' | ComponentType
-/** @public */
-export declare type SwitchOwnProps = {
-  indeterminate?: boolean
-}
-/** @public */
-export declare type SwitchProps<E extends SwitchElementType = SwitchElementType> = Props<
-  SwitchOwnProps,
-  E
->
-declare function Syntax(props: SyntaxProps): React.JSX.Element
-declare interface SyntaxProps {
-  language?: string
-  value: React.ReactNode
-}
-/** @public */
-export declare function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(
-  props: TabProps<E>,
-): React.JSX.Element
+declare function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(props: SpinnerProps<E>): React.JSX.Element;
 /** @public */
-export declare type TabElementType = 'button' | ComponentType
+declare const DEFAULT_SR_ONLY_ELEMENT = "span";
 /** @public */
-export declare function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_ELEMENT>(
-  props: TabListProps<E>,
-): React.JSX.Element
+type SrOnlyOwnProps = {};
 /** @public */
-export declare type TabListElementType = 'div' | 'span' | ComponentType
-/** @public */
-export declare interface TabListOwnProps extends FlexOwnProps {
-  autoActivate?: boolean
-}
-/** @public */
-export declare type TabListProps<E extends TabListElementType = TabListElementType> = Omit<
-  Props<TabListOwnProps, E>,
-  'role'
->
-/** @public */
-export declare interface TabOwnProps extends ButtonOwnProps {
-  /**
-   * The `id` of the corresponding `TabPanel` component.
-   */
-  'aria-controls': string
-  'id': string
-  'focused'?: boolean
-  'label'?: React.ReactNode
-  'onActivate'?: () => void
-}
+type SrOnlyElementType = 'span' | ComponentType;
 /** @public */
-export declare function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANEL_ELEMENT>(
-  props: TabPanelProps<E>,
-): React.JSX.Element
+type SrOnlyProps<E extends SrOnlyElementType = SrOnlyElementType> = Props<SrOnlyOwnProps, E>;
 /** @public */
-export declare type TabPanelElementType = 'div' | 'span' | ComponentType
+declare function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEMENT>(props: SrOnlyProps<E>): React.JSX.Element;
 /** @public */
-export declare type TabPanelOwnProps = BoxOwnProps & {
-  /**
-   * The `id` of the corresponding `Tab` component.
-   */
-  'aria-labelledby': string
-  'id': string
-}
+declare const DEFAULT_SWITCH_ELEMENT = "input";
 /** @public */
-export declare type TabPanelProps<E extends TabPanelElementType = TabPanelElementType> = Props<
-  TabPanelOwnProps,
-  E
->
+type SwitchOwnProps = {
+  indeterminate?: boolean;
+};
 /** @public */
-export declare type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>
+type SwitchElementType = 'input' | ComponentType;
 /** @public */
-export declare type TagType = keyof React.JSX.IntrinsicElements
+type SwitchProps<E extends SwitchElementType = SwitchElementType> = Props<SwitchOwnProps, E>;
 /**
- * The `Text` component is an agile, themed typographic element.
+ * The `Switch` component allows the user to toggle a setting on and off.
  *
- * @public
- */
-declare function Text_2<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
-  props: TextProps<E>,
-): React.JSX.Element
-export {Text_2 as Text}
-/**
- * A multiline text input.
+ * Extends all properties of an `<input type="checkbox" />` element, except type.
  *
  * @public
  */
-export declare function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(
-  props: TextAreaProps<E>,
-): React.JSX.Element
+declare function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEMENT>(props: SwitchProps<E>): React.JSX.Element;
 /** @public */
-export declare type TextAreaElementType = 'textarea' | ComponentType
+declare const DEFAULT_INLINE_CODE_ELEMENT = "code";
 /** @public */
-export declare type TextAreaOwnProps = TextAreaStyleProps & {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  customValidity?: string
+interface InlineCodeProps {
+  children: React.ReactNode;
+  /** Language to use for syntax highlighting. */
+  language?: string;
 }
-/** @public */
-export declare type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<
-  TextAreaOwnProps,
-  E
->
-/** @public */
-export declare type TextElementType =
-  | 'div'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
-  | 'li'
-  | 'p'
-  | 'span'
-  | 'summary'
-  | 'time'
-  | ComponentType
-/**
- * Single line text input.
- *
- * @public
- */
-export declare function TextInput<
-  E extends TextInputElementType = typeof DEFAULT_TEXT_INPUT_ELEMENT,
->(props: TextInputProps<E>): React.JSX.Element
 /** @public */
-export declare type TextInputClearButtonProps = Omit<
-  ButtonProps<'button'>,
-  'as' | 'onClick' | 'onMouseDown'
->
+declare function InlineCode(props: InlineCodeProps): React.JSX.Element;
 /** @public */
-export declare type TextInputElementType = 'input' | ComponentType
+declare const DEFAULT_TEXT_AREA_ELEMENT = "textarea";
 /** @public */
-export declare type TextInputOwnProps = InputStyleProps & {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  /**
-   * @beta
-   */
-  clearButton?: boolean | TextInputClearButtonProps
-  customValidity?: string
-  icon?: ElementType_2 | ReactNode
-  iconRight?: ElementType_2 | ReactNode
+type TextAreaOwnProps = TextAreaStyleProps & {
   /**
    * @beta
    */
-  onClear?: () => void
-  prefix?: ReactNode
-  suffix?: ReactNode
-  /**
-   * @deprecated Use `fontWeight` instead
-   */
-  weight?: FontWeight
-}
-/** @public */
-export declare type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<
-  TextInputOwnProps,
-  E
->
-/** @public */
-export declare type TextOwnProps = TextStyleProps & TextOverflowStyleProps
+  __unstable_disableFocusRing?: boolean;
+  customValidity?: string;
+};
 /** @public */
-export declare type TextProps<E extends TextElementType = TextElementType> = Props<TextOwnProps, E>
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function TextSkeleton<
-  E extends TextSkeletonElementType = typeof DEFAULT_TEXT_SKELETON_ELEMENT,
->(props: TextSkeletonProps<E>): React.JSX.Element
-/** @beta */
-export declare type TextSkeletonElementType = SkeletonElementType
-/** @beta */
-export declare type TextSkeletonOwnProps = SkeletonOwnProps & {
-  size?: ResponsiveProp<FontTextSize>
-}
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare type TextSkeletonProps<E extends TextSkeletonElementType = TextSkeletonElementType> =
-  Props<TextSkeletonOwnProps, E>
-/**
- * The `Toast` component gives feedback to users when an action has taken place.
- *
- * Toasts can be closed with a close button, or auto-dismiss when the duration expires.
- *
- * @internal
- */
-export declare function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
-  props: ToastProps<E>,
-): React.JSX.Element
+type TextAreaElementType = 'textarea' | ComponentType;
 /** @public */
-export declare interface ToastContextValue {
-  version: 0.0
-  /**
-   * Creates or updates a toast notification.
-   * If a toast with the same ID already exists, it will be updated.
-   * If an ID is not provided, a random one will be generated.
-   * The returned ID can be used to programatically update a toast.
-   */
-  push: (params: ToastParams) => string
-}
-/** @internal */
-export declare type ToastElementType = 'li' | ComponentType
-/** @internal */
-declare type ToastLayerElementType = 'ul' | ComponentType
-/** @internal */
-declare type ToastLayerOwnProps = GapStyleProps & PaddingStyleProps
-/** @internal */
-declare type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElementType> = Props<
-  ToastLayerOwnProps,
-  E
->
-/** @internal */
-export declare type ToastOwnProps = RadiusStyleProps & {
-  closable?: boolean
-  description?: ReactNode
-  onClose?: () => void
-  title?: ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
-  duration?: number
-}
-/** @public */
-export declare interface ToastParams {
-  closable?: boolean
-  description?: ReactNode
-  duration?: number
-  id?: string
-  onClose?: () => void
-  title?: ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
-}
-/** @internal */
-export declare type ToastProps<E extends ToastElementType = ToastElementType> = Props<
-  ToastOwnProps,
-  E
->
-/** @public */
-export declare function ToastProvider(props: ToastProviderProps): React.JSX.Element
-/** @public */
-export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
-  children?: React.ReactNode
-  zOffset?: ResponsiveProp<number>
-}
+type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<TextAreaOwnProps, E>;
 /**
- * Tooltips display information when hovering, focusing or tapping.
+ * A multiline text input.
  *
  * @public
  */
-export declare function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
-  props: TooltipProps<E>,
-): React.JSX.Element
+declare function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(props: TextAreaProps<E>): React.JSX.Element;
 /**
  * @beta
  */
-export declare const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null>
-/**
- * @beta
- */
-export declare interface TooltipDelayGroupContextValue {
-  handleOpenChange: (params: {open: boolean; id: string; immediate?: boolean}) => void
-  visibleTooltipId: string | undefined
+interface TooltipDelayGroupContextValue {
+  handleOpenChange: (params: {
+    open: boolean;
+    id: string;
+    immediate?: boolean;
+  }) => void;
+  visibleTooltipId: string | undefined;
 }
 /**
- * @public
- * Provides context for a group of tooltip elements that should share a delay
- * which temporarily becomes 0ms after the first tooltip of the group opens.
+ * @beta
  */
-export declare function TooltipDelayGroupProvider(
-  props: TooltipDelayGroupProviderProps,
-): React.JSX.Element
+declare const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null>;
 /**
  * @public
  * */
-export declare interface TooltipDelayGroupProviderProps {
-  children?: ReactNode
+interface TooltipDelayGroupProviderProps {
+  children?: ReactNode;
   /**
    * Handles the delays to open or close a tooltip inside a group
    *
@@ -2194,294 +1621,134 @@ export declare interface TooltipDelayGroupProviderProps {
    *
    * @public
    */
-  delay?: Delay
+  delay?: Delay;
 }
-/** @public */
-export declare type TooltipElementType = 'div' | 'span' | ComponentType
-/** @public */
-export declare type TooltipOwnProps = LayerOwnProps &
-  RadiusStyleProps &
-  ShadowStyleProps & {
-    /**
-     * Whether the tooltip should animate in and out.
-     *
-     * @beta
-     * @defaultValue false
-     */
-    animate?: boolean
-    /** @deprecated Will be removed in the next major version */
-    arrow?: boolean
-    boundaryElement?: HTMLElement | null
-    children?: React.ReactElement<
-      React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>
-    >
-    content?: React.ReactNode
-    /**
-     * 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
-    disabled?: boolean
-    fallbackPlacements?: Placement[]
-    hotkeys?: string[]
-    placement?: Placement
-    /** Whether or not to render the tooltip in a portal element. */
-    portal?: boolean | string
-    scheme?: ColorScheme
-    text?: React.ReactNode
-    textSize?: ResponsiveProp<FontTextSize>
-    tone?: CardTone
-  }
-/** @public */
-export declare type TooltipProps<E extends TooltipElementType = TooltipElementType> = Props<
-  TooltipOwnProps,
-  E
->
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
-  props: TreeProps<E>,
-): React.JSX.Element
 /**
- * @beta
+ * @public
+ * Provides context for a group of tooltip elements that should share a delay
+ * which temporarily becomes 0ms after the first tooltip of the group opens.
  */
-export declare interface TreeContextValue {
-  version: 0.0
-  focusedElement: HTMLElement | null
-  gap: ResponsiveProp<Space>
-  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
-  state: TreeState
-}
-/** @beta */
-export declare type TreeElementType = 'div' | ComponentType
+declare function TooltipDelayGroupProvider(props: TooltipDelayGroupProviderProps): React.JSX.Element;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITEM_ELEMENT>(
-  props: TreeItemProps<E>,
-): React.JSX.Element
-/** @beta */
-export declare type TreeItemElementType = 'a' | 'li' | ComponentType
-/** @beta */
-export declare type TreeItemOwnProps = SelectableOwnProps & {
-  expanded?: boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  icon?: ElementType_2
-  /**
-   * Allows passing a custom element type to the link component
-   * @internal
-   */
-  linkAs?: SelectableElementType
-  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>
-  padding?: ResponsiveProp<Space>
-  gap?: ResponsiveProp<Space>
-  /** @deprecated Use `gap` instead */
-  space?: never
-  text?: ReactNode
-  weight?: FontWeight
+declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null;
+/** @public */
+interface BoundaryElementProviderProps {
+  children: ReactNode;
+  element: HTMLElement | null;
 }
+/** @public */
+declare function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element;
+/** @public */
+type BoundaryElementContextValue = HTMLElement | null;
+/** @public */
+declare function useBoundaryElement(): {
+  version: 0.0;
+  element: BoundaryElementContextValue;
+};
 /** @beta */
-export declare type TreeItemProps<E extends TreeItemElementType = TreeItemElementType> = Props<
-  TreeItemOwnProps,
-  E
->
+declare const DEFAULT_ELEMENT_QUERY_ELEMENT = "div";
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
+ * DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare type TreeOwnProps = Omit<StackOwnProps, 'position'>
+type ElementQueryOwnProps = {
+  media?: number[];
+};
 /** @beta */
-export declare type TreeProps<E extends TreeElementType = TreeElementType> = Props<TreeOwnProps, E>
+type ElementQueryElementType = 'div' | ComponentType;
 /**
+ * DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface TreeState {
-  [key: string]:
-    | {
-        element: HTMLElement
-        expanded: boolean
-      }
-    | undefined
-}
-/** @public */
-export declare function useBoundaryElement(): {
-  version: 0.0
-  element: BoundaryElementContextValue
-}
-/** @public */
-export declare function useCard(): CardContextValue
-/** @public */
-export declare function useClickOutsideEvent(
-  listener: ClickOutsideEventListener | false | undefined,
-  elementsArg?: () => ClickOutsideEventElements,
-  boundaryElement?: () => HTMLElement | null,
-): void
+type ElementQueryProps<E extends ElementQueryElementType = ElementQueryElementType> = Props<ElementQueryOwnProps, E>;
 /**
+ * DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function useCustomValidity(
-  ref: {
-    current: null | {
-      setCustomValidity: (validity: string) => void
-    }
-  },
-  customValidity: string | undefined,
-): void
+declare function ElementQuery<E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT>(props: ElementQueryProps<E>): React.JSX.Element;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
+ * DO NOT USE IN PRODUCTION
  * @beta
  */
-export declare function useDialog(): DialogContextValue
+type ErrorBoundaryProps = PropsWithChildren<{
+  onCatch: (params: {
+    error: Error;
+    info: ErrorInfo;
+  }) => void;
+}>;
 /**
- * Subscribe to the size of a DOM element.
+ * DO NOT USE IN PRODUCTION
  * @beta
  */
-export declare function useElementSize(element: HTMLElement | null): ElementSize | null
+interface ErrorBoundaryState {
+  error: Error | null;
+}
 /**
- * Adds global keydown event listener to the window.
- *
- * @param onKeyDown - The function to call when a keydown event is triggered.
- * @param options - The options to pass to the addEventListener function (example, capture: true)
+ * DO NOT USE IN PRODUCTION
  * @beta
  */
-export declare function useGlobalKeyDown(
-  onKeyDown: (event: KeyboardEvent) => void,
-  options?: AddEventListenerOptions,
-): void
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  state: ErrorBoundaryState;
+  static displayName: string;
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+  componentDidCatch(error: Error, info: ErrorInfo): void;
+  render(): ReactNode;
+}
 /** @public */
-export declare function useLayer(): LayerContextValue
-/**
- * Efficiently subscribes to `window.matchMedia` queries
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * @public
- */
-export declare function useMatchMedia(
-  mediaQueryString: `(${string})`,
-  getServerSnapshot?: () => boolean,
-): boolean
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function useMediaIndex(): Breakpoint
+interface PortalProps {
+  children: ReactNode;
+  /**
+   * @beta This API might change. DO NOT USE IN PRODUCTION.
+   */
+  __unstable_name?: string;
+}
 /** @public */
-export declare function usePortal(): PortalContextValue
-/**
- * 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://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
- */
-export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
+declare function Portal(props: PortalProps): ReactPortal | null;
+/** @public */
+interface PortalProviderProps {
+  children: ReactNode;
+  element?: HTMLElement | null;
+  /**
+   * @beta
+   */
+  __unstable_elements?: Record<string, HTMLElement | null | undefined>;
+}
+/** @public */
+declare function PortalProvider(props: PortalProviderProps): React.JSX.Element;
+/** @public */
+interface PortalContextValue {
+  version: 0.0;
+  boundaryElement: HTMLElement | null;
+  element: HTMLElement | null;
+  elements?: Record<string, HTMLElement | null | undefined>;
+}
+/** @public */
+declare function usePortal(): PortalContextValue;
+/** @public */
+declare const DEFAULT_ROOT_ELEMENT = "html";
+/** @public */
+type RootOwnProps = RootStyleProps;
+/** @public */
+type RootElementType = 'html' | 'div';
+/** @public */
+type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>;
 /**
- * Returns true if motion should be reduced
- *
- * @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-reduced-motion: no-preference)` since it's the most common scheme (https://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-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
- * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
+ * The `Root` component.
  *
  * @public
  */
-export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
+declare function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(props: RootProps<E>): React.JSX.Element;
 /** @public */
-export declare function useToast(): ToastContextValue
-/**
- * @beta
- */
-export declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null
-/**
- * @beta
- */
-export declare function useTree(): TreeContextValue
-export {vars}
-/** @beta */
-export declare function VirtualList<
-  E extends VirtualListElementType = typeof DEFAULT_VIRTUAL_LIST_ELEMENT,
-  Item = any,
->(props: VirtualListProps<E, Item>): React.JSX.Element
-/** @beta */
-export declare interface VirtualListChangeOpts {
-  fromIndex: number
-  gap: number
-  itemHeight: number
-  scrollHeight: number
-  scrollTop: number
-  toIndex: number
-}
-/** @beta */
-export declare type VirtualListElementType = 'div' | ComponentType
-/** @beta */
-export declare interface VirtualListOwnProps<Item = any> {
-  gap?: Space
-  getItemKey?: (item: Item, itemIndex: number) => string
-  items?: Item[]
-  onChange?: (opts: VirtualListChangeOpts) => void
-  renderItem?: (item: Item) => ReactNode
+interface RootProviderProps {
+  boundaryElement: HTMLElement | null;
+  children?: ReactNode;
+  portalElement: HTMLElement | null;
+  scheme: ColorScheme;
+  tone: CardTone;
 }
-/** @beta */
-export declare type VirtualListProps<
-  E extends VirtualListElementType = VirtualListElementType,
-  Item = any,
-> = Props<VirtualListOwnProps<Item>, E>
-export * from '@sanity/ui-tokens'
-export * from '@sanity/ui-tokens/constants'
-export {}
+/** @public */
+declare function RootProvider(props: RootProviderProps): React.JSX.Element;
+export { AVATAR_COLORS, AVATAR_SIZE, Assign, Autocomplete, AutocompleteElementType, AutocompleteInputChangeMsg, AutocompleteInputFoocusMsg, AutocompleteMsg, AutocompleteOpenButtonProps, AutocompleteOwnProps, AutocompleteProps, AutocompleteRootBlurMsg, AutocompleteRootClearMsg, AutocompleteRootEscapeMsg, AutocompleteRootOpenMsg, AutocompleteRootSetActiveValueMsg, AutocompleteRootSetListFocusedMsg, AutocompleteState, AutocompleteValueChangeMsg, Avatar, AvatarCounter, AvatarCounterElementType, AvatarCounterOwnProps, AvatarCounterProps, AvatarElementType, AvatarOwnProps, AvatarPosition, AvatarProps, AvatarStack, AvatarStackChild, AvatarStackElementType, AvatarStackOwnProps, AvatarStackProps, BG_PATTERNS, BORDER_STYLE, BORDER_WIDTH, BREAKPOINTS, BUTTON_MODES, Badge, BadgeElementType, BadgeOwnProps, BadgeProps, BaseAutocompleteOption, BoundaryElementContextValue, BoundaryElementProvider, BoundaryElementProviderProps, Box, BoxElementType, BoxOwnProps, BoxProps, Breadcrumbs, BreadcrumbsElementType, BreadcrumbsOwnProps, BreadcrumbsProps, Button, ButtonElementType, ButtonOwnProps, ButtonProps, ButtonTextAlign, CARD_TONES, COLOR_SCHEMES, COLOR_VARIANTS, CONTAINER, CONTAINER_SCALE, Card, CardContextValue, CardElementType, CardOwnProps, CardProps, CardProvider, Checkbox, CheckboxElementType, CheckboxOwnProps, CheckboxProps, ClickOutsideEventElements, ClickOutsideEventListener, Code, CodeElementType, CodeOwnProps, CodeProps, CodeSkeleton, CodeSkeletonElementType, CodeSkeletonOwnProps, CodeSkeletonProps, ComponentType, Container, ContainerElementType, ContainerOwnProps, ContainerProps, DEFAULT_AUTOCOMPLETE_ELEMENT, DEFAULT_AVATAR_COUNTER_ELEMENT, DEFAULT_AVATAR_ELEMENT, DEFAULT_AVATAR_STACK_ELEMENT, DEFAULT_BADGE_ELEMENT, DEFAULT_BOX_ELEMENT, DEFAULT_BREADCRUMBS_ELEMENT, DEFAULT_BUTTON_ELEMENT, DEFAULT_CARD_ELEMENT, DEFAULT_CHECKBOX_ELEMENT, DEFAULT_CODE_ELEMENT, DEFAULT_CODE_SKELETON_ELEMENT, DEFAULT_CONTAINER_ELEMENT, DEFAULT_DIALOG_ELEMENT, DEFAULT_ELEMENT_QUERY_ELEMENT, DEFAULT_FLEX_ELEMENT, DEFAULT_GRID_ELEMENT, DEFAULT_HEADING_ELEMENT, DEFAULT_HEADING_SKELETON_ELEMENT, DEFAULT_HOTKEYS_ELEMENT, DEFAULT_INLINE_CODE_ELEMENT, DEFAULT_INLINE_ELEMENT, DEFAULT_KBD_ELEMENT, DEFAULT_LABEL_ELEMENT, DEFAULT_LABEL_SKELETON_ELEMENT, DEFAULT_LAYER_ELEMENT, DEFAULT_MENU_DIVIDER_ELEMENT, DEFAULT_MENU_ELEMENT, DEFAULT_MENU_GROUP_ELEMENT, DEFAULT_MENU_ITEM_ELEMENT, DEFAULT_RADIO_ELEMENT, DEFAULT_ROOT_ELEMENT, DEFAULT_SELECTABLE_ELEMENT, DEFAULT_SELECT_ELEMENT, DEFAULT_SKELETON_ELEMENT, DEFAULT_SPINNER_ELEMENT, DEFAULT_SR_ONLY_ELEMENT, DEFAULT_STACK_ELEMENT, DEFAULT_SWITCH_ELEMENT, DEFAULT_TAB_ELEMENT, DEFAULT_TAB_LIST_ELEMENT, DEFAULT_TAB_PANEL_ELEMENT, DEFAULT_TEXT_AREA_ELEMENT, DEFAULT_TEXT_ELEMENT, DEFAULT_TEXT_INPUT_ELEMENT, DEFAULT_TEXT_SKELETON_ELEMENT, DEFAULT_TOAST_ELEMENT, DEFAULT_TOOLTIP_ELEMENT, DEFAULT_TREE_ELEMENT, DEFAULT_TREE_ITEM_ELEMENT, DEFAULT_VIRTUAL_LIST_ELEMENT, Delay, Dialog, DialogContext, DialogContextValue, DialogElementType, DialogOwnProps, DialogPosition, DialogProps, DialogProvider, DialogProviderProps, ELEMENT_TONES, ElementQuery, ElementQueryElementType, ElementQueryOwnProps, ElementQueryProps, ElementRectValue, ElementSize, ElementType, EmptyProps, ErrorBoundary, ErrorBoundaryProps, ErrorBoundaryState, FONT_CODE_SIZE, FONT_HEADING_SIZE, FONT_LABEL_SIZE, FONT_TEXT_SIZE, FONT_WEIGHT, Flex, FlexElementType, FlexOwnProps, FlexProps, Grid, GridElementType, GridOwnProps, GridProps, HUES, Heading, HeadingElementType, HeadingOwnProps, HeadingProps, HeadingSkeleton, HeadingSkeletonElementType, HeadingSkeletonOwnProps, HeadingSkeletonProps, Hotkeys, HotkeysElementType, HotkeysOwnProps, HotkeysProps, Inline, InlineCode, InlineCodeProps, InlineElementType, InlineOwnProps, InlineProps, KBD, KBDElementType, KBDOwnProps, KBDProps, Label, LabelElementType, LabelOwnProps, LabelProps, LabelSkeleton, LabelSkeletonElementType, LabelSkeletonOwnProps, LabelSkeletonProps, Layer, LayerContextValue, LayerElementType, LayerOwnProps, LayerProps, LayerProvider, LayerProviderProps, LazySyntax, Menu, MenuButton, MenuButtonProps, MenuDivider, MenuDividerElementType, MenuDividerOwnProps, MenuDividerProps, MenuElementType, MenuGroup, MenuGroupElementType, MenuGroupOwnProps, MenuGroupProps, MenuItem, MenuItemElementType, MenuItemOwnProps, MenuItemProps, MenuOwnProps, MenuProps, Placement, Popover, PopoverElementType, PopoverMargins, PopoverOwnProps, PopoverProps, PopoverUpdateCallback, PopoverWidth, Portal, PortalContextValue, PortalProps, PortalProvider, PortalProviderProps, Props, RADIUS, Radio, RadioElementType, RadioOwnProps, RadioProps, type ResponsiveProp, ResponsiveWidthStyleProps, Root, RootElementType, RootOwnProps, RootProps, RootProvider, RootProviderProps, SHADOW, SPACE, Select, SelectElementType, SelectOwnProps, SelectProps, Selectable, SelectableElementType, SelectableOwnProps, SelectableProps, Skeleton, SkeletonElementType, SkeletonOwnProps, SkeletonProps, Spinner, SpinnerElementType, SpinnerOwnProps, SpinnerProps, SrOnly, SrOnlyElementType, SrOnlyOwnProps, SrOnlyProps, Stack, StackElementType, StackOwnProps, StackProps, Switch, SwitchElementType, SwitchOwnProps, SwitchProps, TINTS, Tab, TabElementType, TabList, TabListElementType, TabListOwnProps, TabListProps, TabOwnProps, TabPanel, TabPanelElementType, TabPanelOwnProps, TabPanelProps, TabProps, TagType, Text, TextArea, TextAreaElementType, TextAreaOwnProps, TextAreaProps, TextElementType, TextInput, TextInputClearButtonProps, TextInputElementType, TextInputOwnProps, TextInputProps, TextOwnProps, TextProps, TextSkeleton, TextSkeletonElementType, TextSkeletonOwnProps, TextSkeletonProps, Toast, ToastContextValue, ToastElementType, ToastOwnProps, ToastParams, ToastProps, ToastProvider, ToastProviderProps, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupContextValue, TooltipDelayGroupProvider, TooltipDelayGroupProviderProps, TooltipElementType, TooltipOwnProps, TooltipProps, Tree, TreeContextValue, TreeElementType, TreeItem, TreeItemElementType, TreeItemOwnProps, TreeItemProps, TreeOwnProps, TreeProps, TreeState, VirtualList, VirtualListChangeOpts, VirtualListElementType, VirtualListOwnProps, VirtualListProps, _CODE_TOKEN_KEYS, _CardCompatProviderComponent, _CardInternalContextValue, _ElementSizeListener, _ElementSizeObserver, _ElementSizeSubscriber, _MediaStore, _elementSizeObserver, _getResponsiveProp, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, attemptFocus, containsOrEqualsElement, focusFirstDescendant, focusLastDescendant, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, useBoundaryElement, useCard, useClickOutsideEvent, useCustomValidity, useDialog, useElementSize, useGlobalKeyDown, useLayer, useMatchMedia, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useToast, useTooltipDelayGroup, useTree, vars };
+//# sourceMappingURL=index.d.ts.map