@sanity/ui 4.0.0-static.9 → 5.0.0-alpha.1

package/dist/index.d.ts

@@ -1,2521 +1,993 @@
-import type {AlignItems} from '@sanity/ui/css'
-import type {AvatarColor} from '@sanity/ui/theme'
-import type {AvatarSize} from '@sanity/ui/theme'
-import {BadgeStyleProps} from '@sanity/ui/css'
-import {BoxStyleProps} from '@sanity/ui/css'
-import {Breakpoint} from '@sanity/ui/css'
-import type {ButtonStyleProps} from '@sanity/ui/css'
-import {CardStyleProps} from '@sanity/ui/css'
-import type {CardTone} from '@sanity/ui/theme'
-import {CodeStyleProps} from '@sanity/ui/css'
-import type {ColorScheme} from '@sanity/ui/theme'
-import {Component} from 'react'
-import type {ComponentClass} from 'react'
-import type {ComponentProps} from 'react'
-import type {ComponentType as ComponentType_2} from 'react'
-import {ContainerStyleProps} from '@sanity/ui/css'
-import type {ContainerWidth} from '@sanity/ui/theme'
-import type {Context} from 'react'
-import type {DisplayStyleProps} from '@sanity/ui/css'
-import type {ElementTone} from '@sanity/ui/theme'
-import {ElementType as ElementType_2} from 'react'
-import {ErrorInfo} from 'react'
-import type {ExoticComponent} from 'react'
-import type {FlexDirection} from '@sanity/ui/css'
-import {FlexStyleProps} from '@sanity/ui/css'
-import type {FlexWrap} from '@sanity/ui/css'
-import type {FontCodeSize} from '@sanity/ui/theme'
-import type {FontHeadingSize} from '@sanity/ui/theme'
-import type {FontLabelSize} from '@sanity/ui/theme'
-import type {FontTextSize} from '@sanity/ui/theme'
-import type {FontWeight} from '@sanity/ui/theme'
-import {ForwardedRef} from 'react'
-import type {FunctionComponent} from 'react'
-import {GapStyleProps} from '@sanity/ui/css'
-import {HeadingStyleProps} from '@sanity/ui/css'
-import {HTMLAttributes} from 'react'
-import {InputStyleProps} from '@sanity/ui/css'
-import type {JSX} from 'react'
-import type {JustifyContent} from '@sanity/ui/css'
-import {LabelStyleProps} from '@sanity/ui/css'
-import {MaxWidth} from '@sanity/ui/css'
-import {MouseEventHandler} from 'react'
-import {PaddingStyleProps} from '@sanity/ui/css'
-import {PropsWithChildren} from 'react'
-import type {Radius} from '@sanity/ui/theme'
-import {RadiusStyleProps} from '@sanity/ui/css'
-import {ReactElement} from 'react'
-import {ReactNode} from 'react'
-import type {ReactPortal} from 'react'
-import {Ref} from 'react'
-import {RefAttributes} from 'react'
-import {ResponsiveProp} from '@sanity/ui/css'
-import {RootStyleProps} from '@sanity/ui/css'
-import {SelectableStyleProps} from '@sanity/ui/css'
-import {SelectStyleProps} from '@sanity/ui/css'
-import {ShadowStyleProps} from '@sanity/ui/css'
-import {SkeletonStyleProps} from '@sanity/ui/css'
-import type {Space} from '@sanity/ui/theme'
-import {TextAreaStyleProps} from '@sanity/ui/css'
-import {TextOverflowStyleProps} from '@sanity/ui/css'
-import {TextStyleProps} from '@sanity/ui/css'
-import type {Width} from '@sanity/ui/css'
-
-/** @internal */
-export declare function Arrow<E extends ArrowElementType = typeof DEFAULT_ARROW_ELEMENT>(
-  props: ArrowProps<E>,
-): React.JSX.Element
-
-/** @internal */
-export declare type ArrowElementType = 'div' | 'span' | ComponentType
-
-/** @internal */
-export declare type ArrowOwnProps = {
-  width: number
-  height: number
-  radius?: number
-}
-
-/** @internal */
-export declare type ArrowProps<E extends ArrowElementType = ArrowElementType> = Props<
-  ArrowOwnProps,
-  E
->
-
-/**
- * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
- *
- * @public
- */
-export declare type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
-
-/**
- * @internal
- */
-export declare function attemptFocus(element: HTMLElement): boolean
-
-/**
- * The Autocomplete component is typically used for search components.
- * It consists of a text input for writing a query, and properties for rendering suggestions.
- *
- * @public
- */
-export declare function Autocomplete<
-  E extends AutocompleteElementType = typeof DEFAULT_AUTOCOMPLETE_ELEMENT,
-  O extends BaseAutocompleteOption = BaseAutocompleteOption,
->(props: AutocompleteProps<E, O>): React.JSX.Element
-
-/** @public */
-export declare type AutocompleteElementType = 'input' | ComponentType
-
-/**
- * @internal
- */
-export declare interface AutocompleteInputChangeMsg {
-  type: 'input/change'
-  query: string | null
-}
-
-/**
- * @internal
- */
-export declare interface AutocompleteInputFoocusMsg {
-  type: 'input/focus'
-}
-
-/**
- * @internal
- */
-export declare type AutocompleteMsg =
-  | AutocompleteRootBlurMsg
-  | AutocompleteRootClearMsg
-  | AutocompleteRootEscapeMsg
-  | AutocompleteRootOpenMsg
-  | AutocompleteRootSetActiveValueMsg
-  | AutocompleteRootSetListFocusedMsg
-  | AutocompleteInputChangeMsg
-  | AutocompleteInputFoocusMsg
-  | AutocompleteValueChangeMsg
-
-/** @public */
-export declare type AutocompleteOpenButtonProps = Omit<ButtonProps<'button'>, 'as'>
-
-/** @public */
-export declare type AutocompleteOwnProps<
-  O extends BaseAutocompleteOption = BaseAutocompleteOption,
-> = TextInputOwnProps & {
-  border?: boolean
-  customValidity?: string
-  filterOption?: (query: string, option: O) => boolean
-  icon?: ElementType_2 | ReactNode
-  /** @beta */
-  listBox?: BoxOwnProps
-  loading?: boolean
-  onChange?: (value: string) => void
-  onQueryChange?: (query: string | null) => void
-  onSelect?: (value: string) => void
-  /** @beta */
-  openButton?: boolean | AutocompleteOpenButtonProps
-  /** @beta */
-  openOnFocus?: boolean
-  /** The options to render. */
-  options?: O[]
-  padding?: ResponsiveProp<Space>
-  popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
-  prefix?: ReactNode
-  radius?: Radius | Radius[]
-  /** @beta */
-  relatedElements?: HTMLElement[]
-  /** The callback function for rendering each option. */
-  renderOption?: (option: O) => React.JSX.Element
-  /** @beta */
-  renderPopover?: (
-    props: {
-      content: React.JSX.Element | null
-      hidden: boolean
-      inputElement: HTMLInputElement | null
-      onMouseEnter: () => void
-      onMouseLeave: () => void
-    },
-    ref: ForwardedRef<HTMLDivElement>,
-  ) => ReactNode
-  renderValue?: (value: string, option?: O) => string
-  suffix?: ReactNode
-  value?: string
-}
+import type { ComponentProps } from "react";
+import { ComponentPropsWithRef } from "react";
+import { ElementType } from "react";
+import { JSX } from "react";
+import type { default as React_2 } from "react";
+import type { SVGProps } from "react";
+
+declare const ALIGN_ITEMS: readonly [
+  "baseline",
+  "center",
+  "flex-end",
+  "flex-start",
+  "stretch",
+];
 
 /** @public */
-export declare type AutocompleteProps<
-  E extends AutocompleteElementType = AutocompleteElementType,
-  O extends BaseAutocompleteOption = BaseAutocompleteOption,
-> = Props<AutocompleteOwnProps<O>, E>
-
-/**
- * @internal
- */
-export declare interface AutocompleteRootBlurMsg {
-  type: 'root/blur'
-}
-
-/**
- * @internal
- */
-export declare interface AutocompleteRootClearMsg {
-  type: 'root/clear'
-}
-
-/**
- * @internal
- */
-export declare interface AutocompleteRootEscapeMsg {
-  type: 'root/escape'
-}
+export declare type AlignItems = (typeof ALIGN_ITEMS)[number];
 
