@sanity/ui 4.0.0-next.0 → 4.0.0-next.2

package/dist/index.d.cts

@@ -1,6 +1,572 @@
-import { A as ThemeColorMutedTone, At as ThemeColorSchemeKey$1, B as ThemeColorBase, C as ThemeColorSpotKey, D as ThemeColorSelectableState, Dt as ThemeColorCardToneKey, E as ThemeColorSelectable, F as ThemeColorCardState, H as ThemeColorToneKey, I as ThemeColorButton, L as ThemeColorButtonState, M as ThemeColorInputState, Mt as ThemeColorStateToneKey, N as ThemeColorInputStates, O as ThemeColorSelectableStates, P as ThemeColorCard, R as ThemeColorButtonStates, S as ThemeColorSpot, T as ThemeColorSolidTone, U as ThemeColorGenericState, V as ThemeColorName, W as ThemeAvatar, b as ThemeColorScheme, d as ThemeColorBuilderOpts, g as Theme$1, j as ThemeColorInput, k as ThemeColorMuted, m as RootTheme$1, pt as CSSObject, u as PartialThemeColorBuilderOpts, v as ThemeInput, w as ThemeColorSolid, wt as ThemeColorAvatarColorKey, x as ThemeColorSchemes, xt as ThemeFontWeightKey$1, y as ThemeColor, z as ThemeColorButtonTones } from "./_chunks/rgba.cjs";
-import { $ as BoxOwnProps, $t as GridAutoRows, A as FlexOwnProps, An as createColorTheme, At as TagType, B as containsOrEqualsElement, Bt as ResponsiveMarginProps, C as StackProps, Cn as ThemeFontKey, Ct as MenuDivider, D as GridOwnProps, Dn as ThemeFonts, Dt as ElementType, E as Grid, En as ThemeFontWeightKey, Et as ComponentType, F as Button, Fn as rgbToHex, Ft as ResponsiveBoxProps, G as isHTMLSelectElement, Gt as GridItemColumn, H as isHTMLButtonElement, Ht as ResponsiveRadiusProps, I as ButtonOwnProps, In as rgbToHsl, It as ResponsiveFlexItemProps, J as TabListProps, Jt as GridItemRow, K as isHTMLTextAreaElement, Kt as GridItemColumnEnd, L as ButtonProps, Ln as rgba, Lt as ResponsiveFlexProps, M as Card, Mn as hslToRgb, Mt as MenuProps, N as CardOwnProps, Nn as multiply, Nt as Delay, O as GridProps, On as ThemeLayer, Ot as EmptyProps, P as CardProps, Pn as parseColor, Pt as ResponsiveBorderProps, Q as Box, Qt as GridAutoFlow, R as usePrefersDark, Rn as screen, Rt as ResponsiveGridItemProps, S as StackOwnProps, Sn as ThemeFont, St as CardTone, T as SpinnerProps, Tn as ThemeFontWeight, Tt as Assign, U as isHTMLElement, Ut as ResponsiveShadowProps, V as isHTMLAnchorElement, Vt as ResponsivePaddingProps, W as isHTMLInputElement, Wt as ResponsiveWidthProps, X as InlineOwnProps, Xt as GridItemRowStart, Y as Inline, Yt as GridItemRowEnd, Z as InlineProps, Zt as GridAutoCols, _ as Text, _n as Styles, _t as PopoverWidth, a as LayerProvider, an as BoxDisplay, at as ButtonTone, b as TextAlign, bn as ThemeColorSchemeKey, bt as PopoverMargins, c as useTheme_v2, cn as BoxSizing, ct as MenuItemOwnProps, d as Tooltip, dn as Radius, dt as MenuGroupOwnProps, en as FlexAlign, et as BoxProps, f as TooltipProps, fn as BaseTheme, ft as MenuGroupProps, g as TextInputType, gn as RootTheme, gt as PopoverUpdateCallback, h as TextInputProps, hn as RGB, ht as PopoverProps, i as PortalProps, in as FlexWrap, it as ButtonTextAlign, j as FlexProps, jn as hexToRgb, jt as Menu, k as Flex, kn as ThemeShadow, kt as Props, l as ThemeProvider, ln as Hotkeys, lt as MenuItemProps, m as TextInputClearButtonProps, mn as HSL, mt as Popover, n as PortalProviderProps, nn as FlexJustify, nt as TabProps, o as LayerProviderProps, on as BoxHeight, ot as ButtonWidth, p as TextInput, pn as BoxShadow, pt as SelectableTone, q as TabList, qt as GridItemColumnStart, r as Portal, rn as FlexValue, rt as ButtonMode, s as useTheme, sn as BoxOverflow, st as MenuItem, t as PortalProvider, tn as FlexDirection, tt as Tab, u as ThemeProviderProps, un as HotkeysProps, ut as MenuGroup, v as TextOwnProps, vn as Theme, vt as Layer, w as Spinner, wn as ThemeFontSize, wt as MenuDividerProps, x as Stack, xn as ThemeColorSyntax, xt as Placement, y as TextProps, yn as ThemeColorButtonModeKey, yt as LayerProps, z as _isEnterToClickElement, zn as studioTheme, zt as ResponsiveGridProps } from "./_chunks/portalProvider.cjs";
+import { A as ThemeColorMutedTone, At as ThemeColorSchemeKey$1, B as ThemeColorBase, C as ThemeColorSpotKey, Ct as ThemeColorSyntax$1, D as ThemeColorSelectableState, Dt as ThemeColorCardToneKey, E as ThemeColorSelectable, Et as ThemeColorButtonModeKey$1, F as ThemeColorCardState, H as ThemeColorToneKey, Ht as HSL$1, I as ThemeColorButton, L as ThemeColorButtonState, M as ThemeColorInputState, Mt as ThemeColorStateToneKey, N as ThemeColorInputStates, O as ThemeColorSelectableStates, P as ThemeColorCard, R as ThemeColorButtonStates, S as ThemeColorSpot, St as ThemeFonts$1, T as ThemeColorSolidTone, U as ThemeColorGenericState, Ut as RGB$1, V as ThemeColorName, W as ThemeAvatar, _ as Theme_v2, _t as ThemeFont$1, a as rgbToHex$1, b as ThemeColorScheme, bt as ThemeFontWeight$1, 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 ThemeFontKey$1, w as ThemeColorSolid, wt as ThemeColorAvatarColorKey, x as ThemeColorSchemes, xt as ThemeFontWeightKey$1, y as ThemeColor, yt as ThemeFontSize$1, z as ThemeColorButtonTones } from "./_chunks/rgba.cjs";
 import { Component, ElementType as ElementType$1, HTMLProps, PropsWithChildren, ReactNode, Ref } 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.
