@sanity/ui 3.0.0-static.9 → 3.0.0

package/dist/index.d.mts

@@ -1,91 +1,36 @@
-import {AvatarSize} from '@sanity/ui/theme'
 import {BaseTheme as BaseTheme_2} from '@sanity/ui/theme'
-import {Display as BoxDisplay} from '@sanity/ui/css'
-import {BoxHeight} from '@sanity/ui/css'
-import {BoxOverflow} from '@sanity/ui/css'
-import {BoxSizing} from '@sanity/ui/css'
-import {BoxStyleProps} from '@sanity/ui/css'
-import {ButtonStyleProps} from '@sanity/ui/css'
-import {CardContextValue as CardContextValue_2} from './types'
-import {CardStyleProps as CardStyleProps_2} from '@sanity/ui/css'
 import {Component} from 'react'
-import type {ComponentProps} from 'react'
-import {ComponentType} 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 {DetailedHTMLProps} from 'react'
 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'
-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 {FastOmit} from 'styled-components'
 import {ForwardRefExoticComponent} from 'react'
-import {GapStyleProps} from '@sanity/ui/css'
-import {GridAutoCols} from '@sanity/ui/css'
-import {GridAutoFlow} from '@sanity/ui/css'
-import {GridAutoRows} from '@sanity/ui/css'
-import {GridItemColumn} from '@sanity/ui/css'
-import {GridItemColumnEnd} from '@sanity/ui/css'
-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 {InputStyleProps} from '@sanity/ui/css'
-import {InsetStyleProps} from '@sanity/ui/css'
-import {JSX} from 'react'
-import {LabelSize} from '@sanity/ui/css'
+import {HTMLAttributes} from 'react'
+import {HTMLProps} from 'react'
+import {IStyledComponentBase} from 'styled-components/dist/types'
 import {multiply as multiply_2} from '@sanity/ui/theme'
 import {MutableRefObject} from 'react'
 import {NamedExoticComponent} from 'react'
-import {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 {ReactPortal} from 'react'
+import {Ref} from 'react'
 import {RefAttributes} from 'react'
 import {RefCallback} from 'react'
-import {rem} from '@sanity/ui/css'
-import {ResponsiveProp} from '@sanity/ui/css'
 import {RGB as RGB_2} from '@sanity/ui/theme'
 import {rgba as rgba_2} from '@sanity/ui/theme'
 import {rgbToHex as rgbToHex_2} from '@sanity/ui/theme'
 import {rgbToHsl as rgbToHsl_2} from '@sanity/ui/theme'
 import {RootTheme as RootTheme_2} from '@sanity/ui/theme'
 import {screen as screen_3} from '@sanity/ui/theme'
-import {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'
@@ -130,20 +75,23 @@ import {ThemeInput} from '@sanity/ui/theme'
 import {ThemeLayer as ThemeLayer_2} from '@sanity/ui/theme'
 import {ThemeShadow as ThemeShadow_2} from '@sanity/ui/theme'
 import {ThemeStyles} from '@sanity/ui/theme'
-import {Width} from '@sanity/ui/css'
+
+/** @beta */
+export declare type ArrayPropPrimitive = string | number | boolean | undefined | null
 
 /** @internal */
 export declare const Arrow: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, 'radius' | 'height' | 'width'> & {
-    width: number
-    height: number
-    radius?: number
-  } & RefAttributes<HTMLDivElement>
+  Omit<
+    {
+      width: number
+      height: number
+      radius?: number
+    } & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width'>,
+    'ref'
+  > &
+    RefAttributes<HTMLDivElement>
 >
 
-/** @public */
-export declare type Assign<T, U> = Omit<T, keyof U> & U
-
 /**
  * @internal
  */
@@ -156,21 +104,32 @@ export declare function attemptFocus(element: HTMLElement): boolean
  * @public
  */
 export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
-  props: Omit<
-    Props<AutocompleteProps<Option>, 'input'>,
-    | 'aria-activedescendant'
-    | 'aria-autocomplete'
-    | 'aria-expanded'
-    | 'aria-owns'
-    | 'autoCapitalize'
-    | 'autoComplete'
-    | 'autoCorrect'
-    | 'inputMode'
-    | 'role'
-    | 'spellCheck'
-    | 'type'
-  >,
-) => ReactElement
+  props: AutocompleteProps<Option> &
+    Omit<
+      HTMLProps<HTMLInputElement>,
+      | 'aria-activedescendant'
+      | 'aria-autocomplete'
+      | 'aria-expanded'
+      | 'aria-owns'
+      | 'as'
+      | 'autoCapitalize'
+      | 'autoComplete'
+      | 'autoCorrect'
+      | 'id'
+      | 'inputMode'
+      | 'onChange'
+      | 'onSelect'
+      | 'popover'
+      | 'prefix'
+      | 'ref'
+      | 'role'
+      | 'spellCheck'
+      | 'type'
+      | 'value'
+    > & {
+      ref?: Ref<HTMLInputElement>
+    },
+) => React.JSX.Element
 
 /**
  * @internal
@@ -204,7 +163,8 @@ export declare type AutocompleteMsg =
 /**
  * @public
  */
-export declare type AutocompleteOpenButtonProps = Omit<Props<ButtonProps, 'button'>, 'as'>
+export declare type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> &
+  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>
 
 /**
  * @public
@@ -214,9 +174,8 @@ export declare interface AutocompleteProps<
 > {
   border?: boolean
   customValidity?: string
-  disabled?: boolean
   filterOption?: (query: string, option: Option) => boolean
-  fontSize?: ResponsiveProp<FontTextSize>
+  fontSize?: number | number[]
   icon?: ElementType | ReactNode
   id: string
   /** @beta */
@@ -231,12 +190,11 @@ export declare interface AutocompleteProps<
   openOnFocus?: boolean
   /** The options to render. */
   options?: Option[]
-  padding?: ResponsiveProp<Space>
-  popover?: Omit<Props<PopoverProps, 'div'>, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'>
+  padding?: number | number[]
+  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
+    Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
   prefix?: ReactNode
   radius?: Radius | Radius[]
-  readOnly?: boolean
-  ref?: ForwardedRef<HTMLInputElement>
   /** @beta */
   relatedElements?: HTMLElement[]
   /** The callback function for rendering each option. */
@@ -250,7 +208,7 @@ export declare interface AutocompleteProps<
       onMouseEnter: () => void
       onMouseLeave: () => void
     },
-    ref: ForwardedRef<HTMLDivElement>,
+    ref: Ref<HTMLDivElement>,
   ) => ReactNode
   renderValue?: (value: string, option?: Option) => string
   suffix?: ReactNode
