@sanity/ui 3.2.0 → 3.3.1

package/dist/index.d.mts

@@ -3,16 +3,12 @@ import {Component} from 'react'
 import {Context} from 'react'
 import {createColorTheme as createColorTheme_2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
-import {DetailedHTMLProps} from 'react'
-import {ElementType} from 'react'
-import {FastOmit} from 'styled-components'
+import {ElementType as ElementType_2} from 'react'
 import {ForwardRefExoticComponent} from 'react'
 import {hexToRgb as hexToRgb_2} from '@sanity/ui/theme'
 import {HSL as HSL_2} from '@sanity/ui/theme'
 import {hslToRgb as hslToRgb_2} from '@sanity/ui/theme'
-import {HTMLAttributes} from 'react'
 import {HTMLProps} from 'react'
-import {IStyledComponentBase} from 'styled-components/dist/types'
 import {multiply as multiply_2} from '@sanity/ui/theme'
 import {parseColor as parseColor_2} from '@sanity/ui/theme'
 import {PartialThemeColorBuilderOpts} from '@sanity/ui/theme'
@@ -89,6 +85,13 @@ export declare const Arrow: ForwardRefExoticComponent<
     RefAttributes<HTMLDivElement>
 >
 
+/**
+ * Assign properties from `U` to `T`, excluding properties that already exist in `T`.
+ *
+ * @public
+ */
+export declare type Assign<T extends object, U extends object> = Omit<T, keyof U> & U
+
 /**
  * @internal
  */
@@ -160,7 +163,7 @@ export declare type AutocompleteMsg =
 /**
  * @public
  */
-export declare type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> &
+export declare type AutocompleteOpenButtonProps = ButtonOwnProps &
   Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
 
 /**
@@ -173,7 +176,7 @@ export declare interface AutocompleteProps<
   customValidity?: string
   filterOption?: (query: string, option: Option) => boolean
   fontSize?: number | number[]
-  icon?: ElementType | ReactNode
+  icon?: ElementType_2 | ReactNode
   id: string
   /** @beta */
   listBox?: BoxProps
@@ -283,9 +286,9 @@ export declare interface AutocompleteValueChangeMsg {
  *
  * @public
  */
-export declare const Avatar: ForwardRefExoticComponent<
-  AvatarProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
->
+export declare const Avatar: <E extends ElementType = 'div'>(
+  props: AvatarProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
@@ -307,17 +310,11 @@ export declare interface AvatarCounterProps {
 /**
  * @public
  */
-export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
-
-/**
- * @public
- */
-export declare interface AvatarProps {
+export declare interface AvatarOwnProps {
   /** @beta */
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   color?: ThemeColorAvatarColorKey
   initials?: string
   onImageLoadError?: (event: Error) => void
@@ -331,6 +328,16 @@ export declare interface AvatarProps {
   title?: string
 }
 
+/**
+ * @public
+ */
+export declare type AvatarPosition = 'top' | 'bottom' | 'inside'
+
+/**
+ * @public
+ */
+export declare type AvatarProps<E extends ElementType = 'div'> = Props<AvatarOwnProps, E>
+
 /**
  * @internal
  */
@@ -347,7 +354,7 @@ export declare type AvatarSize = 0 | 1 | 2 | 3
  * @public
  */
 export declare const AvatarStack: ForwardRefExoticComponent<
-  AvatarStackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
+  AvatarStackProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'ref'> & RefAttributes<HTMLDivElement>
 >
 
 /**
@@ -371,9 +378,9 @@ export declare type AvatarStatus = 'online' | 'editing' | 'inactive'
  *
  * @public
  */
-export declare const Badge: ForwardRefExoticComponent<
-  Omit<BadgeProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
->
+export declare const Badge: <E extends ElementType = 'div'>(
+  props: BadgeProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
@@ -384,14 +391,18 @@ export declare type BadgeMode = 'default' | 'outline'
 /**
  * @public
  */
-export declare interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export declare interface BadgeOwnProps extends BoxOwnProps, ResponsiveRadiusProps {
   fontSize?: number | number[]
   /** @deprecated No longer used. */
   mode?: BadgeMode
   tone?: BadgeTone
 }
 
+/**
+ * @public
+ */
+export declare type BadgeProps<E extends ElementType = 'div'> = Props<BadgeOwnProps, E>
+
 /**
  * @public
  */
@@ -443,10 +454,7 @@ export declare interface BoundaryElementProviderProps {
  *
  * @public
  */
-export declare const Box: ForwardRefExoticComponent<
-  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare const Box: <E extends ElementType = 'div'>(props: BoxProps<E>) => React.JSX.Element
 
 /**
  * @public
@@ -464,18 +472,24 @@ export declare type BoxHeight = 'stretch' | 'fill'
 export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
 
 /**
+ * The props that `Box` adds on top of the element it renders as.
+ *
  * @public
  */
-export declare interface BoxProps
+export declare interface BoxOwnProps
   extends ResponsiveFlexItemProps,
     ResponsiveBoxProps,
     ResponsiveGridItemProps,
     ResponsiveMarginProps,
     ResponsivePaddingProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
-  forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
+  forwardedAs?: ElementType
 }
 
+/**
+ * @public
+ */
+export declare type BoxProps<E extends ElementType = 'div'> = Props<BoxOwnProps, E>
+
 /**
  * @public
  * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
@@ -492,7 +506,7 @@ export declare type BoxSizing = 'content' | 'border'
  */
 export declare const Breadcrumbs: ForwardRefExoticComponent<
   BreadcrumbsProps &
-    Omit<HTMLProps<HTMLOListElement>, 'type' | 'ref' | 'as'> &
+    Omit<HTMLProps<HTMLOListElement>, 'type' | 'as' | 'ref'> &
     RefAttributes<HTMLOListElement>
 >
 
@@ -512,10 +526,9 @@ export declare interface BreadcrumbsProps {
 /**
  * @public
  */
-export declare const Button: ForwardRefExoticComponent<
-  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'width' | 'as'>, 'ref'> &
-    RefAttributes<HTMLButtonElement>
->
+export declare const Button: <E extends ElementType = 'button'>(
+  props: ButtonProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
@@ -525,8 +538,7 @@ export declare type ButtonMode = ThemeColorButtonModeKey_2
 /**
  * @public
  */
-export declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export declare interface ButtonOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
   fontSize?: number | number[]
   mode?: ButtonMode
   icon?: React.ElementType | React.ReactNode
@@ -551,6 +563,11 @@ export declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveR
   width?: ButtonWidth
 }
 
+/**
+ * @public
+ */
+export declare type ButtonProps<E extends ElementType = 'button'> = Props<ButtonOwnProps, E>
+
 /**
  * @public
  */
@@ -572,16 +589,13 @@ export declare type ButtonWidth = 'fill'
  *
  * @public
  */
-export declare const Card: ForwardRefExoticComponent<
-  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare const Card: <E extends ElementType = 'div'>(props: CardProps<E>) => React.JSX.Element
 
 /**
  * @public
  */
-export declare interface CardProps
-  extends BoxProps,
+export declare interface CardOwnProps
+  extends BoxOwnProps,
     ResponsiveBorderProps,
     ResponsiveRadiusProps,
     ResponsiveShadowProps {
@@ -595,12 +609,19 @@ export declare interface CardProps
    * @beta
    */
   __unstable_focusRing?: boolean
+  disabled?: boolean
   muted?: boolean
   pressed?: boolean
   scheme?: ThemeColorSchemeKey_2
+  selected?: boolean
   tone?: CardTone
 }
 
+/**
+ * @public
+ */
+export declare type CardProps<E extends ElementType = 'div'> = Props<CardOwnProps, E>
+
 /**
  * @internal
  */
@@ -657,28 +678,30 @@ export declare type ClickOutsideListener = (event: MouseEvent) => void
 /**
  * @public
  */
-export declare const Code: ForwardRefExoticComponent<
-  Omit<CodeProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> & RefAttributes<HTMLElement>
->
+export declare const Code: <E extends ElementType = 'pre'>(props: CodeProps<E>) => React.JSX.Element
 
 /**
  * @public
  */
-export declare interface CodeProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export declare interface CodeOwnProps {
   /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
   weight?: string
 }
 
+/**
+ * @public
+ */
+export declare type CodeProps<E extends ElementType = 'pre'> = Props<CodeOwnProps, E>
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 export declare const CodeSkeleton: ForwardRefExoticComponent<
   Omit<
-    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
+    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'height' | 'as' | 'children'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -692,6 +715,12 @@ export declare interface CodeSkeletonProps extends SkeletonProps {
   size?: number | number[]
 }
 
+/** @public */
+export declare type ComponentType<P = any> =
+  | React.FunctionComponent<P>
+  | React.ComponentClass<P>
+  | React.ExoticComponent<P>
+
 /**
  * @internal
  * @deprecated this component will be removed in the next major release
@@ -715,15 +744,19 @@ export declare namespace ConditionalWrapper {
  *
  * @public
  */
-export declare const Container: ForwardRefExoticComponent<
-  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare const Container: <E extends ElementType = 'div'>(
+  props: ContainerProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
  */
-export declare interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
+export declare interface ContainerOwnProps extends BoxOwnProps, ResponsiveWidthProps {}
+
+/**
+ * @public
+ */
+export declare type ContainerProps<E extends ElementType = 'div'> = Props<ContainerOwnProps, E>
 
 /**
  * @internal
@@ -752,7 +785,7 @@ export declare type Delay =
  * @public
  */
 export declare const Dialog: ForwardRefExoticComponent<
-  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'width' | 'as'>, 'ref'> &
+  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'width' | 'id' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -882,6 +915,12 @@ export declare const _elementSizeObserver: _ElementSizeObserver
  */
 export declare type _ElementSizeSubscriber = (elementRect: ElementSize) => void
 
+/** @public */
+export declare type ElementType<P = any> = TagType | ComponentType<P>
+
+/** @public */
+export declare type EmptyProps = object
+
 /**
  * DO NOT USE IN PRODUCTION
  * @beta
@@ -922,10 +961,7 @@ export declare function _fillCSSObject(
  *
  * @public
  */
-export declare const Flex: ForwardRefExoticComponent<
-  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'wrap' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare const Flex: <E extends ElementType = 'div'>(props: FlexProps<E>) => React.JSX.Element
 
 /**
  * @public
@@ -951,13 +987,18 @@ export declare type FlexJustify =
 /**
  * @public
  */
-export declare interface FlexProps
-  extends Omit<BoxProps, 'display'>,
+export declare interface FlexOwnProps
+  extends Omit<BoxOwnProps, 'display'>,
     ResponsiveFlexProps,
     ResponsiveFlexItemProps {
   gap?: number | number[]
 }
 
+/**
+ * @public
+ */
+export declare type FlexProps<E extends ElementType = 'div'> = Props<FlexOwnProps, E>
+
 /**
  * @public
  */
@@ -1004,10 +1045,7 @@ export declare function _getResponsiveSpace(
  *
  * @public
  */
-export declare const Grid: ForwardRefExoticComponent<
-  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare const Grid: <E extends ElementType = 'div'>(props: GridProps<E>) => React.JSX.Element
 
 /**
  * @public
@@ -1057,7 +1095,12 @@ export declare type GridItemRowStart = 'auto' | number
 /**
  * @public
  */
-export declare interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
+export declare interface GridOwnProps extends Omit<BoxOwnProps, 'display'>, ResponsiveGridProps {}
+
+/**
+ * @public
+ */
+export declare type GridProps<E extends ElementType = 'div'> = Props<GridOwnProps, E>
 
 /**
  * @internal
@@ -1069,18 +1112,16 @@ export declare function _hasFocus(element: HTMLElement): boolean
  *
  * @public
  */
-export declare const Heading: ForwardRefExoticComponent<
-  Omit<HeadingProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> &
-    RefAttributes<HTMLElement>
->
+export declare const Heading: <E extends ElementType = 'div'>(
+  props: HeadingProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
  */
-export declare interface HeadingProps {
+export declare interface HeadingOwnProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   muted?: boolean
   size?: number | number[]
   /**
@@ -1092,13 +1133,18 @@ export declare interface HeadingProps {
   weight?: ThemeFontWeightKey_2
 }
 
+/**
+ * @public
+ */
+export declare type HeadingProps<E extends ElementType = 'div'> = Props<HeadingOwnProps, E>
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 export declare const HeadingSkeleton: ForwardRefExoticComponent<
   Omit<
-    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
+    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'height' | 'as' | 'children'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1124,7 +1170,7 @@ export declare const hexToRgb: typeof hexToRgb_2
  * @public
  */
 export declare const Hotkeys: ForwardRefExoticComponent<
-  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLElement>
+  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as' | 'ref'> & RefAttributes<HTMLElement>
 >
 
 /**
@@ -1159,14 +1205,14 @@ export declare const hslToRgb: typeof hslToRgb_2
  *
  * @public
  */
-export declare const Inline: ForwardRefExoticComponent<
-  Omit<InlineProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
->
+export declare const Inline: <E extends ElementType = 'div'>(
+  props: InlineProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
  */
-export declare interface InlineProps extends Omit<BoxProps, 'display'> {
+export declare interface InlineOwnProps extends Omit<BoxOwnProps, 'display'> {
   /**
    * The spacing between children.
    * @deprecated Use `gap` instead. `space` will be removed in v4.
@@ -1176,6 +1222,11 @@ export declare interface InlineProps extends Omit<BoxProps, 'display'> {
   gap?: number | number[]
 }
 
+/**
+ * @public
+ */
+export declare type InlineProps<E extends ElementType = 'div'> = Props<InlineOwnProps, E>
+
 /**
  * @internal
  */
@@ -1226,37 +1277,37 @@ export declare function _isScrollable(el: Node): boolean
  *
  * @public
  */
-export declare const KBD: ForwardRefExoticComponent<
-  KBDProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLDivElement>
->
+export declare const KBD: <E extends ElementType = 'kbd'>(props: KBDProps<E>) => React.JSX.Element
 
 /**
  * @public
  */
-export declare interface KBDProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export declare interface KBDOwnProps {
   fontSize?: number | number[]
   padding?: number | number[]
   radius?: Radius | Radius[]
 }
 
+/**
+ * @public
+ */
+export declare type KBDProps<E extends ElementType = 'kbd'> = Props<KBDOwnProps, E>
+
 /**
  * Typographic labels.
  *
  * @public
  */
-export declare const Label: ForwardRefExoticComponent<
-  Omit<LabelProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+export declare const Label: <E extends ElementType = 'div'>(
+  props: LabelProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
  */
-export declare interface LabelProps {
+export declare interface LabelOwnProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   muted?: boolean
   size?: number | number[]
   /**
@@ -1268,13 +1319,18 @@ export declare interface LabelProps {
   weight?: ThemeFontWeightKey_2
 }
 
+/**
+ * @public
+ */
+export declare type LabelProps<E extends ElementType = 'div'> = Props<LabelOwnProps, E>
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 export declare const LabelSkeleton: ForwardRefExoticComponent<
   Omit<
-    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
+    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'height' | 'as' | 'children'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1355,7 +1411,7 @@ export declare interface _MediaStore {
  * @public
  */
 export declare const Menu: ForwardRefExoticComponent<
-  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'role' | 'as'>, 'ref'> &
+  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'tabIndex' | 'role'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1412,29 +1468,26 @@ export declare interface MenuButtonProps {
 /**
  * @public
  */
-export declare const MenuDivider: IStyledComponentBase<
-  'web',
-  FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>
-> &
-  string
+export declare const MenuDivider: <E extends ElementType = 'hr'>(
+  props: MenuDividerProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
  */
-export declare function MenuGroup(
-  props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
-    MenuGroupProps,
-): React.JSX.Element
+export declare type MenuDividerProps<E extends ElementType = 'hr'> = Props<EmptyProps, E>
 
-export declare namespace MenuGroup {
-  var displayName: string
-}
+/**
+ * @public
+ */
+export declare const MenuGroup: <E extends ElementType = 'button'>(
+  props: MenuGroupProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
  */
-export declare interface MenuGroupProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export declare interface MenuGroupOwnProps {
   fontSize?: number | number[]
   icon?: React.ElementType | React.ReactNode
   menu?: Omit<
@@ -1463,17 +1516,19 @@ export declare interface MenuGroupProps {
 /**
  * @public
  */
-export declare const MenuItem: ForwardRefExoticComponent<
-  MenuItemProps &
-    Omit<HTMLProps<HTMLDivElement>, 'selected' | 'height' | 'ref' | 'tabIndex' | 'as'> &
-    RefAttributes<HTMLDivElement>
->
+export declare type MenuGroupProps<E extends ElementType = 'button'> = Props<MenuGroupOwnProps, E>
 
 /**
  * @public
  */
-export declare interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export declare const MenuItem: <E extends ElementType = 'button'>(
+  props: MenuItemProps<E>,
+) => React.JSX.Element
+
+/**
+ * @public
+ */
+export declare interface MenuItemOwnProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
   fontSize?: number | number[]
   hotkeys?: string[]
   icon?: React.ElementType | React.ReactNode
@@ -1489,6 +1544,11 @@ export declare interface MenuItemProps extends ResponsivePaddingProps, Responsiv
   tone?: SelectableTone
 }
 
+/**
+ * @public
+ */
+export declare type MenuItemProps<E extends ElementType = 'button'> = Props<MenuItemOwnProps, E>
+
 /**
  * @public
  */
@@ -1557,7 +1617,7 @@ export declare type Placement =
  */
 export declare const Popover: ForwardRefExoticComponent<
   Omit<
-    PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'children' | 'as'>,
+    PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'as' | 'children'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1709,6 +1769,19 @@ export declare interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
+/**
+ * Resolves the props of a polymorphic component: the props of the element/component passed to `as`
+ * (defaulting to the component's own element), with the component's own props assigned on top.
+ *
+ * @public
+ */
+export declare type Props<P extends EmptyProps, E extends ElementType<P>> = Assign<
+  E extends TagType ? React.JSX.IntrinsicElements[E] : React.ComponentProps<E>,
+  P & {
+    as?: E
+  }
+>
+
 /**
  * The `Radio` component allows the user to select one option from a set.
  *
@@ -2065,7 +2138,9 @@ export declare const Skeleton: ForwardRefExoticComponent<
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
+export declare interface SkeletonProps
+  extends ResponsiveRadiusProps,
+    Omit<BoxOwnProps, 'children'> {
   animated?: boolean
   delay?: number
 }
@@ -2092,7 +2167,7 @@ export declare interface SpinnerProps {
  * @public
  */
 export declare const SrOnly: ForwardRefExoticComponent<
-  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>, 'ref'> &
+  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'as' | 'aria-hidden'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2109,15 +2184,14 @@ export declare interface SrOnlyProps {
  *
  * @public
  */
-export declare const Stack: ForwardRefExoticComponent<
-  StackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
->
+export declare const Stack: <E extends ElementType = 'div'>(
+  props: StackProps<E>,
+) => React.JSX.Element
 
 /**
  * @public
  */
-export declare interface StackProps extends BoxProps {
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+export declare interface StackOwnProps extends BoxOwnProps {
   gap?: number | number[]
   /**
    * @deprecated Use `gap` instead. `space` will be removed in v4.
@@ -2125,6 +2199,11 @@ export declare interface StackProps extends BoxProps {
   space?: number | number[]
 }
 
+/**
+ * @public
+ */
+export declare type StackProps<E extends ElementType = 'div'> = Props<StackOwnProps, E>
+
 /**
  * @public
  * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
@@ -2164,7 +2243,7 @@ export declare const Tab: ForwardRefExoticComponent<
     TabProps &
       Omit<
         HTMLProps<HTMLButtonElement>,
-        'label' | 'id' | 'type' | 'width' | 'aria-controls' | 'as'
+        'width' | 'label' | 'id' | 'type' | 'as' | 'aria-controls'
       >,
     'ref'
   > &
@@ -2182,7 +2261,7 @@ export declare const TabList: ForwardRefExoticComponent<
 /**
  * @public
  */
-export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
+export declare interface TabListProps extends Omit<InlineOwnProps, 'height'> {
   children: Array<React.JSX.Element | null | undefined | false>
 }
 
@@ -2191,7 +2270,7 @@ export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'>
  */
 export declare const TabPanel: ForwardRefExoticComponent<
   Omit<
-    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'role' | 'aria-labelledby' | 'as'>,
+    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'as' | 'role' | 'aria-labelledby'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -2200,7 +2279,7 @@ export declare const TabPanel: ForwardRefExoticComponent<
 /**
  * @public
  */
-export declare interface TabPanelProps extends BoxProps {
+export declare interface TabPanelProps extends BoxOwnProps {
   /**
    * The `id` of the correlating `Tab` component.
    */
@@ -2226,15 +2305,15 @@ export declare interface TabProps {
   'tone'?: ButtonTone
 }
 
+/** @public */
+export declare type TagType = keyof React.JSX.IntrinsicElements
+
 /**
  * The `Text` component is an agile, themed typographic element.
  *
  * @public
  */
-declare const Text_2: ForwardRefExoticComponent<
-  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
-    RefAttributes<HTMLDivElement>
->
+declare const Text_2: <E extends ElementType = 'div'>(props: TextProps<E>) => React.JSX.Element
 export {Text_2 as Text}
 
 /**
@@ -2274,14 +2353,14 @@ export declare interface TextAreaProps extends ResponsiveRadiusProps {
  * @public
  */
 export declare const TextInput: ForwardRefExoticComponent<
-  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'prefix' | 'as'>, 'ref'> &
+  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'as' | 'prefix'>, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
 /**
  * @public
  */
-export declare type TextInputClearButtonProps = Omit<ButtonProps, 'as'> &
+export declare type TextInputClearButtonProps = ButtonOwnProps &
   Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>
 
 /**
@@ -2339,10 +2418,9 @@ export declare type TextInputType =
 /**
  * @public
  */
-export declare interface TextProps {
+export declare interface TextOwnProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
-  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   /** When `true` the text color will be muted. */
   muted?: boolean
   size?: number | number[]
@@ -2355,13 +2433,18 @@ export declare interface TextProps {
   weight?: ThemeFontWeightKey_2
 }
 
+/**
+ * @public
+ */
+export declare type TextProps<E extends ElementType = 'div'> = Props<TextOwnProps, E>
+
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 export declare const TextSkeleton: ForwardRefExoticComponent<
   Omit<
-    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
+    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'height' | 'as' | 'children'>,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -2659,7 +2742,7 @@ export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'child
  * @public
  */
 export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'children' | 'as'>, 'ref'> &
+  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'as' | 'children'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2754,8 +2837,8 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
  */
 export declare const Tree: ForwardRefExoticComponent<
   TreeProps &
-    Omit<HTMLProps<HTMLDivElement>, 'height' | 'wrap' | 'ref' | 'role' | 'as' | 'align'> &
-    RefAttributes<HTMLDivElement>
+    Omit<HTMLProps<HTMLUListElement>, 'wrap' | 'height' | 'as' | 'ref' | 'align' | 'role'> &
+    RefAttributes<HTMLUListElement>
 >
 
 /**
@@ -2799,7 +2882,7 @@ export declare interface TreeItemProps {
   /**
    * Allows passing a custom element type to the link component
    */
-  linkAs?: BoxProps['as']
+  linkAs?: ElementType
   padding?: number | number[]
   gap?: number | number[]
   /**
@@ -3025,8 +3108,8 @@ export declare function useTree(): TreeContextValue
  */
 export declare const VirtualList: ForwardRefExoticComponent<
   VirtualListProps<any> &
-    StackProps &
-    Omit<HTMLProps<HTMLDivElement>, 'children' | 'ref' | 'onChange' | 'as'> &
+    StackOwnProps &
+    Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'ref' | 'onChange'> &
     RefAttributes<HTMLDivElement>
 >