+ */
+declare const createColorTheme: typeof createColorTheme$1;
+/**
+ * @public
+ * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
+ */
+declare const hexToRgb: typeof hexToRgb$1;
+/**
+ * @public
+ * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
+ */
+declare const hslToRgb: typeof hslToRgb$1;
+/**
+ * @public
+ * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
+ */
+declare const multiply: typeof multiply$1;
+/**
+ * @public
+ * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
+ */
+declare const parseColor: typeof parseColor$1;
+/**
+ * @public
+ * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
+ */
+declare const rgbToHex: typeof rgbToHex$1;
+/**
+ * @public
+ * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
+ */
+declare const rgbToHsl: typeof rgbToHsl$1;
+/**
+ * @public
+ * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
+ */
+declare const rgba: typeof rgba$1;
+/**
+ * @public
+ * @deprecated Use `screen` from `@sanity/ui/theme` instead.
+ */
+declare const screen: typeof screen$1;
+/**
+ * @public
+ * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
+ */
+declare const studioTheme: BaseTheme$1;
+/**
+ * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
+ *
+ * @public
+ */
+type Assign<T extends object, U extends object> = Omit<T, keyof U> & U;
+/** @public */
+type EmptyProps = object;
+/** @public */
+type TagType = keyof React.JSX.IntrinsicElements;
+/** @public */
+type ComponentType<P = any> = React.FunctionComponent<P> | React.ComponentClass<P> | React.ExoticComponent<P>;
+/** @public */
+type ElementType<P = any> = TagType | ComponentType<P>;
+/**
+ * Resolves the props of a polymorphic component: the props of the element/component passed to `as`
+ * (defaulting to the component's own element), with the component's own props assigned on top.
+ *
+ * @public
+ */
+type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>, P & {
+  as?: E;
+}>;
+/**
+ * @public
+ */
+type BoxSizing = 'content' | 'border';
+/**
+ * @public
+ */
+type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block';
+/**
+ * @public
+ */
+type BoxHeight = 'stretch' | 'fill';
+/**
+ * @public
+ */
+type BoxOverflow = 'visible' | 'hidden' | 'auto';
+/**
+ * @public
+ */
+type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch';
+/**
+ * @public
+ */
+type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+/**
+ * @public
+ */
+type FlexJustify = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+/**
+ * @public
+ */
+type FlexValue = number | 'none' | 'auto' | 'initial';
+/**
+ * @public
+ */
+type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap';
+/**
+ * @public
+ */
+type GridAutoRows = 'auto' | 'min' | 'max' | 'fr';
+/**
+ * @public
+ */
+type GridAutoCols = 'auto' | 'min' | 'max' | 'fr';
+/**
+ * @public
+ */
+type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense';
+/**
+ * @public
+ */
+type GridItemColumn = 'auto' | 'full' | number;
+/**
+ * @public
+ */
+type GridItemColumnStart = 'auto' | number;
+/**
+ * @public
+ */
+type GridItemColumnEnd = 'auto' | number;
+/**
+ * @public
+ */
+type GridItemRow = 'auto' | 'full' | number;
+/**
+ * @public
+ */
+type GridItemRowStart = 'auto' | number;
+/**
+ * @public
+ */
+type GridItemRowEnd = 'auto' | number;
+/**
+ * @public
+ */
+type Radius = number | 'full';
+/**
+ * @public
+ */
+interface ResponsiveBorderProps {
+  border?: boolean | boolean[];
+  borderTop?: boolean | boolean[];
+  borderRight?: boolean | boolean[];
+  borderBottom?: boolean | boolean[];
+  borderLeft?: boolean | boolean[];
+}
+/**
+ * @public
+ */
+interface ResponsiveBoxProps {
+  display?: BoxDisplay | BoxDisplay[];
+  height?: BoxHeight | BoxHeight[];
+  overflow?: BoxOverflow | BoxOverflow[];
+  sizing?: BoxSizing | BoxSizing[];
+}
+/**
+ * @public
+ */
+interface ResponsiveFlexProps {
+  align?: FlexAlign | FlexAlign[];
+  direction?: FlexDirection | FlexDirection[];
+  justify?: FlexJustify | FlexJustify[];
+  wrap?: FlexWrap | FlexWrap[];
+}
+/**
+ * @public
+ */
+interface ResponsiveFlexItemProps {
+  /** Sets the flex CSS attribute. The property is responsive. */
+  flex?: FlexValue | FlexValue[];
+}
+/**
+ * @public
+ */
+interface ResponsiveGridProps {
+  autoRows?: GridAutoRows | GridAutoRows[];
+  autoCols?: GridAutoCols | GridAutoCols[];
+  autoFlow?: GridAutoFlow | GridAutoFlow[];
+  /**
+   * @deprecated Use `gridTemplateColumns` instead.
+   */
+  columns?: never;
+  gridTemplateColumns?: number | number[];
+  gap?: number | number[];
+  gapX?: number | number[];
+  gapY?: number | number[];
+  /**
+   * @deprecated Use `gridTemplateRows` instead.
+   */
+  rows?: never;
+  gridTemplateRows?: number | number[];
+}
+/**
+ * @public
+ */
+interface ResponsiveGridItemProps {
+  gridColumn?: GridItemColumn | GridItemColumn[];
+  /**
+   * @deprecated Use `gridColumn` instead.
+   */
+  column?: never;
+  gridColumnStart?: GridItemColumnStart | GridItemColumnStart[];
+  /**
+   * @deprecated Use `gridColumnStart` instead.
+   */
+  columnStart?: never;
+  gridColumnEnd?: GridItemColumnEnd | GridItemColumnEnd[];
+  /**
+   * @deprecated Use `gridColumnEnd` instead.
+   */
+  columnEnd?: never;
+  gridRow?: GridItemRow | GridItemRow[];
+  /**
+   * @deprecated Use `gridRow` instead.
+   */
+  row?: never;
+  gridRowStart?: GridItemRowStart | GridItemRowStart[];
+  /**
+   * @deprecated Use `gridRowStart` instead.
+   */
+  rowStart?: never;
+  gridRowEnd?: GridItemRowEnd | GridItemRowEnd[];
+  /**
+   * @deprecated Use `gridRowEnd` instead.
+   */
+  rowEnd?: never;
+}
+/**
+ * @public
+ */
+interface ResponsiveMarginProps {
+  /** Applies margins to all sides. The property is responsive. */
+  margin?: number | number[];
+  /** Applies margins to the left and right sides. The property is responsive. */
+  marginX?: number | number[];
+  /** Applies margins to the top and bottom sides. The property is responsive. */
+  marginY?: number | number[];
+  marginTop?: number | number[];
+  marginRight?: number | number[];
+  marginBottom?: number | number[];
+  marginLeft?: number | number[];
+}
+/**
+ * @public
+ */
+interface ResponsivePaddingProps {
+  padding?: number | number[];
+  paddingX?: number | number[];
+  paddingY?: number | number[];
+  paddingTop?: number | number[];
+  paddingRight?: number | number[];
+  paddingBottom?: number | number[];
+  paddingLeft?: number | number[];
+}
+/**
+ * @public
+ */
+interface ResponsiveRadiusProps {
+  radius?: Radius | Radius[];
+}
+/**
+ * @public
+ */
+interface ResponsiveShadowProps {
+  shadow?: number | number[];
+}
+/**
+ * @public
+ */
+interface ResponsiveWidthProps {
+  width?: number | 'auto' | (number | 'auto')[];
+}
+/**
+ * @public
+ */
+type Delay = number | Partial<{
+  open: number;
+  close: number;
+}>;
+/**
+ * The props that `Box` adds on top of the element it renders as.
+ *
+ * @public
+ */
+interface BoxOwnProps extends ResponsiveFlexItemProps, ResponsiveBoxProps, ResponsiveGridItemProps, ResponsiveMarginProps, ResponsivePaddingProps {
+  forwardedAs?: ElementType;
+}
+/**
+ * @public
+ */
+type BoxProps<E extends ElementType = 'div'> = Props<BoxOwnProps, E>;
+/**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
+ * @public
+ */
+declare const Box: <E extends ElementType = 'div'>(props: BoxProps<E>) => React.JSX.Element;
+/**
+ * @public
+ */
+type CardTone = ThemeColorCardToneKey | 'inherit';
+/**
+ * Placement of floating UI elements.
+ *
+ * @public
+ */
+type Placement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+/**
+ * @beta
+ */
+type PopoverMargins = [number, number, number, number];
+/**
+ * @public
+ */
+interface LayerProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements;
+  /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
+  onActivate?: (props: {
+    activeElement: HTMLElement | null;
+  }) => void;
+  zOffset?: number | number[];
+}
+/**
+ * @public
+ */
+declare const Layer: import("react").ForwardRefExoticComponent<Omit<LayerProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** @beta */
+type PopoverUpdateCallback = () => void;
+/** @public */
+type PopoverWidth = number | 'auto';
+/** @public */
+interface PopoverProps extends Omit<LayerProps, 'as'>, ResponsiveRadiusProps, ResponsiveShadowProps {
+  /** @beta */
+  __unstable_margins?: PopoverMargins;
+  /**
+   * Whether the popover should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean;
+  arrow?: boolean;
+  /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
+  boundaryElement?: never;
+  children?: React.JSX.Element;
+  /**
+     * When `true`, prevent overflow within the current boundary:
+     * - by flipping on its side axis
+     * - by resizing
+    /*
+     * Note that:
+     * - setting `preventOverflow` to `true` also prevents overflow on its side axis
+     * - setting `matchReferenceWidth` to `true` also causes the popover to resize
+     *
+     * @defaultValue false
+     */
+  constrainSize?: boolean;
+  content?: React.ReactNode;
+  disabled?: boolean;
+  fallbackPlacements?: Placement[];
+  floatingBoundary?: HTMLElement | null;
+  /**
+   * When `true`, set the maximum width to match the reference element, and also prevent overflow within
+   * the current boundary by resizing.
+   *
+   * Note that setting `constrainSize` to `true` also causes the popover to resize
+   *
+   * @defaultValue false
+   */
+  matchReferenceWidth?: boolean;
+  /**
+   * When true, blocks all pointer interaction with elements beneath the popover until closed.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  modal?: boolean;
+  open?: boolean;
+  overflow?: BoxOverflow;
+  padding?: number | number[];
+  placement?: Placement;
+  /**
+   * When 'flip' (default), the placement is determined from the initial placement and the
+   * fallback placements in order. Whichever fits in the viewport first.
+   *
+   * When 'autoPlacement', the initial placement and all fallback placements are evaluated
+   * and the placement with the most viewport space available.
+   *
+   * Option is only relevant if either `constrainSize` or `preventOverflow` is `true`
+   */
+  placementStrategy?: 'flip' | 'autoPlacement';
+  /** Whether or not to render the popover in a portal element. */
+  portal?: boolean | string;
+  preventOverflow?: boolean;
+  referenceBoundary?: HTMLElement | null;
+  /**
+   * When defined, the popover will be positioned relative to this element.
+   * The children of the popover won't be rendered.
+   */
+  referenceElement?: HTMLElement | null;
+  scheme?: ThemeColorSchemeKey$1;
+  tone?: CardTone;
+  /** @beta */
+  updateRef?: Ref<PopoverUpdateCallback | undefined>;
+  width?: PopoverWidth | PopoverWidth[];
+}
+/**
+ * The `Popover` component is used to display some content on top of another.
+ *
+ * @public
+ */
+declare const Popover: import("react").ForwardRefExoticComponent<Omit<PopoverProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "content" | "width">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @public
+ */
+type ButtonMode = ThemeColorButtonModeKey$1;
+/**
+ * @public
+ */
+type ButtonTextAlign = 'left' | 'right' | 'center';
+/**
+ * @public
+ */
+type ButtonTone = ThemeColorStateToneKey;
+/**
+ * @public
+ */
+type ButtonWidth = 'fill';
+/**
+ * @public
+ */
+interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+  fontSize?: number | number[];
+  mode?: ButtonMode;
+  icon?: React.ElementType | React.ReactNode;
+  iconRight?: React.ElementType | React.ReactNode;
+  justify?: FlexJustify | FlexJustify[];
+  /**
+   * @beta Do not use in production, as this might change.
+   */
+  loading?: boolean;
+  selected?: boolean;
+  /**
+   * @deprecated Use `gap` instead.
+   */
+  space?: never;
+  gap?: number | number[];
+  muted?: boolean;
+  text?: React.ReactNode;
+  textAlign?: ButtonTextAlign;
+  textWeight?: ThemeFontWeightKey$1;
+  tone?: ButtonTone;
+  type?: 'button' | 'reset' | 'submit';
+  width?: ButtonWidth;
+}
+/**
+ * @public
+ */
+type ButtonProps<E extends ElementType = 'button'> = Props<ButtonOwnProps, E>;
+/**
+ * @public
+ */
+declare const Button: <E extends ElementType = 'button'>(props: ButtonProps<E>) => React.JSX.Element;
 /**
  * @public
  */