@@ -329,27 +287,22 @@ export declare interface AutocompleteValueChangeMsg {
  * @public
  */
 export declare const Avatar: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof AvatarProps> &
-    AvatarProps &
-    RefAttributes<HTMLDivElement>
+  AvatarProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
 export declare const AvatarCounter: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof AvatarCounterProps> &
-    AvatarCounterProps &
-    RefAttributes<HTMLDivElement>
+  AvatarCounterProps & RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface AvatarCounterProps
-  extends Omit<BoxProps, 'align' | 'className' | 'display' | 'justify' | 'paddingX' | 'sizing'> {
+export declare interface AvatarCounterProps {
   count: number
-  size?: ResponsiveProp<AvatarSize>
+  size?: AvatarSize | AvatarSize[]
   /** @deprecated No longer supported. */
   tone?: 'navbar'
 }
@@ -367,10 +320,11 @@ export declare interface AvatarProps {
   __unstable_hideInnerStroke?: boolean
   animateArrowFrom?: AvatarPosition
   arrowPosition?: AvatarPosition
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   color?: ThemeColorAvatarColorKey
   initials?: string
   onImageLoadError?: (event: Error) => void
-  size?: ResponsiveProp<AvatarSize>
+  size?: AvatarSize | AvatarSize[]
   src?: string
   /**
    * The status of the entity this Avatar represents.
@@ -387,41 +341,29 @@ export declare interface AvatarRootStyleProps {
   $color: ThemeColorAvatarColorKey
 }
 
-export {AvatarSize}
-
 /**
  * @public
  */
-export declare const AvatarStack: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof AvatarStackProps> &
-    AvatarStackProps &
-    RefAttributes<HTMLDivElement>
->
+export declare type AvatarSize = 0 | 1 | 2 | 3
 
 /**
  * @public
  */
-export declare type AvatarStackChild =
-  | ReactElement<Props<AvatarProps, 'div'>>
-  | null
-  | undefined
-  | false
+export declare const AvatarStack: ForwardRefExoticComponent<
+  AvatarStackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
+>
 
 /**
  * @public
  */
-export declare interface AvatarStackProps
-  extends Omit<BoxProps, 'align' | 'className' | 'display'> {
-  children: AvatarStackChild | AvatarStackChild[]
+export declare interface AvatarStackProps {
+  children: React.ReactNode
   maxLength?: number
-  size?: ResponsiveProp<AvatarSize>
+  size?: AvatarSize | AvatarSize[]
   /** @deprecated No longer supported. */
   tone?: 'navbar'
 }
 
-/**
- * @public
- */
 /**
  * @public
  */
@@ -433,9 +375,7 @@ export declare type AvatarStatus = 'online' | 'editing' | 'inactive'
  * @public
  */
 export declare const Badge: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof BadgeProps> &
-    BadgeProps &
-    RefAttributes<HTMLDivElement>
+  Omit<BadgeProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
 >
 
 /**
@@ -447,11 +387,11 @@ export declare type BadgeMode = 'default' | 'outline'
 /**
  * @public
  */
-export declare interface BadgeProps extends BoxProps, RadiusStyleProps {
+export declare interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   fontSize?: number | number[]
   /** @deprecated No longer used. */
   mode?: BadgeMode
-  textAlign?: TextProps['align']
   tone?: BadgeTone
 }
 
@@ -484,7 +424,9 @@ export declare interface BoundaryElementContextValue {
 /**
  * @public
  */
-export declare function BoundaryElementProvider(props: BoundaryElementProviderProps): ReactElement
+export declare function BoundaryElementProvider(
+  props: BoundaryElementProviderProps,
+): React.JSX.Element
 
 export declare namespace BoundaryElementProvider {
   var displayName: string
@@ -494,7 +436,7 @@ export declare namespace BoundaryElementProvider {
  * @public
  */
 export declare interface BoundaryElementProviderProps {
-  children: ReactNode
+  children: React.ReactNode
   element: HTMLElement | null
 }
 
@@ -505,25 +447,37 @@ export declare interface BoundaryElementProviderProps {
  * @public
  */
 export declare const Box: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof BoxProps> &
-    BoxProps &
+  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
-export {BoxDisplay}
+/**
+ * @public
+ */
+export declare type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
 
-export {BoxHeight}
+/**
+ * @public
+ */
+export declare type BoxHeight = 'stretch' | 'fill'
 
-export {BoxOverflow}
+/**
+ * @public
+ */
+export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
 
 /**
  * @public
  */
 export declare interface BoxProps
-  extends BoxStyleProps,
-    GapStyleProps,
-    InsetStyleProps,
-    PositionStyleProps {}
+  extends ResponsiveFlexItemProps,
+    ResponsiveBoxProps,
+    ResponsiveGridItemProps,
+    ResponsiveMarginProps,
+    ResponsivePaddingProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
+}
 
 /**
  * @public
@@ -531,25 +485,26 @@ export declare interface BoxProps
  */
 export declare type BoxShadow = ThemeBoxShadow
 
-export {BoxSizing}
+/**
+ * @public
+ */
+export declare type BoxSizing = 'content' | 'border'
 
 /**
  * @beta
  */
 export declare const Breadcrumbs: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof BreadcrumbsProps> &
-    BreadcrumbsProps &
-    RefAttributes<HTMLDivElement>
+  BreadcrumbsProps &
+    Omit<HTMLProps<HTMLOListElement>, 'type' | 'ref' | 'as'> &
+    RefAttributes<HTMLOListElement>
 >
 
 /**
  * @beta
  */
-export declare interface BreadcrumbsProps extends GapStyleProps {
-  expandButton?: Omit<ButtonProps, 'onClick' | 'selected'>
+export declare interface BreadcrumbsProps {
   maxLength?: number
-  separator?: ReactNode
-  /** @deprecated - Use `gap`, `gapX`, `gapY` instead */
+  separator?: React.ReactNode
   space?: number | number[]
 }
 
@@ -557,46 +512,38 @@ export declare interface BreadcrumbsProps extends GapStyleProps {
  * @public
  */
 export declare const Button: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'button'> & PolymorphicProps_2, keyof ButtonProps> &
-    ButtonProps &
+  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'width' | 'as'>, 'ref'> &
     RefAttributes<HTMLButtonElement>
 >
 
 /**
  * @public
- * @deprecated Use `ThemeColorButtonModeKey` instead
  */
 export declare type ButtonMode = ThemeColorButtonModeKey_2
 
 /**
  * @public
  */
-export declare interface ButtonProps
-  extends ButtonStyleProps,
-    DisplayStyleProps,
-    FlexStyleProps,
-    GapStyleProps,
-    PaddingStyleProps {
-  'data-ui'?: string
-  'fontSize'?: ResponsiveProp<FontTextSize>
-  'href'?: string
-  'mode'?: ButtonMode
-  'icon'?: ElementType | ReactNode
-  'iconRight'?: ElementType | ReactNode
-  /** @beta Do not use in production, as this might change.*/
-  'loading'?: boolean
-  'selected'?: boolean
-  /** @deprecated Use `gap` instead. */
-  'space'?: ResponsiveProp<Space>
-  'textAlign'?: ButtonTextAlign
-  'muted'?: boolean
-  'target'?: string
-  'text'?: ReactNode
-  'textOverflow'?: TextProps['textOverflow']
-  'textWeight'?: TextProps['weight']
-  'tone'?: ButtonTone
-  'type'?: 'button' | 'reset' | 'submit'
-  'width'?: ResponsiveProp<Width>
+export declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  fontSize?: number | number[]
+  mode?: ButtonMode
+  icon?: React.ElementType | React.ReactNode
+  iconRight?: React.ElementType | React.ReactNode
+  justify?: FlexJustify | FlexJustify[]
+  /**
+   * @beta Do not use in production, as this might change.
+   */
+  loading?: boolean
+  selected?: boolean
+  space?: number | number[]
+  muted?: boolean
+  text?: React.ReactNode
+  textAlign?: ButtonTextAlign
+  textWeight?: ThemeFontWeightKey_2
+  tone?: ButtonTone
+  type?: 'button' | 'reset' | 'submit'
+  width?: ButtonWidth
 }
 
 /**
@@ -606,13 +553,11 @@ export declare type ButtonTextAlign = 'left' | 'right' | 'center'
 
 /**
  * @public
- * @deprecated Use `ThemeColorStateToneKey` instead
  */
 export declare type ButtonTone = ThemeColorStateToneKey
 
 /**
  * @public
- * @deprecated Use `Width` from `@sanity/ui/css` instead.
  */
 export declare type ButtonWidth = 'fill'
 
@@ -623,29 +568,18 @@ export declare type ButtonWidth = 'fill'
  * @public
  */
 export declare const Card: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof CardProps> &
-    CardProps &
+  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
-export declare type CardCompatProviderComponent = ComponentType<{
-  children?: ReactNode
-  tone: ThemeColorCardToneKey
-  scheme: ThemeColorSchemeKey_2
-}>
-
-/** @internal */
-export declare interface CardContextValue {
-  compat_provider?: CardCompatProviderComponent
-  rendered: boolean
-  tone: ThemeColorCardToneKey
-  scheme: ThemeColorSchemeKey_2
-}
-
 /**
  * @public
  */
-export declare interface CardProps extends BoxProps, CardStyleProps_2 {
+export declare interface CardProps
+  extends BoxProps,
+    ResponsiveBorderProps,
+    ResponsiveRadiusProps,
+    ResponsiveShadowProps {
   /**
    * Do not use in production.
    * @beta
@@ -656,30 +590,20 @@ export declare interface CardProps extends BoxProps, CardStyleProps_2 {
    * @beta
    */
   __unstable_focusRing?: boolean
-  disabled?: boolean
-  href?: string
+  muted?: boolean
   pressed?: boolean
-  selected?: boolean
-  target?: string
+  scheme?: ThemeColorSchemeKey_2
+  tone?: CardTone
 }
 
-export declare function CardProvider(props: {
-  compat_provider?: CardCompatProviderComponent
-  children?: ReactNode
-  rendered?: boolean
-  tone: ThemeColorCardToneKey
-  scheme: ThemeColorSchemeKey_2
-}): JSX.Element
-
 /**
  * @internal
- * @deprecated Use `CardStyleProps` from `@sanity/ui/css` instead.
  */
 export declare interface CardStyleProps {
   $checkered: boolean
   $focusRing: boolean
   $muted: boolean
-  $tone: ThemeColorCardToneKey
+  $tone: ThemeColorToneKey
 }
 
 /**
@@ -693,8 +617,7 @@ export declare type CardTone = ThemeColorCardToneKey | 'inherit'
  * @public
  */
 export declare const Checkbox: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'input'> & PolymorphicProps_2, keyof CheckboxProps> &
-    CheckboxProps &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & CheckboxProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -730,18 +653,18 @@ export declare type ClickOutsideListener = (event: MouseEvent) => void
  * @public
  */
 export declare const Code: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'pre'> & PolymorphicProps_2, keyof CodeProps> &
-    CodeProps &
-    RefAttributes<HTMLPreElement>
+  Omit<CodeProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> & RefAttributes<HTMLElement>
 >
 
 /**
  * @public
  */
-export declare interface CodeProps extends Omit<FontStyleProps, 'align'> {
+export declare interface CodeProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
+  weight?: string
 }
 
 /**
@@ -749,8 +672,10 @@ export declare interface CodeProps extends Omit<FontStyleProps, 'align'> {
  * @beta
  */
 export declare const CodeSkeleton: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof CodeSkeletonProps> &
-    CodeSkeletonProps &
+  Omit<
+    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
+    'ref'
+  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -759,7 +684,7 @@ export declare const CodeSkeleton: ForwardRefExoticComponent<
  * @beta
  */
 export declare interface CodeSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontCodeSize>
+  size?: number | number[]
 }
 
 /**
@@ -771,10 +696,10 @@ export declare function ConditionalWrapper({
   condition,
   wrapper,
 }: {
-  children: ReactNode
+  children: React.ReactNode
   condition: boolean
-  wrapper: (children: ReactNode) => ReactNode
-}): ReactNode
+  wrapper: (children: React.ReactNode) => React.ReactNode
+}): React.ReactNode
 
 export declare namespace ConditionalWrapper {
   var displayName: string
@@ -786,15 +711,14 @@ export declare namespace ConditionalWrapper {
  * @public
  */
 export declare const Container: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof ContainerProps> &
-    ContainerProps &
+  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface ContainerProps extends Omit<BoxProps, 'width'>, ContainerStyleProps {}
+export declare interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
 
 /**
  * @internal
@@ -823,8 +747,7 @@ export declare type Delay =
  * @public
  */
 export declare const Dialog: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof DialogProps> &
-    DialogProps &
+  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'width' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -851,10 +774,7 @@ export declare type DialogPosition = 'absolute' | 'fixed'
 /**
  * @public
  */
-export declare interface DialogProps
-  extends ContainerStyleProps,
-    PaddingStyleProps,
-    ShadowStyleProps {
+export declare interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
   /**
    * @beta
    */
@@ -863,35 +783,34 @@ export declare interface DialogProps
    * @beta
    */
   __unstable_hideCloseButton?: boolean
-  /**
-   * Whether the dialog should animate in on mount.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
-  cardRadius?: ResponsiveProp<Radius>
-  contentRef?: ForwardedRef<HTMLDivElement>
-  footer?: ReactNode
-  header?: ReactNode
+  cardRadius?: Radius | Radius[]
+  cardShadow?: number | number[]
+  contentRef?: React.ForwardedRef<HTMLDivElement>
+  footer?: React.ReactNode
+  header?: React.ReactNode
   id: string
   /** A callback that fires when the dialog becomes the top layer when it was not the top layer before. */
   onActivate?: LayerProps['onActivate']
   onClickOutside?: () => void
   onClose?: () => void
-  open?: boolean
   portal?: string
   position?: DialogPosition | DialogPosition[]
   scheme?: ThemeColorSchemeKey_2
-  tone?: CardTone
   zOffset?: number | number[]
+  /**
+   * Whether the dialog should animate in on mount.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
 }
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function DialogProvider(props: DialogProviderProps): ReactElement
+export declare function DialogProvider(props: DialogProviderProps): React.JSX.Element
 
 export declare namespace DialogProvider {
   var displayName: string
@@ -902,21 +821,17 @@ export declare namespace DialogProvider {
  * @beta
  */
 export declare interface DialogProviderProps {
-  children?: ReactNode
+  children?: React.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<ElementProps_2<'div'> & PolymorphicProps_2, 'media'> &
-    MediaQueryProps &
+  Omit<MediaQueryProps & Omit<HTMLProps<HTMLDivElement>, 'media' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -969,8 +884,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: ErrorInfo): void
-  render(): ReactNode
+  componentDidCatch(error: Error, info: React.ErrorInfo): void
+  render(): React.ReactNode
 }
 
 /**
@@ -978,7 +893,7 @@ export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBo
  * @beta
  */
 export declare type ErrorBoundaryProps = PropsWithChildren<{
-  onCatch: (params: {error: Error; info: ErrorInfo}) => void
+  onCatch: (params: {error: Error; info: React.ErrorInfo}) => void
 }>
 
 /**
@@ -989,33 +904,64 @@ 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<ElementProps_2<'div'> & PolymorphicProps_2, keyof FlexProps> &
-    FlexProps &
+  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'wrap' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
-export {FlexAlign}
+/**
+ * @public
+ */
+export declare type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
 
-export {FlexDirection}
+/**
+ * @public
+ */
+export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
 
-export {FlexJustify}
+/**
+ * @public
+ */
+export declare type FlexJustify =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
 
 /**
  * @public
  */
-export declare interface FlexProps extends Omit<BoxProps, 'display'> {
-  htmlFor?: string
+export declare interface FlexProps
+  extends Omit<BoxProps, 'display'>,
+    ResponsiveFlexProps,
+    ResponsiveFlexItemProps {
+  gap?: number | number[]
 }
 
-export {FlexValue}
+/**
+ * @public
+ */
+export declare type FlexValue = number | 'none' | 'auto' | 'initial'
 
-export {FlexWrap}
+/**
+ * @public
+ */
+export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
 
 /**
  * @internal
@@ -1030,7 +976,23 @@ export declare function focusLastDescendant(element: HTMLElement): boolean
 /**
  * @internal
  */
-export declare function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[]
+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
 
 /**
  * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
@@ -1038,33 +1000,59 @@ export declare function _getArrayProp<T>(val: T | T[] | undefined, defaultVal?:
  * @public
  */
 export declare const Grid: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof GridProps> &
-    GridProps &
+  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
-export {GridAutoCols}
+/**
+ * @public
+ */
+export declare type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
 
-export {GridAutoFlow}
+/**
+ * @public
+ */
+export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
 
-export {GridAutoRows}
+/**
+ * @public
+ */
+export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
 
-export {GridItemColumn}
+/**
+ * @public
+ */
+export declare type GridItemColumn = 'auto' | 'full' | number
 
-export {GridItemColumnEnd}
+/**
+ * @public
+ */
+export declare type GridItemColumnEnd = 'auto' | number
 
-export {GridItemColumnStart}
+/**
+ * @public
+ */
+export declare type GridItemColumnStart = 'auto' | number
 
-export {GridItemRow}
+/**
+ * @public
+ */
+export declare type GridItemRow = 'auto' | 'full' | number
 
-export {GridItemRowEnd}
+/**
+ * @public
+ */
+export declare type GridItemRowEnd = 'auto' | number
 
-export {GridItemRowStart}
+/**
+ * @public
+ */
+export declare type GridItemRowStart = 'auto' | number
 
 /**
  * @public
  */
-export declare interface GridProps extends Omit<BoxProps, 'display'> {}
+export declare interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
 
 /**
  * @internal
@@ -1077,23 +1065,37 @@ export declare function _hasFocus(element: HTMLElement): boolean
  * @public
  */
 export declare const Heading: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof HeadingProps> &
-    HeadingProps &
+  Omit<HeadingProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLElement>
 >
 
 /**
  * @public
  */
-export declare interface HeadingProps extends HeadingStyleProps, TextOverflowStyleProps {}
+export declare interface HeadingProps {
+  accent?: boolean
+  align?: TextAlign | TextAlign[]
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  muted?: boolean
+  size?: number | number[]
+  /**
+   * Controls how overflowing text is treated.
+   * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
+   * @beta
+   */
+  textOverflow?: 'ellipsis'
+  weight?: ThemeFontWeightKey_2
+}
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
 export declare const HeadingSkeleton: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof HeadingSkeletonProps> &
-    HeadingSkeletonProps &
+  Omit<
+    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
+    'ref'
+  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1102,7 +1104,7 @@ export declare const HeadingSkeleton: ForwardRefExoticComponent<
  * @beta
  */
 export declare interface HeadingSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontHeadingSize>
+  size?: number | number[]
 }
 
 /**
@@ -1117,19 +1119,17 @@ export declare const hexToRgb: typeof hexToRgb_2
  * @public
  */
 export declare const Hotkeys: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof HotkeysProps> &
-    HotkeysProps &
-    RefAttributes<HTMLDivElement>
+  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLElement>
 >
 
 /**
  * @public
  */
-export declare interface HotkeysProps extends GapStyleProps, RadiusStyleProps {
-  fontSize?: ResponsiveProp<FontTextSize>
-  padding?: ResponsiveProp<Space>
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
+export declare interface HotkeysProps {
+  fontSize?: number | number[]
+  padding?: number | number[]
+  radius?: Radius | Radius[]
+  space?: number | number[]
   keys?: string[]
 }
 
@@ -1151,17 +1151,15 @@ export declare const hslToRgb: typeof hslToRgb_2
  * @public
  */
 export declare const Inline: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof InlineProps> &
-    InlineProps &
-    RefAttributes<HTMLDivElement>
+  Omit<InlineProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
 >
 
 /**
  * @public
  */
-export declare interface InlineProps extends Omit<BoxProps, 'align' | 'display' | 'justify'> {
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
+export declare interface InlineProps extends Omit<BoxProps, 'display'> {
+  /** The spacing between children. */
+  space?: number | number[]
 }
 
 /**
@@ -1215,17 +1213,17 @@ export declare function _isScrollable(el: Node): boolean
  * @public
  */
 export declare const KBD: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof KBDProps> &
-    KBDProps &
-    RefAttributes<HTMLDivElement>
+  KBDProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface KBDProps extends BoxProps, RadiusStyleProps {
-  fontSize?: ResponsiveProp<FontTextSize>
-  padding?: ResponsiveProp<Space>
+export declare interface KBDProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  fontSize?: number | number[]
+  padding?: number | number[]
+  radius?: Radius | Radius[]
 }
 
 /**
@@ -1234,19 +1232,26 @@ export declare interface KBDProps extends BoxProps, RadiusStyleProps {
  * @public
  */
 export declare const Label: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof LabelProps> &
-    LabelProps &
+  Omit<LabelProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface LabelProps extends FontStyleProps, TextOverflowStyleProps {
+export declare interface LabelProps {
   accent?: boolean
-  htmlFor?: string
+  align?: TextAlign | TextAlign[]
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   muted?: boolean
-  size?: ResponsiveProp<LabelSize>
+  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
 }
 
 /**
@@ -1254,8 +1259,10 @@ export declare interface LabelProps extends FontStyleProps, TextOverflowStylePro
  * @beta
  */
 export declare const LabelSkeleton: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof LabelSkeletonProps> &
-    LabelSkeletonProps &
+  Omit<
+    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
+    'ref'
+  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1264,16 +1271,14 @@ export declare const LabelSkeleton: ForwardRefExoticComponent<
  * @beta
  */
 export declare interface LabelSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontLabelSize>
+  size?: number | number[]
 }
 
 /**
  * @public
  */
 export declare const Layer: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof LayerProps> &
-    LayerProps &
-    RefAttributes<HTMLDivElement>
+  Omit<LayerProps & Omit<HTMLProps<HTMLDivElement>, 'as'>, 'ref'> & RefAttributes<HTMLDivElement>
 >
 
 /** @public */
@@ -1289,7 +1294,8 @@ export declare interface LayerContextValue {
 /**
  * @public
  */
-export declare interface LayerProps extends BoxProps {
+export declare interface LayerProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
   onActivate?: (props: {activeElement: HTMLElement | null}) => void
   zOffset?: number | number[]
@@ -1298,7 +1304,7 @@ export declare interface LayerProps extends BoxProps {
 /**
  * @public
  */
-export declare function LayerProvider(props: LayerProviderProps): ReactElement
+export declare function LayerProvider(props: LayerProviderProps): React.JSX.Element
 
 export declare namespace LayerProvider {
   var displayName: string
@@ -1308,7 +1314,7 @@ export declare namespace LayerProvider {
  * @public
  */
 export declare interface LayerProviderProps {
-  children?: ReactNode
+  children?: React.ReactNode
   zOffset?: number | number[]
 }
 
@@ -1317,6 +1323,7 @@ export declare interface LayerProviderProps {
  * @beta
  */
 export declare interface MediaQueryProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   media?: number[]
 }
 
@@ -1334,8 +1341,7 @@ export declare interface _MediaStore {
  * @public
  */
 export declare const Menu: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof MenuProps> &
-    MenuProps &
+  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'role' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1360,9 +1366,9 @@ export declare interface MenuButtonProps {
    * @deprecated Use `popover={{boundaryElement: element}}` instead.
    */
   boundaryElement?: HTMLElement
-  button: ReactElement<Props<ButtonProps, 'button'>>
+  button: React.JSX.Element
   id: string
-  menu?: ReactElement
+  menu?: React.JSX.Element
   onClose?: () => void
   onOpen?: () => void
   /**
@@ -1392,19 +1398,19 @@ export declare interface MenuButtonProps {
 /**
  * @public
  */
-export declare const MenuDivider: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, never> &
-    MenuDividerProps &
-    RefAttributes<HTMLHRElement>
->
-
-/** @public */
-export declare interface MenuDividerProps {}
+export declare const MenuDivider: IStyledComponentBase<
+  'web',
+  FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>
+> &
+  string
 
 /**
  * @public
  */
-export declare function MenuGroup(props: Props<MenuGroupProps, 'div'>): ReactElement
+export declare function MenuGroup(
+  props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
+    MenuGroupProps,
+): React.JSX.Element
 
 export declare namespace MenuGroup {
   var displayName: string
@@ -1413,10 +1419,10 @@ export declare namespace MenuGroup {
 /**
  * @public
  */
-export declare interface MenuGroupProps extends GapStyleProps {
-  disabled?: boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  icon?: ElementType | ReactNode
+export declare interface MenuGroupProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  fontSize?: number | number[]
+  icon?: React.ElementType | React.ReactNode
   menu?: Omit<
     MenuProps,
     | 'onClickOutside'
@@ -1428,12 +1434,11 @@ export declare interface MenuGroupProps extends GapStyleProps {
     | 'shouldFocus'
     | 'onBlurCapture'
   >
-  padding?: ResponsiveProp<Space>
+  padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'open'>
   radius?: Radius | Radius[]
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-  text: ReactNode
+  space?: number | number[]
+  text: React.ReactNode
   tone?: SelectableTone
 }
 
@@ -1441,32 +1446,31 @@ export declare interface MenuGroupProps extends GapStyleProps {
  * @public
  */
 export declare const MenuItem: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof MenuItemProps> &
-    MenuItemProps &
+  MenuItemProps &
+    Omit<HTMLProps<HTMLDivElement>, 'selected' | 'height' | 'ref' | 'tabIndex' | 'as'> &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface MenuItemProps extends GapStyleProps, PaddingStyleProps, RadiusStyleProps {
-  disabled?: boolean
+export declare interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   fontSize?: number | number[]
   hotkeys?: string[]
-  icon?: ElementType | ReactNode
-  iconRight?: ElementType | ReactNode
+  icon?: React.ElementType | React.ReactNode
+  iconRight?: React.ElementType | React.ReactNode
   pressed?: boolean
   selected?: boolean
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-  text?: ReactNode
+  space?: number | number[]
+  text?: React.ReactNode
   tone?: SelectableTone
 }
 
 /**
  * @public
  */
-export declare interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps, 'gap'> {
+export declare interface MenuProps extends ResponsivePaddingProps {
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -1482,9 +1486,9 @@ export declare interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps
   'originElement'?: HTMLElement | null
   'registerElement'?: (el: HTMLElement) => () => void
   'shouldFocus'?: 'first' | 'last' | null
-  /** @deprecated Use `gap` property instead. */
-  'space'?: ResponsiveProp<Space>
+  'space'?: number | number[]
   'aria-labelledby'?: string
+  'onBlurCapture'?: (event: FocusEvent) => void
 }
 
 /**
@@ -1520,18 +1524,16 @@ export declare type Placement =
   | 'left-start'
   | 'left-end'
 
-export declare interface PolymorphicProps {
-  as?: ElementType
-}
-
 /**
  * The `Popover` component is used to display some content on top of another.
  *
  * @public
  */
 export declare const Popover: NamedExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof PopoverProps> &
-    PopoverProps &
+  Omit<
+    PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'children' | 'as'>,
+    'ref'
+  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1541,7 +1543,10 @@ export declare const Popover: NamedExoticComponent<
 export declare type PopoverMargins = [number, number, number, number]
 
 /** @public */
-export declare interface PopoverProps extends CardProps, LayerProps {
+export declare interface PopoverProps
+  extends Omit<LayerProps, 'as'>,
+    ResponsiveRadiusProps,
+    ResponsiveShadowProps {
   /** @beta */
   __unstable_margins?: PopoverMargins
   /**
@@ -1554,22 +1559,20 @@ export declare interface PopoverProps extends CardProps, LayerProps {
   arrow?: boolean
   /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
   boundaryElement?: HTMLElement | null
-  children?: ReactElement<{
-    ref: ForwardedRef<HTMLElement>
-  }>
+  children?: React.JSX.Element
   /**
-   * When `true`, prevent overflow within the current boundary:
-   * - by flipping on its side axis
-   * - by resizing
-   *
-   * Note that:
-   * - setting `preventOverflow` to `true` also prevents overflow on its side axis
-   * - setting `matchReferenceWidth` to `true` also causes the popover to resize
-   *
-   * @defaultValue false
-   */
+     * When `true`, prevent overflow within the current boundary:
+     * - by flipping on its side axis
+     * - by resizing
+     /*
+     * Note that:
+     * - setting `preventOverflow` to `true` also prevents overflow on its side axis
+     * - setting `matchReferenceWidth` to `true` also causes the popover to resize
+     *
+     * @defaultValue false
+     */
   constrainSize?: boolean
-  content?: ReactNode
+  content?: React.ReactNode
   disabled?: boolean
   fallbackPlacements?: Placement[]
   floatingBoundary?: HTMLElement | null
@@ -1590,7 +1593,19 @@ export declare interface PopoverProps extends CardProps, LayerProps {
    */
   modal?: boolean
   open?: boolean
+  overflow?: BoxOverflow
+  padding?: number | number[]
   placement?: Placement
+  /**
+   * When 'flip' (default), the placement is determined from the initial placement and the
+   * fallback placements in order. Whichever fits in the viewport first.
+   *
+   * When 'autoPlacement', the initial placement and all fallback placements are evaluated
+   * and the placement with the most viewport space available.
+   *
+   * Option is only relevant if either `constrainSize` or `preventOverflow` is `true`
+   */
+  placementStrategy?: 'flip' | 'autoPlacement'
   /** Whether or not to render the popover in a portal element. */
   portal?: boolean | string
   preventOverflow?: boolean
@@ -1600,10 +1615,13 @@ export declare interface PopoverProps extends CardProps, LayerProps {
    * 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 */
@@ -1615,7 +1633,7 @@ export declare type PopoverWidth = number | 'auto'
 /**
  * @public
  */
-export declare function Portal(props: PortalProps): ReactPortal | null
+export declare function Portal(props: PortalProps): React.ReactPortal | null
 
 export declare namespace Portal {
   var displayName: string
@@ -1635,7 +1653,7 @@ export declare interface PortalContextValue {
  * @public
  */
 export declare interface PortalProps {
-  children: ReactNode
+  children: React.ReactNode
   /**
    * @beta This API might change. DO NOT USE IN PRODUCTION.
    */
@@ -1645,7 +1663,7 @@ export declare interface PortalProps {
 /**
  * @public
  */
-export declare function PortalProvider(props: PortalProviderProps): ReactElement
+export declare function PortalProvider(props: PortalProviderProps): React.JSX.Element
 
 export declare namespace PortalProvider {
   var displayName: string
@@ -1659,7 +1677,7 @@ export declare interface PortalProviderProps {
    * @deprecated Use `<BoundaryElementProvider element={...} />` instead
    */
   boundaryElement?: HTMLElement | null
-  children: ReactNode
+  children: React.ReactNode
   element?: HTMLElement | null
   /**
    * @beta
@@ -1667,22 +1685,13 @@ export declare interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
-/** @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.
  *
  * @public
  */
 export declare const Radio: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'input'> & PolymorphicProps_2, 'customValidity'> &
-    RadioProps &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & RadioProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -1693,7 +1702,10 @@ export declare interface RadioProps {
   customValidity?: string
 }
 
-export {Radius}
+/**
+ * @public
+ */
+export declare type Radius = number | 'full'
 
 /**
  * @internal
@@ -1705,7 +1717,10 @@ export declare function _raf(fn: () => void): () => void
  */
 export declare function _raf2(fn: () => void): () => void
 
-export {rem}
+/**
+ * @public
+ */
+export declare function rem(pixelValue: number): string | 0
 
 /**
  * @internal
@@ -1714,7 +1729,6 @@ export declare const _ResizeObserver: typeof ResizeObserver
 
 /**
  * @internal
- * @deprecated do not use
  */
 export declare function _responsive<T>(
   media: number[],
@@ -1731,7 +1745,6 @@ export declare interface ResponsiveAvatarSizeStyleProps {
 
 /**
  * @public
- * @deprecated
  */
 export declare interface ResponsiveBorderProps {
   border?: boolean | boolean[]
@@ -1743,7 +1756,6 @@ export declare interface ResponsiveBorderProps {
 
 /**
  * @public
- * @deprecated
  */
 export declare interface ResponsiveBoxProps {
   display?: BoxDisplay | BoxDisplay[]
@@ -1752,9 +1764,16 @@ 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
  */
 export declare interface ResponsiveFlexItemProps {
   /** Sets the flex CSS attribute. The property is responsive. */
@@ -1763,7 +1782,6 @@ export declare interface ResponsiveFlexItemProps {
 
 /**
  * @public
- * @deprecated
  */
 export declare interface ResponsiveFlexProps {
   align?: FlexAlign | FlexAlign[]
@@ -1772,9 +1790,26 @@ 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
  */
 export declare interface ResponsiveGridItemProps {
   column?: GridItemColumn | GridItemColumn[]
@@ -1787,19 +1822,36 @@ export declare interface ResponsiveGridItemProps {
 
 /**
  * @public
- * @deprecated
  */
 export declare interface ResponsiveGridProps {
   autoRows?: GridAutoRows | GridAutoRows[]
   autoCols?: GridAutoCols | GridAutoCols[]
   autoFlow?: GridAutoFlow | GridAutoFlow[]
   columns?: number | number[]
+  gap?: number | number[]
+  gapX?: number | number[]
+  gapY?: number | number[]
   rows?: number | number[]
 }
 
+/**
+ * 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
  */
 export declare interface ResponsiveMarginProps {
   /** Applies margins to all sides. The property is responsive. */
@@ -1816,7 +1868,6 @@ export declare interface ResponsiveMarginProps {
 
 /**
  * @public
- * @deprecated
  */
 export declare interface ResponsivePaddingProps {
   padding?: number | number[]
@@ -1830,7 +1881,6 @@ export declare interface ResponsivePaddingProps {
 
 /**
  * @public
- * @deprecated
  */
 export declare interface ResponsiveRadiusProps {
   radius?: Radius | Radius[]
@@ -1838,15 +1888,36 @@ export declare interface ResponsiveRadiusProps {
 
 /**
  * @public
- * @deprecated
  */
 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
  */
 export declare interface ResponsiveWidthProps {
   width?: number | 'auto' | (number | 'auto')[]
@@ -1902,25 +1973,24 @@ export {screen_2 as screen}
  * @public
  */
 export declare const Select: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'select'> & PolymorphicProps_2, keyof SelectProps> &
-    SelectProps &
+  Omit<SelectProps & Omit<HTMLProps<HTMLSelectElement>, 'as'>, 'ref'> &
     RefAttributes<HTMLSelectElement>
 >
 
 /**
  * @public
- * @deprecated Use `ThemeColorStateToneKey` instead
  */
 export declare type SelectableTone = ThemeColorStateToneKey
 
 /**
  * @public
  */
-export declare interface SelectProps extends SelectStyleProps {
+export declare interface SelectProps {
+  fontSize?: number | number[]
+  padding?: number | number[]
+  radius?: Radius | Radius[]
+  space?: number | number[]
   customValidity?: string
-  readOnly?: boolean
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
 }
 
 /**
@@ -1928,16 +1998,14 @@ export declare interface SelectProps extends SelectStyleProps {
  * @beta
  */
 export declare const Skeleton: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof SkeletonProps> &
-    SkeletonProps &
-    RefAttributes<HTMLDivElement>
+  Omit<SkeletonProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<HTMLDivElement>
 >
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface SkeletonProps extends SkeletonStyleProps, Omit<BoxProps, 'children'> {
+export declare interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
   animated?: boolean
   delay?: number
 }
@@ -1948,8 +2016,7 @@ export declare interface SkeletonProps extends SkeletonStyleProps, Omit<BoxProps
  * @public
  */
 export declare const Spinner: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof SpinnerProps> &
-    SpinnerProps &
+  Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1958,15 +2025,14 @@ export declare const Spinner: ForwardRefExoticComponent<
  */
 export declare interface SpinnerProps {
   muted?: boolean
-  size?: ResponsiveProp<FontTextSize>
+  size?: number | number[]
 }
 
 /**
  * @public
  */
 export declare const SrOnly: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, 'children'> &
-    SrOnlyProps &
+  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1974,7 +2040,8 @@ export declare const SrOnly: ForwardRefExoticComponent<
  * @public
  */
 export declare interface SrOnlyProps {
-  children?: ReactNode
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  children?: React.ReactNode
 }
 
 /**
@@ -1983,30 +2050,22 @@ export declare interface SrOnlyProps {
  * @public
  */
 export declare const Stack: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof StackProps> &
-    StackProps &
-    RefAttributes<HTMLDivElement>
+  StackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface StackProps
-  extends Omit<
-    BoxProps,
-    'align' | 'columns' | 'direction' | 'display' | 'gapX' | 'gapY' | 'justify'
-  > {
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
+export declare interface StackProps extends BoxProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  space?: number | number[]
 }
 
 /**
  * @public
  * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
  */
-export declare const studioTheme: {
-  readonly value: RootTheme_2
-}
+export declare const studioTheme: BaseTheme_2
 
 /**
  * @public
@@ -2014,8 +2073,6 @@ export declare const studioTheme: {
  */
 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.
  *
@@ -2024,8 +2081,7 @@ export declare function StyleTags(props: {theme?: Theme_v3}): ReactNode
  * @public
  */
 export declare const Switch: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'input'> & PolymorphicProps_2, 'indeterminate'> &
-    SwitchProps &
+  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & SwitchProps, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2040,8 +2096,14 @@ export declare interface SwitchProps {
  * @public
  */
 export declare const Tab: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'button'> & PolymorphicProps_2, keyof TabProps> &
+  Omit<
     TabProps &
+      Omit<
+        HTMLProps<HTMLButtonElement>,
+        'label' | 'id' | 'type' | 'width' | 'aria-controls' | 'as'
+      >,
+    'ref'
+  > &
     RefAttributes<HTMLButtonElement>
 >
 
@@ -2049,33 +2111,25 @@ export declare const Tab: ForwardRefExoticComponent<
  * @public
  */
 export declare const TabList: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TabListProps> &
-    TabListProps &
-    RefAttributes<HTMLDivElement>
+  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+    RefAttributes<unknown>
 >
 
-/**
- * @public
- */
-export declare type TabListChild =
-  | ReactElement<Props<TabProps, 'button'>>
-  | null
-  | undefined
-  | false
-
 /**
  * @public
  */
 export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: TabListChild[]
+  children: Array<React.JSX.Element | null | undefined | false>
 }
 
 /**
  * @public
  */
 export declare const TabPanel: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TabPanelProps> &
-    TabPanelProps &
+  Omit<
+    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'role' | 'aria-labelledby' | 'as'>,
+    'ref'
+  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2095,15 +2149,15 @@ export declare interface TabPanelProps extends BoxProps {
  */
 export declare interface TabProps {
   /**
-   * The `id` of the corresponding `TabPanel` component.
+   * The `id` of the correlating `TabPanel` component.
    */
   'aria-controls': string
   'id': string
-  'icon'?: ElementType | ReactNode
+  'icon'?: React.ElementType | React.ReactNode
   'focused'?: boolean
-  'fontSize'?: ResponsiveProp<FontTextSize>
-  'label'?: ReactNode
-  'padding'?: ResponsiveProp<Space>
+  'fontSize'?: number | number[]
+  'label'?: React.ReactNode
+  'padding'?: number | number[]
   'selected'?: boolean
   'tone'?: ButtonTone
 }
@@ -2114,36 +2168,39 @@ export declare interface TabProps {
  * @public
  */
 declare const Text_2: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TextProps> &
-    TextProps &
+  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 export {Text_2 as Text}
 
-export {TextAlign}
+/**
+ * @public
+ */
+export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
 
 /**
  * A multiline text input.
  *
+
  * @public
  */
 export declare const TextArea: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'textarea'> & PolymorphicProps_2, keyof TextAreaProps> &
-    TextAreaProps &
+  Omit<TextAreaProps & Omit<HTMLProps<HTMLTextAreaElement>, 'as'>, 'ref'> &
     RefAttributes<HTMLTextAreaElement>
 >
 
 /**
  * @public
  */
-export declare interface TextAreaProps extends TextAreaStyleProps {
+export declare interface TextAreaProps extends ResponsiveRadiusProps {
   /**
    * @beta
    */
   __unstable_disableFocusRing?: boolean
+  border?: boolean
   customValidity?: string
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
+  fontSize?: number | number[]
+  padding?: number | number[]
   weight?: ThemeFontWeightKey_2
 }
 
@@ -2153,42 +2210,42 @@ export declare interface TextAreaProps extends TextAreaStyleProps {
  * @public
  */
 export declare const TextInput: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'input'> & PolymorphicProps_2, keyof TextInputProps> &
-    TextInputProps &
+  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'prefix' | 'as'>, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
 /**
  * @public
  */
-export declare type TextInputClearButtonProps = Omit<
-  Props<ButtonProps, 'button'>,
-  'as' | 'onClick' | 'onMouseDown'
->
+export declare type TextInputClearButtonProps = Omit<ButtonProps, 'as'> &
+  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>
 
 /**
  * @public
  */
-export declare interface TextInputProps extends InputStyleProps {
+export declare interface TextInputProps {
   /**
    * @beta
    */
   __unstable_disableFocusRing?: boolean
+  border?: boolean
   /**
    * @beta
    */
   clearButton?: boolean | TextInputClearButtonProps
   customValidity?: string
-  icon?: ElementType | ReactNode
-  iconRight?: ElementType | ReactNode
+  fontSize?: number | number[]
+  icon?: React.ElementType | React.ReactNode
+  iconRight?: React.ElementType | React.ReactNode
   /**
    * @beta
    */
   onClear?: () => void
-  prefix?: ReactNode
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
-  suffix?: ReactNode
+  padding?: number | number[]
+  prefix?: React.ReactNode
+  radius?: Radius | Radius[]
+  space?: number | number[]
+  suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey_2
 }
@@ -2214,8 +2271,20 @@ export declare type TextInputType =
 /**
  * @public
  */
-export declare interface TextProps extends TextStyleProps, TextOverflowStyleProps {
-  htmlFor?: string
+export declare interface TextProps {
+  accent?: boolean
+  align?: TextAlign | TextAlign[]
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  /** When `true` the text color will be muted. */
+  muted?: boolean
+  size?: number | number[]
+  /**
+   * 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
 }
 
 /**
@@ -2223,8 +2292,10 @@ export declare interface TextProps extends TextStyleProps, TextOverflowStyleProp
  * @beta
  */
 export declare const TextSkeleton: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TextSkeletonProps> &
-    TextSkeletonProps &
+  Omit<
+    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
+    'ref'
+  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2233,7 +2304,7 @@ export declare const TextSkeleton: ForwardRefExoticComponent<
  * @beta
  */
 export declare interface TextSkeletonProps extends SkeletonProps {
-  size?: ResponsiveProp<FontTextSize>
+  size?: number | number[]
 }
 
 /**
@@ -2285,7 +2356,7 @@ export {ThemeColorName}
 /**
  * @public
  */
-export declare function ThemeColorProvider(props: ThemeColorProviderProps): ReactElement
+export declare function ThemeColorProvider(props: ThemeColorProviderProps): React.JSX.Element
 
 export declare namespace ThemeColorProvider {
   var displayName: string
@@ -2295,7 +2366,7 @@ export declare namespace ThemeColorProvider {
  * @public
  */
 export declare interface ThemeColorProviderProps {
-  children?: ReactNode
+  children?: React.ReactNode
   scheme?: ThemeColorSchemeKey_2
   tone?: ThemeColorCardToneKey
 }
@@ -2387,10 +2458,17 @@ export {ThemeInput}
  */
 export declare type ThemeLayer = ThemeLayer_2
 
+/**
+ * @internal
+ */
+export declare interface ThemeProps {
+  theme: Theme_2
+}
+
 /**
  * @public
  */
-export declare function ThemeProvider(props: ThemeProviderProps): ReactElement
+export declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element
 
 export declare namespace ThemeProvider {
   var displayName: string
@@ -2400,7 +2478,7 @@ export declare namespace ThemeProvider {
  * @public
  */
 export declare interface ThemeProviderProps {
-  children?: ReactNode
+  children?: React.ReactNode
   scheme?: ThemeColorSchemeKey_2
   theme?: RootTheme_2
   tone?: ThemeColorCardToneKey
@@ -2420,11 +2498,19 @@ export declare type ThemeShadow = ThemeShadow_2
  * @public
  */
 export declare function Toast(
-  props: Omit<
-    Props<ToastProps, 'div'>,
-    'onDrag' | 'onDragEnd' | 'onDragStart' | 'onAnimationStart'
-  >,
-): ReactElement
+  props: ToastProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      | 'as'
+      | 'height'
+      | 'ref'
+      | 'title'
+      | 'onAnimationStart'
+      | 'onDragStart'
+      | 'onDragEnd'
+      | 'onDrag'
+    >,
+): React.JSX.Element
 
 export declare namespace Toast {
   var displayName: string
@@ -2447,8 +2533,12 @@ export declare interface ToastContextValue {
 /**
  * @public
  */
-declare interface ToastLayerProps extends GapStyleProps, PaddingStyleProps {
-  children: ReactNode
+declare interface ToastLayerProps {
+  children: React.ReactNode
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
+  gap?: number | number[]
 }
 
 /**
@@ -2456,22 +2546,23 @@ declare interface ToastLayerProps extends GapStyleProps, PaddingStyleProps {
  */
 export declare interface ToastParams {
   closable?: boolean
-  description?: ReactNode
+  description?: React.ReactNode
   duration?: number
   id?: string
   onClose?: () => void
-  title?: ReactNode
+  title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
 }
 
 /**
  * @public
  */
-export declare interface ToastProps extends RadiusStyleProps {
+export declare interface ToastProps {
   closable?: boolean
-  description?: ReactNode
-  onClose?: () => void
-  title?: ReactNode
+  description?: React.ReactNode
+  onClose: () => void
+  radius?: number | number[]
+  title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
   duration?: number
   updatedAt?: number
@@ -2500,8 +2591,7 @@ export declare interface ToastProviderProps extends Omit<ToastLayerProps, 'child
  * @public
  */
 export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TooltipProps> &
-    TooltipProps &
+  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'children' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2528,7 +2618,7 @@ export declare interface TooltipDelayGroupContextValue {
  */
 export declare function TooltipDelayGroupProvider(
   props: TooltipDelayGroupProviderProps,
-): ReactElement
+): React.JSX.Element
 
 export declare namespace TooltipDelayGroupProvider {
   var displayName: string
@@ -2538,7 +2628,7 @@ export declare namespace TooltipDelayGroupProvider {
  * @public
  * */
 export declare interface TooltipDelayGroupProviderProps {
-  children?: ReactNode
+  children?: React.ReactNode
   /**
    * Handles the delays to open or close a tooltip inside a group
    *
@@ -2554,23 +2644,22 @@ export declare interface TooltipDelayGroupProviderProps {
 /**
  * @public
  */
-export declare interface TooltipProps
-  extends Omit<LayerProps, 'as'>,
-    RadiusStyleProps,
-    ShadowStyleProps {
+export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
   /** @deprecated Use `fallbackPlacements` instead. */
   allowedAutoPlacements?: Placement[]
-  /**
-   * Whether the tooltip should animate in and out.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
   arrow?: boolean
   boundaryElement?: HTMLElement | null
-  children?: ReactElement<Props>
-  content?: ReactNode
+  children?: React.JSX.Element
+  content?: React.ReactNode
+  disabled?: boolean
+  fallbackPlacements?: Placement[]
+  padding?: number | number[]
+  placement?: Placement
+  /** Whether or not to render the tooltip in a portal element. */
+  portal?: boolean | string
+  radius?: number | number[]
+  scheme?: ThemeColorSchemeKey_2
+  shadow?: number | number[]
   /**
    * Adds a delay to open or close the tooltip.
    *
@@ -2582,13 +2671,13 @@ export declare interface TooltipProps
    * @defaultValue 0
    */
   delay?: Delay
-  disabled?: boolean
-  fallbackPlacements?: Placement[]
-  placement?: Placement
-  /** Whether or not to render the tooltip in a portal element. */
-  portal?: boolean | string
-  scheme?: ThemeColorSchemeKey_2
-  tone?: ThemeColorCardToneKey
+  /**
+   * Whether the tooltip should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
 }
 
 /**
@@ -2596,8 +2685,8 @@ export declare interface TooltipProps
  * @beta
  */
 export declare const Tree: NamedExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof TreeProps> &
-    TreeProps &
+  TreeProps &
+    Omit<HTMLProps<HTMLDivElement>, 'height' | 'wrap' | 'ref' | 'role' | 'as' | 'align'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2612,7 +2701,7 @@ export declare interface TreeContextValue {
   registerItem: (element: HTMLElement, path: string, expanded: boolean, selected: boolean) => void
   setExpanded: (path: string, expanded: boolean) => void
   setFocusedElement: (focusedElement: HTMLElement | null) => void
-  space: ResponsiveProp<Space>
+  space: number | number[]
   state: TreeState
 }
 
@@ -2620,22 +2709,24 @@ export declare interface TreeContextValue {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare const TreeItem: NamedExoticComponent<Omit<Props<TreeItemProps, 'div'>, 'as'>>
+export declare const TreeItem: NamedExoticComponent<
+  TreeItemProps & Omit<HTMLProps<HTMLLIElement>, 'ref' | 'role' | 'as'>
+>
 
 /**
  * @beta
  */
-export declare interface TreeItemProps extends CardProps {
+export declare interface TreeItemProps {
   expanded?: boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  icon?: ElementType
+  fontSize?: number | number[]
+  icon?: React.ElementType
   /**
    * Allows passing a custom element type to the link component
    */
-  linkAs?: ElementType
-  padding?: ResponsiveProp<Space>
-  space?: ResponsiveProp<Space>
-  text?: ReactNode
+  linkAs?: BoxProps['as']
+  padding?: number | number[]
+  space?: number | number[]
+  text?: React.ReactNode
   weight?: ThemeFontWeightKey_2
 }
 
@@ -2643,9 +2734,8 @@ export declare interface TreeItemProps extends CardProps {
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface TreeProps extends Pick<GapStyleProps, 'gap'> {
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
+export declare interface TreeProps {
+  space?: number | number[]
 }
 
 /**
@@ -2660,20 +2750,20 @@ export declare interface TreeState {
     | undefined
 }
 
-/** @beta */
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare function useArrayProp<T>(val: T | T[] | undefined, defaultVal?: T[]): T[]
+export declare function useArrayProp<T extends ArrayPropPrimitive = ArrayPropPrimitive>(
+  val: T | T[] | undefined,
+  defaultVal?: T[],
+): T[]
 
 /**
  * @public
  */
 export declare function useBoundaryElement(): BoundaryElementContextValue
 
-export declare function useCard(): CardContextValue_2 | null
-
 /**
  * @public
  * @deprecated replaced by the new `useClickOutsideEvent` hook, instead of:
@@ -2746,7 +2836,9 @@ export declare function useElementSize(element: HTMLElement | null): ElementSize
  * +useImperativeHandle(forwardedRef, () => ref.current)
  * ```
  */
-export declare function useForwardedRef<T>(ref: ForwardedRef<T>): MutableRefObject<T | null>
+export declare function useForwardedRef<T>(
+  ref: React.ForwardedRef<T>,
+): React.MutableRefObject<T | null>
 
 /**
  * @beta
@@ -2761,7 +2853,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://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://react.dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
  *
  * @public
  */
@@ -2784,7 +2876,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://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://react.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
@@ -2797,7 +2889,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://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://react.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
@@ -2841,8 +2933,9 @@ export declare function useTree(): TreeContextValue
  * @beta
  */
 export declare const VirtualList: ForwardRefExoticComponent<
-  Omit<ElementProps_2<'div'> & PolymorphicProps_2, keyof VirtualListProps<any>> &
-    VirtualListProps<any> &
+  VirtualListProps<any> &
+    StackProps &
+    Omit<HTMLProps<HTMLDivElement>, 'children' | 'ref' | 'onChange' | 'as'> &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2861,12 +2954,13 @@ export declare interface VirtualListChangeOpts {
 /**
  * @beta
  */
-export declare interface VirtualListProps<Item = any> extends Omit<StackProps, 'gap'> {
+export declare interface VirtualListProps<Item = any> {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
   gap?: number
   getItemKey?: (item: Item, itemIndex: number) => string
   items?: Item[]
   onChange?: (opts: VirtualListChangeOpts) => void
-  renderItem?: (item: Item) => ReactNode
+  renderItem?: (item: Item) => React.ReactNode
 }
 
 export {}