@sanity/ui 5.0.0-alpha.1 → 5.0.0-alpha.11

package/dist/index.d.ts

@@ -1,22 +1,22 @@
-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 AlignItems = (typeof ALIGN_ITEMS)[number];
-
-declare type BorderProps = {
+import React$1, { ComponentProps, ComponentPropsWithRef, ElementType, SVGProps } from "react";
+declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, "full"];
+/** @public */
+type Radius = (typeof RADIUS)[number];
+/** @public */
+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;
+});
+type BorderProps = {
   /** CSS **border** property */
   border?: Responsive<boolean>;
   /** CSS **border-top** property */
@@ -30,229 +30,381 @@ declare type BorderProps = {
   /** CSS **border-radius** property */
   radius?: Responsive<Radius>;
 };
-
-/** @public */
-export declare function Box<T extends ElementType = "div">({
-  display,
-  ...props
-}: BoxProps<T> &
-  Omit<ComponentPropsWithRef<T>, keyof BoxProps<T>>): JSX.Element;
-
-/** @public */
-export declare interface BoxProps<
-  T extends React.ElementType = "div",
-> extends LayoutProps {
-  /** Element to render */
+type FlexChildProps = {
+  /** CSS **flex-basis** property */
+  flexBasis?: Responsive<string>;
+  /** CSS **flex-grow** property */
+  flexGrow?: Responsive<number>;
+  /** CSS **flex-shrink** property */
+  flexShrink?: Responsive<number>;
+};
+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>;
+};
+type HeightProps = {
+  /** CSS **height** property */
+  height?: Responsive<string>;
+  /** CSS **min-height** property */
+  minHeight?: Responsive<string>;
+  /** CSS **max-height** property */
+  maxHeight?: Responsive<string>;
+};
+declare const SPACE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+/** @public */
+type Space = (typeof SPACE)[number];
+declare const SPACE_AUTO: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "auto"];
+/** @public */
+type SpaceAuto = (typeof SPACE_AUTO)[number];
+declare const SPACE_INHERIT: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "inherit"];
+/** @public */
+type SpaceInherit = (typeof SPACE_INHERIT)[number];
+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"];
+/** @public */
+type SpaceAutoNegative = (typeof SPACE_AUTO_NEGATIVE)[number];
+/** @public */
+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 */
+type Overflow = (typeof OVERFLOW)[number];
+type OverflowProps = {
+  /** CSS **overflow** property */
+  overflow?: Responsive<Overflow>;
+  /** CSS **overflow-x** property */
+  overflowX?: Responsive<Overflow>;
+  /** CSS **overflow-y** property */
+  overflowY?: Responsive<Overflow>;
+};
+/** @public */
+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 POSITION: readonly ["absolute", "fixed", "relative", "static", "sticky"];
+/** @public */
+type Position = (typeof POSITION)[number];
+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>;
+};
+declare const SHADOW: readonly [0, 1, 2, 3, 4, 5];
+/** @public */
+type Shadow = (typeof SHADOW)[number];
+type ShadowProps = {
+  /** CSS **box-shadow** property */
+  shadow?: Shadow;
+};
+declare const TONE: readonly ["neutral", "positive", "suggest", "caution", "critical"];
+/** @public */
+type Tone = (typeof TONE)[number];
+type ToneProps = {
+  /** CSS **background-color** property */
+  tone?: Tone;
+};
+type WidthProps = {
+  /** CSS **width** property */
+  width?: Responsive<string>;
+  /** CSS **min-width** property */
+  minWidth?: Responsive<string>;
+  /** CSS **max-width** property */
+  maxWidth?: Responsive<string>;
+};
+type ZIndexProps = {
+  /** CSS z-index property */
+  zIndex?: Responsive<number>;
+};
+/** @public */
+interface LayoutProps extends ToneProps, WidthProps, HeightProps, MarginProps, BorderProps, PaddingProps, PositionProps, OverflowProps, FlexChildProps, GridChildProps, ZIndexProps, ShadowProps {}
+declare const DISPLAY_BLOCK: readonly ["block", "inline-block", "none"];
+/** @public */
+type DisplayBlock = (typeof DISPLAY_BLOCK)[number];
+declare const DISPLAY_FLEX: readonly ["flex", "inline-flex", "none"];
+/** @public */
+type DisplayFlex = (typeof DISPLAY_FLEX)[number];
+declare const DISPLAY_GRID: readonly ["grid", "inline-grid", "none"];
+/** @public */
+type DisplayGrid = (typeof DISPLAY_GRID)[number];
+/** @public */
+interface BoxProps<T extends React.ElementType = 'div'> extends LayoutProps {
+  /**
+   * HTML element or component to render.
+   */
   as?: T;
-  /** CSS **display** property */
+  /**
+   * CSS `display` property.
+   * @remarks Does not include `'flex'` or `'grid'`. Use the Flex or Grid components for those.
+   */
   display?: Responsive<DisplayBlock>;
 }
-
 /** @public */
-export declare function Button<T extends ElementType = "button">({
-  density,
-  level,
-  tone,
-  ...props
-}: ButtonProps<T> &
-  Omit<ComponentPropsWithRef<T>, keyof ButtonProps<T>>): JSX.Element;
-
+export declare function Box<T extends ElementType = 'div'>({ display, ...props }: BoxProps<T> & Omit<ComponentPropsWithRef<T>, keyof BoxProps<T>>): import("react").JSX.Element;
 declare const BUTTON_DENSITY: readonly ["regular", "loose"];
-
+type ButtonDensity = (typeof BUTTON_DENSITY)[number];
 declare const BUTTON_LEVEL: readonly ["primary", "secondary", "tertiary"];
-
+type ButtonLevel = (typeof BUTTON_LEVEL)[number];
 declare const BUTTON_TONE: readonly ["neutral", "critical"];