@@ -145,9 +711,9 @@ interface BreadcrumbsProps {
   separator?: React.ReactNode;
   gap?: number | number[];
   /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   * @deprecated Use `gap` instead.
    */
-  space?: number | number[];
+  space?: never;
 }
 /**
  * @beta
@@ -229,6 +795,59 @@ declare function DialogProvider(props: DialogProviderProps): React.JSX.Element;
  * @beta
  */
 declare function useDialog(): DialogContextValue;
+/**
+ * @public
+ */
+interface HotkeysProps {
+  fontSize?: number | number[];
+  gap?: number | number[];
+  padding?: number | number[];
+  radius?: Radius | Radius[];
+  /**
+   * @deprecated Use `gap` instead.
+   */
+  space?: never;
+  keys?: string[];
+}
+/**
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
+ *
+ * @public
+ */
+declare const Hotkeys: import("react").ForwardRefExoticComponent<HotkeysProps & Omit<import("react").HTMLProps<HTMLElement>, "as" | "ref" | "size"> & import("react").RefAttributes<HTMLElement>>;
+/**
+ * @public
+ */
+interface MenuProps extends ResponsivePaddingProps {
+  /**
+   * @deprecated Use `shouldFocus="first"` instead.
+   */
+  'focusFirst'?: never;
+  /**
+   * @deprecated Use `shouldFocus="last"` instead.
+   */
+  'focusLast'?: never;
+  'onClickOutside'?: (event: MouseEvent) => void;
+  'onEscape'?: () => void;
+  'onItemClick'?: () => void;
+  'onItemSelect'?: (index: number) => void;
+  'originElement'?: HTMLElement | null;
+  'registerElement'?: (el: HTMLElement) => () => void;
+  'shouldFocus'?: 'first' | 'last' | null;
+  'gap'?: number | number[];
+  /**
+   * @deprecated Use `gap` instead.
+   */
+  'space'?: never;
+  'aria-labelledby'?: string;
+  'onBlurCapture'?: (event: FocusEvent) => void;
+}
+/**
+ * The `Menu` component is a building block for application menus.
+ *
+ * @public
+ */
+declare const Menu: import("react").ForwardRefExoticComponent<Omit<MenuProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "height" | "role" | "tabIndex">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * @public
  */
