@sanity/ui 4.0.0-beta.7 → 4.0.0-next.0

package/dist/index.d.ts

@@ -1,403 +1,13 @@
-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 _BUTTON_STATES: readonly ["enabled", "hovered", "pressed", "disabled"];
-/** @internal */
-declare const _CODE_TOKEN_KEYS: readonly ["atrule", "attrName", "attrValue", "attribute", "boolean", "builtin", "cdata", "char", "class", "className", "constant", "deleted", "doctype", "entity", "function", "hexcode", "id", "important", "inserted", "keyword", "number", "operator", "property", "pseudoClass", "pseudoElement", "regex", "selector", "string", "symbol", "tag", "unit", "url", "variable"];
-/** @internal */
-declare const _INPUT_VALIDITY: readonly ["valid", "invalid"];
-/**
- * Available avatar color mode values for the `_avatarColor` collection.
- *
- * @remarks
- * Avatar colors map to color hues: gray, red, orange, yellow, green,
- * cyan, blue, purple, magenta.
- *
- * @public
- */
-declare const AVATAR_COLORS: _$_sanity_color0.ColorHueKey[];
-/** @public */
-declare const AVATAR_SIZE: readonly [0, 1, 2, 3];
-/** @beta */
-declare const BG_PATTERNS: readonly ["checkered", "halftone", "grid"];
-/** @public */
-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"];
-/**
- * Available card tone mode values for the `_cardTone` collection.
- *
- * @public
- */
-declare const CARD_TONES: readonly ["default", "neutral", "primary", "suggest", "positive", "caution", "critical", "transparent"];
-/**
- * Available color scheme mode values for the `_colorScheme` collection.
- *
- * @public
- */
-declare const COLOR_SCHEMES: readonly ["light", "dark"];
-/**
- * Available color variant types.
- *
- * @public
- */
-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'];
-/** @public */
-declare const ELEMENT_TONES: readonly ["default", "neutral", "primary", "suggest", "positive", "caution", "critical"];
-/** @public */
-declare const FONT_CODE_SIZE: readonly [0, 1, 2, 3, 4];
-/** @public */
-declare const FONT_HEADING_SIZE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-/** @public */
-declare const FONT_LABEL_SIZE: readonly [0, 1, 2, 3, 4, 5];
-/** @public */
-declare const FONT_TEXT_SIZE: readonly [0, 1, 2, 3, 4];
-/** @public */
-declare const FONT_WEIGHT: readonly ["regular", "medium", "semibold", "bold"];
-/** @public */
-declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, "full"];
-/** @public */
-declare const SHADOW: readonly [0, 1, 2, 3, 4, 5];
-/** @public */
-declare const SPACE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-/**
- * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
- *
- * @public
- */
-type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U;
-/** @public */
-type EmptyProps = {};
-/** @public */
-type TagType = keyof React.JSX.IntrinsicElements;
-/** @public */
-type ComponentType<P = any> = React.FunctionComponent<P> | React.ComponentClass<P> | React.ExoticComponent<P>;
-/** @public */
-type ElementType<P> = TagType | ComponentType<P>;
-/** @public */
-type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>, P & {
-  as?: E;
-}>;
-/**
- * Placement of floating UI elements.
- *
- * @public
- */
-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 */
-declare const DEFAULT_BOX_ELEMENT = "div";
-/** @public */
-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 `Box` component is a basic layout wrapper component which provides utility properties
- * for flex, margins and padding.
- *
- * @public
- */
-declare function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(props: BoxProps<E>): React.JSX.Element;
-/** @public */
-declare const DEFAULT_CARD_ELEMENT = "div";
-/** @public */
-interface CardOwnProps extends Omit<CardStyleProps, 'tone'> {
-  /**
-   * Do not use in production.
-   * @beta
-   * @deprecated Use `__unstable_pattern` instead.
-   */
-  __unstable_checkered?: boolean;
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_focusRing?: boolean;
-  disabled?: boolean;
-  pressed?: boolean;
-  selected?: boolean;
-  target?: string;
-  tone?: CardTone | 'inherit';
-}
-/** @public */
-type CardElementType = BoxElementType;
-/** @public */
-type CardProps<E extends CardElementType = CardElementType> = Props<CardOwnProps, E>;
-/**
- * The `Card` component acts much like a `Box`, but with a background and foreground color.
- * Components within a `Card` inherit its colors.
- *
- * @public
- */
-declare function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(props: CardProps<E>): React.JSX.Element;
-/** @public */
-declare const DEFAULT_LAYER_ELEMENT = "div";
-/** @public */
-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 */
-type LayerElementType = CardElementType;
-/** @public */
-type LayerProps<E extends LayerElementType = LayerElementType> = Props<LayerOwnProps, E>;
-/** @public */
-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 */
-type PopoverLayerProps = Assign<HTMLMotionProps<'div'>, PopoverLayerOwnProps>;
-/**
- * @beta
- */
-type PopoverMargins = [number, number, number, number];
-/** @beta */
-type PopoverUpdateCallback = () => void;
-/** @public */
-type PopoverWidth = Exclude<ContainerWidth, 'auto'>;
-/** @public */
-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 */
-type PopoverElementType = 'div';
-/** @public */
-type PopoverProps = Assign<PopoverLayerProps, PopoverOwnProps>;
-/**
- * The `Popover` component is used to display some content on top of another.
- *
- * @public
- */
-declare function Popover(props: PopoverProps): React.JSX.Element;
-/** @public */
-declare const DEFAULT_TEXT_ELEMENT = "div";
-/** @public */
-type TextOwnProps = TextStyleProps & TextOverflowStyleProps;
-/** @public */
-type TextElementType = 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'li' | 'p' | 'span' | 'summary' | 'time' | ComponentType;
-/** @public */
-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 */
-declare const DEFAULT_TOOLTIP_ELEMENT = "div";
-/** @public */
-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>;
+import { A as ThemeColorMutedTone, At as ThemeColorSchemeKey$1, B as ThemeColorBase, C as ThemeColorSpotKey, D as ThemeColorSelectableState, Dt as ThemeColorCardToneKey, E as ThemeColorSelectable, F as ThemeColorCardState, H as ThemeColorToneKey, I as ThemeColorButton, L as ThemeColorButtonState, M as ThemeColorInputState, Mt as ThemeColorStateToneKey, N as ThemeColorInputStates, O as ThemeColorSelectableStates, P as ThemeColorCard, R as ThemeColorButtonStates, S as ThemeColorSpot, T as ThemeColorSolidTone, U as ThemeColorGenericState, V as ThemeColorName, W as ThemeAvatar, b as ThemeColorScheme, d as ThemeColorBuilderOpts, g as Theme$1, j as ThemeColorInput, k as ThemeColorMuted, m as RootTheme$1, pt as CSSObject, u as PartialThemeColorBuilderOpts, v as ThemeInput, w as ThemeColorSolid, wt as ThemeColorAvatarColorKey, x as ThemeColorSchemes, xt as ThemeFontWeightKey$1, y as ThemeColor, z as ThemeColorButtonTones } from "./_chunks/rgba.js";
+import { $ as BoxOwnProps, $t as GridAutoRows, A as FlexOwnProps, An as createColorTheme, At as TagType, B as containsOrEqualsElement, Bt as ResponsiveMarginProps, C as StackProps, Cn as ThemeFontKey, Ct as MenuDivider, D as GridOwnProps, Dn as ThemeFonts, Dt as ElementType, E as Grid, En as ThemeFontWeightKey, Et as ComponentType, F as Button, Fn as rgbToHex, Ft as ResponsiveBoxProps, G as isHTMLSelectElement, Gt as GridItemColumn, H as isHTMLButtonElement, Ht as ResponsiveRadiusProps, I as ButtonOwnProps, In as rgbToHsl, It as ResponsiveFlexItemProps, J as TabListProps, Jt as GridItemRow, K as isHTMLTextAreaElement, Kt as GridItemColumnEnd, L as ButtonProps, Ln as rgba, Lt as ResponsiveFlexProps, M as Card, Mn as hslToRgb, Mt as MenuProps, N as CardOwnProps, Nn as multiply, Nt as Delay, O as GridProps, On as ThemeLayer, Ot as EmptyProps, P as CardProps, Pn as parseColor, Pt as ResponsiveBorderProps, Q as Box, Qt as GridAutoFlow, R as usePrefersDark, Rn as screen, Rt as ResponsiveGridItemProps, S as StackOwnProps, Sn as ThemeFont, St as CardTone, T as SpinnerProps, Tn as ThemeFontWeight, Tt as Assign, U as isHTMLElement, Ut as ResponsiveShadowProps, V as isHTMLAnchorElement, Vt as ResponsivePaddingProps, W as isHTMLInputElement, Wt as ResponsiveWidthProps, X as InlineOwnProps, Xt as GridItemRowStart, Y as Inline, Yt as GridItemRowEnd, Z as InlineProps, Zt as GridAutoCols, _ as Text, _n as Styles, _t as PopoverWidth, a as LayerProvider, an as BoxDisplay, at as ButtonTone, b as TextAlign, bn as ThemeColorSchemeKey, bt as PopoverMargins, c as useTheme_v2, cn as BoxSizing, ct as MenuItemOwnProps, d as Tooltip, dn as Radius, dt as MenuGroupOwnProps, en as FlexAlign, et as BoxProps, f as TooltipProps, fn as BaseTheme, ft as MenuGroupProps, g as TextInputType, gn as RootTheme, gt as PopoverUpdateCallback, h as TextInputProps, hn as RGB, ht as PopoverProps, i as PortalProps, in as FlexWrap, it as ButtonTextAlign, j as FlexProps, jn as hexToRgb, jt as Menu, k as Flex, kn as ThemeShadow, kt as Props, l as ThemeProvider, ln as Hotkeys, lt as MenuItemProps, m as TextInputClearButtonProps, mn as HSL, mt as Popover, n as PortalProviderProps, nn as FlexJustify, nt as TabProps, o as LayerProviderProps, on as BoxHeight, ot as ButtonWidth, p as TextInput, pn as BoxShadow, pt as SelectableTone, q as TabList, qt as GridItemColumnStart, r as Portal, rn as FlexValue, rt as ButtonMode, s as useTheme, sn as BoxOverflow, st as MenuItem, t as PortalProvider, tn as FlexDirection, tt as Tab, u as ThemeProviderProps, un as HotkeysProps, ut as MenuGroup, v as TextOwnProps, vn as Theme, vt as Layer, w as Spinner, wn as ThemeFontSize, wt as MenuDividerProps, x as Stack, xn as ThemeColorSyntax, xt as Placement, y as TextProps, yn as ThemeColorButtonModeKey, yt as LayerProps, z as _isEnterToClickElement, zn as studioTheme, zt as ResponsiveGridProps } from "./_chunks/portalProvider.js";
+import { Component, ElementType as ElementType$1, HTMLProps, PropsWithChildren, ReactNode, Ref } from "react";
 /**
- * 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 */
-declare const DEFAULT_BUTTON_ELEMENT = "button";
-/** @public */
-interface ButtonOwnProps extends ButtonStyleProps {
-  'data-ui'?: string;
-  'fontSize'?: ResponsiveProp$1<FontTextSize>;
-  'icon'?: React.ElementType | React.ReactNode;
-  'iconRight'?: React.ElementType | React.ReactNode;
-  'loading'?: boolean;
-  'muted'?: boolean;
-  'pressed'?: boolean;
-  /** @deprecated Use `pressed` instead. */
-  'selected'?: boolean;
-  'textAlign'?: TextOwnProps['align'];
-  'text'?: React.ReactNode;
-  'textOverflow'?: TextOwnProps['textOverflow'];
-  'textWeight'?: TextOwnProps['weight'];
-  'tooltip'?: Omit<TooltipProps<'div'>, 'as' | 'children'>;
-}
-/** @public */
-type ButtonElementType = 'a' | 'button' | 'label' | ComponentType;
-/** @public */
-type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<ButtonOwnProps, E>;
-/** @public */
-declare function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(props: ButtonProps<E>): React.JSX.Element;
-/** @public */
-declare const DEFAULT_TEXT_INPUT_ELEMENT = "input";
-/** @public */
-type TextInputClearButtonProps = Omit<ButtonProps<'button'>, 'as' | 'onClick' | 'onMouseDown'>;
-/** @public */
-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 */
-type TextInputElementType = 'input' | ComponentType;
-/** @public */
-type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<TextInputOwnProps, E>;
+type AutocompleteOpenButtonProps = ButtonOwnProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>;
 /**
- * Single line text input.
- *
  * @public
  */