-/**
- * @internal
- */
-export declare interface AutocompleteRootOpenMsg {
-  type: 'root/open'
-  query: string | null
-}
-
-/**
- * @internal
- */
-export declare interface AutocompleteRootSetActiveValueMsg {
-  type: 'root/setActiveValue'
-  value: string
-  listFocused?: boolean
-}
-
-/**
- * @internal
- */
-export declare interface AutocompleteRootSetListFocusedMsg {
-  type: 'root/setListFocused'
-  listFocused: boolean
-}
-
-/**
- * @internal
- */
-export declare interface AutocompleteState {
-  activeValue: string | null
-  focused: boolean
-  listFocused: boolean
-  query: string | null
-  value: string | null
-}
-
-/**
- * @internal
- */
-export declare interface AutocompleteValueChangeMsg {
-  type: 'value/change'
-  value: string | null
-}
-
-/**
- * Avatars are used to represent people and other agents (e.g. bots).
- *
- * @public
- */
-export declare function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(
-  props: AvatarProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare function AvatarCounter<
-  E extends AvatarCounterElementType = typeof DEFAULT_AVATAR_COUNTER_ELEMENT,
->(props: AvatarCounterProps<E>): React.JSX.Element
+declare type BorderProps = {
+  /** CSS **border** property */
+  border?: Responsive<boolean>;
+  /** CSS **border-top** property */
+  borderTop?: Responsive<boolean>;
+  /** CSS **border-right** property */
+  borderRight?: Responsive<boolean>;
+  /** CSS **border-bottom** property */
+  borderBottom?: Responsive<boolean>;
+  /** CSS **border-left** property */
+  borderLeft?: Responsive<boolean>;
+  /** CSS **border-radius** property */
+  radius?: Responsive<Radius>;
+};
 
 /** @public */
-export declare type AvatarCounterElementType = 'button' | 'div' | 'span' | ComponentType
+export declare function Box<T extends ElementType = "div">({
+  display,
+  ...props
+}: BoxProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof BoxProps<T>>): JSX.Element;
 
 /** @public */
-export declare interface AvatarCounterOwnProps {
-  count: number
-  size?: ResponsiveProp<AvatarSize>
+export declare interface BoxProps<
+  T extends React.ElementType = "div",
+> extends LayoutProps {
+  /** Element to render */
+  as?: T;
+  /** CSS **display** property */
+  display?: Responsive<DisplayBlock>;
 }
 
 /** @public */
-export declare type AvatarCounterProps<
-  E extends AvatarCounterElementType = AvatarCounterElementType,
-> = Props<AvatarCounterOwnProps, E>
+export declare function Button<T extends ElementType = "button">({
+  density,
+  level,
+  tone,
+  ...props
+}: ButtonProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof ButtonProps<T>>): JSX.Element;
 
-/** @public */
-export declare type AvatarElementType = 'a' | 'button' | 'div' | 'span' | ComponentType
-
-/** @public */
-export declare interface AvatarOwnProps {
-  /** @beta */
-  __unstable_hideInnerStroke?: boolean
-  animateArrowFrom?: AvatarPosition
-  arrowPosition?: AvatarPosition
-  color?: AvatarColor
-  initials?: string
-  onImageLoadError?: (event: Error) => void
-  size?: ResponsiveProp<AvatarSize>
-  src?: string
-  title?: string
-}
-
-/** @public */
-export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
-
-/** @public */
-export declare type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props<
-  AvatarOwnProps,
-  E
->
-
-/** @public */
-export declare function AvatarStack<
-  E extends AvatarStackElementType = typeof DEFAULT_AVATAR_STACK_ELEMENT,
->(props: AvatarStackProps<E>): React.JSX.Element
-
-/** @public */
-export declare type AvatarStackChild = ReactElement<AvatarProps<'div'>> | null | undefined | false
+declare const BUTTON_DENSITY: readonly ["regular", "loose"];
 
-/** @public */
-export declare type AvatarStackElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export declare type AvatarStackOwnProps = Omit<
-  BoxOwnProps,
-  'align' | 'alignItems' | 'display' | 'justify' | 'justifyContent'
-> & {
-  children: AvatarStackChild | AvatarStackChild[]
-  maxLength?: number
-  size?: ResponsiveProp<AvatarSize>
-}
-
-/** @public */
-export declare type AvatarStackProps<E extends AvatarStackElementType = AvatarStackElementType> =
-  Props<AvatarStackOwnProps, E>
+declare const BUTTON_LEVEL: readonly ["primary", "secondary", "tertiary"];
 
-/**
- * Badges are used to tag resources.
- *
- * @public
- */
-export declare function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(
-  props: BadgeProps<E>,
-): React.JSX.Element
+declare const BUTTON_TONE: readonly ["neutral", "critical"];
 
-/** @public */
-export declare type BadgeElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export declare type BadgeOwnProps = BadgeStyleProps &
-  FlexStyleProps &
-  PaddingStyleProps &
-  RadiusStyleProps
+declare type ButtonDensity = (typeof BUTTON_DENSITY)[number];
 
-/** @public */
-export declare type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<
-  BadgeOwnProps,
-  E
->
+declare type ButtonLevel = (typeof BUTTON_LEVEL)[number];
 
 /** @public */
-export declare interface BaseAutocompleteOption {
-  value: string
+export declare interface ButtonProps<T extends React.ElementType = "button"> {
+  /** Element to render */
+  as?: InteractiveAs<T>;
+  /** Composite prop for setting padding and gap */
+  density?: ButtonDensity;
+  /** Set CSS **width** property to 100% */
+  fullWidth?: Responsive<boolean>;
+  /** Starting icon */
+  iconStart?: React.ElementType | React.ReactNode;
+  /** Ending icon */
+  iconEnd?: React.ElementType | React.ReactNode;
+  /** Button level */
+  level?: ButtonLevel;
+  /** Loading state */
+  loading?: boolean;
+  /** Button text */
+  text?: string;
+  /** Button tone */
+  tone?: ButtonTone;
 }
 
-/** @public */
-export declare interface BoundaryElementContextValue {
-  version: 0.0
-  element: HTMLElement | null
-}
+declare type ButtonTone = (typeof BUTTON_TONE)[number];
 
 /** @public */
-export declare function BoundaryElementProvider(
-  props: BoundaryElementProviderProps,
-): React.JSX.Element
+export declare function Card<T extends ElementType = "div">({
+  density,
+  tone,
+  ...props
+}: CardProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof CardProps<T>>): JSX.Element;
 
 /** @public */
-export declare interface BoundaryElementProviderProps {
-  children: ReactNode
-  element: HTMLElement | null
+export declare interface CardProps<T extends React.ElementType = "div">
+  extends MarginProps, ToneProps {
+  /** Element to render */
+  as?: T;
+  /** Composite prop for setting padding and border radius */
+  density?: Responsive<Density>;
 }
 
-/**
- * The `Box` component is a basic layout wrapper component which provides utility properties
- * for flex, margins and padding.
- *
- * @public
- */
-export declare function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
-  props: BoxProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare type BoxElementType =
-  | 'a'
-  | 'article'
-  | 'aside'
-  | 'blockquote'
-  | 'body'
-  | 'button'
-  | 'details'
-  | 'div'
-  | 'header'
-  | 'fieldset'
-  | 'figure'
-  | 'figcaption'
-  | 'footer'
-  | 'form'
-  | 'html'
-  | 'iframe'
-  | 'kbd'
-  | 'label'
-  | 'legend'
-  | 'li'
-  | 'main'
-  | 'nav'
-  | 'ol'
-  | 'pre'
-  | 'section'
-  | 'span'
-  | 'summary'
-  | 'table'
-  | 'tbody'
-  | 'td'
-  | 'tfoot'
-  | 'th'
-  | 'thead'
-  | 'tr'
-  | 'ul'
-  | ComponentType
-
-/** @public */
-export declare type BoxOwnProps = BoxStyleProps
-
-/** @public */
-export declare type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>
-
-/** @beta */
-export declare function Breadcrumbs<
-  E extends BreadcrumbsElementType = typeof DEFAULT_BREADCRUMBS_ELEMENT,
->(props: BreadcrumbsProps<E>): React.JSX.Element
-
 /** @beta */
-export declare type BreadcrumbsElementType = 'div' | 'nav' | ComponentType
-
-/** @beta */
-export declare type BreadcrumbsOwnProps = GapStyleProps & {
-  expandButton?: Omit<ButtonProps<'button'>, 'as' | 'onClick' | 'selected'>
-  maxLength?: number
-  separator?: ReactNode
-}
+export declare function Checkbox(props: CheckboxProps): JSX.Element;
 
 /** @beta */
-export declare type BreadcrumbsProps<E extends BreadcrumbsElementType = BreadcrumbsElementType> =
-  Props<BreadcrumbsOwnProps, E>
-
-/** @public */
-export declare function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
-  props: ButtonProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
-
-/** @public */
-export declare type ButtonOwnProps = ButtonStyleProps &
-  DisplayStyleProps &
-  GapStyleProps &
-  PaddingStyleProps & {
-    'align'?: BoxStyleProps['alignItems']
-    'data-ui'?: string
-    'disabled'?: boolean
-    'fontSize'?: ResponsiveProp<FontTextSize>
-    'icon'?: ElementType_2 | ReactNode
-    'iconRight'?: ElementType_2 | ReactNode
-    'justify'?: BoxStyleProps['justifyContent']
-    /** @beta Do not use in production, as this might change.*/
-    'loading'?: boolean
-    'selected'?: boolean
-    'textAlign'?: ButtonTextAlign
-    'muted'?: boolean
-    'target'?: string
-    'text'?: ReactNode
-    'textOverflow'?: TextOwnProps['textOverflow']
-    'textWeight'?: TextOwnProps['weight']
-    'width'?: ResponsiveProp<Width>
-  }
-
-/** @public */
-export declare type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<
-  ButtonOwnProps,
-  E
->
-
-/** @public */
-export declare type ButtonTextAlign = 'left' | 'right' | 'center'
-
-/**
- * The `Card` component acts much like a `Box`, but with a background and foreground color.
- * Components within a `Card` inherit its colors.
- *
- * @public
- */
-export declare function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
-  props: CardProps<E>,
-): React.JSX.Element
-
-/** @internal */
-export declare type _CardCompatProviderComponent = ComponentType_2<{
-  children?: ReactNode
-  tone: CardTone | 'inherit'
-  scheme: ColorScheme
-}>
-
-/** @public */
-export declare interface CardContextValue {
-  tone: CardTone
-  scheme: ColorScheme
-  /** @internal */
-  unstable_CompatProvider?: _CardCompatProviderComponent
-}
-
-/** @public */
-export declare type CardElementType = BoxElementType
-
-/** @public */
-export declare interface CardOwnProps extends BoxOwnProps, CardStyleProps {
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_checkered?: boolean
-  /**
-   * Do not use in production.
-   * @beta
-   */
-  __unstable_focusRing?: boolean
-  disabled?: boolean
-  pressed?: boolean
-  selected?: boolean
-  target?: string
+export declare interface CheckboxProps
+  extends React.ComponentProps<"input">, MarginProps {
+  /** Error state */
+  error?: boolean;
+  /** Indeterminate state */
+  indeterminate?: boolean;
+  /** Input label */
+  label: React.ReactNode;
 }
 
 /** @public */
-export declare type CardProps<E extends CardElementType = CardElementType> = Props<CardOwnProps, E>
+export declare function Code<T extends CodeTag = "pre">({
+  size,
+  ...props
+}: CodeProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof CodeProps<T>>): JSX.Element;
 
-/** @public */
-export declare function CardProvider(props: {
-  children?: ReactNode
-  tone: CardTone
-  scheme: ColorScheme
-  /** @internal */
-  unstable_CompatProvider?: _CardCompatProviderComponent
-}): React.JSX.Element
-
-/**
- * Checkboxes allow the user to select one or more items from a set.
- *
- * @public
- */
-export declare function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(
-  props: CheckboxProps<E>,
-): React.JSX.Element
+declare const CODE_SIZE: readonly [0, 1, 2, 3, 4];
 
-/** @public */
-export declare type CheckboxElementType = 'input' | ComponentType
+declare const CODE_TAG: readonly ["pre", "span"];
 
 /** @public */
-export declare type CheckboxOwnProps = {
-  indeterminate?: boolean
-  customValidity?: string
+export declare interface CodeProps<T extends CodeTag = "pre"> extends Omit<
+  TypographyProps,
+  "align" | "truncate" | "tone"
+> {
+  /** Element to render */
+  as?: T;
+  /** Refractor language for syntax highlighting */
+  language?: string;
+  /** CSS **font-size** property */
+  size?: Responsive<CodeSize>;
 }
 
 /** @public */
-export declare type CheckboxProps<E extends CheckboxElementType = CheckboxElementType> = Props<
-  CheckboxOwnProps,
-  E
->
+export declare type CodeSize = (typeof CODE_SIZE)[number];
 
-/** @public */
-export declare type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
-
-/** @public */
-export declare type ClickOutsideEventListener = (event: MouseEvent) => void
+declare type CodeTag = (typeof CODE_TAG)[number];
 
 /** @public */
-export declare function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
-  props: CodeProps<E>,
-): React.JSX.Element
+export declare function Container<T extends ElementType = "div">({
+  marginX,
+  ...props
+}: ContainerProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof ContainerProps<T>>): JSX.Element;
 
-/** @public */
-export declare type CodeElementType = 'div' | 'pre' | ComponentType
-
-/** @public */
-export declare type CodeOwnProps = CodeStyleProps & {
-  /** Define the language to use for syntax highlighting. */
-  language?: string
-  size?: ResponsiveProp<FontCodeSize>
-}
+declare const CONTAINER_SIZE: readonly [0, 1, 2, 3, 4, 5];
 
 /** @public */
-export declare type CodeProps<E extends CodeElementType = CodeElementType> = Props<CodeOwnProps, E>
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function CodeSkeleton<
-  E extends CodeSkeletonElementType = typeof DEFAULT_CODE_SKELETON_ELEMENT,
->(props: CodeSkeletonProps<E>): React.JSX.Element
-
-/** @beta */
-export declare type CodeSkeletonElementType = SkeletonElementType
-
-/** @beta */
-export declare type CodeSkeletonOwnProps = SkeletonOwnProps & {
-  size?: ResponsiveProp<FontCodeSize>
+export declare interface ContainerProps<
+  T extends React.ElementType = "div",
+> extends LayoutProps {
+  /** Element to render */
+  as?: T;
+  /** CSS **max-width** property */
+  size?: Responsive<ContainerSize>;
 }
 
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare type CodeSkeletonProps<E extends CodeSkeletonElementType = CodeSkeletonElementType> =
-  Props<CodeSkeletonOwnProps, E>
-
-/** @public */
-export declare type ComponentType<P = any> =
-  | FunctionComponent<P>
-  | ComponentClass<P>
-  | ExoticComponent<P>
-
-/**
- * The `Container` component wraps content layout in a defined set of widths.
- *
- * @public
- */
-export declare function Container<
-  E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT,
->(props: ContainerProps<E>): React.JSX.Element
-
-/** @public */
-export declare type ContainerElementType = BoxElementType
-
 /** @public */
-export declare type ContainerOwnProps = Omit<BoxOwnProps, 'width'> & ContainerStyleProps
+export declare type ContainerSize = (typeof CONTAINER_SIZE)[number];
 
-/** @public */
-export declare type ContainerProps<E extends ContainerElementType = ContainerElementType> = Props<
-  ContainerOwnProps,
-  E
->
-
-/**
- * @internal
- */
-export declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean
-
-/** @internal */
-export declare const DEFAULT_ARROW_ELEMENT = 'div'
+declare const DENSITY: readonly ["compact", "regular", "loose"];
 
 /** @public */
-export declare const DEFAULT_AUTOCOMPLETE_ELEMENT = 'input'
+export declare type Density = (typeof DENSITY)[number];
 
-/** @public */
-export declare const DEFAULT_AVATAR_COUNTER_ELEMENT = 'span'
+declare const DISPLAY_BLOCK: readonly ["block", "inline-block", "none"];
 
-/** @public */
-export declare const DEFAULT_AVATAR_ELEMENT = 'span'
+declare const DISPLAY_FLEX: readonly ["flex", "inline-flex", "none"];
 
-/** @public */
-export declare const DEFAULT_AVATAR_STACK_ELEMENT = 'span'
+declare const DISPLAY_GRID: readonly ["grid", "inline-grid", "none"];
 
 /** @public */
-export declare const DEFAULT_BADGE_ELEMENT = 'span'
+export declare type DisplayBlock = (typeof DISPLAY_BLOCK)[number];
 
 /** @public */
-export declare const DEFAULT_BOX_ELEMENT = 'div'
-
-/** @beta */
-export declare const DEFAULT_BREADCRUMBS_ELEMENT = 'nav'
+export declare type DisplayFlex = (typeof DISPLAY_FLEX)[number];
 
 /** @public */
-export declare const DEFAULT_BUTTON_ELEMENT = 'button'
+export declare type DisplayGrid = (typeof DISPLAY_GRID)[number];
 
 /** @public */
-export declare const DEFAULT_CARD_ELEMENT = 'div'
+export declare function Divider(props: DividerProps): JSX.Element;
 
 /** @public */
-export declare const DEFAULT_CHECKBOX_ELEMENT = 'input'
+export declare interface DividerProps
+  extends React.ComponentProps<"hr">, MarginProps {}
 
 /** @public */
-export declare const DEFAULT_CODE_ELEMENT = 'pre'
-
-/** @beta */
-export declare const DEFAULT_CODE_SKELETON_ELEMENT = 'div'
+export declare function Eyebrow<T extends ElementType = "span">({
+  size,
+  weight,
+  ...props
+}: EyebrowProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof EyebrowProps<T>>): JSX.Element;
 
-/** @public */
-export declare const DEFAULT_CONTAINER_ELEMENT = 'div'
+declare const EYEBROW_SIZE: readonly [0, 1, 2, 3, 4];
 
 /** @public */
-export declare const DEFAULT_DIALOG_ELEMENT = 'div'
-
-/** @beta */
-export declare const DEFAULT_ELEMENT_QUERY_ELEMENT = 'div'
-
-/** @public */
-export declare const DEFAULT_FLEX_ELEMENT = 'div'
-
-/** @public */
-export declare const DEFAULT_GRID_ELEMENT = 'div'
-
-/** @public */
-export declare const DEFAULT_HEADING_ELEMENT = 'div'
-
-/** @beta */
-export declare const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'
-
-/** @public */
-export declare const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
-
-/** @public */
-export declare const DEFAULT_INLINE_ELEMENT = 'div'
-
-/** @public */
-export declare const DEFAULT_KBD_ELEMENT = 'kbd'
-
-/** @public */
-export declare const DEFAULT_LABEL_ELEMENT = 'div'
-
-/** @beta */
-export declare const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'
-
-/** @public */
-export declare const DEFAULT_LAYER_ELEMENT = 'div'
-
-/** @public */
-export declare const DEFAULT_MENU_DIVIDER_ELEMENT = 'hr'
-
-/** @public */
-export declare const DEFAULT_MENU_ELEMENT = 'div'
-
-/** @public */
-export declare const DEFAULT_MENU_GROUP_ELEMENT = 'button'
-
-/** @public */
-export declare const DEFAULT_MENU_ITEM_ELEMENT = 'button'
-
-/** @public */
-export declare const DEFAULT_POPOVER_ELEMENT = 'div'
+export declare interface EyebrowProps<
+  T extends React.ElementType = "span",
+> extends TypographyProps {
+  /** Element to render */
+  as?: T;
+  /** CSS **font-size** property */
+  size?: Responsive<EyebrowSize>;
+}
 
 /** @public */
-export declare const DEFAULT_RADIO_ELEMENT = 'input'
+export declare type EyebrowSize = (typeof EYEBROW_SIZE)[number];
 
 /** @public */
-export declare const DEFAULT_ROOT_ELEMENT = 'html'
+export declare function Flex<T extends ElementType = "div">({
+  display,
+  ...props
+}: FlexProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof FlexProps<T>>): JSX.Element;
 
-/** @public */
-export declare const DEFAULT_SELECT_ELEMENT = 'select'
+declare const FLEX_DIRECTION: readonly [
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse",
+];
 
-/** @internal */
-export declare const DEFAULT_SELECTABLE_ELEMENT = 'button'
+declare const FLEX_WRAP: readonly ["wrap", "wrap-reverse", "nowrap"];
 
-/** @beta */
-export declare const DEFAULT_SKELETON_ELEMENT = 'div'
+declare type FlexChildProps = {
+  /** CSS **flex-basis** property */
+  flexBasis?: Responsive<string>;
+  /** CSS **flex-grow** property */
+  flexGrow?: Responsive<number>;
+  /** CSS **flex-shrink** property */
+  flexShrink?: Responsive<number>;
+};
 
 /** @public */
-export declare const DEFAULT_SPINNER_ELEMENT = 'div'
+export declare type FlexDirection = (typeof FLEX_DIRECTION)[number];
 
 /** @public */
-export declare const DEFAULT_SR_ONLY_ELEMENT = 'span'
+export declare type FlexParentProps = {
+  /** CSS **align-items** property */
+  alignItems?: Responsive<AlignItems>;
+  /** CSS **justify-content** property */
+  justifyContent?: Responsive<JustifyContent>;
+  /** CSS **flex-direction** property */
+  flexDirection?: Responsive<FlexDirection>;
+  /** CSS **flex-wrap** property */
+  flexWrap?: Responsive<FlexWrap>;
+};
 
 /** @public */
-export declare const DEFAULT_STACK_ELEMENT = 'div'
+export declare interface FlexProps<T extends React.ElementType = "div">
+  extends FlexParentProps, GapProps, LayoutProps {
+  /** Element to render */
+  as?: T;
+  /** CSS **display** property */
+  display?: Responsive<DisplayFlex>;
+}
 
 /** @public */
-export declare const DEFAULT_SWITCH_ELEMENT = 'input'
+export declare type FlexWrap = (typeof FLEX_WRAP)[number];
 
-/** @public */
-export declare const DEFAULT_TAB_ELEMENT = 'button'
+declare const FONT_WEIGHT: readonly ["regular", "medium", "semibold", "bold"];
 
 /** @public */
-export declare const DEFAULT_TAB_LIST_ELEMENT = 'div'
+export declare type FontWeight = (typeof FONT_WEIGHT)[number];
 
 /** @public */
-export declare const DEFAULT_TAB_PANEL_ELEMENT = 'div'
+export declare type GapProps = {
+  /** CSS **gap** property */
+  gap?: Responsive<SpaceInherit>;
+  /** CSS **row-gap** property */
+  rowGap?: Responsive<SpaceInherit>;
+  /** CSS **column-gap** property */
+  columnGap?: Responsive<SpaceInherit>;
+};
 
 /** @public */
-export declare const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'
+export declare function Grid<T extends ElementType = "div">({
+  display,
+  ...props
+}: GridProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof GridProps<T>>): JSX.Element;
 
-/** @public */
-export declare const DEFAULT_TEXT_ELEMENT = 'div'
+declare const GRID_AUTO_FLOW: readonly [
+  "row",
+  "column",
+  "row dense",
+  "column dense",
+  "dense",
+];
 
 /** @public */
-export declare const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
-
-/** @beta */
-export declare const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
+export declare type GridAutoFlow = (typeof GRID_AUTO_FLOW)[number];
 
-/** @internal */
-export declare const DEFAULT_TOAST_ELEMENT = 'li'
+declare type GridChildProps = {
+  /** CSS **grid-column** property */
+  gridColumn?: Responsive<string>;
+  /** CSS **grid-column-start** property */
+  gridColumnStart?: Responsive<string>;
+  /** CSS **grid-column-end** property */
+  gridColumnEnd?: Responsive<string>;
+  /** CSS **grid-row** property */
+  gridRow?: Responsive<string>;
+  /** CSS **grid-row-start** property */
+  gridRowStart?: Responsive<string>;
+  /** CSS **grid-row-end** property */
+  gridRowEnd?: Responsive<string>;
+};
 
 /** @public */
-export declare const DEFAULT_TOOLTIP_ELEMENT = 'div'
-
-/** @beta */
-export declare const DEFAULT_TREE_ELEMENT = 'div'
-
-/** @beta */
-export declare const DEFAULT_TREE_ITEM_ELEMENT = 'a'
-
-/** @beta */
-export declare const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'
-
-/** @public */
-export declare type Delay =
-  | number
-  | Partial<{
-      open: number
-      close: number
-    }>
-
-/**
- * The Dialog component.
- *
- * @public
- */
-export declare function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEMENT>(
-  props: DialogProps<E>,
-): React.JSX.Element
-
-/**
- * @internal
- */
-export declare const DialogContext: Context<DialogContextValue>
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare interface DialogContextValue {
-  version: 0.0
-  position?: ResponsiveProp<DialogPosition>
-  zOffset?: ResponsiveProp<number>
-}
+export declare type GridParentProps = {
+  /** CSS **grid-auto-flow** property */
+  gridAutoFlow?: Responsive<GridAutoFlow>;
+  /** CSS **grid-auto-columns** property */
+  gridAutoColumns?: Responsive<string>;
+  /** CSS **grid-auto-row** property */
+  gridAutoRows?: Responsive<string>;
+  /** CSS **grid-template-columns** property */
+  gridTemplateColumns?: Responsive<string>;
+  /** CSS **grid-template-rows** property */
+  gridTemplateRows?: Responsive<string>;
+};
 
 /** @public */
-export declare type DialogElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export declare type DialogOwnProps = ContainerStyleProps &
-  Omit<LayerOwnProps, 'width'> & {
-    /**
-     * @beta
-     */
-    __unstable_autoFocus?: boolean
-    /**
-     * @beta
-     */
-    __unstable_hideCloseButton?: boolean
-    /**
-     * Whether the dialog should animate in on mount.
-     *
-     * @beta
-     * @defaultValue false
-     */
-    animate?: boolean
-    cardRadius?: ResponsiveProp<Radius>
-    contentRef?: ForwardedRef<HTMLDivElement>
-    footer?: ReactNode
-    header?: ReactNode
-    id: string
-    /** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
-    onActivate?: LayerProps['onActivate']
-    onClickOutside?: () => void
-    onClose?: () => void
-    open?: boolean
-    portal?: string
-    position?: ResponsiveProp<DialogPosition>
-    scheme?: ColorScheme
-    tone?: CardTone | 'inherit'
-    zOffset?: number | number[]
-  }
-
-/** @public */
-export declare type DialogPosition = 'absolute' | 'fixed'
-
-/** @public */
-export declare type DialogProps<E extends DialogElementType = DialogElementType> = Props<
-  DialogOwnProps,
-  E
->
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function DialogProvider(props: DialogProviderProps): React.JSX.Element
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare interface DialogProviderProps {
-  children?: ReactNode
-  position?: ResponsiveProp<DialogPosition>
-  zOffset?: ResponsiveProp<number>
-}
-
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function ElementQuery<
-  E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT,
->(props: ElementQueryProps<E>): React.JSX.Element
-
-/** @beta */
-export declare type ElementQueryElementType = 'div' | ComponentType
-
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare type ElementQueryOwnProps = {
-  media?: number[]
-}
-
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare type ElementQueryProps<E extends ElementQueryElementType = ElementQueryElementType> =
-  Props<ElementQueryOwnProps, E>
-
-/**
- * @beta
- */
-export declare interface ElementRectValue {
-  width: number
-  height: number
-}
-
-/**
- * @beta
- */
-export declare interface ElementSize {
-  content: ElementRectValue
-  border: ElementRectValue
-  /** @deprecated INTERNAL ONLY */
-  _contentRect: DOMRectReadOnly
+export declare interface GridProps<T extends React.ElementType = "div">
+  extends GridParentProps, GapProps, LayoutProps {
+  /** Element to render */
+  as?: T;
+  /** CSS **display** property */
+  display?: Responsive<DisplayGrid>;
 }
 
-/**
- * @internal
- */
-export declare interface _ElementSizeListener {
-  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
-}
-
-/**
- * @internal
- */
-export declare interface _ElementSizeObserver {
-  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
-}
-
-/**
- * @internal
- */
-export declare const _elementSizeObserver: _ElementSizeObserver
-
-/**
- * @internal
- */
-export declare type _ElementSizeSubscriber = (elementRect: ElementSize) => void
-
 /** @public */
-export declare type ElementType<P> = TagType | ComponentType<P>
+export declare function Heading<T extends ElementType = "h2">({
+  size,
+  weight,
+  ...props
+}: HeadingProps &
+  Omit<ComponentPropsWithRef<T>, keyof HeadingProps>): JSX.Element;
 
-/** @public */
-export declare type EmptyProps = {}
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  state: ErrorBoundaryState
-  static displayName: string
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState
-  componentDidCatch(error: Error, info: ErrorInfo): void
-  render(): ReactNode
-}
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export declare type ErrorBoundaryProps = PropsWithChildren<{
-  onCatch: (params: {error: Error; info: ErrorInfo}) => void
-}>
-
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export declare interface ErrorBoundaryState {
-  error: Error | null
-}
-
-/**
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
- *
- * @public
- */
-export declare function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(
-  props: FlexProps<E>,
-): React.JSX.Element
+declare const HEADING_SIZE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
-/** @public */
-export declare type FlexElementType = BoxElementType
+declare const HEADING_TAG: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
 
 /** @public */
-export declare type FlexOwnProps = Omit<
-  BoxOwnProps,
-  'align' | 'display' | 'flexDirection' | 'flexWrap'
-> & {
-  align?: ResponsiveProp<AlignItems>
-  direction?: ResponsiveProp<FlexDirection>
-  justify?: ResponsiveProp<JustifyContent>
-  wrap?: ResponsiveProp<FlexWrap>
+export declare interface HeadingProps extends TypographyProps {
+  /** Element to render */
+  as?: HeadingTag;
+  /** CSS **font-size** property */
+  size?: Responsive<HeadingSize>;
 }
 
 /** @public */
-export declare type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>
-
-/**
- * @internal
- */
-export declare function focusFirstDescendant(element: HTMLElement): boolean
-
-/**
- * @internal
- */
-export declare function focusLastDescendant(element: HTMLElement): boolean
+export declare type HeadingSize = (typeof HEADING_SIZE)[number];
 
-/**
- * @internal
- */
-export declare function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[]
+declare type HeadingTag = (typeof HEADING_TAG)[number];
 
-/**
- * @internal
- */
-export declare function _getResponsiveProp<T>(
-  val: ResponsiveProp<T> | undefined,
-  defaultVal?: Partial<Record<Breakpoint, T>>,
-): Partial<Record<Breakpoint, T>>
-
-/**
- * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
- *
- * @public
- */
-export declare function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(
-  props: GridProps<E>,
-): React.JSX.Element
+declare type HeightProps = {
+  /** CSS **height** property */
+  height?: Responsive<string>;
+  /** CSS **min-height** property */
+  minHeight?: Responsive<string>;
+  /** CSS **max-height** property */
+  maxHeight?: Responsive<string>;
+};
 
 /** @public */
-export declare type GridElementType = BoxElementType
+export declare function HStack<T extends ElementType = "div">(
+  props: HStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof HStackProps<T>>,
+): JSX.Element;
 
 /** @public */
-export declare type GridOwnProps = Omit<BoxOwnProps, 'display'>
+export declare interface HStackProps<
+  T extends React.ElementType = "div",
+> extends Pick<GapProps, "gap"> {
+  /** Element to render */
+  as?: T;
+}
 
 /** @public */
-export declare type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>
-
-/**
- * @internal
- */
-export declare function _hasFocus(element: HTMLElement): boolean
+export declare function Icon({ size, ...props }: IconProps): JSX.Element;
 
-/**
- * Typographic headings.
- *
- * @public
- */
-export declare function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(
-  props: HeadingProps<E>,
-): React.JSX.Element
+declare const ICON_SIZE: readonly [0, 1, 2, 3, 4];
 
 /** @public */
-export declare type HeadingElementType =
-  | 'div'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
-  | 'span'
-  | ComponentType
+export declare function IconButton<T extends ElementType = "button">(
+  props: IconButtonProps<T> &
+    Omit<ComponentPropsWithRef<T>, keyof IconButtonProps<T>>,
+): JSX.Element;
 
 /** @public */
-export declare type HeadingOwnProps = HeadingStyleProps & TextOverflowStyleProps
-
-/** @public */
-export declare type HeadingProps<E extends HeadingElementType = HeadingElementType> = Props<
-  HeadingOwnProps,
-  E
->
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function HeadingSkeleton<
-  E extends HeadingSkeletonElementType = typeof DEFAULT_HEADING_SKELETON_ELEMENT,
->(props: HeadingSkeletonProps<E>): React.JSX.Element
-
-/** @beta */
-export declare type HeadingSkeletonElementType = SkeletonElementType
-
-/** @beta */
-export declare type HeadingSkeletonOwnProps = SkeletonOwnProps & {
-  size?: ResponsiveProp<FontHeadingSize>
+export declare interface IconButtonProps<
+  T extends React_2.ElementType = "button",
+> extends Pick<
+  ButtonProps<T>,
+  "as" | "density" | "level" | "loading" | "tone"
+> {
+  /** Button label */
+  "aria-label": string;
+  /** Icon */
+  icon: React_2.ComponentType<SVGProps<SVGSVGElement>>;
 }
 
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare type HeadingSkeletonProps<
-  E extends HeadingSkeletonElementType = HeadingSkeletonElementType,
-> = Props<HeadingSkeletonOwnProps, E>
-
-/**
- * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
- *
- * @public
- */
-export declare function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(
-  props: HotkeysProps<E>,
-): React.JSX.Element | undefined
-
 /** @public */
-export declare type HotkeysElementType = 'kbd' | ComponentType
-
-/** @public */
-export declare interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
-  fontSize?: ResponsiveProp<FontTextSize>
-  padding?: ResponsiveProp<Space>
-  keys?: string[]
+export declare interface IconProps
+  extends
+    ComponentProps<"svg">,
+    Pick<TypographyProps, "muted">,
+    MarginProps,
+    ToneProps {
+  /** Icon to render */
+  icon: React.ComponentType<SVGProps<SVGSVGElement>>;
+  /** CSS **font-size** property */
+  size?: Responsive<IconSize>;
 }
 
 /** @public */
-export declare type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<
-  HotkeysOwnProps,
-  E
->
-
-/**
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
- *
- * @public
- */
-export declare function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(
-  props: InlineProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare type InlineElementType = BoxElementType
-
-/** @public */
-export declare type InlineOwnProps = Omit<
-  BoxOwnProps,
-  | 'alignItems'
-  | 'flexDirection'
-  | 'flexWrap'
-  | 'justifyContent'
-  | 'gridAutoColumns'
-  | 'gridAutoFlow'
-  | 'gridAutoRows'
-  | 'gridColumnEnd'
-  | 'gridColumnStart'
-  | 'gridColumn'
-  | 'gridRowEnd'
-  | 'gridRowStart'
-  | 'gridRow'
-  | 'gridTemplateColumns'
-  | 'gridTemplateRows'
->
-
-/** @public */
-export declare type InlineProps<E extends InlineElementType = InlineElementType> = Props<
-  InlineOwnProps,
-  E
->
-
-/**
- * @internal
- */
-export declare function _isEnterToClickElement(element: HTMLElement): boolean
-
-/**
- * @internal
- */
-export declare function isFocusable(element: HTMLElement): boolean
-
-/**
- * @internal
- */
-export declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement
-
-/**
- * @internal
- */
-export declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement
-
-/**
- * @internal
- */
-export declare function isHTMLElement(node: unknown): node is HTMLElement
-
-/**
- * @internal
- */
-export declare function isHTMLInputElement(element: unknown): element is HTMLInputElement
-
-/**
- * @internal
- */
-export declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement
-
-/**
- * @internal
- */
-export declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement
-
-/**
- * @internal
- */
-export declare function _isScrollable(el: Node): boolean
-
-/**
- * Used to define some text as keyboard input.
- *
- * @public
- */
-export declare function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(
-  props: KBDProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare type KBDElementType = 'kbd' | ComponentType
-
-/** @public */
-export declare type KBDOwnProps = BoxOwnProps &
-  RadiusStyleProps & {
-    fontSize?: ResponsiveProp<FontTextSize>
-  }
-
-/** @public */
-export declare type KBDProps<E extends KBDElementType = KBDElementType> = Props<KBDOwnProps, E>
-
-/**
- * Typographic labels.
- *
- * @public
- */
-export declare function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(
-  props: LabelProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare type LabelElementType =
-  | 'div'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
-  | 'li'
-  | 'p'
-  | 'span'
-  | ComponentType
-
-/** @public */
-export declare type LabelOwnProps = LabelStyleProps & TextOverflowStyleProps
-
-/** @public */
-export declare type LabelProps<E extends LabelElementType = LabelElementType> = Props<
-  LabelOwnProps,
-  E
->
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function LabelSkeleton<
-  E extends LabelSkeletonElementType = typeof DEFAULT_LABEL_SKELETON_ELEMENT,
->(props: LabelSkeletonProps<E>): React.JSX.Element
+export declare type IconSize = (typeof ICON_SIZE)[number];
 
 /** @beta */
-export declare type LabelSkeletonElementType = SkeletonElementType
+export declare function Indicator<T extends ElementType = "span">({
+  tone,
+  ...props
+}: IndicatorProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof IndicatorProps<T>>): JSX.Element;
 
 /** @beta */
-export declare type LabelSkeletonOwnProps = SkeletonOwnProps & {
-  size?: ResponsiveProp<FontLabelSize>
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare type LabelSkeletonProps<
-  E extends LabelSkeletonElementType = LabelSkeletonElementType,
-> = Props<LabelSkeletonOwnProps, E>
-
-/** @public */
-export declare function Layer<E extends LayerElementType = typeof DEFAULT_LAYER_ELEMENT>(
-  props: LayerProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare interface LayerContextValue {
-  version: 0.0
-  isTopLayer: boolean
-  level?: number
-  registerChild: (childLevel?: number) => () => void
-  size: number
-  zIndex: number
+export declare interface IndicatorProps<
+  T extends React.ElementType = "span",
+> extends ToneProps {
+  /** Element to render */
+  as?: T;
+  /** Label for aria-label attribute */
+  label?: string;
 }
 
 /** @public */
-export declare type LayerElementType = CardElementType
+export declare function IndicatorStack<T extends ElementType = "div">(
+  props: IndicatorStackProps<T> &
+    Omit<ComponentPropsWithRef<T>, keyof IndicatorStackProps<T>>,
+): JSX.Element;
 
 /** @public */
-export declare type LayerOwnProps = CardOwnProps & {
-  /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
-  onActivate?: (props: {activeElement: HTMLElement | null}) => void
-  zOffset?: ResponsiveProp<number>
+export declare interface IndicatorStackProps<
+  T extends React.ElementType = "div",
+> {
+  /** Element to render */
+  as?: T;
 }
 
+/** @deprecated Use HStack component instead */
 /** @public */
-export declare type LayerProps<E extends LayerElementType = LayerElementType> = Props<
-  LayerOwnProps,
-  E
->
-
-/** @public */
-export declare function LayerProvider(props: LayerProviderProps): React.JSX.Element
-
-/** @public */
-export declare interface LayerProviderProps {
-  children?: ReactNode
-  zOffset?: ResponsiveProp<number>
-}
-
-/**
- * @internal
- */
-export declare interface _MediaStore {
-  subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => Breakpoint
-}
-
-/**
- * The `Menu` component is a building block for application menus.
- *
- * @public
- */
-export declare function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
-  props: MenuProps<E>,
-): React.JSX.Element
-
-/**
- * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
- *
- * @public
- */
-export declare function MenuButton(props: MenuButtonProps): React.JSX.Element
+export declare function Inline<T extends ElementType = "div">(
+  props: InlineProps<T> & Omit<ComponentPropsWithRef<T>, keyof InlineProps<T>>,
+): JSX.Element;
 
+/** @deprecated Use HStack component instead */
 /** @public */
-export declare type MenuButtonProps = {
-  /**
-   * @beta Do not use in production.
-   */
-  __unstable_disableRestoreFocusOnClose?: boolean
-  button: ReactElement<ButtonProps>
-  id: string
-  menu?: ReactElement
-  onClose?: () => void
-  onOpen?: () => void
-  popover?: Omit<PopoverProps, 'content' | 'open'>
-  ref?: ForwardedRef<HTMLButtonElement | null>
+export declare interface InlineProps<
+  T extends React.ElementType = "div",
+> extends PaddingProps {
+  /** Element to render */
+  as?: T;
+  /** CSS **gap** property */
+  gap?: Responsive<SpaceInherit>;
 }
 
-/** @public */
-export declare function MenuDivider<
-  E extends MenuDividerElementType = typeof DEFAULT_MENU_DIVIDER_ELEMENT,
->(props: MenuDividerProps<E>): React.JSX.Element
+declare const INTERACTIVE_TAG: readonly ["button", "a"];
 
-/** @public */
-export declare type MenuDividerElementType = 'div' | 'hr' | 'span' | ComponentType
+declare type InteractiveAs<T extends React.ElementType> =
+  T extends InteractiveTag ? T : T extends string ? never : T;
 
-/** @public */
-export declare type MenuDividerOwnProps = {}
+declare type InteractiveTag = (typeof INTERACTIVE_TAG)[number];
 
-/** @public */
-export declare type MenuDividerProps<E extends MenuDividerElementType = MenuDividerElementType> =
-  Props<MenuDividerOwnProps, E>
-
-/** @public */
-export declare type MenuElementType = 'div' | 'span' | ComponentType
+declare const JUSTIFY_CONTENT: readonly [
+  "flex-start",
+  "flex-end",
+  "center",
+  "space-between",
+  "space-around",
+  "space-evenly",
+];
 
 /** @public */
-export declare function MenuGroup<
-  E extends MenuGroupElementType = typeof DEFAULT_MENU_GROUP_ELEMENT,
->(props: MenuGroupProps<E>): React.JSX.Element
+export declare type JustifyContent = (typeof JUSTIFY_CONTENT)[number];
 
-/** @public */
-export declare type MenuGroupElementType = 'button' | ComponentType
+/** @beta */
+export declare function Label(props: LabelProps): JSX.Element;
 
-/** @public */
-export declare type MenuGroupOwnProps = RadiusStyleProps & {
-  disabled?: boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  gap?: ResponsiveProp<Space>
-  icon?: ElementType_2 | ReactNode
-  menu?: Omit<
-    MenuProps<typeof DEFAULT_MENU_ELEMENT>,
-    | 'onClickOutside'
-    | 'onEscape'
-    | 'onItemClick'
-    | 'onKeyDown'
-    | 'onMouseEnter'
-    | 'registerElement'
-    | 'shouldFocus'
-    | 'onBlurCapture'
-  >
-  padding?: ResponsiveProp<Space>
-  popover?: Omit<PopoverProps, 'content' | 'open'>
-  text?: ReactNode
-  tone?: ElementTone
+/** @beta */
+export declare interface LabelProps
+  extends React.ComponentProps<"label">, MarginProps {
+  /** Element to render */
+  disabled?: boolean;
+  error?: boolean;
 }
 
 /** @public */
-export declare type MenuGroupProps<E extends MenuGroupElementType = MenuGroupElementType> = Props<
-  MenuGroupOwnProps,
-  E
->
-
-/** @public */
-export declare function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITEM_ELEMENT>(
-  props: MenuItemProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare type MenuItemElementType = 'button' | 'a' | ComponentType
-
-/** @public */
-export declare type MenuItemOwnProps = GapStyleProps &
-  PaddingStyleProps &
-  RadiusStyleProps & {
-    disabled?: boolean
-    fontSize?: ResponsiveProp<FontTextSize>
-    hotkeys?: string[]
-    icon?: ElementType_2 | ReactNode
-    iconRight?: ElementType_2 | ReactNode
-    pressed?: boolean
-    selected?: boolean
-    text?: ReactNode
-    tone?: ElementTone
-  }
-
-/** @public */
-export declare type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> = Props<
-  MenuItemOwnProps,
-  E
->
+export declare interface LayoutProps
+  extends
+    ToneProps,
+    WidthProps,
+    HeightProps,
+    MarginProps,
+    BorderProps,
+    PaddingProps,
+    PositionProps,
+    OverflowProps,
+    FlexChildProps,
+    GridChildProps,
+    ZIndexProps,
+    ShadowProps {}
 
-/** @public */
-export declare type MenuOwnProps = PaddingStyleProps & {
-  'gap'?: ResponsiveProp<Space>
-  'onClickOutside'?: (event: MouseEvent) => void
-  'onEscape'?: () => void
-  'onItemClick'?: () => void
-  'onItemSelect'?: (index: number) => void
-  'originElement'?: HTMLElement | null
-  'registerElement'?: (el: HTMLElement) => () => void
-  'shouldFocus'?: 'first' | 'last' | null
-  'aria-labelledby'?: string
-}
+/** @beta */
+export declare function Link({ underlined, ...props }: LinkProps): JSX.Element;
 
-/** @public */
-export declare type MenuProps<E extends MenuElementType = MenuElementType> = Props<MenuOwnProps, E>
-
-/**
- * Placement of floating UI elements.
- *
- * @public
- */
-export declare type Placement =
-  | 'top'
-  | 'top-start'
-  | 'top-end'
-  | 'right'
-  | 'right-start'
-  | 'right-end'
-  | 'bottom'
-  | 'bottom-start'
-  | 'bottom-end'
-  | 'left'
-  | 'left-start'
-  | 'left-end'
-
-/**
- * The `Popover` component is used to display some content on top of another.
- *
- * @public
- */
-export declare function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_ELEMENT>(
-  props: PopoverProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare type PopoverElementType = 'div' | ComponentType
-
-/**
- * @beta
- */
-export declare type PopoverMargins = [number, number, number, number]
-
-/** @public */
-export declare type PopoverOwnProps = Omit<LayerOwnProps, 'maxWidth'> & {
-  /** @beta */
-  __unstable_margins?: PopoverMargins
-  /**
-   * Whether the popover should animate in and out.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
-  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
+/** @beta */
+export declare interface LinkProps extends React.ComponentProps<"a"> {
+  /** If true, sets `target="_blank"` and `rel="noopener noreferrer"` */
+  openInNewTab?: boolean;
   /**
-   * 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.
+   * If true, sets `text-decoration: underline`
    *
-   * 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.
+   * @defaultValue true
    */
-  referenceElement?: HTMLElement | null
-  /** @beta */
-  updateRef?: Ref<PopoverUpdateCallback | undefined>
-  width?: ResponsiveProp<MaxWidth>
+  underlined?: boolean;
 }
 
-/** @public */
-export declare type PopoverProps<E extends PopoverElementType = PopoverElementType> = Props<
-  PopoverOwnProps,
-  E
->
-
 /** @beta */
-export declare type PopoverUpdateCallback = () => void
+export declare const List: typeof ListRoot;
 
-/** @public */
-export declare type PopoverWidth = Exclude<ContainerWidth, 'auto'>
+declare const LIST_TAG: readonly ["ol", "ul"];
 
-/** @public */
-export declare function Portal(props: PortalProps): ReactPortal | null
+declare function ListButtonItem<T extends ElementType = "button">({
+  density,
+  ...props
+}: ListButtonItemProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof ListButtonItemProps<T>>): JSX.Element;
 
-/** @public */
-export declare interface PortalContextValue {
-  version: 0.0
-  boundaryElement: HTMLElement | null
-  element: HTMLElement | null
-  elements?: Record<string, HTMLElement | null | undefined>
-}
-
-/** @public */
-export declare interface PortalProps {
-  children: ReactNode
-  /**
-   * @beta This API might change. DO NOT USE IN PRODUCTION.
-   */
-  __unstable_name?: string
-}
-
-/** @public */
-export declare function PortalProvider(props: PortalProviderProps): React.JSX.Element
-
-/** @public */
-export declare interface PortalProviderProps {
-  children: ReactNode
-  element?: HTMLElement | null
-  /**
-   * @beta
-   */
-  __unstable_elements?: Record<string, HTMLElement | null | undefined>
+/** @beta */
+export declare interface ListButtonItemProps<
+  T extends React_2.ElementType = "button",
+> extends ListItemProps {
+  /** Element to render */
+  as?: InteractiveAs<T>;
+  /** Selected state */
+  selected?: boolean;
 }
 
-/** @public */
-export declare type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
-  E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
-  P & {
-    as?: E
-  }
->
-
-/**
- * The `Radio` component allows the user to select one option from a set.
- *
- * @public
- */
-export declare function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(
-  props: RadioProps<E>,
-): React.JSX.Element
+declare function ListItem({ density, ...props }: ListItemProps): JSX.Element;
 
-/** @public */
-export declare type RadioElementType = 'input' | ComponentType
+declare function ListItemImage(props: ComponentProps<"img">): JSX.Element;
 
-/** @public */
-export declare type RadioOwnProps = {
-  customValidity?: string
+/** @beta */
+export declare interface ListItemProps extends React_2.ComponentProps<"li"> {
+  /** Composite prop for setting padding and gap */
+  density?: Responsive<Density>;
+  /** Starting slot */
+  start?: React_2.ReactNode;
+  /** Ending slot */
+  end?: React_2.ReactNode;
 }
 
-/** @public */
-export declare type RadioProps<E extends RadioElementType = RadioElementType> = Props<
-  RadioOwnProps,
-  E
->
-
-/**
- * @internal
- */
-export declare function _raf(fn: () => void): () => void
-
-/**
- * @internal
- */
-export declare function _raf2(fn: () => void): () => void
-
-/**
- * @internal
- */
-export declare const _ResizeObserver: typeof ResizeObserver
-
-/**
- * @internal
- */
-export declare interface ResponsiveWidthStyleProps {
-  $width: (number | 'auto')[]
+declare function ListItemText<T extends ElementType = "div">(
+  props: ListItemTextProps<T> &
+    Omit<ComponentPropsWithRef<T>, keyof ListItemTextProps<T>>,
+): JSX.Element;
+
+/** @beta */
+export declare interface ListItemTextProps<
+  T extends React_2.ElementType = "div",
+> {
+  /** Element to render */
+  as?: T;
+  /** Title text */
+  title?: React_2.ReactNode;
+  /** Subtitle text */
+  subtitle?: React_2.ReactNode;
 }
 
-/**
- * The `Root` component.
- *
- * @public
- */
-export declare function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(
-  props: RootProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare type RootElementType = 'html' | 'body' | 'div'
-
-/** @public */
-export declare interface RootOwnProps extends BoxOwnProps, RootStyleProps {}
+/** @beta */
+export declare interface ListProps<T extends ListTag = "ul"> extends Pick<
+  GapProps,
+  "gap"
+> {
+  /** Element to render */
+  as?: T;
+}
+
+declare function ListRoot<T extends ListTag = "ul">(
+  props: ListProps<T> & Omit<ComponentPropsWithRef<T>, keyof ListProps<T>>,
+): JSX.Element;
+
+declare namespace ListRoot {
+  var displayName: string;
+  var Item: typeof ListItem;
+  var ButtonItem: typeof ListButtonItem;
+  var ItemText: typeof ListItemText;
+  var ItemImage: typeof ListItemImage;
+}
+
+declare type ListTag = (typeof LIST_TAG)[number];
+
+/** @public */
+export declare type MarginProps = {
+  /** CSS **margin** property */
+  margin?: Responsive<SpaceAutoNegative>;
+  /** CSS **margin-left** and **margin-right** properties */
+  marginX?: Responsive<SpaceAutoNegative>;
+  /** CSS **margin-top** and **margin-bottom** properties */
+  marginY?: Responsive<SpaceAutoNegative>;
+  /** CSS **margin-top** property */
+  marginTop?: Responsive<SpaceAutoNegative>;
+  /** CSS **margin-right** property */
+  marginRight?: Responsive<SpaceAutoNegative>;
+  /** CSS **margin-bottom** property */
+  marginBottom?: Responsive<SpaceAutoNegative>;
+  /** CSS **margin-left** property */
+  marginLeft?: Responsive<SpaceAutoNegative>;
+};
+
+declare const OVERFLOW: readonly [
+  "visible",
+  "hidden",
+  "auto",
+  "scroll",
+  "clip",
+];
+
+/** @public */
+export declare type Overflow = (typeof OVERFLOW)[number];
+
+declare type OverflowProps = {
+  /** CSS **overflow** property */
+  overflow?: Responsive<Overflow>;
+  /** CSS **overflow-x** property */
+  overflowX?: Responsive<Overflow>;
+  /** CSS **overflow-y** property */
+  overflowY?: Responsive<Overflow>;
+};
 
 /** @public */
-export declare type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>
+export declare interface PaddingProps {
+  /** CSS **padding** property */
+  padding?: Responsive<Space>;
+  /** CSS **padding-left** and **padding-right** properties */
+  paddingX?: Responsive<Space>;
+  /** CSS **padding-top** and **padding-bottom** properties */
+  paddingY?: Responsive<Space>;
+  /** CSS **padding-top** property */
+  paddingTop?: Responsive<Space>;
+  /** CSS **padding-right** property */
+  paddingRight?: Responsive<Space>;
+  /** CSS **padding-bottom** property */
+  paddingBottom?: Responsive<Space>;
+  /** CSS **padding-left** property */
+  paddingLeft?: Responsive<Space>;
+}
+
+declare const PLACEMENT: readonly [
+  "top",
+  "top-start",
+  "top-end",
+  "right",
+  "right-start",
+  "right-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "left",
+  "left-start",
+  "left-end",
+];
+
+/** @public */
+export declare type Placement = (typeof PLACEMENT)[number];
+
+/** @public */
+export declare type PlacementProps = {
+  /** Placement relative to anchor */
+  placement?: Placement;
+};
+
+declare const POSITION: readonly [
+  "absolute",
+  "fixed",
+  "relative",
+  "static",
+  "sticky",
+];
+
+/** @public */
+export declare type Position = (typeof POSITION)[number];
+
+declare type PositionProps = {
+  /** CSS **position** property */
+  position?: Responsive<Position>;
+  /** CSS **inset** property */
+  inset?: Responsive<SpaceAuto>;
+  /** CSS **top** property */
+  top?: Responsive<SpaceAuto>;
+  /** CSS **right** property */
+  right?: Responsive<SpaceAuto>;
+  /** CSS **bottom** property */
+  bottom?: Responsive<SpaceAuto>;
+  /** CSS **left** property */
+  left?: Responsive<SpaceAuto>;
+};
+
+/** @public */
+export declare function PressArea<T extends ElementType = "button">(
+  props: PressAreaProps<T> &
+    Omit<ComponentPropsWithRef<T>, keyof PressAreaProps<T>>,
+): JSX.Element;
+
+/** @public */
+export declare interface PressAreaProps<
+  T extends React.ElementType = "button",
+> {
+  /** Element to render */
+  as?: InteractiveAs<T>;
+}
+
+/** @beta */
+export declare function Radio(props: RadioProps): JSX.Element;
 
-/** @public */
-export declare function RootProvider(props: RootProviderProps): React.JSX.Element
+/** @beta */
+export declare interface RadioProps
+  extends React.ComponentProps<"input">, MarginProps {
+  /** Error state */
+  error?: boolean;
+  /** Input label */
+  label: React.ReactNode;
+}
+
+declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, "full"];
 
 /** @public */
-export declare interface RootProviderProps {
-  boundaryElement?: HTMLElement | null
-  children?: ReactNode
-  portalElement?: HTMLElement | null
-  scheme?: ColorScheme
-  tone?: CardTone
-}
-
-/**
- * The `Select` component provides control of options.
- *
- * @public
- */
-export declare function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(
-  props: SelectProps<E>,
-): React.JSX.Element
-
-/** @internal */
-export declare function Selectable<
-  E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT,
->(props: SelectableProps<E>): React.JSX.Element
-
-/** @internal */
-export declare type SelectableElementType = 'button' | 'a' | ComponentType
-
-/** @internal */
-export declare type SelectableOwnProps = BoxOwnProps &
-  SelectableStyleProps & {
-    disabled?: boolean
-    href?: string
-    selected?: boolean
-    tone?: ElementTone
-    type?: 'button'
-  }
-
-/** @internal */
-export declare type SelectableProps<E extends SelectableElementType = SelectableElementType> =
-  Props<SelectableOwnProps, E>
+export declare type Radius = (typeof RADIUS)[number];
 
 /** @public */
-export declare type SelectElementType = 'select' | ComponentType
+export declare type Responsive<T> =
+  | T
+  | []
+  | ([T | undefined | null, ...(T | undefined | null)[]] & {
+      length: 1;
+    })
+  | ([T | undefined | null, ...(T | undefined | null)[]] & {
+      length: 2;
+    })
+  | ([T | undefined | null, ...(T | undefined | null)[]] & {
+      length: 3;
+    })
+  | ([T | undefined | null, ...(T | undefined | null)[]] & {
+      length: 4;
+    })
+  | ([T | undefined | null, ...(T | undefined | null)[]] & {
+      length: 5;
+    })
+  | ([T | undefined | null, ...(T | undefined | null)[]] & {
+      length: 6;
+    });
 
-/** @public */
-export declare type SelectOwnProps = SelectStyleProps & {
-  customValidity?: string
-  readOnly?: boolean
-}
+declare const SHADOW: readonly [0, 1, 2, 3, 4, 5];
 
 /** @public */
-export declare type SelectProps<E extends SelectElementType = SelectElementType> = Props<
-  SelectOwnProps,
-  E
->
+export declare type Shadow = (typeof SHADOW)[number];
 
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON_ELEMENT>(
-  props: SkeletonProps<E>,
-): React.JSX.Element
+declare type ShadowProps = {
+  /** CSS **box-shadow** property */
+  shadow?: Shadow;
+};
 
 /** @beta */
-export declare type SkeletonElementType = 'div' | 'span' | ComponentType
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare type SkeletonOwnProps = SkeletonStyleProps & {
-  animated?: boolean
-  delay?: number
-}
+export declare function SkipToContent(props: SkipToContentProps): JSX.Element;
 
 /** @beta */
-export declare type SkeletonProps<E extends SkeletonElementType = SkeletonElementType> = Props<
-  SkeletonOwnProps,
-  E
->
-
-/**
- * Indicate that something is loading for an indeterminate amount of time.
- *
- * @public
- */
-export declare function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(
-  props: SpinnerProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare type SpinnerElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export declare type SpinnerOwnProps = {
-  muted?: boolean
-  size?: ResponsiveProp<FontTextSize>
+export declare interface SkipToContentProps extends React.ComponentProps<"a"> {
+  /**
+   * Anchor href. The target element should be focusable or have `tabindex="-1"`.
+   */
+  href: string;
+  /** Visible/announced label */
+  label: string;
+  /** Use label instead */
+  children?: never;
 }
 
-/** @public */
-export declare type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<
-  SpinnerOwnProps,
-  E
->
+declare const SPACE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 
 /** @public */
-export declare function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEMENT>(
-  props: SrOnlyProps<E>,
-): React.JSX.Element
+export declare type Space = (typeof SPACE)[number];
 
-/** @public */
-export declare type SrOnlyElementType = 'span' | ComponentType
+declare const SPACE_AUTO: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "auto"];
 
-/** @public */
-export declare type SrOnlyOwnProps = {}
-
-/** @public */
-export declare type SrOnlyProps<E extends SrOnlyElementType = SrOnlyElementType> = Props<
-  SrOnlyOwnProps,
-  E
->
+declare const SPACE_AUTO_NEGATIVE: readonly [
+  -9,
+  -8,
+  -7,
+  -6,
+  -5,
+  -4,
+  -3,
+  -2,
+  -1,
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  "auto",
+];
 
-/**
- * The `Stack` component is used to place elements on top of each other.
- *
- * @public
- */
-export declare function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>(
-  props: StackProps<E>,
-): React.JSX.Element
+declare const SPACE_INHERIT: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "inherit"];
 
 /** @public */
-export declare type StackElementType = BoxElementType
+export declare type SpaceAuto = (typeof SPACE_AUTO)[number];
 
 /** @public */
-export declare type StackOwnProps = Omit<
-  BoxOwnProps,
-  | 'align'
-  | 'alignItems'
-  | 'columns'
-  | 'gridTemplateColumns'
-  | 'direction'
-  | 'display'
-  | 'flexDirection'
-  | 'flexWrap'
-  | 'gapX'
-  | 'gapY'
-  | 'justify'
-  | 'justifyContent'
-  | 'rows'
-  | 'gridTemplateRows'
->
+export declare type SpaceAutoNegative = (typeof SPACE_AUTO_NEGATIVE)[number];
 
 /** @public */
-export declare type StackProps<E extends StackElementType = StackElementType> = Props<
-  StackOwnProps,
-  E
->
-
-/**
- * The `Switch` component allows the user to toggle a setting on and off.
- *
- * Extends all properties of an `<input type="checkbox" />` element, except type.
- *
- * @public
- */
-export declare function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEMENT>(
-  props: SwitchProps<E>,
-): React.JSX.Element
+export declare type SpaceInherit = (typeof SPACE_INHERIT)[number];
 
 /** @public */
-export declare type SwitchElementType = 'input' | ComponentType
+export declare function Spinner({ size, ...props }: SpinnerProps): JSX.Element;
 
 /** @public */
-export declare type SwitchOwnProps = {
-  indeterminate?: boolean
+export declare interface SpinnerProps extends React.ComponentProps<"svg"> {
+  size?: Responsive<IconSize>;
 }
 
-/** @public */
-export declare type SwitchProps<E extends SwitchElementType = SwitchElementType> = Props<
-  SwitchOwnProps,
-  E
->
-
-/** @public */
-export declare function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(
-  props: TabProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare type TabElementType = 'button' | ComponentType
-
-/** @public */
-export declare function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_ELEMENT>(
-  props: TabListProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare type TabListChild =
-  | ReactElement<Props<TabProps, 'button'>>
-  | null
-  | undefined
-  | false
-
-/** @public */
-export declare type TabListElementType = 'div' | 'span' | ComponentType
+/** @beta */
+export declare function Switch(props: SwitchProps): JSX.Element;
 
-/** @public */
-export declare type TabListOwnProps = Omit<FlexOwnProps, 'as' | 'height'> & {
-  children: TabListChild[]
+/** @beta */
+export declare interface SwitchProps
+  extends React.ComponentProps<"input">, MarginProps {
+  /** Error state */
+  error?: boolean;
+  /** Input label */
+  label: React.ReactNode;
 }
 
 /** @public */
-export declare type TabListProps<E extends TabListElementType = TabListElementType> = Props<
-  TabListOwnProps,
-  E
->
+declare function Text_2<T extends ElementType = "span">({
+  size,
+  ...props
+}: TextProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof TextProps<T>>): JSX.Element;
+export { Text_2 as Text };
 
-/** @public */
-export declare type TabOwnProps = {
-  /**
-   * The `id` of the corresponding `TabPanel` component.
-   */
-  'aria-controls': string
-  'id': string
-  'icon'?: ElementType_2 | ReactNode
-  'focused'?: boolean
-  'fontSize'?: ResponsiveProp<FontTextSize>
-  'label'?: ReactNode
-  'padding'?: ResponsiveProp<Space>
-  'selected'?: boolean
-  'tone'?: ElementTone
-}
+declare const TEXT_ALIGN: readonly ["left", "center", "right", "justify"];
 
-/** @public */
-export declare function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANEL_ELEMENT>(
-  props: TabPanelProps<E>,
-): React.JSX.Element
+declare const TEXT_SIZE: readonly [0, 1, 2, 3, 4];
 
 /** @public */
-export declare type TabPanelElementType = 'div' | 'span' | ComponentType
+export declare type TextAlign = (typeof TEXT_ALIGN)[number];
 
 /** @public */
-export declare type TabPanelOwnProps = BoxOwnProps & {
-  /**
-   * The `id` of the correlating `Tab` component.
-   */
-  'aria-labelledby': string
-  'id': string
+export declare interface TextProps<
+  T extends React.ElementType = "span",
+> extends TypographyProps {
+  /** Element to render */
+  as?: T;
+  /** CSS **font-size** property */
+  size?: Responsive<TextSize>;
 }
 
 /** @public */
-export declare type TabPanelProps<E extends TabPanelElementType = TabPanelElementType> = Props<
-  TabPanelOwnProps,
-  E
->
-
-/** @public */
-export declare type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>
-
-/** @public */
-export declare type TagType = keyof JSX.IntrinsicElements
-
-/**
- * The `Text` component is an agile, themed typographic element.
- *
- * @public
- */
-declare function Text_2<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
-  props: TextProps<E>,
-): React.JSX.Element
-export {Text_2 as Text}
-
-/**
- * A multiline text input.
- *
- * @public
- */
-export declare function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(
-  props: TextAreaProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare type TextAreaElementType = 'textarea' | ComponentType
-
-/** @public */
-export declare type TextAreaOwnProps = TextAreaStyleProps & {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  customValidity?: string
-}
+export declare type TextSize = (typeof TEXT_SIZE)[number];
 
-/** @public */
-export declare type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<
-  TextAreaOwnProps,
-  E
->
+declare const TONE: readonly [
+  "neutral",
+  "positive",
+  "suggest",
+  "caution",
+  "critical",
+];
 
 /** @public */
-export declare type TextElementType =
-  | 'div'
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'label'
-  | 'li'
-  | 'p'
-  | 'span'
-  | 'summary'
-  | 'time'
-  | ComponentType
+export declare type Tone = (typeof TONE)[number];
 
-/**
- * Single line text input.
- *
- * @public
- */
-export declare function TextInput<
-  E extends TextInputElementType = typeof DEFAULT_TEXT_INPUT_ELEMENT,
->(props: TextInputProps<E>): React.JSX.Element
+declare type ToneProps = {
+  /** CSS **background-color** property */
+  tone?: Tone;
+};
 
 /** @public */
-export declare type TextInputClearButtonProps = Omit<
-  ButtonProps<'button'>,
-  'as' | 'onClick' | 'onMouseDown'
->
+export declare function Tooltip({ placement, ...props }: TooltipProps): any;
 
 /** @public */
-export declare type TextInputElementType = 'input' | ComponentType
+export declare function TooltipGroup<T extends ElementType = "div">(
+  props: TooltipGroupProps<T> &
+    Omit<ComponentPropsWithRef<T>, keyof TooltipGroupProps<T>>,
+): JSX.Element;
 
 /** @public */
-export declare type TextInputOwnProps = InputStyleProps & {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  /**
-   * @beta
-   */
-  clearButton?: boolean | TextInputClearButtonProps
-  customValidity?: string
-  icon?: ElementType_2 | ReactNode
-  iconRight?: ElementType_2 | ReactNode
-  /**
-   * @beta
-   */
-  onClear?: () => void
-  prefix?: ReactNode
-  suffix?: ReactNode
-  weight?: FontWeight
+export declare interface TooltipGroupProps<
+  T extends React.ElementType = "div",
+> {
+  /** Element to render */
+  as?: T;
 }
 
 /** @public */
-export declare type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<
-  TextInputOwnProps,
-  E
->
-
-/** @public */
-export declare type TextOwnProps = TextStyleProps & TextOverflowStyleProps
-
-/** @public */
-export declare type TextProps<E extends TextElementType = TextElementType> = Props<TextOwnProps, E>
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function TextSkeleton<
-  E extends TextSkeletonElementType = typeof DEFAULT_TEXT_SKELETON_ELEMENT,
->(props: TextSkeletonProps<E>): React.JSX.Element
-
-/** @beta */
-export declare type TextSkeletonElementType = SkeletonElementType
-
-/** @beta */
-export declare type TextSkeletonOwnProps = SkeletonOwnProps & {
-  size?: ResponsiveProp<FontTextSize>
-}
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare type TextSkeletonProps<E extends TextSkeletonElementType = TextSkeletonElementType> =
-  Props<TextSkeletonOwnProps, E>
-
-/**
- * The `Toast` component gives feedback to users when an action has taken place.
- *
- * Toasts can be closed with a close button, or auto-dismiss when the duration expires.
- *
- * @internal
- */
-export declare function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
-  props: ToastProps<E>,
-): React.JSX.Element
-
-/** @public */
-export declare interface ToastContextValue {
-  version: 0.0
-  /**
-   * Creates or updates a toast notification.
-   * If a toast with the same ID already exists, it will be updated.
-   * If an ID is not provided, a random one will be generated.
-   * The returned ID can be used to programatically update a toast.
-   */
-  push: (params: ToastParams) => string
-}
-
-/** @internal */
-export declare type ToastElementType = 'li' | ComponentType
-
-/** @internal */
-declare type ToastLayerElementType = 'ul' | ComponentType
-
-/** @internal */
-declare type ToastLayerOwnProps = GapStyleProps & PaddingStyleProps
-
-/** @internal */
-declare type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElementType> = Props<
-  ToastLayerOwnProps,
-  E
->
-
-/** @internal */
-export declare type ToastOwnProps = RadiusStyleProps & {
-  closable?: boolean
-  description?: ReactNode
-  onClose?: () => void
-  title?: ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
-  duration?: number
+export declare interface TooltipProps
+  extends React.ComponentProps<"div">, PlacementProps {
+  /** Tooltip text */
+  text?: React.ReactNode;
+  /** Disabled state */
+  disabled?: boolean;
 }
 
 /** @public */
-export declare interface ToastParams {
-  closable?: boolean
-  description?: ReactNode
-  duration?: number
-  id?: string
-  onClose?: () => void
-  title?: ReactNode
-  status?: 'error' | 'warning' | 'success' | 'info'
+export declare interface TypographyProps extends MarginProps, ToneProps {
+  /** CSS **text-align** property */
+  align?: Responsive<TextAlign>;
+  /** CSS **color** property */
+  muted?: boolean;
+  /** CSS **text-box-trim** property */
+  trim?: boolean;
+  /** Number of lines to truncate */
+  truncate?: Responsive<number>;
+  /** CSS **font-weight** property */
+  weight?: FontWeight;
 }
 
-/** @internal */
-export declare type ToastProps<E extends ToastElementType = ToastElementType> = Props<
-  ToastOwnProps,
-  E
->
-
 /** @public */
-export declare function ToastProvider(props: ToastProviderProps): React.JSX.Element
+export declare function VisuallyHidden<T extends ElementType = "span">(
+  props: VisuallyHiddenProps<T> &
+    Omit<ComponentPropsWithRef<T>, keyof VisuallyHiddenProps<T>>,
+): JSX.Element;
 
 /** @public */
-export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
-  children?: React.ReactNode
-  zOffset?: ResponsiveProp<number>
-}
-
-/**
- * Tooltips display information when hovering, focusing or tapping.
- *
- * @public
- */
-export declare function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
-  props: TooltipProps<E>,
-): React.JSX.Element
-
-/**
- * @beta
- */
-export declare const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null>
-
-/**
- * @beta
- */
-export declare interface TooltipDelayGroupContextValue {
-  setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void
-  setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void
-  openDelay: number
-  closeDelay: number
-  openTooltipId: string | null
-}
-
-/**
- * @public
- * Provides context for a group of tooltip elements that should share a delay
- * which temporarily becomes 1 ms after the first floating element of the group opens.
- */
-export declare function TooltipDelayGroupProvider(
-  props: TooltipDelayGroupProviderProps,
-): React.JSX.Element
-
-/**
- * @public
- * */
-export declare interface TooltipDelayGroupProviderProps {
-  children?: ReactNode
-  /**
-   * Handles the delays to open or close a tooltip inside a group
-   *
-   * If only a `number` is passed, it will be used for both opening and closing.
-   *
-   * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
-   *
-   * @public
-   */
-  delay: Delay
+export declare interface VisuallyHiddenProps<
+  T extends React.ElementType = "span",
+> {
+  /** Element to render */
+  as?: T;
+  /** If true, element is visible on :focus-visible */
+  visibleOnFocus?: boolean;
 }
 
 /** @public */
-export declare type TooltipElementType = 'div' | 'span' | ComponentType
-
-/** @public */
-export declare type TooltipOwnProps = LayerOwnProps &
-  RadiusStyleProps &
-  ShadowStyleProps & {
-    /**
-     * Whether the tooltip should animate in and out.
-     *
-     * @beta
-     * @defaultValue false
-     */
-    animate?: boolean
-    arrow?: boolean
-    boundaryElement?: HTMLElement | null
-    children?: ReactElement<HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>>
-    content?: 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[]
-    placement?: Placement
-    /** Whether or not to render the tooltip in a portal element. */
-    portal?: boolean | string
-    scheme?: ColorScheme
-    tone?: CardTone
-  }
-
-/** @public */
-export declare type TooltipProps<E extends TooltipElementType = TooltipElementType> = Props<
-  TooltipOwnProps,
-  E
->
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
-  props: TreeProps<E>,
-): React.JSX.Element
-
-/**
- * @beta
- */
-export declare interface TreeContextValue {
-  version: 0.0
-  focusedElement: HTMLElement | null
-  gap: ResponsiveProp<Space>
-  level: number
-  path: string[]
-  registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
-  setExpanded: (path: string, expanded: boolean) => void
-  setFocusedElement: (focusedElement: HTMLElement | null) => void
-  state: TreeState
-}
-
-/** @beta */
-export declare type TreeElementType = 'div' | ComponentType
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITEM_ELEMENT>(
-  props: TreeItemProps<E>,
-): React.JSX.Element
-
-/** @beta */
-export declare type TreeItemElementType = 'a' | 'li' | ComponentType
-
-/** @beta */
-export declare type TreeItemOwnProps = CardOwnProps & {
-  expanded?: boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  icon?: ElementType_2
-  /**
-   * Allows passing a custom element type to the link component
-   * @internal
-   */
-  linkAs?: SelectableElementType
-  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>
-  padding?: ResponsiveProp<Space>
-  space?: ResponsiveProp<Space>
-  text?: ReactNode
-  weight?: FontWeight
-}
-
-/** @beta */
-export declare type TreeItemProps<E extends TreeItemElementType = TreeItemElementType> = Props<
-  TreeItemOwnProps,
-  E
->
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare type TreeOwnProps = {
-  gap?: ResponsiveProp<Space>
-}
-
-/** @beta */
-export declare type TreeProps<E extends TreeElementType = TreeElementType> = Props<TreeOwnProps, E>
-
-/**
- * @beta
- */
-export declare interface TreeState {
-  [key: string]:
-    | {
-        element: HTMLElement
-        expanded: boolean
-      }
-    | undefined
-}
+export declare function VStack<T extends ElementType = "div">(
+  props: VStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof VStackProps<T>>,
+): JSX.Element;
 
 /** @public */
-export declare function useBoundaryElement(): BoundaryElementContextValue
-
-/** @public */
-export declare function useCard(): CardContextValue
-
-/** @public */
-export declare function useClickOutsideEvent(
-  listener: ClickOutsideEventListener | false | undefined,
-  elementsArg?: () => ClickOutsideEventElements,
-  boundaryElement?: () => HTMLElement | null,
-): void
-
-/**
- * @beta
- */
-export declare function useCustomValidity(
-  ref: {
-    current: null | {
-      setCustomValidity: (validity: string) => void
-    }
-  },
-  customValidity: string | undefined,
-): void
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function useDialog(): DialogContextValue
-
-/**
- * Subscribe to the size of a DOM element.
- * @beta
- */
-export declare function useElementSize(element: HTMLElement | null): ElementSize | null
-
-/**
- * @beta
- */
-export declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void): void
-
-/** @public */
-export declare function useLayer(): LayerContextValue
-
-/**
- * Efficiently subscribes to `window.matchMedia` queries
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * @public
- */
-export declare function useMatchMedia(
-  mediaQueryString: `(${string})`,
-  getServerSnapshot?: () => boolean,
-): boolean
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function useMediaIndex(): Breakpoint
-
-/** @public */
-export declare function usePortal(): PortalContextValue
-
-/**
- * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
- * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
- *
- * @public
- */
-export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
-
-/**
- * Returns true if motion should be reduced
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
- * @example https://gist.github.com/stipsan/0c0f839a27842249cada893e9fb7767b
- *
- * @public
- */
-export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
-
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function useResponsiveProp<T>(
-  val: ResponsiveProp<T> | undefined,
-  defaultVal?: Partial<Record<Breakpoint, T>>,
-): Partial<Record<Breakpoint, T>>
-
-/** @public */
-export declare function useToast(): ToastContextValue
-
-/**
- * @beta
- */
-export declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null
-
-/**
- * @beta
- */
-export declare function useTree(): TreeContextValue
-
-/** @beta */
-export declare function VirtualList<
-  E extends VirtualListElementType = typeof DEFAULT_VIRTUAL_LIST_ELEMENT,
->(props: VirtualListProps<E>): React.JSX.Element
-
-/** @beta */
-export declare interface VirtualListChangeOpts {
-  fromIndex: number
-  gap: number
-  itemHeight: number
-  scrollHeight: number
-  scrollTop: number
-  toIndex: number
+export declare interface VStackProps<
+  T extends React.ElementType = "div",
+> extends Pick<GapProps, "gap"> {
+  /** Element to render */
+  as?: T;
 }
 
-/** @beta */
-export declare type VirtualListElementType = 'div' | ComponentType
-
-/** @beta */
-export declare type VirtualListOwnProps<Item = any> = {
-  gap?: Space
-  getItemKey?: (item: Item, itemIndex: number) => string
-  items?: Item[]
-  onChange?: (opts: VirtualListChangeOpts) => void
-  renderItem?: (item: Item) => ReactNode
-}
+declare type WidthProps = {
+  /** CSS **width** property */
+  width?: Responsive<string>;
+  /** CSS **min-width** property */
+  minWidth?: Responsive<string>;
+  /** CSS **max-width** property */
+  maxWidth?: Responsive<string>;
+};
 
-/** @beta */
-export declare type VirtualListProps<E extends VirtualListElementType = VirtualListElementType> =
-  Props<VirtualListOwnProps, E>
+declare type ZIndexProps = {
+  /** CSS z-index property */
+  zIndex?: Responsive<number>;
+};
 
-export {}
+export {};