@@ -240,7 +859,7 @@ interface MenuButtonProps {
   /**
    * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
-  boundaryElement?: HTMLElement;
+  boundaryElement?: never;
   button: React.JSX.Element;
   id: string;
   menu?: React.JSX.Element;
@@ -249,25 +868,25 @@ interface MenuButtonProps {
   /**
    * @deprecated Use `popover={{placement: 'top'}}` instead.
    */
-  placement?: Placement;
+  placement?: never;
   popover?: Omit<PopoverProps, 'content' | 'open'>;
   /**
    * @deprecated Use `popover={{scheme: 'dark'}}` instead.
    */
-  popoverScheme?: ThemeColorSchemeKey$1;
+  popoverScheme?: never;
   /**
    * @deprecated Use `popover={{radius: 2}}` instead.
    */
-  popoverRadius?: Radius | Radius[];
+  popoverRadius?: never;
   /**
    * @beta Do not use in production.
    * @deprecated Use `popover={{portal: true}}` instead.
    */
-  portal?: boolean;
+  portal?: never;
   /**
    * @deprecated Use `popover={{preventOverflow: true}}` instead.
    */
-  preventOverflow?: boolean;
+  preventOverflow?: never;
 }
 /**
  * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
@@ -275,6 +894,70 @@ interface MenuButtonProps {
  * @public
  */
 declare const MenuButton: import("react").ForwardRefExoticComponent<MenuButtonProps & import("react").RefAttributes<HTMLButtonElement | null>>;
