@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

package/dist/index.d.ts

@@ -5,16 +5,22 @@ 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 {CardStyleProps as CardStyleProps_2} from '@sanity/ui/css'
 import {Component} from 'react'
+import type {ComponentProps} 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 {ErrorInfo} from 'react'
 import {FlexAlign} from '@sanity/ui/css'
 import {FlexDirection} from '@sanity/ui/css'
 import {FlexJustify} from '@sanity/ui/css'
+import {FlexStyleProps} from '@sanity/ui/css'
 import {FlexValue} from '@sanity/ui/css'
 import {FlexWrap} from '@sanity/ui/css'
 import {FontCodeSize} from '@sanity/ui/theme'
@@ -22,6 +28,7 @@ import {FontHeadingSize} from '@sanity/ui/theme'
 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 {GapStyleProps} from '@sanity/ui/css'
 import {GridAutoCols} from '@sanity/ui/css'
@@ -33,26 +40,31 @@ 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 {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 {HTMLProps} from 'react'
-import {MemoExoticComponent} from 'react'
+import {InputStyleProps} from '@sanity/ui/css'
+import {InsetStyleProps} from '@sanity/ui/css'
+import {LabelSize} from '@sanity/ui/css'
 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 {PropsWithChildren} from 'react'
+import {px} from '@sanity/ui/css'
 import {Radius} from '@sanity/ui/theme'
 import {RadiusStyleProps} from '@sanity/ui/css'
 import {ReactElement} from 'react'
 import {ReactNode} from 'react'
-import {Ref} from 'react'
+import {ReactPortal} 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'
 import {rgba as rgba_2} from '@sanity/ui/theme'
@@ -60,12 +72,17 @@ import {rgbToHex as rgbToHex_2} from '@sanity/ui/theme'
 import {rgbToHsl as rgbToHsl_2} from '@sanity/ui/theme'
 import {RootTheme as RootTheme_2} from '@sanity/ui/theme'
 import {screen as screen_3} from '@sanity/ui/theme'
+import {SelectStyleProps} from '@sanity/ui/css'
+import {ShadowStyleProps} from '@sanity/ui/css'
 import {SkeletonStyleProps} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
 import {TextAlign} from '@sanity/ui/css'
+import {TextAreaStyleProps} from '@sanity/ui/css'
+import {TextOverflowStyleProps} from '@sanity/ui/css'
 import {TextStyleProps} from '@sanity/ui/css'
 import {Theme as Theme_2} from '@sanity/ui/theme'
 import {Theme_v2} from '@sanity/ui/theme'
+import {Theme_v3} from '@sanity/ui/theme'
 import {ThemeAvatar} from '@sanity/ui/theme'
 import {ThemeBoxShadow} from '@sanity/ui/theme'
 import {ThemeColor} from '@sanity/ui/theme'
@@ -112,22 +129,18 @@ import {ThemeShadow as ThemeShadow_2} from '@sanity/ui/theme'
 import {ThemeStyles} from '@sanity/ui/theme'
 import {Width} from '@sanity/ui/css'
 
-/** @beta */
-export declare type ArrayPropPrimitive = string | number | boolean | undefined | null
-
 /** @internal */
 export declare const Arrow: ForwardRefExoticComponent<
-  Omit<
-    {
-      width: number
-      height: number
-      radius?: number
-    } & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width'>,
-    'ref'
-  > &
-    RefAttributes<HTMLDivElement>
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, 'radius' | 'height' | 'width'> & {
+    width: number
+    height: number
+    radius?: number
+  } & RefAttributes<HTMLDivElement>
 >
 
+/** @public */
+export declare type Assign<T, U> = Omit<T, keyof U> & U
+
 /**
  * @internal
  */
@@ -140,30 +153,20 @@ export declare function attemptFocus(element: HTMLElement): boolean
  * @public
  */
 export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
-  props: AutocompleteProps<Option> &
-    Omit<
-      HTMLProps<HTMLInputElement>,
-      | 'aria-activedescendant'
-      | 'aria-autocomplete'
-      | 'aria-expanded'
-      | 'aria-owns'
-      | 'as'
-      | 'autoCapitalize'
-      | 'autoComplete'
-      | 'autoCorrect'
-      | 'id'
-      | 'inputMode'
-      | 'onChange'
-      | 'onSelect'
-      | 'prefix'
-      | 'ref'
-      | 'role'
-      | 'spellCheck'
-      | 'type'
-      | 'value'
-    > & {
-      ref?: Ref<HTMLInputElement>
-    },
+  props: Omit<
+    Props<AutocompleteProps<Option>, 'input'>,
+    | 'aria-activedescendant'
+    | 'aria-autocomplete'
+    | 'aria-expanded'
+    | 'aria-owns'
+    | 'autoCapitalize'
+    | 'autoComplete'
+    | 'autoCorrect'
+    | 'inputMode'
+    | 'role'
+    | 'spellCheck'
+    | 'type'
+  >,
 ) => ReactElement
 
 /**
@@ -198,8 +201,7 @@ export declare type AutocompleteMsg =
 /**
  * @public
  */
-export declare type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> &
-  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
+export declare type AutocompleteOpenButtonProps = Omit<Props<ButtonProps, 'button'>, 'as'>
 
 /**
  * @public
@@ -209,6 +211,7 @@ export declare interface AutocompleteProps<
 > {
   border?: boolean
   customValidity?: string
+  disabled?: boolean
   filterOption?: (query: string, option: Option) => boolean
   fontSize?: ResponsiveProp<FontTextSize>
   icon?: ElementType | ReactNode
@@ -226,24 +229,25 @@ export declare interface AutocompleteProps<
   /** The options to render. */
   options?: Option[]
   padding?: ResponsiveProp<Space>
-  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
-    Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
+  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) => ReactElement
+  renderOption?: (option: Option) => React.JSX.Element
   /** @beta */
   renderPopover?: (
     props: {
-      content: ReactElement | null
+      content: React.JSX.Element | null
       hidden: boolean
       inputElement: HTMLInputElement | null
       onMouseEnter: () => void
       onMouseLeave: () => void
     },
-    ref: Ref<HTMLDivElement>,
+    ref: ForwardedRef<HTMLDivElement>,
   ) => ReactNode
   renderValue?: (value: string, option?: Option) => string
   suffix?: ReactNode
