@sanity/ui 4.2.0 → 5.0.0-alpha.10

package/dist/index.d.ts

@@ -1,1545 +1,1279 @@
-import { a as Props, i as EmptyProps, n as ComponentType, o as TagType, r as ElementType, t as Assign } from "./component-DVlwaWB-.js";
-import { A as FlexWrap, C as GridAutoCols, D as FlexDirection, E as FlexAlign, M as BoxHeight, N as BoxOverflow, O as FlexJustify, P as BoxSizing, S as GridItemRowStart, T as GridAutoRows, _ as GridItemColumn, a as ResponsiveBorderProps, b as GridItemRow, c as ResponsiveFlexProps, d as ResponsiveMarginProps, f as ResponsivePaddingProps, g as Radius, h as ResponsiveWidthProps, i as Delay, j as BoxDisplay, k as FlexValue, l as ResponsiveGridItemProps, m as ResponsiveShadowProps, n as LayerProps, o as ResponsiveBoxProps, p as ResponsiveRadiusProps, r as Placement, s as ResponsiveFlexItemProps, t as Layer, u as ResponsiveGridProps, v as GridItemColumnEnd, w as GridAutoFlow, x as GridItemRowEnd, y as GridItemColumnStart } from "./layer-ChlP9Ik6.js";
-import { a as ButtonTextAlign, c as Box, i as ButtonMode, l as BoxOwnProps, n as ButtonOwnProps, o as ButtonTone, r as ButtonProps, s as ButtonWidth, t as Button, u as BoxProps } from "./button-dnqMFkWg.js";
-import { i as ThemeColorCardToneKey, l as ThemeColorStateToneKey, r as ThemeColorButtonModeKey$1, s as ThemeColorSchemeKey$1, t as ThemeColorAvatarColorKey } from "./_system-CTe2lb5l.js";
-import { t as CardTone } from "./card-C0a0wQTc.js";
-import { a as ThemeFontWeightKey$1, i as ThemeFontWeight$1, n as ThemeFontKey$1, o as ThemeFonts$1, r as ThemeFontSize$1, t as ThemeFont$1 } from "./font-EtfxKPUz.js";
-import { A as ThemeColorMutedTone, B as ThemeColorBase, C as ThemeColorSpotKey, D as ThemeColorSelectableState, E as ThemeColorSelectable, F as ThemeColorCardState, H as ThemeColorToneKey, I as ThemeColorButton, L as ThemeColorButtonState, M as ThemeColorInputState, N as ThemeColorInputStates, O as ThemeColorSelectableStates, P as ThemeColorCard, R as ThemeColorButtonStates, S as ThemeColorSpot, T as ThemeColorSolidTone, U as ThemeColorGenericState, V as ThemeColorName, W as ThemeAvatar, _ as Theme_v2, _t as ThemeColorSyntax$1, a as rgbToHex$1, b as ThemeColorScheme, c as screen$1, d as ThemeColorBuilderOpts, f as createColorTheme$1, ft as ThemeStyles, g as Theme$1, gt as ThemeLayer$1, ht as ThemeShadow$1, i as hslToRgb$1, j as ThemeColorInput, k as ThemeColorMuted, l as multiply$1, m as RootTheme$1, mt as ThemeBoxShadow, n as parseColor$1, o as rgbToHsl$1, p as BaseTheme$1, pt as CSSObject, r as hexToRgb$1, t as rgba$1, u as PartialThemeColorBuilderOpts, v as ThemeInput, vt as HSL$1, w as ThemeColorSolid, x as ThemeColorSchemes, y as ThemeColor, yt as RGB$1, z as ThemeColorButtonTones } from "./rgba-BSYaEUW6.js";
-import { t as SelectableTone } from "./selectable-B0GUIL74.js";
-import { Component, HTMLProps, PropsWithChildren } from "react";
-/**
- * @public
- * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
- */
-type BaseTheme = BaseTheme$1;
-/**
- * @public
- * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
- */
-type BoxShadow = ThemeBoxShadow;
-/**
- * @public
- * @deprecated Use `HSL` from `@sanity/ui/theme` instead.
- */
-type HSL = HSL$1;
-/**
- * @public
- * @deprecated Use `RGB` from `@sanity/ui/theme` instead.
- */
-type RGB = RGB$1;
-/**
- * @public
- * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
- */
-type RootTheme = RootTheme$1;
-/**
- * @public
- * @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.
- */
-type Styles = ThemeStyles;
-/**
- * @public
- * @deprecated Use `Theme` from `@sanity/ui/theme` instead.
- */
-type Theme = Theme$1;
-/**
- * @public
- * @deprecated Use `ThemeColorButtonModeKey` from `@sanity/ui/theme` instead.
- */
-type ThemeColorButtonModeKey = ThemeColorButtonModeKey$1;
-/**
- * @public
- * @deprecated Use `ThemeColorSchemeKey` from `@sanity/ui/theme` instead.
- */
-type ThemeColorSchemeKey = ThemeColorSchemeKey$1;
-/**
- * @public
- * @deprecated Use `ThemeColorSyntax` from `@sanity/ui/theme` instead.
- */
-type ThemeColorSyntax = ThemeColorSyntax$1;
-/**
- * @public
- * @deprecated Use `ThemeFont` from `@sanity/ui/theme` instead.
- */
-type ThemeFont = ThemeFont$1;
-/**
- * @public
- * @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.
- */
-type ThemeFontKey = ThemeFontKey$1;
-/**
- * @public
- * @deprecated Use `ThemeFontSize` from `@sanity/ui/theme` instead.
- */
-type ThemeFontSize = ThemeFontSize$1;
-/**
- * @public
- * @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.
- */
-type ThemeFontWeight = ThemeFontWeight$1;
-/**
- * @public
- * @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.
- */
-type ThemeFontWeightKey = ThemeFontWeightKey$1;
-/**
- * @public
- * @deprecated Use `ThemeFonts` from `@sanity/ui/theme` instead.
- */
-type ThemeFonts = ThemeFonts$1;
-/**
- * @public
- * @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.
- */
-type ThemeLayer = ThemeLayer$1;
-/**
- * @public
- * @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.
- */
-type ThemeShadow = ThemeShadow$1;
-/**
- * @public
- * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
- */
-export declare const createColorTheme: typeof createColorTheme$1;
-/**
- * @public
- * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
- */
-export declare const hexToRgb: typeof hexToRgb$1;
-/**
- * @public
- * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
- */
-export declare const hslToRgb: typeof hslToRgb$1;
-/**
- * @public
- * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
- */
-export declare const multiply: typeof multiply$1;
-/**
- * @public
- * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
- */
-export declare const parseColor: typeof parseColor$1;
-/**
- * @public
- * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
- */
-export declare const rgbToHex: typeof rgbToHex$1;
-/**
- * @public
- * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
- */
-export declare const rgbToHsl: typeof rgbToHsl$1;
-/**
- * @public
- * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
- */
-export declare const rgba: typeof rgba$1;
-/**
- * @public
- * @deprecated Use `screen` from `@sanity/ui/theme` instead.
- */
-export declare const screen: typeof screen$1;
-/**
- * @public
- * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
- */
-export declare const studioTheme: BaseTheme$1;
-/**
- * @public
- */
-type DialogPosition = 'absolute' | 'fixed';
-/**
- * @public
- */
-interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
-  /**
-   * @beta
-   */
-  __unstable_autoFocus?: boolean;
-  /**
-   * @beta
-   */
-  __unstable_hideCloseButton?: boolean;
-  cardRadius?: Radius | Radius[];
-  cardShadow?: number | number[];
-  contentRef?: React.ForwardedRef<HTMLDivElement>;
-  footer?: React.ReactNode;
-  header?: React.ReactNode;
-  id: string;
-  /** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
-  onActivate?: LayerProps['onActivate'];
-  onClickOutside?: () => void;
-  onClose?: () => void;
-  portal?: string;
-  position?: DialogPosition | DialogPosition[];
-  scheme?: ThemeColorSchemeKey$1;
-  zOffset?: number | number[];
-  /**
-   * Whether the dialog should animate in on mount.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean;
-}
-/**
- * The Dialog component.
- *
- * @public
- */
-export declare function Dialog(props: DialogProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'id' | 'width'>): import("react").JSX.Element;
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-interface DialogContextValue {
-  version: 0.0;
-  position?: DialogPosition | DialogPosition[];
-  zOffset?: number | number[];
-}
-/**
- * @internal
- */
-export declare const DialogContext: import("react").Context<DialogContextValue>;
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-interface DialogProviderProps {
-  children?: React.ReactNode;
-  position?: DialogPosition | DialogPosition[];
-  zOffset?: number | number[];
-}
-/**
- * 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 function useDialog(): DialogContextValue;
-/**
- * @public
- */
-interface HotkeysProps {
-  fontSize?: number | number[];
-  gap?: number | number[];
-  padding?: number | number[];
-  radius?: Radius | Radius[];
+import { 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];
+
+/** @public */
+export declare function Badge<T extends ElementType = "span">({
+  tone,
+  ...props
+}: BadgeProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof BadgeProps<T>>): JSX.Element;
+
+/** @public */
+export declare interface BadgeProps<
+  T extends React.ElementType = "span",
+> extends ToneProps {
   /**
-   * @deprecated Use `gap` instead.
+   * HTML element to render.
    */
-  space?: never;
-  keys?: string[];
-}
-/**
- * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
- *
- * @public
- */
-export declare function Hotkeys(props: HotkeysProps & Omit<React.HTMLProps<HTMLElement>, 'as' | 'size'>): import("react").JSX.Element;
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxOwnProps, 'children'> {
-  animated?: boolean;
-  delay?: number;
-}
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function Skeleton(props: SkeletonProps & Omit<React.HTMLProps<HTMLDivElement>, 'height'>): import("react").JSX.Element;
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-interface TextSkeletonProps extends SkeletonProps {
-  size?: number | number[];
-}
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-interface LabelSkeletonProps extends SkeletonProps {
-  size?: number | number[];
-}
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-interface HeadingSkeletonProps extends SkeletonProps {
-  size?: number | number[];
-}
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-interface CodeSkeletonProps extends SkeletonProps {
-  size?: number | number[];
-}
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function TextSkeleton(props: TextSkeletonProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>): import("react").JSX.Element;
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function LabelSkeleton(props: LabelSkeletonProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>): import("react").JSX.Element;
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function HeadingSkeleton(props: HeadingSkeletonProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>): import("react").JSX.Element;
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function CodeSkeleton(props: CodeSkeletonProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'height' | 'size'>): import("react").JSX.Element;
-/**
- * @public
- */
-interface TabProps {
-  /**
-   * The `id` of the correlating `TabPanel` component.
-   */
-  'aria-controls': string;
-  'id': string;
-  'icon'?: React.ElementType | React.ReactNode;
-  'focused'?: boolean;
-  'fontSize'?: number | number[];
-  'label'?: React.ReactNode;
-  'padding'?: number | number[];
-  'selected'?: boolean;
-  'tone'?: ButtonTone;
-}
-/**
- * @public
- */
-export declare function Tab(props: TabProps & Omit<React.HTMLProps<HTMLButtonElement>, 'aria-controls' | 'as' | 'id' | 'label' | 'type' | 'width'>): import("react").JSX.Element;
-/**
- * @public
- */
-interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {
+  as?: T;
   /**
-   * @deprecated Use `gap` instead.
+   * Shows an icon in the start position (left side in left-to-right languages).
    */
-  space?: never;
-  /** The spacing between children. */
-  gap?: number | number[];
-}
-/**
- * @public
- */
-type InlineProps<E extends ElementType = 'div'> = Props<InlineOwnProps, E>;
-/**
- * The `Inline` component is a layout utility for aligning and spacing items horizontally.
- *
- * @public
- */
-export declare const Inline: <E extends ElementType = 'div'>(props: InlineProps<E>) => React.JSX.Element;
-/**
- * @public
- */
-interface TabListProps extends Omit<InlineOwnProps, 'height'> {
-  children: Array<React.JSX.Element | null | undefined | false>;
-}
-/**
- * @public
- */
-export declare function TabList(props: TabListProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height'>): import("react").JSX.Element;
-/**
- * @public
- */
-interface TabPanelProps extends BoxOwnProps {
+  iconStart?: React.ElementType | React.ReactNode;
   /**
-   * The `id` of the correlating `Tab` component.
+   * Sets Badge's text label. Use instead of children unless you have a special use case.
    */
-  'aria-labelledby': string;
-  'id': string;
-}
-/**
- * @public
- */
-export declare function TabPanel(props: TabPanelProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'aria-labelledby' | 'id' | 'role'>): import("react").JSX.Element;
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-interface TreeProps {
-  gap?: number | number[];
+  text?: string;
+}
+
+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 function Box<T extends ElementType = "div">({
+  display,
+  minHeight,
+  minWidth,
+  ...props
+}: BoxProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof BoxProps<T>>): JSX.Element;
+
+/** @public */
+export declare interface BoxProps<
+  T extends React.ElementType = "div",
+> extends LayoutProps {
   /**
-   * @deprecated Use `gap` instead.
+   * HTML element or component to render.
    */
-  space?: never;
+  as?: T;
+  /**
+   * CSS `display` property.
+   * @remarks Does not include `'flex'` or `'grid'`. Use the Flex or Grid components for those.
+   */
+  display?: Responsive<DisplayBlock>;
 }
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function Tree(props: TreeProps & Omit<React.HTMLProps<HTMLUListElement>, 'align' | 'as' | 'height' | 'role' | 'wrap'>): React.JSX.Element;
-/**
- * @beta
- */
-interface TreeItemProps {
-  expanded?: boolean;
-  fontSize?: number | number[];
-  icon?: React.ElementType;
+
+/** @public */
+export declare function Button<T extends ElementType = "button">({
+  density,
+  level,
+  tone,
+  ...props
+}: ButtonProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof ButtonProps<T>>): JSX.Element;
+
+declare const BUTTON_DENSITY: readonly ["regular", "loose"];
+
+declare const BUTTON_LEVEL: readonly ["primary", "secondary", "tertiary"];
+
+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"> {
   /**
-   * Allows passing a custom element type to the link component
+   * HTML element to render.
    */
-  linkAs?: ElementType;
+  as?: InteractiveAs<T>;
   /**
-   * Additional props for the link element that is rendered when `href` is set — e.g. `next/link`'s
-   * `prefetch` together with `linkAs={Link}`. Props controlled by `TreeItem` itself (`href`,
-   * `role`, `tabIndex`, `aria-expanded` and the ref) take precedence.
+   * Sets padding and gap together to specify size.
    */
-  linkProps?: React.HTMLProps<HTMLAnchorElement> & Record<string, unknown>;
-  padding?: number | number[];
-  gap?: number | number[];
+  density?: ButtonDensity;
   /**
-   * @deprecated Use `gap` instead.
+   * Sets Button to fill the width of its container.
    */
-  space?: never;
-  text?: React.ReactNode;
-  weight?: ThemeFontWeightKey$1;
-}
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function TreeItem(props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>): React.JSX.Element;
-/**
- * @beta
- */
-interface TreeState {
-  [key: string]: {
-    element: HTMLElement;
-    expanded: boolean;
-  } | undefined;
+  fullWidth?: Responsive<boolean>;
+  /**
+   * Shows an icon in the start position (left side in left-to-right languages).
+   */
+  iconStart?: React.ElementType | React.ReactNode;
+  /**
+   * Shows an icon in the end position (right side in left-to-right languages).
+   */
+  iconEnd?: React.ElementType | React.ReactNode;
+  /**
+   * Sets the importance of Button's action.
+   */
+  level?: ButtonLevel;
+  /**
+   * Places Button into a loading state.
+   */
+  loading?: boolean;
+  /**
+   * Sets Button's text label.
+   */
+  text?: string;
+  /**
+   * Sets Button's semantic meaning and related color.
+   */
+  tone?: ButtonTone;
 }
-/**
- * @beta
- */
-interface TreeContextValue {
-  version: 0.0;
-  focusedElement: HTMLElement | null;
-  level: number;
-  path: string[];
-  registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void;
-  setExpanded: (path: string, expanded: boolean) => void;
-  setFocusedElement: (focusedElement: HTMLElement | null) => void;
-  gap: number | number[];
-  /**
-   * @deprecated Use `gap` instead.
-   */
-  space?: never;
-  state: TreeState;
+
+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 {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T;
+  /**
+   * 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 useTree(): TreeContextValue;
-/**
- * @internal
- */
-export declare function _raf(fn: () => void): () => void;
-/**
- * @internal
- */
-export declare function _raf2(fn: () => void): () => void;
-/**
- * @internal
- */
-export declare function _isEnterToClickElement(element: HTMLElement): boolean;
-/**
- * @internal
- */
-export declare function isHTMLElement(node: unknown): node is HTMLElement;
-/**
- * @internal
- */
-export declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement;
-/**
- * @internal
- */
-export declare function isHTMLInputElement(element: unknown): element is HTMLInputElement;
-/**
- * @internal
- */
-export declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement;
-/**
- * @internal
- */
-export declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement;
-/**
- * @internal
- */
-export declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement;
-/**
- * @internal
- */
-export declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean;
-/**
- * @internal
- */
-export declare function _hasFocus(element: HTMLElement): boolean;
-/**
- * @internal
- */
-export declare function isFocusable(element: HTMLElement): boolean;
-/**
- * @internal
- */
-export declare function attemptFocus(element: HTMLElement): boolean;
-/**
- * @internal
- */
-export declare function focusFirstDescendant(element: HTMLElement): boolean;
-/**
- * @internal
- */
-export declare function focusLastDescendant(element: HTMLElement): boolean;
-/**
- * @internal
- */
-export declare function _isScrollable(el: Node): boolean;
+
 /** @beta */
-type ArrayPropPrimitive = string | number | boolean | undefined | null;
-/**
- * @deprecated instead of `useArrayProp(width)` use `Array.isArray(width) ? width : [width]` instead
- * @beta
- */
-export declare function useArrayProp(_val?: never, _defaultVal?: never): never;
-/**
- * @public
- */
-type ClickOutsideListener = (event: MouseEvent) => void;
-/**
- * @public
- */
-type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[];
-/**
- * @public
- * @deprecated replaced by the new `useClickOutsideEvent` hook, instead of:
- * ```tsx
- * const [button, setButtonElement] = useState(null)
- * useClickOutside((event) => {}, [button])
- * return <button ref={setButtonElement} />
- * ```
- * do:
- * ```tsx
- * const buttonRef = useRef()
- * useClickOutsideEvent((event) => {}, () => [buttonRef.current])
- * return <button ref={buttonRef} />
- * ```
- */
-export declare function useClickOutside(_listener?: never, _elementsArg?: never, _boundaryElement?: never): never;
-/**
- * @public
- */
-type ClickOutsideEventListener = (event: MouseEvent) => void;
-/**
- * @public
- */
-type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[];
-/**
- * @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;
-/**
- * Subscribe to the rect of a DOM element.
- * @beta
- *
- * @deprecated Use `useElementSize` instead
- */
-export declare function useElementRect(_element?: never): never;
-/**
- * @beta
- */
-interface ElementRectValue {
-  width: number;
-  height: number;
-}
-/**
- * @beta
- */
-interface ElementSize {
-  content: ElementRectValue;
-  border: ElementRectValue;
-  /** @deprecated INTERNAL ONLY */
-  _contentRect: DOMRectReadOnly;
-}
-/**
- * @internal
- */
-type _ElementSizeSubscriber = (elementRect: ElementSize) => void;
-/**
- * @internal
- */
-interface _ElementSizeObserver {
-  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void;
+export declare function Checkbox(props: CheckboxProps): JSX.Element;
+
+/** @beta */
+export declare 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;
+  /**
+   * 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;
+  /**
+   * Visible label next to the checkbox.
+   */
+  label: React.ReactNode;
 }
-/**
- * @internal
- */
-interface _ElementSizeListener {
-  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void;
+
+/** @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];
+
+declare const CODE_TAG: readonly ["pre", "span"];
+
+/** @public */
+export declare 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.
+   */
+  language?: string;
+  /**
+   * Sets font size.
+   */
+  size?: Responsive<CodeSize>;
 }
-/**
- * @internal
- */
-export declare const _elementSizeObserver: _ElementSizeObserver;
-/**
- * Subscribe to the size of a DOM element.
- * @beta
- */
-export declare function useElementSize(element: HTMLElement | null): ElementSize | null;
-/**
- * @beta
- * @deprecated use `useImperativeHandle` instead
- * @example
- * ```diff
- * -const ref = useForwardedRef(forwardedRef)
- * +const ref = useRef(null)
- * +useImperativeHandle(forwardedRef, () => ref.current)
- * ```
- */
-export declare function useForwardedRef(_ref?: never): never;
-/**
- * Adds global keydown event listener to the window.
- *
- * @param onKeyDown - The function to call when a keydown event is triggered.
- * @param options - The options to pass to the addEventListener function (example, capture: true)
- * @beta
- */
-export declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void, options?: AddEventListenerOptions): void;
-/**
- * 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://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * @public
- */
-export declare function useMatchMedia(mediaQueryString: `(${string})`, getServerSnapshot?: () => boolean): boolean;
-/**
- * @internal
- */
-interface _MediaStore {
-  subscribe: (onStoreChange: () => void) => () => void;
-  getSnapshot: () => number;
+
+/** @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;
+
+declare const CONTAINER_SIZE: readonly [0, 1, 2, 3, 4, 5];
+
+/** @public */
+export declare interface ContainerProps<
+  T extends React.ElementType = "div",
+> extends LayoutProps {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T;
+  /**
+   * 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];
+
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
- */
-export declare function useMediaIndex(): number;
-/**
- * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
- *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
- *
- * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
- * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
- * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
- *
- * @public
- */
-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://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ * 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.
  *
- * 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;
-/**
- * @public
- */
-type AvatarPosition = 'top' | 'bottom' | 'inside';
-/**
- * @public
- */
-type AvatarSize = 0 | 1 | 2 | 3;
-/**
- * @public
- */
-type AvatarStatus = 'online' | 'editing' | 'inactive';
-/**
- * @public
- */
-interface AvatarOwnProps {
-  /** @beta */
-  __unstable_hideInnerStroke?: boolean;
-  animateArrowFrom?: AvatarPosition;
-  arrowPosition?: AvatarPosition;
-  color?: ThemeColorAvatarColorKey;
-  initials?: string;
-  onImageLoadError?: (event: Error) => void;
-  size?: AvatarSize | AvatarSize[];
-  src?: string;
-  /**
-   * The status of the entity this Avatar represents.
-   * @alpha
-   */
-  status?: AvatarStatus;
-  title?: string;
-}
-/**
- * @public
- */
-type AvatarProps<E extends ElementType = 'div'> = Props<AvatarOwnProps, E>;
-/**
- * Avatars are used to represent people and other agents (e.g. bots).
- *
- * @public
- */
-export declare const Avatar: <E extends ElementType = 'div'>(props: AvatarProps<E>) => React.JSX.Element;
-/**
- * @public
- */
-interface AvatarCounterProps {
-  count: number;
-  size?: AvatarSize | AvatarSize[];
-  /** @deprecated No longer supported. */
-  tone?: never;
-}
-/**
- * @public
- */
-export declare function AvatarCounter(props: AvatarCounterProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): import("react").JSX.Element;
-/**
- * @public
- */
-interface AvatarStackProps {
-  children: React.ReactNode;
-  maxLength?: number;
-  size?: AvatarSize | AvatarSize[];
-  /** @deprecated No longer supported. */
-  tone?: never;
-}
-/**
- * @public
- */
-export declare function AvatarStack(props: AvatarStackProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>): import("react").JSX.Element;
-/**
- * @internal
- */
-interface AvatarRootStyleProps {
-  $color: ThemeColorAvatarColorKey;
-}
-/**
- * @internal
- */
-interface ResponsiveAvatarSizeStyleProps {
-  $size: AvatarSize[];
-}
-/**
- * @public
- * @deprecated No longer used
- */
-type BadgeMode = never;
-/**
- * @public
- */
-type BadgeTone = ThemeColorStateToneKey;
-/**
- * @public
- */
-interface BadgeOwnProps extends BoxOwnProps, ResponsiveRadiusProps {
-  fontSize?: number | number[];
-  /** @deprecated No longer used. */
-  mode?: never;
-  tone?: BadgeTone;
+ * 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;
+
+declare function DialogContent(props: ComponentProps<"div">): JSX.Element;
+
+declare function DialogFooter(props: ComponentProps<"div">): JSX.Element;
+
+/** @beta */
+export declare 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): JSX.Element;
+
+declare namespace DialogRoot {
+  var displayName: string;
+  var Content: typeof DialogContent;
+  var Footer: typeof DialogFooter;
+}
+
+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];
+
+/** @public */
+export declare type DisplayFlex = (typeof DISPLAY_FLEX)[number];
+
+/** @public */
+export declare type DisplayGrid = (typeof DISPLAY_GRID)[number];
+
+/** @public */
+export declare function Divider(props: DividerProps): JSX.Element;
+
+/** @public */
+export declare interface DividerProps
+  extends React.ComponentProps<"hr">, MarginProps {}
+
+/** @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];
+
+/** @public */
+export declare 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
- */
-type BadgeProps<E extends ElementType = 'div'> = Props<BadgeOwnProps, E>;
-/**
- * Badges are used to tag resources.
- *
- * @public
- */
-export declare const Badge: <E extends ElementType = 'div'>(props: BadgeProps<E>) => React.JSX.Element;
-/**
- * @public
- */
-interface CardOwnProps extends BoxOwnProps, ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps {
+
+/** @public */
+export declare type EyebrowSize = (typeof EYEBROW_SIZE)[number];
+
+/** @public */
+export declare function Flex<T extends ElementType = "div">({
+  display,
+  minHeight,
+  minWidth,
+  ...props
+}: FlexProps<T> &
+  Omit<ComponentPropsWithRef<T>, keyof FlexProps<T>>): JSX.Element;
+
+declare const FLEX_DIRECTION: readonly [
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse",
+];
+
+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];
+
+/** @public */
+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 interface FlexProps<T extends React.ElementType = "div">
+  extends FlexParentProps, GapProps, LayoutProps {
   /**
-   * Do not use in production.
-   * @beta
+   * HTML element or component to render.
    */
-  __unstable_checkered?: boolean;
+  as?: T;
   /**
-   * Do not use in production.
-   * @beta
+   * CSS `display` property.
    */
-  __unstable_focusRing?: boolean;
-  disabled?: boolean;
-  muted?: boolean;
-  pressed?: boolean;
-  scheme?: ThemeColorSchemeKey$1;
-  selected?: boolean;
-  tone?: CardTone;
+  display?: Responsive<DisplayFlex>;
 }
-/**
- * @public
- */
-type CardProps<E extends ElementType = 'div'> = Props<CardOwnProps, E>;
-/**
- * The `Card` component acts much like a `Box`, but with a background and foreground color.
- * Components within a `Card` inherit its colors.
- *
- * @public
- */
-export declare const Card: <E extends ElementType = 'div'>(props: CardProps<E>) => React.JSX.Element;
-/**
- * @internal
- */
-interface CardStyleProps {
-  $checkered: boolean;
-  $focusRing: boolean;
-  $muted: boolean;
-  $tone: ThemeColorCardToneKey;
+
+/** @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 = {
+  /** CSS **gap** property */
+  gap?: Responsive<SpaceInherit>;
+  /** CSS **row-gap** property */
+  rowGap?: Responsive<SpaceInherit>;
+  /** CSS **column-gap** property */
+  columnGap?: Responsive<SpaceInherit>;
+};
+
+/** @public */
+export declare function Grid<T extends ElementType = "div">({
+  display,
+  minHeight,
+  minWidth,
+  ...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 = {
+  /** 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 interface GridProps<T extends React.ElementType = "div">
+  extends GridParentProps, GapProps, LayoutProps {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T;
+  /**
+   * CSS `display` property.
+   */
+  display?: Responsive<DisplayGrid>;
 }
-/**
- * @public
- */
-interface CheckboxProps {
-  indeterminate?: boolean;
-  customValidity?: string;
+
+/** @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];
+
+declare const HEADING_TAG: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+
+/** @public */
+export declare interface HeadingProps extends TypographyProps {
+  /**
+   * Semantic heading element to render.
+   * @remarks Always set this explicitly.
+   */
+  as?: HeadingTag;
+  /**
+   * Sets font size.
+   * @remarks Independent of `as`.
+   */
+  size?: Responsive<HeadingSize>;
 }
-/**
- * Checkboxes allow the user to select one or more items from a set.
- *
- * @public
- */
-export declare function Checkbox(props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & CheckboxProps): import("react").JSX.Element;
-/**
- * @public
- */
-interface ContainerOwnProps extends BoxOwnProps, ResponsiveWidthProps {}
-/**
- * @public
- */
-type ContainerProps<E extends ElementType = 'div'> = Props<ContainerOwnProps, E>;
-/**
- * The `Container` component wraps content layout in a defined set of widths.
- *
- * @public
- */
-export declare const Container: <E extends ElementType = 'div'>(props: ContainerProps<E>) => React.JSX.Element;
-/**
- * @internal
- */
-interface ResponsiveWidthStyleProps {
-  $width: (number | 'auto')[];
+
+/** @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;
+
+/** @public */
+export declare interface HStackProps<
+  T extends React.ElementType = "div",
+> extends Pick<GapProps, "gap"> {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T;
 }
-/**
- * @public
- */
-interface FlexOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveFlexProps, ResponsiveFlexItemProps {
-  gap?: number | 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"
+> {
+  /**
+   * Accessible name for the button.
+   * @remarks Because IconButtons have no visible text, this is required.
+   */
+  "aria-label": string;
+  /**
+   * Icon to render.
+   */
+  icon: React_2.ComponentType<SVGProps<SVGSVGElement>>;
 }
-/**
- * @public
- */
-type FlexProps<E extends ElementType = 'div'> = Props<FlexOwnProps, E>;
-/**
- * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
- *
- * @public
- */
-export declare const Flex: <E extends ElementType = 'div'>(props: FlexProps<E>) => React.JSX.Element;
-/**
- * @public
- */
-interface GridOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveGridProps {}
-/**
- * @public
- */
-type GridProps<E extends ElementType = 'div'> = Props<GridOwnProps, E>;
-/**
- * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
- *
- * @public
- */
-export declare const Grid: <E extends ElementType = 'div'>(props: GridProps<E>) => React.JSX.Element;
-/**
- * @public
- */
-type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial';
-/**
- * @public
- */
-interface HeadingOwnProps {
-  accent?: boolean;
-  align?: TextAlign | TextAlign[];
-  muted?: boolean;
-  size?: number | number[];
+
+/** @public */
+export declare interface IconProps
+  extends
+    ComponentProps<"svg">,
+    Pick<TypographyProps, "muted">,
+    MarginProps,
+    ToneProps {
+  /**
+   * The icon component to render.
+   */
+  icon: React.ComponentType<SVGProps<SVGSVGElement>>;
   /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
+   * Sets icon size.
    */
-  textOverflow?: 'ellipsis';
-  weight?: ThemeFontWeightKey$1;
+  size?: Responsive<IconSize>;
 }
-/**
- * @public
- */
-type HeadingProps<E extends ElementType = 'div'> = Props<HeadingOwnProps, E>;
-/**
- * Typographic headings.
- *
- * @public
- */
-export declare const Heading: <E extends ElementType = 'div'>(props: HeadingProps<E>) => React.JSX.Element;
-/**
- * @public
- */
-interface KBDOwnProps {
-  fontSize?: number | number[];
-  padding?: number | number[];
-  radius?: Radius | Radius[];
+
+/** @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;
+
+/** @beta */
+export declare interface IndicatorProps<
+  T extends React.ElementType = "span",
+> extends ToneProps {
+  /**
+   * HTML element to render.
+   */
+  as?: T;
+  /**
+   * Accessible label.
+   */
+  label?: string;
 }
-/**
- * @public
- */
-type KBDProps<E extends ElementType = 'kbd'> = Props<KBDOwnProps, E>;
-/**
- * Used to define some text as keyboard input.
- *
- * @public
- */
-export declare const KBD: <E extends ElementType = 'kbd'>(props: KBDProps<E>) => React.JSX.Element;
-/**
- * @public
- */
-interface LabelOwnProps {
-  accent?: boolean;
-  align?: TextAlign | TextAlign[];
-  muted?: boolean;
-  size?: number | number[];
+
+/** @public */
+export declare function IndicatorStack<T extends ElementType = "div">(
+  props: IndicatorStackProps<T> &
+    Omit<ComponentPropsWithRef<T>, keyof IndicatorStackProps<T>>,
+): JSX.Element;
+
+/** @public */
+export declare interface IndicatorStackProps<
+  T extends React.ElementType = "div",
+> {
   /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
+   * HTML element to render.
    */
-  textOverflow?: 'ellipsis';
-  weight?: ThemeFontWeightKey$1;
+  as?: T;
 }
-/**
- * @public
- */
-type LabelProps<E extends ElementType = 'div'> = Props<LabelOwnProps, E>;
-/**
- * Typographic labels.
- *
- * @public
- */
-export declare const Label: <E extends ElementType = 'div'>(props: LabelProps<E>) => React.JSX.Element;
-/**
- * @public
- */
-interface RadioProps {
-  customValidity?: string;
+
+/** @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;
+
+/** @deprecated Use HStack component instead */
+/** @public */
+export declare interface InlineProps<
+  T extends React.ElementType = "div",
+> extends PaddingProps {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T;
+  /**
+   * 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;
+
+/** @beta */
+export declare 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;
 }
-/**
- * The `Radio` component allows the user to select one option from a set.
- *
- * @public
- */
-export declare function Radio(props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & RadioProps): import("react").JSX.Element;
-/**
- * @public
- */
-interface SelectProps {
-  fontSize?: number | number[];
-  gap?: number | number[];
-  padding?: number | number[];
-  radius?: Radius | Radius[];
+
+/** @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;
+
+/** @beta */
+export declare interface LinkProps extends React.ComponentProps<"a"> {
+  /**
+   * Sets the link to `target="_blank"` and `rel="noopener noreferrer"`.
+   */
+  openInNewTab?: boolean;
   /**
-   * @deprecated Use `gap` instead.
+   * Underlines the link.
    */
-  space?: never;
-  customValidity?: string;
-}
-/**
- * The `Select` component provides control of options.
- *
- * @public
- */
-export declare function Select(props: SelectProps & Omit<React.HTMLProps<HTMLSelectElement>, 'as'>): import("react").JSX.Element;
-/**
- * @public
- */
-interface SpinnerProps {
-  muted?: boolean;
-  size?: number | number[];
+  underlined?: boolean;
 }
-/**
- * Indicate that something is loading for an indeterminate amount of time.
- *
- * @public
- */
-export declare function Spinner(props: SpinnerProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'size'>): import("react").JSX.Element;
-/**
- * @public
- */
-interface StackOwnProps extends BoxOwnProps {
-  gap?: number | number[];
+
+/** @beta */
+export declare const List: typeof ListRoot;
+
+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;
+
+/** @beta */
+export declare interface ListButtonItemProps<
+  T extends React_2.ElementType = "button",
+> extends ListItemProps {
   /**
-   * @deprecated Use `gap` instead.
+   * Element or component to render for the press target.
    */
-  space?: never;
-}
-/**
- * @public
- */
-type StackProps<E extends ElementType = 'div'> = Props<StackOwnProps, E>;
-/**
- * The `Stack` component is used to place elements on top of each other.
- *
- * @public
- */
-export declare const Stack: <E extends ElementType = 'div'>(props: StackProps<E>) => React.JSX.Element;
-/**
- * @public
- */
-interface SwitchProps {
-  indeterminate?: boolean;
-}
-/**
- * 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(props: Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'type'> & SwitchProps): import("react").JSX.Element;
-/**
- * @public
- */
-interface TextOwnProps {
-  accent?: boolean;
-  align?: TextAlign | TextAlign[];
-  /** When `true` the text color will be muted. */
-  muted?: boolean;
-  size?: number | number[];
+  as?: InteractiveAs<T>;
   /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
+   * Marks the row as the current selection.
    */
-  textOverflow?: 'ellipsis';
-  weight?: ThemeFontWeightKey$1;
+  selected?: boolean;
 }
-/**
- * @public
- */
-type TextProps<E extends ElementType = 'div'> = Props<TextOwnProps, E>;
-/**
- * The `Text` component is an agile, themed typographic element.
- *
- * @public
- */
-export declare const Text: <E extends ElementType = 'div'>(props: TextProps<E>) => React.JSX.Element;
-/**
- * @public
- */
-interface TextAreaProps extends ResponsiveRadiusProps {
+
+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"> {
   /**
-   * @beta
+   * Sets horizontal padding, gap, and minimum row height together.
    */
-  __unstable_disableFocusRing?: boolean;
-  border?: boolean;
-  customValidity?: string;
-  fontSize?: number | number[];
-  padding?: number | number[];
-  weight?: ThemeFontWeightKey$1;
-}
-/**
- * A multiline text input.
- *
- * @public
- */
-export declare function TextArea(props: TextAreaProps & Omit<React.HTMLProps<HTMLTextAreaElement>, 'as'>): import("react").JSX.Element;
-/**
- * @public
- */
-type TextInputClearButtonProps = ButtonOwnProps & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>;
-/**
- * @public
- */
-type TextInputType = 'search' | 'date' | 'datetime-local' | 'email' | 'url' | 'month' | 'number' | 'password' | 'tel' | 'time' | 'text' | 'week' | 'color';
-/**
- * @public
- */
-interface TextInputProps {
+  density?: Responsive<Density>;
   /**
-   * @beta
+   * Slot at the left edge of the row.
    */
-  __unstable_disableFocusRing?: boolean;
-  border?: boolean;
+  start?: React_2.ReactNode;
   /**
-   * @beta
+   * Slot at the right edge of the row.
    */
-  clearButton?: boolean | TextInputClearButtonProps;
-  customValidity?: string;
-  fontSize?: number | number[];
-  icon?: React.ElementType | React.ReactNode;
-  iconRight?: React.ElementType | React.ReactNode;
+  end?: React_2.ReactNode;
+}
+
+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",
+> {
   /**
-   * @beta
+   * HTML element to render.
    */
-  onClear?: () => void;
-  padding?: number | number[];
-  prefix?: React.ReactNode;
-  radius?: Radius | Radius[];
+  as?: T;
   /**
-   * @deprecated Use `gap` instead.
+   * Main label.
    */
-  space?: never;
-  gap?: number | number[];
-  suffix?: React.ReactNode;
-  type?: TextInputType;
-  weight?: ThemeFontWeightKey$1;
-}
-/**
- * Single line text input.
- *
- * @public
- */
-export declare function TextInput(props: TextInputProps & Omit<React.HTMLProps<HTMLInputElement>, 'as' | 'prefix' | 'type'>): import("react").JSX.Element;
-/**
- * @internal
- */
-interface ThemeProps {
-  theme: Theme$1;
-}
-/**
- * @internal
- */
-interface ResponsiveFontSizeStyleProps {
-  $size: number[];
-}
-/**
- * @internal
- */
-interface FontWeightStyleProps {
-  $weight?: ThemeFontWeightKey$1;
-}
-/**
- * @internal
- */
-interface ResponsiveTextAlignStyleProps {
-  $align: TextAlign[];
-}
-/**
- * @internal
- */
-interface ResponsiveFontStyleProps extends FontWeightStyleProps, ResponsiveFontSizeStyleProps, ResponsiveTextAlignStyleProps {
-  $accent?: boolean;
-  $muted?: boolean;
-}
-/**
- * Get responsive CSS for the `code` font style.
- * @internal
- */
-export declare function responsiveCodeFontStyle(props: FontWeightStyleProps & ResponsiveFontSizeStyleProps & ThemeProps): CSSObject[];
-/**
- * Get responsive CSS for the `heading` font style.
- * @internal
- */
-export declare function responsiveHeadingFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
-/**
- * Get responsive CSS for the `label` font style.
- * @internal
- */
-export declare function responsiveLabelFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
-/**
- * Get responsive text align styles.
- * @internal
- */
-export declare function responsiveTextAlignStyle(props: ResponsiveTextAlignStyleProps & ThemeProps): CSSObject[];
-/**
- * Get responsive CSS for the `text` font style.
- * @internal
- */
-export declare function responsiveTextFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
-/**
- * @internal
- */
-export declare function _fillCSSObject(keys: string[], value: string | number | CSSObject): CSSObject;
-/**
- * @public
- */
-export declare function rem(pixelValue: number): string | 0;
-/**
- * @internal
- */
-export declare function _responsive<T>(media: number[], values: T[], callback: (value: T, index: number, array: T[]) => CSSObject): CSSObject[];
-/**
- * @internal
- */
-export declare function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[];
-/**
- * @internal
- */
-export declare function _getResponsiveSpace(theme: Theme$1, props: string[], spaceIndexes?: number[]): CSSObject[] | null;
-/**
- * @public
- */
-interface ThemeColorProviderProps {
-  children?: React.ReactNode;
-  scheme?: ThemeColorSchemeKey$1;
-  tone?: ThemeColorCardToneKey;
-}
-/**
- * @public
- */
-export declare function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element;
-/**
- * @public
- */
-interface ThemeProviderProps {
-  children?: React.ReactNode;
-  scheme?: ThemeColorSchemeKey$1;
-  theme?: RootTheme$1;
-  tone?: ThemeColorCardToneKey;
-}
-/**
- * @public
- */
-export declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element;
-/**
- * @public
- */
-interface ThemeContextValue {
-  /** @deprecated No longer used */
-  version: 0.0;
-  scheme: ThemeColorSchemeKey$1;
-  theme: RootTheme$1;
-  tone: ThemeColorCardToneKey;
-}
-/**
- * @public
- */
-export declare function useRootTheme(): ThemeContextValue;
-/**
- * @public
- */
-export declare function useTheme(): Theme$1;
-/**
- * @public
- */
-export declare function useTheme_v2(): Theme_v2;
-/** @internal */
-export declare function Arrow(props: {
-  width: number;
-  height: number;
-  radius?: number;
-} & Omit<HTMLProps<HTMLDivElement>, 'width' | 'height'>): React.JSX.Element;
-/**
- * @public
- */
-interface BoundaryElementProviderProps {
-  children: React.ReactNode;
-  element: HTMLElement | null;
-}
-/**
- * @public
- */
-export declare function BoundaryElementProvider(props: BoundaryElementProviderProps): React.JSX.Element;
-/**
- * @public
- */
-interface BoundaryElementContextValue {
-  version: 0.0;
-  element: HTMLElement | null;
-}
-/**
- * @public
- */
-export declare function useBoundaryElement(): BoundaryElementContextValue;
-/**
- * @internal
- * @deprecated ConditionalWrapper was removed in @sanity/ui v4. Inline the conditional wrapping logic instead.
- */
-export declare function ConditionalWrapper(_props?: never): never;
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-interface MediaQueryProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements;
-  media?: number[];
-}
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function ElementQuery(props: MediaQueryProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'media'>): import("react").JSX.Element;
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-type ErrorBoundaryProps = PropsWithChildren<{
-  onCatch: (params: {
-    error: Error;
-    info: React.ErrorInfo;
-  }) => void;
-}>;
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-interface ErrorBoundaryState {
-  error: Error | null;
+  title?: React_2.ReactNode;
+  /**
+   * Text below the title.
+   */
+  subtitle?: React_2.ReactNode;
 }
-/**
- * DO NOT USE IN PRODUCTION
- * @beta
- */
-export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
-  state: ErrorBoundaryState;
-  static getDerivedStateFromError(error: Error): ErrorBoundaryState;
-  componentDidCatch(error: Error, info: React.ErrorInfo): void;
-  render(): React.ReactNode;
+
+/** @beta */
+export declare interface ListProps<T extends ListTag = "ul"> extends Pick<
+  GapProps,
+  "gap"
+> {
+  /**
+   * HTML 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 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;
+};
+
+/** @beta */
+export declare const Popover: typeof PopoverRoot & {
+  forwardsTriggerProps: boolean;
+};
+
+/** @beta */
+export declare 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>;
+}): JSX.Element;
+
+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 or component to render.
+   */
+  as?: InteractiveAs<T>;
 }
-/**
- * @public
- */
-interface LayerProviderProps {
-  children?: React.ReactNode;
-  zOffset?: number | number[];
+
+/** @beta */
+export declare function Radio(props: RadioProps): JSX.Element;
+
+/** @beta */
+export declare 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;
+  /**
+   * Visible label next to the radio.
+   */
+  label: React.ReactNode;
 }
-/**
- * @public
- */
-export declare function LayerProvider(props: LayerProviderProps): React.JSX.Element;
-/** @public */
-interface LayerContextValue {
-  version: 0.0;
-  isTopLayer: boolean;
-  level?: number;
-  registerChild: (childLevel?: number) => () => void;
-  size: number;
-  zIndex: number;
+
+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];
+
+/** @public */
+export declare type Shadow = (typeof SHADOW)[number];
+
+declare type ShadowProps = {
+  /** CSS **box-shadow** property */
+  shadow?: Shadow;
+};
+
+/** @beta */
+export declare function SkipToContent(props: SkipToContentProps): JSX.Element;
+
+/** @beta */
+export declare interface SkipToContentProps extends React.ComponentProps<"a"> {
+  /**
+   * Same-page fragment to jump to.
+   * @remarks Note: The hash character # is required for proper linking.
+   */
+  href: string;
+  /**
+   * Visible and announced text.
+   */
+  label: string;
+  /**
+   * Not accepted.
+   * @remarks Pass text via `label`.
+   */
+  children?: never;
 }
-/**
- * @public
- */
-export declare function useLayer(): LayerContextValue;
-/**
- * @public
- */
-interface PortalProps {
-  children: React.ReactNode;
+
+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;
+
+/** @public */
+export declare interface SpinnerProps extends React.ComponentProps<"svg"> {
   /**
-   * @beta This API might change. DO NOT USE IN PRODUCTION.
+   * Size of the spinner icon.
    */
-  __unstable_name?: string;
+  size?: Responsive<IconSize>;
 }
-/**
- * @public
- */
-export declare function Portal(props: PortalProps): React.ReactPortal | null;
-/**
- * @public
- */
-interface PortalProviderProps {
+
+/** @beta */
+export declare function Switch(props: SwitchProps): JSX.Element;
+
+/** @beta */
+export declare interface SwitchProps
+  extends React.ComponentProps<"input">, MarginProps {
   /**
-   * @deprecated Use `<BoundaryElementProvider element={...} />` instead
+   * Applies error styling to the switch track.
+   * @remarks Use when form validation fails. Pair with a visible error message. The prop is visual only.
    */
-  boundaryElement?: HTMLElement | null;
-  children: React.ReactNode;
-  element?: HTMLElement | null;
+  error?: boolean;
   /**
-   * @beta
+   * Visible label next to the switch.
    */
-  __unstable_elements?: Record<string, HTMLElement | null | undefined>;
+  label: React.ReactNode;
 }
-/**
- * @public
- */
-export declare function PortalProvider(props: PortalProviderProps): React.JSX.Element;
-/**
- * @public
- */
-interface PortalContextValue {
-  version: 0.0;
-  boundaryElement: HTMLElement | null;
-  element: HTMLElement | null;
-  elements?: Record<string, HTMLElement | null | undefined>;
-}
-/**
- * @public
- */
-export declare function usePortal(): PortalContextValue;
-/**
- * @public
- */
-interface SrOnlyProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements;
-  children?: 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"];
+
+declare const TEXT_SIZE: readonly [0, 1, 2, 3, 4];
+
+/** @public */
+export declare type TextAlign = (typeof TEXT_ALIGN)[number];
+
+/** @public */
+export declare interface TextProps<
+  T extends React.ElementType = "span",
+> extends TypographyProps {
+  /**
+   * HTML element to render.
+   */
+  as?: T;
+  /**
+   * Sets font size.
+   */
+  size?: Responsive<TextSize>;
 }
-/**
- * @public
- */
-export declare function SrOnly(props: SrOnlyProps & Omit<React.HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>): import("react").JSX.Element;
-/**
- * @beta
- */
-interface VirtualListChangeOpts {
-  fromIndex: number;
-  gap: number;
-  itemHeight: number;
-  scrollHeight: number;
-  scrollTop: number;
-  toIndex: number;
+
+/** @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;
+};
+
+/** @beta */
+export declare const Tooltip: typeof TooltipRoot;
+
+/** @public */
+export declare function TooltipGroup<T extends ElementType = "div">(
+  props: TooltipGroupProps<T> &
+    Omit<ComponentPropsWithRef<T>, keyof TooltipGroupProps<T>>,
+): JSX.Element;
+
+/** @public */
+export declare interface TooltipGroupProps<
+  T extends React.ElementType = "div",
+> {
+  /**
+   * HTML element to render.
+   */
+  as?: T;
 }
-/**
- * @beta
- */
-interface VirtualListProps<Item = any> {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements;
-  gap?: number;
-  getItemKey?: (item: Item, itemIndex: number) => string;
-  items?: Item[];
-  onChange?: (opts: VirtualListChangeOpts) => void;
-  renderItem?: (item: Item) => React.ReactNode;
+
+/** @beta */
+export declare 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>;
+}): 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;
+}
+
+/** @public */
+export declare function useIsClient(): boolean;
+
+/** @public */
+export declare function VisuallyHidden<T extends ElementType = "span">(
+  props: VisuallyHiddenProps<T> &
+    Omit<ComponentPropsWithRef<T>, keyof VisuallyHiddenProps<T>>,
+): JSX.Element;
+
+/** @public */
+export declare interface VisuallyHiddenProps<
+  T extends React.ElementType = "span",
+> {
+  /**
+   * HTML element to render.
+   */
+  as?: T;
+  /**
+   * If true, the element becomes visible on `:focus-visible`.
+   */
+  visibleOnFocus?: boolean;
 }
-/**
- * @beta
- */
-export declare function VirtualList(props: VirtualListProps & StackOwnProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'onChange'>): React.JSX.Element;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export declare const Autocomplete: never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type AutocompleteInputChangeMsg = never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type AutocompleteInputFoocusMsg = never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type AutocompleteMsg = never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type AutocompleteOpenButtonProps = never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type AutocompleteProps = never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type AutocompleteRootBlurMsg = never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type AutocompleteRootClearMsg = never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type AutocompleteRootEscapeMsg = never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type AutocompleteRootOpenMsg = never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type AutocompleteRootSetActiveValueMsg = never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type AutocompleteRootSetListFocusedMsg = never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type AutocompleteState = never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type AutocompleteValueChangeMsg = never;
-/** @deprecated Moved to `@sanity/ui/autocomplete` */
-export type BaseAutocompleteOption = never;
-/** @deprecated Moved to `@sanity/ui/breadcrumbs` */
-export declare const Breadcrumbs: never;
-/** @deprecated Moved to `@sanity/ui/breadcrumbs` */
-export type BreadcrumbsProps = never;
-/** @deprecated Moved to `@sanity/ui/code` */
-export declare const Code: never;
-/** @deprecated Moved to `@sanity/ui/code` */
-export type CodeOwnProps = never;
-/** @deprecated Moved to `@sanity/ui/code` */
-export type CodeProps = never;
-/** @deprecated Moved to `@sanity/ui/menu` */
-export declare const Menu: never;
-/** @deprecated Moved to `@sanity/ui/menu` */
-export declare const MenuButton: never;
-/** @deprecated Moved to `@sanity/ui/menu` */
-export type MenuButtonProps = never;
-/** @deprecated Moved to `@sanity/ui/menu` */
-export declare const MenuDivider: never;
-/** @deprecated Moved to `@sanity/ui/menu` */
-export type MenuDividerProps = never;
-/** @deprecated Moved to `@sanity/ui/menu` */
-export declare const MenuGroup: never;
-/** @deprecated Moved to `@sanity/ui/menu` */
-export type MenuGroupOwnProps = never;
-/** @deprecated Moved to `@sanity/ui/menu` */
-export type MenuGroupProps = never;
-/** @deprecated Moved to `@sanity/ui/menu` */
-export declare const MenuItem: never;
-/** @deprecated Moved to `@sanity/ui/menu` */
-export type MenuItemOwnProps = never;
-/** @deprecated Moved to `@sanity/ui/menu` */
-export type MenuItemProps = never;
-/** @deprecated Moved to `@sanity/ui/menu` */
-export type MenuProps = never;
-/** @deprecated Moved to `@sanity/ui/popover` */
-export declare const Popover: never;
-/** @deprecated Moved to `@sanity/ui/popover` */
-export type PopoverMargins = never;
-/** @deprecated Moved to `@sanity/ui/popover` */
-export type PopoverProps = never;
-/** @deprecated Moved to `@sanity/ui/popover` */
-export type PopoverUpdateCallback = never;
-/** @deprecated Moved to `@sanity/ui/popover` */
-export type PopoverWidth = never;
-/** @deprecated Moved to `@sanity/ui/toast` */
-export declare const Toast: never;
-/** @deprecated Moved to `@sanity/ui/toast` */
-export type ToastContextValue = never;
-/** @deprecated Moved to `@sanity/ui/toast` */
-export type ToastParams = never;
-/** @deprecated Moved to `@sanity/ui/toast` */
-export type ToastProps = never;
-/** @deprecated Moved to `@sanity/ui/toast` */
-export declare const ToastProvider: never;
-/** @deprecated Moved to `@sanity/ui/toast` */
-export type ToastProviderProps = never;
-/** @deprecated Moved to `@sanity/ui/toast` */
-export declare const useToast: never;
-/** @deprecated Moved to `@sanity/ui/tooltip` */
-export declare const Tooltip: never;
-/** @deprecated Moved to `@sanity/ui/tooltip` */
-export declare const TooltipDelayGroupContext: never;
-/** @deprecated Moved to `@sanity/ui/tooltip` */
-export type TooltipDelayGroupContextValue = never;
-/** @deprecated Moved to `@sanity/ui/tooltip` */
-export declare const TooltipDelayGroupProvider: never;
-/** @deprecated Moved to `@sanity/ui/tooltip` */
-export type TooltipDelayGroupProviderProps = never;
-/** @deprecated Moved to `@sanity/ui/tooltip` */
-export type TooltipProps = never;
-/** @deprecated Moved to `@sanity/ui/tooltip` */
-export declare const useTooltipDelayGroup: never;
-export { type ArrayPropPrimitive, type Assign, type AvatarCounterProps, type AvatarOwnProps, type AvatarPosition, type AvatarProps, type AvatarRootStyleProps, type AvatarSize, type AvatarStackProps, type AvatarStatus, type BadgeMode, type BadgeOwnProps, type BadgeProps, type BadgeTone, type BaseTheme, type BoundaryElementContextValue, type BoundaryElementProviderProps, Box, type BoxDisplay, type BoxHeight, type BoxOverflow, type BoxOwnProps, type BoxProps, type BoxShadow, type BoxSizing, Button, type ButtonMode, type ButtonOwnProps, type ButtonProps, type ButtonTextAlign, type ButtonTone, type ButtonWidth, type CardOwnProps, type CardProps, type CardStyleProps, type CardTone, type CheckboxProps, type ClickOutsideElements, type ClickOutsideEventElements, type ClickOutsideEventListener, type ClickOutsideListener, type CodeSkeletonProps, type ComponentType, type ContainerOwnProps, type ContainerProps, type Delay, type DialogContextValue, type DialogPosition, type DialogProps, type DialogProviderProps, type ElementRectValue, type ElementSize, type ElementType, type EmptyProps, type ErrorBoundaryProps, type ErrorBoundaryState, type FlexAlign, type FlexDirection, type FlexJustify, type FlexOwnProps, type FlexProps, type FlexValue, type FlexWrap, type FontWeightStyleProps, type GridAutoCols, type GridAutoFlow, type GridAutoRows, type GridItemColumn, type GridItemColumnEnd, type GridItemColumnStart, type GridItemRow, type GridItemRowEnd, type GridItemRowStart, type GridOwnProps, type GridProps, type HSL, type HeadingOwnProps, type HeadingProps, type HeadingSkeletonProps, type HotkeysProps, type InlineOwnProps, type InlineProps, type KBDOwnProps, type KBDProps, type LabelOwnProps, type LabelProps, type LabelSkeletonProps, Layer, type LayerContextValue, type LayerProps, type LayerProviderProps, type MediaQueryProps, type PartialThemeColorBuilderOpts, type Placement, type PortalContextValue, type PortalProps, type PortalProviderProps, type Props, type RGB, type RadioProps, type Radius, type ResponsiveAvatarSizeStyleProps, type ResponsiveBorderProps, type ResponsiveBoxProps, type ResponsiveFlexItemProps, type ResponsiveFlexProps, type ResponsiveFontSizeStyleProps, type ResponsiveFontStyleProps, type ResponsiveGridItemProps, type ResponsiveGridProps, type ResponsiveMarginProps, type ResponsivePaddingProps, type ResponsiveRadiusProps, type ResponsiveShadowProps, type ResponsiveTextAlignStyleProps, type ResponsiveWidthProps, type ResponsiveWidthStyleProps, type RootTheme, type SelectProps, type SelectableTone, type SkeletonProps, type SpinnerProps, type SrOnlyProps, type StackOwnProps, type StackProps, type Styles, type SwitchProps, type TabListProps, type TabPanelProps, type TabProps, type TagType, type TextAlign, type TextAreaProps, type TextInputClearButtonProps, type TextInputProps, type TextInputType, type TextOwnProps, type TextProps, type TextSkeletonProps, type Theme, type ThemeAvatar, type ThemeColor, type ThemeColorBase, type ThemeColorBuilderOpts, type ThemeColorButton, type ThemeColorButtonModeKey, type ThemeColorButtonState, type ThemeColorButtonStates, type ThemeColorButtonTones, type ThemeColorCard, type ThemeColorCardState, type ThemeColorGenericState, type ThemeColorInput, type ThemeColorInputState, type ThemeColorInputStates, type ThemeColorMuted, type ThemeColorMutedTone, type ThemeColorName, type ThemeColorProviderProps, type ThemeColorScheme, type ThemeColorSchemeKey, type ThemeColorSchemes, type ThemeColorSelectable, type ThemeColorSelectableState, type ThemeColorSelectableStates, type ThemeColorSolid, type ThemeColorSolidTone, type ThemeColorSpot, type ThemeColorSpotKey, type ThemeColorSyntax, type ThemeColorToneKey, type ThemeContextValue, type ThemeFont, type ThemeFontKey, type ThemeFontSize, type ThemeFontWeight, type ThemeFontWeightKey, type ThemeFonts, type ThemeInput, type ThemeLayer, type ThemeProps, type ThemeProviderProps, type ThemeShadow, type TreeContextValue, type TreeItemProps, type TreeProps, type TreeState, type VirtualListChangeOpts, type VirtualListProps, type _ElementSizeListener, type _ElementSizeObserver, type _ElementSizeSubscriber, type _MediaStore };
-//# sourceMappingURL=index.d.ts.map
+
+/** @public */
+export declare function VStack<T extends ElementType = "div">(
+  props: VStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof VStackProps<T>>,
+): JSX.Element;
+
+/** @public */
+export declare interface VStackProps<
+  T extends React.ElementType = "div",
+> extends Pick<GapProps, "gap"> {
+  /**
+   * HTML element or component to render.
+   */
+  as?: T;
+}
+
+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 {};