@sanity/ui 3.1.12-canary.0 → 3.1.12

package/dist/index.d.ts

@@ -1,538 +1,2768 @@
-import { $ as VirtualListProps, $n as BadgeMode, $r as hslToRgb, $t as AvatarRootStyleProps, A as TextInputClearButtonProps, An as GridItemColumnEnd, Ar as ThemeColorScheme, At as InlineProps, B as StackProps, Bn as FlexJustify, Br as ThemeColorSyntax, Bt as Code, C as TooltipDelayGroupProvider, Cn as HotkeysProps, Cr as ThemeColorGenericState, Ct as BoundaryElementProviderProps, D as Tooltip, Dn as PopoverMargins, Dr as ThemeColorMuted, Dt as KBD, E as TooltipDelayGroupContextValue, En as Radius, Er as ThemeColorInputStates, Et as LabelProps, F as Text, Fn as GridAutoCols, Fr as ThemeColorSelectableStates, Ft as Flex, G as Radio, Gn as ButtonMode, Gr as ThemeFontWeight, Gt as Card, H as SpinnerProps, Hn as FlexWrap, Hr as ThemeFont, Ht as Checkbox, I as TextProps, In as GridAutoFlow, Ir as ThemeColorSolid, It as FlexProps, J as PopoverProps, Jn as ButtonWidth, Jr as ThemeInput, Jt as ButtonProps, K as RadioProps, Kn as ButtonTextAlign, Kr as ThemeFontWeightKey, Kt as CardProps, L as Switch, Ln as GridAutoRows, Lr as ThemeColorSolidTone, Lt as ResponsiveWidthStyleProps, M as TextInputType, Mn as GridItemRow, Mr as ThemeColorSchemes, Mt as HeadingProps, N as TextArea, Nn as GridItemRowEnd, Nr as ThemeColorSelectable, Nt as Grid, O as TooltipProps, On as Placement, Or as ThemeColorMutedTone, Ot as KBDProps, P as TextAreaProps, Pn as GridItemRowStart, Pr as ThemeColorSelectableState, Pt as GridProps, Q as VirtualListChangeOpts, Qn as BoxSizing, Qr as hexToRgb, Qt as BoxProps, R as SwitchProps, Rn as FlexAlign, Rr as ThemeColorSpot, Rt as Container, S as useTooltipDelayGroup, Sn as Hotkeys, Sr as ThemeColorCardState, St as BoundaryElementProvider, T as TooltipDelayGroupContext, Tn as SelectableTone, Tr as ThemeColorInputState, Tt as Label, U as Select, Un as DialogPosition, Ur as ThemeFontKey, Ut as CheckboxProps, V as Spinner, Vn as FlexValue, Vr as ThemeColorToneKey, Vt as CodeProps, W as SelectProps, Wn as CardTone, Wr as ThemeFontSize, Wt as CardStyleProps, X as PopoverWidth, Xn as BoxHeight, Xr as ThemeShadow, Xt as BadgeProps, Y as PopoverUpdateCallback, Yn as BoxDisplay, Yr as ThemeLayer, Yt as Badge, Z as VirtualList, Zn as BoxOverflow, Zr as createColorTheme, Zt as Box, _ as TabProps, _n as ResponsiveMarginProps, _r as ThemeColorButtonModeKey, _t as ElementQuery, a as usePrefersDark, ai as screen, an as Avatar, ar as BoxShadow, at as PortalProviderProps, b as MenuGroup, bn as ResponsiveShadowProps, br as ThemeColorButtonTones, bt as useBoundaryElement, c as isHTMLAnchorElement, cn as Menu, cr as RGB, ct as useLayer, d as isHTMLInputElement, dn as ResponsiveBorderProps, dr as Theme, dt as LayerProviderProps, ei as multiply, en as ResponsiveAvatarSizeStyleProps, er as BadgeTone, et as SrOnly, f as isHTMLSelectElement, fn as ResponsiveBoxProps, fr as ThemeAvatar, ft as Layer, g as Tab, gn as ResponsiveGridProps, gr as ThemeColorButton, gt as ErrorBoundaryState, h as TabListProps, hn as ResponsiveGridItemProps, hr as ThemeColorBuilderOpts, ht as ErrorBoundaryProps, i as ThemeProviderProps, ii as rgba, in as AvatarCounterProps, ir as BaseTheme, it as PortalProvider, j as TextInputProps, jn as GridItemColumnStart, jr as ThemeColorSchemeKey, jt as Heading, k as TextInput, kn as GridItemColumn, kr as ThemeColorName, kt as Inline, l as isHTMLButtonElement, ln as MenuProps, lr as RootTheme, lt as LayerContextValue, m as TabList, mn as ResponsiveFlexProps, mr as ThemeColorBase, mt as ErrorBoundary, n as useTheme_v2, ni as rgbToHex, nn as AvatarStackProps, nr as AvatarSize, nt as usePortal, o as _isEnterToClickElement, oi as studioTheme, on as AvatarProps, or as HSL, ot as Portal, p as isHTMLTextAreaElement, pn as ResponsiveFlexItemProps, pr as ThemeColor, pt as LayerProps, q as Popover, qn as ButtonTone, qr as ThemeFonts, qt as Button, r as ThemeProvider, ri as rgbToHsl, rn as AvatarCounter, rr as AvatarStatus, rt as PortalContextValue, s as containsOrEqualsElement, sn as MenuDivider, sr as PartialThemeColorBuilderOpts, st as PortalProps, t as useTheme, ti as parseColor, tn as AvatarStack, tr as AvatarPosition, tt as SrOnlyProps, u as isHTMLElement, un as Delay, ur as Styles, ut as LayerProvider, v as MenuItem, vn as ResponsivePaddingProps, vr as ThemeColorButtonState, vt as MediaQueryProps, w as TooltipDelayGroupProviderProps, wn as TextAlign, wr as ThemeColorInput, wt as Arrow, x as MenuGroupProps, xn as ResponsiveWidthProps, xr as ThemeColorCard, xt as BoundaryElementContextValue, y as MenuItemProps, yn as ResponsiveRadiusProps, yr as ThemeColorButtonStates, yt as ConditionalWrapper, z as Stack, zn as FlexDirection, zr as ThemeColorSpotKey, zt as ContainerProps } from "./_chunks-dts/useTheme.js";
-import { CSSObject, RootTheme as RootTheme$1, Theme as Theme$1, ThemeColorCardToneKey, ThemeColorSchemeKey as ThemeColorSchemeKey$1, ThemeFontWeightKey as ThemeFontWeightKey$1 } from "@sanity/ui/theme";
-import * as react232 from "react";
-import { ElementType, HTMLProps, ReactNode, Ref } from "react";
+import {BaseTheme as BaseTheme_2} from '@sanity/ui/theme'
+import {Component} from 'react'
+import {Context} from 'react'
+import {createColorTheme as createColorTheme_2} from '@sanity/ui/theme'
+import {CSSObject} from '@sanity/ui/theme'
+import {DetailedHTMLProps} from 'react'
+import {ElementType} from 'react'
+import {FastOmit} from 'styled-components'
+import {ForwardRefExoticComponent} from 'react'
+import {hexToRgb as hexToRgb_2} from '@sanity/ui/theme'
+import {HSL as HSL_2} from '@sanity/ui/theme'
+import {hslToRgb as hslToRgb_2} from '@sanity/ui/theme'
+import {HTMLAttributes} from 'react'
+import {HTMLProps} from 'react'
+import {IStyledComponentBase} from 'styled-components/dist/types'
+import {multiply as multiply_2} from '@sanity/ui/theme'
+import {parseColor as parseColor_2} from '@sanity/ui/theme'
+import {PartialThemeColorBuilderOpts} from '@sanity/ui/theme'
+import {PropsWithChildren} from 'react'
+import {ReactNode} from 'react'
+import {Ref} from 'react'
+import {RefAttributes} from 'react'
+import {RGB as RGB_2} from '@sanity/ui/theme'
+import {rgba as rgba_2} from '@sanity/ui/theme'
+import {rgbToHex as rgbToHex_2} from '@sanity/ui/theme'
+import {rgbToHsl as rgbToHsl_2} from '@sanity/ui/theme'
+import {RootTheme as RootTheme_2} from '@sanity/ui/theme'
+import {screen as screen_3} from '@sanity/ui/theme'
+import {Theme as Theme_2} from '@sanity/ui/theme'
+import {Theme_v2} from '@sanity/ui/theme'
+import {ThemeAvatar} from '@sanity/ui/theme'
+import {ThemeBoxShadow} from '@sanity/ui/theme'
+import {ThemeColor} from '@sanity/ui/theme'
+import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
+import {ThemeColorBase} from '@sanity/ui/theme'
+import {ThemeColorBuilderOpts} from '@sanity/ui/theme'
+import {ThemeColorButton} from '@sanity/ui/theme'
+import {ThemeColorButtonModeKey as ThemeColorButtonModeKey_2} from '@sanity/ui/theme'
+import {ThemeColorButtonState} from '@sanity/ui/theme'
+import {ThemeColorButtonStates} from '@sanity/ui/theme'
+import {ThemeColorButtonTones} from '@sanity/ui/theme'
+import {ThemeColorCard} from '@sanity/ui/theme'
+import {ThemeColorCardState} from '@sanity/ui/theme'
+import {ThemeColorCardToneKey} from '@sanity/ui/theme'
+import {ThemeColorGenericState} from '@sanity/ui/theme'
+import {ThemeColorInput} from '@sanity/ui/theme'
+import {ThemeColorInputState} from '@sanity/ui/theme'
+import {ThemeColorInputStates} from '@sanity/ui/theme'
+import {ThemeColorMuted} from '@sanity/ui/theme'
+import {ThemeColorMutedTone} from '@sanity/ui/theme'
+import {ThemeColorName} from '@sanity/ui/theme'
+import {ThemeColorScheme} from '@sanity/ui/theme'
+import {ThemeColorSchemeKey as ThemeColorSchemeKey_2} from '@sanity/ui/theme'
+import {ThemeColorSchemes} from '@sanity/ui/theme'
+import {ThemeColorSelectable} from '@sanity/ui/theme'
+import {ThemeColorSelectableState} from '@sanity/ui/theme'
+import {ThemeColorSelectableStates} from '@sanity/ui/theme'
+import {ThemeColorSolid} from '@sanity/ui/theme'
+import {ThemeColorSolidTone} from '@sanity/ui/theme'
+import {ThemeColorSpot} from '@sanity/ui/theme'
+import {ThemeColorSpotKey} from '@sanity/ui/theme'
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {ThemeColorSyntax as ThemeColorSyntax_2} from '@sanity/ui/theme'
+import {ThemeColorToneKey} from '@sanity/ui/theme'
+import {ThemeFont as ThemeFont_2} from '@sanity/ui/theme'
+import {ThemeFontKey as ThemeFontKey_2} from '@sanity/ui/theme'
+import {ThemeFonts as ThemeFonts_2} from '@sanity/ui/theme'
+import {ThemeFontSize as ThemeFontSize_2} from '@sanity/ui/theme'
+import {ThemeFontWeight as ThemeFontWeight_2} from '@sanity/ui/theme'
+import {ThemeFontWeightKey as ThemeFontWeightKey_2} from '@sanity/ui/theme'
+import {ThemeInput} from '@sanity/ui/theme'
+import {ThemeLayer as ThemeLayer_2} from '@sanity/ui/theme'
+import {ThemeShadow as ThemeShadow_2} from '@sanity/ui/theme'
+import {ThemeStyles} from '@sanity/ui/theme'
+
+/** @beta */
+export declare type ArrayPropPrimitive = string | number | boolean | undefined | null
+
+/** @internal */
+export declare const Arrow: ForwardRefExoticComponent<
+  Omit<
+    {
+      width: number
+      height: number
+      radius?: number
+    } & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width'>,
+    'ref'
+  > &
+    RefAttributes<HTMLDivElement>
+>
+
 /**
- * @public
+ * @internal
  */