-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;
 }
@@ -475,71 +85,82 @@ interface AutocompleteValueChangeMsg {
  * @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 & {
+/**
+ * @public
+ */
+interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {
   border?: boolean;
   customValidity?: string;
   filterOption?: (query: string, option: Option) => boolean;
-  icon?: ElementType$1 | ReactNode; /** @beta */
-  listBox?: BoxOwnProps;
+  fontSize?: number | number[];
+  icon?: ElementType$1 | ReactNode;
+  id: string;
+  /** @beta */
+  listBox?: BoxProps;
   loading?: boolean;
   onChange?: (value: string) => void;
   onQueryChange?: (query: string | null) => void;
-  onSelect?: (value: string) => void; /** @beta */
-  openButton?: boolean | AutocompleteOpenButtonProps; /** @beta */
-  openOnFocus?: boolean; /** The options to render. */
+  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'>;
+  padding?: number | number[];
+  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> & Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>;
   prefix?: ReactNode;
-  radius?: Radius | Radius[]; /** @beta */
-  relatedElements?: HTMLElement[]; /** The callback function for rendering each option. */
-  renderOption?: (option: Option) => React.JSX.Element; /** @beta */
+  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;
+  }, ref: Ref<HTMLDivElement>) => ReactNode;
   renderValue?: (value: string, option?: Option) => string;
   suffix?: ReactNode;
+  /** The current value. */
   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'>;
+declare const Autocomplete: <Option extends BaseAutocompleteOption>(props: AutocompleteProps<Option> & Omit<HTMLProps<HTMLInputElement>, 'aria-activedescendant' | 'aria-autocomplete' | 'aria-expanded' | 'aria-owns' | 'as' | 'autoCapitalize' | 'autoComplete' | 'autoCorrect' | 'id' | 'inputMode' | 'onChange' | 'onSelect' | 'popover' | 'prefix' | 'ref' | 'role' | 'spellCheck' | 'type' | 'value'> & {
+  ref?: Ref<HTMLInputElement>;
+}) => React.JSX.Element;
+/**
+ * @beta
+ */
+interface BreadcrumbsProps {
   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 */
+  separator?: React.ReactNode;
+  gap?: number | number[];
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
+  space?: number | number[];
+}
+/**
+ * @beta
+ */
+declare const Breadcrumbs: import("react").ForwardRefExoticComponent<BreadcrumbsProps & Omit<import("react").HTMLProps<HTMLOListElement>, "as" | "ref" | "type"> & import("react").RefAttributes<HTMLOListElement>>;
+/**
+ * @public
+ */
 type DialogPosition = 'absolute' | 'fixed';
-/** @public */
-declare const DEFAULT_DIALOG_ELEMENT = "div";
-/** @public */
-interface DialogOwnProps extends Omit<ContainerStyleProps, 'id' | 'position' | 'radius' | 'shadow'>, Omit<LayerOwnProps, 'id' | 'position' | 'radius' | 'shadow' | 'width'> {
+/**
+ * @public
+ */
+interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
   /**
    * @beta
    */
@@ -548,61 +169,55 @@ interface DialogOwnProps extends Omit<ContainerStyleProps, 'id' | 'position' | '
    * @beta
    */
   __unstable_hideCloseButton?: boolean;
-  /**
-   * Whether the dialog should animate in on mount.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean;
-  cardRadius?: ResponsiveProp$1<Radius>;
-  contentRef?: ForwardedRef<HTMLDivElement>;
-  footer?: ReactNode;
-  header?: ReactNode;
+  cardRadius?: Radius | Radius[];
+  cardShadow?: number | number[];
+  contentRef?: React.ForwardedRef<HTMLDivElement>;
+  footer?: React.ReactNode;
+  header?: React.ReactNode;
   id: string;
   /** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
   onActivate?: LayerProps['onActivate'];
   onClickOutside?: () => void;
   onClose?: () => void;
-  open?: boolean;
   portal?: string;
-  position?: ResponsiveProp$1<DialogPosition>;
+  position?: DialogPosition | DialogPosition[];
+  scheme?: ThemeColorSchemeKey$1;
+  zOffset?: number | number[];
   /**
-   * @deprecated Not in use – will be removed in the next major version.
+   * Whether the dialog should animate in on mount.
+   *
+   * @beta
+   * @defaultValue false
    */
-  shadow?: ResponsiveProp$1<Shadow>;
+  animate?: boolean;
 }
-/** @public */
-type DialogElementType = 'div' | 'span' | ComponentType;
-/** @public */
-type DialogProps<E extends DialogElementType = DialogElementType> = Props<DialogOwnProps, E>;
 /**
  * The Dialog component.
  *
  * @public
  */
-declare function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEMENT>(props: DialogProps<E>): React.JSX.Element;
+declare const Dialog: import("react").ForwardRefExoticComponent<Omit<DialogProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "id" | "width">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 interface DialogContextValue {
   version: 0.0;
-  position?: ResponsiveProp$1<DialogPosition>;
-  zOffset?: ResponsiveProp$1<number>;
+  position?: DialogPosition | DialogPosition[];
+  zOffset?: number | number[];
 }
 /**
  * @internal
  */
-declare const DialogContext: Context<DialogContextValue>;
+declare const DialogContext: import("react").Context<DialogContextValue>;
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 interface DialogProviderProps {
-  children?: ReactNode;
-  position?: ResponsiveProp$1<DialogPosition>;
-  zOffset?: ResponsiveProp$1<number>;
+  children?: React.ReactNode;
+  position?: DialogPosition | DialogPosition[];
+  zOffset?: number | number[];
 }
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -614,235 +229,184 @@ declare function DialogProvider(props: DialogProviderProps): React.JSX.Element;
  * @beta
  */
 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>;
 /**
- * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
- *
- * @example
- * ```tsx
- * import {Hotkeys} from '@sanity/ui'
- *
- * <Hotkeys keys={['⌘', 'K']} />
- * ```
- *
  * @public
  */
-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 = {
+interface MenuButtonProps {
   /**
    * @beta Do not use in production.
    */
   __unstable_disableRestoreFocusOnClose?: boolean;
-  button: ReactElement<ButtonProps>;
+  /**
+   * @deprecated Use `popover={{boundaryElement: element}}` instead.
+   */
+  boundaryElement?: HTMLElement;
+  button: React.JSX.Element;
   id: string;
-  menu?: ReactElement;
+  menu?: React.JSX.Element;
   onClose?: () => void;
   onOpen?: () => void;
+  /**
+   * @deprecated Use `popover={{placement: 'top'}}` instead.
+   */
+  placement?: Placement;
   popover?: Omit<PopoverProps, 'content' | 'open'>;
-  ref?: ForwardedRef<HTMLButtonElement | null>;
-};
+  /**
+   * @deprecated Use `popover={{scheme: 'dark'}}` instead.
+   */
+  popoverScheme?: ThemeColorSchemeKey$1;
+  /**
+   * @deprecated Use `popover={{radius: 2}}` instead.
+   */
+  popoverRadius?: Radius | Radius[];
+  /**
+   * @beta Do not use in production.
+   * @deprecated Use `popover={{portal: true}}` instead.
+   */
+  portal?: boolean;
+  /**
+   * @deprecated Use `popover={{preventOverflow: true}}` instead.
+   */
+  preventOverflow?: boolean;
+}
 /**
  * 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;
+declare const MenuButton: import("react").ForwardRefExoticComponent<MenuButtonProps & import("react").RefAttributes<HTMLButtonElement | null>>;
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxOwnProps, 'children'> {
+  animated?: boolean;
+  delay?: number;
 }
-/** @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>;
 /**
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
- *
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-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;
+declare const Skeleton: import("react").ForwardRefExoticComponent<Omit<SkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "height">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+interface TextSkeletonProps extends SkeletonProps {
+  size?: number | number[];
 }
-/** @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 & {
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+interface LabelSkeletonProps extends SkeletonProps {
+  size?: number | number[];
+}
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+interface HeadingSkeletonProps extends SkeletonProps {
+  size?: number | number[];
+}
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+interface CodeSkeletonProps extends SkeletonProps {
+  size?: number | number[];
+}
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+declare const TextSkeleton: import("react").ForwardRefExoticComponent<Omit<TextSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "height" | "size">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+declare const LabelSkeleton: import("react").ForwardRefExoticComponent<Omit<LabelSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "height" | "size">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+declare const HeadingSkeleton: import("react").ForwardRefExoticComponent<Omit<HeadingSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "height" | "size">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+declare const CodeSkeleton: import("react").ForwardRefExoticComponent<Omit<CodeSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "height" | "size">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @public
+ */
+interface TabPanelProps extends BoxOwnProps {
   /**
-   * The `id` of the corresponding `Tab` component.
+   * The `id` of the correlating `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 & {
+}
+/**
+ * @public
+ */
+declare const TabPanel: import("react").ForwardRefExoticComponent<Omit<TabPanelProps & Omit<import("react").HTMLProps<HTMLDivElement>, "aria-labelledby" | "as" | "id" | "role">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @public
+ */
+interface ToastProps {
   closable?: boolean;
-  description?: ReactNode;
-  onClose?: () => void;
-  title?: ReactNode;
+  description?: React.ReactNode;
+  onClose: () => void;
+  radius?: number | number[];
+  title?: React.ReactNode;
   status?: 'error' | 'warning' | 'success' | 'info';
   duration?: number;
-};
-/** @internal */
-type ToastElementType = 'li' | ComponentType;
-/** @internal */
-type ToastProps<E extends ToastElementType = ToastElementType> = Props<ToastOwnProps, E>;
+  updatedAt?: number;
+}
 /**
  * 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.
+ * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
  *
- * @internal
+ * @public
+ */
+declare function Toast(props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title' | 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'>): React.JSX.Element;
+/**
+ * @public
+ */
+interface ToastLayerProps {
+  children: React.ReactNode;
+  padding?: number | number[];
+  paddingX?: number | number[];
+  paddingY?: number | number[];
+  gap?: number | number[];
+}
+/**
+ * @public
  */
-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>;
+  zOffset?: number | number[];
 }