+/**
+ * @public
+ */
+type MenuDividerProps<E extends ElementType = 'hr'> = Props<EmptyProps, E>;
+/**
+ * @public
+ */
+declare const MenuDivider: <E extends ElementType = 'hr'>(props: MenuDividerProps<E>) => React.JSX.Element;
+/**
+ * @public
+ */
+type SelectableTone = ThemeColorStateToneKey;
+/**
+ * @public
+ */
+interface MenuGroupOwnProps {
+  fontSize?: number | number[];
+  icon?: React.ElementType | React.ReactNode;
+  menu?: Omit<MenuProps, 'onClickOutside' | 'onEscape' | 'onItemClick' | 'onKeyDown' | 'onMouseEnter' | 'registerElement' | 'shouldFocus' | 'onBlurCapture'>;
+  padding?: number | number[];
+  popover?: Omit<PopoverProps, 'content' | 'open'>;
+  radius?: Radius | Radius[];
+  gap?: number | number[];
+  /**
+   * @deprecated Use `gap` instead.
+   */
+  space?: never;
+  text: React.ReactNode;
+  tone?: SelectableTone;
+}
+/**
+ * @public
+ */
+type MenuGroupProps<E extends ElementType = 'button'> = Props<MenuGroupOwnProps, E>;
+/**
+ * @public
+ */
+declare const MenuGroup: <E extends ElementType = 'button'>(props: MenuGroupProps<E>) => React.JSX.Element;
+/**
+ * @public
+ */
+interface MenuItemOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+  fontSize?: number | number[];
+  hotkeys?: string[];
+  icon?: React.ElementType | React.ReactNode;
+  iconRight?: React.ElementType | React.ReactNode;
+  pressed?: boolean;
+  selected?: boolean;
+  gap?: number | number[];
+  /**
+   * @deprecated Use `gap` instead.
+   */
+  space?: never;
+  text?: React.ReactNode;
+  tone?: SelectableTone;
+}
+/**
+ * @public
+ */
+type MenuItemProps<E extends ElementType = 'button'> = Props<MenuItemOwnProps, E>;
+/**
+ * @public
+ */
+declare const MenuItem: <E extends ElementType = 'button'>(props: MenuItemProps<E>) => React.JSX.Element;
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
@@ -310,32 +993,84 @@ interface HeadingSkeletonProps extends SkeletonProps {
   size?: number | number[];
 }
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+interface CodeSkeletonProps extends SkeletonProps {
+  size?: number | number[];
+}
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+declare const TextSkeleton: import("react").ForwardRefExoticComponent<Omit<TextSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "height" | "size">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+declare const LabelSkeleton: import("react").ForwardRefExoticComponent<Omit<LabelSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "height" | "size">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+declare const HeadingSkeleton: import("react").ForwardRefExoticComponent<Omit<HeadingSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "height" | "size">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+declare const CodeSkeleton: import("react").ForwardRefExoticComponent<Omit<CodeSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "height" | "size">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @public
+ */
+interface 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
+ */
+declare const Tab: import("react").ForwardRefExoticComponent<Omit<TabProps & Omit<import("react").HTMLProps<HTMLButtonElement>, "aria-controls" | "as" | "id" | "label" | "type" | "width">, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * @public
  */
