@sanity/ui 3.0.0-static.11 → 3.0.0-static.13

package/dist/index.d.ts

@@ -4,21 +4,22 @@ import {Display as BoxDisplay} from '@sanity/ui/css'
 import {BoxHeight} from '@sanity/ui/css'
 import {BoxOverflow} from '@sanity/ui/css'
 import {BoxSizing} from '@sanity/ui/css'
-import {BoxStyleProps} from '@sanity/ui/css'
-import {ButtonStyleProps} from '@sanity/ui/css'
+import type {BoxStyleProps} from '@sanity/ui/css'
+import type {ButtonStyleProps} from '@sanity/ui/css'
 import {CardContextValue as CardContextValue_2} from './types'
 import {CardStyleProps as CardStyleProps_2} from '@sanity/ui/css'
 import {Component} from 'react'
+import type {ComponentClass} from 'react'
 import type {ComponentProps} from 'react'
-import {ComponentType} from 'react'
+import {ComponentType as ComponentType_2} from 'react'
 import {ContainerStyleProps} from '@sanity/ui/css'
 import {Context} from 'react'
 import {createColorTheme as createColorTheme_2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
-import {DisplayStyleProps} from '@sanity/ui/css'
-import {ElementProps as ElementProps_2} from '../..'
-import {ElementType} from 'react'
+import type {DisplayStyleProps} from '@sanity/ui/css'
+import {ElementType as ElementType_2} from 'react'
 import {ErrorInfo} from 'react'
+import type {ExoticComponent} from 'react'
 import {FlexAlign} from '@sanity/ui/css'
 import {FlexDirection} from '@sanity/ui/css'
 import {FlexJustify} from '@sanity/ui/css'
@@ -31,7 +32,7 @@ import {FontLabelSize} from '@sanity/ui/theme'
 import {FontStyleProps} from '@sanity/ui/css'
 import {FontTextSize} from '@sanity/ui/theme'
 import {ForwardedRef} from 'react'
-import {ForwardRefExoticComponent} from 'react'
+import type {FunctionComponent} from 'react'
 import {GapStyleProps} from '@sanity/ui/css'
 import {GridAutoCols} from '@sanity/ui/css'
 import {GridAutoFlow} from '@sanity/ui/css'
@@ -42,22 +43,23 @@ import {GridItemColumnStart} from '@sanity/ui/css'
 import {GridItemRow} from '@sanity/ui/css'
 import {GridItemRowEnd} from '@sanity/ui/css'
 import {GridItemRowStart} from '@sanity/ui/css'
+import {GridStyleProps} from '@sanity/ui/css'
 import {HeadingStyleProps} from '@sanity/ui/css'
 import {hexToRgb as hexToRgb_2} from '@sanity/ui/theme'
 import {HSL as HSL_2} from '@sanity/ui/theme'
 import {hslToRgb as hslToRgb_2} from '@sanity/ui/theme'
+import {HTMLAttributes} from 'react'
 import {InputStyleProps} from '@sanity/ui/css'
-import {InsetStyleProps} from '@sanity/ui/css'
+import type {InsetStyleProps} from '@sanity/ui/css'
 import {JSX} from 'react'
-import {LabelSize} from '@sanity/ui/css'
+import {LabelStyleProps} from '@sanity/ui/css'
+import {MouseEventHandler} from 'react'
 import {multiply as multiply_2} from '@sanity/ui/theme'
 import {MutableRefObject} from 'react'
-import {NamedExoticComponent} from 'react'
 import {PaddingStyleProps} from '@sanity/ui/css'
 import {parseColor as parseColor_2} from '@sanity/ui/theme'
 import {PartialThemeColorBuilderOpts} from '@sanity/ui/theme'
-import {PolymorphicProps as PolymorphicProps_2} from '../..'
-import {PositionStyleProps} from '@sanity/ui/css'
+import type {PositionStyleProps} from '@sanity/ui/css'
 import {PropsWithChildren} from 'react'
 import {px} from '@sanity/ui/css'
 import {Radius} from '@sanity/ui/theme'
@@ -65,8 +67,8 @@ import {RadiusStyleProps} from '@sanity/ui/css'
 import {ReactElement} from 'react'
 import {ReactNode} from 'react'
 import {ReactPortal} from 'react'
+import {Ref} from 'react'
 import {RefAttributes} from 'react'
-import {RefCallback} from 'react'
 import {rem} from '@sanity/ui/css'
 import {ResponsiveProp} from '@sanity/ui/css'
 import {RGB as RGB_2} from '@sanity/ui/theme'
@@ -130,19 +132,39 @@ 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 {Width} from '@sanity/ui/css'
+import type {Width} from '@sanity/ui/css'
 
 /** @internal */
-export declare const Arrow: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, 'radius' | 'height' | 'width'> & {
-    width: number
-    height: number
-    radius?: number
-  } & RefAttributes<HTMLDivElement>
+export declare function Arrow<E extends ArrowElementType = typeof DEFAULT_ARROW_ELEMENT>(
+  props: ArrowProps<E>,
+): JSX.Element
+
+export declare namespace Arrow {
+  var displayName: string
+}
+
+/** @internal */
+export declare type ArrowElementType = 'div' | 'span' | ComponentType
+
+/** @internal */
+export declare type ArrowOwnProps = {
+  width: number
+  height: number
+  radius?: number
+}
+
+/** @internal */
+export declare type ArrowProps<E extends ArrowElementType = ArrowElementType> = Props<
+  ArrowOwnProps,
+  E
 >
 
-/** @public */
-export declare type Assign<T, U> = Omit<T, keyof U> & U
+/**
+ * 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
@@ -155,22 +177,17 @@ export declare function attemptFocus(element: HTMLElement): boolean
  *
  * @public
  */
-export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
-  props: Omit<
-    Props<AutocompleteProps<Option>, 'input'>,
-    | 'aria-activedescendant'
-    | 'aria-autocomplete'
-    | 'aria-expanded'
-    | 'aria-owns'
-    | 'autoCapitalize'
-    | 'autoComplete'
-    | 'autoCorrect'
-    | 'inputMode'
-    | 'role'
-    | 'spellCheck'
-    | 'type'
-  >,
-) => ReactElement
+export declare function Autocomplete<
+  E extends AutocompleteElementType = typeof DEFAULT_AUTOCOMPLETE_ELEMENT,
+  O extends BaseAutocompleteOption = BaseAutocompleteOption,
+>(props: AutocompleteProps<E, O>): JSX.Element
+
+export declare namespace Autocomplete {
+  var displayName: string
+}
+
+/** @public */
+export declare type AutocompleteElementType = 'input' | ComponentType
 
 /**
  * @internal
@@ -201,24 +218,17 @@ export declare type AutocompleteMsg =
   | AutocompleteInputFoocusMsg
   | AutocompleteValueChangeMsg
 
-/**
- * @public
- */
-export declare type AutocompleteOpenButtonProps = Omit<Props<ButtonProps, 'button'>, 'as'>
+/** @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
-  disabled?: boolean
-  filterOption?: (query: string, option: Option) => boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  icon?: ElementType | ReactNode
-  id: string
+  filterOption?: (query: string, option: O) => boolean
+  icon?: ElementType_2 | ReactNode
   /** @beta */
   listBox?: BoxProps
   loading?: boolean
@@ -230,17 +240,15 @@ export declare interface AutocompleteProps<
   /** @beta */
   openOnFocus?: boolean
   /** The options to render. */
-  options?: Option[]
+  options?: O[]
   padding?: ResponsiveProp<Space>
   popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
   prefix?: ReactNode
   radius?: Radius | Radius[]
-  readOnly?: boolean
-  ref?: ForwardedRef<HTMLInputElement>
   /** @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: {
@@ -252,12 +260,17 @@ export declare interface AutocompleteProps<
     },
     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
  */