-
-declare type ButtonDensity = (typeof BUTTON_DENSITY)[number];
-
-declare type ButtonLevel = (typeof BUTTON_LEVEL)[number];
-
-/** @public */
-export declare interface ButtonProps<T extends React.ElementType = "button"> {
-  /** Element to render */
+type ButtonTone = (typeof BUTTON_TONE)[number];
+declare const INTERACTIVE_TAG: readonly ["button", "a"];
+type InteractiveTag = (typeof INTERACTIVE_TAG)[number];
+type InteractiveAs<T extends React.ElementType> = T extends InteractiveTag ? T : T extends string ? never : T;
+/** @public */
+interface ButtonProps<T extends React.ElementType = 'button'> {
+  /**
+   * HTML element to render.
+   */
   as?: InteractiveAs<T>;
-  /** Composite prop for setting padding and gap */
+  /**
+   * Sets padding and gap together to specify size.
+   */
   density?: ButtonDensity;
-  /** Set CSS **width** property to 100% */
+  /**
+   * Sets Button to fill the width of its container.
+   */
   fullWidth?: Responsive<boolean>;
-  /** Starting icon */
+  /**
+   * Shows an icon in the start position (left side in left-to-right languages).
+   */
   iconStart?: React.ElementType | React.ReactNode;
-  /** Ending icon */
+  /**
+   * Shows an icon in the end position (right side in left-to-right languages).
+   */
   iconEnd?: React.ElementType | React.ReactNode;
-  /** Button level */
+  /**
+   * Sets the importance of Button's action.
+   */
   level?: ButtonLevel;
-  /** Loading state */
+  /**
+   * Places Button into a loading state.
+   */
   loading?: boolean;
-  /** Button text */
+  /**
+   * Sets Button's text label.
+   */
   text?: string;
-  /** Button tone */
+  /**
+   * Sets Button's semantic meaning and related color.
+   */
   tone?: ButtonTone;
 }
-
-declare type ButtonTone = (typeof BUTTON_TONE)[number];
-
-/** @public */
-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 CardProps<T extends React.ElementType = "div">
-  extends MarginProps, ToneProps {
-  /** Element to render */
+/** @public */
+export declare function Button<T extends ElementType = 'button'>({ density, level, tone, ...props }: ButtonProps<T> & Omit<ComponentPropsWithRef<T>, keyof ButtonProps<T>>): import("react").JSX.Element;
+declare const DENSITY: readonly ["compact", "regular", "loose"];
+/** @public */
+type Density = (typeof DENSITY)[number];
+/** @public */
+interface CardProps<T extends React.ElementType = 'div'> extends MarginProps, ToneProps {
+  /**
+   * HTML element or component to render.
+   */
   as?: T;
-  /** Composite prop for setting padding and border radius */
+  /**
+   * Sets padding, gap, and border-radius together to specify size. This prop is used in place of separate `padding`, `gap`, and `border-radius` props.
+   */
   density?: Responsive<Density>;
 }
-
-/** @beta */
-export declare function Checkbox(props: CheckboxProps): JSX.Element;
-
+/** @public */
+export declare function Card<T extends ElementType = 'div'>({ density, tone, ...props }: CardProps<T> & Omit<ComponentPropsWithRef<T>, keyof CardProps<T>>): import("react").JSX.Element;
 /** @beta */
-export declare interface CheckboxProps
-  extends React.ComponentProps<"input">, MarginProps {
-  /** Error state */
+interface CheckboxProps extends React.ComponentProps<'input'>, MarginProps {
+  /**
+   * Applies error styling to the checkbox mark.
+   * @remarks Use when form validation fails. Pair with a visible error message. The prop is visual only.
+   */
   error?: boolean;
-  /** Indeterminate state */
+  /**
+   * Renders the "mixed state" mark (a horizontal line).
+   * @remarks Use when the checkbox controls a group with some-but-not-all children checked.
+   */
   indeterminate?: boolean;
-  /** Input label */
+  /**
+   * Visible label next to the checkbox.
+   */
   label: React.ReactNode;
 }
-
-/** @public */
-export declare function Code<T extends CodeTag = "pre">({
-  size,
-  ...props
-}: CodeProps<T> &
-  Omit<ComponentPropsWithRef<T>, keyof CodeProps<T>>): JSX.Element;
-
-declare const CODE_SIZE: readonly [0, 1, 2, 3, 4];
-
+/** @beta */
+export declare function Checkbox(props: CheckboxProps): import("react").JSX.Element;
 declare const CODE_TAG: readonly ["pre", "span"];
-
+type CodeTag = (typeof CODE_TAG)[number];
+declare const CODE_SIZE: readonly [0, 1, 2, 3, 4];
+/** @public */
+type CodeSize = (typeof CODE_SIZE)[number];
+declare const FONT_WEIGHT: readonly ["regular", "medium", "semibold", "bold"];
+/** @public */
+type FontWeight = (typeof FONT_WEIGHT)[number];
+declare const TEXT_ALIGN: readonly ["left", "center", "right", "justify"];
+/** @public */
+type TextAlign = (typeof TEXT_ALIGN)[number];
+/** @public */
+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;
+}
 /** @public */
-export declare interface CodeProps<T extends CodeTag = "pre"> extends Omit<
-  TypographyProps,
-  "align" | "truncate" | "tone"
-> {
-  /** Element to render */
+interface CodeProps<T extends CodeTag = 'pre'> extends Omit<TypographyProps, 'align' | 'truncate' | 'tone'> {
+  /**
+   * HTML element or component to render.
+   * @remarks The defined element wraps an inner `<code>` tag.
+   */
   as?: T;
-  /** Refractor language for syntax highlighting */
+  /**
+   * Refractor language for syntax highlighting.
+   */
   language?: string;
-  /** CSS **font-size** property */
+  /**
+   * Sets font size.
+   */
   size?: Responsive<CodeSize>;
 }
-
 /** @public */
-export declare type CodeSize = (typeof CODE_SIZE)[number];
-
-declare type CodeTag = (typeof CODE_TAG)[number];
-
-/** @public */
-export declare function Container<T extends ElementType = "div">({
-  marginX,
-  ...props
-}: ContainerProps<T> &
-  Omit<ComponentPropsWithRef<T>, keyof ContainerProps<T>>): JSX.Element;
-
+export declare function Code<T extends CodeTag = 'pre'>({ size, ...props }: CodeProps<T> & Omit<ComponentPropsWithRef<T>, keyof CodeProps<T>>): import("react").JSX.Element;
 declare const CONTAINER_SIZE: readonly [0, 1, 2, 3, 4, 5];
-
 /** @public */
-export declare interface ContainerProps<
-  T extends React.ElementType = "div",
-> extends LayoutProps {
-  /** Element to render */
+type ContainerSize = (typeof CONTAINER_SIZE)[number];
+/** @public */
+interface ContainerProps<T extends React.ElementType = 'div'> extends LayoutProps {
+  /**
+   * HTML element or component to render.
+   */
   as?: T;
-  /** CSS **max-width** property */
+  /**
+   * Maximum width of the container.
+   */
   size?: Responsive<ContainerSize>;
 }
-
-/** @public */
-export declare type ContainerSize = (typeof CONTAINER_SIZE)[number];
-
-declare const DENSITY: readonly ["compact", "regular", "loose"];
-
-/** @public */
-export declare type Density = (typeof DENSITY)[number];
-
-declare const DISPLAY_BLOCK: readonly ["block", "inline-block", "none"];
-
-declare const DISPLAY_FLEX: readonly ["flex", "inline-flex", "none"];
-
-declare const DISPLAY_GRID: readonly ["grid", "inline-grid", "none"];
-
 /** @public */
-export declare type DisplayBlock = (typeof DISPLAY_BLOCK)[number];
-
+export declare function Container<T extends ElementType = 'div'>({ marginX, size, ...props }: ContainerProps<T> & Omit<ComponentPropsWithRef<T>, keyof ContainerProps<T>>): import("react").JSX.Element;
+/** @beta */
+interface DialogProps extends Omit<React.ComponentProps<'dialog'>, 'open'> {
+  /**
+   * Text for the dialog heading.
+   * @remarks Recommended for accessibility. The component sets `aria-labelledby` to the heading when you give this prop.
+   */
+  header?: string;
+  /**
+   * A function to call alongside the native `close` event.
+   * @remarks Use it to set `open` back to `false`. It runs for every close cause: the Escape key, a backdrop click, the close button, or a programmatic close.
+   */
+  onClose: React.ReactEventHandler<HTMLDialogElement>;
+  /**
+   * Toggles the dialog's open state.
+   * @remarks `true` calls `showModal()` on the element. `false` calls `close()`.
+   */
+  open?: boolean;
+  /** Sets the max width of the dialog */
+  size?: Responsive<ContainerSize>;
+  /** CSS length value used to set the Dialog’s distance from the top of the viewport; Dialog is centered if not provided */
+  topAnchor?: string;
+}
+declare function DialogRoot({ open, size, ...props }: DialogProps): import("react").JSX.Element;
+declare namespace DialogRoot {
+  var displayName: string;
+  var Content: typeof DialogContent;
+  var Footer: typeof DialogFooter;
+}
+declare function DialogContent(props: ComponentProps<'div'>): import("react").JSX.Element;
+declare function DialogFooter(props: ComponentProps<'div'>): import("react").JSX.Element;
+/**
+ * @beta
+ *
+ * Renders a modal dialog element — should not be used for nonmodal dialogs.
+ * Modal dialogs make their containing documents inert, and render on the topmost
+ * layer within that containing document; they must be dimissed before the containing
+ * document and its contents become unblocked. They also trap focus within the bounds
+ * of the dialog element and its descendants.
+ *
+ * For more on dialogs and modality, refer to the HTML specification for the dialog element:
+ * https://html.spec.whatwg.org/dev/interactive-elements.html#the-dialog-element
+ */
+export declare const Dialog: typeof DialogRoot;
+/** @public */
+interface DividerProps extends React.ComponentProps<'hr'>, MarginProps {}
+/** @public */
+export declare function Divider(props: DividerProps): import("react").JSX.Element;
+declare const EYEBROW_SIZE: readonly [0, 1, 2, 3, 4];
 /** @public */
-export declare type DisplayFlex = (typeof DISPLAY_FLEX)[number];
-
+type EyebrowSize = (typeof EYEBROW_SIZE)[number];
 /** @public */
-export declare type DisplayGrid = (typeof DISPLAY_GRID)[number];
-
+interface EyebrowProps<T extends React.ElementType = 'span'> extends TypographyProps {
+  /**
+   * HTML element to render.
+   */
+  as?: T;
+  /**
+   * Sets font size. Uses the same scale as Label.
+   */
+  size?: Responsive<EyebrowSize>;
+}
 /** @public */
-export declare function Divider(props: DividerProps): JSX.Element;
-
+export declare function Eyebrow<T extends ElementType = 'span'>({ size, weight, ...props }: EyebrowProps<T> & Omit<ComponentPropsWithRef<T>, keyof EyebrowProps<T>>): import("react").JSX.Element;
+declare const ALIGN_ITEMS: readonly ["baseline", "center", "flex-end", "flex-start", "stretch"];
 /** @public */
-export declare interface DividerProps
-  extends React.ComponentProps<"hr">, MarginProps {}
-
+type AlignItems = (typeof ALIGN_ITEMS)[number];
+declare const JUSTIFY_CONTENT: readonly ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"];
 /** @public */
-export declare function Eyebrow<T extends ElementType = "span">({
-  size,
-  weight,
-  ...props
-}: EyebrowProps<T> &
-  Omit<ComponentPropsWithRef<T>, keyof EyebrowProps<T>>): JSX.Element;
-
-declare const EYEBROW_SIZE: readonly [0, 1, 2, 3, 4];
-
+type JustifyContent = (typeof JUSTIFY_CONTENT)[number];
+declare const FLEX_DIRECTION: readonly ["row", "row-reverse", "column", "column-reverse"];
 /** @public */
-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 type EyebrowSize = (typeof EYEBROW_SIZE)[number];
-
-/** @public */
-export declare function Flex<T extends ElementType = "div">({
-  display,
-  ...props
-}: FlexProps<T> &
-  Omit<ComponentPropsWithRef<T>, keyof FlexProps<T>>): JSX.Element;
-
-declare const FLEX_DIRECTION: readonly [
-  "row",
-  "row-reverse",
-  "column",
-  "column-reverse",
-];
-
+type FlexDirection = (typeof FLEX_DIRECTION)[number];
 declare const FLEX_WRAP: readonly ["wrap", "wrap-reverse", "nowrap"];
-
-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 type FlexDirection = (typeof FLEX_DIRECTION)[number];
-
+type FlexWrap = (typeof FLEX_WRAP)[number];
 /** @public */
-export declare type FlexParentProps = {
+type FlexParentProps = {
   /** CSS **align-items** property */
   alignItems?: Responsive<AlignItems>;
   /** CSS **justify-content** property */
@@ -262,26 +414,8 @@ export declare type FlexParentProps = {
   /** CSS **flex-wrap** property */
   flexWrap?: Responsive<FlexWrap>;
 };
-
-/** @public */
-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 type FlexWrap = (typeof FLEX_WRAP)[number];
-
-declare const FONT_WEIGHT: readonly ["regular", "medium", "semibold", "bold"];
-
 /** @public */
-export declare type FontWeight = (typeof FONT_WEIGHT)[number];
-
-/** @public */
-export declare type GapProps = {
+type GapProps = {
   /** CSS **gap** property */
   gap?: Responsive<SpaceInherit>;
   /** CSS **row-gap** property */
@@ -289,42 +423,24 @@ export declare type GapProps = {
   /** CSS **column-gap** property */
   columnGap?: Responsive<SpaceInherit>;
 };
-
-/** @public */
-export declare function Grid<T extends ElementType = "div">({
-  display,
-  ...props
-}: GridProps<T> &
-  Omit<ComponentPropsWithRef<T>, keyof GridProps<T>>): JSX.Element;
-
-declare const GRID_AUTO_FLOW: readonly [
-  "row",
-  "column",
-  "row dense",
-  "column dense",
-  "dense",
-];
-
-/** @public */
-export declare type GridAutoFlow = (typeof GRID_AUTO_FLOW)[number];
-
-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 type GridParentProps = {
+interface FlexProps<T extends React.ElementType = 'div'> extends FlexParentProps, GapProps, LayoutProps {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T;
+  /**
+   * CSS `display` property.
+   */
+  display?: Responsive<DisplayFlex>;
+}
+/** @public */
+export declare function Flex<T extends ElementType = 'div'>({ display, ...props }: FlexProps<T> & Omit<ComponentPropsWithRef<T>, keyof FlexProps<T>>): import("react").JSX.Element;
+declare const GRID_AUTO_FLOW: readonly ["row", "column", "row dense", "column dense", "dense"];
+/** @public */
+type GridAutoFlow = (typeof GRID_AUTO_FLOW)[number];
+/** @public */
+type GridParentProps = {
   /** CSS **grid-auto-flow** property */
   gridAutoFlow?: Responsive<GridAutoFlow>;
   /** CSS **grid-auto-columns** property */
@@ -336,277 +452,188 @@ export declare type GridParentProps = {
   /** CSS **grid-template-rows** property */
   gridTemplateRows?: Responsive<string>;
 };
-
 /** @public */
-export declare interface GridProps<T extends React.ElementType = "div">
-  extends GridParentProps, GapProps, LayoutProps {
-  /** Element to render */
+interface GridProps<T extends React.ElementType = 'div'> extends GridParentProps, GapProps, LayoutProps {
+  /**
+   * HTML element or component to render.
+   */
   as?: T;
-  /** CSS **display** property */
+  /**
+   * CSS `display` property.
+   */
   display?: Responsive<DisplayGrid>;
 }
-
 /** @public */
-export declare function Heading<T extends ElementType = "h2">({
-  size,
-  weight,
-  ...props
-}: HeadingProps &
-  Omit<ComponentPropsWithRef<T>, keyof HeadingProps>): JSX.Element;
-
-declare const HEADING_SIZE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-
+export declare function Grid<T extends ElementType = 'div'>({ display, ...props }: GridProps<T> & Omit<ComponentPropsWithRef<T>, keyof GridProps<T>>): import("react").JSX.Element;
+/** @public */
+interface HStackProps<T extends React.ElementType = 'div'> extends Pick<FlexProps<T>, 'as' | 'gap'> {}
+/** @public */
+export declare function HStack<T extends ElementType = 'div'>({ className, ...props }: HStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof HStackProps<T>>): import("react").JSX.Element;
 declare const HEADING_TAG: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
-
+type HeadingTag = (typeof HEADING_TAG)[number];
+declare const HEADING_SIZE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 /** @public */
-export declare interface HeadingProps extends TypographyProps {
-  /** Element to render */
+type HeadingSize = (typeof HEADING_SIZE)[number];
+/** @public */
+interface HeadingProps extends TypographyProps {
+  /**
+   * Semantic heading element to render.
+   * @remarks Always set this explicitly.
+   */
   as?: HeadingTag;
-  /** CSS **font-size** property */
+  /**
+   * Sets font size.
+   * @remarks Independent of `as`.
+   */
   size?: Responsive<HeadingSize>;
 }
-
-/** @public */
-export declare type HeadingSize = (typeof HEADING_SIZE)[number];
-
-declare type HeadingTag = (typeof HEADING_TAG)[number];
-
-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 function HStack<T extends ElementType = "div">(
-  props: HStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof HStackProps<T>>,
-): JSX.Element;
-
+export declare function Heading<T extends ElementType = 'h2'>({ size, weight, ...props }: HeadingProps & Omit<ComponentPropsWithRef<T>, keyof HeadingProps>): import("react").JSX.Element;
+declare const ICON_SIZE: readonly [0, 1, 2, 3, 4];
 /** @public */
-export declare interface HStackProps<
-  T extends React.ElementType = "div",
-> extends Pick<GapProps, "gap"> {
-  /** Element to render */
-  as?: T;
-}
-
+type IconSize = (typeof ICON_SIZE)[number];
 /** @public */
-export declare function Icon({ size, ...props }: IconProps): JSX.Element;
-
-declare const ICON_SIZE: readonly [0, 1, 2, 3, 4];
-
-/** @public */
-export declare function IconButton<T extends ElementType = "button">(
-  props: IconButtonProps<T> &
-    Omit<ComponentPropsWithRef<T>, keyof IconButtonProps<T>>,
-): JSX.Element;
-
-/** @public */
-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>>;
-}
-
-/** @public */
-export declare interface IconProps
-  extends
-    ComponentProps<"svg">,
-    Pick<TypographyProps, "muted">,
-    MarginProps,
-    ToneProps {
-  /** Icon to render */
+interface IconProps extends ComponentProps<'svg'>, Pick<TypographyProps, 'muted'>, MarginProps, ToneProps {
+  /**
+   * The icon component to render.
+   */
   icon: React.ComponentType<SVGProps<SVGSVGElement>>;
-  /** CSS **font-size** property */
+  /**
+   * Sets icon size.
+   */
   size?: Responsive<IconSize>;
 }
-
 /** @public */
-export declare type IconSize = (typeof ICON_SIZE)[number];
-
-/** @beta */
-export declare function Indicator<T extends ElementType = "span">({
-  tone,
-  ...props
-}: IndicatorProps<T> &
-  Omit<ComponentPropsWithRef<T>, keyof IndicatorProps<T>>): JSX.Element;
-
+export declare function Icon({ size, ...props }: IconProps): import("react").JSX.Element;
+/** @public */
+interface IconButtonProps<T extends React$1.ElementType = 'button'> extends Pick<ButtonProps<T>, 'as' | 'density' | 'level' | 'loading' | 'tone'> {
+  /**
+   * Accessible name for the button.
+   * @remarks Because IconButtons have no visible text, this is required.
+   */
+  'aria-label': string;
+  /**
+   * Icon to render.
+   */
+  'icon': React$1.ComponentType<SVGProps<SVGSVGElement>>;
+}
+/** @public */
+export declare function IconButton<T extends ElementType = 'button'>(props: IconButtonProps<T> & Omit<ComponentPropsWithRef<T>, keyof IconButtonProps<T>>): import("react").JSX.Element;
 /** @beta */
-export declare interface IndicatorProps<
-  T extends React.ElementType = "span",
-> extends ToneProps {
-  /** Element to render */
+interface IndicatorProps<T extends React.ElementType = 'span'> extends ToneProps {
+  /**
+   * HTML element to render.
+   */
   as?: T;
-  /** Label for aria-label attribute */
+  /**
+   * Accessible label.
+   */
   label?: string;
 }
-
-/** @public */
-export declare function IndicatorStack<T extends ElementType = "div">(
-  props: IndicatorStackProps<T> &
-    Omit<ComponentPropsWithRef<T>, keyof IndicatorStackProps<T>>,
-): JSX.Element;
-
+/** @beta */
+export declare function Indicator<T extends ElementType = 'span'>({ tone, ...props }: IndicatorProps<T> & Omit<ComponentPropsWithRef<T>, keyof IndicatorProps<T>>): import("react").JSX.Element;
 /** @public */
-export declare interface IndicatorStackProps<
-  T extends React.ElementType = "div",
-> {
-  /** Element to render */
+interface IndicatorStackProps<T extends React.ElementType = 'div'> {
+  /**
+   * HTML element to render.
+   */
   as?: T;
 }
-
-/** @deprecated Use HStack component instead */
 /** @public */
-export declare function Inline<T extends ElementType = "div">(
-  props: InlineProps<T> & Omit<ComponentPropsWithRef<T>, keyof InlineProps<T>>,
-): JSX.Element;
-
+export declare function IndicatorStack<T extends ElementType = 'div'>(props: IndicatorStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof IndicatorStackProps<T>>): import("react").JSX.Element;
 /** @deprecated Use HStack component instead */
 /** @public */
-export declare interface InlineProps<
-  T extends React.ElementType = "div",
-> extends PaddingProps {
-  /** Element to render */
+interface InlineProps<T extends React.ElementType = 'div'> extends PaddingProps {
+  /**
+   * HTML element or component to render.
+   */
   as?: T;
-  /** CSS **gap** property */
+  /**
+   * Space between children.
+   */
   gap?: Responsive<SpaceInherit>;
 }
-
-declare const INTERACTIVE_TAG: readonly ["button", "a"];
-
-declare type InteractiveAs<T extends React.ElementType> =
-  T extends InteractiveTag ? T : T extends string ? never : T;
-
-declare type InteractiveTag = (typeof INTERACTIVE_TAG)[number];
-
-declare const JUSTIFY_CONTENT: readonly [
-  "flex-start",
-  "flex-end",
-  "center",
-  "space-between",
-  "space-around",
-  "space-evenly",
-];
-
-/** @public */
-export declare type JustifyContent = (typeof JUSTIFY_CONTENT)[number];
-
-/** @beta */
-export declare function Label(props: LabelProps): JSX.Element;
-
+/** @deprecated Use HStack component instead */
+/** @public */
+export declare function Inline<T extends ElementType = 'div'>(props: InlineProps<T> & Omit<ComponentPropsWithRef<T>, keyof InlineProps<T>>): import("react").JSX.Element;
 /** @beta */
-export declare interface LabelProps
-  extends React.ComponentProps<"label">, MarginProps {
-  /** Element to render */
+interface LabelProps extends React.ComponentProps<'label'>, MarginProps {
+  /**
+   * Renders the label in a muted color.
+   */
   disabled?: boolean;
+  /**
+   * Renders the label in the error color.
+   * @remarks Use when the linked input has a validation error.
+   */
   error?: boolean;
 }
-
-/** @public */
-export declare interface LayoutProps
-  extends
-    ToneProps,
-    WidthProps,
-    HeightProps,
-    MarginProps,
-    BorderProps,
-    PaddingProps,
-    PositionProps,
-    OverflowProps,
-    FlexChildProps,
-    GridChildProps,
-    ZIndexProps,
-    ShadowProps {}
-
 /** @beta */
-export declare function Link({ underlined, ...props }: LinkProps): JSX.Element;
-
+export declare function Label(props: LabelProps): import("react").JSX.Element;
 /** @beta */
-export declare interface LinkProps extends React.ComponentProps<"a"> {
-  /** If true, sets `target="_blank"` and `rel="noopener noreferrer"` */
+interface LinkProps extends React.ComponentProps<'a'> {
+  /**
+   * Sets the link to `target="_blank"` and `rel="noopener noreferrer"`.
+   */
   openInNewTab?: boolean;
   /**
-   * If true, sets `text-decoration: underline`
-   *
-   * @defaultValue true
+   * Underlines the link.
    */
   underlined?: boolean;
 }
-
 /** @beta */
-export declare const List: typeof ListRoot;
-
+export declare function Link({ underlined, ...props }: LinkProps): import("react").JSX.Element;
 declare const LIST_TAG: readonly ["ol", "ul"];
-
-declare function ListButtonItem<T extends ElementType = "button">({
-  density,
-  ...props
-}: ListButtonItemProps<T> &
-  Omit<ComponentPropsWithRef<T>, keyof ListButtonItemProps<T>>): JSX.Element;
-
+type ListTag = (typeof LIST_TAG)[number];
 /** @beta */
-export declare interface ListButtonItemProps<
-  T extends React_2.ElementType = "button",
-> extends ListItemProps {
-  /** Element to render */
-  as?: InteractiveAs<T>;
-  /** Selected state */
-  selected?: boolean;
+interface ListProps<T extends ListTag = 'ul'> extends Pick<GapProps, 'gap'> {
+  /**
+   * HTML element to render.
+   */
+  as?: T;
 }
-
-declare function ListItem({ density, ...props }: ListItemProps): JSX.Element;
-
-declare function ListItemImage(props: ComponentProps<"img">): JSX.Element;
-
 /** @beta */
-export declare interface ListItemProps extends React_2.ComponentProps<"li"> {
-  /** Composite prop for setting padding and gap */
+interface ListItemProps extends React$1.ComponentProps<'li'> {
+  /**
+   * Sets horizontal padding, gap, and minimum row height together.
+   */
   density?: Responsive<Density>;
-  /** Starting slot */
-  start?: React_2.ReactNode;
-  /** Ending slot */
-  end?: React_2.ReactNode;
-}
-
-declare function ListItemText<T extends ElementType = "div">(
-  props: ListItemTextProps<T> &
-    Omit<ComponentPropsWithRef<T>, keyof ListItemTextProps<T>>,
-): JSX.Element;
-
+  /**
+   * Slot at the left edge of the row.
+   */
+  start?: React$1.ReactNode;
+  /**
+   * Slot at the right edge of the row.
+   */
+  end?: React$1.ReactNode;
+}
 /** @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;
+interface ListButtonItemProps<T extends React$1.ElementType = 'button'> extends ListItemProps {
+  /**
+   * Element or component to render for the press target.
+   */
+  as?: InteractiveAs<T>;
+  /**
+   * Marks the row as the current selection.
+   */
+  selected?: boolean;
 }
-
 /** @beta */
-export declare interface ListProps<T extends ListTag = "ul"> extends Pick<
-  GapProps,
-  "gap"
-> {
-  /** Element to render */
+interface ListItemTextProps<T extends React$1.ElementType = 'div'> {
+  /**
+   * HTML element to render.
+   */
   as?: T;
+  /**
+   * Main label.
+   */
+  title?: React$1.ReactNode;
+  /**
+   * Text below the title.
+   */
+  subtitle?: React$1.ReactNode;
 }
-
-declare function ListRoot<T extends ListTag = "ul">(
-  props: ListProps<T> & Omit<ComponentPropsWithRef<T>, keyof ListProps<T>>,
-): JSX.Element;
-
+declare function ListRoot<T extends ListTag = 'ul'>(props: ListProps<T> & Omit<ComponentPropsWithRef<T>, keyof ListProps<T>>): import("react").JSX.Element;
 declare namespace ListRoot {
   var displayName: string;
   var Item: typeof ListItem;
@@ -614,380 +641,219 @@ declare namespace ListRoot {
   var ItemText: typeof ListItemText;
   var ItemImage: typeof ListItemImage;
 }
-
-declare type ListTag = (typeof LIST_TAG)[number];
-
+declare function ListItem({ density, ...props }: ListItemProps): import("react").JSX.Element;
+declare function ListButtonItem<T extends ElementType = 'button'>({ density, ...props }: ListButtonItemProps<T> & Omit<ComponentPropsWithRef<T>, keyof ListButtonItemProps<T>>): import("react").JSX.Element;
+declare function ListItemText<T extends ElementType = 'div'>(props: ListItemTextProps<T> & Omit<ComponentPropsWithRef<T>, keyof ListItemTextProps<T>>): import("react").JSX.Element;
+declare function ListItemImage(props: ComponentProps<'img'>): import("react").JSX.Element;
+/** @beta */
+export declare const List: typeof ListRoot;
+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 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>;
-};
-
+type Placement = (typeof PLACEMENT)[number];
 /** @public */
-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 = {
+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>;
+/** @beta */
+interface PopoverProps extends Omit<React.ComponentProps<'div'>, 'children' | 'content'>, PlacementProps {
+  /**
+   * Shared anchor identifier.
+   * @remarks Set the same value on a Tooltip and a Popover to point both at one trigger.
+   */
+  anchorName?: React.ReactNode;
+  /**
+   * The trigger element.
+   * @remarks Popover clones it and attaches the `popovertarget` attribute that opens the floating layer.
+   */
+  children: React.ReactElement<Record<string, unknown>>;
+  /**
+   * The floating content.
+   */
+  content?: React.ReactNode;
+  /**
+   * Renders the content into `document.body` through a React portal instead of inline.
+   */
+  portal?: boolean;
+}
+declare function PopoverRoot({ placement, ...props }: PopoverProps & {
+  triggerProps?: Record<string, unknown>;
+}): import("react").JSX.Element;
+/** @beta */
+export declare const Popover: typeof PopoverRoot & {
+  forwardsTriggerProps: boolean;
 };
-
-/** @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 */
+/** @public */
+interface PressAreaProps<T extends React.ElementType = 'button'> {
+  /**
+   * Element or component to render.
+   */
   as?: InteractiveAs<T>;
 }
-
-/** @beta */
-export declare function Radio(props: RadioProps): JSX.Element;
-
+/** @public */
+export declare function PressArea<T extends ElementType = 'button'>(props: PressAreaProps<T> & Omit<ComponentPropsWithRef<T>, keyof PressAreaProps<T>>): import("react").JSX.Element;
 /** @beta */
-export declare interface RadioProps
-  extends React.ComponentProps<"input">, MarginProps {
-  /** Error state */
+interface RadioProps extends React.ComponentProps<'input'>, MarginProps {
+  /**
+   * Applies error styling to the radio mark.
+   * @remarks Use when form validation fails. Pair with a visible error message. The prop is visual only.
+   */
   error?: boolean;
-  /** Input label */
+  /**
+   * Visible label next to the radio.
+   */
   label: React.ReactNode;
 }
-
-declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, "full"];
-
-/** @public */
-export declare type Radius = (typeof RADIUS)[number];
-
-/** @public */
-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;
-    });
-
-declare const SHADOW: readonly [0, 1, 2, 3, 4, 5];
-
+/** @beta */
+export declare function Radio(props: RadioProps): import("react").JSX.Element;
+declare const FORM_ELEMENT_DENSITY: readonly ["regular", "loose"];
+type FormElementDensity = (typeof FORM_ELEMENT_DENSITY)[number];
 /** @public */
-export declare type Shadow = (typeof SHADOW)[number];
-
-declare type ShadowProps = {
-  /** CSS **box-shadow** property */
-  shadow?: Shadow;
+type FormElementDensityProps = {
+  /**
+   * Sets padding, gap, and other spacing values on the form element.
+   */
+  density?: FormElementDensity;
 };
-
-/** @beta */
-export declare function SkipToContent(props: SkipToContentProps): JSX.Element;
-
+/** @public */
+type SelectProps = React.ComponentProps<'select'> & FormElementDensityProps & {
+  /**
+   * Disables the select element, blocking interactions and hiding it from screen readers.
+   */
+  disabled?: boolean;
+  /**
+   * Used to trigger styling for invalid states.
+   */
+  hasError?: boolean;
+};
+/** @public */
+export declare function Select({ density, hasError, ...props }: SelectProps): import("react").JSX.Element;
 /** @beta */
-export declare interface SkipToContentProps extends React.ComponentProps<"a"> {
+interface SkipToContentProps extends React.ComponentProps<'a'> {
   /**
-   * Anchor href. The target element should be focusable or have `tabindex="-1"`.
+   * Same-page fragment to jump to.
+   * @remarks Note: The hash character # is required for proper linking.
    */
   href: string;
-  /** Visible/announced label */
+  /**
+   * Visible and announced text.
+   */
   label: string;
-  /** Use label instead */
+  /**
+   * Not accepted.
+   * @remarks Pass text via `label`.
+   */
   children?: never;
 }
-
-declare const SPACE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-
-/** @public */
-export declare type Space = (typeof SPACE)[number];
-
-declare const SPACE_AUTO: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "auto"];
-
-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",
-];
-
-declare const SPACE_INHERIT: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "inherit"];
-
-/** @public */
-export declare type SpaceAuto = (typeof SPACE_AUTO)[number];
-
-/** @public */
-export declare type SpaceAutoNegative = (typeof SPACE_AUTO_NEGATIVE)[number];
-
-/** @public */
-export declare type SpaceInherit = (typeof SPACE_INHERIT)[number];
-
-/** @public */
-export declare function Spinner({ size, ...props }: SpinnerProps): JSX.Element;
-
+/** @beta */
+export declare function SkipToContent(props: SkipToContentProps): import("react").JSX.Element;
 /** @public */
-export declare interface SpinnerProps extends React.ComponentProps<"svg"> {
+interface SpinnerProps extends React.ComponentProps<'svg'> {
+  /**
+   * Size of the spinner icon.
+   */
   size?: Responsive<IconSize>;
 }
-
-/** @beta */
-export declare function Switch(props: SwitchProps): JSX.Element;
-
+/** @public */
+export declare function Spinner({ size, ...props }: SpinnerProps): import("react").JSX.Element;
 /** @beta */
-export declare interface SwitchProps
-  extends React.ComponentProps<"input">, MarginProps {
-  /** Error state */
+interface SwitchProps extends React.ComponentProps<'input'>, MarginProps {
+  /**
+   * Applies error styling to the switch track.
+   * @remarks Use when form validation fails. Pair with a visible error message. The prop is visual only.
+   */
   error?: boolean;
-  /** Input label */
+  /**
+   * Visible label next to the switch.
+   */
   label: React.ReactNode;
 }
-
-/** @public */
-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 };
-
-declare const TEXT_ALIGN: readonly ["left", "center", "right", "justify"];
-
+/** @beta */
+export declare function Switch(props: SwitchProps): import("react").JSX.Element;
 declare const TEXT_SIZE: readonly [0, 1, 2, 3, 4];
-
 /** @public */
-export declare type TextAlign = (typeof TEXT_ALIGN)[number];
-
+type TextSize = (typeof TEXT_SIZE)[number];
 /** @public */
-export declare interface TextProps<
-  T extends React.ElementType = "span",
-> extends TypographyProps {
-  /** Element to render */
+interface TextProps<T extends React.ElementType = 'span'> extends TypographyProps {
+  /**
+   * HTML element to render.
+   */
   as?: T;
-  /** CSS **font-size** property */
+  /**
+   * Sets font size.
+   */
   size?: Responsive<TextSize>;
 }
-
-/** @public */
-export declare type TextSize = (typeof TEXT_SIZE)[number];
-
-declare const TONE: readonly [
-  "neutral",
-  "positive",
-  "suggest",
-  "caution",
-  "critical",
-];
-
-/** @public */
-export declare type Tone = (typeof TONE)[number];
-
-declare type ToneProps = {
-  /** CSS **background-color** property */
-  tone?: Tone;
-};
-
-/** @public */
-export declare function Tooltip({ placement, ...props }: TooltipProps): any;
-
 /** @public */
-export declare function TooltipGroup<T extends ElementType = "div">(
-  props: TooltipGroupProps<T> &
-    Omit<ComponentPropsWithRef<T>, keyof TooltipGroupProps<T>>,
-): JSX.Element;
-
+export declare function Text<T extends ElementType = 'span'>({ size, ...props }: TextProps<T> & Omit<ComponentPropsWithRef<T>, keyof TextProps<T>>): import("react").JSX.Element;
+/** @beta */
+interface TooltipProps extends Omit<React.ComponentProps<'div'>, 'children' | 'content'>, PlacementProps {
+  /**
+   * Shared anchor identifier.
+   */
+  anchorName?: React.ReactNode;
+  /**
+   * The trigger element.
+   */
+  children: React.ReactElement<Record<string, unknown>>;
+  /**
+   * The tooltip label.
+   */
+  content?: React.ReactNode;
+  /**
+   * Renders the label into `document.body` through a React portal instead of inline.
+   */
+  portal?: boolean;
+}
+declare function TooltipRoot({ placement, ...props }: TooltipProps & {
+  triggerProps?: Record<string, unknown>;
+}): import("react").JSX.Element;
+/** @beta */
+export declare const Tooltip: typeof TooltipRoot;
 /** @public */
-export declare interface TooltipGroupProps<
-  T extends React.ElementType = "div",
-> {
-  /** Element to render */
+interface TooltipGroupProps<T extends React.ElementType = 'div'> {
+  /**
+   * HTML element to render.
+   */
   as?: T;
 }
-
 /** @public */
-export declare interface TooltipProps
-  extends React.ComponentProps<"div">, PlacementProps {
-  /** Tooltip text */
-  text?: React.ReactNode;
-  /** Disabled state */
-  disabled?: boolean;
-}
-
+export declare function TooltipGroup<T extends ElementType = 'div'>(props: TooltipGroupProps<T> & Omit<ComponentPropsWithRef<T>, keyof TooltipGroupProps<T>>): import("react").JSX.Element;
 /** @public */
-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;
-}
-
+interface VStackProps<T extends React.ElementType = 'div'> extends Pick<FlexProps<T>, 'as' | 'gap'> {}
 /** @public */
-export declare function VisuallyHidden<T extends ElementType = "span">(
-  props: VisuallyHiddenProps<T> &
-    Omit<ComponentPropsWithRef<T>, keyof VisuallyHiddenProps<T>>,
-): JSX.Element;
-
+export declare function VStack<T extends ElementType = 'div'>({ className, ...props }: VStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof VStackProps<T>>): import("react").JSX.Element;
 /** @public */
-export declare interface VisuallyHiddenProps<
-  T extends React.ElementType = "span",
-> {
-  /** Element to render */
+interface VisuallyHiddenProps<T extends React.ElementType = 'span'> {
+  /**
+   * HTML element to render.
+   */
   as?: T;
-  /** If true, element is visible on :focus-visible */
+  /**
+   * If true, the element becomes visible on `:focus-visible`.
+   */
   visibleOnFocus?: boolean;
 }
-
 /** @public */
-export declare function VStack<T extends ElementType = "div">(
-  props: VStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof VStackProps<T>>,
-): JSX.Element;
-
+export declare function VisuallyHidden<T extends ElementType = 'span'>(props: VisuallyHiddenProps<T> & Omit<ComponentPropsWithRef<T>, keyof VisuallyHiddenProps<T>>): import("react").JSX.Element;
 /** @public */
-export declare interface VStackProps<
-  T extends React.ElementType = "div",
-> extends Pick<GapProps, "gap"> {
-  /** Element to render */
+export declare function useIsClient(): boolean;
+/** @public */
+interface BadgeProps<T extends React.ElementType = 'span'> extends ToneProps {
+  /**
+   * HTML element to render.
+   */
   as?: T;
+  /**
+   * Shows an icon in the start position (left side in left-to-right languages).
+   */
+  iconStart?: React.ElementType | React.ReactNode;
+  /**
+   * Sets Badge's text label. Use instead of children unless you have a special use case.
+   */
+  text?: string;
 }
-
-declare type WidthProps = {
-  /** CSS **width** property */
-  width?: Responsive<string>;
-  /** CSS **min-width** property */
-  minWidth?: Responsive<string>;
-  /** CSS **max-width** property */
-  maxWidth?: Responsive<string>;
-};
-
-declare type ZIndexProps = {
-  /** CSS z-index property */
-  zIndex?: Responsive<number>;
-};
-
-export {};
+/** @public */
+export declare function Badge<T extends ElementType = 'span'>({ tone, ...props }: BadgeProps<T> & Omit<ComponentPropsWithRef<T>, keyof BadgeProps<T>>): import("react").JSX.Element;
+export type { AlignItems, BadgeProps, BoxProps, ButtonProps, CardProps, CheckboxProps, CodeProps, CodeSize, ContainerProps, ContainerSize, Density, DialogProps, DisplayBlock, DisplayFlex, DisplayGrid, DividerProps, EyebrowProps, EyebrowSize, FlexDirection, FlexParentProps, FlexProps, FlexWrap, FontWeight, GapProps, GridAutoFlow, GridParentProps, GridProps, HStackProps, HeadingProps, HeadingSize, IconButtonProps, IconProps, IconSize, IndicatorProps, IndicatorStackProps, InlineProps, JustifyContent, LabelProps, LayoutProps, LinkProps, ListButtonItemProps, ListItemProps, ListItemTextProps, ListProps, MarginProps, Overflow, PaddingProps, Placement, PlacementProps, PopoverProps, Position, PressAreaProps, RadioProps, Radius, Responsive, SelectProps, Shadow, SkipToContentProps, Space, SpaceAuto, SpaceAutoNegative, SpaceInherit, SpinnerProps, SwitchProps, TextAlign, TextProps, TextSize, Tone, TooltipGroupProps, TooltipProps, TypographyProps, VStackProps, VisuallyHiddenProps };
+//# sourceMappingURL=index.d.ts.map