-/** @public */
+/**
+ * @public
+ */
 declare function ToastProvider(props: ToastProviderProps): React.JSX.Element;
-/** @public */
+/**
+ * @public
+ */
 interface ToastParams {
   closable?: boolean;
-  description?: ReactNode;
+  description?: React.ReactNode;
   duration?: number;
   id?: string;
   onClose?: () => void;
-  title?: ReactNode;
+  title?: React.ReactNode;
   status?: 'error' | 'warning' | 'success' | 'info';
 }
-/** @public */
+/**
+ * @public
+ */
 interface ToastContextValue {
   version: 0.0;
   /**
@@ -853,78 +417,57 @@ interface ToastContextValue {
    */
   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>;
 /**
- * The `Stack` component is used to place elements on top of each other.
- *
  * @public
  */
-declare function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>(props: StackProps<E>): React.JSX.Element;
-/** @beta */
-declare const DEFAULT_TREE_ELEMENT = "div";
+declare function useToast(): ToastContextValue;
 /**
  * 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>;
+interface TreeProps {
+  gap?: number | number[];
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
+  space?: number | number[];
+}
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-declare function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(props: TreeProps<E>): React.JSX.Element;
-/** @public */
-declare const DEFAULT_SELECTABLE_ELEMENT = "button";
-/** @public */
-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 & {
+declare const Tree: import("react").ForwardRefExoticComponent<TreeProps & Omit<import("react").HTMLProps<HTMLUListElement>, "align" | "as" | "height" | "ref" | "role" | "wrap"> & import("react").RefAttributes<HTMLUListElement>>;
+/**
+ * @beta
+ */
+interface TreeItemProps {
   expanded?: boolean;
-  fontSize?: ResponsiveProp$1<FontTextSize>;
-  icon?: ElementType$1;
+  fontSize?: number | number[];
+  icon?: React.ElementType;
   /**
    * 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>;
+  linkAs?: ElementType;
+  /**
+   * Additional props for the link element that is rendered when `href` is set — e.g. `next/link`'s
+   * `prefetch` together with `linkAs={Link}`. Props controlled by `TreeItem` itself (`href`,
+   * `role`, `tabIndex`, `aria-expanded` and the ref) take precedence.
+   */
+  linkProps?: React.HTMLProps<HTMLAnchorElement> & Record<string, unknown>;
+  padding?: number | number[];
+  gap?: number | number[];
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
+  space?: number | number[];
+  text?: React.ReactNode;
+  weight?: ThemeFontWeightKey$1;
+}
 /**
  * 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;
+declare function TreeItem(props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>): React.JSX.Element;
 /**
  * @beta
  */
@@ -940,43 +483,22 @@ interface TreeState {
 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;
+  gap: number | number[];
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
+  space: number | number[];
   state: TreeState;
 }
 /**
  * @beta
  */
 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;
 /**
  * @internal
  */
@@ -988,68 +510,69 @@ declare function _raf2(fn: () => void): () => void;
 /**
  * @internal
  */
-declare function _isEnterToClickElement(element: HTMLElement): boolean;
-/**
- * @internal
- */
-declare function isHTMLElement(node: unknown): node is HTMLElement;
-/**
- * @internal
- */
-declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement;
+declare function _hasFocus(element: HTMLElement): boolean;
 /**
  * @internal
  */
-declare function isHTMLInputElement(element: unknown): element is HTMLInputElement;
+declare function isFocusable(element: HTMLElement): boolean;
 /**
  * @internal
  */
-declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement;
+declare function attemptFocus(element: HTMLElement): boolean;
 /**
  * @internal
  */
-declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement;
+declare function focusFirstDescendant(element: HTMLElement): boolean;
 /**
  * @internal
  */
-declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement;
+declare function focusLastDescendant(element: HTMLElement): boolean;
 /**
  * @internal
  */
-declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean;
+declare function _isScrollable(el: Node): boolean;
+/** @beta */
+type ArrayPropPrimitive = string | number | boolean | undefined | null;
 /**
- * @internal
+ * @deprecated instead of `useArrayProp(width)` use `Array.isArray(width) ? width : [width]` instead
+ * @beta
  */
-declare function _hasFocus(element: HTMLElement): boolean;
+declare function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(val: T | T[] | undefined, defaultVal?: T[]): T[];
 /**
- * @internal
+ * @public
  */
-declare function isFocusable(element: HTMLElement): boolean;
+type ClickOutsideListener = (event: MouseEvent) => void;
 /**
- * @internal
+ * @public
  */
-declare function attemptFocus(element: HTMLElement): boolean;
+type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[];
 /**
- * @internal
+ * @public
+ * @deprecated replaced by the new `useClickOutsideEvent` hook, instead of:
+ * ```tsx
+ * const [button, setButtonElement] = useState(null)
+ * useClickOutside((event) => {}, [button])
+ * return <button ref={setButtonElement} />
+ * ```
+ * do:
+ * ```tsx
+ * const buttonRef = useRef()
+ * useClickOutsideEvent((event) => {}, () => [buttonRef.current])
+ * return <button ref={buttonRef} />
+ * ```
  */
-declare function focusFirstDescendant(element: HTMLElement): boolean;
+declare function useClickOutside(listener: ClickOutsideListener, elementsArg?: ClickOutsideElements, boundaryElement?: HTMLElement | null): (el: HTMLElement | null) => void;
 /**
- * @internal
+ * @public
  */
-declare function focusLastDescendant(element: HTMLElement): boolean;
+type ClickOutsideEventListener = (event: MouseEvent) => void;
 /**
- * @internal
+ * @public
  */
-declare function _getResponsiveProp<T>(val: ResponsiveProp$1<T> | undefined, defaultVal?: ResponsivePropArray<T>): ResponsivePropArray<T>;
+type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[];
 /**
- * @internal
+ * @public
  */
-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
@@ -1059,6 +582,13 @@ declare function useCustomValidity(ref: {
     setCustomValidity: (validity: string) => void;
   };
 }, customValidity: string | undefined): void;
+/**
+ * Subscribe to the rect of a DOM element.
+ * @beta
+ *
+ * @deprecated Use `useElementSize` instead
+ */
+declare function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null;
 /**
  * @beta
  */
@@ -1100,6 +630,17 @@ declare const _elementSizeObserver: _ElementSizeObserver;
  * @beta
  */
 declare function useElementSize(element: HTMLElement | null): ElementSize | null;
+/**
+ * @beta
+ * @deprecated use `useImperativeHandle` instead
+ * @example
+ * ```diff
+ * -const ref = useForwardedRef(forwardedRef)
+ * +const ref = useRef(null)
+ * +useImperativeHandle(forwardedRef, () => ref.current)
+ * ```
+ */
+declare function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.RefObject<T | null>;
 /**
  * Adds global keydown event listener to the window.
  *
@@ -1111,7 +652,7 @@ declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void, opt
 /**
  * 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)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * @public
  */
@@ -1121,29 +662,17 @@ declare function useMatchMedia(mediaQueryString: `(${string})`, getServerSnapsho
  */
 interface _MediaStore {
   subscribe: (onStoreChange: () => void) => () => void;
-  getSnapshot: () => Breakpoint;
+  getSnapshot: () => number;
 }
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-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;
+declare function useMediaIndex(): number;
 /**
  * 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)
+ * @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://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
  * Chrome supports reading the `prefers-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
@@ -1152,409 +681,286 @@ declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean;
  * @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 */
+/**
+ * @internal
+ */
+declare const _ResizeObserver: typeof ResizeObserver;
+/**
+ * @public
+ */
 type AvatarPosition = 'top' | 'bottom' | 'inside';
-/** @public */
-declare const DEFAULT_AVATAR_ELEMENT = "span";
-/** @public */
+/**
+ * @public
+ */
+type AvatarSize = 0 | 1 | 2 | 3;
+/**
+ * @public
+ */
+type AvatarStatus = 'online' | 'editing' | 'inactive';
+/**
+ * @public
+ */
 interface AvatarOwnProps {
   /** @beta */
   __unstable_hideInnerStroke?: boolean;
   animateArrowFrom?: AvatarPosition;
   arrowPosition?: AvatarPosition;
-  color?: AvatarColor;
+  color?: ThemeColorAvatarColorKey;
   initials?: string;
   onImageLoadError?: (event: Error) => void;
-  size?: ResponsiveProp$1<AvatarSize>;
+  size?: AvatarSize | AvatarSize[];
   src?: string;
+  /**
+   * The status of the entity this Avatar represents.
+   * @alpha
+   */
+  status?: AvatarStatus;
   title?: string;
 }
-/** @public */
-type AvatarElementType = 'a' | 'button' | 'div' | 'span' | ComponentType;
-/** @public */
-type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props<AvatarOwnProps, E>;
+/**
+ * @public
+ */
+type AvatarProps<E extends ElementType = 'div'> = 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 */
-declare const DEFAULT_AVATAR_COUNTER_ELEMENT = "span";
-/** @public */
-interface AvatarCounterOwnProps {
+declare const Avatar: <E extends ElementType = 'div'>(props: AvatarProps<E>) => React.JSX.Element;
+/**
+ * @public
+ */
+interface AvatarCounterProps {
   count: number;
-  size?: ResponsiveProp$1<AvatarSize>;
+  size?: AvatarSize | AvatarSize[];
+  /** @deprecated No longer supported. */
+  tone?: 'navbar';
 }
-/** @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[];
+/**
+ * @public
+ */
+declare const AvatarCounter: import("react").ForwardRefExoticComponent<AvatarCounterProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @public
+ */
+interface AvatarStackProps {
+  children: React.ReactNode;
   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>;
+  size?: AvatarSize | AvatarSize[];
+  /** @deprecated No longer supported. */
+  tone?: 'navbar';
 }
-/** @public */
-type BadgeElementType = 'div' | 'span' | ComponentType;
-/** @public */
-type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<BadgeOwnProps, E>;
 /**
- * Badges are used to tag resources.
- *
  * @public
  */
-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;
+declare const AvatarStack: import("react").ForwardRefExoticComponent<AvatarStackProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @internal
+ */
+interface AvatarRootStyleProps {
+  $color: ThemeColorAvatarColorKey;
 }
-/** @internal */
-type _CardCompatProviderComponent = ComponentType$1<{
-  children?: ReactNode;
-  tone: CardTone | 'inherit';
-  scheme: ColorScheme;
-}>;
-/** @internal */
-interface _CardInternalContextValue {
-  CompatProvider?: _CardCompatProviderComponent;
-  root: boolean;
+/**
+ * @internal
+ */
+interface ResponsiveAvatarSizeStyleProps {
+  $size: AvatarSize[];
 }
-/** @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>;
 /**
- * Checkboxes allow the user to select one or more items from a set.
- *
  * @public
+ * @deprecated No longer used
  */
-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>;
+type BadgeMode = 'default' | 'outline';
 /**
- * The `Container` component wraps content layout in a defined set of widths.
+ * @public
+ */
+type BadgeTone = ThemeColorStateToneKey;
+/**
+ * @public
+ */
+interface BadgeOwnProps extends BoxOwnProps, ResponsiveRadiusProps {
+  fontSize?: number | number[];
+  /** @deprecated No longer used. */
+  mode?: BadgeMode;
+  tone?: BadgeTone;
+}
+/**
+ * @public
+ */
+type BadgeProps<E extends ElementType = 'div'> = Props<BadgeOwnProps, E>;
+/**
+ * Badges are used to tag resources.
  *
  * @public
  */
-declare function Container<E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT>(props: ContainerProps<E>): React.JSX.Element;
+declare const Badge: <E extends ElementType = 'div'>(props: BadgeProps<E>) => React.JSX.Element;
 /**
  * @internal
  */
-interface ResponsiveWidthStyleProps {
-  $width: (number | 'auto')[];
+interface CardStyleProps {
+  $checkered: boolean;
+  $focusRing: boolean;
+  $muted: boolean;
+  $tone: ThemeColorToneKey;
 }
-/** @public */
-declare const DEFAULT_GRID_ELEMENT = "div";
-/** @public */
-type GridOwnProps = GridStyleProps;
-/** @public */
-type GridElementType = BoxElementType;
-/** @public */
-type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>;
 /**
- * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
- *
  * @public
  */
-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>;
+interface CheckboxProps {
+  indeterminate?: boolean;
+  customValidity?: string;
+}
 /**
- * Typographic headings.
+ * Checkboxes allow the user to select one or more items from a set.
  *
  * @public
  */
-declare function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(props: HeadingProps<E>): React.JSX.Element;
-/** @public */
-declare const DEFAULT_INLINE_ELEMENT = "div";
-/** @public */
-type InlineOwnProps = InlineStyleProps;
-/** @public */
-type InlineElementType = BoxElementType;
-/** @public */
-type InlineProps<E extends InlineElementType = InlineElementType> = Props<InlineOwnProps, E>;
+declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").HTMLProps<HTMLInputElement>, "as" | "type"> & CheckboxProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 /**
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
- *
  * @public
  */
-declare function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(props: InlineProps<E>): React.JSX.Element;
-/** @public */
-declare const DEFAULT_KBD_ELEMENT = "kbd";
-/** @public */
-type KBDOwnProps = KBDStyleProps;
-/** @public */
-type KBDElementType = 'kbd' | ComponentType;
-/** @public */
-type KBDProps<E extends KBDElementType = KBDElementType> = Props<KBDOwnProps, E>;
+interface CodeOwnProps {
+  /** Define the language to use for syntax highlighting. */
+  language?: string;
+  size?: number | number[];
+  weight?: string;
+}
 /**
- * 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 */
-declare const DEFAULT_LABEL_ELEMENT = "div";
-/** @public */
-type LabelOwnProps = LabelStyleProps & TextOverflowStyleProps;
-/** @public */
-type LabelElementType = 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label' | 'li' | 'p' | 'span' | ComponentType;
-/** @public */
-type LabelProps<E extends LabelElementType = LabelElementType> = Props<LabelOwnProps, E>;
+type CodeProps<E extends ElementType = 'pre'> = Props<CodeOwnProps, E>;
 /**
- * Typographic labels.
+ * @public
+ */
+declare const Code: <E extends ElementType = 'pre'>(props: CodeProps<E>) => React.JSX.Element;
+/**
+ * @public
+ */
+interface ContainerOwnProps extends BoxOwnProps, ResponsiveWidthProps {}
+/**
+ * @public
+ */
+type ContainerProps<E extends ElementType = 'div'> = Props<ContainerOwnProps, E>;
+/**
+ * The `Container` component wraps content layout in a defined set of widths.
  *
  * @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>;
+declare const Container: <E extends ElementType = 'div'>(props: ContainerProps<E>) => React.JSX.Element;
+/**
+ * @internal
+ */
+interface ResponsiveWidthStyleProps {
+  $width: (number | 'auto')[];
 }
-/** @public */
-declare function LayerProvider(props: LayerProviderProps): React.JSX.Element;
-/** @public */
-interface LayerContextValue {
-  version: 0.0;
-  isTopLayer: boolean;
-  level?: number;
-  registerChild: (childLevel?: number) => () => void;
-  size: number;
-  zIndex: number;
+/**
+ * @public
+ */
+interface HeadingOwnProps {
+  accent?: boolean;
+  align?: TextAlign | TextAlign[];
+  muted?: boolean;
+  size?: number | number[];
+  /**
+   * Controls how overflowing text is treated.
+   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
+   * @beta
+   */
+  textOverflow?: 'ellipsis';
+  weight?: ThemeFontWeightKey$1;
 }
-/** @public */
-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
  */
-declare function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(props: RadioProps<E>): React.JSX.Element;
-/** @public */
-declare const DEFAULT_SELECT_ELEMENT = "select";
-/** @public */
-type SelectOwnProps = SelectStyleProps & {
-  customValidity?: string;
-  readOnly?: boolean;
-};
-/** @public */
-type SelectElementType = 'select' | ComponentType;
-/** @public */
-type SelectProps<E extends SelectElementType = SelectElementType> = Props<SelectOwnProps, E>;
+type HeadingProps<E extends ElementType = 'div'> = Props<HeadingOwnProps, E>;
 /**
- * The `Select` component provides control of options.
+ * Typographic headings.
  *
  * @public
  */
-declare function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(props: SelectProps<E>): React.JSX.Element;
-/** @beta */
-declare const DEFAULT_SKELETON_ELEMENT = "div";
+declare const Heading: <E extends ElementType = 'div'>(props: HeadingProps<E>) => React.JSX.Element;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-type SkeletonOwnProps = SkeletonStyleProps & {
-  animated?: boolean;
-  delay?: number;
-};
-/** @beta */
-type SkeletonElementType = 'div' | 'span' | ComponentType;
-/** @beta */
-type SkeletonProps<E extends SkeletonElementType = SkeletonElementType> = Props<SkeletonOwnProps, E>;
+interface KBDOwnProps {
+  fontSize?: number | number[];
+  padding?: number | number[];
+  radius?: Radius | Radius[];
+}
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-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;
+type KBDProps<E extends ElementType = 'kbd'> = Props<KBDOwnProps, E>;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * Used to define some text as keyboard input.
+ *
+ * @public
  */
-type CodeSkeletonProps<E extends CodeSkeletonElementType = CodeSkeletonElementType> = Props<CodeSkeletonOwnProps, E>;
+declare const KBD: <E extends ElementType = 'kbd'>(props: KBDProps<E>) => React.JSX.Element;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-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;
+interface LabelOwnProps {
+  accent?: boolean;
+  align?: TextAlign | TextAlign[];
+  muted?: boolean;
+  size?: number | number[];
+  /**
+   * Controls how overflowing text is treated.
+   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
+   * @beta
+   */
+  textOverflow?: 'ellipsis';
+  weight?: ThemeFontWeightKey$1;
+}
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-type HeadingSkeletonProps<E extends HeadingSkeletonElementType = HeadingSkeletonElementType> = Props<HeadingSkeletonOwnProps, E>;
+type LabelProps<E extends ElementType = 'div'> = Props<LabelOwnProps, E>;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * Typographic labels.
+ *
+ * @public
  */
-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;
+declare const Label: <E extends ElementType = 'div'>(props: LabelProps<E>) => React.JSX.Element;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-type LabelSkeletonProps<E extends LabelSkeletonElementType = LabelSkeletonElementType> = Props<LabelSkeletonOwnProps, E>;
+interface RadioProps {
+  customValidity?: string;
+}
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * The `Radio` component allows the user to select one option from a set.
+ *
+ * @public
  */
-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 */
-type TextSkeletonElementType = SkeletonElementType;
+declare const Radio: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").HTMLProps<HTMLInputElement>, "as" | "type"> & RadioProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-type TextSkeletonProps<E extends TextSkeletonElementType = TextSkeletonElementType> = Props<TextSkeletonOwnProps, E>;
+interface SelectProps {
+  fontSize?: number | number[];
+  gap?: number | number[];
+  padding?: number | number[];
+  radius?: Radius | Radius[];
+  /**
+   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   */
+  space?: number | number[];
+  customValidity?: string;
+}
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * The `Select` component provides control of options.
+ *
+ * @public
  */
-declare function TextSkeleton<E extends TextSkeletonElementType = typeof DEFAULT_TEXT_SKELETON_ELEMENT>(props: TextSkeletonProps<E>): React.JSX.Element;
-/** @public */
-declare const DEFAULT_SPINNER_ELEMENT = "div";
-/** @public */
-type SpinnerOwnProps = {
-  muted?: boolean;
-  size?: ResponsiveProp$1<FontTextSize>;
-};
-/** @public */
-type SpinnerElementType = 'div' | 'span' | ComponentType;
-/** @public */
-type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<SpinnerOwnProps, E>;
+declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectProps & Omit<import("react").HTMLProps<HTMLSelectElement>, "as">, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
 /**
- * Indicate that something is loading for an indeterminate amount of time.
- *
  * @public
  */
-declare function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(props: SpinnerProps<E>): React.JSX.Element;
-/** @public */
-declare const DEFAULT_SR_ONLY_ELEMENT = "span";
-/** @public */
-type SrOnlyOwnProps = {};
-/** @public */
-type SrOnlyElementType = 'span' | ComponentType;
-/** @public */
-type SrOnlyProps<E extends SrOnlyElementType = SrOnlyElementType> = Props<SrOnlyOwnProps, E>;
-/** @public */
-declare function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEMENT>(props: SrOnlyProps<E>): React.JSX.Element;
-/** @public */
-declare const DEFAULT_SWITCH_ELEMENT = "input";
-/** @public */
-type SwitchOwnProps = {
+interface SwitchProps {
   indeterminate?: boolean;
-};
-/** @public */
-type SwitchElementType = 'input' | ComponentType;
-/** @public */
-type SwitchProps<E extends SwitchElementType = SwitchElementType> = Props<SwitchOwnProps, E>;
+}
 /**
  * The `Switch` component allows the user to toggle a setting on and off.
  *
@@ -1562,57 +968,46 @@ type SwitchProps<E extends SwitchElementType = SwitchElementType> = Props<Switch
  *
  * @public
  */
-declare function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEMENT>(props: SwitchProps<E>): React.JSX.Element;
-/** @public */
-declare const DEFAULT_INLINE_CODE_ELEMENT = "code";
-/** @public */
-interface InlineCodeProps {
-  children: React.ReactNode;
-  /** Language to use for syntax highlighting. */
-  language?: string;
-}
-/** @public */
-declare function InlineCode(props: InlineCodeProps): React.JSX.Element;
-/** @public */
-declare const DEFAULT_TEXT_AREA_ELEMENT = "textarea";
-/** @public */
-type TextAreaOwnProps = TextAreaStyleProps & {
+declare const Switch: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").HTMLProps<HTMLInputElement>, "as" | "type"> & SwitchProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+/**
+ * @public
+ */
+interface TextAreaProps extends ResponsiveRadiusProps {
   /**
    * @beta
    */
   __unstable_disableFocusRing?: boolean;
+  border?: boolean;
   customValidity?: string;
-};
-/** @public */
-type TextAreaElementType = 'textarea' | ComponentType;
-/** @public */
-type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<TextAreaOwnProps, E>;
+  fontSize?: number | number[];
+  padding?: number | number[];
+  weight?: ThemeFontWeightKey$1;
+}
 /**
  * A multiline text input.
  *
  * @public
  */
-declare function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(props: TextAreaProps<E>): React.JSX.Element;
+declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps & Omit<import("react").HTMLProps<HTMLTextAreaElement>, "as">, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
 /**
  * @beta
  */
 interface TooltipDelayGroupContextValue {
-  handleOpenChange: (params: {
-    open: boolean;
-    id: string;
-    immediate?: boolean;
-  }) => void;
-  visibleTooltipId: string | undefined;
+  setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void;
+  setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void;
+  openDelay: number;
+  closeDelay: number;
+  openTooltipId: string | null;
 }
 /**
  * @beta
  */
-declare const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null>;
+declare const TooltipDelayGroupContext: import("react").Context<TooltipDelayGroupContextValue | null>;
 /**
  * @public
  * */
 interface TooltipDelayGroupProviderProps {
-  children?: ReactNode;
+  children?: React.ReactNode;
   /**
    * Handles the delays to open or close a tooltip inside a group
    *
@@ -1622,53 +1017,170 @@ interface TooltipDelayGroupProviderProps {
    *
    * @public
    */
-  delay?: Delay;
+  delay: Delay;
 }
 /**
  * @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.
+ * which temporarily becomes 1 ms after the first floating element of the group opens.
  */
 declare function TooltipDelayGroupProvider(props: TooltipDelayGroupProviderProps): React.JSX.Element;
 /**
  * @beta
  */
 declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null;
-/** @public */
+/**
+ * @internal
+ */
+interface ThemeProps {
+  theme: Theme$1;
+}
+/**
+ * @internal
+ */
+interface ResponsiveFontSizeStyleProps {
+  $size: number[];
+}
+/**
+ * @internal
+ */
+interface FontWeightStyleProps {
+  $weight?: ThemeFontWeightKey$1;
+}
+/**
+ * @internal
+ */
+interface ResponsiveTextAlignStyleProps {
+  $align: TextAlign[];
+}
+/**
+ * @internal
+ */
+interface ResponsiveFontStyleProps extends FontWeightStyleProps, ResponsiveFontSizeStyleProps, ResponsiveTextAlignStyleProps {
+  $accent?: boolean;
+  $muted?: boolean;
+}
+/**
+ * Get responsive CSS for the `code` font style.
+ * @internal
+ */
+declare function responsiveCodeFontStyle(props: FontWeightStyleProps & ResponsiveFontSizeStyleProps & ThemeProps): CSSObject[];
+/**
+ * Get responsive CSS for the `heading` font style.
+ * @internal
+ */
+declare function responsiveHeadingFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
+/**
+ * Get responsive CSS for the `label` font style.
+ * @internal
+ */
+declare function responsiveLabelFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
+/**
+ * Get responsive text align styles.
+ * @internal
+ */
+declare function responsiveTextAlignStyle(props: ResponsiveTextAlignStyleProps & ThemeProps): CSSObject[];
+/**
+ * Get responsive CSS for the `text` font style.
+ * @internal
+ */
+declare function responsiveTextFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
+/**
+ * @internal
+ */
+declare function _fillCSSObject(keys: string[], value: string | number | CSSObject): CSSObject;
+/**
+ * @public
+ */
+declare function rem(pixelValue: number): string | 0;
+/**
+ * @internal
+ */
+declare function _responsive<T>(media: number[], values: T[], callback: (value: T, index: number, array: T[]) => CSSObject): CSSObject[];
+/**
+ * @internal
+ */
+declare function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[];
+/**
+ * @internal
+ */
+declare function _getResponsiveSpace(theme: Theme$1, props: string[], spaceIndexes?: number[]): CSSObject[] | null;
+/**
+ * @public
+ */
+interface ThemeColorProviderProps {
+  children?: React.ReactNode;
+  scheme?: ThemeColorSchemeKey$1;
+  tone?: ThemeColorCardToneKey;
+}
+/**
+ * @public
+ */
+declare function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element;
+/**
+ * @public
+ */
+interface ThemeContextValue {
+  /** @deprecated No longer used */
+  version: 0.0;
+  scheme: ThemeColorSchemeKey$1;
+  theme: RootTheme$1;
+  tone: ThemeColorCardToneKey;
+}
+/**
+ * @public
+ */
+declare function useRootTheme(): ThemeContextValue;
+/** @internal */
+declare const Arrow: import("react").ForwardRefExoticComponent<Omit<{
+  width: number;
+  height: number;
+  radius?: number;
+} & Omit<HTMLProps<HTMLDivElement>, "height" | "width">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @public
+ */
 interface BoundaryElementProviderProps {
-  children: ReactNode;
+  children: React.ReactNode;
   element: HTMLElement | null;
 }
-/** @public */
+/**
+ * @public
+ */
 declare function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element;
-/** @public */
-type BoundaryElementContextValue = HTMLElement | null;
-/** @public */
-declare function useBoundaryElement(): {
+/**
+ * @public
+ */
+interface BoundaryElementContextValue {
   version: 0.0;
-  element: BoundaryElementContextValue;
-};
-/** @beta */
-declare const DEFAULT_ELEMENT_QUERY_ELEMENT = "div";
+  element: HTMLElement | null;
+}
 /**
- * DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-type ElementQueryOwnProps = {
-  media?: number[];
-};
-/** @beta */
-type ElementQueryElementType = 'div' | ComponentType;
+declare function useBoundaryElement(): BoundaryElementContextValue;
+/**
+ * @internal
+ * @deprecated this component will be removed in the next major release
+ */
+declare function ConditionalWrapper({ children, condition, wrapper }: {
+  children: React.ReactNode;
+  condition: boolean;
+  wrapper: (children: React.ReactNode) => React.ReactNode;
+}): React.ReactNode;
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
  */
-type ElementQueryProps<E extends ElementQueryElementType = ElementQueryElementType> = Props<ElementQueryOwnProps, E>;
+interface MediaQueryProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements;
+  media?: number[];
+}
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
  */
-declare function ElementQuery<E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT>(props: ElementQueryProps<E>): React.JSX.Element;
+declare const ElementQuery: import("react").ForwardRefExoticComponent<Omit<MediaQueryProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "media">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * DO NOT USE IN PRODUCTION
  * @beta
@@ -1676,7 +1188,7 @@ declare function ElementQuery<E extends ElementQueryElementType = typeof DEFAULT
 type ErrorBoundaryProps = PropsWithChildren<{
   onCatch: (params: {
     error: Error;
-    info: ErrorInfo;
+    info: React.ErrorInfo;
   }) => void;
 }>;
 /**
@@ -1692,64 +1204,72 @@ interface ErrorBoundaryState {
  */
 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;
+  componentDidCatch(error: Error, info: React.ErrorInfo): void;
+  render(): React.ReactNode;
 }
 /** @public */
-interface PortalProps {
-  children: ReactNode;
-  /**
-   * @beta This API might change. DO NOT USE IN PRODUCTION.
-   */
-  __unstable_name?: string;
-}
-/** @public */
-declare function Portal(props: PortalProps): ReactPortal | null;
-/** @public */
-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 */
-declare function PortalProvider(props: PortalProviderProps): React.JSX.Element;
-/** @public */
+/**
+ * @public
+ */
+declare function useLayer(): LayerContextValue;
+/**
+ * @public
+ */
 interface PortalContextValue {
   version: 0.0;
   boundaryElement: HTMLElement | null;
   element: HTMLElement | null;
   elements?: Record<string, HTMLElement | null | undefined>;
 }
-/** @public */
+/**
+ * @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>;
 /**
- * The `Root` component.
- *
  * @public
  */
-declare function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(props: RootProps<E>): React.JSX.Element;
-/** @public */
-interface RootProviderProps {
-  boundaryElement: HTMLElement | null;
-  children?: ReactNode;
-  portalElement: HTMLElement | null;
-  scheme: ColorScheme;
-  tone: CardTone;
+interface SrOnlyProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements;
+  children?: React.ReactNode;
 }
-/** @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, _BUTTON_STATES, _CODE_TOKEN_KEYS, _CardCompatProviderComponent, _CardInternalContextValue, _ElementSizeListener, _ElementSizeObserver, _ElementSizeSubscriber, _INPUT_VALIDITY, _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 };
+/**
+ * @public
+ */
+declare const SrOnly: import("react").ForwardRefExoticComponent<Omit<SrOnlyProps & Omit<import("react").HTMLProps<HTMLDivElement>, "aria-hidden" | "as">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @beta
+ */
+interface VirtualListChangeOpts {
+  fromIndex: number;
+  gap: number;
+  itemHeight: number;
+  scrollHeight: number;
+  scrollTop: number;
+  toIndex: number;
+}
+/**
+ * @beta
+ */
+interface VirtualListProps<Item = any> {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements;
+  gap?: number;
+  getItemKey?: (item: Item, itemIndex: number) => string;
+  items?: Item[];
+  onChange?: (opts: VirtualListChangeOpts) => void;
+  renderItem?: (item: Item) => React.ReactNode;
+}
+/**
+ * @beta
+ */
+declare const VirtualList: import("react").ForwardRefExoticComponent<VirtualListProps<any> & StackOwnProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "onChange" | "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { type ArrayPropPrimitive, Arrow, type Assign, Autocomplete, type AutocompleteInputChangeMsg, type AutocompleteInputFoocusMsg, type AutocompleteMsg, type AutocompleteOpenButtonProps, type AutocompleteProps, type AutocompleteRootBlurMsg, type AutocompleteRootClearMsg, type AutocompleteRootEscapeMsg, type AutocompleteRootOpenMsg, type AutocompleteRootSetActiveValueMsg, type AutocompleteRootSetListFocusedMsg, type AutocompleteState, type AutocompleteValueChangeMsg, Avatar, AvatarCounter, type AvatarCounterProps, type AvatarOwnProps, type AvatarPosition, type AvatarProps, type AvatarRootStyleProps, type AvatarSize, AvatarStack, type AvatarStackProps, type AvatarStatus, Badge, type BadgeMode, type BadgeOwnProps, type BadgeProps, type BadgeTone, type BaseAutocompleteOption, type BaseTheme, type BoundaryElementContextValue, BoundaryElementProvider, type BoundaryElementProviderProps, Box, type BoxDisplay, type BoxHeight, type BoxOverflow, type BoxOwnProps, type BoxProps, type BoxShadow, type BoxSizing, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonMode, type ButtonOwnProps, type ButtonProps, type ButtonTextAlign, type ButtonTone, type ButtonWidth, Card, type CardOwnProps, type CardProps, type CardStyleProps, type CardTone, Checkbox, type CheckboxProps, type ClickOutsideElements, type ClickOutsideEventElements, type ClickOutsideEventListener, type ClickOutsideListener, Code, type CodeOwnProps, type CodeProps, CodeSkeleton, type CodeSkeletonProps, type ComponentType, ConditionalWrapper, Container, type ContainerOwnProps, type ContainerProps, type Delay, Dialog, DialogContext, type DialogContextValue, type DialogPosition, type DialogProps, DialogProvider, type DialogProviderProps, ElementQuery, type ElementRectValue, type ElementSize, type ElementType, type EmptyProps, ErrorBoundary, type ErrorBoundaryProps, type ErrorBoundaryState, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexOwnProps, type FlexProps, type FlexValue, type FlexWrap, type FontWeightStyleProps, Grid, type GridAutoCols, type GridAutoFlow, type GridAutoRows, type GridItemColumn, type GridItemColumnEnd, type GridItemColumnStart, type GridItemRow, type GridItemRowEnd, type GridItemRowStart, type GridOwnProps, type GridProps, type HSL, Heading, type HeadingOwnProps, type HeadingProps, HeadingSkeleton, type HeadingSkeletonProps, Hotkeys, type HotkeysProps, Inline, type InlineOwnProps, type InlineProps, KBD, type KBDOwnProps, type KBDProps, Label, type LabelOwnProps, type LabelProps, LabelSkeleton, type LabelSkeletonProps, Layer, type LayerContextValue, type LayerProps, LayerProvider, type LayerProviderProps, type MediaQueryProps, Menu, MenuButton, type MenuButtonProps, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupOwnProps, type MenuGroupProps, MenuItem, type MenuItemOwnProps, type MenuItemProps, type MenuProps, type PartialThemeColorBuilderOpts, type Placement, Popover, type PopoverMargins, type PopoverProps, type PopoverUpdateCallback, type PopoverWidth, Portal, type PortalContextValue, type PortalProps, PortalProvider, type PortalProviderProps, type Props, type RGB, Radio, type RadioProps, type Radius, type ResponsiveAvatarSizeStyleProps, type ResponsiveBorderProps, type ResponsiveBoxProps, type ResponsiveFlexItemProps, type ResponsiveFlexProps, type ResponsiveFontSizeStyleProps, type ResponsiveFontStyleProps, type ResponsiveGridItemProps, type ResponsiveGridProps, type ResponsiveMarginProps, type ResponsivePaddingProps, type ResponsiveRadiusProps, type ResponsiveShadowProps, type ResponsiveTextAlignStyleProps, type ResponsiveWidthProps, type ResponsiveWidthStyleProps, type RootTheme, Select, type SelectProps, type SelectableTone, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, SrOnly, type SrOnlyProps, Stack, type StackOwnProps, type StackProps, type Styles, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, type TagType, Text, type TextAlign, TextArea, type TextAreaProps, TextInput, type TextInputClearButtonProps, type TextInputProps, type TextInputType, type TextOwnProps, type TextProps, TextSkeleton, type TextSkeletonProps, type Theme, type ThemeAvatar, type ThemeColor, type ThemeColorBase, type ThemeColorBuilderOpts, type ThemeColorButton, type ThemeColorButtonModeKey, type ThemeColorButtonState, type ThemeColorButtonStates, type ThemeColorButtonTones, type ThemeColorCard, type ThemeColorCardState, type ThemeColorGenericState, type ThemeColorInput, type ThemeColorInputState, type ThemeColorInputStates, type ThemeColorMuted, type ThemeColorMutedTone, type ThemeColorName, ThemeColorProvider, type ThemeColorProviderProps, type ThemeColorScheme, type ThemeColorSchemeKey, type ThemeColorSchemes, type ThemeColorSelectable, type ThemeColorSelectableState, type ThemeColorSelectableStates, type ThemeColorSolid, type ThemeColorSolidTone, type ThemeColorSpot, type ThemeColorSpotKey, type ThemeColorSyntax, type ThemeColorToneKey, type ThemeContextValue, type ThemeFont, type ThemeFontKey, type ThemeFontSize, type ThemeFontWeight, type ThemeFontWeightKey, type ThemeFonts, type ThemeInput, type ThemeLayer, type ThemeProps, ThemeProvider, type ThemeProviderProps, type ThemeShadow, Toast, type ToastContextValue, type ToastParams, type ToastProps, ToastProvider, type ToastProviderProps, Tooltip, TooltipDelayGroupContext, type TooltipDelayGroupContextValue, TooltipDelayGroupProvider, type TooltipDelayGroupProviderProps, type TooltipProps, Tree, type TreeContextValue, TreeItem, type TreeItemProps, type TreeProps, type TreeState, VirtualList, type VirtualListChangeOpts, type VirtualListProps, type _ElementSizeListener, type _ElementSizeObserver, type _ElementSizeSubscriber, type _MediaStore, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useClickOutsideEvent, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMatchMedia, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useTheme_v2, useToast, useTooltipDelayGroup, useTree };
 //# sourceMappingURL=index.d.ts.map