@@ -322,22 +326,27 @@ export declare interface AutocompleteValueChangeMsg {
  * @public
  */
 export declare const Avatar: ForwardRefExoticComponent<
-  AvatarProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof AvatarProps> &
+    AvatarProps &
+    RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
 export declare const AvatarCounter: ForwardRefExoticComponent<
-  AvatarCounterProps & RefAttributes<HTMLDivElement>
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof AvatarCounterProps> &
+    AvatarCounterProps &
+    RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface AvatarCounterProps {
+export declare interface AvatarCounterProps
+  extends Omit<BoxProps, 'align' | 'className' | 'display' | 'justify' | 'paddingX' | 'sizing'> {
   count: number
-  size?: AvatarSize | AvatarSize[]
+  size?: ResponsiveProp<AvatarSize>
   /** @deprecated No longer supported. */
   tone?: 'navbar'
 }
@@ -355,11 +364,10 @@ export declare interface AvatarProps {
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
-  as?: React.ElementType | keyof JSX.IntrinsicElements
   color?: ThemeColorAvatarColorKey
   initials?: string
   onImageLoadError?: (event: Error) => void
-  size?: AvatarSize | AvatarSize[]
+  size?: ResponsiveProp<AvatarSize>
   src?: string
   /**
    * The status of the entity this Avatar represents.
@@ -382,16 +390,28 @@ export {AvatarSize}
  * @public
  */
 export declare const AvatarStack: ForwardRefExoticComponent<
-  AvatarStackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof AvatarStackProps> &
+    AvatarStackProps &
+    RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface AvatarStackProps {
-  children: React.ReactNode
+export declare type AvatarStackChild =
+  | ReactElement<Props<AvatarProps, 'div'>>
+  | null
+  | undefined
+  | false
+
+/**
+ * @public
+ */
+export declare interface AvatarStackProps
+  extends Omit<BoxProps, 'align' | 'className' | 'display'> {
+  children: AvatarStackChild | AvatarStackChild[]
   maxLength?: number
-  size?: AvatarSize | AvatarSize[]
+  size?: ResponsiveProp<AvatarSize>
   /** @deprecated No longer supported. */
   tone?: 'navbar'
 }
@@ -410,7 +430,9 @@ export declare type AvatarStatus = 'online' | 'editing' | 'inactive'
  * @public
  */
 export declare const Badge: ForwardRefExoticComponent<
-  Omit<BadgeProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<HTMLDivElement>
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof BadgeProps> &
+    BadgeProps &
+    RefAttributes<HTMLDivElement>
 >
 
 /**
@@ -423,10 +445,10 @@ export declare type BadgeMode = 'default' | 'outline'
  * @public
  */
 export declare interface BadgeProps extends BoxProps, RadiusStyleProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
   /** @deprecated No longer used. */
   mode?: BadgeMode
+  textAlign?: TextProps['align']
   tone?: BadgeTone
 }
 
@@ -459,9 +481,7 @@ export declare interface BoundaryElementContextValue {
 /**
  * @public
  */
-export declare function BoundaryElementProvider(
-  props: BoundaryElementProviderProps,
-): React.ReactElement
+export declare function BoundaryElementProvider(props: BoundaryElementProviderProps): ReactElement
 
 export declare namespace BoundaryElementProvider {
   var displayName: string
@@ -471,7 +491,7 @@ export declare namespace BoundaryElementProvider {
  * @public
  */
 export declare interface BoundaryElementProviderProps {
-  children: React.ReactNode
+  children: ReactNode
   element: HTMLElement | null
 }
 
@@ -482,10 +502,8 @@ export declare interface BoundaryElementProviderProps {
  * @public
  */
 export declare const Box: ForwardRefExoticComponent<
-  Omit<
-    BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'wrap' | 'as' | 'rows'>,
-    'ref'
-  > &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof BoxProps> &
+    BoxProps &
     RefAttributes<HTMLDivElement>
 >
 
@@ -498,10 +516,11 @@ export {BoxOverflow}
 /**
  * @public
  */
-export declare interface BoxProps extends BoxStyleProps, GapStyleProps, PositionStyleProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  forwardedAs?: React.ElementType | keyof JSX.IntrinsicElements
-}
+export declare interface BoxProps
+  extends BoxStyleProps,
+    GapStyleProps,
+    InsetStyleProps,
+    PositionStyleProps {}
 
 /**
  * @public
@@ -515,9 +534,9 @@ export {BoxSizing}
  * @beta
  */
 export declare const Breadcrumbs: ForwardRefExoticComponent<
-  BreadcrumbsProps &
-    Omit<HTMLProps<HTMLOListElement>, 'type' | 'ref' | 'as'> &
-    RefAttributes<HTMLOListElement>
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof BreadcrumbsProps> &
+    BreadcrumbsProps &
+    RefAttributes<HTMLDivElement>
 >
 
 /**
@@ -526,7 +545,7 @@ export declare const Breadcrumbs: ForwardRefExoticComponent<
 export declare interface BreadcrumbsProps extends GapStyleProps {
   expandButton?: Omit<ButtonProps, 'onClick' | 'selected'>
   maxLength?: number
-  separator?: React.ReactNode
+  separator?: ReactNode
   /** @deprecated - Use `gap`, `gapX`, `gapY` instead */
   space?: number | number[]
 }
@@ -535,42 +554,46 @@ export declare interface BreadcrumbsProps extends GapStyleProps {
  * @public
  */
 export declare const Button: ForwardRefExoticComponent<
-  Omit<
-    ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'height' | 'width' | 'wrap' | 'as'>,
-    'ref'
-  > &
+  Omit<ElementProps_2<'button'> & PolymorphicProps_2, keyof ButtonProps> &
+    ButtonProps &
     RefAttributes<HTMLButtonElement>
 >
 
 /**
  * @public
+ * @deprecated Use `ThemeColorButtonModeKey` instead
  */
 export declare type ButtonMode = ThemeColorButtonModeKey_2
 
 /**
  * @public
  */
-export declare interface ButtonProps extends PaddingStyleProps, RadiusStyleProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  fontSize?: ResponsiveProp<FontTextSize>
-  mode?: ButtonMode
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
-  justify?: ResponsiveProp<FlexJustify>
-  /**
-   * @beta Do not use in production, as this might change.
-   */
-  loading?: boolean
-  selected?: boolean
-  space?: ResponsiveProp<Space>
-  textAlign?: ButtonTextAlign
-  muted?: boolean
-  text?: React.ReactNode
-  textOverflow?: TextProps['textOverflow']
-  textWeight?: TextProps['weight']
-  tone?: ButtonTone
-  type?: 'button' | 'reset' | 'submit'
-  width?: ResponsiveProp<Width>
+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>
 }
 
 /**
@@ -580,6 +603,7 @@ export declare type ButtonTextAlign = 'left' | 'right' | 'center'
 
 /**
  * @public
+ * @deprecated Use `ThemeColorStateToneKey` instead
  */
 export declare type ButtonTone = ThemeColorStateToneKey
 
@@ -596,7 +620,8 @@ export declare type ButtonWidth = 'fill'
  * @public
  */
 export declare const Card: ForwardRefExoticComponent<
-  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'wrap' | 'as'>, 'ref'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof CardProps> &
+    CardProps &
     RefAttributes<HTMLDivElement>
 >
 
@@ -614,14 +639,16 @@ export declare interface CardProps extends BoxProps, CardStyleProps_2 {
    * @beta
    */
   __unstable_focusRing?: boolean
-  muted?: boolean
+  disabled?: boolean
+  href?: string
   pressed?: boolean
-  scheme?: ThemeColorSchemeKey_2
-  tone?: CardTone
+  selected?: boolean
+  target?: string
 }
 
 /**
  * @internal
+ * @deprecated
  */
 export declare interface CardStyleProps {
   $checkered: boolean
@@ -641,7 +668,8 @@ export declare type CardTone = ThemeColorCardToneKey | 'inherit'
  * @public
  */
 export declare const Checkbox: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & CheckboxProps, 'ref'> &
+  Omit<ElementProps_2<'input'> & PolymorphicProps_2, keyof CheckboxProps> &
+    CheckboxProps &
     RefAttributes<HTMLInputElement>
 >
 
@@ -677,7 +705,8 @@ export declare type ClickOutsideListener = (event: MouseEvent) => void
  * @public
  */
 export declare const Code: ForwardRefExoticComponent<
-  Omit<CodeProps & Omit<HTMLProps<HTMLPreElement>, 'size' | 'as'>, 'ref'> &
+  Omit<ElementProps_2<'pre'> & PolymorphicProps_2, keyof CodeProps> &
+    CodeProps &
     RefAttributes<HTMLPreElement>
 >
 
@@ -685,7 +714,6 @@ export declare const Code: ForwardRefExoticComponent<
  * @public
  */
 export declare interface CodeProps extends Omit<FontStyleProps, 'align'> {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
   /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
@@ -696,14 +724,8 @@ export declare interface CodeProps extends Omit<FontStyleProps, 'align'> {
  * @beta
  */
 export declare const CodeSkeleton: ForwardRefExoticComponent<
-  Omit<
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof CodeSkeletonProps> &
     CodeSkeletonProps &
-      Omit<
-        HTMLProps<HTMLDivElement>,
-        'height' | 'width' | 'size' | 'wrap' | 'children' | 'as' | 'rows'
-      >,
-    'ref'
-  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -724,10 +746,10 @@ export declare function ConditionalWrapper({
   condition,
   wrapper,
 }: {
-  children: React.ReactNode
+  children: ReactNode
   condition: boolean
-  wrapper: (children: React.ReactNode) => React.ReactNode
-}): React.ReactNode
+  wrapper: (children: ReactNode) => ReactNode
+}): ReactNode
 
 export declare namespace ConditionalWrapper {
   var displayName: string
@@ -739,7 +761,8 @@ export declare namespace ConditionalWrapper {
  * @public
  */
 export declare const Container: ForwardRefExoticComponent<
-  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'as'>, 'ref'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof ContainerProps> &
+    ContainerProps &
     RefAttributes<HTMLDivElement>
 >
 
@@ -775,11 +798,8 @@ export declare type Delay =
  * @public
  */
 export declare const Dialog: ForwardRefExoticComponent<
-  Omit<
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof DialogProps> &
     DialogProps &
-      Omit<HTMLProps<HTMLDivElement>, 'id' | 'height' | 'width' | 'wrap' | 'as' | 'rows'>,
-    'ref'
-  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -806,7 +826,10 @@ export declare type DialogPosition = 'absolute' | 'fixed'
 /**
  * @public
  */
-export declare interface DialogProps extends PaddingStyleProps, ContainerStyleProps {
+export declare interface DialogProps
+  extends ContainerStyleProps,
+    PaddingStyleProps,
+    ShadowStyleProps {
   /**
    * @beta
    */
@@ -822,19 +845,20 @@ export declare interface DialogProps extends PaddingStyleProps, ContainerStylePr
    * @defaultValue false
    */
   animate?: boolean
-  cardRadius?: Radius | Radius[]
-  cardShadow?: number | number[]
-  contentRef?: React.ForwardedRef<HTMLDivElement>
-  footer?: React.ReactNode
-  header?: React.ReactNode
+  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[]
 }
 
@@ -842,7 +866,7 @@ export declare interface DialogProps extends PaddingStyleProps, ContainerStylePr
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function DialogProvider(props: DialogProviderProps): React.ReactElement
+export declare function DialogProvider(props: DialogProviderProps): ReactElement
 
 export declare namespace DialogProvider {
   var displayName: string
@@ -853,17 +877,21 @@ export declare namespace DialogProvider {
  * @beta
  */
 export declare interface DialogProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
   position?: DialogPosition | DialogPosition[]
   zOffset?: number | number[]
 }
 
+/** @public */
+export declare type ElementProps<E extends ElementType> = Omit<ComponentProps<E>, 'as' | 'ref'>
+
 /**
  * DO NOT USE IN PRODUCTION.
  * @beta
  */
 export declare const ElementQuery: ForwardRefExoticComponent<
-  Omit<MediaQueryProps & Omit<HTMLProps<HTMLDivElement>, 'media' | 'as'>, 'ref'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, 'media'> &
+    MediaQueryProps &
     RefAttributes<HTMLDivElement>
 >
 
@@ -916,8 +944,8 @@ export declare type _ElementSizeSubscriber = (elementRect: ElementSize) => void
 export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   state: ErrorBoundaryState
   static getDerivedStateFromError(error: Error): ErrorBoundaryState
-  componentDidCatch(error: Error, info: React.ErrorInfo): void
-  render(): React.ReactNode
+  componentDidCatch(error: Error, info: ErrorInfo): void
+  render(): ReactNode
 }
 
 /**
@@ -925,7 +953,7 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
  * @beta
  */
 export declare type ErrorBoundaryProps = PropsWithChildren<{
-  onCatch: (params: {error: Error; info: React.ErrorInfo}) => void
+  onCatch: (params: {error: Error; info: ErrorInfo}) => void
 }>
 
 /**
@@ -936,21 +964,14 @@ export declare interface ErrorBoundaryState {
   error: Error | null
 }
 
-/**
- * @internal
- */
-export declare function _fillCSSObject(
-  keys: string[],
-  value: string | number | CSSObject,
-): CSSObject
-
 /**
  * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
  *
  * @public
  */
 export declare const Flex: ForwardRefExoticComponent<
-  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'wrap' | 'as'>, 'ref'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof FlexProps> &
+    FlexProps &
     RefAttributes<HTMLDivElement>
 >
 
@@ -963,7 +984,9 @@ export {FlexJustify}
 /**
  * @public
  */
-export declare interface FlexProps extends Omit<BoxProps, 'display'> {}
+export declare interface FlexProps extends Omit<BoxProps, 'display'> {
+  htmlFor?: string
+}
 
 export {FlexValue}
 
@@ -982,23 +1005,7 @@ export declare function focusLastDescendant(element: HTMLElement): boolean
 /**
  * @internal
  */
-export declare interface FontWeightStyleProps {
-  $weight?: ThemeFontWeightKey_2
-}
-
-/**
- * @internal
- */
-export declare function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[]
-
-/**
- * @internal
- */
-export declare function _getResponsiveSpace(
-  theme: Theme_2,
-  props: string[],
-  spaceIndexes?: number[],
-): CSSObject[] | null
+export declare function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[]
 
 /**
  * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
@@ -1006,7 +1013,8 @@ export declare function _getResponsiveSpace(
  * @public
  */
 export declare const Grid: ForwardRefExoticComponent<
-  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof GridProps> &
+    GridProps &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1044,39 +1052,23 @@ export declare function _hasFocus(element: HTMLElement): boolean
  * @public
  */
 export declare const Heading: ForwardRefExoticComponent<
-  Omit<HeadingProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof HeadingProps> &
+    HeadingProps &
     RefAttributes<HTMLElement>
 >
 
 /**
  * @public
  */
-export declare interface HeadingProps extends FontStyleProps {
-  accent?: boolean
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  muted?: boolean
-  size?: ResponsiveProp<FontHeadingSize>
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis'
-}
+export declare interface HeadingProps extends HeadingStyleProps, TextOverflowStyleProps {}
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 export declare const HeadingSkeleton: ForwardRefExoticComponent<
-  Omit<
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof HeadingSkeletonProps> &
     HeadingSkeletonProps &
-      Omit<
-        HTMLProps<HTMLDivElement>,
-        'height' | 'width' | 'size' | 'wrap' | 'children' | 'as' | 'rows'
-      >,
-    'ref'
-  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1100,20 +1092,18 @@ export declare const hexToRgb: typeof hexToRgb_2
  * @public
  */
 export declare const Hotkeys: ForwardRefExoticComponent<
-  HotkeysProps &
-    Omit<
-      HTMLProps<HTMLDivElement>,
-      'display' | 'height' | 'width' | 'size' | 'wrap' | 'ref' | 'as' | 'rows'
-    > &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof HotkeysProps> &
+    HotkeysProps &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface HotkeysProps extends RadiusStyleProps {
+export declare interface HotkeysProps extends GapStyleProps, RadiusStyleProps {
   fontSize?: ResponsiveProp<FontTextSize>
   padding?: ResponsiveProp<Space>
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
   keys?: string[]
 }
@@ -1136,15 +1126,16 @@ export declare const hslToRgb: typeof hslToRgb_2
  * @public
  */
 export declare const Inline: ForwardRefExoticComponent<
-  Omit<InlineProps & Omit<HTMLProps<HTMLDivElement>, 'wrap'>, 'ref'> & RefAttributes<HTMLDivElement>
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof InlineProps> &
+    InlineProps &
+    RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface InlineProps
-  extends Omit<BoxProps, 'align' | 'display' | 'gap' | 'gapX' | 'gapY' | 'justify'> {
-  /** The spacing between children. */
+export declare interface InlineProps extends Omit<BoxProps, 'align' | 'display' | 'justify'> {
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
 
@@ -1199,14 +1190,15 @@ export declare function _isScrollable(el: Node): boolean
  * @public
  */
 export declare const KBD: ForwardRefExoticComponent<
-  KBDProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLDivElement>
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof KBDProps> &
+    KBDProps &
+    RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
 export declare interface KBDProps extends BoxProps, RadiusStyleProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: ResponsiveProp<FontTextSize>
   padding?: ResponsiveProp<Space>
 }
@@ -1217,25 +1209,19 @@ export declare interface KBDProps extends BoxProps, RadiusStyleProps {
  * @public
  */
 export declare const Label: ForwardRefExoticComponent<
-  Omit<LabelProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof LabelProps> &
+    LabelProps &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface LabelProps extends FontStyleProps {
+export declare interface LabelProps extends FontStyleProps, TextOverflowStyleProps {
   accent?: boolean
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  htmlFor?: string
   muted?: boolean
-  size?: number | number[]
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey_2
+  size?: ResponsiveProp<LabelSize>
 }
 
 /**
@@ -1243,14 +1229,8 @@ export declare interface LabelProps extends FontStyleProps {
  * @beta
  */
 export declare const LabelSkeleton: ForwardRefExoticComponent<
-  Omit<
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof LabelSkeletonProps> &
     LabelSkeletonProps &
-      Omit<
-        HTMLProps<HTMLDivElement>,
-        'height' | 'width' | 'size' | 'wrap' | 'children' | 'as' | 'rows'
-      >,
-    'ref'
-  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1266,7 +1246,8 @@ export declare interface LabelSkeletonProps extends SkeletonProps {
  * @public
  */
 export declare const Layer: ForwardRefExoticComponent<
-  Omit<LayerProps & Omit<HTMLProps<HTMLDivElement>, 'width' | 'wrap' | 'as' | 'rows'>, 'ref'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof LayerProps> &
+    LayerProps &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1292,7 +1273,7 @@ export declare interface LayerProps extends BoxProps {
 /**
  * @public
  */
-export declare function LayerProvider(props: LayerProviderProps): React.ReactElement
+export declare function LayerProvider(props: LayerProviderProps): ReactElement
 
 export declare namespace LayerProvider {
   var displayName: string
@@ -1302,7 +1283,7 @@ export declare namespace LayerProvider {
  * @public
  */
 export declare interface LayerProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
   zOffset?: number | number[]
 }
 
@@ -1311,7 +1292,6 @@ export declare interface LayerProviderProps {
  * @beta
  */
 export declare interface MediaQueryProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
   media?: number[]
 }
 
@@ -1329,14 +1309,8 @@ export declare interface _MediaStore {
  * @public
  */
 export declare const Menu: ForwardRefExoticComponent<
-  Omit<
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof MenuProps> &
     MenuProps &
-      Omit<
-        HTMLProps<HTMLDivElement>,
-        'height' | 'width' | 'wrap' | 'role' | 'tabIndex' | 'as' | 'rows'
-      >,
-    'ref'
-  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1361,9 +1335,9 @@ export declare interface MenuButtonProps {
    * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
   boundaryElement?: HTMLElement
-  button: React.ReactElement
+  button: ReactElement<Props<ButtonProps, 'button'>>
   id: string
-  menu?: React.ReactElement
+  menu?: ReactElement
   onClose?: () => void
   onOpen?: () => void
   /**
@@ -1394,19 +1368,18 @@ export declare interface MenuButtonProps {
  * @public
  */
 export declare const MenuDivider: ForwardRefExoticComponent<
-  Omit<HTMLProps<HTMLHRElement>, 'ref'> & RefAttributes<HTMLHRElement>
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, never> &
+    MenuDividerProps &
+    RefAttributes<HTMLHRElement>
 >
 
+/** @public */
+export declare interface MenuDividerProps {}
+
 /**
  * @public
  */
-export declare function MenuGroup(
-  props: Omit<
-    React.HTMLProps<HTMLDivElement>,
-    'as' | 'height' | 'popover' | 'ref' | 'rows' | 'tabIndex' | 'width' | 'wrap'
-  > &
-    MenuGroupProps,
-): React.ReactElement
+export declare function MenuGroup(props: Props<MenuGroupProps, 'div'>): ReactElement
 
 export declare namespace MenuGroup {
   var displayName: string
@@ -1415,15 +1388,27 @@ export declare namespace MenuGroup {
 /**
  * @public
  */
-export declare interface MenuGroupProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  fontSize?: number | number[]
-  icon?: React.ElementType | React.ReactNode
-  padding?: number | number[]
+export declare interface MenuGroupProps extends GapStyleProps {
+  disabled?: boolean
+  fontSize?: ResponsiveProp<FontTextSize>
+  icon?: ElementType | ReactNode
+  menu?: Omit<
+    MenuProps,
+    | 'onClickOutside'
+    | 'onEscape'
+    | 'onItemClick'
+    | 'onKeyDown'
+    | 'onMouseEnter'
+    | 'registerElement'
+    | 'shouldFocus'
+    | 'onBlurCapture'
+  >
+  padding?: ResponsiveProp<Space>
   popover?: Omit<PopoverProps, 'content' | 'open'>
   radius?: Radius | Radius[]
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
-  text: React.ReactNode
+  text: ReactNode
   tone?: SelectableTone
 }
 
@@ -1431,50 +1416,50 @@ export declare interface MenuGroupProps {
  * @public
  */
 export declare const MenuItem: ForwardRefExoticComponent<
-  MenuItemProps &
-    Omit<
-      HTMLProps<HTMLDivElement>,
-      'selected' | 'height' | 'width' | 'wrap' | 'tabIndex' | 'ref' | 'as' | 'rows'
-    > &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof MenuItemProps> &
+    MenuItemProps &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface MenuItemProps extends PaddingStyleProps, RadiusStyleProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+export declare interface MenuItemProps extends GapStyleProps, PaddingStyleProps, RadiusStyleProps {
+  disabled?: boolean
   fontSize?: number | number[]
   hotkeys?: string[]
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
+  icon?: ElementType | ReactNode
+  iconRight?: ElementType | ReactNode
   pressed?: boolean
   selected?: boolean
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
-  text?: React.ReactNode
+  text?: ReactNode
   tone?: SelectableTone
 }
 
 /**
  * @public
  */
-export declare interface MenuProps extends PaddingStyleProps {
+export declare interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps, 'gap'> {
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
-  focusFirst?: boolean
+  'focusFirst'?: boolean
   /**
    * @deprecated Use `shouldFocus="last"` instead.
    */
-  focusLast?: boolean
-  onClickOutside?: (event: MouseEvent) => void
-  onEscape?: () => void
-  onItemClick?: () => void
-  onItemSelect?: (index: number) => void
-  originElement?: HTMLElement | null
-  registerElement?: (el: HTMLElement) => () => void
-  shouldFocus?: 'first' | 'last' | null
-  space?: ResponsiveProp<Space>
+  'focusLast'?: boolean
+  'onClickOutside'?: (event: MouseEvent) => void
+  'onEscape'?: () => void
+  'onItemClick'?: () => void
+  'onItemSelect'?: (index: number) => void
+  'originElement'?: HTMLElement | null
+  'registerElement'?: (el: HTMLElement) => () => void
+  'shouldFocus'?: 'first' | 'last' | null
+  /** @deprecated Use `gap` property instead. */
+  'space'?: ResponsiveProp<Space>
+  'aria-labelledby'?: string
 }
 
 /**
@@ -1510,23 +1495,19 @@ 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: MemoExoticComponent<
-  ForwardRefExoticComponent<
-    Omit<
-      PopoverProps &
-        Omit<
-          HTMLProps<HTMLDivElement>,
-          'content' | 'height' | 'width' | 'wrap' | 'children' | 'as' | 'rows'
-        >,
-      'ref'
-    > &
-      RefAttributes<HTMLDivElement>
-  >
+export declare const Popover: NamedExoticComponent<
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof PopoverProps> &
+    PopoverProps &
+    RefAttributes<HTMLDivElement>
 >
 
 /**
@@ -1535,10 +1516,7 @@ export declare const Popover: MemoExoticComponent<
 export declare type PopoverMargins = [number, number, number, number]
 
 /** @public */
-export declare interface PopoverProps
-  extends Omit<LayerProps, 'width'>,
-    RadiusStyleProps,
-    ResponsiveShadowProps {
+export declare interface PopoverProps extends CardProps, LayerProps {
   /** @beta */
   __unstable_margins?: PopoverMargins
   /**
@@ -1551,7 +1529,9 @@ export declare interface PopoverProps
   arrow?: boolean
   /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
-  children?: React.ReactElement
+  children?: ReactElement<{
+    ref: ForwardedRef<HTMLElement>
+  }>
   /**
      * When `true`, prevent overflow within the current boundary:
      * - by flipping on its side axis
@@ -1564,7 +1544,7 @@ export declare interface PopoverProps
      * @defaultValue false
      */
   constrainSize?: boolean
-  content?: React.ReactNode
+  content?: ReactNode
   disabled?: boolean
   fallbackPlacements?: Placement[]
   floatingBoundary?: HTMLElement | null
@@ -1577,9 +1557,14 @@ export declare interface PopoverProps
    * @defaultValue false
    */
   matchReferenceWidth?: boolean
+  /**
+   * When true, blocks all pointer interaction with elements beneath the popover until closed.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  modal?: boolean
   open?: boolean
-  overflow?: BoxOverflow
-  padding?: number | number[]
   placement?: Placement
   /** Whether or not to render the popover in a portal element. */
   portal?: boolean | string
@@ -1590,13 +1575,10 @@ export declare interface PopoverProps
    * The children of the popover won't be rendered.
    */
   referenceElement?: HTMLElement | null
-  scheme?: ThemeColorSchemeKey_2
-  tone?: CardTone
   /** @beta */
   updateRef?:
     | MutableRefObject<PopoverUpdateCallback | undefined>
     | RefCallback<PopoverUpdateCallback | undefined>
-  width?: PopoverWidth | PopoverWidth[]
 }
 
 /** @beta */
@@ -1608,7 +1590,7 @@ export declare type PopoverWidth = number | 'auto'
 /**
  * @public
  */
-export declare function Portal(props: PortalProps): React.ReactPortal | null
+export declare function Portal(props: PortalProps): ReactPortal | null
 
 export declare namespace Portal {
   var displayName: string
@@ -1628,7 +1610,7 @@ export declare interface PortalContextValue {
  * @public
  */
 export declare interface PortalProps {
-  children: React.ReactNode
+  children: ReactNode
   /**
    * @beta This API might change. DO NOT USE IN PRODUCTION.
    */
@@ -1638,7 +1620,7 @@ export declare interface PortalProps {
 /**
  * @public
  */
-export declare function PortalProvider(props: PortalProviderProps): React.ReactElement
+export declare function PortalProvider(props: PortalProviderProps): ReactElement
 
 export declare namespace PortalProvider {
   var displayName: string
@@ -1652,7 +1634,7 @@ export declare interface PortalProviderProps {
    * @deprecated Use `<BoundaryElementProvider element={...} />` instead
    */
   boundaryElement?: HTMLElement | null
-  children: React.ReactNode
+  children: ReactNode
   element?: HTMLElement | null
   /**
    * @beta
@@ -1660,10 +1642,13 @@ export declare interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
-/**
- * @public
- */
-export declare function px(pixelValue: number): string | 0
+/** @public */
+export declare type Props<P extends {} = {}, E extends ElementType = ElementType> = Assign<
+  ElementProps<E> & PolymorphicProps,
+  P
+>
+
+export {px}
 
 /**
  * The `Radio` component allows the user to select one option from a set.
@@ -1671,7 +1656,8 @@ export declare function px(pixelValue: number): string | 0
  * @public
  */
 export declare const Radio: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & RadioProps, 'ref'> &
+  Omit<ElementProps_2<'input'> & PolymorphicProps_2, 'customValidity'> &
+    RadioProps &
     RefAttributes<HTMLInputElement>
 >
 
@@ -1694,10 +1680,7 @@ export declare function _raf(fn: () => void): () => void
  */
 export declare function _raf2(fn: () => void): () => void
 
-/**
- * @public
- */
-export declare function rem(pixelValue: number): string | 0
+export {rem}
 
 /**
  * @internal
@@ -1706,6 +1689,7 @@ export declare const _ResizeObserver: typeof ResizeObserver
 
 /**
  * @internal
+ * @deprecated do not use
  */
 export declare function _responsive<T>(
   media: number[],
@@ -1743,14 +1727,6 @@ export declare interface ResponsiveBoxProps {
   sizing?: BoxSizing | BoxSizing[]
 }
 
-/**
- * Get responsive CSS for the `code` font style.
- * @internal
- */
-export declare function responsiveCodeFontStyle(
-  props: ResponsiveFontStyleProps & ThemeProps,
-): CSSObject[]
-
 /**
  * @public
  * @deprecated
@@ -1771,24 +1747,6 @@ export declare interface ResponsiveFlexProps {
   wrap?: FlexWrap | FlexWrap[]
 }
 
-/**
- * @internal
- */
-export declare interface ResponsiveFontSizeStyleProps {
-  $size: number[]
-}
-
-/**
- * @internal
- */
-export declare interface ResponsiveFontStyleProps
-  extends FontWeightStyleProps,
-    ResponsiveFontSizeStyleProps,
-    ResponsiveTextAlignStyleProps {
-  $accent?: boolean
-  $muted?: boolean
-}
-
 /**
  * @public
  * @deprecated
@@ -1814,22 +1772,6 @@ export declare interface ResponsiveGridProps {
   rows?: number | number[]
 }
 
-/**
- * Get responsive CSS for the `heading` font style.
- * @internal
- */
-export declare function responsiveHeadingFont(
-  props: ResponsiveFontStyleProps & ThemeProps,
-): CSSObject[]
-
-/**
- * Get responsive CSS for the `label` font style.
- * @internal
- */
-export declare function responsiveLabelFont(
-  props: ResponsiveFontStyleProps & ThemeProps,
-): CSSObject[]
-
 /**
  * @public
  * @deprecated
@@ -1877,29 +1819,6 @@ export declare interface ResponsiveShadowProps {
   shadow?: number | number[]
 }
 
-/**
- * Get responsive text align styles.
- * @internal
- */
-export declare function responsiveTextAlignStyle(
-  props: ResponsiveTextAlignStyleProps & ThemeProps,
-): CSSObject[]
-
-/**
- * @internal
- */
-export declare interface ResponsiveTextAlignStyleProps {
-  $align: TextAlign[]
-}
-
-/**
- * Get responsive CSS for the `text` font style.
- * @internal
- */
-export declare function responsiveTextFont(
-  props: ResponsiveFontStyleProps & ThemeProps,
-): CSSObject[]
-
 /**
  * @public
  * @deprecated
@@ -1958,24 +1877,25 @@ export {screen_2 as screen}
  * @public
  */
 export declare const Select: ForwardRefExoticComponent<
-  Omit<SelectProps & Omit<HTMLProps<HTMLSelectElement>, 'as'>, 'ref'> &
+  Omit<ElementProps_2<'select'> & PolymorphicProps_2, keyof SelectProps> &
+    SelectProps &
     RefAttributes<HTMLSelectElement>
 >
 
 /**
  * @public
+ * @deprecated Use `ThemeColorStateToneKey` instead
  */
 export declare type SelectableTone = ThemeColorStateToneKey
 
 /**
  * @public
  */
-export declare interface SelectProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  space?: number | number[]
+export declare interface SelectProps extends SelectStyleProps {
   customValidity?: string
+  readOnly?: boolean
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
 }
 
 /**
@@ -1983,10 +1903,8 @@ export declare interface SelectProps {
  * @beta
  */
 export declare const Skeleton: ForwardRefExoticComponent<
-  Omit<
-    SkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'wrap' | 'as' | 'rows'>,
-    'ref'
-  > &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof SkeletonProps> &
+    SkeletonProps &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2005,7 +1923,8 @@ export declare interface SkeletonProps extends SkeletonStyleProps, Omit<BoxProps
  * @public
  */
 export declare const Spinner: ForwardRefExoticComponent<
-  Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof SpinnerProps> &
+    SpinnerProps &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2021,7 +1940,8 @@ export declare interface SpinnerProps {
  * @public
  */
 export declare const SrOnly: ForwardRefExoticComponent<
-  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>, 'ref'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, 'children'> &
+    SrOnlyProps &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2029,8 +1949,7 @@ export declare const SrOnly: ForwardRefExoticComponent<
  * @public
  */
 export declare interface SrOnlyProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 /**
@@ -2039,8 +1958,8 @@ export declare interface SrOnlyProps {
  * @public
  */
 export declare const Stack: ForwardRefExoticComponent<
-  StackProps &
-    Omit<HTMLProps<HTMLDivElement>, 'width' | 'ref' | 'as'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof StackProps> &
+    StackProps &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2048,8 +1967,8 @@ export declare const Stack: ForwardRefExoticComponent<
  * @public
  */
 export declare interface StackProps
-  extends Omit<BoxProps, 'direction' | 'display' | 'gap' | 'gapX' | 'gapY'> {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+  extends Omit<BoxProps, 'direction' | 'display' | 'gapX' | 'gapY'> {
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
 
@@ -2057,7 +1976,7 @@ export declare interface StackProps
  * @public
  * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
  */
-export declare const studioTheme: BaseTheme_2
+export declare const studioTheme: RootTheme_2
 
 /**
  * @public
@@ -2065,6 +1984,8 @@ export declare const studioTheme: BaseTheme_2
  */
 export declare type Styles = ThemeStyles
 
+export declare function StyleTags(props: {theme?: Theme_v3}): ReactNode
+
 /**
  * The `Switch` component allows the user to toggle a setting on and off.
  *
@@ -2073,7 +1994,8 @@ export declare type Styles = ThemeStyles
  * @public
  */
 export declare const Switch: ForwardRefExoticComponent<
-  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & SwitchProps, 'ref'> &
+  Omit<ElementProps_2<'input'> & PolymorphicProps_2, 'indeterminate'> &
+    SwitchProps &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2088,14 +2010,8 @@ export declare interface SwitchProps {
  * @public
  */
 export declare const Tab: ForwardRefExoticComponent<
-  Omit<
+  Omit<ElementProps_2<'button'> & PolymorphicProps_2, keyof TabProps> &
     TabProps &
-      Omit<
-        HTMLProps<HTMLButtonElement>,
-        'label' | 'id' | 'type' | 'width' | 'aria-controls' | 'as'
-      >,
-    'ref'
-  > &
     RefAttributes<HTMLButtonElement>
 >
 
@@ -2103,25 +2019,33 @@ export declare const Tab: ForwardRefExoticComponent<
  * @public
  */
 export declare const TabList: ForwardRefExoticComponent<
-  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TabListProps> &
+    TabListProps &
     RefAttributes<HTMLDivElement>
 >
 
+/**
+ * @public
+ */
+export declare type TabListChild =
+  | ReactElement<Props<TabProps, 'button'>>
+  | null
+  | undefined
+  | false
+
 /**
  * @public
  */
 export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: Array<React.ReactElement | null | undefined | false>
+  children: TabListChild[]
 }
 
 /**
  * @public
  */
 export declare const TabPanel: ForwardRefExoticComponent<
-  Omit<
-    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'role' | 'aria-labelledby' | 'as'>,
-    'ref'
-  > &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TabPanelProps> &
+    TabPanelProps &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2141,15 +2065,15 @@ export declare interface TabPanelProps extends BoxProps {
  */
 export declare interface TabProps {
   /**
-   * The `id` of the correlating `TabPanel` component.
+   * The `id` of the corresponding `TabPanel` component.
    */
   'aria-controls': string
   'id': string
-  'icon'?: React.ElementType | React.ReactNode
+  'icon'?: ElementType | ReactNode
   'focused'?: boolean
   'fontSize'?: ResponsiveProp<FontTextSize>
-  'label'?: React.ReactNode
-  'padding'?: number | number[]
+  'label'?: ReactNode
+  'padding'?: ResponsiveProp<Space>
   'selected'?: boolean
   'tone'?: ButtonTone
 }
@@ -2160,7 +2084,8 @@ export declare interface TabProps {
  * @public
  */
 declare const Text_2: ForwardRefExoticComponent<
-  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TextProps> &
+    TextProps &
     RefAttributes<HTMLDivElement>
 >
 export {Text_2 as Text}
@@ -2170,26 +2095,25 @@ export {TextAlign}
 /**
  * A multiline text input.
  *
-
  * @public
  */
 export declare const TextArea: ForwardRefExoticComponent<
-  Omit<TextAreaProps & Omit<HTMLProps<HTMLTextAreaElement>, 'as'>, 'ref'> &
+  Omit<ElementProps_2<'textarea'> & PolymorphicProps_2, keyof TextAreaProps> &
+    TextAreaProps &
     RefAttributes<HTMLTextAreaElement>
 >
 
 /**
  * @public
  */
-export declare interface TextAreaProps extends ResponsiveRadiusProps {
+export declare interface TextAreaProps extends TextAreaStyleProps {
   /**
    * @beta
    */
   __unstable_disableFocusRing?: boolean
-  border?: boolean
   customValidity?: string
-  fontSize?: number | number[]
-  padding?: number | number[]
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
   weight?: ThemeFontWeightKey_2
 }
 
@@ -2199,41 +2123,42 @@ export declare interface TextAreaProps extends ResponsiveRadiusProps {
  * @public
  */
 export declare const TextInput: ForwardRefExoticComponent<
-  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'as' | 'prefix'>, 'ref'> &
+  Omit<ElementProps_2<'input'> & PolymorphicProps_2, keyof TextInputProps> &
+    TextInputProps &
     RefAttributes<HTMLInputElement>
 >
 
 /**
  * @public
  */
-export declare type TextInputClearButtonProps = Omit<ButtonProps, 'as'> &
-  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>
+export declare type TextInputClearButtonProps = Omit<
+  Props<ButtonProps, 'button'>,
+  'as' | 'onClick' | 'onMouseDown'
+>
 
 /**
  * @public
  */
-export declare interface TextInputProps extends RadiusStyleProps {
+export declare interface TextInputProps extends InputStyleProps {
   /**
    * @beta
    */
   __unstable_disableFocusRing?: boolean
-  border?: boolean
   /**
    * @beta
    */
   clearButton?: boolean | TextInputClearButtonProps
   customValidity?: string
-  fontSize?: ResponsiveProp<FontTextSize>
-  icon?: React.ElementType | React.ReactNode
-  iconRight?: React.ElementType | React.ReactNode
+  icon?: ElementType | ReactNode
+  iconRight?: ElementType | ReactNode
   /**
    * @beta
    */
   onClear?: () => void
-  padding?: ResponsiveProp<Space>
-  prefix?: React.ReactNode
+  prefix?: ReactNode
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
-  suffix?: React.ReactNode
+  suffix?: ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey_2
 }
@@ -2242,6 +2167,7 @@ export declare interface TextInputProps extends RadiusStyleProps {
  * @public
  */
 export declare type TextInputType =
+  | 'search'
   | 'date'
   | 'datetime-local'
   | 'email'
@@ -2258,18 +2184,8 @@ export declare type TextInputType =
 /**
  * @public
  */
-export declare interface TextProps extends TextStyleProps {
-  accent?: boolean
-  as?: React.ElementType | keyof JSX.IntrinsicElements
-  /** When `true` the text color will be muted. */
-  muted?: boolean
-  /**
-   * Controls how overflowing text is treated.
-   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
-   * @beta
-   */
-  textOverflow?: 'ellipsis' | 'none'
-  weight?: ThemeFontWeightKey_2
+export declare interface TextProps extends TextStyleProps, TextOverflowStyleProps {
+  htmlFor?: string
 }
 
 /**
@@ -2277,14 +2193,8 @@ export declare interface TextProps extends TextStyleProps {
  * @beta
  */
 export declare const TextSkeleton: ForwardRefExoticComponent<
-  Omit<
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TextSkeletonProps> &
     TextSkeletonProps &
-      Omit<
-        HTMLProps<HTMLDivElement>,
-        'height' | 'width' | 'size' | 'wrap' | 'children' | 'as' | 'rows'
-      >,
-    'ref'
-  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2345,7 +2255,7 @@ export {ThemeColorName}
 /**
  * @public
  */
-export declare function ThemeColorProvider(props: ThemeColorProviderProps): React.ReactElement
+export declare function ThemeColorProvider(props: ThemeColorProviderProps): ReactElement
 
 export declare namespace ThemeColorProvider {
   var displayName: string
@@ -2355,7 +2265,7 @@ export declare namespace ThemeColorProvider {
  * @public
  */
 export declare interface ThemeColorProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
   scheme?: ThemeColorSchemeKey_2
   tone?: ThemeColorCardToneKey
 }
@@ -2447,17 +2357,10 @@ export {ThemeInput}
  */
 export declare type ThemeLayer = ThemeLayer_2
 
-/**
- * @internal
- */
-export declare interface ThemeProps {
-  theme: Theme_2
-}
-
 /**
  * @public
  */
-export declare function ThemeProvider(props: ThemeProviderProps): React.ReactElement
+export declare function ThemeProvider(props: ThemeProviderProps): ReactElement
 
 export declare namespace ThemeProvider {
   var displayName: string
@@ -2467,7 +2370,7 @@ export declare namespace ThemeProvider {
  * @public
  */
 export declare interface ThemeProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
   scheme?: ThemeColorSchemeKey_2
   theme?: RootTheme_2
   tone?: ThemeColorCardToneKey
@@ -2487,12 +2390,11 @@ export declare type ThemeShadow = ThemeShadow_2
  * @public
  */
 export declare function Toast(
-  props: ToastProps &
-    Omit<
-      React.HTMLProps<HTMLDivElement>,
-      'as' | 'height' | 'ref' | 'rows' | 'title' | 'width' | 'wrap'
-    >,
-): React.ReactElement
+  props: Omit<
+    Props<ToastProps, 'div'>,
+    'onDrag' | 'onDragEnd' | 'onDragStart' | 'onAnimationStart'
+  >,
+): ReactElement
 
 export declare namespace Toast {
   var displayName: string
@@ -2503,19 +2405,32 @@ export declare namespace Toast {
  */
 export declare interface ToastContextValue {
   version: 0.0
+  /**
+   * Creates or updates a toast notification.
+   * If a toast with the same ID already exists, it will be updated.
+   * If an ID is not provided, a random one will be generated.
+   * The returned ID can be used to programatically update a toast.
+   */
   push: (params: ToastParams) => string
 }
 
+/**
+ * @public
+ */
+declare interface ToastLayerProps extends GapStyleProps, PaddingStyleProps {
+  children: ReactNode
+}
+
 /**
  * @public
  */
 export declare interface ToastParams {
   closable?: boolean
-  description?: React.ReactNode
+  description?: ReactNode
   duration?: number
   id?: string
   onClose?: () => void
-  title?: React.ReactNode
+  title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
 }
 
@@ -2524,17 +2439,18 @@ export declare interface ToastParams {
  */
 export declare interface ToastProps extends RadiusStyleProps {
   closable?: boolean
-  description?: React.ReactNode
+  description?: ReactNode
   onClose?: () => void
-  title?: React.ReactNode
+  title?: ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
   duration?: number
+  updatedAt?: number
 }
 
 /**
  * @public
  */
-export declare function ToastProvider(props: ToastProviderProps): React.ReactElement
+export declare function ToastProvider(props: ToastProviderProps): React.JSX.Element
 
 export declare namespace ToastProvider {
   var displayName: string
@@ -2543,11 +2459,8 @@ export declare namespace ToastProvider {
 /**
  * @public
  */
-export declare interface ToastProviderProps {
+export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {
   children?: React.ReactNode
-  padding?: number | number[]
-  paddingX?: number | number[]
-  paddingY?: number | number[]
   zOffset?: number | number[]
 }
 
@@ -2557,11 +2470,8 @@ export declare interface ToastProviderProps {
  * @public
  */
 export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TooltipProps> &
     TooltipProps &
-      Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'wrap' | 'children' | 'as'>,
-    'ref'
-  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2574,7 +2484,6 @@ export declare const TooltipDelayGroupContext: Context<TooltipDelayGroupContextV
  * @beta
  */
 export declare interface TooltipDelayGroupContextValue {
-  isGroupActive: boolean
   setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void
   setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void
   openDelay: number
@@ -2589,7 +2498,7 @@ export declare interface TooltipDelayGroupContextValue {
  */
 export declare function TooltipDelayGroupProvider(
   props: TooltipDelayGroupProviderProps,
-): React.ReactElement
+): ReactElement
 
 export declare namespace TooltipDelayGroupProvider {
   var displayName: string
@@ -2599,7 +2508,7 @@ export declare namespace TooltipDelayGroupProvider {
  * @public
  * */
 export declare interface TooltipDelayGroupProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
   /**
    * Handles the delays to open or close a tooltip inside a group
    *
@@ -2615,21 +2524,23 @@ export declare interface TooltipDelayGroupProviderProps {
 /**
  * @public
  */
-export declare interface TooltipProps extends Omit<LayerProps, 'as'>, RadiusStyleProps {
+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?: React.ReactElement
-  content?: React.ReactNode
-  disabled?: boolean
-  fallbackPlacements?: Placement[]
-  padding?: number | number[]
-  placement?: Placement
-  /** Whether or not to render the tooltip in a portal element. */
-  portal?: boolean | string
-  scheme?: ThemeColorSchemeKey_2
-  shadow?: number | number[]
+  children?: ReactElement<Props>
+  content?: ReactNode
   /**
    * Adds a delay to open or close the tooltip.
    *
@@ -2641,28 +2552,23 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'>, RadiusStyl
    * @defaultValue 0
    */
   delay?: Delay
-  /**
-   * Whether the tooltip should animate in and out.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
+  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
 }
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const Tree: MemoExoticComponent<
-  ForwardRefExoticComponent<
+export declare const Tree: NamedExoticComponent<
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TreeProps> &
     TreeProps &
-      Omit<
-        HTMLProps<HTMLDivElement>,
-        'height' | 'width' | 'wrap' | 'role' | 'ref' | 'as' | 'rows' | 'align'
-      > &
-      RefAttributes<HTMLDivElement>
-  >
+    RefAttributes<HTMLDivElement>
 >
 
 /**
@@ -2684,25 +2590,22 @@ export declare interface TreeContextValue {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const TreeItem: NamedExoticComponent<
-  TreeItemProps &
-    Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'wrap' | 'role' | 'ref' | 'as' | 'rows'>
->
+export declare const TreeItem: NamedExoticComponent<Omit<Props<TreeItemProps, 'div'>, 'as'>>
 
 /**
  * @beta
  */
-export declare interface TreeItemProps {
+export declare interface TreeItemProps extends CardProps {
   expanded?: boolean
-  fontSize?: number | number[]
-  icon?: React.ElementType
+  fontSize?: ResponsiveProp<FontTextSize>
+  icon?: ElementType
   /**
    * Allows passing a custom element type to the link component
    */
-  linkAs?: BoxProps['as']
-  padding?: number | number[]
+  linkAs?: ElementType
+  padding?: ResponsiveProp<Space>
   space?: ResponsiveProp<Space>
-  text?: React.ReactNode
+  text?: ReactNode
   weight?: ThemeFontWeightKey_2
 }
 
@@ -2710,7 +2613,8 @@ export declare interface TreeItemProps {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface TreeProps {
+export declare interface TreeProps extends Pick<GapStyleProps, 'gap'> {
+  /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
 
@@ -2726,14 +2630,12 @@ export declare interface TreeState {
     | undefined
 }
 
+/** @beta */
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
-  val: T | T[] | undefined,
-  defaultVal?: T[],
-): T[]
+export declare function useArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[]
 
 /**
  * @public
@@ -2812,9 +2714,7 @@ export declare function useElementSize(element: HTMLElement | null): ElementSize
  * +useImperativeHandle(forwardedRef, () => ref.current)
  * ```
  */
-export declare function useForwardedRef<T>(
-  ref: React.ForwardedRef<T>,
-): React.MutableRefObject<T | null>
+export declare function useForwardedRef<T>(ref: ForwardedRef<T>): MutableRefObject<T | null>
 
 /**
  * @beta
@@ -2829,7 +2729,7 @@ export declare function useLayer(): LayerContextValue
 /**
  * Efficiently subscribes to `window.matchMedia` queries
  *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Required if the hook is called during SSR (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * @public
  */
@@ -2852,7 +2752,7 @@ export declare function usePortal(): PortalContextValue
 /**
  * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
  *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
  * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
@@ -2865,7 +2765,7 @@ export declare function usePrefersDark(getServerSnapshot?: () => boolean): boole
 /**
  * Returns true if motion should be reduced
  *
- * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-reduced-motion: no-preference)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
  * Chrome supports reading the `prefers-reduced-motion` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Reduced-Motion
@@ -2909,9 +2809,8 @@ export declare function useTree(): TreeContextValue
  * @beta
  */
 export declare const VirtualList: ForwardRefExoticComponent<
-  VirtualListProps<any> &
-    StackProps &
-    Omit<HTMLProps<HTMLDivElement>, 'children' | 'onChange' | 'ref' | 'as'> &
+  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof VirtualListProps<any>> &
+    VirtualListProps<any> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2930,13 +2829,12 @@ export declare interface VirtualListChangeOpts {
 /**
  * @beta
  */
-export declare interface VirtualListProps<Item = any> {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+export declare interface VirtualListProps<Item = any> extends Omit<StackProps, 'gap'> {
   gap?: number
   getItemKey?: (item: Item, itemIndex: number) => string
   items?: Item[]
   onChange?: (opts: VirtualListChangeOpts) => void
-  renderItem?: (item: Item) => React.ReactNode
+  renderItem?: (item: Item) => ReactNode
 }
 
 export {}