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

package/dist/_visual-editing.d.ts

@@ -1,29 +1,29 @@
-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 {CardStyleProps} from '@sanity/ui/css'
+import type {ComponentClass} from 'react'
 import type {ComponentProps} from 'react'
-import {DisplayStyleProps} from '@sanity/ui/css'
-import {ElementProps} from '../..'
-import {ElementType} from 'react'
+import type {DisplayStyleProps} from '@sanity/ui/css'
+import {ElementType as ElementType_2} from 'react'
+import type {ExoticComponent} from 'react'
 import {FlexStyleProps} 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 {GridStyleProps} from '@sanity/ui/css'
+import {HTMLAttributes} from 'react'
 import {InputStyleProps} from '@sanity/ui/css'
-import {InsetStyleProps} from '@sanity/ui/css'
-import {MutableRefObject} from 'react'
-import {NamedExoticComponent} from 'react'
+import type {InsetStyleProps} from '@sanity/ui/css'
+import {JSX} from 'react'
 import {PaddingStyleProps} from '@sanity/ui/css'
-import {PolymorphicProps} from '../..'
-import {PositionStyleProps} from '@sanity/ui/css'
-import {Radius} from '@sanity/ui/theme'
+import type {PositionStyleProps} from '@sanity/ui/css'
 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 {ResponsiveProp} from '@sanity/ui/css'
 import {RootTheme} from '@sanity/ui/theme'
 import {ShadowStyleProps} from '@sanity/ui/css'
@@ -36,40 +36,75 @@ import {ThemeColorCardToneKey} from '@sanity/ui/theme'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {Width} from '@sanity/ui/css'
-
-/** @public */
-declare type Assign<T, U> = Omit<T, keyof U> & U
+import type {Width} from '@sanity/ui/css'
 
 /**
- * The `Box` component is a basic layout wrapper component which provides utility properties
- * for flex, margins and padding.
+ * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
  *
  * @public
  */
-export declare const Box: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof BoxProps> &
-    BoxProps &
-    RefAttributes<HTMLDivElement>
->
+declare type Assign<T extends {}, U extends {}> = Omit<T, keyof U> & U
 
 /**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
  * @public
  */