-interface CodeSkeletonProps extends SkeletonProps {
-  size?: number | number[];
+interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {
+  /**
+   * @deprecated Use `gap` instead.
+   */
+  space?: never;
+  /** The spacing between children. */
+  gap?: number | number[];
 }
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-declare const TextSkeleton: import("react").ForwardRefExoticComponent<Omit<TextSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "height" | "size">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type InlineProps<E extends ElementType = 'div'> = Props<InlineOwnProps, E>;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * The `Inline` component is a layout utility for aligning and spacing items horizontally.
+ *
+ * @public
  */
-declare const LabelSkeleton: import("react").ForwardRefExoticComponent<Omit<LabelSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "height" | "size">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const Inline: <E extends ElementType = 'div'>(props: InlineProps<E>) => React.JSX.Element;
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-declare const HeadingSkeleton: import("react").ForwardRefExoticComponent<Omit<HeadingSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "height" | "size">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+interface TabListProps extends Omit<InlineOwnProps, 'height'> {
+  children: Array<React.JSX.Element | null | undefined | false>;
+}
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-declare const CodeSkeleton: import("react").ForwardRefExoticComponent<Omit<CodeSkeletonProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "height" | "size">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare const TabList: import("react").ForwardRefExoticComponent<Omit<TabListProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "height">, "ref"> & import("react").RefAttributes<unknown>>;
 /**
  * @public
  */
@@ -428,9 +1163,9 @@ declare function useToast(): ToastContextValue;
 interface TreeProps {
   gap?: number | number[];
   /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   * @deprecated Use `gap` instead.
    */
-  space?: number | number[];
+  space?: never;
 }
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -457,9 +1192,9 @@ interface TreeItemProps {
   padding?: number | number[];
   gap?: number | number[];
   /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   * @deprecated Use `gap` instead.
    */
-  space?: number | number[];
+  space?: never;
   text?: React.ReactNode;
   weight?: ThemeFontWeightKey$1;
 }
@@ -490,9 +1225,9 @@ interface TreeContextValue {
   setFocusedElement: (focusedElement: HTMLElement | null) => void;
   gap: number | number[];
   /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   * @deprecated Use `gap` instead.
    */
-  space: number | number[];
+  space?: never;
   state: TreeState;
 }
 /**
@@ -507,6 +1242,38 @@ declare function _raf(fn: () => void): () => void;
  * @internal
  */
 declare function _raf2(fn: () => void): () => void;
+/**
+ * @internal
+ */
+declare function _isEnterToClickElement(element: HTMLElement): boolean;
+/**
+ * @internal
+ */
+declare function isHTMLElement(node: unknown): node is HTMLElement;
+/**
+ * @internal
+ */
+declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement;
+/**
+ * @internal
+ */
+declare function isHTMLInputElement(element: unknown): element is HTMLInputElement;
+/**
+ * @internal
+ */
+declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement;
+/**
+ * @internal
+ */
+declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement;
+/**
+ * @internal
+ */
+declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement;
+/**
+ * @internal
+ */
+declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean;
 /**
  * @internal
  */
@@ -537,7 +1304,7 @@ type ArrayPropPrimitive = string | number | boolean | undefined | null;
  * @deprecated instead of `useArrayProp(width)` use `Array.isArray(width) ? width : [width]` instead
  * @beta
  */
-declare function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(val: T | T[] | undefined, defaultVal?: T[]): T[];
+declare function useArrayProp(_val?: never, _defaultVal?: never): never;
 /**
  * @public
  */
@@ -561,7 +1328,7 @@ type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[];
  * return <button ref={buttonRef} />
  * ```
  */
-declare function useClickOutside(listener: ClickOutsideListener, elementsArg?: ClickOutsideElements, boundaryElement?: HTMLElement | null): (el: HTMLElement | null) => void;
+declare function useClickOutside(_listener?: never, _elementsArg?: never, _boundaryElement?: never): never;
 /**
  * @public
  */
@@ -588,7 +1355,7 @@ declare function useCustomValidity(ref: {
  *
  * @deprecated Use `useElementSize` instead
  */
-declare function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null;
+declare function useElementRect(_element?: never): never;
 /**
  * @beta
  */
@@ -640,7 +1407,7 @@ declare function useElementSize(element: HTMLElement | null): ElementSize | null
  * +useImperativeHandle(forwardedRef, () => ref.current)
  * ```
  */
-declare function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.RefObject<T | null>;
+declare function useForwardedRef(_ref?: never): never;
 /**
  * Adds global keydown event listener to the window.
  *
@@ -669,6 +1436,18 @@ interface _MediaStore {
  * @beta
  */
 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
+ */
+declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean;
 /**
  * Returns true if motion should be reduced
  *
@@ -734,7 +1513,7 @@ interface AvatarCounterProps {
   count: number;
   size?: AvatarSize | AvatarSize[];
   /** @deprecated No longer supported. */
-  tone?: 'navbar';
+  tone?: never;
 }
 /**
  * @public
@@ -748,7 +1527,7 @@ interface AvatarStackProps {
   maxLength?: number;
   size?: AvatarSize | AvatarSize[];
   /** @deprecated No longer supported. */
