@sanity/ui 3.0.2 → 4.0.0-static.2

package/dist/index.d.ts

@@ -1,97 +1,94 @@
-import {BaseTheme as BaseTheme_2} from '@sanity/ui/theme'
+import type {AlignItems} from '@sanity/ui/css'
+import type {AvatarColor} from '@sanity/ui/theme'
+import type {AvatarSize} from '@sanity/ui/theme'
+import {BadgeStyleProps} from '@sanity/ui/css'
+import {BoxStyleProps} from '@sanity/ui/css'
+import {Breakpoint} from '@sanity/ui/css'
+import type {ButtonStyleProps} from '@sanity/ui/css'
+import {CardStyleProps} from '@sanity/ui/css'
+import type {CardTone} from '@sanity/ui/theme'
+import {CodeStyleProps} from '@sanity/ui/css'
+import type {ColorScheme} from '@sanity/ui/theme'
 import {Component} from 'react'
-import {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 type {ComponentClass} from 'react'
+import type {ComponentProps} from 'react'
+import type {ComponentType as ComponentType_2} from 'react'
+import {ContainerStyleProps} from '@sanity/ui/css'
+import type {ContainerWidth} from '@sanity/ui/theme'
+import type {Context} from 'react'
+import type {DisplayStyleProps} from '@sanity/ui/css'
+import type {ElementTone} from '@sanity/ui/theme'
+import {ElementType as ElementType_2} from 'react'
+import {ErrorInfo} from 'react'
+import type {ExoticComponent} from 'react'
+import type {FlexDirection} from '@sanity/ui/css'
+import {FlexStyleProps} from '@sanity/ui/css'
+import type {FlexWrap} from '@sanity/ui/css'
+import type {FontCodeSize} from '@sanity/ui/theme'
+import type {FontHeadingSize} from '@sanity/ui/theme'
+import type {FontLabelSize} from '@sanity/ui/theme'
+import type {FontTextSize} from '@sanity/ui/theme'
+import type {FontWeight} from '@sanity/ui/theme'
+import {ForwardedRef} from 'react'
+import type {FunctionComponent} from 'react'
+import {GapStyleProps} from '@sanity/ui/css'
+import {HeadingStyleProps} from '@sanity/ui/css'
 import {HTMLAttributes} from 'react'
-import {HTMLProps} from 'react'
-import {IStyledComponentBase} from 'styled-components/dist/types'
-import {multiply as multiply_2} from '@sanity/ui/theme'
-import {MutableRefObject} from 'react'
-import {NamedExoticComponent} from 'react'
-import {parseColor as parseColor_2} from '@sanity/ui/theme'
-import {PartialThemeColorBuilderOpts} from '@sanity/ui/theme'
+import {InputStyleProps} from '@sanity/ui/css'
+import type {JSX} from 'react'
+import type {JustifyContent} from '@sanity/ui/css'
+import {LabelStyleProps} from '@sanity/ui/css'
+import {MaxWidth} from '@sanity/ui/css'
+import {MouseEventHandler} from 'react'
+import {PaddingStyleProps} from '@sanity/ui/css'
 import {PropsWithChildren} from 'react'
+import type {Radius} from '@sanity/ui/theme'
+import {RadiusStyleProps} from '@sanity/ui/css'
+import {ReactElement} from 'react'
 import {ReactNode} from 'react'
+import type {ReactPortal} from 'react'
 import {Ref} from 'react'
 import {RefAttributes} from 'react'
-import {RefCallback} 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'
+import {ResponsiveProp} from '@sanity/ui/css'
+import {RootStyleProps} from '@sanity/ui/css'
+import {SelectableStyleProps} from '@sanity/ui/css'
+import {SelectStyleProps} from '@sanity/ui/css'
+import {ShadowStyleProps} from '@sanity/ui/css'
+import {SkeletonStyleProps} from '@sanity/ui/css'
+import type {Space} from '@sanity/ui/theme'
+import {TextAreaStyleProps} from '@sanity/ui/css'
+import {TextOverflowStyleProps} from '@sanity/ui/css'
+import {TextStyleProps} from '@sanity/ui/css'
+import type {Width} from '@sanity/ui/css'
 
-/** @beta */
-export declare type ArrayPropPrimitive = string | number | boolean | undefined | null
+/** @internal */
+export declare function Arrow<E extends ArrowElementType = typeof DEFAULT_ARROW_ELEMENT>(
+  props: ArrowProps<E>,
+): React.JSX.Element
+
+/** @internal */
+export declare type ArrowElementType = 'div' | 'span' | ComponentType
+
+/** @internal */
+export declare type ArrowOwnProps = {
+  width: number
+  height: number
+  radius?: number
+}
 
 /** @internal */
-export declare const Arrow: ForwardRefExoticComponent<
-  Omit<
-    {
-      width: number
-      height: number
-      radius?: number
-    } & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
+export declare type ArrowProps<E extends ArrowElementType = ArrowElementType> = Props<
+  ArrowOwnProps,
+  E
 >
 
+/**
+ * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
+ *
+ * @public
+ */
+export declare type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
+
 /**
  * @internal
  */
@@ -103,33 +100,13 @@ export declare function attemptFocus(element: HTMLElement): boolean
  *
  * @public
  */
-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
+export declare function Autocomplete<
+  E extends AutocompleteElementType = typeof DEFAULT_AUTOCOMPLETE_ELEMENT,
+  O extends BaseAutocompleteOption = BaseAutocompleteOption,
+>(props: AutocompleteProps<E, O>): React.JSX.Element
+
+/** @public */
+export declare type AutocompleteElementType = 'input' | ComponentType
 
 /**
  * @internal
@@ -160,26 +137,19 @@ export declare type AutocompleteMsg =
   | AutocompleteInputFoocusMsg
   | AutocompleteValueChangeMsg
 
-/**
- * @public
- */
-export declare type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> &
-  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
+/** @public */
+export declare type AutocompleteOpenButtonProps = Omit<ButtonProps<'button'>, 'as'>
 
-/**
- * @public
- */
-export declare interface AutocompleteProps<
-  Option extends BaseAutocompleteOption = BaseAutocompleteOption,
-> {
+/** @public */
+export declare type AutocompleteOwnProps<
+  O extends BaseAutocompleteOption = BaseAutocompleteOption,
+> = TextInputOwnProps & {
   border?: boolean
   customValidity?: string
-  filterOption?: (query: string, option: Option) => boolean
-  fontSize?: number | number[]
-  icon?: ElementType | ReactNode
-  id: string
+  filterOption?: (query: string, option: O) => boolean
+  icon?: ElementType_2 | ReactNode
   /** @beta */
-  listBox?: BoxProps
+  listBox?: BoxOwnProps
   loading?: boolean
   onChange?: (value: string) => void
   onQueryChange?: (query: string | null) => void
@@ -189,16 +159,15 @@ export declare interface AutocompleteProps<
   /** @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'>
+  options?: O[]
+  padding?: ResponsiveProp<Space>
+  popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
   prefix?: ReactNode
   radius?: Radius | Radius[]
   /** @beta */
   relatedElements?: HTMLElement[]
   /** The callback function for rendering each option. */
-  renderOption?: (option: Option) => React.JSX.Element
+  renderOption?: (option: O) => React.JSX.Element
   /** @beta */
   renderPopover?: (
     props: {
@@ -208,14 +177,19 @@ export declare interface AutocompleteProps<
       onMouseEnter: () => void
       onMouseLeave: () => void
     },
-    ref: Ref<HTMLDivElement>,
+    ref: ForwardedRef<HTMLDivElement>,
   ) => ReactNode
-  renderValue?: (value: string, option?: Option) => string
+  renderValue?: (value: string, option?: O) => string
   suffix?: ReactNode
-  /** The current value. */
   value?: string
 }
 
+/** @public */
+export declare type AutocompleteProps<
+  E extends AutocompleteElementType = AutocompleteElementType,
+  O extends BaseAutocompleteOption = BaseAutocompleteOption,
+> = Props<AutocompleteOwnProps<O>, E>
+
 /**
  * @internal
  */
@@ -286,157 +260,123 @@ export declare interface AutocompleteValueChangeMsg {
  *
  * @public
  */
-export declare const Avatar: ForwardRefExoticComponent<
-  AvatarProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
->
+export declare function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(
+  props: AvatarProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare const AvatarCounter: ForwardRefExoticComponent<
-  AvatarCounterProps & RefAttributes<HTMLDivElement>
->
+/** @public */
+export declare function AvatarCounter<
+  E extends AvatarCounterElementType = typeof DEFAULT_AVATAR_COUNTER_ELEMENT,
+>(props: AvatarCounterProps<E>): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface AvatarCounterProps {
+/** @public */
+export declare type AvatarCounterElementType = 'button' | 'div' | 'span' | ComponentType
+
+/** @public */
+export declare interface AvatarCounterOwnProps {
   count: number
-  size?: AvatarSize | AvatarSize[]
-  /** @deprecated No longer supported. */
-  tone?: 'navbar'
+  size?: ResponsiveProp<AvatarSize>
 }
 
-/**
- * @public
- */
-export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
+/** @public */
+export declare type AvatarCounterProps<
+  E extends AvatarCounterElementType = AvatarCounterElementType,
+> = Props<AvatarCounterOwnProps, E>
 
-/**
- * @public
- */
-export declare interface AvatarProps {
+/** @public */
+export declare type AvatarElementType = 'a' | 'button' | 'div' | 'span' | ComponentType
+
+/** @public */
+export declare interface AvatarOwnProps {
   /** @beta */
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  color?: ThemeColorAvatarColorKey
+  color?: AvatarColor
   initials?: string
   onImageLoadError?: (event: Error) => void
-  size?: AvatarSize | AvatarSize[]
+  size?: ResponsiveProp<AvatarSize>
   src?: string
-  /**
-   * The status of the entity this Avatar represents.
-   * @alpha
-   */
-  status?: AvatarStatus
   title?: string
 }
 
-/**
- * @internal
- */
-export declare interface AvatarRootStyleProps {
-  $color: ThemeColorAvatarColorKey
-}
-
-/**
- * @public
- */
-export declare type AvatarSize = 0 | 1 | 2 | 3
+/** @public */
+export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
 
-/**
- * @public
- */
-export declare const AvatarStack: ForwardRefExoticComponent<
-  AvatarStackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
+/** @public */
+export declare type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props<
+  AvatarOwnProps,
+  E
 >
 
-/**
- * @public
- */
-export declare interface AvatarStackProps {
-  children: React.ReactNode
+/** @public */
+export declare function AvatarStack<
+  E extends AvatarStackElementType = typeof DEFAULT_AVATAR_STACK_ELEMENT,
+>(props: AvatarStackProps<E>): React.JSX.Element
+
+/** @public */
+export declare type AvatarStackChild = ReactElement<AvatarProps<'div'>> | null | undefined | false
+
+/** @public */
+export declare type AvatarStackElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export declare type AvatarStackOwnProps = Omit<
+  BoxOwnProps,
+  'align' | 'alignItems' | 'display' | 'justify' | 'justifyContent'
+> & {
+  children: AvatarStackChild | AvatarStackChild[]
   maxLength?: number
-  size?: AvatarSize | AvatarSize[]
-  /** @deprecated No longer supported. */
-  tone?: 'navbar'
+  size?: ResponsiveProp<AvatarSize>
 }
 
-/**
- * @public
- */
-export declare type AvatarStatus = 'online' | 'editing' | 'inactive'
+/** @public */
+export declare type AvatarStackProps<E extends AvatarStackElementType = AvatarStackElementType> =
+  Props<AvatarStackOwnProps, E>
 
 /**
  * Badges are used to tag resources.
  *
  * @public
  */
-export declare const Badge: ForwardRefExoticComponent<
-  Omit<BadgeProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
->
+export declare function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(
+  props: BadgeProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- * @deprecated No longer used
- */
-export declare type BadgeMode = 'default' | 'outline'
+/** @public */
+export declare type BadgeElementType = 'div' | 'span' | ComponentType
 
-/**
- * @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 BadgeOwnProps = BadgeStyleProps &
+  FlexStyleProps &
+  PaddingStyleProps &
+  RadiusStyleProps
 
-/**
- * @public
- */
-export declare type BadgeTone = ThemeColorStateToneKey
+/** @public */
+export declare type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<
+  BadgeOwnProps,
+  E
+>
 
-/**
- * @public
- */
+/** @public */
 export declare interface BaseAutocompleteOption {
   value: string
 }
 
-/**
- * @public
- * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
- */
-export declare type BaseTheme = BaseTheme_2
-
-/**
- * @public
- */
+/** @public */
 export declare interface BoundaryElementContextValue {
   version: 0.0
   element: HTMLElement | null
 }
 
-/**
- * @public
- */
+/** @public */
 export declare function BoundaryElementProvider(
   props: BoundaryElementProviderProps,
 ): React.JSX.Element
 
-export declare namespace BoundaryElementProvider {
-  var displayName: string
-}
-
-/**
- * @public
- */
+/** @public */
 export declare interface BoundaryElementProviderProps {
-  children: React.ReactNode
+  children: ReactNode
   element: HTMLElement | null
 }
 
@@ -446,120 +386,114 @@ export declare interface BoundaryElementProviderProps {
  *
  * @public
  */
-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'
+export declare function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
+  props: BoxProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
+/** @public */
+export declare type BoxElementType =
+  | 'a'
+  | 'article'
+  | 'aside'
+  | 'blockquote'
+  | 'body'
+  | 'button'
+  | 'details'
+  | 'div'
+  | 'header'
+  | 'fieldset'
+  | 'figure'
+  | 'figcaption'
+  | 'footer'
+  | 'form'
+  | 'html'
+  | 'iframe'
+  | 'kbd'
+  | 'label'
+  | 'legend'
+  | 'li'
+  | 'main'
+  | 'nav'
+  | 'ol'
+  | 'pre'
+  | 'section'
+  | 'span'
+  | 'summary'
+  | 'table'
+  | 'tbody'
+  | 'td'
+  | 'tfoot'
+  | 'th'
+  | 'thead'
+  | 'tr'
+  | 'ul'
+  | ComponentType
 
-/**
- * @public
- */
-export declare interface BoxProps
-  extends ResponsiveFlexItemProps,
-    ResponsiveBoxProps,
-    ResponsiveGridItemProps,
-    ResponsiveMarginProps,
-    ResponsivePaddingProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
-}
+/** @public */
+export declare type BoxOwnProps = BoxStyleProps
 
-/**
- * @public
- * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
- */
-export declare type BoxShadow = ThemeBoxShadow
+/** @public */
+export declare type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>
 
-/**
- * @public
- */
-export declare type BoxSizing = 'content' | 'border'
+/** @beta */
+export declare function Breadcrumbs<
+  E extends BreadcrumbsElementType = typeof DEFAULT_BREADCRUMBS_ELEMENT,
+>(props: BreadcrumbsProps<E>): React.JSX.Element
 
-/**
- * @beta
- */
-export declare const Breadcrumbs: ForwardRefExoticComponent<
-  BreadcrumbsProps &
-    Omit<HTMLProps<HTMLOListElement>, 'type' | 'ref' | 'as'> &
-    RefAttributes<HTMLOListElement>
->
+/** @beta */
+export declare type BreadcrumbsElementType = 'div' | 'nav' | ComponentType
 
-/**
- * @beta
- */
-export declare interface BreadcrumbsProps {
+/** @beta */
+export declare type BreadcrumbsOwnProps = GapStyleProps & {
+  expandButton?: Omit<ButtonProps<'button'>, 'as' | 'onClick' | 'selected'>
   maxLength?: number
-  separator?: React.ReactNode
-  space?: number | number[]
+  separator?: ReactNode
 }
 
-/**
- * @public
- */
-export declare const Button: ForwardRefExoticComponent<
-  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'width' | 'as'>, 'ref'> &
-    RefAttributes<HTMLButtonElement>
->
+/** @beta */
+export declare type BreadcrumbsProps<E extends BreadcrumbsElementType = BreadcrumbsElementType> =
+  Props<BreadcrumbsOwnProps, E>
 
-/**
- * @public
- */
-export declare type ButtonMode = ThemeColorButtonModeKey_2
+/** @public */
+export declare function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
+  props: ButtonProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-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 Do not use in production, as this might change.
-   */
-  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 ButtonElementType = 'a' | 'button' | 'label' | ComponentType
 
-/**
- * @public
- */
-export declare type ButtonTextAlign = 'left' | 'right' | 'center'
+/** @public */
+export declare type ButtonOwnProps = ButtonStyleProps &
+  DisplayStyleProps &
+  GapStyleProps &
+  PaddingStyleProps & {
+    'align'?: BoxStyleProps['alignItems']
+    'data-ui'?: string
+    'disabled'?: boolean
+    'fontSize'?: ResponsiveProp<FontTextSize>
+    'icon'?: ElementType_2 | ReactNode
+    'iconRight'?: ElementType_2 | ReactNode
+    'justify'?: BoxStyleProps['justifyContent']
+    /** @beta Do not use in production, as this might change.*/
+    'loading'?: boolean
+    'selected'?: boolean
+    'textAlign'?: ButtonTextAlign
+    'muted'?: boolean
+    'target'?: string
+    'text'?: ReactNode
+    'textOverflow'?: TextOwnProps['textOverflow']
+    'textWeight'?: TextOwnProps['weight']
+    'width'?: ResponsiveProp<Width>
+  }
 
-/**
- * @public
- */
-export declare type ButtonTone = ThemeColorStateToneKey
+/** @public */
+export declare type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<
+  ButtonOwnProps,
+  E
+>
 
-/**
- * @public
- */
-export declare type ButtonWidth = 'fill'
+/** @public */
+export declare type ButtonTextAlign = 'left' | 'right' | 'center'
 
 /**
  * The `Card` component acts much like a `Box`, but with a background and foreground color.
@@ -567,19 +501,30 @@ export declare type ButtonWidth = 'fill'
  *
  * @public
  */
-export declare const Card: ForwardRefExoticComponent<
-  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
+  props: CardProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface CardProps
-  extends BoxProps,
-    ResponsiveBorderProps,
-    ResponsiveRadiusProps,
-    ResponsiveShadowProps {
+/** @internal */
+export declare type _CardCompatProviderComponent = ComponentType_2<{
+  children?: ReactNode
+  tone: CardTone | 'inherit'
+  scheme: ColorScheme
+}>
+
+/** @public */
+export declare interface CardContextValue {
+  tone: CardTone
+  scheme: ColorScheme
+  /** @internal */
+  unstable_CompatProvider?: _CardCompatProviderComponent
+}
+
+/** @public */
+export declare type CardElementType = BoxElementType
+
+/** @public */
+export declare interface CardOwnProps extends BoxOwnProps, CardStyleProps {
   /**
    * Do not use in production.
    * @beta
@@ -590,150 +535,284 @@ export declare interface CardProps
    * @beta
    */
   __unstable_focusRing?: boolean
-  muted?: boolean
+  disabled?: boolean
   pressed?: boolean
-  scheme?: ThemeColorSchemeKey_2
-  tone?: CardTone
+  selected?: boolean
+  target?: string
 }
 
-/**
- * @internal
- */
-export declare interface CardStyleProps {
-  $checkered: boolean
-  $focusRing: boolean
-  $muted: boolean
-  $tone: ThemeColorToneKey
-}
+/** @public */
+export declare type CardProps<E extends CardElementType = CardElementType> = Props<CardOwnProps, E>
 
-/**
- * @public
- */
-export declare type CardTone = ThemeColorCardToneKey | 'inherit'
+/** @public */
+export declare function CardProvider(props: {
+  children?: ReactNode
+  tone: CardTone
+  scheme: ColorScheme
+  /** @internal */
+  unstable_CompatProvider?: _CardCompatProviderComponent
+}): React.JSX.Element
 
 /**
  * Checkboxes allow the user to select one or more items from a set.
  *
  * @public
  */
-export declare const Checkbox: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & CheckboxProps, 'ref'> &
-    RefAttributes<HTMLInputElement>
->
+export declare function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(
+  props: CheckboxProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface CheckboxProps {
+/** @public */
+export declare type CheckboxElementType = 'input' | ComponentType
+
+/** @public */
+export declare type CheckboxOwnProps = {
   indeterminate?: boolean
   customValidity?: string
 }
 
-/**
- * @public
- */
-export declare type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
+/** @public */
+export declare type CheckboxProps<E extends CheckboxElementType = CheckboxElementType> = Props<
+  CheckboxOwnProps,
+  E
+>
 
-/**
- * @public
- */
+/** @public */
 export declare type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
 
-/**
- * @public
- */
+/** @public */
 export declare type ClickOutsideEventListener = (event: MouseEvent) => void
 
-/**
- * @public
- */
-export declare type ClickOutsideListener = (event: MouseEvent) => void
+/** @public */
+export declare function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
+  props: CodeProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare const Code: ForwardRefExoticComponent<
-  Omit<CodeProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> & RefAttributes<HTMLElement>
->
+/** @public */
+export declare type CodeElementType = 'div' | 'pre' | ComponentType
 
-/**
- * @public
- */
-export declare interface CodeProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+/** @public */
+export declare type CodeOwnProps = CodeStyleProps & {
   /** Define the language to use for syntax highlighting. */
   language?: string
-  size?: number | number[]
-  weight?: string
+  size?: ResponsiveProp<FontCodeSize>
 }
 
+/** @public */
+export declare type CodeProps<E extends CodeElementType = CodeElementType> = Props<CodeOwnProps, E>
+
 /**
  * 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>
->
+export declare function CodeSkeleton<
+  E extends CodeSkeletonElementType = typeof DEFAULT_CODE_SKELETON_ELEMENT,
+>(props: CodeSkeletonProps<E>): React.JSX.Element
 
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare interface CodeSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+/** @beta */
+export declare type CodeSkeletonElementType = SkeletonElementType
+
+/** @beta */
+export declare type CodeSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontCodeSize>
 }
 
 /**
- * @internal
- * @deprecated this component will be removed in the next major release
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare function ConditionalWrapper({
-  children,
-  condition,
-  wrapper,
-}: {
-  children: React.ReactNode
-  condition: boolean
-  wrapper: (children: React.ReactNode) => React.ReactNode
-}): React.ReactNode
+export declare type CodeSkeletonProps<E extends CodeSkeletonElementType = CodeSkeletonElementType> =
+  Props<CodeSkeletonOwnProps, E>
 
-export declare namespace ConditionalWrapper {
-  var displayName: string
-}
+/** @public */
+export declare type ComponentType<P = any> =
+  | FunctionComponent<P>
+  | ComponentClass<P>
+  | ExoticComponent<P>
 
 /**
  * The `Container` component wraps content layout in a defined set of widths.
  *
  * @public
  */
-export declare const Container: ForwardRefExoticComponent<
-  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare function Container<
+  E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT,
+>(props: ContainerProps<E>): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
+/** @public */
+export declare type ContainerElementType = BoxElementType
+
+/** @public */
+export declare type ContainerOwnProps = Omit<BoxOwnProps, 'width'> & ContainerStyleProps
+
+/** @public */
+export declare type ContainerProps<E extends ContainerElementType = ContainerElementType> = Props<
+  ContainerOwnProps,
+  E
+>
 
 /**
  * @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
+/** @internal */
+export declare const DEFAULT_ARROW_ELEMENT = 'div'
 
-/**
- * @public
- */
+/** @public */
+export declare const DEFAULT_AUTOCOMPLETE_ELEMENT = 'input'
+
+/** @public */
+export declare const DEFAULT_AVATAR_COUNTER_ELEMENT = 'span'
+
+/** @public */
+export declare const DEFAULT_AVATAR_ELEMENT = 'span'
+
+/** @public */
+export declare const DEFAULT_AVATAR_STACK_ELEMENT = 'span'
+
+/** @public */
+export declare const DEFAULT_BADGE_ELEMENT = 'span'
+
+/** @public */
+export declare const DEFAULT_BOX_ELEMENT = 'div'
+
+/** @beta */
+export declare const DEFAULT_BREADCRUMBS_ELEMENT = 'nav'
+
+/** @public */
+export declare const DEFAULT_BUTTON_ELEMENT = 'button'
+
+/** @public */
+export declare const DEFAULT_CARD_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_CHECKBOX_ELEMENT = 'input'
+
+/** @public */
+export declare const DEFAULT_CODE_ELEMENT = 'pre'
+
+/** @beta */
+export declare const DEFAULT_CODE_SKELETON_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_CONTAINER_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_DIALOG_ELEMENT = 'div'
+
+/** @beta */
+export declare const DEFAULT_ELEMENT_QUERY_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_FLEX_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_GRID_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_HEADING_ELEMENT = 'div'
+
+/** @beta */
+export declare const DEFAULT_HEADING_SKELETON_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
+
+/** @public */
+export declare const DEFAULT_INLINE_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_KBD_ELEMENT = 'kbd'
+
+/** @public */
+export declare const DEFAULT_LABEL_ELEMENT = 'div'
+
+/** @beta */
+export declare const DEFAULT_LABEL_SKELETON_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_LAYER_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_MENU_DIVIDER_ELEMENT = 'hr'
+
+/** @public */
+export declare const DEFAULT_MENU_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_MENU_GROUP_ELEMENT = 'button'
+
+/** @public */
+export declare const DEFAULT_MENU_ITEM_ELEMENT = 'button'
+
+/** @public */
+export declare const DEFAULT_POPOVER_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_RADIO_ELEMENT = 'input'
+
+/** @public */
+export declare const DEFAULT_ROOT_ELEMENT = 'html'
+
+/** @public */
+export declare const DEFAULT_SELECT_ELEMENT = 'select'
+
+/** @internal */
+export declare const DEFAULT_SELECTABLE_ELEMENT = 'button'
+
+/** @beta */
+export declare const DEFAULT_SKELETON_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_SPINNER_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_SR_ONLY_ELEMENT = 'span'
+
+/** @public */
+export declare const DEFAULT_STACK_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_SWITCH_ELEMENT = 'input'
+
+/** @public */
+export declare const DEFAULT_TAB_ELEMENT = 'button'
+
+/** @public */
+export declare const DEFAULT_TAB_LIST_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_TAB_PANEL_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'
+
+/** @public */
+export declare const DEFAULT_TEXT_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
+
+/** @beta */
+export declare const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
+
+/** @internal */
+export declare const DEFAULT_TOAST_ELEMENT = 'li'
+
+/** @public */
+export declare const DEFAULT_TOOLTIP_ELEMENT = 'div'
+
+/** @beta */
+export declare const DEFAULT_TREE_ELEMENT = 'div'
+
+/** @beta */
+export declare const DEFAULT_TREE_ITEM_ELEMENT = 'a'
+
+/** @beta */
+export declare const DEFAULT_VIRTUAL_LIST_ELEMENT = 'div'
+
+/** @public */
 export declare type Delay =
   | number
   | Partial<{
@@ -746,10 +825,9 @@ export declare type Delay =
  *
  * @public
  */
-export declare const Dialog: ForwardRefExoticComponent<
-  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'width' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEMENT>(
+  props: DialogProps<E>,
+): React.JSX.Element
 
 /**
  * @internal
@@ -762,78 +840,98 @@ export declare const DialogContext: Context<DialogContextValue>
  */
 export declare interface DialogContextValue {
   version: 0.0
-  position?: DialogPosition | DialogPosition[]
-  zOffset?: number | number[]
+  position?: ResponsiveProp<DialogPosition>
+  zOffset?: ResponsiveProp<number>
 }
 
+/** @public */
+export declare type DialogElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export declare type DialogOwnProps = ContainerStyleProps &
+  Omit<LayerOwnProps, 'width'> & {
+    /**
+     * @beta
+     */
+    __unstable_autoFocus?: boolean
+    /**
+     * @beta
+     */
+    __unstable_hideCloseButton?: boolean
+    /**
+     * Whether the dialog should animate in on mount.
+     *
+     * @beta
+     * @defaultValue false
+     */
+    animate?: boolean
+    cardRadius?: ResponsiveProp<Radius>
+    contentRef?: ForwardedRef<HTMLDivElement>
+    footer?: ReactNode
+    header?: ReactNode
+    id: string
+    /** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
+    onActivate?: LayerProps['onActivate']
+    onClickOutside?: () => void
+    onClose?: () => void
+    open?: boolean
+    portal?: string
+    position?: ResponsiveProp<DialogPosition>
+    scheme?: ColorScheme
+    tone?: CardTone | 'inherit'
+    zOffset?: number | number[]
+  }
+
+/** @public */
+export declare type DialogPosition = 'absolute' | 'fixed'
+
+/** @public */
+export declare type DialogProps<E extends DialogElementType = DialogElementType> = Props<
+  DialogOwnProps,
+  E
+>
+
 /**
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare type DialogPosition = 'absolute' | 'fixed'
+export declare function DialogProvider(props: DialogProviderProps): React.JSX.Element
 
 /**
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-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
+export declare interface DialogProviderProps {
+  children?: ReactNode
+  position?: ResponsiveProp<DialogPosition>
+  zOffset?: ResponsiveProp<number>
 }
 
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
+ * DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function DialogProvider(props: DialogProviderProps): React.JSX.Element
+export declare function ElementQuery<
+  E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT,
+>(props: ElementQueryProps<E>): React.JSX.Element
 
-export declare namespace DialogProvider {
-  var displayName: string
-}
+/** @beta */
+export declare type ElementQueryElementType = 'div' | ComponentType
 
 /**
- * This API might change. DO NOT USE IN PRODUCTION.
+ * DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface DialogProviderProps {
-  children?: React.ReactNode
-  position?: DialogPosition | DialogPosition[]
-  zOffset?: number | number[]
+export declare type ElementQueryOwnProps = {
+  media?: number[]
 }
 
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const ElementQuery: ForwardRefExoticComponent<
-  Omit<MediaQueryProps & Omit<HTMLProps<HTMLDivElement>, 'media' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare type ElementQueryProps<E extends ElementQueryElementType = ElementQueryElementType> =
+  Props<ElementQueryOwnProps, E>
 
 /**
  * @beta
@@ -877,15 +975,22 @@ export declare const _elementSizeObserver: _ElementSizeObserver
  */
 export declare type _ElementSizeSubscriber = (elementRect: ElementSize) => void
 
+/** @public */
+export declare type ElementType<P> = TagType | ComponentType<P>
+
+/** @public */
+export declare type EmptyProps = {}
+
 /**
  * DO NOT USE IN PRODUCTION
  * @beta
  */
 export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   state: ErrorBoundaryState
+  static displayName: string
   static getDerivedStateFromError(error: Error): ErrorBoundaryState
-  componentDidCatch(error: Error, info: React.ErrorInfo): void
-  render(): React.ReactNode
+  componentDidCatch(error: Error, info: ErrorInfo): void
+  render(): ReactNode
 }
 
 /**
@@ -893,7 +998,7 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
  * @beta
  */
 export declare type ErrorBoundaryProps = PropsWithChildren<{
-  onCatch: (params: {error: Error; info: React.ErrorInfo}) => void
+  onCatch: (params: {error: Error; info: ErrorInfo}) => void
 }>
 
 /**
@@ -904,64 +1009,31 @@ 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'
+export declare function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(
+  props: FlexProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare type FlexJustify =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
+/** @public */
+export declare type FlexElementType = BoxElementType
 
-/**
- * @public
- */
-export declare interface FlexProps
-  extends Omit<BoxProps, 'display'>,
-    ResponsiveFlexProps,
-    ResponsiveFlexItemProps {
-  gap?: number | number[]
+/** @public */
+export declare type FlexOwnProps = Omit<
+  BoxOwnProps,
+  'align' | 'display' | 'flexDirection' | 'flexWrap'
+> & {
+  align?: ResponsiveProp<AlignItems>
+  direction?: ResponsiveProp<FlexDirection>
+  justify?: ResponsiveProp<JustifyContent>
+  wrap?: ResponsiveProp<FlexWrap>
 }
 
-/**
- * @public
- */
-export declare type FlexValue = number | 'none' | 'auto' | 'initial'
-
-/**
- * @public
- */
-export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
+/** @public */
+export declare type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>
 
 /**
  * @internal
@@ -976,191 +1048,156 @@ 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[]
+export declare function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[]
 
 /**
  * @internal
  */
-export declare function _getResponsiveSpace(
-  theme: Theme_2,
-  props: string[],
-  spaceIndexes?: number[],
-): CSSObject[] | null
+export declare function _getResponsiveProp<T>(
+  val: ResponsiveProp<T> | undefined,
+  defaultVal?: Partial<Record<Breakpoint, T>>,
+): Partial<Record<Breakpoint, T>>
 
 /**
  * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
  *
  * @public
  */
-export declare const Grid: ForwardRefExoticComponent<
-  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(
+  props: GridProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
+/** @public */
+export declare type GridElementType = BoxElementType
 
-/**
- * @public
- */
-export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
+/** @public */
+export declare type GridOwnProps = Omit<BoxOwnProps, 'display'>
 
-/**
- * @public
- */
-export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+/** @public */
+export declare type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>
 
 /**
- * @public
+ * @internal
  */
-export declare type GridItemColumn = 'auto' | 'full' | number
+export declare function _hasFocus(element: HTMLElement): boolean
 
 /**
+ * Typographic headings.
+ *
  * @public
  */
-export declare type GridItemColumnEnd = 'auto' | number
+export declare function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(
+  props: HeadingProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare type GridItemColumnStart = 'auto' | number
+/** @public */
+export declare type HeadingElementType =
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'span'
+  | ComponentType
 
-/**
- * @public
- */
-export declare type GridItemRow = 'auto' | 'full' | number
+/** @public */
+export declare type HeadingOwnProps = HeadingStyleProps & TextOverflowStyleProps
 
-/**
- * @public
- */
-export declare type GridItemRowEnd = 'auto' | number
+/** @public */
+export declare type HeadingProps<E extends HeadingElementType = HeadingElementType> = Props<
+  HeadingOwnProps,
+  E
+>
 
 /**
- * @public
- */
-export declare type GridItemRowStart = 'auto' | number
-
-/**
- * @public
- */
-export declare interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
-
-/**
- * @internal
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare function _hasFocus(element: HTMLElement): boolean
+export declare function HeadingSkeleton<
+  E extends HeadingSkeletonElementType = typeof DEFAULT_HEADING_SKELETON_ELEMENT,
+>(props: HeadingSkeletonProps<E>): React.JSX.Element
 
-/**
- * Typographic headings.
- *
- * @public
- */
-export declare const Heading: ForwardRefExoticComponent<
-  Omit<HeadingProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> &
-    RefAttributes<HTMLElement>
->
+/** @beta */
+export declare type HeadingSkeletonElementType = SkeletonElementType
 
-/**
- * @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
+/** @beta */
+export declare type HeadingSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontHeadingSize>
 }
 
 /**
  * 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
+export declare type HeadingSkeletonProps<
+  E extends HeadingSkeletonElementType = HeadingSkeletonElementType,
+> = Props<HeadingSkeletonOwnProps, E>
 
 /**
  * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
  *
  * @public
  */
-export declare const Hotkeys: ForwardRefExoticComponent<
-  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLElement>
->
+export declare function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(
+  props: HotkeysProps<E>,
+): React.JSX.Element | undefined
 
-/**
- * @public
- */
-export declare interface HotkeysProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  space?: number | number[]
+/** @public */
+export declare type HotkeysElementType = 'kbd' | ComponentType
+
+/** @public */
+export declare interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
+  fontSize?: ResponsiveProp<FontTextSize>
+  padding?: ResponsiveProp<Space>
   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
+/** @public */
+export declare type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<
+  HotkeysOwnProps,
+  E
+>
 
 /**
  * The `Inline` component is a layout utility for aligning and spacing items horizontally.
  *
  * @public
  */
-export declare const Inline: ForwardRefExoticComponent<
-  Omit<InlineProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
+export declare function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(
+  props: InlineProps<E>,
+): React.JSX.Element
+
+/** @public */
+export declare type InlineElementType = BoxElementType
+
+/** @public */
+export declare type InlineOwnProps = Omit<
+  BoxOwnProps,
+  | 'alignItems'
+  | 'flexDirection'
+  | 'flexWrap'
+  | 'justifyContent'
+  | 'gridAutoColumns'
+  | 'gridAutoFlow'
+  | 'gridAutoRows'
+  | 'gridColumnEnd'
+  | 'gridColumnStart'
+  | 'gridColumn'
+  | 'gridRowEnd'
+  | 'gridRowStart'
+  | 'gridRow'
+  | 'gridTemplateColumns'
+  | 'gridTemplateRows'
 >
 
-/**
- * @public
- */
-export declare interface InlineProps extends Omit<BoxProps, 'display'> {
-  /** The spacing between children. */
-  space?: number | number[]
-}
+/** @public */
+export declare type InlineProps<E extends InlineElementType = InlineElementType> = Props<
+  InlineOwnProps,
+  E
+>
 
 /**
  * @internal
@@ -1212,74 +1249,83 @@ export declare function _isScrollable(el: Node): boolean
  *
  * @public
  */
-export declare const KBD: ForwardRefExoticComponent<
-  KBDProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLDivElement>
->
+export declare function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(
+  props: KBDProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface KBDProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-}
+/** @public */
+export declare type KBDElementType = 'kbd' | ComponentType
+
+/** @public */
+export declare type KBDOwnProps = BoxOwnProps &
+  RadiusStyleProps & {
+    fontSize?: ResponsiveProp<FontTextSize>
+  }
+
+/** @public */
+export declare type KBDProps<E extends KBDElementType = KBDElementType> = Props<KBDOwnProps, E>
 
 /**
  * Typographic labels.
  *
  * @public
  */
-export declare const Label: ForwardRefExoticComponent<
-  Omit<LabelProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(
+  props: LabelProps<E>,
+): React.JSX.Element
 
-/**
- * @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
-}
+/** @public */
+export declare type LabelElementType =
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'li'
+  | 'p'
+  | 'span'
+  | ComponentType
 
-/**
- * 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>
+/** @public */
+export declare type LabelOwnProps = LabelStyleProps & TextOverflowStyleProps
+
+/** @public */
+export declare type LabelProps<E extends LabelElementType = LabelElementType> = Props<
+  LabelOwnProps,
+  E
 >
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface LabelSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+export declare function LabelSkeleton<
+  E extends LabelSkeletonElementType = typeof DEFAULT_LABEL_SKELETON_ELEMENT,
+>(props: LabelSkeletonProps<E>): React.JSX.Element
+
+/** @beta */
+export declare type LabelSkeletonElementType = SkeletonElementType
+
+/** @beta */
+export declare type LabelSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontLabelSize>
 }
 
 /**
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare const Layer: ForwardRefExoticComponent<
-  Omit<LayerProps & Omit<HTMLProps<HTMLDivElement>, 'as'>, 'ref'> & RefAttributes<HTMLDivElement>
->
+export declare type LabelSkeletonProps<
+  E extends LabelSkeletonElementType = LabelSkeletonElementType,
+> = Props<LabelSkeletonOwnProps, E>
+
+/** @public */
+export declare function Layer<E extends LayerElementType = typeof DEFAULT_LAYER_ELEMENT>(
+  props: LayerProps<E>,
+): React.JSX.Element
 
 /** @public */
 export declare interface LayerContextValue {
@@ -1291,40 +1337,29 @@ export declare interface LayerContextValue {
   zIndex: number
 }
 
-/**
- * @public
- */
-export declare interface LayerProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+/** @public */
+export declare type LayerElementType = CardElementType
+
+/** @public */
+export declare type LayerOwnProps = CardOwnProps & {
   /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
   onActivate?: (props: {activeElement: HTMLElement | null}) => void
-  zOffset?: number | number[]
+  zOffset?: ResponsiveProp<number>
 }
 
-/**
- * @public
- */
-export declare function LayerProvider(props: LayerProviderProps): React.JSX.Element
+/** @public */
+export declare type LayerProps<E extends LayerElementType = LayerElementType> = Props<
+  LayerOwnProps,
+  E
+>
 
-export declare namespace LayerProvider {
-  var displayName: string
-}
+/** @public */
+export declare function LayerProvider(props: LayerProviderProps): React.JSX.Element
 
-/**
- * @public
- */
+/** @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[]
+  children?: ReactNode
+  zOffset?: ResponsiveProp<number>
 }
 
 /**
@@ -1332,7 +1367,7 @@ export declare interface MediaQueryProps {
  */
 export declare interface _MediaStore {
   subscribe: (onStoreChange: () => void) => () => void
-  getSnapshot: () => number
+  getSnapshot: () => Breakpoint
 }
 
 /**
@@ -1340,91 +1375,66 @@ export declare interface _MediaStore {
  *
  * @public
  */
-export declare const Menu: ForwardRefExoticComponent<
-  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'role' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
+  props: MenuProps<E>,
+): React.JSX.Element
 
 /**
  * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
  *
  * @public
  */
-export declare const MenuButton: ForwardRefExoticComponent<
-  MenuButtonProps & RefAttributes<HTMLButtonElement | null>
->
+export declare function MenuButton(props: MenuButtonProps): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface MenuButtonProps {
+/** @public */
+export declare type MenuButtonProps = {
   /**
    * @beta Do not use in production.
    */
   __unstable_disableRestoreFocusOnClose?: boolean
-  /**
-   * @deprecated Use `popover={{boundaryElement: element}}` instead.
-   */
-  boundaryElement?: HTMLElement
-  button: React.JSX.Element
+  button: ReactElement<ButtonProps>
   id: string
-  menu?: React.JSX.Element
+  menu?: ReactElement
   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
+  ref?: ForwardedRef<HTMLButtonElement | null>
 }
 
-/**
- * @public
- */
-export declare const MenuDivider: IStyledComponentBase<
-  'web',
-  FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>
-> &
-  string
+/** @public */
+export declare function MenuDivider<
+  E extends MenuDividerElementType = typeof DEFAULT_MENU_DIVIDER_ELEMENT,
+>(props: MenuDividerProps<E>): React.JSX.Element
 
-/**
- * @public
- */
-export declare function MenuGroup(
-  props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
-    MenuGroupProps,
-): React.JSX.Element
+/** @public */
+export declare type MenuDividerElementType = 'div' | 'hr' | 'span' | ComponentType
 
-export declare namespace MenuGroup {
-  var displayName: string
-}
+/** @public */
+export declare type MenuDividerOwnProps = {}
 
-/**
- * @public
- */
-export declare interface MenuGroupProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  fontSize?: number | number[]
-  icon?: React.ElementType | React.ReactNode
+/** @public */
+export declare type MenuDividerProps<E extends MenuDividerElementType = MenuDividerElementType> =
+  Props<MenuDividerOwnProps, E>
+
+/** @public */
+export declare type MenuElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export declare function MenuGroup<
+  E extends MenuGroupElementType = typeof DEFAULT_MENU_GROUP_ELEMENT,
+>(props: MenuGroupProps<E>): React.JSX.Element
+
+/** @public */
+export declare type MenuGroupElementType = 'button' | ComponentType
+
+/** @public */
+export declare type MenuGroupOwnProps = RadiusStyleProps & {
+  disabled?: boolean
+  fontSize?: ResponsiveProp<FontTextSize>
+  gap?: ResponsiveProp<Space>
+  icon?: ElementType_2 | ReactNode
   menu?: Omit<
-    MenuProps,
+    MenuProps<typeof DEFAULT_MENU_ELEMENT>,
     | 'onClickOutside'
     | 'onEscape'
     | 'onItemClick'
@@ -1434,51 +1444,50 @@ export declare interface MenuGroupProps {
     | 'shouldFocus'
     | 'onBlurCapture'
   >
-  padding?: number | number[]
+  padding?: ResponsiveProp<Space>
   popover?: Omit<PopoverProps, 'content' | 'open'>
-  radius?: Radius | Radius[]
-  space?: number | number[]
-  text: React.ReactNode
-  tone?: SelectableTone
+  text?: ReactNode
+  tone?: ElementTone
 }
 
-/**
- * @public
- */
-export declare const MenuItem: ForwardRefExoticComponent<
-  MenuItemProps &
-    Omit<HTMLProps<HTMLDivElement>, 'selected' | 'height' | 'ref' | 'tabIndex' | 'as'> &
-    RefAttributes<HTMLDivElement>
+/** @public */
+export declare type MenuGroupProps<E extends MenuGroupElementType = MenuGroupElementType> = Props<
+  MenuGroupOwnProps,
+  E
 >
 
-/**
- * @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 function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITEM_ELEMENT>(
+  props: MenuItemProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface MenuProps extends ResponsivePaddingProps {
-  /**
-   * @deprecated Use `shouldFocus="first"` instead.
-   */
-  'focusFirst'?: boolean
-  /**
-   * @deprecated Use `shouldFocus="last"` instead.
-   */
-  'focusLast'?: boolean
+/** @public */
+export declare type MenuItemElementType = 'button' | 'a' | ComponentType
+
+/** @public */
+export declare type MenuItemOwnProps = GapStyleProps &
+  PaddingStyleProps &
+  RadiusStyleProps & {
+    disabled?: boolean
+    fontSize?: ResponsiveProp<FontTextSize>
+    hotkeys?: string[]
+    icon?: ElementType_2 | ReactNode
+    iconRight?: ElementType_2 | ReactNode
+    pressed?: boolean
+    selected?: boolean
+    text?: ReactNode
+    tone?: ElementTone
+  }
+
+/** @public */
+export declare type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> = Props<
+  MenuItemOwnProps,
+  E
+>
+
+/** @public */
+export declare type MenuOwnProps = PaddingStyleProps & {
+  'gap'?: ResponsiveProp<Space>
   'onClickOutside'?: (event: MouseEvent) => void
   'onEscape'?: () => void
   'onItemClick'?: () => void
@@ -1486,24 +1495,11 @@ export declare interface MenuProps extends ResponsivePaddingProps {
   '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}
+/** @public */
+export declare type MenuProps<E extends MenuElementType = MenuElementType> = Props<MenuOwnProps, E>
 
 /**
  * Placement of floating UI elements.
@@ -1529,13 +1525,12 @@ export declare type Placement =
  *
  * @public
  */
-export declare const Popover: NamedExoticComponent<
-  Omit<
-    PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'children' | 'as'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
->
+export declare function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_ELEMENT>(
+  props: PopoverProps<E>,
+): React.JSX.Element
+
+/** @public */
+export declare type PopoverElementType = 'div' | ComponentType
 
 /**
  * @beta
@@ -1543,10 +1538,7 @@ export declare const Popover: NamedExoticComponent<
 export declare type PopoverMargins = [number, number, number, number]
 
 /** @public */
-export declare interface PopoverProps
-  extends Omit<LayerProps, 'as'>,
-    ResponsiveRadiusProps,
-    ResponsiveShadowProps {
+export declare type PopoverOwnProps = Omit<LayerOwnProps, 'maxWidth'> & {
   /** @beta */
   __unstable_margins?: PopoverMargins
   /**
@@ -1557,22 +1549,22 @@ export declare interface PopoverProps
    */
   animate?: boolean
   arrow?: boolean
-  /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
-  boundaryElement?: HTMLElement | null
-  children?: React.JSX.Element
+  children?: ReactElement<{
+    ref: ForwardedRef<HTMLElement>
+  }>
   /**
-     * When `true`, prevent overflow within the current boundary:
-     * - by flipping on its side axis
-     * - by resizing
-     /*
-     * Note that:
-     * - setting `preventOverflow` to `true` also prevents overflow on its side axis
-     * - setting `matchReferenceWidth` to `true` also causes the popover to resize
-     *
-     * @defaultValue false
-     */
+   * 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
+  content?: ReactNode
   disabled?: boolean
   fallbackPlacements?: Placement[]
   floatingBoundary?: HTMLElement | null
@@ -1593,8 +1585,6 @@ export declare interface PopoverProps
    */
   modal?: boolean
   open?: boolean
-  overflow?: BoxOverflow
-  padding?: number | number[]
   placement?: Placement
   /**
    * When 'flip' (default), the placement is determined from the initial placement and the
@@ -1615,33 +1605,27 @@ export declare interface PopoverProps
    * The children of the popover won't be rendered.
    */
   referenceElement?: HTMLElement | null
-  scheme?: ThemeColorSchemeKey_2
-  tone?: CardTone
   /** @beta */
-  updateRef?:
-    | MutableRefObject<PopoverUpdateCallback | undefined>
-    | RefCallback<PopoverUpdateCallback | undefined>
-  width?: PopoverWidth | PopoverWidth[]
+  updateRef?: Ref<PopoverUpdateCallback | undefined>
+  width?: ResponsiveProp<MaxWidth>
 }
 
+/** @public */
+export declare type PopoverProps<E extends PopoverElementType = PopoverElementType> = Props<
+  PopoverOwnProps,
+  E
+>
+
 /** @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 type PopoverWidth = Exclude<ContainerWidth, 'auto'>
 
-export declare namespace Portal {
-  var displayName: string
-}
+/** @public */
+export declare function Portal(props: PortalProps): ReactPortal | null
 
-/**
- * @public
- */
+/** @public */
 export declare interface PortalContextValue {
   version: 0.0
   boundaryElement: HTMLElement | null
@@ -1649,35 +1633,21 @@ export declare interface PortalContextValue {
   elements?: Record<string, HTMLElement | null | undefined>
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface PortalProps {
-  children: React.ReactNode
+  children: ReactNode
   /**
    * @beta This API might change. DO NOT USE IN PRODUCTION.
    */
   __unstable_name?: string
 }
 
-/**
- * @public
- */
+/** @public */
 export declare function PortalProvider(props: PortalProviderProps): React.JSX.Element
 
-export declare namespace PortalProvider {
-  var displayName: string
-}
-
-/**
- * @public
- */
+/** @public */
 export declare interface PortalProviderProps {
-  /**
-   * @deprecated Use `<BoundaryElementProvider element={...} />` instead
-   */
-  boundaryElement?: HTMLElement | null
-  children: React.ReactNode
+  children: ReactNode
   element?: HTMLElement | null
   /**
    * @beta
@@ -1685,27 +1655,36 @@ export declare interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
+/** @public */
+export declare type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
+  E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
+  P & {
+    as?: E
+  }
+>
+
 /**
  * The `Radio` component allows the user to select one option from a set.
  *
  * @public
  */
-export declare const Radio: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & RadioProps, 'ref'> &
-    RefAttributes<HTMLInputElement>
->
+export declare function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(
+  props: RadioProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface RadioProps {
+/** @public */
+export declare type RadioElementType = 'input' | ComponentType
+
+/** @public */
+export declare type RadioOwnProps = {
   customValidity?: string
 }
 
-/**
- * @public
- */
-export declare type Radius = number | 'full'
+/** @public */
+export declare type RadioProps<E extends RadioElementType = RadioElementType> = Props<
+  RadioOwnProps,
+  E
+>
 
 /**
  * @internal
@@ -1717,11 +1696,6 @@ export declare function _raf(fn: () => void): () => void
  */
 export declare function _raf2(fn: () => void): () => void
 
-/**
- * @public
- */
-export declare function rem(pixelValue: number): string | 0
-
 /**
  * @internal
  */
@@ -1730,348 +1704,189 @@ 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
+export declare interface ResponsiveWidthStyleProps {
+  $width: (number | 'auto')[]
 }
 
 /**
+ * The `Root` component.
+ *
  * @public
  */
-export declare interface ResponsiveGridItemProps {
-  column?: GridItemColumn | GridItemColumn[]
-  columnStart?: GridItemColumnStart | GridItemColumnStart[]
-  columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
-  row?: GridItemRow | GridItemRow[]
-  rowStart?: GridItemRowStart | GridItemRowStart[]
-  rowEnd?: GridItemRowEnd | GridItemRowEnd[]
-}
+export declare function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(
+  props: RootProps<E>,
+): React.JSX.Element
 
-/**
- * @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[]
-}
+/** @public */
+export declare type RootElementType = 'html' | 'body' | 'div'
 
-/**
- * Get responsive CSS for the `heading` font style.
- * @internal
- */
-export declare function responsiveHeadingFont(
-  props: ResponsiveFontStyleProps & ThemeProps,
-): CSSObject[]
+/** @public */
+export declare interface RootOwnProps extends BoxOwnProps, RootStyleProps {}
 
-/**
- * Get responsive CSS for the `label` font style.
- * @internal
- */
-export declare function responsiveLabelFont(
-  props: ResponsiveFontStyleProps & ThemeProps,
-): CSSObject[]
+/** @public */
+export declare type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>
 
-/**
- * @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 function RootProvider(props: RootProviderProps): React.JSX.Element
 
-/**
- * @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 RootProviderProps {
+  boundaryElement?: HTMLElement | null
+  children?: ReactNode
+  portalElement?: HTMLElement | null
+  scheme?: ColorScheme
+  tone?: CardTone
 }
 
 /**
+ * The `Select` component provides control of options.
+ *
  * @public
  */
-export declare interface ResponsiveRadiusProps {
-  radius?: Radius | Radius[]
-}
+export declare function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(
+  props: SelectProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface ResponsiveShadowProps {
-  shadow?: number | number[]
-}
+/** @internal */
+export declare function Selectable<
+  E extends SelectableElementType = typeof DEFAULT_SELECTABLE_ELEMENT,
+>(props: SelectableProps<E>): React.JSX.Element
 
-/**
- * Get responsive text align styles.
- * @internal
- */
-export declare function responsiveTextAlignStyle(
-  props: ResponsiveTextAlignStyleProps & ThemeProps,
-): CSSObject[]
+/** @internal */
+export declare type SelectableElementType = 'button' | 'a' | ComponentType
 
-/**
- * @internal
- */
-export declare interface ResponsiveTextAlignStyleProps {
-  $align: TextAlign[]
-}
+/** @internal */
+export declare type SelectableOwnProps = BoxOwnProps &
+  SelectableStyleProps & {
+    disabled?: boolean
+    href?: string
+    selected?: boolean
+    tone?: ElementTone
+    type?: 'button'
+  }
 
-/**
- * Get responsive CSS for the `text` font style.
- * @internal
- */
-export declare function responsiveTextFont(
-  props: ResponsiveFontStyleProps & ThemeProps,
-): CSSObject[]
+/** @internal */
+export declare type SelectableProps<E extends SelectableElementType = SelectableElementType> =
+  Props<SelectableOwnProps, E>
 
-/**
- * @public
- */
-export declare interface ResponsiveWidthProps {
-  width?: number | 'auto' | (number | 'auto')[]
-}
+/** @public */
+export declare type SelectElementType = 'select' | ComponentType
 
-/**
- * @internal
- */
-export declare interface ResponsiveWidthStyleProps {
-  $width: (number | 'auto')[]
+/** @public */
+export declare type SelectOwnProps = SelectStyleProps & {
+  customValidity?: string
+  readOnly?: boolean
 }
 
-/**
- * @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 SelectProps<E extends SelectElementType = SelectElementType> = Props<
+  SelectOwnProps,
+  E
 >
 
-/**
- * @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>
->
+export declare function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON_ELEMENT>(
+  props: SkeletonProps<E>,
+): React.JSX.Element
+
+/** @beta */
+export declare type SkeletonElementType = 'div' | 'span' | ComponentType
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
+export declare type SkeletonOwnProps = SkeletonStyleProps & {
   animated?: boolean
   delay?: number
 }
 
+/** @beta */
+export declare type SkeletonProps<E extends SkeletonElementType = SkeletonElementType> = Props<
+  SkeletonOwnProps,
+  E
+>
+
 /**
  * Indicate that something is loading for an indeterminate amount of time.
  *
  * @public
  */
-export declare const Spinner: ForwardRefExoticComponent<
-  Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(
+  props: SpinnerProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface SpinnerProps {
+/** @public */
+export declare type SpinnerElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export declare type SpinnerOwnProps = {
   muted?: boolean
-  size?: number | number[]
+  size?: ResponsiveProp<FontTextSize>
 }
 
-/**
- * @public
- */
-export declare const SrOnly: ForwardRefExoticComponent<
-  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
+/** @public */
+export declare type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<
+  SpinnerOwnProps,
+  E
 >
 
-/**
- * @public
- */
-export declare interface SrOnlyProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  children?: React.ReactNode
-}
+/** @public */
+export declare function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEMENT>(
+  props: SrOnlyProps<E>,
+): React.JSX.Element
+
+/** @public */
+export declare type SrOnlyElementType = 'span' | ComponentType
+
+/** @public */
+export declare type SrOnlyOwnProps = {}
+
+/** @public */
+export declare type SrOnlyProps<E extends SrOnlyElementType = SrOnlyElementType> = Props<
+  SrOnlyOwnProps,
+  E
+>
 
 /**
  * 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>
->
+export declare function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>(
+  props: StackProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface StackProps extends BoxProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  space?: number | number[]
-}
+/** @public */
+export declare type StackElementType = BoxElementType
 
-/**
- * @public
- * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
- */
-export declare const studioTheme: BaseTheme_2
+/** @public */
+export declare type StackOwnProps = Omit<
+  BoxOwnProps,
+  | 'align'
+  | 'alignItems'
+  | 'columns'
+  | 'gridTemplateColumns'
+  | 'direction'
+  | 'display'
+  | 'flexDirection'
+  | 'flexWrap'
+  | 'gapX'
+  | 'gapY'
+  | 'justify'
+  | 'justifyContent'
+  | 'rows'
+  | 'gridTemplateRows'
+>
 
-/**
- * @public
- * @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.
- */
-export declare type Styles = ThemeStyles
+/** @public */
+export declare type StackProps<E extends StackElementType = StackElementType> = Props<
+  StackOwnProps,
+  E
+>
 
 /**
  * The `Switch` component allows the user to toggle a setting on and off.
@@ -2080,445 +1895,244 @@ export declare type Styles = ThemeStyles
  *
  * @public
  */
-export declare const Switch: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & SwitchProps, 'ref'> &
-    RefAttributes<HTMLInputElement>
->
+export declare function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEMENT>(
+  props: SwitchProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface SwitchProps {
+/** @public */
+export declare type SwitchElementType = 'input' | ComponentType
+
+/** @public */
+export declare type SwitchOwnProps = {
   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 type SwitchProps<E extends SwitchElementType = SwitchElementType> = Props<
+  SwitchOwnProps,
+  E
 >
 
-/**
- * @public
- */
-export declare const TabList: ForwardRefExoticComponent<
-  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
-    RefAttributes<unknown>
->
+/** @public */
+export declare function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(
+  props: TabProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: Array<React.JSX.Element | null | undefined | false>
-}
+/** @public */
+export declare type TabElementType = 'button' | ComponentType
 
-/**
- * @public
- */
-export declare const TabPanel: ForwardRefExoticComponent<
-  Omit<
-    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'role' | 'aria-labelledby' | 'as'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
->
+/** @public */
+export declare function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_ELEMENT>(
+  props: TabListProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare interface TabPanelProps extends BoxProps {
-  /**
-   * The `id` of the correlating `Tab` component.
-   */
-  'aria-labelledby': string
-  'id': string
+/** @public */
+export declare type TabListChild =
+  | ReactElement<Props<TabProps, 'button'>>
+  | null
+  | undefined
+  | false
+
+/** @public */
+export declare type TabListElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export declare type TabListOwnProps = Omit<FlexOwnProps, 'as' | 'height'> & {
+  children: TabListChild[]
 }
 
-/**
- * @public
- */
-export declare interface TabProps {
+/** @public */
+export declare type TabListProps<E extends TabListElementType = TabListElementType> = Props<
+  TabListOwnProps,
+  E
+>
+
+/** @public */
+export declare type TabOwnProps = {
   /**
-   * The `id` of the correlating `TabPanel` component.
+   * The `id` of the corresponding `TabPanel` component.
    */
   'aria-controls': string
   'id': string
-  'icon'?: React.ElementType | React.ReactNode
+  'icon'?: ElementType_2 | ReactNode
   'focused'?: boolean
-  'fontSize'?: number | number[]
-  'label'?: React.ReactNode
-  'padding'?: number | number[]
+  'fontSize'?: ResponsiveProp<FontTextSize>
+  'label'?: ReactNode
+  'padding'?: ResponsiveProp<Space>
   '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
+  'tone'?: ElementTone
 }
 
-/**
- * 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
- */
-export declare interface TextInputProps {
-  /**
-   * @beta
-   */
-  __unstable_disableFocusRing?: boolean
-  border?: boolean
-  /**
-   * @beta
-   */
-  clearButton?: boolean | TextInputClearButtonProps
-  customValidity?: string
-  fontSize?: number | number[]
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
-  /**
-   * @beta
-   */
-  onClear?: () => void
-  padding?: number | number[]
-  prefix?: React.ReactNode
-  radius?: Radius | Radius[]
-  space?: number | number[]
-  suffix?: React.ReactNode
-  type?: TextInputType
-  weight?: ThemeFontWeightKey_2
-}
+/** @public */
+export declare function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANEL_ELEMENT>(
+  props: TabPanelProps<E>,
+): React.JSX.Element
 
-/**
- * @public
- */
-export declare type TextInputType =
-  | 'search'
-  | 'date'
-  | 'datetime-local'
-  | 'email'
-  | 'url'
-  | 'month'
-  | 'number'
-  | 'password'
-  | 'tel'
-  | 'time'
-  | 'text'
-  | 'week'
-  | 'color'
+/** @public */
+export declare type TabPanelElementType = 'div' | 'span' | ComponentType
 
-/**
- * @public
- */
-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[]
+/** @public */
+export declare type TabPanelOwnProps = BoxOwnProps & {
   /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
+   * The `id` of the correlating `Tab` component.
    */
-  textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey_2
+  'aria-labelledby': string
+  'id': string
 }
 
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare const TextSkeleton: ForwardRefExoticComponent<
-  Omit<
-    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
+/** @public */
+export declare type TabPanelProps<E extends TabPanelElementType = TabPanelElementType> = Props<
+  TabPanelOwnProps,
+  E
 >
 
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare interface TextSkeletonProps extends SkeletonProps {
-  size?: number | number[]
-}
-
-/**
- * @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
- */
-export declare function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element
-
-export declare namespace ThemeColorProvider {
-  var displayName: string
-}
-
-/**
- * @public
- */
-export declare interface ThemeColorProviderProps {
-  children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey_2
-  tone?: ThemeColorCardToneKey
-}
-
-export {ThemeColorScheme}
-
-/**
- * @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}
+/** @public */
+export declare type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>
 
-export {ThemeColorSpotKey}
+/** @public */
+export declare type TagType = keyof JSX.IntrinsicElements
 
 /**
+ * The `Text` component is an agile, themed typographic element.
+ *
  * @public
- * @deprecated Use `ThemeColorSyntax` from `@sanity/ui/theme` instead.
  */
-export declare type ThemeColorSyntax = ThemeColorSyntax_2
-
-export {ThemeColorToneKey}
+declare function Text_2<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
+  props: TextProps<E>,
+): React.JSX.Element
+export {Text_2 as Text}
 
 /**
+ * A multiline text input.
+ *
  * @public
  */
-export declare interface ThemeContextValue {
-  /** @deprecated No longer used */
-  version: 0.0
-  scheme: ThemeColorSchemeKey_2
-  theme: RootTheme_2
-  tone: ThemeColorCardToneKey
+export declare function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(
+  props: TextAreaProps<E>,
+): React.JSX.Element
+
+/** @public */
+export declare type TextAreaElementType = 'textarea' | ComponentType
+
+/** @public */
+export declare type TextAreaOwnProps = TextAreaStyleProps & {
+  /**
+   * @beta
+   */
+  __unstable_disableFocusRing?: boolean
+  customValidity?: string
 }
 
-/**
- * @public
- * @deprecated Use `ThemeFont` from `@sanity/ui/theme` instead.
- */
-export declare type ThemeFont = ThemeFont_2
+/** @public */
+export declare type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<
+  TextAreaOwnProps,
+  E
+>
 
-/**
- * @public
- * @deprecated Use `ThemeFontKey` from `@sanity/ui/theme` instead.
- */
-export declare type ThemeFontKey = ThemeFontKey_2
+/** @public */
+export declare type TextElementType =
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'li'
+  | 'p'
+  | 'span'
+  | 'summary'
+  | 'time'
+  | ComponentType
 
 /**
+ * Single line text input.
+ *
  * @public
- * @deprecated Use `ThemeFonts` from `@sanity/ui/theme` instead.
  */
-export declare type ThemeFonts = ThemeFonts_2
+export declare function TextInput<
+  E extends TextInputElementType = typeof DEFAULT_TEXT_INPUT_ELEMENT,
+>(props: TextInputProps<E>): React.JSX.Element
 
-/**
- * @public
- * @deprecated Use `ThemeFontSize` from `@sanity/ui/theme` instead.
- */
-export declare type ThemeFontSize = ThemeFontSize_2
+/** @public */
+export declare type TextInputClearButtonProps = Omit<
+  ButtonProps<'button'>,
+  'as' | 'onClick' | 'onMouseDown'
+>
 
-/**
- * @public
- * @deprecated Use `ThemeFontWeight` from `@sanity/ui/theme` instead.
- */
-export declare type ThemeFontWeight = ThemeFontWeight_2
+/** @public */
+export declare type TextInputElementType = 'input' | ComponentType
 
-/**
- * @public
- * @deprecated Use `ThemeFontWeightKey` from `@sanity/ui/theme` instead.
- */
-export declare type ThemeFontWeightKey = ThemeFontWeightKey_2
+/** @public */
+export declare type TextInputOwnProps = InputStyleProps & {
+  /**
+   * @beta
+   */
+  __unstable_disableFocusRing?: boolean
+  /**
+   * @beta
+   */
+  clearButton?: boolean | TextInputClearButtonProps
+  customValidity?: string
+  icon?: ElementType_2 | ReactNode
+  iconRight?: ElementType_2 | ReactNode
+  /**
+   * @beta
+   */
+  onClear?: () => void
+  prefix?: ReactNode
+  suffix?: ReactNode
+  weight?: FontWeight
+}
 
-export {ThemeInput}
+/** @public */
+export declare type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<
+  TextInputOwnProps,
+  E
+>
 
-/**
- * @public
- * @deprecated Use `ThemeLayer` from `@sanity/ui/theme` instead.
- */
-export declare type ThemeLayer = ThemeLayer_2
+/** @public */
+export declare type TextOwnProps = TextStyleProps & TextOverflowStyleProps
 
-/**
- * @internal
- */
-export declare interface ThemeProps {
-  theme: Theme_2
-}
+/** @public */
+export declare type TextProps<E extends TextElementType = TextElementType> = Props<TextOwnProps, E>
 
 /**
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element
+export declare function TextSkeleton<
+  E extends TextSkeletonElementType = typeof DEFAULT_TEXT_SKELETON_ELEMENT,
+>(props: TextSkeletonProps<E>): React.JSX.Element
 
-export declare namespace ThemeProvider {
-  var displayName: string
-}
+/** @beta */
+export declare type TextSkeletonElementType = SkeletonElementType
 
-/**
- * @public
- */
-export declare interface ThemeProviderProps {
-  children?: React.ReactNode
-  scheme?: ThemeColorSchemeKey_2
-  theme?: RootTheme_2
-  tone?: ThemeColorCardToneKey
+/** @beta */
+export declare type TextSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontTextSize>
 }
 
 /**
- * @public
- * @deprecated Use `ThemeShadow` from `@sanity/ui/theme` instead.
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare type ThemeShadow = ThemeShadow_2
+export declare type TextSkeletonProps<E extends TextSkeletonElementType = TextSkeletonElementType> =
+  Props<TextSkeletonOwnProps, E>
 
 /**
  * The `Toast` component gives feedback to users when an action has taken place.
  *
- * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ * Toasts can be closed with a close button, or auto-dismiss when the duration expires.
  *
- * @public
+ * @internal
  */
-export declare function Toast(
-  props: ToastProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      | 'as'
-      | 'height'
-      | 'ref'
-      | 'title'
-      | 'onAnimationStart'
-      | 'onDragStart'
-      | 'onDragEnd'
-      | 'onDrag'
-    >,
+export declare function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
+  props: ToastProps<E>,
 ): React.JSX.Element
 
-export declare namespace Toast {
-  var displayName: string
-}
-
-/**
- * @public
- */
+/** @public */
 export declare interface ToastContextValue {
   version: 0.0
   /**
@@ -2530,59 +2144,55 @@ export declare interface ToastContextValue {
   push: (params: ToastParams) => string
 }
 
-/**
- * @public
- */
-declare interface ToastLayerProps {
-  children: React.ReactNode
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
-  gap?: number | number[]
+/** @internal */
+export declare type ToastElementType = 'li' | ComponentType
+
+/** @internal */
+declare type ToastLayerElementType = 'ul' | ComponentType
+
+/** @internal */
+declare type ToastLayerOwnProps = GapStyleProps & PaddingStyleProps
+
+/** @internal */
+declare type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElementType> = Props<
+  ToastLayerOwnProps,
+  E
+>
+
+/** @internal */
+export declare type ToastOwnProps = RadiusStyleProps & {
+  closable?: boolean
+  description?: ReactNode
+  onClose?: () => void
+  title?: ReactNode
+  status?: 'error' | 'warning' | 'success' | 'info'
+  duration?: number
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface ToastParams {
   closable?: boolean
-  description?: React.ReactNode
+  description?: ReactNode
   duration?: number
   id?: string
   onClose?: () => void
-  title?: React.ReactNode
+  title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
 }
 
-/**
- * @public
- */
-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
-}
+/** @internal */
+export declare type ToastProps<E extends ToastElementType = ToastElementType> = Props<
+  ToastOwnProps,
+  E
+>
 
-/**
- * @public
- */
+/** @public */
 export declare function ToastProvider(props: ToastProviderProps): React.JSX.Element
 
-export declare namespace ToastProvider {
-  var displayName: string
-}
-
-/**
- * @public
- */
+/** @public */
 export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
   children?: React.ReactNode
-  zOffset?: number | number[]
+  zOffset?: ResponsiveProp<number>
 }
 
 /**
@@ -2590,10 +2200,9 @@ export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'child
  *
  * @public
  */
-export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'children' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
+  props: TooltipProps<E>,
+): React.JSX.Element
 
 /**
  * @beta
@@ -2620,15 +2229,11 @@ export declare function TooltipDelayGroupProvider(
   props: TooltipDelayGroupProviderProps,
 ): React.JSX.Element
 
-export declare namespace TooltipDelayGroupProvider {
-  var displayName: string
-}
-
 /**
  * @public
  * */
 export declare interface TooltipDelayGroupProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
   /**
    * Handles the delays to open or close a tooltip inside a group
    *
@@ -2641,54 +2246,57 @@ export declare interface TooltipDelayGroupProviderProps {
   delay: Delay
 }
 
-/**
- * @public
- */
-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
-}
+/** @public */
+export declare type TooltipElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export declare type TooltipOwnProps = LayerOwnProps &
+  RadiusStyleProps &
+  ShadowStyleProps & {
+    /**
+     * Whether the tooltip should animate in and out.
+     *
+     * @beta
+     * @defaultValue false
+     */
+    animate?: boolean
+    arrow?: boolean
+    boundaryElement?: HTMLElement | null
+    children?: ReactElement<HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>>
+    content?: ReactNode
+    /**
+     * Adds a delay to open or close the tooltip.
+     *
+     * If only a `number` is passed, it will be used for both opening and closing.
+     *
+     * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+     *
+     * @public
+     * @defaultValue 0
+     */
+    delay?: Delay
+    disabled?: boolean
+    fallbackPlacements?: Placement[]
+    placement?: Placement
+    /** Whether or not to render the tooltip in a portal element. */
+    portal?: boolean | string
+    scheme?: ColorScheme
+    tone?: CardTone
+  }
+
+/** @public */
+export declare type TooltipProps<E extends TooltipElementType = TooltipElementType> = Props<
+  TooltipOwnProps,
+  E
+>
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const Tree: NamedExoticComponent<
-  TreeProps &
-    Omit<HTMLProps<HTMLDivElement>, 'height' | 'wrap' | 'ref' | 'role' | 'as' | 'align'> &
-    RefAttributes<HTMLDivElement>
->
+export declare function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
+  props: TreeProps<E>,
+): React.JSX.Element
 
 /**
  * @beta
@@ -2696,48 +2304,63 @@ export declare const Tree: NamedExoticComponent<
 export declare interface TreeContextValue {
   version: 0.0
   focusedElement: HTMLElement | null
+  gap: ResponsiveProp<Space>
   level: number
   path: string[]
   registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
   setExpanded: (path: string, expanded: boolean) => void
   setFocusedElement: (focusedElement: HTMLElement | null) => void
-  space: number | number[]
   state: TreeState
 }
 
+/** @beta */
+export declare type TreeElementType = 'div' | ComponentType
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const TreeItem: NamedExoticComponent<
-  TreeItemProps & Omit<HTMLProps<HTMLLIElement>, 'ref' | 'role' | 'as'>
->
+export declare function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITEM_ELEMENT>(
+  props: TreeItemProps<E>,
+): React.JSX.Element
 
-/**
- * @beta
- */
-export declare interface TreeItemProps {
+/** @beta */
+export declare type TreeItemElementType = 'a' | 'li' | ComponentType
+
+/** @beta */
+export declare type TreeItemOwnProps = CardOwnProps & {
   expanded?: boolean
-  fontSize?: number | number[]
-  icon?: React.ElementType
+  fontSize?: ResponsiveProp<FontTextSize>
+  icon?: ElementType_2
   /**
    * Allows passing a custom element type to the link component
+   * @internal
    */
-  linkAs?: BoxProps['as']
-  padding?: number | number[]
-  space?: number | number[]
-  text?: React.ReactNode
-  weight?: ThemeFontWeightKey_2
+  linkAs?: SelectableElementType
+  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>
+  padding?: ResponsiveProp<Space>
+  space?: ResponsiveProp<Space>
+  text?: ReactNode
+  weight?: FontWeight
 }
 
+/** @beta */
+export declare type TreeItemProps<E extends TreeItemElementType = TreeItemElementType> = Props<
+  TreeItemOwnProps,
+  E
+>
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface TreeProps {
-  space?: number | number[]
+export declare type TreeOwnProps = {
+  gap?: ResponsiveProp<Space>
 }
 
+/** @beta */
+export declare type TreeProps<E extends TreeElementType = TreeElementType> = Props<TreeOwnProps, E>
+
 /**
  * @beta
  */
@@ -2750,44 +2373,13 @@ export declare interface TreeState {
     | undefined
 }
 
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
-  val: T | T[] | undefined,
-  defaultVal?: T[],
-): T[]
-
-/**
- * @public
- */
+/** @public */
 export declare function useBoundaryElement(): BoundaryElementContextValue
 
-/**
- * @public
- * @deprecated replaced by the new `useClickOutsideEvent` hook, instead of:
- * ```tsx
- * const [button, setButtonElement] = useState(null)
- * useClickOutside((event) => {}, [button])
- * return <button ref={setButtonElement} />
- * ```
- * do:
- * ```tsx
- * const buttonRef = useRef()
- * useClickOutsideEvent((event) => {}, () => [buttonRef.current])
- * return <button ref={buttonRef} />
- * ```
- */
-export declare function useClickOutside(
-  listener: ClickOutsideListener,
-  elementsArg?: ClickOutsideElements,
-  boundaryElement?: HTMLElement | null,
-): (el: HTMLElement | null) => void
+/** @public */
+export declare function useCard(): CardContextValue
 
-/**
- * @public
- */
+/** @public */
 export declare function useClickOutsideEvent(
   listener: ClickOutsideEventListener | false | undefined,
   elementsArg?: () => ClickOutsideEventElements,
@@ -2812,48 +2404,24 @@ export declare function useCustomValidity(
  */
 export declare function useDialog(): DialogContextValue
 
-/**
- * Subscribe to the rect of a DOM element.
- * @beta
- *
- * @deprecated Use `useElementSize` instead
- */
-export declare function useElementRect(element: HTMLElement | null): DOMRectReadOnly | null
-
 /**
  * Subscribe to the size of a DOM element.
  * @beta
  */
 export declare function useElementSize(element: HTMLElement | null): ElementSize | null
 
-/**
- * @beta
- * @deprecated use `useImperativeHandle` instead
- * @example
- * ```diff
- * -const ref = useForwardedRef(forwardedRef)
- * +const ref = useRef(null)
- * +useImperativeHandle(forwardedRef, () => ref.current)
- * ```
- */
-export declare function useForwardedRef<T>(
-  ref: React.ForwardedRef<T>,
-): React.MutableRefObject<T | null>
-
 /**
  * @beta
  */
 export declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void): void
 
-/**
- * @public
- */
+/** @public */
 export declare function useLayer(): LayerContextValue
 
 /**
  * Efficiently subscribes to `window.matchMedia` queries
  *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * @public
  */
@@ -2866,17 +2434,15 @@ export declare function useMatchMedia(
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function useMediaIndex(): number
+export declare function useMediaIndex(): Breakpoint
 
-/**
- * @public
- */
+/** @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)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
  * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
@@ -2889,7 +2455,7 @@ export declare function usePrefersDark(getServerSnapshot?: () => boolean): boole
 /**
  * Returns true if motion should be reduced
  *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
  * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
@@ -2900,23 +2466,15 @@ export declare function usePrefersDark(getServerSnapshot?: () => boolean): boole
 export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
 
 /**
- * @public
- */
-export declare function useRootTheme(): ThemeContextValue
-
-/**
- * @public
- */
-export declare function useTheme(): Theme_2
-
-/**
- * @public
+ * This API might change. DO NOT USE IN PRODUCTION.
+ * @beta
  */
-export declare function useTheme_v2(): Theme_v2
+export declare function useResponsiveProp<T>(
+  val: ResponsiveProp<T> | undefined,
+  defaultVal?: Partial<Record<Breakpoint, T>>,
+): Partial<Record<Breakpoint, T>>
 
-/**
- * @public
- */
+/** @public */
 export declare function useToast(): ToastContextValue
 
 /**
@@ -2929,19 +2487,12 @@ export declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue |
  */
 export declare function useTree(): TreeContextValue
 
-/**
- * @beta
- */
-export declare const VirtualList: ForwardRefExoticComponent<
-  VirtualListProps<any> &
-    StackProps &
-    Omit<HTMLProps<HTMLDivElement>, 'children' | 'ref' | 'onChange' | 'as'> &
-    RefAttributes<HTMLDivElement>
->
+/** @beta */
+export declare function VirtualList<
+  E extends VirtualListElementType = typeof DEFAULT_VIRTUAL_LIST_ELEMENT,
+>(props: VirtualListProps<E>): React.JSX.Element
 
-/**
- * @beta
- */
+/** @beta */
 export declare interface VirtualListChangeOpts {
   fromIndex: number
   gap: number
@@ -2951,16 +2502,20 @@ export declare interface VirtualListChangeOpts {
   toIndex: number
 }
 
-/**
- * @beta
- */
-export declare interface VirtualListProps<Item = any> {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  gap?: number
+/** @beta */
+export declare type VirtualListElementType = 'div' | ComponentType
+
+/** @beta */
+export declare type VirtualListOwnProps<Item = any> = {
+  gap?: Space
   getItemKey?: (item: Item, itemIndex: number) => string
   items?: Item[]
   onChange?: (opts: VirtualListChangeOpts) => void
-  renderItem?: (item: Item) => React.ReactNode
+  renderItem?: (item: Item) => ReactNode
 }
 
+/** @beta */
+export declare type VirtualListProps<E extends VirtualListElementType = VirtualListElementType> =
+  Props<VirtualListOwnProps, E>
+
 export {}