-type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> & Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>;
+export declare function attemptFocus(element: HTMLElement): boolean
+
 /**
+ * The Autocomplete component is typically used for search components.
+ * It consists of a text input for writing a query, and properties for rendering suggestions.
+ *
  * @public
  */
-interface BaseAutocompleteOption {
-  value: string;
-}
+export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
+  props: AutocompleteProps<Option> &
+    Omit<
+      HTMLProps<HTMLInputElement>,
+      | 'aria-activedescendant'
+      | 'aria-autocomplete'
+      | 'aria-expanded'
+      | 'aria-owns'
+      | 'as'
+      | 'autoCapitalize'
+      | 'autoComplete'
+      | 'autoCorrect'
+      | 'id'
+      | 'inputMode'
+      | 'onChange'
+      | 'onSelect'
+      | 'popover'
+      | 'prefix'
+      | 'ref'
+      | 'role'
+      | 'spellCheck'
+      | 'type'
+      | 'value'
+    > & {
+      ref?: Ref<HTMLInputElement>
+    },
+) => React.JSX.Element
+
 /**
  * @internal
  */
-interface AutocompleteState {
-  activeValue: string | null;
-  focused: boolean;
-  listFocused: boolean;
-  query: string | null;
-  value: string | null;
+export declare interface AutocompleteInputChangeMsg {
+  type: 'input/change'
+  query: string | null
 }
+
 /**
  * @internal
  */
-interface AutocompleteRootBlurMsg {
-  type: 'root/blur';
+export declare interface AutocompleteInputFoocusMsg {
+  type: 'input/focus'
 }
+
 /**
  * @internal
  */
-interface AutocompleteRootClearMsg {
-  type: 'root/clear';
+export declare type AutocompleteMsg =
+  | AutocompleteRootBlurMsg
+  | AutocompleteRootClearMsg
+  | AutocompleteRootEscapeMsg
+  | AutocompleteRootOpenMsg
+  | AutocompleteRootSetActiveValueMsg
+  | AutocompleteRootSetListFocusedMsg
+  | AutocompleteInputChangeMsg
+  | AutocompleteInputFoocusMsg
+  | AutocompleteValueChangeMsg
+
+/**
+ * @public
+ */
+export declare type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> &
+  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
+
+/**
+ * @public
+ */
+export declare interface AutocompleteProps<
+  Option extends BaseAutocompleteOption = BaseAutocompleteOption,
+> {
+  border?: boolean
+  customValidity?: string
+  filterOption?: (query: string, option: Option) => boolean
+  fontSize?: number | number[]
+  icon?: ElementType | ReactNode
+  id: string
+  /** @beta */
+  listBox?: BoxProps
+  loading?: boolean
+  onChange?: (value: string) => void
+  onQueryChange?: (query: string | null) => void
+  onSelect?: (value: string) => void
+  /** @beta */
+  openButton?: boolean | AutocompleteOpenButtonProps
+  /** @beta */
+  openOnFocus?: boolean
+  /** The options to render. */
+  options?: Option[]
+  padding?: number | number[]
+  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
+    Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
+  prefix?: ReactNode
+  radius?: Radius | Radius[]
+  /** @beta */
+  relatedElements?: HTMLElement[]
+  /** The callback function for rendering each option. */
+  renderOption?: (option: Option) => React.JSX.Element
+  /** @beta */
+  renderPopover?: (
+    props: {
+      content: React.JSX.Element | null
+      hidden: boolean
+      inputElement: HTMLInputElement | null
+      onMouseEnter: () => void
+      onMouseLeave: () => void
+    },
+    ref: Ref<HTMLDivElement>,
+  ) => ReactNode
+  renderValue?: (value: string, option?: Option) => string
+  suffix?: ReactNode
+  /** The current value. */
+  value?: string
 }
+
 /**
  * @internal
  */
-interface AutocompleteRootEscapeMsg {
-  type: 'root/escape';
+export declare interface AutocompleteRootBlurMsg {
+  type: 'root/blur'
 }
+
 /**
  * @internal
  */
-interface AutocompleteRootOpenMsg {
-  type: 'root/open';
-  query: string | null;
+export declare interface AutocompleteRootClearMsg {
+  type: 'root/clear'
 }
+
 /**
  * @internal
  */
-interface AutocompleteRootSetActiveValueMsg {
-  type: 'root/setActiveValue';
-  value: string;
-  listFocused?: boolean;
+export declare interface AutocompleteRootEscapeMsg {
+  type: 'root/escape'
 }
+
 /**
  * @internal
  */
-interface AutocompleteRootSetListFocusedMsg {
-  type: 'root/setListFocused';
-  listFocused: boolean;
+export declare interface AutocompleteRootOpenMsg {
+  type: 'root/open'
+  query: string | null
 }
+
 /**
  * @internal
  */
-interface AutocompleteInputChangeMsg {
-  type: 'input/change';
-  query: string | null;
+export declare interface AutocompleteRootSetActiveValueMsg {
+  type: 'root/setActiveValue'
+  value: string
+  listFocused?: boolean
 }
+
 /**
  * @internal
  */
-interface AutocompleteInputFoocusMsg {
-  type: 'input/focus';
+export declare interface AutocompleteRootSetListFocusedMsg {
+  type: 'root/setListFocused'
+  listFocused: boolean
 }
+
 /**
  * @internal
  */
-interface AutocompleteValueChangeMsg {
-  type: 'value/change';
-  value: string | null;
+export declare interface AutocompleteState {
+  activeValue: string | null
+  focused: boolean
+  listFocused: boolean
+  query: string | null
+  value: string | null
 }
+
 /**
  * @internal
  */
-type AutocompleteMsg = AutocompleteRootBlurMsg | AutocompleteRootClearMsg | AutocompleteRootEscapeMsg | AutocompleteRootOpenMsg | AutocompleteRootSetActiveValueMsg | AutocompleteRootSetListFocusedMsg | AutocompleteInputChangeMsg | AutocompleteInputFoocusMsg | AutocompleteValueChangeMsg;
+export declare interface AutocompleteValueChangeMsg {
+  type: 'value/change'
+  value: string | null
+}
+
 /**
+ * Avatars are used to represent people and other agents (e.g. bots).
+ *
  * @public
  */
-interface AutocompleteProps<Option extends BaseAutocompleteOption = BaseAutocompleteOption> {
-  border?: boolean;
-  customValidity?: string;
-  filterOption?: (query: string, option: Option) => boolean;
-  fontSize?: number | number[];
-  icon?: ElementType | ReactNode;
-  id: string;
-  /** @beta */
-  listBox?: BoxProps;
-  loading?: boolean;
-  onChange?: (value: string) => void;
-  onQueryChange?: (query: string | null) => void;
-  onSelect?: (value: string) => void;
-  /** @beta */
-  openButton?: boolean | AutocompleteOpenButtonProps;
-  /** @beta */
-  openOnFocus?: boolean;
-  /** The options to render. */
-  options?: Option[];
-  padding?: number | number[];
-  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> & Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>;
-  prefix?: ReactNode;
-  radius?: Radius | Radius[];
-  /** @beta */
-  relatedElements?: HTMLElement[];
-  /** The callback function for rendering each option. */
-  renderOption?: (option: Option) => React.JSX.Element;
+export declare const Avatar: ForwardRefExoticComponent<
+  AvatarProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare const AvatarCounter: ForwardRefExoticComponent<
+  AvatarCounterProps & RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface AvatarCounterProps {
+  count: number
+  size?: AvatarSize | AvatarSize[]
+  /** @deprecated No longer supported. */
+  tone?: 'navbar'
+}
+
+/**
+ * @public
+ */
+export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
+
+/**
+ * @public
+ */
+export declare interface AvatarProps {
   /** @beta */
-  renderPopover?: (props: {
-    content: React.JSX.Element | null;
-    hidden: boolean;
-    inputElement: HTMLInputElement | null;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-  }, ref: Ref<HTMLDivElement>) => ReactNode;
-  renderValue?: (value: string, option?: Option) => string;
-  suffix?: ReactNode;
-  /** The current value. */
-  value?: string;
+  __unstable_hideInnerStroke?: boolean
+  animateArrowFrom?: AvatarPosition
+  arrowPosition?: AvatarPosition
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  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
 }
+
 /**
- * The Autocomplete component is typically used for search components.
- * It consists of a text input for writing a query, and properties for rendering suggestions.
+ * @internal
+ */
+export declare interface AvatarRootStyleProps {
+  $color: ThemeColorAvatarColorKey
+}
+
+/**
+ * @public
+ */
+export declare type AvatarSize = 0 | 1 | 2 | 3
+
+/**
+ * @public
+ */
+export declare const AvatarStack: ForwardRefExoticComponent<
+  AvatarStackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface AvatarStackProps {
+  children: React.ReactNode
+  maxLength?: number
+  size?: AvatarSize | AvatarSize[]
+  /** @deprecated No longer supported. */
+  tone?: 'navbar'
+}
+
+/**
+ * @public
+ */
+export declare type AvatarStatus = 'online' | 'editing' | 'inactive'
+
+/**
+ * Badges are used to tag resources.
  *
  * @public
  */
-declare const Autocomplete: <Option extends BaseAutocompleteOption>(props: AutocompleteProps<Option> & Omit<HTMLProps<HTMLInputElement>, "aria-activedescendant" | "aria-autocomplete" | "aria-expanded" | "aria-owns" | "as" | "autoCapitalize" | "autoComplete" | "autoCorrect" | "id" | "inputMode" | "onChange" | "onSelect" | "popover" | "prefix" | "ref" | "role" | "spellCheck" | "type" | "value"> & {
-  ref?: Ref<HTMLInputElement>;
-}) => React.JSX.Element;
+export declare const Badge: ForwardRefExoticComponent<
+  Omit<BadgeProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
+>
+
 /**
- * @beta
+ * @public
+ * @deprecated No longer used
+ */
+export declare type BadgeMode = 'default' | 'outline'
+
+/**
+ * @public
+ */
+export declare interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  fontSize?: number | number[]
+  /** @deprecated No longer used. */
+  mode?: BadgeMode
+  tone?: BadgeTone
+}
+
+/**
+ * @public
+ */
+export declare type BadgeTone = ThemeColorStateToneKey
+
+/**
+ * @public
+ */
+export declare interface BaseAutocompleteOption {
+  value: string
+}
+
+/**
+ * @public
+ * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
+ */
+export declare type BaseTheme = BaseTheme_2
+
+/**
+ * @public
+ */
+export declare interface BoundaryElementContextValue {
+  version: 0.0
+  element: HTMLElement | null
+}
+
+/**
+ * @public
+ */
+export declare function BoundaryElementProvider(
+  props: BoundaryElementProviderProps,
+): React.JSX.Element
+
+export declare namespace BoundaryElementProvider {
+  var displayName: string
+}
+
+/**
+ * @public
+ */
+export declare interface BoundaryElementProviderProps {
+  children: React.ReactNode
+  element: HTMLElement | null
+}
+
+/**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
+ * @public
  */
-interface BreadcrumbsProps {
-  maxLength?: number;
-  separator?: React.ReactNode;
-  space?: number | number[];
+export declare const Box: ForwardRefExoticComponent<
+  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+
+/**
+ * @public
+ */
+export declare type BoxHeight = 'stretch' | 'fill'
+
+/**
+ * @public
+ */
+export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
+
+/**
+ * @public
+ */
+export declare interface BoxProps
+  extends ResponsiveFlexItemProps,
+    ResponsiveBoxProps,
+    ResponsiveGridItemProps,
+    ResponsiveMarginProps,
+    ResponsivePaddingProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
 }
+
+/**
+ * @public
+ * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
+ */
+export declare type BoxShadow = ThemeBoxShadow
+
+/**
+ * @public
+ */
+export declare type BoxSizing = 'content' | 'border'
+
+/**
+ * @beta
+ */
+export declare const Breadcrumbs: ForwardRefExoticComponent<
+  BreadcrumbsProps &
+    Omit<HTMLProps<HTMLOListElement>, 'type' | 'ref' | 'as'> &
+    RefAttributes<HTMLOListElement>
+>
+
 /**
  * @beta
  */
-declare const Breadcrumbs: react232.ForwardRefExoticComponent<BreadcrumbsProps & Omit<react232.HTMLProps<HTMLOListElement>, "ref" | "as" | "type"> & react232.RefAttributes<HTMLOListElement>>;
+export declare interface BreadcrumbsProps {
+  maxLength?: number
+  separator?: React.ReactNode
+  space?: number | number[]
+}
+
+/**
+ * @public
+ */
+export declare const Button: ForwardRefExoticComponent<
+  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'width' | 'as'>, 'ref'> &
+    RefAttributes<HTMLButtonElement>
+>
+
+/**
+ * @public
+ */
+export declare type ButtonMode = ThemeColorButtonModeKey_2
+
 /**
  * @public
  */
-interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
+export declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  fontSize?: number | number[]
+  mode?: ButtonMode
+  icon?: React.ElementType | React.ReactNode
+  iconRight?: React.ElementType | React.ReactNode
+  justify?: FlexJustify | FlexJustify[]
   /**
-   * @beta
+   * @beta Do not use in production, as this might change.
    */
-  __unstable_autoFocus?: boolean;
+  loading?: boolean
+  selected?: boolean
+  space?: number | number[]
+  muted?: boolean
+  text?: React.ReactNode
+  textAlign?: ButtonTextAlign
+  textWeight?: ThemeFontWeightKey_2
+  tone?: ButtonTone
+  type?: 'button' | 'reset' | 'submit'
+  width?: ButtonWidth
+}
+
+/**
+ * @public
+ */
+export declare type ButtonTextAlign = 'left' | 'right' | 'center'
+
+/**
+ * @public
+ */
+export declare type ButtonTone = ThemeColorStateToneKey
+
+/**
+ * @public
+ */
+export declare type ButtonWidth = 'fill'
+
+/**
+ * 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: ForwardRefExoticComponent<
+  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface CardProps
+  extends BoxProps,
+    ResponsiveBorderProps,
+    ResponsiveRadiusProps,
+    ResponsiveShadowProps {
   /**
+   * Do not use in production.
    * @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[];
+  __unstable_checkered?: boolean
   /**
-   * Whether the dialog should animate in on mount.
-   *
+   * Do not use in production.
    * @beta
-   * @defaultValue false
    */
-  animate?: boolean;
+  __unstable_focusRing?: boolean
+  muted?: boolean
+  pressed?: boolean
+  scheme?: ThemeColorSchemeKey_2
+  tone?: CardTone
 }
+
 /**
- * The Dialog component.
+ * @internal
+ */
+export declare interface CardStyleProps {
+  $checkered: boolean
+  $focusRing: boolean
+  $muted: boolean
+  $tone: ThemeColorToneKey
+}
+
+/**
+ * @public
+ */
+export declare type CardTone = ThemeColorCardToneKey | 'inherit'
+
+/**
+ * Checkboxes allow the user to select one or more items from a set.
  *
  * @public
  */
-declare const Dialog: react232.ForwardRefExoticComponent<Omit<DialogProps & Omit<react232.HTMLProps<HTMLDivElement>, "as" | "width" | "id">, "ref"> & react232.RefAttributes<HTMLDivElement>>;
+export declare const Checkbox: ForwardRefExoticComponent<
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & CheckboxProps, 'ref'> &
+    RefAttributes<HTMLInputElement>
+>
+
+/**
+ * @public
+ */
+export declare interface CheckboxProps {
+  indeterminate?: boolean
+  customValidity?: string
+}
+
+/**
+ * @public
+ */
+export declare type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
+
+/**
+ * @public
+ */
+export declare type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
+
+/**
+ * @public
+ */
+export declare type ClickOutsideEventListener = (event: MouseEvent) => void
+
+/**
+ * @public
+ */
+export declare type ClickOutsideListener = (event: MouseEvent) => void
+
+/**
+ * @public
+ */
+export declare const Code: ForwardRefExoticComponent<
+  Omit<CodeProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> & RefAttributes<HTMLElement>
+>
+
+/**
+ * @public
+ */
+export declare interface CodeProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  /** Define the language to use for syntax highlighting. */
+  language?: string
+  size?: number | number[]
+  weight?: string
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export declare const CodeSkeleton: ForwardRefExoticComponent<
+  Omit<
+    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
+    'ref'
+  > &
+    RefAttributes<HTMLDivElement>
+>
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-interface DialogContextValue {
-  version: 0.0;
-  position?: DialogPosition | DialogPosition[];
-  zOffset?: number | number[];
+export declare interface CodeSkeletonProps extends SkeletonProps {
+  size?: number | number[]
+}
+
+/**
+ * @internal
+ * @deprecated this component will be removed in the next major release
+ */
+export declare function ConditionalWrapper({
+  children,
+  condition,
+  wrapper,
+}: {
+  children: React.ReactNode
+  condition: boolean
+  wrapper: (children: React.ReactNode) => React.ReactNode
+}): React.ReactNode
+
+export declare namespace ConditionalWrapper {
+  var displayName: string
 }
+
+/**
+ * The `Container` component wraps content layout in a defined set of widths.
+ *
+ * @public
+ */
+export declare const Container: ForwardRefExoticComponent<
+  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'as'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
+
+/**
+ * @internal
+ */
+export declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean
+
+/**
+ * @public
+ * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
+ */
+export declare const createColorTheme: typeof createColorTheme_2
+
+/**
+ * @public
+ */
+export declare type Delay =
+  | number
+  | Partial<{
+      open: number
+      close: number
+    }>
+
+/**
+ * The Dialog component.
+ *
+ * @public
+ */
+export declare const Dialog: ForwardRefExoticComponent<
+  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'width' | 'as'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
+>
+
 /**
  * @internal
  */
-declare const DialogContext: react232.Context<DialogContextValue>;
+export declare const DialogContext: Context<DialogContextValue>
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-interface DialogProviderProps {
-  children?: React.ReactNode;
-  position?: DialogPosition | DialogPosition[];
-  zOffset?: number | number[];
+export declare interface DialogContextValue {
+  version: 0.0
+  position?: DialogPosition | DialogPosition[]
+  zOffset?: number | number[]
+}
+
+/**
+ * @public
+ */
+export declare type DialogPosition = 'absolute' | 'fixed'
+
+/**
+ * @public
+ */
+export declare 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_2
+  zOffset?: number | number[]
+  /**
+   * Whether the dialog should animate in on mount.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
 }
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-declare function DialogProvider(props: DialogProviderProps): React.JSX.Element;
-declare namespace DialogProvider {
-  var displayName: string;
+export declare function DialogProvider(props: DialogProviderProps): React.JSX.Element
+
+export declare namespace DialogProvider {
+  var displayName: string
 }
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-declare function useDialog(): DialogContextValue;
+export declare interface DialogProviderProps {
+  children?: React.ReactNode
+  position?: DialogPosition | DialogPosition[]
+  zOffset?: number | number[]
+}
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export declare const ElementQuery: ForwardRefExoticComponent<
+  Omit<MediaQueryProps & Omit<HTMLProps<HTMLDivElement>, 'media' | 'as'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @beta
+ */
+export declare interface ElementRectValue {
+  width: number
+  height: number
+}
+
+/**
+ * @beta
+ */
+export declare interface ElementSize {
+  content: ElementRectValue
+  border: ElementRectValue
+  /** @deprecated INTERNAL ONLY */
+  _contentRect: DOMRectReadOnly
+}
+
+/**
+ * @internal
+ */
+export declare interface _ElementSizeListener {
+  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
+}
+
+/**
+ * @internal
+ */
+export declare interface _ElementSizeObserver {
+  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
+}
+
+/**
+ * @internal
+ */
+export declare const _elementSizeObserver: _ElementSizeObserver
+
+/**
+ * @internal
+ */
+export declare type _ElementSizeSubscriber = (elementRect: ElementSize) => void
+
+/**
+ * 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
+}
+
+/**
+ * DO NOT USE IN PRODUCTION
+ * @beta
+ */
+export declare type ErrorBoundaryProps = PropsWithChildren<{
+  onCatch: (params: {error: Error; info: React.ErrorInfo}) => void
+}>
+
+/**
+ * DO NOT USE IN PRODUCTION
+ * @beta
+ */
+export declare interface ErrorBoundaryState {
+  error: Error | null
+}
+
+/**
+ * @internal
+ */
+export declare function _fillCSSObject(
+  keys: string[],
+  value: string | number | CSSObject,
+): CSSObject
+
+/**
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
+ * @public
+ */
+export declare const Flex: ForwardRefExoticComponent<
+  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'wrap' | 'as'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
+
+/**
+ * @public
+ */
+export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+
+/**
+ * @public
+ */
+export declare type FlexJustify =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+
+/**
+ * @public
+ */
+export declare interface FlexProps
+  extends Omit<BoxProps, 'display'>,
+    ResponsiveFlexProps,
+    ResponsiveFlexItemProps {
+  gap?: number | number[]
+}
+
+/**
+ * @public
+ */
+export declare type FlexValue = number | 'none' | 'auto' | 'initial'
+
+/**
+ * @public
+ */
+export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
+
+/**
+ * @internal
+ */
+export declare function focusFirstDescendant(element: HTMLElement): boolean
+
+/**
+ * @internal
+ */
+export declare function focusLastDescendant(element: HTMLElement): boolean
+
+/**
+ * @internal
+ */
+export declare interface FontWeightStyleProps {
+  $weight?: ThemeFontWeightKey_2
+}
+
+/**
+ * @internal
+ */
+export declare function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[]
+
+/**
+ * @internal
+ */
+export declare function _getResponsiveSpace(
+  theme: Theme_2,
+  props: string[],
+  spaceIndexes?: number[],
+): CSSObject[] | null
+
+/**
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
+ *
+ * @public
+ */
+export declare const Grid: ForwardRefExoticComponent<
+  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
+
+/**
+ * @public
+ */
+export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+export declare type GridItemColumn = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+export declare type GridItemColumnEnd = 'auto' | number
+
+/**
+ * @public
+ */
+export declare type GridItemColumnStart = 'auto' | number
+
+/**
+ * @public
+ */
+export declare type GridItemRow = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+export declare type GridItemRowEnd = 'auto' | number
+
+/**
+ * @public
+ */
+export declare type GridItemRowStart = 'auto' | number
+
+/**
+ * @public
+ */
+export declare interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
+
+/**
+ * @internal
+ */
+export declare function _hasFocus(element: HTMLElement): boolean
+
+/**
+ * Typographic headings.
+ *
+ * @public
+ */
+export declare const Heading: ForwardRefExoticComponent<
+  Omit<HeadingProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> &
+    RefAttributes<HTMLElement>
+>
+
+/**
+ * @public
+ */
+export declare interface HeadingProps {
+  accent?: boolean
+  align?: TextAlign | TextAlign[]
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  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_2
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export declare const HeadingSkeleton: ForwardRefExoticComponent<
+  Omit<
+    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
+    'ref'
+  > &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export declare interface HeadingSkeletonProps extends SkeletonProps {
+  size?: number | number[]
+}
+
+/**
+ * @public
+ * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
+ */
+export declare const hexToRgb: typeof hexToRgb_2
+
+/**
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
+ *
+ * @public
+ */
+export declare const Hotkeys: ForwardRefExoticComponent<
+  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLElement>
+>
+
+/**
+ * @public
+ */
+export declare interface HotkeysProps {
+  fontSize?: number | number[]
+  padding?: number | number[]
+  radius?: Radius | Radius[]
+  space?: number | number[]
+  keys?: string[]
+}
+
+/**
+ * @public
+ * @deprecated Use `HSL` from `@sanity/ui/theme` instead.
+ */
+export declare type HSL = HSL_2
+
+/**
+ * @public
+ * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
+ */
+export declare const hslToRgb: typeof hslToRgb_2
+
+/**
+ * The `Inline` component is a layout utility for aligning and spacing items horizontally.
+ *
+ * @public
+ */
+export declare const Inline: ForwardRefExoticComponent<
+  Omit<InlineProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
+>
+
+/**
+ * @public
+ */
+export declare interface InlineProps extends Omit<BoxProps, 'display'> {
+  /** The spacing between children. */
+  space?: number | number[]
+}
+
+/**
+ * @internal
+ */
+export declare function _isEnterToClickElement(element: HTMLElement): boolean
+
+/**
+ * @internal
+ */
+export declare function isFocusable(element: HTMLElement): boolean
+
+/**
+ * @internal
+ */
+export declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement
+
+/**
+ * @internal
+ */
+export declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement
+
+/**
+ * @internal
+ */
+export declare function isHTMLElement(node: unknown): node is HTMLElement
+
+/**
+ * @internal
+ */
+export declare function isHTMLInputElement(element: unknown): element is HTMLInputElement
+
+/**
+ * @internal
+ */
+export declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement
+
+/**
+ * @internal
+ */
+export declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement
+
+/**
+ * @internal
+ */
+export declare function _isScrollable(el: Node): boolean
+
+/**
+ * Used to define some text as keyboard input.
+ *
+ * @public
+ */
+export declare const KBD: ForwardRefExoticComponent<
+  KBDProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface KBDProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  fontSize?: number | number[]
+  padding?: number | number[]
+  radius?: Radius | Radius[]
+}
+
+/**
+ * Typographic labels.
+ *
+ * @public
+ */
+export declare const Label: ForwardRefExoticComponent<
+  Omit<LabelProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface LabelProps {
+  accent?: boolean
+  align?: TextAlign | TextAlign[]
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  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_2
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export declare const LabelSkeleton: ForwardRefExoticComponent<
+  Omit<
+    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
+    'ref'
+  > &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export declare interface LabelSkeletonProps extends SkeletonProps {
+  size?: number | number[]
+}
+
+/**
+ * @public
+ */
+export declare const Layer: ForwardRefExoticComponent<
+  Omit<LayerProps & Omit<HTMLProps<HTMLDivElement>, 'as'>, 'ref'> & RefAttributes<HTMLDivElement>
+>
+
+/** @public */
+export declare interface LayerContextValue {
+  version: 0.0
+  isTopLayer: boolean
+  level?: number
+  registerChild: (childLevel?: number) => () => void
+  size: number
+  zIndex: number
+}
+
+/**
+ * @public
+ */
+export declare 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
+ */
+export declare function LayerProvider(props: LayerProviderProps): React.JSX.Element
+
+export declare namespace LayerProvider {
+  var displayName: string
+}
+
+/**
+ * @public
+ */
+export declare interface LayerProviderProps {
+  children?: React.ReactNode
+  zOffset?: number | number[]
+}
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export declare interface MediaQueryProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  media?: number[]
+}
+
+/**
+ * @internal
+ */
+export declare interface _MediaStore {
+  subscribe: (onStoreChange: () => void) => () => void
+  getSnapshot: () => number
+}
+
+/**
+ * The `Menu` component is a building block for application menus.
+ *
+ * @public
+ */
+export declare const Menu: ForwardRefExoticComponent<
+  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'role' | 'as'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
+ *
+ * @public
+ */
+export declare const MenuButton: ForwardRefExoticComponent<
+  MenuButtonProps & RefAttributes<HTMLButtonElement | null>
+>
+
+/**
+ * @public
+ */
+export declare interface MenuButtonProps {
+  /**
+   * @beta Do not use in production.
+   */
+  __unstable_disableRestoreFocusOnClose?: boolean
+  /**
+   * @deprecated Use `popover={{boundaryElement: element}}` instead.
+   */
+  boundaryElement?: HTMLElement
+  button: React.JSX.Element
+  id: string
+  menu?: React.JSX.Element
+  onClose?: () => void
+  onOpen?: () => void
+  /**
+   * @deprecated Use `popover={{placement: 'top'}}` instead.
+   */
+  placement?: Placement
+  popover?: Omit<PopoverProps, 'content' | 'open'>
+  /**
+   * @deprecated Use `popover={{scheme: 'dark'}}` instead.
+   */
+  popoverScheme?: ThemeColorSchemeKey_2
+  /**
+   * @deprecated Use `popover={{radius: 2}}` instead.
+   */
+  popoverRadius?: Radius | Radius[]
+  /**
+   * @beta Do not use in production.
+   * @deprecated Use `popover={{portal: true}}` instead.
+   */
+  portal?: boolean
+  /**
+   * @deprecated Use `popover={{preventOverflow: true}}` instead.
+   */
+  preventOverflow?: boolean
+}
+
+/**
+ * @public
+ */
+export declare const MenuDivider: IStyledComponentBase<
+  'web',
+  FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>
+> &
+  string
+
+/**
+ * @public
+ */
+export declare function MenuGroup(
+  props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
+    MenuGroupProps,
+): React.JSX.Element
+
+export declare namespace MenuGroup {
+  var displayName: string
+}
+
+/**
+ * @public
+ */
+export declare interface MenuGroupProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  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[]
+  space?: number | number[]
+  text: React.ReactNode
+  tone?: SelectableTone
+}
+
+/**
+ * @public
+ */
+export declare const MenuItem: ForwardRefExoticComponent<
+  MenuItemProps &
+    Omit<HTMLProps<HTMLDivElement>, 'selected' | 'height' | 'ref' | 'tabIndex' | 'as'> &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  fontSize?: number | number[]
+  hotkeys?: string[]
+  icon?: React.ElementType | React.ReactNode
+  iconRight?: React.ElementType | React.ReactNode
+  pressed?: boolean
+  selected?: boolean
+  space?: number | number[]
+  text?: React.ReactNode
+  tone?: SelectableTone
+}
+
+/**
+ * @public
+ */
+export declare interface MenuProps extends ResponsivePaddingProps {
+  /**
+   * @deprecated Use `shouldFocus="first"` instead.
+   */
+  'focusFirst'?: boolean
+  /**
+   * @deprecated Use `shouldFocus="last"` instead.
+   */
+  'focusLast'?: boolean
+  'onClickOutside'?: (event: MouseEvent) => void
+  'onEscape'?: () => void
+  'onItemClick'?: () => void
+  'onItemSelect'?: (index: number) => void
+  'originElement'?: HTMLElement | null
+  'registerElement'?: (el: HTMLElement) => () => void
+  'shouldFocus'?: 'first' | 'last' | null
+  'space'?: number | number[]
+  'aria-labelledby'?: string
+  'onBlurCapture'?: (event: FocusEvent) => void
+}
+
+/**
+ * @public
+ * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
+ */
+export declare const multiply: typeof multiply_2
+
+/**
+ * @public
+ * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
+ */
+export declare const parseColor: typeof parseColor_2
+
+export {PartialThemeColorBuilderOpts}
+
+/**
+ * Placement of floating UI elements.
+ *
+ * @public
+ */
+export declare type Placement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+
+/**
+ * The `Popover` component is used to display some content on top of another.
+ *
+ * @public
+ */
+export declare const Popover: ForwardRefExoticComponent<
+  Omit<
+    PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'children' | 'as'>,
+    'ref'
+  > &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @beta
+ */
+export declare type PopoverMargins = [number, number, number, number]
+
+/** @public */
+export declare 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?: HTMLElement | null
+  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_2
+  tone?: CardTone
+  /** @beta */
+  updateRef?: Ref<PopoverUpdateCallback | undefined>
+  width?: PopoverWidth | PopoverWidth[]
+}
+
+/** @beta */
+export declare type PopoverUpdateCallback = () => void
+
+/** @public */
+export declare type PopoverWidth = number | 'auto'
+
+/**
+ * @public
+ */
+export declare function Portal(props: PortalProps): React.ReactPortal | null
+
+export declare namespace Portal {
+  var displayName: string
+}
+
+/**
+ * @public
+ */
+export declare interface PortalContextValue {
+  version: 0.0
+  boundaryElement: HTMLElement | null
+  element: HTMLElement | null
+  elements?: Record<string, HTMLElement | null | undefined>
+}
+
+/**
+ * @public
+ */
+export declare interface PortalProps {
+  children: React.ReactNode
+  /**
+   * @beta This API might change. DO NOT USE IN PRODUCTION.
+   */
+  __unstable_name?: string
+}
+
+/**
+ * @public
+ */
+export declare function PortalProvider(props: PortalProviderProps): React.JSX.Element
+
+export declare namespace PortalProvider {
+  var displayName: string
+}
+
+/**
+ * @public
+ */
+export declare interface PortalProviderProps {
+  /**
+   * @deprecated Use `<BoundaryElementProvider element={...} />` instead
+   */
+  boundaryElement?: HTMLElement | null
+  children: React.ReactNode
+  element?: HTMLElement | null
+  /**
+   * @beta
+   */
+  __unstable_elements?: Record<string, HTMLElement | null | undefined>
+}
+
+/**
+ * The `Radio` component allows the user to select one option from a set.
+ *
+ * @public
+ */
+export declare const Radio: ForwardRefExoticComponent<
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & RadioProps, 'ref'> &
+    RefAttributes<HTMLInputElement>
+>
+
+/**
+ * @public
+ */
+export declare interface RadioProps {
+  customValidity?: string
+}
+
+/**
+ * @public
+ */
+export declare type Radius = number | 'full'
+
+/**
+ * @internal
+ */
+export declare function _raf(fn: () => void): () => void
+
+/**
+ * @internal
+ */
+export declare function _raf2(fn: () => void): () => void
+
+/**
+ * @public
+ */
+export declare function rem(pixelValue: number): string | 0
+
+/**
+ * @internal
+ */
+export declare const _ResizeObserver: typeof ResizeObserver
+
+/**
+ * @internal
+ */
+export declare function _responsive<T>(
+  media: number[],
+  values: T[],
+  callback: (value: T, index: number, array: T[]) => CSSObject,
+): CSSObject[]
+
+/**
+ * @internal
+ */
+export declare interface ResponsiveAvatarSizeStyleProps {
+  $size: AvatarSize[]
+}
+
+/**
+ * @public
+ */
+export declare interface ResponsiveBorderProps {
+  border?: boolean | boolean[]
+  borderTop?: boolean | boolean[]
+  borderRight?: boolean | boolean[]
+  borderBottom?: boolean | boolean[]
+  borderLeft?: boolean | boolean[]
+}
+
+/**
+ * @public
+ */
+export declare interface ResponsiveBoxProps {
+  display?: BoxDisplay | BoxDisplay[]
+  height?: BoxHeight | BoxHeight[]
+  overflow?: BoxOverflow | BoxOverflow[]
+  sizing?: BoxSizing | BoxSizing[]
+}
+
+/**
+ * Get responsive CSS for the `code` font style.
+ * @internal
+ */
+export declare function responsiveCodeFontStyle(
+  props: ResponsiveFontStyleProps & ThemeProps,
+): CSSObject[]
+
+/**
+ * @public
+ */
+export declare interface ResponsiveFlexItemProps {
+  /** Sets the flex CSS attribute. The property is responsive. */
+  flex?: FlexValue | FlexValue[]
+}
+
+/**
+ * @public
+ */
+export declare interface ResponsiveFlexProps {
+  align?: FlexAlign | FlexAlign[]
+  direction?: FlexDirection | FlexDirection[]
+  justify?: FlexJustify | FlexJustify[]
+  wrap?: FlexWrap | FlexWrap[]
+}
+
+/**
+ * @internal
+ */
+export declare interface ResponsiveFontSizeStyleProps {
+  $size: number[]
+}
+
+/**
+ * @internal
+ */
+export declare interface ResponsiveFontStyleProps
+  extends FontWeightStyleProps,
+    ResponsiveFontSizeStyleProps,
+    ResponsiveTextAlignStyleProps {
+  $accent?: boolean
+  $muted?: boolean
+}
+
+/**
+ * @public
+ */
+export declare interface ResponsiveGridItemProps {
+  column?: GridItemColumn | GridItemColumn[]
+  columnStart?: GridItemColumnStart | GridItemColumnStart[]
+  columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
+  row?: GridItemRow | GridItemRow[]
+  rowStart?: GridItemRowStart | GridItemRowStart[]
+  rowEnd?: GridItemRowEnd | GridItemRowEnd[]
+}
+
+/**
+ * @public
+ */
+export declare interface ResponsiveGridProps {
+  autoRows?: GridAutoRows | GridAutoRows[]
+  autoCols?: GridAutoCols | GridAutoCols[]
+  autoFlow?: GridAutoFlow | GridAutoFlow[]
+  columns?: number | number[]
+  gap?: number | number[]
+  gapX?: number | number[]
+  gapY?: number | number[]
+  rows?: number | number[]
+}
+
+/**
+ * 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[]
+
+/**
+ * @public
+ */
+export declare 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
+ */
+export declare interface ResponsivePaddingProps {
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
+  paddingTop?: number | number[]
+  paddingRight?: number | number[]
+  paddingBottom?: number | number[]
+  paddingLeft?: number | number[]
+}
+
+/**
+ * @public
+ */
+export declare interface ResponsiveRadiusProps {
+  radius?: Radius | Radius[]
+}
+
+/**
+ * @public
+ */
+export declare interface ResponsiveShadowProps {
+  shadow?: number | number[]
+}
+
+/**
+ * Get responsive text align styles.
+ * @internal
+ */
+export declare function responsiveTextAlignStyle(
+  props: ResponsiveTextAlignStyleProps & ThemeProps,
+): CSSObject[]
+
+/**
+ * @internal
+ */
+export declare interface ResponsiveTextAlignStyleProps {
+  $align: TextAlign[]
+}
+
+/**
+ * Get responsive CSS for the `text` font style.
+ * @internal
+ */
+export declare function responsiveTextFont(
+  props: ResponsiveFontStyleProps & ThemeProps,
+): CSSObject[]
+
+/**
+ * @public
+ */
+export declare interface ResponsiveWidthProps {
+  width?: number | 'auto' | (number | 'auto')[]
+}
+
+/**
+ * @internal
+ */
+export declare interface ResponsiveWidthStyleProps {
+  $width: (number | 'auto')[]
+}
+
+/**
+ * @public
+ * @deprecated Use `RGB` from `@sanity/ui/theme` instead.
+ */
+export declare type RGB = RGB_2
+
+/**
+ * @public
+ * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
+ */
+export declare const rgba: typeof rgba_2
+
+/**
+ * @public
+ * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
+ */
+export declare const rgbToHex: typeof rgbToHex_2
+
+/**
+ * @public
+ * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
+ */
+export declare const rgbToHsl: typeof rgbToHsl_2
+
+/**
+ * @public
+ * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
+ */
+export declare type RootTheme = RootTheme_2
+
+/**
+ * @public
+ * @deprecated Use `screen` from `@sanity/ui/theme` instead.
+ */
+declare const screen_2: typeof screen_3
+export {screen_2 as screen}
+
+/**
+ * The `Select` component provides control of options.
+ *
+ * @public
+ */
+export declare const Select: ForwardRefExoticComponent<
+  Omit<SelectProps & Omit<HTMLProps<HTMLSelectElement>, 'as'>, 'ref'> &
+    RefAttributes<HTMLSelectElement>
+>
+
+/**
+ * @public
+ */
+export declare type SelectableTone = ThemeColorStateToneKey
+
+/**
+ * @public
+ */
+export declare interface SelectProps {
+  fontSize?: number | number[]
+  padding?: number | number[]
+  radius?: Radius | Radius[]
+  space?: number | number[]
+  customValidity?: string
+}
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export declare const Skeleton: ForwardRefExoticComponent<
+  Omit<SkeletonProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<HTMLDivElement>
+>
+
+/**
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export declare interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
+  animated?: boolean
+  delay?: number
+}
+
+/**
+ * Indicate that something is loading for an indeterminate amount of time.
+ *
+ * @public
+ */
+export declare const Spinner: ForwardRefExoticComponent<
+  Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface SpinnerProps {
+  muted?: boolean
+  size?: number | number[]
+}
+
+/**
+ * @public
+ */
+export declare const SrOnly: ForwardRefExoticComponent<
+  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface SrOnlyProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  children?: React.ReactNode
+}
+
+/**
+ * The `Stack` component is used to place elements on top of each other.
+ *
+ * @public
+ */
+export declare const Stack: ForwardRefExoticComponent<
+  StackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface StackProps extends BoxProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  space?: number | number[]
+}
+
+/**
+ * @public
+ * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
+ */
+export declare const studioTheme: BaseTheme_2
+
+/**
+ * @public
+ * @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.
+ */
+export declare type Styles = ThemeStyles
+
+/**
+ * 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 const Switch: ForwardRefExoticComponent<
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & SwitchProps, 'ref'> &
+    RefAttributes<HTMLInputElement>
+>
+
+/**
+ * @public
+ */
+export declare interface SwitchProps {
+  indeterminate?: boolean
+}
+
+/**
+ * @public
+ */
+export declare const Tab: ForwardRefExoticComponent<
+  Omit<
+    TabProps &
+      Omit<
+        HTMLProps<HTMLButtonElement>,
+        'label' | 'id' | 'type' | 'width' | 'aria-controls' | 'as'
+      >,
+    'ref'
+  > &
+    RefAttributes<HTMLButtonElement>
+>
+
+/**
+ * @public
+ */
+export declare const TabList: ForwardRefExoticComponent<
+  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+    RefAttributes<unknown>
+>
+
+/**
+ * @public
+ */
+export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
+  children: Array<React.JSX.Element | null | undefined | false>
+}
+
+/**
+ * @public
+ */
+export declare const TabPanel: ForwardRefExoticComponent<
+  Omit<
+    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'role' | 'aria-labelledby' | 'as'>,
+    'ref'
+  > &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface TabPanelProps extends BoxProps {
+  /**
+   * The `id` of the correlating `Tab` component.
+   */
+  'aria-labelledby': string
+  'id': string
+}
+
+/**
+ * @public
+ */
+export declare 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
+}
+
+/**
+ * The `Text` component is an agile, themed typographic element.
+ *
+ * @public
+ */
+declare const Text_2: ForwardRefExoticComponent<
+  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
+>
+export {Text_2 as Text}
+
+/**
+ * @public
+ */
+export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
+
+/**
+ * A multiline text input.
+ *
+
+ * @public
+ */
+export declare const TextArea: ForwardRefExoticComponent<
+  Omit<TextAreaProps & Omit<HTMLProps<HTMLTextAreaElement>, 'as'>, 'ref'> &
+    RefAttributes<HTMLTextAreaElement>
+>
+
+/**
+ * @public
+ */
+export declare interface TextAreaProps extends ResponsiveRadiusProps {
+  /**
+   * @beta
+   */
+  __unstable_disableFocusRing?: boolean
+  border?: boolean
+  customValidity?: string
+  fontSize?: number | number[]
+  padding?: number | number[]
+  weight?: ThemeFontWeightKey_2
+}
+
+/**
+ * Single line text input.
+ *
+ * @public
+ */
+export declare const TextInput: ForwardRefExoticComponent<
+  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'prefix' | 'as'>, 'ref'> &
+    RefAttributes<HTMLInputElement>
+>
+
+/**
+ * @public
+ */
+export declare type TextInputClearButtonProps = Omit<ButtonProps, 'as'> &
+  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>
+
 /**
  * @public
  */
-interface MenuButtonProps {
-  /**
-   * @beta Do not use in production.
-   */
-  __unstable_disableRestoreFocusOnClose?: boolean;
-  /**
-   * @deprecated Use `popover={{boundaryElement: element}}` instead.
-   */
-  boundaryElement?: HTMLElement;
-  button: React.JSX.Element;
-  id: string;
-  menu?: React.JSX.Element;
-  onClose?: () => void;
-  onOpen?: () => void;
-  /**
-   * @deprecated Use `popover={{placement: 'top'}}` instead.
-   */
-  placement?: Placement;
-  popover?: Omit<PopoverProps, 'content' | 'open'>;
-  /**
-   * @deprecated Use `popover={{scheme: 'dark'}}` instead.
-   */
-  popoverScheme?: ThemeColorSchemeKey$1;
+export declare interface TextInputProps {
   /**
-   * @deprecated Use `popover={{radius: 2}}` instead.
+   * @beta
    */
-  popoverRadius?: Radius | Radius[];
+  __unstable_disableFocusRing?: boolean
+  border?: boolean
   /**
-   * @beta Do not use in production.
-   * @deprecated Use `popover={{portal: true}}` instead.
+   * @beta
    */
-  portal?: boolean;
+  clearButton?: boolean | TextInputClearButtonProps
+  customValidity?: string
+  fontSize?: number | number[]
+  icon?: React.ElementType | React.ReactNode
+  iconRight?: React.ElementType | React.ReactNode
   /**
-   * @deprecated Use `popover={{preventOverflow: true}}` instead.
+   * @beta
    */
-  preventOverflow?: boolean;
+  onClear?: () => void
+  padding?: number | number[]
+  prefix?: React.ReactNode
+  radius?: Radius | Radius[]
+  space?: number | number[]
+  suffix?: React.ReactNode
+  type?: TextInputType
+  weight?: ThemeFontWeightKey_2
 }
+
 /**
- * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
- *
  * @public
  */
-declare const MenuButton: react232.ForwardRefExoticComponent<MenuButtonProps & react232.RefAttributes<HTMLButtonElement | null>>;
+export declare type TextInputType =
+  | 'search'
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'url'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'tel'
+  | 'time'
+  | 'text'
+  | 'week'
+  | 'color'
+
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
-  animated?: boolean;
-  delay?: number;
+export declare interface TextProps {
+  accent?: boolean
+  align?: TextAlign | TextAlign[]
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  /** 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_2
 }
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-declare const Skeleton: react232.ForwardRefExoticComponent<Omit<SkeletonProps & react232.HTMLProps<HTMLDivElement>, "ref"> & react232.RefAttributes<HTMLDivElement>>;
+export declare const TextSkeleton: ForwardRefExoticComponent<
+  Omit<
+    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
+    'ref'
+  > &
+    RefAttributes<HTMLDivElement>
+>
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-interface TextSkeletonProps extends SkeletonProps {
-  size?: number | number[];
+export declare interface TextSkeletonProps extends SkeletonProps {
+  size?: number | number[]
 }
+
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
+ * @deprecated Use `Theme` from `@sanity/ui/theme` instead.
+ */
+export declare type Theme = Theme_2
+
+export {ThemeAvatar}
+
+export {ThemeColor}
+
+export {ThemeColorBase}
+
+export {ThemeColorBuilderOpts}
+
+export {ThemeColorButton}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorButtonModeKey` from `@sanity/ui/theme` instead.
+ */
+export declare type ThemeColorButtonModeKey = ThemeColorButtonModeKey_2
+
+export {ThemeColorButtonState}
+
+export {ThemeColorButtonStates}
+
+export {ThemeColorButtonTones}
+
+export {ThemeColorCard}
+
+export {ThemeColorCardState}
+
+export {ThemeColorGenericState}
+
+export {ThemeColorInput}
+
+export {ThemeColorInputState}
+
+export {ThemeColorInputStates}
+
+export {ThemeColorMuted}
+
+export {ThemeColorMutedTone}
+
+export {ThemeColorName}
+
+/**
+ * @public
  */
-interface LabelSkeletonProps extends SkeletonProps {
-  size?: number | number[];
+export declare function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element
+
+export declare namespace ThemeColorProvider {
+  var displayName: string
 }
+
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-interface HeadingSkeletonProps extends SkeletonProps {
-  size?: number | number[];
+export declare interface ThemeColorProviderProps {
+  children?: React.ReactNode
+  scheme?: ThemeColorSchemeKey_2
+  tone?: ThemeColorCardToneKey
 }
+
+export {ThemeColorScheme}
+
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
+ * @deprecated Use `ThemeColorSchemeKey` from `@sanity/ui/theme` instead.
+ */
+export declare type ThemeColorSchemeKey = ThemeColorSchemeKey_2
+
+export {ThemeColorSchemes}
+
+export {ThemeColorSelectable}
+
+export {ThemeColorSelectableState}
+
+export {ThemeColorSelectableStates}
+
+export {ThemeColorSolid}
+
+export {ThemeColorSolidTone}
+
+export {ThemeColorSpot}
+
+export {ThemeColorSpotKey}
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorSyntax` from `@sanity/ui/theme` instead.
  */
-interface CodeSkeletonProps extends SkeletonProps {
-  size?: number | number[];
-}
+export declare type ThemeColorSyntax = ThemeColorSyntax_2
+
+export {ThemeColorToneKey}
+
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-declare const TextSkeleton: react232.ForwardRefExoticComponent<Omit<TextSkeletonProps & Omit<react232.HTMLProps<HTMLDivElement>, "as" | "size" | "height" | "children">, "ref"> & react232.RefAttributes<HTMLDivElement>>;
+export declare interface ThemeContextValue {
+  /** @deprecated No longer used */
+  version: 0.0
+  scheme: ThemeColorSchemeKey_2
+  theme: RootTheme_2
+  tone: ThemeColorCardToneKey
+}
+
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
+ * @deprecated Use `ThemeFont` from `@sanity/ui/theme` instead.
  */
-declare const LabelSkeleton: react232.ForwardRefExoticComponent<Omit<LabelSkeletonProps & Omit<react232.HTMLProps<HTMLDivElement>, "as" | "size" | "height" | "children">, "ref"> & react232.RefAttributes<HTMLDivElement>>;
+export declare type ThemeFont = ThemeFont_2
+
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
+ * @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.
  */
-declare const HeadingSkeleton: react232.ForwardRefExoticComponent<Omit<HeadingSkeletonProps & Omit<react232.HTMLProps<HTMLDivElement>, "as" | "size" | "height" | "children">, "ref"> & react232.RefAttributes<HTMLDivElement>>;
+export declare type ThemeFontKey = ThemeFontKey_2
+
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
+ * @deprecated Use `ThemeFonts` from `@sanity/ui/theme` instead.
  */
-declare const CodeSkeleton: react232.ForwardRefExoticComponent<Omit<CodeSkeletonProps & Omit<react232.HTMLProps<HTMLDivElement>, "as" | "size" | "height" | "children">, "ref"> & react232.RefAttributes<HTMLDivElement>>;
+export declare type ThemeFonts = ThemeFonts_2
+
 /**
  * @public
+ * @deprecated Use `ThemeFontSize` from `@sanity/ui/theme` instead.
  */
-interface TabPanelProps extends BoxProps {
-  /**
-   * The `id` of the correlating `Tab` component.
-   */
-  'aria-labelledby': string;
-  'id': string;
-}
+export declare type ThemeFontSize = ThemeFontSize_2
+
 /**
  * @public
+ * @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.
  */
-declare const TabPanel: react232.ForwardRefExoticComponent<Omit<TabPanelProps & Omit<react232.HTMLProps<HTMLDivElement>, "as" | "id" | "role" | "aria-labelledby">, "ref"> & react232.RefAttributes<HTMLDivElement>>;
+export declare type ThemeFontWeight = ThemeFontWeight_2
+
 /**
  * @public
+ * @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.
  */
-interface ToastProps {
-  closable?: boolean;
-  description?: React.ReactNode;
-  onClose: () => void;
-  radius?: number | number[];
-  title?: React.ReactNode;
-  status?: 'error' | 'warning' | 'success' | 'info';
-  duration?: number;
-  updatedAt?: number;
-}
+export declare type ThemeFontWeightKey = ThemeFontWeightKey_2
+
+export {ThemeInput}
+
 /**
- * The `Toast` component gives feedback to users when an action has taken place.
- *
- * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
- *
  * @public
+ * @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.
+ */
+export declare type ThemeLayer = ThemeLayer_2
+
+/**
+ * @internal
  */
-declare function Toast(props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title' | 'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'>): React.JSX.Element;
-declare namespace Toast {
-  var displayName: string;
+export declare interface ThemeProps {
+  theme: Theme_2
 }
+
 /**
  * @public
  */
-interface ToastLayerProps {
-  children: React.ReactNode;
-  padding?: number | number[];
-  paddingX?: number | number[];
-  paddingY?: number | number[];
-  gap?: number | number[];
+export declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element
+
+export declare namespace ThemeProvider {
+  var displayName: string
 }
+
 /**
  * @public
  */
-interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
-  children?: React.ReactNode;
-  zOffset?: number | number[];
+export declare interface ThemeProviderProps {
+  children?: React.ReactNode
+  scheme?: ThemeColorSchemeKey_2
+  theme?: RootTheme_2
+  tone?: ThemeColorCardToneKey
 }
+
 /**
  * @public
+ * @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.
  */
-declare function ToastProvider(props: ToastProviderProps): React.JSX.Element;
-declare namespace ToastProvider {
-  var displayName: string;
-}
+export declare type ThemeShadow = ThemeShadow_2
+
 /**
+ * The `Toast` component gives feedback to users when an action has taken place.
+ *
+ * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ *
  * @public
  */
-interface ToastParams {
-  closable?: boolean;
-  description?: React.ReactNode;
-  duration?: number;
-  id?: string;
-  onClose?: () => void;
-  title?: React.ReactNode;
-  status?: 'error' | 'warning' | 'success' | 'info';
+export declare function Toast(
+  props: ToastProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      | 'as'
+      | 'height'
+      | 'ref'
+      | 'title'
+      | 'onAnimationStart'
+      | 'onDragStart'
+      | 'onDragEnd'
+      | 'onDrag'
+    >,
+): React.JSX.Element
+
+export declare namespace Toast {
+  var displayName: string
 }
+
 /**
  * @public
  */
-interface ToastContextValue {
-  version: 0.0;
+export declare interface ToastContextValue {
+  version: 0.0
   /**
    * Creates or updates a toast notification.
    * If a toast with the same ID already exists, it will be updated.
    * If an ID is not provided, a random one will be generated.
    * The returned ID can be used to programatically update a toast.
    */
-  push: (params: ToastParams) => string;
+  push: (params: ToastParams) => string
 }
+
 /**
  * @public
  */
-declare function useToast(): ToastContextValue;
+declare interface ToastLayerProps {
+  children: React.ReactNode
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
+  gap?: number | number[]
+}
+
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-interface TreeProps {
-  space?: number | number[];
+export declare interface ToastParams {
+  closable?: boolean
+  description?: React.ReactNode
+  duration?: number
+  id?: string
+  onClose?: () => void
+  title?: React.ReactNode
+  status?: 'error' | 'warning' | 'success' | 'info'
 }
+
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-declare const Tree: react232.ForwardRefExoticComponent<TreeProps & Omit<react232.HTMLProps<HTMLDivElement>, "ref" | "as" | "height" | "wrap" | "role" | "align"> & react232.RefAttributes<HTMLDivElement>>;
+export declare interface ToastProps {
+  closable?: boolean
+  description?: React.ReactNode
+  onClose: () => void
+  radius?: number | number[]
+  title?: React.ReactNode
+  status?: 'error' | 'warning' | 'success' | 'info'
+  duration?: number
+  updatedAt?: number
+}
+
 /**
- * @beta
+ * @public
  */
-interface TreeItemProps {
-  expanded?: boolean;
-  fontSize?: number | number[];
-  icon?: React.ElementType;
-  /**
-   * Allows passing a custom element type to the link component
-   */
-  linkAs?: BoxProps['as'];
-  padding?: number | number[];
-  space?: number | number[];
-  text?: React.ReactNode;
-  weight?: ThemeFontWeightKey$1;
+export declare function ToastProvider(props: ToastProviderProps): React.JSX.Element
+
+export declare namespace ToastProvider {
+  var displayName: string
 }
+
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
+ * @public
  */
-declare function TreeItem(props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>): React.JSX.Element;
-declare namespace TreeItem {
-  var displayName: string;
+export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
+  children?: React.ReactNode
+  zOffset?: number | number[]
 }
+
 /**
- * @beta
+ * Tooltips display information when hovering, focusing or tapping.
+ *
+ * @public
  */
-interface TreeState {
-  [key: string]: {
-    element: HTMLElement;
-    expanded: boolean;
-  } | undefined;
-}
+export declare const Tooltip: ForwardRefExoticComponent<
+  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'children' | 'as'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
+>
+
 /**
  * @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;
-  space: number | number[];
-  state: TreeState;
-}
+export declare const TooltipDelayGroupContext: Context<TooltipDelayGroupContextValue | null>
+
 /**
  * @beta
  */
-declare function useTree(): TreeContextValue;
+export declare interface TooltipDelayGroupContextValue {
+  setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void
+  setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void
+  openDelay: number
+  closeDelay: number
+  openTooltipId: string | null
+}
+
 /**
- * @internal
- */
-declare function _raf(fn: () => void): () => void;
+ * @public
+ * Provides context for a group of tooltip elements that should share a delay
+ * which temporarily becomes 1 ms after the first floating element of the group opens.
+ */
+export declare function TooltipDelayGroupProvider(
+  props: TooltipDelayGroupProviderProps,
+): React.JSX.Element
+
+export declare namespace TooltipDelayGroupProvider {
+  var displayName: string
+}
+
 /**
- * @internal
- */
-declare function _raf2(fn: () => void): () => void;
+ * @public
+ * */
+export declare interface TooltipDelayGroupProviderProps {
+  children?: React.ReactNode
+  /**
+   * Handles the delays to open or close a tooltip inside a group
+   *
+   * If only a `number` is passed, it will be used for both opening and closing.
+   *
+   * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+   *
+   * @public
+   */
+  delay: Delay
+}
+
 /**
- * @internal
+ * @public
  */
-declare function _hasFocus(element: HTMLElement): boolean;
+export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
+  /** @deprecated Use `fallbackPlacements` instead. */
+  allowedAutoPlacements?: Placement[]
+  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_2
+  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
+}
+
 /**
- * @internal
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-declare function isFocusable(element: HTMLElement): boolean;
+export declare const Tree: ForwardRefExoticComponent<
+  TreeProps &
+    Omit<HTMLProps<HTMLDivElement>, 'height' | 'wrap' | 'ref' | 'role' | 'as' | 'align'> &
+    RefAttributes<HTMLDivElement>
+>
+
 /**
- * @internal
+ * @beta
  */
-declare function attemptFocus(element: HTMLElement): boolean;
+export declare 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
+  space: number | number[]
+  state: TreeState
+}
+
 /**
- * @internal
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-declare function focusFirstDescendant(element: HTMLElement): boolean;
+export declare function TreeItem(
+  props: TreeItemProps & Omit<React.HTMLProps<HTMLLIElement>, 'as' | 'ref' | 'role'>,
+): React.JSX.Element
+
+export declare namespace TreeItem {
+  var displayName: string
+}
+
 /**
- * @internal
+ * @beta
  */
-declare function focusLastDescendant(element: HTMLElement): boolean;
+export declare interface TreeItemProps {
+  expanded?: boolean
+  fontSize?: number | number[]
+  icon?: React.ElementType
+  /**
+   * Allows passing a custom element type to the link component
+   */
+  linkAs?: BoxProps['as']
+  padding?: number | number[]
+  space?: number | number[]
+  text?: React.ReactNode
+  weight?: ThemeFontWeightKey_2
+}
+
 /**
- * @internal
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-declare function _isScrollable(el: Node): boolean;
-/** @beta */
-type ArrayPropPrimitive = string | number | boolean | undefined | null;
+export declare interface TreeProps {
+  space?: number | number[]
+}
+
 /**
- * @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[];
+export declare interface TreeState {
+  [key: string]:
+    | {
+        element: HTMLElement
+        expanded: boolean
+      }
+    | undefined
+}
+
 /**
- * @public
+ * @deprecated instead of `useArrayProp(width)` use `Array.isArray(width) ? width : [width]` instead
+ * @beta
  */
-type ClickOutsideListener = (event: MouseEvent) => void;
+export declare function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
+  val: T | T[] | undefined,
+  defaultVal?: T[],
+): T[]
+
 /**
  * @public
  */
-type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[];
+export declare function useBoundaryElement(): BoundaryElementContextValue
+
 /**
  * @public
  * @deprecated replaced by the new `useClickOutsideEvent` hook, instead of:
@@ -548,75 +2778,53 @@ type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[];
  * return <button ref={buttonRef} />
  * ```
  */
-declare function useClickOutside(listener: ClickOutsideListener, elementsArg?: ClickOutsideElements, boundaryElement?: HTMLElement | null): (el: HTMLElement | null) => void;
-/**
- * @public
- */
-type ClickOutsideEventListener = (event: MouseEvent) => void;
+export declare function useClickOutside(
+  listener: ClickOutsideListener,
+  elementsArg?: ClickOutsideElements,
+  boundaryElement?: HTMLElement | null,
+): (el: HTMLElement | null) => void
+
 /**
  * @public
  */
-type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[];
+export declare function useClickOutsideEvent(
+  listener: ClickOutsideEventListener | false | undefined,
+  elementsArg?: () => ClickOutsideEventElements,
+  boundaryElement?: () => HTMLElement | null,
+): void
+
 /**
- * @public
+ * @beta
  */
-declare function useClickOutsideEvent(listener: ClickOutsideEventListener | false | undefined, elementsArg?: () => ClickOutsideEventElements, boundaryElement?: () => HTMLElement | null): void;
+export declare function useCustomValidity(
+  ref: {
+    current: null | {
+      setCustomValidity: (validity: string) => void
+    }
+  },
+  customValidity: string | undefined,
+): void
+
 /**
+ * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-declare function useCustomValidity(ref: {
-  current: null | {
-    setCustomValidity: (validity: string) => void;
-  };
-}, customValidity: string | undefined): void;
+export declare function useDialog(): DialogContextValue
+
 /**
  * Subscribe to the rect of a DOM element.
  * @beta
  *
  * @deprecated Use `useElementSize` instead
  */
-declare function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null;
-/**
- * @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;
-}
-/**
- * @internal
- */
-interface _ElementSizeListener {
-  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void;
-}
-/**
- * @internal
- */
-declare const _elementSizeObserver: _ElementSizeObserver;
+export declare function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null
+
 /**
  * Subscribe to the size of a DOM element.
  * @beta
  */
-declare function useElementSize(element: HTMLElement | null): ElementSize | null;
+export declare function useElementSize(element: HTMLElement | null): ElementSize | null
+
 /**
  * @beta
  * @deprecated use `useImperativeHandle` instead
@@ -627,7 +2835,10 @@ declare function useElementSize(element: HTMLElement | null): ElementSize | null
  * +useImperativeHandle(forwardedRef, () => ref.current)
  * ```
  */
-declare function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.MutableRefObject<T | null>;
+export declare function useForwardedRef<T>(
+  ref: React.ForwardedRef<T>,
+): React.MutableRefObject<T | null>
+
 /**
  * Adds global keydown event listener to the window.
  *
@@ -635,7 +2846,16 @@ declare function useForwardedRef<T>(ref: React.ForwardedRef<T>): React.MutableRe
  * @param options - The options to pass to the addEventListener function (example, capture: true)
  * @beta
  */
-declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void, options?: AddEventListenerOptions): void;
+export declare function useGlobalKeyDown(
+  onKeyDown: (event: KeyboardEvent) => void,
+  options?: AddEventListenerOptions,
+): void
+
+/**
+ * @public
+ */
+export declare function useLayer(): LayerContextValue
+
 /**
  * Efficiently subscribes to `window.matchMedia` queries
  *
@@ -643,19 +2863,35 @@ declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void, opt
  *
  * @public
  */
-declare function useMatchMedia(mediaQueryString: `(${string})`, getServerSnapshot?: () => boolean): boolean;
-/**
- * @internal
- */
-interface _MediaStore {
-  subscribe: (onStoreChange: () => void) => () => void;
-  getSnapshot: () => number;
-}
+export declare function useMatchMedia(
+  mediaQueryString: `(${string})`,
+  getServerSnapshot?: () => boolean,
+): boolean
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-declare function useMediaIndex(): number;
+export declare function useMediaIndex(): number
+
+/**
+ * @public
+ */
+export declare function usePortal(): PortalContextValue
+
+/**
+ * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
+ *
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://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
  *
@@ -667,115 +2903,70 @@ declare function useMediaIndex(): number;
  *
  * @public
  */
-declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean;
-/**
- * @internal
- */
-declare const _ResizeObserver: typeof ResizeObserver;
-/**
- * @internal
- */
-declare function _fillCSSObject(keys: string[], value: string | number | CSSObject): CSSObject;
+export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
+
 /**
  * @public
  */
-declare function rem(pixelValue: number): string | 0;
-/**
- * @internal
- */
-declare function _responsive<T>(media: number[], values: T[], callback: (value: T, index: number, array: T[]) => CSSObject): CSSObject[];
-/**
- * @internal
- */
-declare function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[];
-/**
- * @internal
- */
-declare function _getResponsiveSpace(theme: Theme$1, props: string[], spaceIndexes?: number[]): CSSObject[] | null;
-/**
- * @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;
-}
+export declare function useRootTheme(): ThemeContextValue
+
 /**
- * Get responsive CSS for the `code` font style.
- * @internal
+ * @public
  */
-declare function responsiveCodeFontStyle(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
+export declare function useTheme(): Theme_2
+
 /**
- * Get responsive CSS for the `heading` font style.
- * @internal
+ * @public
  */
-declare function responsiveHeadingFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
+export declare function useTheme_v2(): Theme_v2
+
 /**
- * Get responsive CSS for the `label` font style.
- * @internal
+ * @public
  */
-declare function responsiveLabelFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
+export declare function useToast(): ToastContextValue
+
 /**
- * Get responsive text align styles.
- * @internal
+ * @beta
  */
-declare function responsiveTextAlignStyle(props: ResponsiveTextAlignStyleProps & ThemeProps): CSSObject[];
+export declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null
+
 /**
- * Get responsive CSS for the `text` font style.
- * @internal
+ * @beta
  */
-declare function responsiveTextFont(props: ResponsiveFontStyleProps & ThemeProps): CSSObject[];
+export declare function useTree(): TreeContextValue
+
 /**
- * @public
+ * @beta
  */
-interface ThemeColorProviderProps {
-  children?: React.ReactNode;
-  scheme?: ThemeColorSchemeKey$1;
-  tone?: ThemeColorCardToneKey;
-}
+export declare const VirtualList: ForwardRefExoticComponent<
+  VirtualListProps<any> &
+    StackProps &
+    Omit<HTMLProps<HTMLDivElement>, 'children' | 'ref' | 'onChange' | 'as'> &
+    RefAttributes<HTMLDivElement>
+>
+
 /**
- * @public
+ * @beta
  */
-declare function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element;
-declare namespace ThemeColorProvider {
-  var displayName: string;
+export declare interface VirtualListChangeOpts {
+  fromIndex: number
+  gap: number
+  itemHeight: number
+  scrollHeight: number
+  scrollTop: number
+  toIndex: number
 }
+
 /**
- * @public
+ * @beta
  */
-interface ThemeContextValue {
-  /** @deprecated No longer used */
-  version: 0.0;
-  scheme: ThemeColorSchemeKey$1;
-  theme: RootTheme$1;
-  tone: ThemeColorCardToneKey;
+export declare 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
 }
-/**
- * @public
- */
-declare function useRootTheme(): ThemeContextValue;
-export { type ArrayPropPrimitive, Arrow, Autocomplete, AutocompleteInputChangeMsg, AutocompleteInputFoocusMsg, AutocompleteMsg, AutocompleteOpenButtonProps, AutocompleteProps, AutocompleteRootBlurMsg, AutocompleteRootClearMsg, AutocompleteRootEscapeMsg, AutocompleteRootOpenMsg, AutocompleteRootSetActiveValueMsg, AutocompleteRootSetListFocusedMsg, AutocompleteState, AutocompleteValueChangeMsg, Avatar, AvatarCounter, AvatarCounterProps, AvatarPosition, AvatarProps, AvatarRootStyleProps, AvatarSize, AvatarStack, AvatarStackProps, AvatarStatus, Badge, BadgeMode, BadgeProps, BadgeTone, BaseAutocompleteOption, BaseTheme, BoundaryElementContextValue, BoundaryElementProvider, BoundaryElementProviderProps, Box, BoxDisplay, BoxHeight, BoxOverflow, BoxProps, BoxShadow, BoxSizing, Breadcrumbs, BreadcrumbsProps, Button, ButtonMode, ButtonProps, ButtonTextAlign, ButtonTone, ButtonWidth, Card, CardProps, CardStyleProps, CardTone, Checkbox, CheckboxProps, ClickOutsideElements, ClickOutsideEventElements, ClickOutsideEventListener, ClickOutsideListener, Code, CodeProps, CodeSkeleton, CodeSkeletonProps, ConditionalWrapper, Container, ContainerProps, Delay, Dialog, DialogContext, DialogContextValue, DialogPosition, DialogProps, DialogProvider, DialogProviderProps, ElementQuery, ElementRectValue, ElementSize, ErrorBoundary, ErrorBoundaryProps, ErrorBoundaryState, Flex, FlexAlign, FlexDirection, FlexJustify, FlexProps, FlexValue, FlexWrap, FontWeightStyleProps, Grid, GridAutoCols, GridAutoFlow, GridAutoRows, GridItemColumn, GridItemColumnEnd, GridItemColumnStart, GridItemRow, GridItemRowEnd, GridItemRowStart, GridProps, HSL, Heading, HeadingProps, HeadingSkeleton, HeadingSkeletonProps, Hotkeys, HotkeysProps, Inline, InlineProps, KBD, KBDProps, Label, LabelProps, LabelSkeleton, LabelSkeletonProps, Layer, LayerContextValue, LayerProps, LayerProvider, LayerProviderProps, MediaQueryProps, Menu, MenuButton, MenuButtonProps, MenuDivider, MenuGroup, MenuGroupProps, MenuItem, MenuItemProps, MenuProps, PartialThemeColorBuilderOpts, Placement, Popover, PopoverMargins, PopoverProps, PopoverUpdateCallback, PopoverWidth, Portal, PortalContextValue, PortalProps, PortalProvider, PortalProviderProps, RGB, Radio, RadioProps, Radius, ResponsiveAvatarSizeStyleProps, ResponsiveBorderProps, ResponsiveBoxProps, ResponsiveFlexItemProps, ResponsiveFlexProps, ResponsiveFontSizeStyleProps, ResponsiveFontStyleProps, ResponsiveGridItemProps, ResponsiveGridProps, ResponsiveMarginProps, ResponsivePaddingProps, ResponsiveRadiusProps, ResponsiveShadowProps, ResponsiveTextAlignStyleProps, ResponsiveWidthProps, ResponsiveWidthStyleProps, RootTheme, Select, SelectProps, SelectableTone, Skeleton, SkeletonProps, Spinner, SpinnerProps, SrOnly, SrOnlyProps, Stack, StackProps, Styles, Switch, SwitchProps, Tab, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, Text, TextAlign, TextArea, TextAreaProps, TextInput, TextInputClearButtonProps, TextInputProps, TextInputType, TextProps, TextSkeleton, TextSkeletonProps, Theme, ThemeAvatar, ThemeColor, ThemeColorBase, ThemeColorBuilderOpts, ThemeColorButton, ThemeColorButtonModeKey, ThemeColorButtonState, ThemeColorButtonStates, ThemeColorButtonTones, ThemeColorCard, ThemeColorCardState, ThemeColorGenericState, ThemeColorInput, ThemeColorInputState, ThemeColorInputStates, ThemeColorMuted, ThemeColorMutedTone, ThemeColorName, ThemeColorProvider, ThemeColorProviderProps, ThemeColorScheme, ThemeColorSchemeKey, ThemeColorSchemes, ThemeColorSelectable, ThemeColorSelectableState, ThemeColorSelectableStates, ThemeColorSolid, ThemeColorSolidTone, ThemeColorSpot, ThemeColorSpotKey, ThemeColorSyntax, ThemeColorToneKey, ThemeContextValue, ThemeFont, ThemeFontKey, ThemeFontSize, ThemeFontWeight, ThemeFontWeightKey, ThemeFonts, ThemeInput, ThemeLayer, ThemeProps, ThemeProvider, ThemeProviderProps, ThemeShadow, Toast, ToastContextValue, ToastParams, ToastProps, ToastProvider, ToastProviderProps, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupContextValue, TooltipDelayGroupProvider, TooltipDelayGroupProviderProps, TooltipProps, Tree, TreeContextValue, TreeItem, TreeItemProps, TreeProps, TreeState, VirtualList, VirtualListChangeOpts, VirtualListProps, _ElementSizeListener, _ElementSizeObserver, _ElementSizeSubscriber, _MediaStore, _ResizeObserver, _elementSizeObserver, _fillCSSObject, _getArrayProp, _getResponsiveSpace, _hasFocus, _isEnterToClickElement, _isScrollable, _raf, _raf2, _responsive, attemptFocus, containsOrEqualsElement, createColorTheme, focusFirstDescendant, focusLastDescendant, hexToRgb, hslToRgb, isFocusable, isHTMLAnchorElement, isHTMLButtonElement, isHTMLElement, isHTMLInputElement, isHTMLSelectElement, isHTMLTextAreaElement, multiply, parseColor, rem, responsiveCodeFontStyle, responsiveHeadingFont, responsiveLabelFont, responsiveTextAlignStyle, responsiveTextFont, rgbToHex, rgbToHsl, rgba, screen, studioTheme, useArrayProp, useBoundaryElement, useClickOutside, useClickOutsideEvent, useCustomValidity, useDialog, useElementRect, useElementSize, useForwardedRef, useGlobalKeyDown, useLayer, useMatchMedia, useMediaIndex, usePortal, usePrefersDark, usePrefersReducedMotion, useRootTheme, useTheme, useTheme_v2, useToast, useTooltipDelayGroup, useTree };
-//# sourceMappingURL=index.d.ts.map
+
+export {}