-  tone?: 'navbar';
+  tone?: never;
 }
 /**
  * @public
@@ -770,7 +1549,7 @@ interface ResponsiveAvatarSizeStyleProps {
  * @public
  * @deprecated No longer used
  */
-type BadgeMode = 'default' | 'outline';
+type BadgeMode = never;
 /**
  * @public
  */
@@ -781,7 +1560,7 @@ type BadgeTone = ThemeColorStateToneKey;
 interface BadgeOwnProps extends BoxOwnProps, ResponsiveRadiusProps {
   fontSize?: number | number[];
   /** @deprecated No longer used. */
-  mode?: BadgeMode;
+  mode?: never;
   tone?: BadgeTone;
 }
 /**
@@ -794,6 +1573,38 @@ type BadgeProps<E extends ElementType = 'div'> = Props<BadgeOwnProps, E>;
  * @public
  */
 declare const Badge: <E extends ElementType = 'div'>(props: BadgeProps<E>) => React.JSX.Element;
+/**
+ * @public
+ */
+interface CardOwnProps extends BoxOwnProps, ResponsiveBorderProps, ResponsiveRadiusProps, ResponsiveShadowProps {
+  /**
+   * Do not use in production.
+   * @beta
+   */
+  __unstable_checkered?: boolean;
+  /**
+   * Do not use in production.
+   * @beta
+   */
+  __unstable_focusRing?: boolean;
+  disabled?: boolean;
+  muted?: boolean;
+  pressed?: boolean;
+  scheme?: ThemeColorSchemeKey$1;
+  selected?: boolean;
+  tone?: CardTone;
+}
+/**
+ * @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
+ */
+declare const Card: <E extends ElementType = 'div'>(props: CardProps<E>) => React.JSX.Element;
 /**
  * @internal
  */