@@ -328,41 +341,42 @@ export declare interface AutocompleteValueChangeMsg {
  *
  * @public
  */
-export declare const Avatar: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof AvatarProps> &
-    AvatarProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Avatar<E extends AvatarElementType = typeof DEFAULT_AVATAR_ELEMENT>(
+  props: AvatarProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare const AvatarCounter: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof AvatarCounterProps> &
-    AvatarCounterProps &
-    RefAttributes<HTMLDivElement>
->
+export declare namespace Avatar {
+  var displayName: string
+}
 
-/**
- * @public
- */
-export declare interface AvatarCounterProps
-  extends Omit<BoxProps, 'align' | 'className' | 'display' | 'justify' | 'paddingX' | 'sizing'> {
+/** @public */
+export declare function AvatarCounter<
+  E extends AvatarCounterElementType = typeof DEFAULT_AVATAR_COUNTER_ELEMENT,
+>(props: AvatarCounterProps<E>): JSX.Element
+
+export declare namespace AvatarCounter {
+  var displayName: string
+}
+
+/** @public */
+export declare type AvatarCounterElementType = 'button' | 'div' | 'span' | ComponentType
+
+/** @public */
+export declare interface AvatarCounterOwnProps {
   count: number
   size?: ResponsiveProp<AvatarSize>
-  /** @deprecated No longer supported. */
-  tone?: 'navbar'
 }
 
-/**
- * @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
@@ -374,14 +388,24 @@ export declare interface AvatarProps {
   src?: string
   /**
    * The status of the entity this Avatar represents.
-   * @alpha
+   * @deprecated Will be removed in next major version.
    */
   status?: AvatarStatus
   title?: string
 }
 
+/** @public */
+export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
+
+/** @public */
+export declare type AvatarProps<E extends AvatarElementType = AvatarElementType> = Props<
+  AvatarOwnProps,
+  E
+>
+
 /**
  * @internal
+ * @deprecated This will be removed in next major version.
  */
 export declare interface AvatarRootStyleProps {
   $color: ThemeColorAvatarColorKey
@@ -389,29 +413,23 @@ export declare interface AvatarRootStyleProps {
 
 export {AvatarSize}
 
-/**
- * @public
- */
-export declare const AvatarStack: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof AvatarStackProps> &
-    AvatarStackProps &
-    RefAttributes<HTMLDivElement>
->
+/** @public */
+export declare function AvatarStack<
+  E extends AvatarStackElementType = typeof DEFAULT_AVATAR_STACK_ELEMENT,
+>(props: AvatarStackProps<E>): JSX.Element
 
-/**
- * @public
- */
-export declare type AvatarStackChild =
-  | ReactElement<Props<AvatarProps, 'div'>>
-  | null
-  | undefined
-  | false
+export declare namespace AvatarStack {
+  var displayName: string
+}
 
-/**
- * @public
- */
-export declare interface AvatarStackProps
-  extends Omit<BoxProps, 'align' | 'className' | 'display'> {
+/** @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' | 'display'> & {
   children: AvatarStackChild | AvatarStackChild[]
   maxLength?: number
   size?: ResponsiveProp<AvatarSize>
@@ -419,11 +437,14 @@ export declare interface AvatarStackProps
   tone?: 'navbar'
 }
 
+/** @public */
+export declare type AvatarStackProps<E extends AvatarStackElementType = AvatarStackElementType> =
+  Props<AvatarStackOwnProps, E>
+
+/** @public */
 /**
  * @public
- */
-/**
- * @public
+ * @deprecated Will be removed in next major version.
  */
 export declare type AvatarStatus = 'online' | 'editing' | 'inactive'
 
@@ -432,11 +453,16 @@ export declare type AvatarStatus = 'online' | 'editing' | 'inactive'
  *
  * @public
  */
-export declare const Badge: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof BadgeProps> &
-    BadgeProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>(
+  props: BadgeProps<E>,
+): JSX.Element
+
+export declare namespace Badge {
+  var displayName: string
+}
+
+/** @public */
+export declare type BadgeElementType = 'div' | 'span' | ComponentType
 
 /**
  * @public
@@ -444,25 +470,23 @@ export declare const Badge: ForwardRefExoticComponent<
  */
 export declare type BadgeMode = 'default' | 'outline'
 
-/**
- * @public
- */
-export declare interface BadgeProps extends BoxProps, RadiusStyleProps {
-  fontSize?: number | number[]
-  /** @deprecated No longer used. */
-  mode?: BadgeMode
-  textAlign?: TextProps['align']
-  tone?: BadgeTone
-}
+/** @public */
+export declare type BadgeOwnProps = PaddingStyleProps &
+  RadiusStyleProps & {
+    fontSize?: ResponsiveProp<FontTextSize>
+    tone?: BadgeTone
+  }
 
-/**
- * @public
- */
+/** @public */
+export declare type BadgeProps<E extends BadgeElementType = BadgeElementType> = Props<
+  BadgeOwnProps,
+  E
+>
+
+/** @public */
 export declare type BadgeTone = ThemeColorStateToneKey
 
-/**
- * @public
- */
+/** @public */
 export declare interface BaseAutocompleteOption {
   value: string
 }
@@ -473,26 +497,20 @@ export declare interface BaseAutocompleteOption {
  */
 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): ReactElement
 
 export declare namespace BoundaryElementProvider {
   var displayName: string
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface BoundaryElementProviderProps {
   children: ReactNode
   element: HTMLElement | null
@@ -504,26 +522,57 @@ export declare interface BoundaryElementProviderProps {
  *
  * @public
  */
-export declare const Box: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof BoxProps> &
-    BoxProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
+  props: BoxProps<E>,
+): JSX.Element
+
+export declare namespace Box {
+  var displayName: string
+}
 
 export {BoxDisplay}
 
+/** @public */
+export declare type BoxElementType =
+  | 'a'
+  | 'article'
+  | 'aside'
+  | 'blockquote'
+  | 'button'
+  | 'details'
+  | 'div'
+  | 'header'
+  | 'fieldset'
+  | 'figure'
+  | 'figcaption'
+  | 'footer'
+  | 'form'
+  | 'kbd'
+  | 'label'
+  | 'legend'
+  | 'li'
+  | 'main'
+  | 'nav'
+  | 'ol'
+  | 'pre'
+  | 'section'
+  | 'span'
+  | 'summary'
+  | 'ul'
+  | ComponentType
+
 export {BoxHeight}
 
 export {BoxOverflow}
 
-/**
- * @public
- */
-export declare interface BoxProps
-  extends BoxStyleProps,
-    GapStyleProps,
-    InsetStyleProps,
-    PositionStyleProps {}
+/** @public */
+export declare type BoxOwnProps = BoxStyleProps &
+  GapStyleProps &
+  InsetStyleProps &
+  PositionStyleProps
+
+/** @public */
+export declare type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, E>
 
 /**
  * @public
@@ -533,34 +582,42 @@ export declare type BoxShadow = ThemeBoxShadow
 
 export {BoxSizing}
 
-/**
- * @beta
- */
-export declare const Breadcrumbs: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof BreadcrumbsProps> &
-    BreadcrumbsProps &
-    RefAttributes<HTMLDivElement>
->
+/** @beta */
+export declare function Breadcrumbs<
+  E extends BreadcrumbsElementType = typeof DEFAULT_BREADCRUMBS_ELEMENT,
+>(props: BreadcrumbsProps<E>): JSX.Element
 
-/**
- * @beta
- */
-export declare interface BreadcrumbsProps extends GapStyleProps {
-  expandButton?: Omit<ButtonProps, 'onClick' | 'selected'>
+export declare namespace Breadcrumbs {
+  var displayName: string
+}
+
+/** @beta */
+export declare type BreadcrumbsElementType = 'div' | 'nav' | ComponentType
+
+/** @beta */
+export declare type BreadcrumbsOwnProps = GapStyleProps & {
+  expandButton?: Omit<ButtonProps<'button'>, 'as' | 'onClick' | 'selected'>
   maxLength?: number
   separator?: ReactNode
   /** @deprecated - Use `gap`, `gapX`, `gapY` instead */
   space?: number | number[]
 }
 
-/**
- * @public
- */
-export declare const Button: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'button'> & PolymorphicProps_2, keyof ButtonProps> &
-    ButtonProps &
-    RefAttributes<HTMLButtonElement>
->
+/** @beta */
+export declare type BreadcrumbsProps<E extends BreadcrumbsElementType = BreadcrumbsElementType> =
+  Props<BreadcrumbsOwnProps, E>
+
+/** @public */
+export declare function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEMENT>(
+  props: ButtonProps<E>,
+): JSX.Element
+
+export declare namespace Button {
+  var displayName: string
+}
+
+/** @public */
+export declare type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
 
 /**
  * @public
@@ -568,40 +625,41 @@ export declare const Button: ForwardRefExoticComponent<
  */
 export declare type ButtonMode = ThemeColorButtonModeKey_2
 
-/**
- * @public
- */
-export declare interface ButtonProps
-  extends ButtonStyleProps,
-    DisplayStyleProps,
-    FlexStyleProps,
-    GapStyleProps,
-    PaddingStyleProps {
-  'data-ui'?: string
-  'fontSize'?: ResponsiveProp<FontTextSize>
-  'href'?: string
-  'mode'?: ButtonMode
-  'icon'?: ElementType | ReactNode
-  'iconRight'?: ElementType | ReactNode
-  /** @beta Do not use in production, as this might change.*/
-  'loading'?: boolean
-  'selected'?: boolean
-  /** @deprecated Use `gap` instead. */
-  'space'?: ResponsiveProp<Space>
-  'textAlign'?: ButtonTextAlign
-  'muted'?: boolean
-  'target'?: string
-  'text'?: ReactNode
-  'textOverflow'?: TextProps['textOverflow']
-  'textWeight'?: TextProps['weight']
-  'tone'?: ButtonTone
-  'type'?: 'button' | 'reset' | 'submit'
-  'width'?: ResponsiveProp<Width>
-}
+/** @public */
+export declare type ButtonOwnProps = ButtonStyleProps &
+  DisplayStyleProps &
+  GapStyleProps &
+  PaddingStyleProps & {
+    'align'?: FlexStyleProps['align']
+    'data-ui'?: string
+    'disabled'?: boolean
+    'fontSize'?: ResponsiveProp<FontTextSize>
+    'mode'?: ButtonMode
+    'icon'?: ElementType_2 | ReactNode
+    'iconRight'?: ElementType_2 | ReactNode
+    'justify'?: FlexStyleProps['justify']
+    /** @beta Do not use in production, as this might change.*/
+    'loading'?: boolean
+    'selected'?: boolean
+    /** @deprecated Use `gap` instead. */
+    'space'?: ResponsiveProp<Space>
+    'textAlign'?: ButtonTextAlign
+    'muted'?: boolean
+    'target'?: string
+    'text'?: ReactNode
+    'textOverflow'?: TextOwnProps['textOverflow']
+    'textWeight'?: TextOwnProps['weight']
+    'tone'?: ButtonTone
+    'width'?: ResponsiveProp<Width>
+  }
 
-/**
- * @public
- */
+/** @public */
+export declare type ButtonProps<E extends ButtonElementType = ButtonElementType> = Props<
+  ButtonOwnProps,
+  E
+>
+
+/** @public */
 export declare type ButtonTextAlign = 'left' | 'right' | 'center'
 
 /**
@@ -622,13 +680,15 @@ export declare type ButtonWidth = 'fill'
  *
  * @public
  */
-export declare const Card: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof CardProps> &
-    CardProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
+  props: CardProps<E>,
+): JSX.Element
+
+export declare namespace Card {
+  var displayName: string
+}
 
-export declare type CardCompatProviderComponent = ComponentType<{
+export declare type CardCompatProviderComponent = ComponentType_2<{
   children?: ReactNode
   tone: ThemeColorCardToneKey
   scheme: ThemeColorSchemeKey_2
@@ -642,10 +702,11 @@ export declare interface CardContextValue {
   scheme: ThemeColorSchemeKey_2
 }
 
-/**
- * @public
- */
-export declare interface CardProps extends BoxProps, CardStyleProps_2 {
+/** @public */
+export declare type CardElementType = BoxElementType
+
+/** @public */
+export declare interface CardOwnProps extends BoxOwnProps, CardStyleProps_2 {
   /**
    * Do not use in production.
    * @beta
@@ -657,12 +718,14 @@ export declare interface CardProps extends BoxProps, CardStyleProps_2 {
    */
   __unstable_focusRing?: boolean
   disabled?: boolean
-  href?: string
   pressed?: boolean
   selected?: boolean
   target?: string
 }
 
+/** @public */
+export declare type CardProps<E extends CardElementType = CardElementType> = Props<CardOwnProps, E>
+
 export declare function CardProvider(props: {
   compat_provider?: CardCompatProviderComponent
   children?: ReactNode
@@ -671,6 +734,10 @@ export declare function CardProvider(props: {
   scheme: ThemeColorSchemeKey_2
 }): JSX.Element
 
+export declare namespace CardProvider {
+  var displayName: string
+}
+
 /**
  * @internal
  * @deprecated Use `CardStyleProps` from `@sanity/ui/css` instead.
@@ -682,9 +749,7 @@ export declare interface CardStyleProps {
   $tone: ThemeColorCardToneKey
 }
 
-/**
- * @public
- */
+/** @public */
 export declare type CardTone = ThemeColorCardToneKey | 'inherit'
 
 /**
@@ -692,109 +757,120 @@ export declare type CardTone = ThemeColorCardToneKey | 'inherit'
  *
  * @public
  */
-export declare const Checkbox: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'input'> & PolymorphicProps_2, keyof CheckboxProps> &
-    CheckboxProps &
-    RefAttributes<HTMLInputElement>
->
+export declare function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX_ELEMENT>(
+  props: CheckboxProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface CheckboxProps {
+export declare namespace Checkbox {
+  var displayName: string
+}
+
+/** @public */
+export declare type CheckboxElementType = 'input' | ComponentType
+
+/** @public */
+export declare type CheckboxOwnProps = {
   indeterminate?: boolean
   customValidity?: string
 }
 
-/**
- * @public
- */
+/** @public */
+export declare type CheckboxProps<E extends CheckboxElementType = CheckboxElementType> = Props<
+  CheckboxOwnProps,
+  E
+>
+
+/** @public */
 export declare type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]
 
-/**
- * @public
- */
+/** @public */
 export declare type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]
 
-/**
- * @public
- */
+/** @public */
 export declare type ClickOutsideEventListener = (event: MouseEvent) => void
 
-/**
- * @public
- */
+/** @public */
 export declare type ClickOutsideListener = (event: MouseEvent) => void
 
-/**
- * @public
- */
-export declare const Code: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'pre'> & PolymorphicProps_2, keyof CodeProps> &
-    CodeProps &
-    RefAttributes<HTMLPreElement>
->
+/** @public */
+export declare function Code<E extends CodeElementType = typeof DEFAULT_CODE_ELEMENT>(
+  props: CodeProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface CodeProps extends Omit<FontStyleProps, 'align'> {
+export declare namespace Code {
+  var displayName: string
+}
+
+/** @public */
+export declare type CodeElementType = 'div' | 'pre' | ComponentType
+
+/** @public */
+export declare type CodeOwnProps = Omit<FontStyleProps, 'align'> & {
   /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
 }
 
+/** @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<ElementProps_2<'div'> & PolymorphicProps_2, keyof CodeSkeletonProps> &
-    CodeSkeletonProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function CodeSkeleton<
+  E extends CodeSkeletonElementType = typeof DEFAULT_CODE_SKELETON_ELEMENT,
+>(props: CodeSkeletonProps<E>): JSX.Element
 
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare interface CodeSkeletonProps extends SkeletonProps {
+export declare namespace CodeSkeleton {
+  var displayName: string
+}
+
+/** @public */
+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: ReactNode
-  condition: boolean
-  wrapper: (children: ReactNode) => ReactNode
-}): 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<ElementProps_2<'div'> & PolymorphicProps_2, keyof ContainerProps> &
-    ContainerProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Container<
+  E extends ContainerElementType = typeof DEFAULT_CONTAINER_ELEMENT,
+>(props: ContainerProps<E>): JSX.Element
 
-/**
- * @public
- */
-export declare interface ContainerProps extends Omit<BoxProps, 'width'>, ContainerStyleProps {}
+export declare namespace Container {
+  var displayName: string
+}
+
+/** @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
@@ -807,9 +883,157 @@ export declare function containsOrEqualsElement(element: HTMLElement, node: Node
  */
 export declare const createColorTheme: typeof createColorTheme_2
 
-/**
- * @public
- */
+/** @internal */
+export declare const DEFAULT_ARROW_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_AUTOCOMPLETE_ELEMENT = 'input'
+
+/** @public */
+export declare const DEFAULT_AVATAR_COUNTER_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_AVATAR_ELEMENT = 'div'
+
+/** @public */
+export declare const DEFAULT_AVATAR_STACK_ELEMENT = 'div'
+
+/** @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'
+
+/** @public */
+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'
+
+/** @public */
+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'
+
+/** @public */
+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_SELECT_ELEMENT = 'select'
+
+/** @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'
+
+/** @public */
+export declare const DEFAULT_TEXT_SKELETON_ELEMENT = 'div'
+
+/** @public */
+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<{
@@ -822,11 +1046,13 @@ export declare type Delay =
  *
  * @public
  */
-export declare const Dialog: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof DialogProps> &
-    DialogProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Dialog<E extends DialogElementType = typeof DEFAULT_DIALOG_ELEMENT>(
+  props: DialogProps<E>,
+): JSX.Element
+
+export declare namespace Dialog {
+  var displayName: string
+}
 
 /**
  * @internal
@@ -843,49 +1069,52 @@ export declare interface DialogContextValue {
   zOffset?: number | number[]
 }
 
-/**
- * @public
- */
+/** @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?: DialogPosition | DialogPosition[]
+    scheme?: ThemeColorSchemeKey_2
+    tone?: CardTone
+    zOffset?: number | number[]
+  }
+
+/** @public */
 export declare type DialogPosition = 'absolute' | 'fixed'
 
-/**
- * @public
- */
-export declare interface DialogProps
-  extends ContainerStyleProps,
-    PaddingStyleProps,
-    ShadowStyleProps {
-  /**
-   * @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?: DialogPosition | DialogPosition[]
-  scheme?: ThemeColorSchemeKey_2
-  tone?: CardTone
-  zOffset?: number | number[]
-}
+/** @public */
+export declare type DialogProps<E extends DialogElementType = DialogElementType> = Props<
+  DialogOwnProps,
+  E
+>
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -907,18 +1136,35 @@ export declare interface DialogProviderProps {
   zOffset?: number | number[]
 }
 
-/** @public */
-export declare type ElementProps<E extends ElementType> = Omit<ComponentProps<E>, 'as' | 'ref'>
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export declare function ElementQuery<
+  E extends ElementQueryElementType = typeof DEFAULT_ELEMENT_QUERY_ELEMENT,
+>(props: ElementQueryProps<E>): JSX.Element
+
+export declare namespace ElementQuery {
+  var displayName: string
+}
+
+/** @beta */
+export declare type ElementQueryElementType = 'div' | ComponentType
 
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const ElementQuery: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, 'media'> &
-    MediaQueryProps &
-    RefAttributes<HTMLDivElement>
->
+export declare type ElementQueryOwnProps = {
+  media?: number[]
+}
+
+/**
+ * DO NOT USE IN PRODUCTION.
+ * @beta
+ */
+export declare type ElementQueryProps<E extends ElementQueryElementType = ElementQueryElementType> =
+  Props<ElementQueryOwnProps, E>
 
 /**
  * @beta
@@ -962,12 +1208,19 @@ 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: ErrorInfo): void
   render(): ReactNode
@@ -994,24 +1247,28 @@ export declare interface ErrorBoundaryState {
  *
  * @public
  */
-export declare const Flex: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof FlexProps> &
-    FlexProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(
+  props: FlexProps<E>,
+): JSX.Element
+
+export declare namespace Flex {
+  var displayName: string
+}
 
 export {FlexAlign}
 
 export {FlexDirection}
 
+/** @public */
+export declare type FlexElementType = BoxElementType
+
 export {FlexJustify}
 
-/**
- * @public
- */
-export declare interface FlexProps extends Omit<BoxProps, 'display'> {
-  htmlFor?: string
-}
+/** @public */
+export declare type FlexOwnProps = Omit<BoxOwnProps, 'display'>
+
+/** @public */
+export declare type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>
 
 export {FlexValue}
 
@@ -1037,11 +1294,13 @@ export declare function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?:
  *
  * @public
  */
-export declare const Grid: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof GridProps> &
-    GridProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(
+  props: GridProps<E>,
+): JSX.Element
+
+export declare namespace Grid {
+  var displayName: string
+}
 
 export {GridAutoCols}
 
@@ -1049,6 +1308,9 @@ export {GridAutoFlow}
 
 export {GridAutoRows}
 
+/** @public */
+export declare type GridElementType = BoxElementType
+
 export {GridItemColumn}
 
 export {GridItemColumnEnd}
@@ -1061,10 +1323,11 @@ export {GridItemRowEnd}
 
 export {GridItemRowStart}
 
-/**
- * @public
- */
-export declare interface GridProps extends Omit<BoxProps, 'display'> {}
+/** @public */
+export declare type GridOwnProps = Omit<BoxOwnProps, 'display'>
+
+/** @public */
+export declare type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>
 
 /**
  * @internal
@@ -1076,34 +1339,63 @@ export declare function _hasFocus(element: HTMLElement): boolean
  *
  * @public
  */
-export declare const Heading: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof HeadingProps> &
-    HeadingProps &
-    RefAttributes<HTMLElement>
->
+export declare function Heading<E extends HeadingElementType = typeof DEFAULT_HEADING_ELEMENT>(
+  props: HeadingProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface HeadingProps extends HeadingStyleProps, TextOverflowStyleProps {}
+export declare namespace Heading {
+  var displayName: string
+}
+
+/** @public */
+export declare type HeadingElementType =
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'span'
+  | ComponentType
+
+/** @public */
+export declare type HeadingOwnProps = HeadingStyleProps & TextOverflowStyleProps
+
+/** @public */
+export declare type HeadingProps<E extends HeadingElementType = HeadingElementType> = Props<
+  HeadingOwnProps,
+  E
+>
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const HeadingSkeleton: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof HeadingSkeletonProps> &
-    HeadingSkeletonProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function HeadingSkeleton<
+  E extends HeadingSkeletonElementType = typeof DEFAULT_HEADING_SKELETON_ELEMENT,
+>(props: HeadingSkeletonProps<E>): JSX.Element
+
+export declare namespace HeadingSkeleton {
+  var displayName: string
+}
+
+/** @public */
+export declare type HeadingSkeletonElementType = SkeletonElementType
+
+/** @beta */
+export declare type HeadingSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontHeadingSize>
+}
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface HeadingSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontHeadingSize>
-}
+export declare type HeadingSkeletonProps<
+  E extends HeadingSkeletonElementType = HeadingSkeletonElementType,
+> = Props<HeadingSkeletonOwnProps, E>
 
 /**
  * @public
@@ -1116,16 +1408,19 @@ export declare const hexToRgb: typeof hexToRgb_2
  *
  * @public
  */
-export declare const Hotkeys: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof HotkeysProps> &
-    HotkeysProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Hotkeys<E extends HotkeysElementType = typeof DEFAULT_HOTKEYS_ELEMENT>(
+  props: HotkeysProps<E>,
+): JSX.Element | undefined
 
-/**
- * @public
- */
-export declare interface HotkeysProps extends GapStyleProps, RadiusStyleProps {
+export declare namespace Hotkeys {
+  var displayName: string
+}
+
+/** @public */
+export declare type HotkeysElementType = 'kbd' | ComponentType
+
+/** @public */
+export declare interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
   fontSize?: ResponsiveProp<FontTextSize>
   padding?: ResponsiveProp<Space>
   /** @deprecated Use `gap` instead. */
@@ -1133,6 +1428,12 @@ export declare interface HotkeysProps extends GapStyleProps, RadiusStyleProps {
   keys?: string[]
 }
 
+/** @public */
+export declare type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<
+  HotkeysOwnProps,
+  E
+>
+
 /**
  * @public
  * @deprecated Use `HSL` from `@sanity/ui/theme` instead.
@@ -1150,20 +1451,32 @@ export declare const hslToRgb: typeof hslToRgb_2
  *
  * @public
  */
-export declare const Inline: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof InlineProps> &
-    InlineProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Inline<E extends InlineElementType = typeof DEFAULT_INLINE_ELEMENT>(
+  props: InlineProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface InlineProps extends Omit<BoxProps, 'align' | 'display' | 'justify'> {
+export declare namespace Inline {
+  var displayName: string
+}
+
+/** @public */
+export declare type InlineElementType = BoxElementType
+
+/** @public */
+export declare type InlineOwnProps = Omit<
+  BoxOwnProps,
+  keyof FlexStyleProps | keyof GridStyleProps
+> & {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
 
+/** @public */
+export declare type InlineProps<E extends InlineElementType = InlineElementType> = Props<
+  InlineOwnProps,
+  E
+>
+
 /**
  * @internal
  */
@@ -1214,67 +1527,99 @@ export declare function _isScrollable(el: Node): boolean
  *
  * @public
  */
-export declare const KBD: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof KBDProps> &
-    KBDProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function KBD<E extends KBDElementType = typeof DEFAULT_KBD_ELEMENT>(
+  props: KBDProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface KBDProps extends BoxProps, RadiusStyleProps {
-  fontSize?: ResponsiveProp<FontTextSize>
-  padding?: ResponsiveProp<Space>
+export declare namespace KBD {
+  var displayName: string
 }
 
+/** @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<ElementProps_2<'div'> & PolymorphicProps_2, keyof LabelProps> &
-    LabelProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(
+  props: LabelProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface LabelProps extends FontStyleProps, TextOverflowStyleProps {
-  accent?: boolean
-  htmlFor?: string
-  muted?: boolean
-  size?: ResponsiveProp<LabelSize>
+export declare namespace Label {
+  var displayName: string
 }
 
-/**
- * This API might change. DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare const LabelSkeleton: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof LabelSkeletonProps> &
-    LabelSkeletonProps &
-    RefAttributes<HTMLDivElement>
+/** @public */
+export declare type LabelElementType =
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'li'
+  | 'p'
+  | 'span'
+  | ComponentType
+
+/** @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 {
+export declare function LabelSkeleton<
+  E extends LabelSkeletonElementType = typeof DEFAULT_LABEL_SKELETON_ELEMENT,
+>(props: LabelSkeletonProps<E>): JSX.Element
+
+export declare namespace LabelSkeleton {
+  var displayName: string
+}
+
+/** @public */
+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<ElementProps_2<'div'> & PolymorphicProps_2, keyof LayerProps> &
-    LayerProps &
-    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>,
+): JSX.Element
+
+export declare namespace Layer {
+  var displayName: string
+}
 
 /** @public */
 export declare interface LayerContextValue {
@@ -1286,40 +1631,35 @@ export declare interface LayerContextValue {
   zIndex: number
 }
 
-/**
- * @public
- */
-export declare interface LayerProps extends BoxProps {
+/** @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[]
 }
 
-/**
- * @public
- */
+/** @public */
+export declare type LayerProps<E extends LayerElementType = LayerElementType> = Props<
+  LayerOwnProps,
+  E
+>
+
+/** @public */
 export declare function LayerProvider(props: LayerProviderProps): ReactElement
 
 export declare namespace LayerProvider {
   var displayName: string
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface LayerProviderProps {
   children?: ReactNode
   zOffset?: number | number[]
 }
 
-/**
- * DO NOT USE IN PRODUCTION.
- * @beta
- */
-export declare interface MediaQueryProps {
-  media?: number[]
-}
-
 /**
  * @internal
  */
@@ -1333,25 +1673,27 @@ export declare interface _MediaStore {
  *
  * @public
  */
-export declare const Menu: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof MenuProps> &
-    MenuProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
+  props: MenuProps<E>,
+): JSX.Element
+
+export declare namespace Menu {
+  var displayName: string
+}
 
 /**
  * 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): JSX.Element
 
-/**
- * @public
- */
-export declare interface MenuButtonProps {
+export declare namespace MenuButton {
+  var displayName: string
+}
+
+/** @public */
+export declare type MenuButtonProps = {
   /**
    * @beta Do not use in production.
    */
@@ -1360,7 +1702,7 @@ export declare interface MenuButtonProps {
    * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
   boundaryElement?: HTMLElement
-  button: ReactElement<Props<ButtonProps, 'button'>>
+  button: ReactElement<ButtonProps>
   id: string
   menu?: ReactElement
   onClose?: () => void
@@ -1387,38 +1729,51 @@ export declare interface MenuButtonProps {
    * @deprecated Use `popover={{preventOverflow: true}}` instead.
    */
   preventOverflow?: boolean
+  ref?: ForwardedRef<HTMLButtonElement | null>
 }
 
-/**
- * @public
- */
-export declare const MenuDivider: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, never> &
-    MenuDividerProps &
-    RefAttributes<HTMLHRElement>
->
+/** @public */
+export declare function MenuDivider<
+  E extends MenuDividerElementType = typeof DEFAULT_MENU_DIVIDER_ELEMENT,
+>(props: MenuDividerProps<E>): JSX.Element
+
+export declare namespace MenuDivider {
+  var displayName: string
+}
 
 /** @public */
-export declare interface MenuDividerProps {}
+export declare type MenuDividerElementType = 'div' | 'hr' | 'span' | ComponentType
 
-/**
- * @public
- */
-export declare function MenuGroup(props: Props<MenuGroupProps, 'div'>): ReactElement
+/** @public */
+export declare type MenuDividerOwnProps = {}
+
+/** @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>): JSX.Element
 
 export declare namespace MenuGroup {
   var displayName: string
 }
 
-/**
- * @public
- */
-export declare interface MenuGroupProps extends GapStyleProps {
+/** @public */
+export declare type MenuGroupElementType = 'button' | ComponentType
+
+/** @public */
+export declare type MenuGroupOwnProps = RadiusStyleProps & {
   disabled?: boolean
   fontSize?: ResponsiveProp<FontTextSize>
-  icon?: ElementType | ReactNode
+  gap?: ResponsiveProp<Space>
+  icon?: ElementType_2 | ReactNode
   menu?: Omit<
-    MenuProps,
+    MenuProps<typeof DEFAULT_MENU_ELEMENT>,
     | 'onClickOutside'
     | 'onEscape'
     | 'onItemClick'
@@ -1430,43 +1785,55 @@ export declare interface MenuGroupProps extends GapStyleProps {
   >
   padding?: ResponsiveProp<Space>
   popover?: Omit<PopoverProps, 'content' | 'open'>
-  radius?: Radius | Radius[]
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
-  text: ReactNode
-  tone?: SelectableTone
+  text?: ReactNode
+  tone?: ThemeColorStateToneKey
 }
 
-/**
- * @public
- */
-export declare const MenuItem: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof MenuItemProps> &
-    MenuItemProps &
-    RefAttributes<HTMLDivElement>
+/** @public */
+export declare type MenuGroupProps<E extends MenuGroupElementType = MenuGroupElementType> = Props<
+  MenuGroupOwnProps,
+  E
 >
 
-/**
- * @public
- */
-export declare interface MenuItemProps extends GapStyleProps, PaddingStyleProps, RadiusStyleProps {
-  disabled?: boolean
-  fontSize?: number | number[]
-  hotkeys?: string[]
-  icon?: ElementType | ReactNode
-  iconRight?: ElementType | ReactNode
-  pressed?: boolean
-  selected?: boolean
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-  text?: ReactNode
-  tone?: SelectableTone
+/** @public */
+export declare function MenuItem<E extends MenuItemElementType = typeof DEFAULT_MENU_ITEM_ELEMENT>(
+  props: MenuItemProps<E>,
+): JSX.Element
+
+export declare namespace MenuItem {
+  var displayName: string
 }
 
-/**
- * @public
- */
-export declare interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps, 'gap'> {
+/** @public */
+export declare type MenuItemElementType = 'button' | 'a' | ComponentType
+
+/** @public */
+export declare type MenuItemOwnProps = GapStyleProps &
+  PaddingStyleProps &
+  RadiusStyleProps & {
+    disabled?: boolean
+    fontSize?: number | number[]
+    hotkeys?: string[]
+    icon?: ElementType_2 | ReactNode
+    iconRight?: ElementType_2 | ReactNode
+    pressed?: boolean
+    selected?: boolean
+    /** @deprecated Use `gap` instead. */
+    space?: ResponsiveProp<Space>
+    text?: ReactNode
+    tone?: ThemeColorStateToneKey
+  }
+
+/** @public */
+export declare type MenuItemProps<E extends MenuItemElementType = MenuItemElementType> = Omit<
+  Props<MenuItemOwnProps, E>,
+  'role'
+>
+
+/** @public */
+export declare type MenuOwnProps = PaddingStyleProps & {
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -1475,6 +1842,7 @@ export declare interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps
    * @deprecated Use `shouldFocus="last"` instead.
    */
   'focusLast'?: boolean
+  'gap'?: ResponsiveProp<Space>
   'onClickOutside'?: (event: MouseEvent) => void
   'onEscape'?: () => void
   'onItemClick'?: () => void
@@ -1487,6 +1855,9 @@ export declare interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps
   'aria-labelledby'?: string
 }
 
+/** @public */
+export declare type MenuProps<E extends MenuElementType = MenuElementType> = Props<MenuOwnProps, E>
+
 /**
  * @public
  * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
@@ -1520,20 +1891,21 @@ export declare type Placement =
   | 'left-start'
   | 'left-end'
 
-export declare interface PolymorphicProps {
-  as?: ElementType
-}
-
 /**
  * The `Popover` component is used to display some content on top of another.
  *
  * @public
  */
-export declare const Popover: NamedExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof PopoverProps> &
-    PopoverProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_ELEMENT>(
+  props: PopoverProps<E>,
+): JSX.Element
+
+export declare namespace Popover {
+  var displayName: string
+}
+
+/** @public */
+export declare type PopoverElementType = 'div' | ComponentType
 
 /**
  * @beta
@@ -1541,7 +1913,7 @@ export declare const Popover: NamedExoticComponent<
 export declare type PopoverMargins = [number, number, number, number]
 
 /** @public */
-export declare interface PopoverProps extends CardProps, LayerProps {
+export declare type PopoverOwnProps = LayerOwnProps & {
   /** @beta */
   __unstable_margins?: PopoverMargins
   /**
@@ -1601,29 +1973,29 @@ export declare interface PopoverProps extends CardProps, LayerProps {
    */
   referenceElement?: HTMLElement | null
   /** @beta */
-  updateRef?:
-    | MutableRefObject<PopoverUpdateCallback | undefined>
-    | RefCallback<PopoverUpdateCallback | undefined>
+  updateRef?: Ref<PopoverUpdateCallback | undefined>
 }
 
+/** @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
- */
+/** @public */
 export declare function Portal(props: PortalProps): ReactPortal | null
 
 export declare namespace Portal {
   var displayName: string
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface PortalContextValue {
   version: 0.0
   boundaryElement: HTMLElement | null
@@ -1631,9 +2003,7 @@ export declare interface PortalContextValue {
   elements?: Record<string, HTMLElement | null | undefined>
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface PortalProps {
   children: ReactNode
   /**
@@ -1642,18 +2012,14 @@ export declare interface PortalProps {
   __unstable_name?: string
 }
 
-/**
- * @public
- */
+/** @public */
 export declare function PortalProvider(props: PortalProviderProps): ReactElement
 
 export declare namespace PortalProvider {
   var displayName: string
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface PortalProviderProps {
   /**
    * @deprecated Use `<BoundaryElementProvider element={...} />` instead
@@ -1668,9 +2034,11 @@ export declare interface PortalProviderProps {
 }
 
 /** @public */
-export declare type Props<P extends {} = {}, E extends ElementType = ElementType> = Assign<
-  ElementProps<E> & PolymorphicProps,
-  P
+export declare type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
+  E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
+  P & {
+    as?: E
+  }
 >
 
 export {px}
@@ -1680,19 +2048,28 @@ export {px}
  *
  * @public
  */
-export declare const Radio: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'input'> & PolymorphicProps_2, 'customValidity'> &
-    RadioProps &
-    RefAttributes<HTMLInputElement>
->
+export declare function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>(
+  props: RadioProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface RadioProps {
+export declare namespace Radio {
+  var displayName: string
+}
+
+/** @public */
+export declare type RadioElementType = 'input' | ComponentType
+
+/** @public */
+export declare type RadioOwnProps = {
   customValidity?: string
 }
 
+/** @public */
+export declare type RadioProps<E extends RadioElementType = RadioElementType> = Props<
+  RadioOwnProps,
+  E
+>
+
 export {Radius}
 
 /**
@@ -1724,6 +2101,7 @@ export declare function _responsive<T>(
 
 /**
  * @internal
+ * @deprecated This will be removed in next major version.
  */
 export declare interface ResponsiveAvatarSizeStyleProps {
   $size: AvatarSize[]
@@ -1883,8 +2261,13 @@ export declare const rgbToHex: typeof rgbToHex_2
  */
 export declare const rgbToHsl: typeof rgbToHsl_2
 
+/** @internal */
 export declare function RootClassNames(props: {element: HTMLElement}): null
 
+export declare namespace RootClassNames {
+  var displayName: string
+}
+
 /**
  * @public
  * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
@@ -1903,11 +2286,16 @@ export {screen_2 as screen}
  *
  * @public
  */
-export declare const Select: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'select'> & PolymorphicProps_2, keyof SelectProps> &
-    SelectProps &
-    RefAttributes<HTMLSelectElement>
->
+export declare function Select<E extends SelectElementType = typeof DEFAULT_SELECT_ELEMENT>(
+  props: SelectProps<E>,
+): JSX.Element
+
+export declare namespace Select {
+  var displayName: string
+}
+
+/** @internal */
+declare type SelectableElementType = 'button' | 'a' | ComponentType
 
 /**
  * @public
@@ -1915,93 +2303,134 @@ export declare const Select: ForwardRefExoticComponent<
  */
 export declare type SelectableTone = ThemeColorStateToneKey
 
-/**
- * @public
- */
-export declare interface SelectProps extends SelectStyleProps {
+/** @public */
+export declare type SelectElementType = 'select' | ComponentType
+
+/** @public */
+export declare type SelectOwnProps = SelectStyleProps & {
   customValidity?: string
   readOnly?: boolean
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
 
+/** @public */
+export declare type SelectProps<E extends SelectElementType = SelectElementType> = Props<
+  SelectOwnProps,
+  E
+>
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const Skeleton: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof SkeletonProps> &
-    SkeletonProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON_ELEMENT>(
+  props: SkeletonProps<E>,
+): JSX.Element
+
+export declare namespace Skeleton {
+  var displayName: string
+}
+
+/** @beta */
+export declare type SkeletonElementType = 'div' | 'span' | ComponentType
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface SkeletonProps extends SkeletonStyleProps, Omit<BoxProps, 'children'> {
-  animated?: boolean
-  delay?: number
-}
+export declare type SkeletonOwnProps = BoxOwnProps &
+  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<ElementProps_2<'div'> & PolymorphicProps_2, keyof SpinnerProps> &
-    SpinnerProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Spinner<E extends SpinnerElementType = typeof DEFAULT_SPINNER_ELEMENT>(
+  props: SpinnerProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface SpinnerProps {
+export declare namespace Spinner {
+  var displayName: string
+}
+
+/** @public */
+export declare type SpinnerElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export declare type SpinnerOwnProps = {
   muted?: boolean
   size?: ResponsiveProp<FontTextSize>
 }
 
-/**
- * @public
- */
-export declare const SrOnly: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, 'children'> &
-    SrOnlyProps &
-    RefAttributes<HTMLDivElement>
+/** @public */
+export declare type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<
+  SpinnerOwnProps,
+  E
 >
 
-/**
- * @public
- */
-export declare interface SrOnlyProps {
-  children?: ReactNode
+/** @public */
+export declare function SrOnly<E extends SrOnlyElementType = typeof DEFAULT_SR_ONLY_ELEMENT>(
+  props: SrOnlyProps<E>,
+): JSX.Element
+
+export declare namespace SrOnly {
+  var displayName: string
 }
 
+/** @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<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof StackProps> &
-    StackProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Stack<E extends StackElementType = typeof DEFAULT_STACK_ELEMENT>(
+  props: StackProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface StackProps
-  extends Omit<
-    BoxProps,
-    'align' | 'columns' | 'direction' | 'display' | 'gapX' | 'gapY' | 'justify'
-  > {
+export declare namespace Stack {
+  var displayName: string
+}
+
+/** @public */
+export declare type StackElementType = BoxElementType
+
+/** @public */
+export declare type StackOwnProps = Omit<
+  BoxOwnProps,
+  'align' | 'columns' | 'direction' | 'display' | 'gapX' | 'gapY' | 'justify'
+> & {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
 
+/** @public */
+export declare type StackProps<E extends StackElementType = StackElementType> = Props<
+  StackOwnProps,
+  E
+>
+
 /**
  * @public
  * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
@@ -2014,8 +2443,13 @@ export declare const studioTheme: RootTheme_2
  */
 export declare type Styles = ThemeStyles
 
+/** @beta */
 export declare function StyleTags(props: {theme?: Theme_v3}): ReactNode
 
+export declare namespace StyleTags {
+  var displayName: string
+}
+
 /**
  * The `Switch` component allows the user to toggle a setting on and off.
  *
@@ -2023,83 +2457,78 @@ export declare function StyleTags(props: {theme?: Theme_v3}): ReactNode
  *
  * @public
  */
-export declare const Switch: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'input'> & PolymorphicProps_2, 'indeterminate'> &
-    SwitchProps &
-    RefAttributes<HTMLInputElement>
->
+export declare function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEMENT>(
+  props: SwitchProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface SwitchProps {
+export declare namespace Switch {
+  var displayName: string
+}
+
+/** @public */
+export declare type SwitchElementType = 'input' | ComponentType
+
+/** @public */
+export declare type SwitchOwnProps = {
   indeterminate?: boolean
 }
 
-/**
- * @public
- */
-export declare const Tab: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'button'> & PolymorphicProps_2, keyof TabProps> &
-    TabProps &
-    RefAttributes<HTMLButtonElement>
+/** @public */
+export declare type SwitchProps<E extends SwitchElementType = SwitchElementType> = Props<
+  SwitchOwnProps,
+  E
 >
 
-/**
- * @public
- */
-export declare const TabList: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TabListProps> &
-    TabListProps &
-    RefAttributes<HTMLDivElement>
->
+/** @public */
+export declare function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(
+  props: TabProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
+export declare namespace Tab {
+  var displayName: string
+}
+
+/** @public */
+export declare type TabElementType = 'button' | ComponentType
+
+/** @public */
+export declare function TabList<E extends TabListElementType = typeof DEFAULT_TAB_LIST_ELEMENT>(
+  props: TabListProps<E>,
+): JSX.Element
+
+export declare namespace TabList {
+  var displayName: string
+}
+
+/** @public */
 export declare type TabListChild =
   | ReactElement<Props<TabProps, 'button'>>
   | null
   | undefined
   | false
 
-/**
- * @public
- */
-export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
+/** @public */
+export declare type TabListElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export declare type TabListOwnProps = Omit<InlineOwnProps, 'as' | 'height'> & {
   children: TabListChild[]
 }
 
-/**
- * @public
- */
-export declare const TabPanel: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TabPanelProps> &
-    TabPanelProps &
-    RefAttributes<HTMLDivElement>
+/** @public */
+export declare type TabListProps<E extends TabListElementType = TabListElementType> = Props<
+  TabListOwnProps,
+  E
 >
 
-/**
- * @public
- */
-export declare interface TabPanelProps extends BoxProps {
-  /**
-   * The `id` of the correlating `Tab` component.
-   */
-  'aria-labelledby': string
-  'id': string
-}
-
-/**
- * @public
- */
-export declare interface TabProps {
+/** @public */
+export declare type TabOwnProps = {
   /**
    * The `id` of the corresponding `TabPanel` component.
    */
   'aria-controls': string
   'id': string
-  'icon'?: ElementType | ReactNode
+  'icon'?: ElementType_2 | ReactNode
   'focused'?: boolean
   'fontSize'?: ResponsiveProp<FontTextSize>
   'label'?: ReactNode
@@ -2108,16 +2537,51 @@ export declare interface TabProps {
   'tone'?: ButtonTone
 }
 
+/** @public */
+export declare function TabPanel<E extends TabPanelElementType = typeof DEFAULT_TAB_PANEL_ELEMENT>(
+  props: TabPanelProps<E>,
+): JSX.Element
+
+export declare namespace TabPanel {
+  var displayName: string
+}
+
+/** @public */
+export declare type TabPanelElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export declare type TabPanelOwnProps = BoxOwnProps & {
+  /**
+   * The `id` of the correlating `Tab` component.
+   */
+  'aria-labelledby': string
+  'id': string
+}
+
+/** @public */
+export declare type TabPanelProps<E extends TabPanelElementType = TabPanelElementType> = Props<
+  TabPanelOwnProps,
+  E
+>
+
+/** @public */
+export declare type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>
+
+/** @public */
+export declare type TagType = keyof JSX.IntrinsicElements
+
 /**
  * The `Text` component is an agile, themed typographic element.
  *
  * @public
  */
-declare const Text_2: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TextProps> &
-    TextProps &
-    RefAttributes<HTMLDivElement>
->
+declare function Text_2<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(
+  props: TextProps<E>,
+): JSX.Element
+
+declare namespace Text_2 {
+  var displayName: string
+}
 export {Text_2 as Text}
 
 export {TextAlign}
@@ -2127,16 +2591,19 @@ export {TextAlign}
  *
  * @public
  */
-export declare const TextArea: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'textarea'> & PolymorphicProps_2, keyof TextAreaProps> &
-    TextAreaProps &
-    RefAttributes<HTMLTextAreaElement>
->
+export declare function TextArea<E extends TextAreaElementType = typeof DEFAULT_TEXT_AREA_ELEMENT>(
+  props: TextAreaProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface TextAreaProps extends TextAreaStyleProps {
+export declare namespace TextArea {
+  var displayName: string
+}
+
+/** @public */
+export declare type TextAreaElementType = 'textarea' | ComponentType
+
+/** @public */
+export declare type TextAreaOwnProps = TextAreaStyleProps & {
   /**
    * @beta
    */
@@ -2147,29 +2614,51 @@ export declare interface TextAreaProps extends TextAreaStyleProps {
   weight?: ThemeFontWeightKey_2
 }
 
+/** @public */
+export declare type TextAreaProps<E extends TextAreaElementType = TextAreaElementType> = Props<
+  TextAreaOwnProps,
+  E
+>
+
+/** @public */
+export declare type TextElementType =
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'li'
+  | 'p'
+  | 'span'
+  | ComponentType
+
 /**
  * Single line text input.
  *
  * @public
  */
-export declare const TextInput: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'input'> & PolymorphicProps_2, keyof TextInputProps> &
-    TextInputProps &
-    RefAttributes<HTMLInputElement>
->
+export declare function TextInput<
+  E extends TextInputElementType = typeof DEFAULT_TEXT_INPUT_ELEMENT,
+>(props: TextInputProps<E>): JSX.Element
 
-/**
- * @public
- */
+export declare namespace TextInput {
+  var displayName: string
+}
+
+/** @public */
 export declare type TextInputClearButtonProps = Omit<
-  Props<ButtonProps, 'button'>,
+  ButtonProps<'button'>,
   'as' | 'onClick' | 'onMouseDown'
 >
 
-/**
- * @public
- */
-export declare interface TextInputProps extends InputStyleProps {
+/** @public */
+export declare type TextInputElementType = 'input' | ComponentType
+
+/** @public */
+export declare type TextInputOwnProps = InputStyleProps & {
   /**
    * @beta
    */
@@ -2179,8 +2668,8 @@ export declare interface TextInputProps extends InputStyleProps {
    */
   clearButton?: boolean | TextInputClearButtonProps
   customValidity?: string
-  icon?: ElementType | ReactNode
-  iconRight?: ElementType | ReactNode
+  icon?: ElementType_2 | ReactNode
+  iconRight?: ElementType_2 | ReactNode
   /**
    * @beta
    */
@@ -2189,52 +2678,47 @@ export declare interface TextInputProps extends InputStyleProps {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
   suffix?: ReactNode
-  type?: TextInputType
   weight?: ThemeFontWeightKey_2
 }
 
-/**
- * @public
- */
-export declare type TextInputType =
-  | 'search'
-  | 'date'
-  | 'datetime-local'
-  | 'email'
-  | 'url'
-  | 'month'
-  | 'number'
-  | 'password'
-  | 'tel'
-  | 'time'
-  | 'text'
-  | 'week'
-  | 'color'
+/** @public */
+export declare type TextInputProps<E extends TextInputElementType = TextInputElementType> = Props<
+  TextInputOwnProps,
+  E
+>
 
-/**
- * @public
- */
-export declare interface TextProps extends TextStyleProps, TextOverflowStyleProps {
-  htmlFor?: string
-}
+/** @public */
+export declare type TextOwnProps = TextStyleProps & TextOverflowStyleProps
+
+/** @public */
+export declare type TextProps<E extends TextElementType = TextElementType> = Props<TextOwnProps, E>
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const TextSkeleton: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TextSkeletonProps> &
-    TextSkeletonProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function TextSkeleton<
+  E extends TextSkeletonElementType = typeof DEFAULT_TEXT_SKELETON_ELEMENT,
+>(props: TextSkeletonProps<E>): JSX.Element
+
+export declare namespace TextSkeleton {
+  var displayName: string
+}
+
+/** @public */
+export declare type TextSkeletonElementType = SkeletonElementType
+
+/** @beta */
+export declare type TextSkeletonOwnProps = SkeletonOwnProps & {
+  size?: ResponsiveProp<FontTextSize>
+}
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface TextSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontTextSize>
-}
+export declare type TextSkeletonProps<E extends TextSkeletonElementType = TextSkeletonElementType> =
+  Props<TextSkeletonOwnProps, E>
 
 /**
  * @public
@@ -2282,18 +2766,14 @@ export {ThemeColorMutedTone}
 
 export {ThemeColorName}
 
-/**
- * @public
- */
+/** @public */
 export declare function ThemeColorProvider(props: ThemeColorProviderProps): ReactElement
 
 export declare namespace ThemeColorProvider {
   var displayName: string
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeColorProviderProps {
   children?: ReactNode
   scheme?: ThemeColorSchemeKey_2
@@ -2332,9 +2812,7 @@ export declare type ThemeColorSyntax = ThemeColorSyntax_2
 
 export {ThemeColorToneKey}
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeContextValue {
   /** @deprecated No longer used */
   version: 0.0
@@ -2387,18 +2865,14 @@ export {ThemeInput}
  */
 export declare type ThemeLayer = ThemeLayer_2
 
-/**
- * @public
- */
+/** @public */
 export declare function ThemeProvider(props: ThemeProviderProps): ReactElement
 
 export declare namespace ThemeProvider {
   var displayName: string
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface ThemeProviderProps {
   children?: ReactNode
   scheme?: ThemeColorSchemeKey_2
@@ -2419,20 +2893,15 @@ export declare type ThemeShadow = ThemeShadow_2
  *
  * @public
  */
-export declare function Toast(
-  props: Omit<
-    Props<ToastProps, 'div'>,
-    'onDrag' | 'onDragEnd' | 'onDragStart' | 'onAnimationStart'
-  >,
-): ReactElement
+export declare function Toast<E extends ToastElementType = typeof DEFAULT_TOAST_ELEMENT>(
+  props: ToastProps<E>,
+): JSX.Element
 
 export declare namespace Toast {
   var displayName: string
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface ToastContextValue {
   version: 0.0
   /**
@@ -2444,51 +2913,57 @@ export declare interface ToastContextValue {
   push: (params: ToastParams) => string
 }
 
-/**
- * @public
- */
-declare interface ToastLayerProps extends GapStyleProps, PaddingStyleProps {
-  children: ReactNode
-}
+/** @public */
+export declare type ToastElementType = 'li' | ComponentType
 
-/**
- * @public
- */
-export declare interface ToastParams {
+/** @internal */
+declare type ToastLayerElementType = 'ul' | ComponentType
+
+/** @internal */
+declare type ToastLayerOwnProps = GapStyleProps & PaddingStyleProps
+
+/** @internal */
+declare type ToastLayerProps<E extends ToastLayerElementType = ToastLayerElementType> = Props<
+  ToastLayerOwnProps,
+  E
+>
+
+/** @public */
+export declare type ToastOwnProps = RadiusStyleProps & {
   closable?: boolean
   description?: ReactNode
-  duration?: number
-  id?: string
   onClose?: () => void
   title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
+  duration?: number
+  updatedAt?: number
 }
 
-/**
- * @public
- */
-export declare interface ToastProps extends RadiusStyleProps {
+/** @public */
+export declare interface ToastParams {
   closable?: boolean
   description?: ReactNode
+  duration?: number
+  id?: string
   onClose?: () => void
   title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
-  duration?: number
-  updatedAt?: number
 }
 
-/**
- * @public
- */
+/** @public */
+export declare type ToastProps<E extends ToastElementType = ToastElementType> = Props<
+  ToastOwnProps,
+  E
+>
+
+/** @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[]
@@ -2499,11 +2974,13 @@ export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'child
  *
  * @public
  */
-export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TooltipProps> &
-    TooltipProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
+  props: TooltipProps<E>,
+): JSX.Element
+
+export declare namespace Tooltip {
+  var displayName: string
+}
 
 /**
  * @beta
@@ -2551,55 +3028,63 @@ export declare interface TooltipDelayGroupProviderProps {
   delay: Delay
 }
 
-/**
- * @public
- */
-export declare interface TooltipProps
-  extends Omit<LayerProps, 'as'>,
-    RadiusStyleProps,
-    ShadowStyleProps {
-  /** @deprecated Use `fallbackPlacements` instead. */
-  allowedAutoPlacements?: Placement[]
-  /**
-   * Whether the tooltip should animate in and out.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
-  arrow?: boolean
-  boundaryElement?: HTMLElement | null
-  children?: ReactElement<Props>
-  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?: ThemeColorSchemeKey_2
-  tone?: ThemeColorCardToneKey
-}
+/** @public */
+export declare type TooltipElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+export declare type TooltipOwnProps = LayerOwnProps &
+  RadiusStyleProps &
+  ShadowStyleProps & {
+    /** @deprecated Use `fallbackPlacements` instead. */
+    allowedAutoPlacements?: Placement[]
+    /**
+     * 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?: ThemeColorSchemeKey_2
+    tone?: ThemeColorCardToneKey
+  }
+
+/** @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<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TreeProps> &
-    TreeProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Tree<E extends TreeElementType = typeof DEFAULT_TREE_ELEMENT>(
+  props: TreeProps<E>,
+): JSX.Element
+
+export declare namespace Tree {
+  var displayName: string
+}
 
 /**
  * @beta
@@ -2616,38 +3101,59 @@ export declare interface TreeContextValue {
   state: TreeState
 }
 
+/** @beta */
+export declare type TreeElementType = 'div' | ComponentType
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const TreeItem: NamedExoticComponent<Omit<Props<TreeItemProps, 'div'>, 'as'>>
+export declare function TreeItem<E extends TreeItemElementType = typeof DEFAULT_TREE_ITEM_ELEMENT>(
+  props: TreeItemProps<E>,
+): JSX.Element
 
-/**
- * @beta
- */
-export declare interface TreeItemProps extends CardProps {
+export declare namespace TreeItem {
+  var displayName: string
+}
+
+/** @beta */
+export declare type TreeItemElementType = 'a' | 'li' | ComponentType
+
+/** @beta */
+export declare type TreeItemOwnProps = CardOwnProps & {
   expanded?: boolean
   fontSize?: ResponsiveProp<FontTextSize>
-  icon?: ElementType
+  icon?: ElementType_2
   /**
    * Allows passing a custom element type to the link component
    */
-  linkAs?: ElementType
+  linkAs?: SelectableElementType
+  onClick?: MouseEventHandler<HTMLAnchorElement | HTMLLIElement>
   padding?: ResponsiveProp<Space>
   space?: ResponsiveProp<Space>
   text?: ReactNode
   weight?: ThemeFontWeightKey_2
 }
 
+/** @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 extends Pick<GapStyleProps, 'gap'> {
+export declare type TreeOwnProps = {
+  gap?: ResponsiveProp<Space>
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
 
+/** @beta */
+export declare type TreeProps<E extends TreeElementType = TreeElementType> = Props<TreeOwnProps, E>
+
 /**
  * @beta
  */
@@ -2667,9 +3173,7 @@ export declare interface TreeState {
  */
 export declare function useArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[]
 
-/**
- * @public
- */
+/** @public */
 export declare function useBoundaryElement(): BoundaryElementContextValue
 
 export declare function useCard(): CardContextValue_2 | null
@@ -2695,9 +3199,7 @@ export declare function useClickOutside(
   boundaryElement?: HTMLElement | null,
 ): (el: HTMLElement | null) => void
 
-/**
- * @public
- */
+/** @public */
 export declare function useClickOutsideEvent(
   listener: ClickOutsideEventListener | false | undefined,
   elementsArg?: () => ClickOutsideEventElements,
@@ -2753,9 +3255,7 @@ export declare function useForwardedRef<T>(ref: ForwardedRef<T>): MutableRefObje
  */
 export declare function useGlobalKeyDown(onKeyDown: (event: KeyboardEvent) => void): void
 
-/**
- * @public
- */
+/** @public */
 export declare function useLayer(): LayerContextValue
 
 /**
@@ -2776,9 +3276,7 @@ export declare function useMatchMedia(
  */
 export declare function useMediaIndex(): number
 
-/**
- * @public
- */
+/** @public */
 export declare function usePortal(): PortalContextValue
 
 /**
@@ -2807,24 +3305,16 @@ export declare function usePrefersDark(getServerSnapshot?: () => boolean): boole
  */
 export declare function usePrefersReducedMotion(getServerSnapshot?: () => boolean): boolean
 
-/**
- * @public
- */
+/** @public */
 export declare function useRootTheme(): ThemeContextValue
 
-/**
- * @public
- */
+/** @public */
 export declare function useTheme(): Theme_2
 
-/**
- * @public
- */
+/** @public */
 export declare function useTheme_v2(): Theme_v2
 
-/**
- * @public
- */
+/** @public */
 export declare function useToast(): ToastContextValue
 
 /**
@@ -2837,18 +3327,16 @@ export declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue |
  */
 export declare function useTree(): TreeContextValue
 
-/**
- * @beta
- */
-export declare const VirtualList: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof VirtualListProps<any>> &
-    VirtualListProps<any> &
-    RefAttributes<HTMLDivElement>
->
+/** @beta */
+export declare function VirtualList<
+  E extends VirtualListElementType = typeof DEFAULT_VIRTUAL_LIST_ELEMENT,
+>(props: VirtualListProps<E>): JSX.Element
 
-/**
- * @beta
- */
+export declare namespace VirtualList {
+  var displayName: string
+}
+
+/** @beta */
 export declare interface VirtualListChangeOpts {
   fromIndex: number
   gap: number
@@ -2858,10 +3346,11 @@ export declare interface VirtualListChangeOpts {
   toIndex: number
 }
 
-/**
- * @beta
- */
-export declare interface VirtualListProps<Item = any> extends Omit<StackProps, 'gap'> {
+/** @beta */
+export declare type VirtualListElementType = 'div' | ComponentType
+
+/** @beta */
+export declare type VirtualListOwnProps<Item = any> = {
   gap?: Space
   getItemKey?: (item: Item, itemIndex: number) => string
   items?: Item[]
@@ -2869,4 +3358,8 @@ export declare interface VirtualListProps<Item = any> extends Omit<StackProps, '
   renderItem?: (item: Item) => ReactNode
 }
 
+/** @beta */
+export declare type VirtualListProps<E extends VirtualListElementType = VirtualListElementType> =
+  Props<VirtualListOwnProps, E>
+
 export {}