-export declare interface BoxProps
-  extends BoxStyleProps,
-    GapStyleProps,
-    InsetStyleProps,
-    PositionStyleProps {}
+export declare function Box<E extends BoxElementType = typeof DEFAULT_BOX_ELEMENT>(
+  props: BoxProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare const Button: ForwardRefExoticComponent<
-  Omit<ElementProps<'button'> & PolymorphicProps, keyof ButtonProps> &
-    ButtonProps &
-    RefAttributes<HTMLButtonElement>
->
+export declare namespace Box {
+  var displayName: string
+}
+
+/** @public */
+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
+
+/** @public */
+declare type BoxOwnProps = BoxStyleProps & GapStyleProps & InsetStyleProps & PositionStyleProps
+
+/** @public */
+export declare type BoxProps<E extends BoxElementType = BoxElementType> = Props<BoxOwnProps, 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 */
+declare type ButtonElementType = 'a' | 'button' | 'label' | ComponentType
 
 /**
  * @public
@@ -77,40 +112,41 @@ export declare const Button: ForwardRefExoticComponent<
  */
 declare type ButtonMode = ThemeColorButtonModeKey
 
-/**
- * @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 */
+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 */
 declare type ButtonTextAlign = 'left' | 'right' | 'center'
 
 /**
@@ -125,16 +161,19 @@ declare type ButtonTone = ThemeColorStateToneKey
  *
  * @public
  */
-export declare const Card: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof CardProps> &
-    CardProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Card<E extends CardElementType = typeof DEFAULT_CARD_ELEMENT>(
+  props: CardProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface CardProps extends BoxProps, CardStyleProps {
+export declare namespace Card {
+  var displayName: string
+}
+
+/** @public */
+declare type CardElementType = BoxElementType
+
+/** @public */
+declare interface CardOwnProps extends BoxOwnProps, CardStyleProps {
   /**
    * Do not use in production.
    * @beta
@@ -146,15 +185,72 @@ export declare interface CardProps extends BoxProps, CardStyleProps {
    */
   __unstable_focusRing?: boolean
   disabled?: boolean
-  href?: string
   pressed?: boolean
   selected?: boolean
   target?: string
 }
 
-/**
- * @public
- */
+/** @public */
+export declare type CardProps<E extends CardElementType = CardElementType> = Props<CardOwnProps, E>
+
+/** @public */
+declare type ComponentType<P = any> = FunctionComponent<P> | ComponentClass<P> | ExoticComponent<P>
+
+/** @public */
+declare const DEFAULT_BOX_ELEMENT = 'div'
+
+/** @public */
+declare const DEFAULT_BUTTON_ELEMENT = 'button'
+
+/** @public */
+declare const DEFAULT_CARD_ELEMENT = 'div'
+
+/** @public */
+declare const DEFAULT_FLEX_ELEMENT = 'div'
+
+/** @public */
+declare const DEFAULT_GRID_ELEMENT = 'div'
+
+/** @public */
+declare const DEFAULT_HOTKEYS_ELEMENT = 'kbd'
+
+/** @public */
+declare const DEFAULT_MENU_DIVIDER_ELEMENT = 'hr'
+
+/** @public */
+declare const DEFAULT_MENU_ELEMENT = 'div'
+
+/** @public */
+declare const DEFAULT_MENU_GROUP_ELEMENT = 'button'
+
+/** @public */
+declare const DEFAULT_MENU_ITEM_ELEMENT = 'button'
+
+/** @public */
+declare const DEFAULT_POPOVER_ELEMENT = 'div'
+
+/** @public */
+declare const DEFAULT_SPINNER_ELEMENT = 'div'
+
+/** @public */
+declare const DEFAULT_STACK_ELEMENT = 'div'
+
+/** @public */
+declare const DEFAULT_TAB_ELEMENT = 'button'
+
+/** @public */
+declare const DEFAULT_TAB_LIST_ELEMENT = 'div'
+
+/** @public */
+declare const DEFAULT_TEXT_ELEMENT = 'div'
+
+/** @public */
+declare const DEFAULT_TEXT_INPUT_ELEMENT = 'input'
+
+/** @public */
+declare const DEFAULT_TOOLTIP_ELEMENT = 'div'
+
+/** @public */
 declare type Delay =
   | number
   | Partial<{
@@ -163,57 +259,73 @@ declare type Delay =
     }>
 
 /** @public */
-declare type ElementProps_2<E extends ElementType> = Omit<ComponentProps<E>, 'as' | 'ref'>
+declare type ElementType<P> = TagType | ComponentType<P>
+
+/** @public */
+declare type EmptyProps = {}
 
 /**
  * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
  *
  * @public
  */
-export declare const Flex: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof FlexProps> &
-    FlexProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Flex<E extends FlexElementType = typeof DEFAULT_FLEX_ELEMENT>(
+  props: FlexProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface FlexProps extends Omit<BoxProps, 'display'> {
-  htmlFor?: string
+export declare namespace Flex {
+  var displayName: string
 }
 
+/** @public */
+declare type FlexElementType = BoxElementType
+
+/** @public */
+declare type FlexOwnProps = Omit<BoxOwnProps, 'display'>
+
+/** @public */
+export declare type FlexProps<E extends FlexElementType = FlexElementType> = Props<FlexOwnProps, E>
+
 /**
  * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
  *
  * @public
  */
-export declare const Grid: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof GridProps> &
-    GridProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Grid<E extends GridElementType = typeof DEFAULT_GRID_ELEMENT>(
+  props: GridProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare interface GridProps extends Omit<BoxProps, 'display'> {}
+export declare namespace Grid {
+  var displayName: string
+}
+
+/** @public */
+declare type GridElementType = BoxElementType
+
+/** @public */
+declare type GridOwnProps = Omit<BoxOwnProps, 'display'>
+
+/** @public */
+export declare type GridProps<E extends GridElementType = GridElementType> = Props<GridOwnProps, E>
 
 /**
  * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
  *
  * @public
  */
-export declare const Hotkeys: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, 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 */
+declare type HotkeysElementType = 'kbd' | ComponentType
+
+/** @public */
+declare interface HotkeysOwnProps extends GapStyleProps, RadiusStyleProps {
   fontSize?: ResponsiveProp<FontTextSize>
   padding?: ResponsiveProp<Space>
   /** @deprecated Use `gap` instead. */
@@ -221,10 +333,14 @@ export declare interface HotkeysProps extends GapStyleProps, RadiusStyleProps {
   keys?: string[]
 }
 
-/**
- * @public
- */
-declare interface InlineProps extends Omit<BoxProps, 'align' | 'display' | 'justify'> {
+/** @public */
+export declare type HotkeysProps<E extends HotkeysElementType = HotkeysElementType> = Props<
+  HotkeysOwnProps,
+  E
+>
+
+/** @public */
+declare type InlineOwnProps = Omit<BoxOwnProps, keyof FlexStyleProps | keyof GridStyleProps> & {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
@@ -239,27 +355,21 @@ export declare function isHTMLAnchorElement(element: unknown): element is HTMLAn
  */
 export declare function isHTMLElement(node: unknown): node is HTMLElement
 
-/**
- * @public
- */
-declare interface LayerProps extends BoxProps {
+/** @public */
+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 function LayerProvider(props: LayerProviderProps): ReactElement
 
 export declare namespace LayerProvider {
   var displayName: string
 }
 
-/**
- * @public
- */
+/** @public */
 declare interface LayerProviderProps {
   children?: ReactNode
   zOffset?: number | number[]
@@ -270,42 +380,58 @@ declare interface LayerProviderProps {
  *
  * @public
  */
-export declare const Menu: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof MenuProps> &
-    MenuProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Menu<E extends MenuElementType = typeof DEFAULT_MENU_ELEMENT>(
+  props: MenuProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare const MenuDivider: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, never> &
-    MenuDividerProps &
-    RefAttributes<HTMLHRElement>
+export declare namespace Menu {
+  var displayName: string
+}
+
+/** @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 */
+declare type MenuDividerElementType = 'div' | 'hr' | 'span' | ComponentType
+
+/** @public */
+declare type MenuDividerOwnProps = {}
+
+/** @public */
+declare type MenuDividerProps<E extends MenuDividerElementType = MenuDividerElementType> = Props<
+  MenuDividerOwnProps,
+  E
 >
 
 /** @public */
-declare interface MenuDividerProps {}
+declare type MenuElementType = 'div' | 'span' | ComponentType
 
-/**
- * @public
- */
-export declare function MenuGroup(props: Props<MenuGroupProps, 'div'>): ReactElement
+/** @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 */
+declare type MenuGroupElementType = 'button' | ComponentType
+
+/** @public */
+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'
@@ -317,43 +443,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<'div'> & PolymorphicProps, 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 */
+declare type MenuItemElementType = 'button' | 'a' | ComponentType
+
+/** @public */
+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 */
+declare type MenuOwnProps = PaddingStyleProps & {
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -362,6 +500,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
@@ -374,6 +513,9 @@ export declare interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps
   'aria-labelledby'?: string
 }
 
+/** @public */
+export declare type MenuProps<E extends MenuElementType = MenuElementType> = Props<MenuOwnProps, E>
+
 /**
  * Placement of floating UI elements.
  *
@@ -393,20 +535,21 @@ declare type Placement =
   | 'left-start'
   | 'left-end'
 
-declare interface PolymorphicProps_2 {
-  as?: ElementType
-}
-
 /**
  * The `Popover` component is used to display some content on top of another.
  *
  * @public
  */
-export declare const Popover: NamedExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, 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 */
+declare type PopoverElementType = 'div' | ComponentType
 
 /**
  * @beta
@@ -414,7 +557,7 @@ export declare const Popover: NamedExoticComponent<
 export declare type PopoverMargins = [number, number, number, number]
 
 /** @public */
-export declare interface PopoverProps extends CardProps, LayerProps {
+declare type PopoverOwnProps = LayerOwnProps & {
   /** @beta */
   __unstable_margins?: PopoverMargins
   /**
@@ -474,26 +617,26 @@ 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 */
 declare type PopoverUpdateCallback = () => void
 
-/**
- * @public
- */
+/** @public */
 export declare function Portal(props: PortalProps): ReactPortal | null
 
 export declare namespace Portal {
   var displayName: string
 }
 
-/**
- * @public
- */
+/** @public */
 export declare interface PortalProps {
   children: ReactNode
   /**
@@ -502,18 +645,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
@@ -528,105 +667,124 @@ export declare interface PortalProviderProps {
 }
 
 /** @public */
-declare type Props<P extends {} = {}, E extends ElementType = ElementType> = Assign<
-  ElementProps_2<E> & PolymorphicProps_2,
-  P
+declare type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
+  E extends TagType ? JSX.IntrinsicElements[E] : ComponentProps<E>,
+  P & {
+    as?: E
+  }
 >
 
-/**
- * @public
- * @deprecated Use `ThemeColorStateToneKey` instead
- */
-declare type SelectableTone = ThemeColorStateToneKey
-
 /**
  * Indicate that something is loading for an indeterminate amount of time.
  *
  * @public
  */
-export declare const Spinner: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, 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 */
+declare type SpinnerElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+declare type SpinnerOwnProps = {
   muted?: boolean
   size?: ResponsiveProp<FontTextSize>
 }
 
+/** @public */
+export declare type SpinnerProps<E extends SpinnerElementType = SpinnerElementType> = Props<
+  SpinnerOwnProps,
+  E
+>
+
 /**
  * The `Stack` component is used to place elements on top of each other.
  *
  * @public
  */
-export declare const Stack: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, 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 */
+declare type StackElementType = BoxElementType
+
+/** @public */
+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.
  */
 export declare const studioTheme: RootTheme
 
-/**
- * @public
- */
-export declare const Tab: ForwardRefExoticComponent<
-  Omit<ElementProps<'button'> & PolymorphicProps, keyof TabProps> &
-    TabProps &
-    RefAttributes<HTMLButtonElement>
->
+/** @public */
+export declare function Tab<E extends TabElementType = typeof DEFAULT_TAB_ELEMENT>(
+  props: TabProps<E>,
+): JSX.Element
 
-/**
- * @public
- */
-export declare const TabList: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof TabListProps> &
-    TabListProps &
-    RefAttributes<HTMLDivElement>
->
+export declare namespace Tab {
+  var displayName: string
+}
 
-/**
- * @public
- */
+/** @public */
+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 */
 declare type TabListChild = ReactElement<Props<TabProps, 'button'>> | null | undefined | false
 
-/**
- * @public
- */
-export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
+/** @public */
+declare type TabListElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+declare type TabListOwnProps = Omit<InlineOwnProps, 'as' | 'height'> & {
   children: TabListChild[]
 }
 
-/**
- * @public
- */
-export declare interface TabProps {
+/** @public */
+export declare type TabListProps<E extends TabListElementType = TabListElementType> = Props<
+  TabListOwnProps,
+  E
+>
+
+/** @public */
+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
@@ -635,41 +793,65 @@ export declare interface TabProps {
   'tone'?: ButtonTone
 }
 
+/** @public */
+export declare type TabProps<E extends TabElementType = TabElementType> = Props<TabOwnProps, E>
+
+/** @public */
+declare type TagType = keyof JSX.IntrinsicElements
+
 /**
  * The `Text` component is an agile, themed typographic element.
  *
  * @public
  */
-declare const Text_2: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, 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}
 
+/** @public */
+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<'input'> & PolymorphicProps, 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 */
 declare type TextInputClearButtonProps = Omit<
-  Props<ButtonProps, 'button'>,
+  ButtonProps<'button'>,
   'as' | 'onClick' | 'onMouseDown'
 >
 
-/**
- * @public
- */
-export declare interface TextInputProps extends InputStyleProps {
+/** @public */
+declare type TextInputElementType = 'input' | ComponentType
+
+/** @public */
+declare type TextInputOwnProps = InputStyleProps & {
   /**
    * @beta
    */
@@ -679,8 +861,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
    */
@@ -689,47 +871,29 @@ export declare interface TextInputProps extends InputStyleProps {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
   suffix?: ReactNode
-  type?: TextInputType
   weight?: ThemeFontWeightKey
 }
 
-/**
- * @public
- */
-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 */
+declare type TextOwnProps = TextStyleProps & TextOverflowStyleProps
 
-/**
- * @public
- */
+/** @public */
+export declare type TextProps<E extends TextElementType = TextElementType> = Props<TextOwnProps, E>
+
+/** @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
@@ -742,52 +906,60 @@ export declare interface ThemeProviderProps {
  *
  * @public
  */
-export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof TooltipProps> &
-    TooltipProps &
-    RefAttributes<HTMLDivElement>
->
+export declare function Tooltip<E extends TooltipElementType = typeof DEFAULT_TOOLTIP_ELEMENT>(
+  props: TooltipProps<E>,
+): JSX.Element
 
-/**
- * @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
-  tone?: ThemeColorCardToneKey
+export declare namespace Tooltip {
+  var displayName: string
 }
 
+/** @public */
+declare type TooltipElementType = 'div' | 'span' | ComponentType
+
+/** @public */
+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
+    tone?: ThemeColorCardToneKey
+  }
+
+/** @public */
+export declare type TooltipProps<E extends TooltipElementType = TooltipElementType> = Props<
+  TooltipOwnProps,
+  E
+>
+
 /**
  * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
  *
@@ -801,9 +973,7 @@ export declare interface TooltipProps
  */
 export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
 
-/**
- * @public
- */
+/** @public */
 export declare function useTheme_v2(): Theme_v2
 
 export {}