@@ -853,6 +1664,40 @@ declare const Container: <E extends ElementType = 'div'>(props: ContainerProps<E
 interface ResponsiveWidthStyleProps {
   $width: (number | 'auto')[];
 }
+/**
+ * @public
+ */
+interface FlexOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveFlexProps, ResponsiveFlexItemProps {
+  gap?: number | number[];
+}
+/**
+ * @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
+ */
+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
+ */
+declare const Grid: <E extends ElementType = 'div'>(props: GridProps<E>) => React.JSX.Element;
+/**
+ * @public
+ */
+type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial';
 /**
  * @public
  */
@@ -944,9 +1789,9 @@ interface SelectProps {
   padding?: number | number[];
   radius?: Radius | Radius[];
   /**
-   * @deprecated Use `gap` instead. `space` will be removed in v4.
+   * @deprecated Use `gap` instead.
    */
-  space?: number | number[];
+  space?: never;
   customValidity?: string;
 }
 /**
@@ -955,6 +1800,39 @@ interface SelectProps {
  * @public
  */
 declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectProps & Omit<import("react").HTMLProps<HTMLSelectElement>, "as">, "ref"> & import("react").RefAttributes<HTMLSelectElement>>;
+/**
+ * @public
+ */
+interface SpinnerProps {
+  muted?: boolean;
+  size?: number | number[];
+}
+/**
+ * Indicate that something is loading for an indeterminate amount of time.
+ *
+ * @public
+ */
+declare const Spinner: import("react").ForwardRefExoticComponent<Omit<SpinnerProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "size">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * @public
+ */
+interface StackOwnProps extends BoxOwnProps {
+  gap?: number | number[];
+  /**
+   * @deprecated Use `gap` instead.
+   */
+  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
+ */
+declare const Stack: <E extends ElementType = 'div'>(props: StackProps<E>) => React.JSX.Element;
 /**
  * @public
  */
@@ -969,6 +1847,33 @@ interface SwitchProps {
  * @public
  */
 declare const Switch: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").HTMLProps<HTMLInputElement>, "as" | "type"> & SwitchProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+/**
+ * @public
+ */
+interface TextOwnProps {
+  accent?: boolean;
+  align?: TextAlign | TextAlign[];
+  /** When `true` the text color will be muted. */
+  muted?: boolean;
+  size?: number | number[];
+  /**
+   * Controls how overflowing text is treated.
+   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
+   * @beta
+   */
+  textOverflow?: 'ellipsis';
+  weight?: ThemeFontWeightKey$1;
+}
+/**
+ * @public
+ */
+type TextProps<E extends ElementType = 'div'> = Props<TextOwnProps, E>;
+/**
+ * The `Text` component is an agile, themed typographic element.
+ *
+ * @public
+ */
+declare const Text: <E extends ElementType = 'div'>(props: TextProps<E>) => React.JSX.Element;
 /**
  * @public
  */
@@ -989,6 +1894,97 @@ interface TextAreaProps extends ResponsiveRadiusProps {
  * @public
  */
 declare const TextArea: import("react").ForwardRefExoticComponent<Omit<TextAreaProps & Omit<import("react").HTMLProps<HTMLTextAreaElement>, "as">, "ref"> & import("react").RefAttributes<HTMLTextAreaElement>>;
+/**
+ * @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 {
+  /**
+   * @beta
+   */
+  __unstable_disableFocusRing?: boolean;
+  border?: boolean;
+  /**
+   * @beta
+   */
+  clearButton?: boolean | TextInputClearButtonProps;
+  customValidity?: string;
+  fontSize?: number | number[];
+  icon?: React.ElementType | React.ReactNode;
+  iconRight?: React.ElementType | React.ReactNode;
+  /**
+   * @beta
+   */
+  onClear?: () => void;
+  padding?: number | number[];
+  prefix?: React.ReactNode;
+  radius?: Radius | Radius[];
+  /**
+   * @deprecated Use `gap` instead.
+   */
+  space?: never;
+  gap?: number | number[];
+  suffix?: React.ReactNode;
+  type?: TextInputType;
+  weight?: ThemeFontWeightKey$1;
+}
+/**
+ * Single line text input.
+ *
+ * @public
+ */
+declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps & Omit<import("react").HTMLProps<HTMLInputElement>, "as" | "prefix" | "type">, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+/**
+ * @public
+ */
+interface TooltipProps extends Omit<LayerProps, 'as'> {
+  /** @deprecated Use `fallbackPlacements` instead. */
+  allowedAutoPlacements?: never;
+  arrow?: boolean;
+  boundaryElement?: HTMLElement | null;
+  children?: React.JSX.Element;
+  content?: React.ReactNode;
+  disabled?: boolean;
+  fallbackPlacements?: Placement[];
+  padding?: number | number[];
+  placement?: Placement;
+  /** Whether or not to render the tooltip in a portal element. */
+  portal?: boolean | string;
+  radius?: number | number[];
+  scheme?: ThemeColorSchemeKey$1;
+  shadow?: number | number[];
+  /**
+   * Adds a delay to open or close the tooltip.
+   *
+   * If only a `number` is passed, it will be used for both opening and closing.
+   *
+   * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+   *
+   * @public
+   * @defaultValue 0
+   */
+  delay?: Delay;
+  /**
+   * Whether the tooltip should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean;
+}
+/**
+ * Tooltips display information when hovering, focusing or tapping.
+ *
+ * @public
+ */
+declare const Tooltip: import("react").ForwardRefExoticComponent<Omit<TooltipProps & Omit<import("react").HTMLProps<HTMLDivElement>, "as" | "children" | "content">, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * @beta
  */
@@ -1117,6 +2113,19 @@ interface ThemeColorProviderProps {
  * @public
  */
 declare function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element;
+/**
+ * @public
+ */
+interface ThemeProviderProps {
+  children?: React.ReactNode;
+  scheme?: ThemeColorSchemeKey$1;
+  theme?: RootTheme$1;
+  tone?: ThemeColorCardToneKey;
+}
+/**
+ * @public
+ */
+declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element;
 /**
  * @public
  */
@@ -1131,6 +2140,14 @@ interface ThemeContextValue {
  * @public
  */
 declare function useRootTheme(): ThemeContextValue;
+/**
+ * @public
+ */
+declare function useTheme(): Theme$1;
+/**
+ * @public
+ */
+declare function useTheme_v2(): Theme_v2;
 /** @internal */
 declare const Arrow: import("react").ForwardRefExoticComponent<Omit<{
   width: number;
@@ -1161,13 +2178,9 @@ interface BoundaryElementContextValue {
 declare function useBoundaryElement(): BoundaryElementContextValue;
 /**
  * @internal
- * @deprecated this component will be removed in the next major release
+ * @deprecated ConditionalWrapper was removed in @sanity/ui v4. Inline the conditional wrapping logic instead.
  */
-declare function ConditionalWrapper({ children, condition, wrapper }: {
-  children: React.ReactNode;
-  condition: boolean;
-  wrapper: (children: React.ReactNode) => React.ReactNode;
-}): React.ReactNode;
+declare function ConditionalWrapper(_props?: never): never;
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
@@ -1208,6 +2221,17 @@ declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryS
   componentDidCatch(error: Error, info: React.ErrorInfo): void;
   render(): React.ReactNode;
 }
+/**
+ * @public
+ */
+interface LayerProviderProps {
+  children?: React.ReactNode;
+  zOffset?: number | number[];
+}
+/**
+ * @public
+ */
+declare function LayerProvider(props: LayerProviderProps): React.JSX.Element;
 /** @public */
 interface LayerContextValue {
   version: 0.0;
@@ -1221,6 +2245,39 @@ interface LayerContextValue {
  * @public
  */
 declare function useLayer(): LayerContextValue;
+/**
+ * @public
+ */
+interface PortalProps {
+  children: React.ReactNode;
+  /**
+   * @beta This API might change. DO NOT USE IN PRODUCTION.
+   */
+  __unstable_name?: string;
+}
+/**
+ * @public
+ */
+declare function Portal(props: PortalProps): React.ReactPortal | null;
+/**
+ * @public
+ */
+interface PortalProviderProps {
+  /**
+   * @deprecated Use `<BoundaryElementProvider element={...} />` instead
+   */
+  boundaryElement?: HTMLElement | null;
+  children: React.ReactNode;
+  element?: HTMLElement | null;
+  /**
+   * @beta
+   */
+  __unstable_elements?: Record<string, HTMLElement | null | undefined>;
+}
+/**
+ * @public
+ */
+declare function PortalProvider(props: PortalProviderProps): React.JSX.Element;
 /**
  * @public
  */