@sanity/ui 2.10.0-corel.0 → 3.0.0-static.1

package/dist/index.d.ts

@@ -1,36 +1,69 @@
+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 {CardStyleProps as CardStyleProps_2} from '@sanity/ui/css'
 import {Component} 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 {DetailedHTMLProps} from 'react'
 import {ElementType} from 'react'
-import {FastOmit} from 'styled-components'
+import {FlexAlign} from '@sanity/ui/css'
+import {FlexDirection} from '@sanity/ui/css'
+import {FlexJustify} 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 {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 {hexToRgb as hexToRgb_2} from '@sanity/ui/theme'
 import {HSL as HSL_2} from '@sanity/ui/theme'
 import {hslToRgb as hslToRgb_2} from '@sanity/ui/theme'
-import {HTMLAttributes} from 'react'
 import {HTMLProps} from 'react'
-import {IStyledComponentBase} from 'styled-components/dist/types'
 import {MemoExoticComponent} from 'react'
 import {multiply as multiply_2} from '@sanity/ui/theme'
 import {MutableRefObject} from 'react'
 import {NamedExoticComponent} from 'react'
+import {PaddingStyleProps} from '@sanity/ui/css'
 import {parseColor as parseColor_2} from '@sanity/ui/theme'
 import {PartialThemeColorBuilderOpts} from '@sanity/ui/theme'
+import {PositionStyleProps} from '@sanity/ui/css'
 import {PropsWithChildren} from 'react'
+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 {RefAttributes} from 'react'
 import {RefCallback} from 'react'
+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 {SkeletonStyleProps} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
+import {TextAlign} 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 {ThemeAvatar} from '@sanity/ui/theme'
@@ -77,6 +110,7 @@ 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
@@ -176,7 +210,7 @@ export declare interface AutocompleteProps<
   border?: boolean
   customValidity?: string
   filterOption?: (query: string, option: Option) => boolean
-  fontSize?: number | number[]
+  fontSize?: ResponsiveProp<FontTextSize>
   icon?: ElementType | ReactNode
   id: string
   /** @beta */
@@ -191,7 +225,7 @@ export declare interface AutocompleteProps<
   openOnFocus?: boolean
   /** The options to render. */
   options?: Option[]
-  padding?: number | number[]
+  padding?: ResponsiveProp<Space>
   popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
     Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
   prefix?: ReactNode
@@ -342,10 +376,7 @@ export declare interface AvatarRootStyleProps {
   $color: ThemeColorAvatarColorKey
 }
 
-/**
- * @public
- */
-export declare type AvatarSize = 0 | 1 | 2 | 3
+export {AvatarSize}
 
 /**
  * @public
@@ -365,6 +396,9 @@ export declare interface AvatarStackProps {
   tone?: 'navbar'
 }
 
+/**
+ * @public
+ */
 /**
  * @public
  */
@@ -376,7 +410,7 @@ export declare type AvatarStatus = 'online' | 'editing' | 'inactive'
  * @public
  */
 export declare const Badge: ForwardRefExoticComponent<
-  Omit<BadgeProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
+  Omit<BadgeProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<HTMLDivElement>
 >
 
 /**
@@ -388,7 +422,7 @@ export declare type BadgeMode = 'default' | 'outline'
 /**
  * @public
  */
-export declare interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
+export declare interface BadgeProps extends BoxProps, RadiusStyleProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
   /** @deprecated No longer used. */
@@ -448,34 +482,23 @@ export declare interface BoundaryElementProviderProps {
  * @public
  */
 export declare const Box: ForwardRefExoticComponent<
-  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+  Omit<
+    BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'wrap' | 'as' | 'rows'>,
+    'ref'
+  > &
     RefAttributes<HTMLDivElement>
 >
 
-/**
- * @public
- */
-export declare type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+export {BoxDisplay}
 
-/**
- * @public
- */
-export declare type BoxHeight = 'stretch' | 'fill'
+export {BoxHeight}
 
-/**
- * @public
- */
-export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
+export {BoxOverflow}
 
 /**
  * @public
  */
-export declare interface BoxProps
-  extends ResponsiveFlexItemProps,
-    ResponsiveBoxProps,
-    ResponsiveGridItemProps,
-    ResponsiveMarginProps,
-    ResponsivePaddingProps {
+export declare interface BoxProps extends BoxStyleProps, GapStyleProps, PositionStyleProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   forwardedAs?: React.ElementType | keyof JSX.IntrinsicElements
 }
@@ -486,10 +509,7 @@ export declare interface BoxProps
  */
 export declare type BoxShadow = ThemeBoxShadow
 
-/**
- * @public
- */
-export declare type BoxSizing = 'content' | 'border'
+export {BoxSizing}
 
 /**
  * @beta
@@ -503,11 +523,8 @@ export declare const Breadcrumbs: ForwardRefExoticComponent<
 /**
  * @beta
  */
-export declare interface BreadcrumbsProps {
+export declare interface BreadcrumbsProps extends GapStyleProps {
   expandButton?: Omit<ButtonProps, 'onClick' | 'selected'>
-  gap?: number | number[]
-  gapX?: number | number[]
-  gapY?: number | number[]
   maxLength?: number
   separator?: React.ReactNode
   /** @deprecated - Use `gap`, `gapX`, `gapY` instead */
@@ -518,7 +535,10 @@ export declare interface BreadcrumbsProps {
  * @public
  */
 export declare const Button: ForwardRefExoticComponent<
-  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'width' | 'as'>, 'ref'> &
+  Omit<
+    ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'height' | 'width' | 'wrap' | 'as'>,
+    'ref'
+  > &
     RefAttributes<HTMLButtonElement>
 >
 
@@ -530,19 +550,19 @@ export declare type ButtonMode = ThemeColorButtonModeKey_2
 /**
  * @public
  */
-export declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+export declare interface ButtonProps extends PaddingStyleProps, RadiusStyleProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
-  fontSize?: number | number[]
+  fontSize?: ResponsiveProp<FontTextSize>
   mode?: ButtonMode
   icon?: React.ElementType | React.ReactNode
   iconRight?: React.ElementType | React.ReactNode
-  justify?: FlexJustify | FlexJustify[]
+  justify?: ResponsiveProp<FlexJustify>
   /**
    * @beta Do not use in production, as this might change.
    */
   loading?: boolean
   selected?: boolean
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
   textAlign?: ButtonTextAlign
   muted?: boolean
   text?: React.ReactNode
@@ -550,7 +570,7 @@ export declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveR
   textWeight?: TextProps['weight']
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
-  width?: ButtonWidth
+  width?: ResponsiveProp<Width>
 }
 
 /**
@@ -565,6 +585,7 @@ export declare type ButtonTone = ThemeColorStateToneKey
 
 /**
  * @public
+ * @deprecated Use `Width` from `@sanity/ui/css` instead.
  */
 export declare type ButtonWidth = 'fill'
 
@@ -575,18 +596,14 @@ export declare type ButtonWidth = 'fill'
  * @public
  */
 export declare const Card: ForwardRefExoticComponent<
-  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'wrap' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface CardProps
-  extends BoxProps,
-    ResponsiveBorderProps,
-    ResponsiveRadiusProps,
-    ResponsiveShadowProps {
+export declare interface CardProps extends BoxProps, CardStyleProps_2 {
   /**
    * Do not use in production.
    * @beta
@@ -660,18 +677,18 @@ export declare type ClickOutsideListener = (event: MouseEvent) => void
  * @public
  */
 export declare const Code: ForwardRefExoticComponent<
-  Omit<CodeProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> & RefAttributes<HTMLElement>
+  Omit<CodeProps & Omit<HTMLProps<HTMLPreElement>, 'size' | 'as'>, 'ref'> &
+    RefAttributes<HTMLPreElement>
 >
 
 /**
  * @public
  */
-export declare interface CodeProps {
+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[]
-  weight?: string
 }
 
 /**
@@ -680,7 +697,11 @@ export declare interface CodeProps {
  */
 export declare const CodeSkeleton: ForwardRefExoticComponent<
   Omit<
-    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'children' | 'size' | 'as'>,
+    CodeSkeletonProps &
+      Omit<
+        HTMLProps<HTMLDivElement>,
+        'height' | 'width' | 'size' | 'wrap' | 'children' | 'as' | 'rows'
+      >,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -691,7 +712,7 @@ export declare const CodeSkeleton: ForwardRefExoticComponent<
  * @beta
  */
 export declare interface CodeSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+  size?: ResponsiveProp<FontCodeSize>
 }
 
 /**
@@ -725,7 +746,7 @@ export declare const Container: ForwardRefExoticComponent<
 /**
  * @public
  */
-export declare interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
+export declare interface ContainerProps extends Omit<BoxProps, 'width'>, ContainerStyleProps {}
 
 /**
  * @internal
@@ -754,7 +775,11 @@ export declare type Delay =
  * @public
  */
 export declare const Dialog: ForwardRefExoticComponent<
-  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'width' | 'as'>, 'ref'> &
+  Omit<
+    DialogProps &
+      Omit<HTMLProps<HTMLDivElement>, 'id' | 'height' | 'width' | 'wrap' | 'as' | 'rows'>,
+    'ref'
+  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -781,7 +806,7 @@ export declare type DialogPosition = 'absolute' | 'fixed'
 /**
  * @public
  */
-export declare interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
+export declare interface DialogProps extends PaddingStyleProps, ContainerStyleProps {
   /**
    * @beta
    */
@@ -790,6 +815,13 @@ export declare interface DialogProps extends ResponsivePaddingProps, ResponsiveW
    * @beta
    */
   __unstable_hideCloseButton?: boolean
+  /**
+   * Whether the dialog should animate in on mount.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
   cardRadius?: Radius | Radius[]
   cardShadow?: number | number[]
   contentRef?: React.ForwardedRef<HTMLDivElement>
@@ -804,13 +836,6 @@ export declare interface DialogProps extends ResponsivePaddingProps, ResponsiveW
   position?: DialogPosition | DialogPosition[]
   scheme?: ThemeColorSchemeKey_2
   zOffset?: number | number[]
-  /**
-   * Whether the dialog should animate in on mount.
-   *
-   * @beta
-   * @defaultValue false
-   */
-  animate?: boolean
 }
 
 /**
@@ -929,48 +954,20 @@ export declare const Flex: ForwardRefExoticComponent<
     RefAttributes<HTMLDivElement>
 >
 
-/**
- * @public
- */
-export declare type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
+export {FlexAlign}
 
-/**
- * @public
- */
-export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+export {FlexDirection}
 
-/**
- * @public
- */
-export declare type FlexJustify =
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly'
+export {FlexJustify}
 
 /**
  * @public
  */
-export declare interface FlexProps
-  extends Omit<BoxProps, 'display'>,
-    ResponsiveFlexProps,
-    ResponsiveFlexItemProps {
-  gap?: number | number[]
-  gapX?: number | number[]
-  gapY?: number | number[]
-}
+export declare interface FlexProps extends Omit<BoxProps, 'display'> {}
 
-/**
- * @public
- */
-export declare type FlexValue = number | 'none' | 'auto' | 'initial'
+export {FlexValue}
 
-/**
- * @public
- */
-export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
+export {FlexWrap}
 
 /**
  * @internal
@@ -1013,55 +1010,28 @@ export declare const Grid: ForwardRefExoticComponent<
     RefAttributes<HTMLDivElement>
 >
 
-/**
- * @public
- */
-export declare type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
+export {GridAutoCols}
 
-/**
- * @public
- */
-export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
+export {GridAutoFlow}
 
-/**
- * @public
- */
-export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+export {GridAutoRows}
 
-/**
- * @public
- */
-export declare type GridItemColumn = 'auto' | 'full' | number
+export {GridItemColumn}
 
-/**
- * @public
- */
-export declare type GridItemColumnEnd = 'auto' | number
+export {GridItemColumnEnd}
 
-/**
- * @public
- */
-export declare type GridItemColumnStart = 'auto' | number
+export {GridItemColumnStart}
 
-/**
- * @public
- */
-export declare type GridItemRow = 'auto' | 'full' | number
+export {GridItemRow}
 
-/**
- * @public
- */
-export declare type GridItemRowEnd = 'auto' | number
+export {GridItemRowEnd}
 
-/**
- * @public
- */
-export declare type GridItemRowStart = 'auto' | number
+export {GridItemRowStart}
 
 /**
  * @public
  */
-export declare interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
+export declare interface GridProps extends Omit<BoxProps, 'display'> {}
 
 /**
  * @internal
@@ -1081,19 +1051,17 @@ export declare const Heading: ForwardRefExoticComponent<
 /**
  * @public
  */
-export declare interface HeadingProps {
+export declare interface HeadingProps extends FontStyleProps {
   accent?: boolean
-  align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
   muted?: boolean
-  size?: number | number[]
+  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' | 'none'
-  weight?: ThemeFontWeightKey_2
+  textOverflow?: 'ellipsis'
 }
 
 /**
@@ -1102,7 +1070,11 @@ export declare interface HeadingProps {
  */
 export declare const HeadingSkeleton: ForwardRefExoticComponent<
   Omit<
-    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'children' | 'size' | 'as'>,
+    HeadingSkeletonProps &
+      Omit<
+        HTMLProps<HTMLDivElement>,
+        'height' | 'width' | 'size' | 'wrap' | 'children' | 'as' | 'rows'
+      >,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1113,7 +1085,7 @@ export declare const HeadingSkeleton: ForwardRefExoticComponent<
  * @beta
  */
 export declare interface HeadingSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+  size?: ResponsiveProp<FontHeadingSize>
 }
 
 /**
@@ -1128,17 +1100,21 @@ export declare const hexToRgb: typeof hexToRgb_2
  * @public
  */
 export declare const Hotkeys: ForwardRefExoticComponent<
-  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLElement>
+  HotkeysProps &
+    Omit<
+      HTMLProps<HTMLDivElement>,
+      'display' | 'height' | 'width' | 'size' | 'wrap' | 'ref' | 'as' | 'rows'
+    > &
+    RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface HotkeysProps {
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
-  space?: number | number[]
+export declare interface HotkeysProps extends RadiusStyleProps {
+  fontSize?: ResponsiveProp<FontTextSize>
+  padding?: ResponsiveProp<Space>
+  space?: ResponsiveProp<Space>
   keys?: string[]
 }
 
@@ -1160,15 +1136,16 @@ export declare const hslToRgb: typeof hslToRgb_2
  * @public
  */
 export declare const Inline: ForwardRefExoticComponent<
-  Omit<InlineProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
+  Omit<InlineProps & Omit<HTMLProps<HTMLDivElement>, 'wrap'>, 'ref'> & RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface InlineProps extends Omit<BoxProps, 'display'> {
+export declare interface InlineProps
+  extends Omit<BoxProps, 'align' | 'display' | 'gap' | 'gapX' | 'gapY' | 'justify'> {
   /** The spacing between children. */
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
 }
 
 /**
@@ -1228,11 +1205,10 @@ export declare const KBD: ForwardRefExoticComponent<
 /**
  * @public
  */
-export declare interface KBDProps {
+export declare interface KBDProps extends BoxProps, RadiusStyleProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
-  fontSize?: number | number[]
-  padding?: number | number[]
-  radius?: Radius | Radius[]
+  fontSize?: ResponsiveProp<FontTextSize>
+  padding?: ResponsiveProp<Space>
 }
 
 /**
@@ -1248,9 +1224,8 @@ export declare const Label: ForwardRefExoticComponent<
 /**
  * @public
  */
-export declare interface LabelProps {
+export declare interface LabelProps extends FontStyleProps {
   accent?: boolean
-  align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
   muted?: boolean
   size?: number | number[]
@@ -1269,7 +1244,11 @@ export declare interface LabelProps {
  */
 export declare const LabelSkeleton: ForwardRefExoticComponent<
   Omit<
-    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'children' | 'size' | 'as'>,
+    LabelSkeletonProps &
+      Omit<
+        HTMLProps<HTMLDivElement>,
+        'height' | 'width' | 'size' | 'wrap' | 'children' | 'as' | 'rows'
+      >,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -1280,14 +1259,15 @@ export declare const LabelSkeleton: ForwardRefExoticComponent<
  * @beta
  */
 export declare interface LabelSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+  size?: ResponsiveProp<FontLabelSize>
 }
 
 /**
  * @public
  */
 export declare const Layer: ForwardRefExoticComponent<
-  Omit<LayerProps & Omit<HTMLProps<HTMLDivElement>, 'as'>, 'ref'> & RefAttributes<HTMLDivElement>
+  Omit<LayerProps & Omit<HTMLProps<HTMLDivElement>, 'width' | 'wrap' | 'as' | 'rows'>, 'ref'> &
+    RefAttributes<HTMLDivElement>
 >
 
 /** @public */
@@ -1303,8 +1283,7 @@ export declare interface LayerContextValue {
 /**
  * @public
  */
-export declare interface LayerProps {
-  as?: React.ElementType | keyof JSX.IntrinsicElements
+export declare interface LayerProps extends BoxProps {
   /** 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[]
@@ -1350,7 +1329,14 @@ export declare interface _MediaStore {
  * @public
  */
 export declare const Menu: ForwardRefExoticComponent<
-  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'role' | 'tabIndex' | 'as'>, 'ref'> &
+  Omit<
+    MenuProps &
+      Omit<
+        HTMLProps<HTMLDivElement>,
+        'height' | 'width' | 'wrap' | 'role' | 'tabIndex' | 'as' | 'rows'
+      >,
+    'ref'
+  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -1407,17 +1393,18 @@ export declare interface MenuButtonProps {
 /**
  * @public
  */
-export declare const MenuDivider: IStyledComponentBase<
-  'web',
-  FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>
-> &
-  string
+export declare const MenuDivider: ForwardRefExoticComponent<
+  Omit<HTMLProps<HTMLHRElement>, 'ref'> & RefAttributes<HTMLHRElement>
+>
 
 /**
  * @public
  */
 export declare function MenuGroup(
-  props: Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'popover' | 'ref' | 'tabIndex'> &
+  props: Omit<
+    React.HTMLProps<HTMLDivElement>,
+    'as' | 'height' | 'popover' | 'ref' | 'rows' | 'tabIndex' | 'width' | 'wrap'
+  > &
     MenuGroupProps,
 ): React.ReactElement
 
@@ -1435,7 +1422,7 @@ export declare interface MenuGroupProps {
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'open'>
   radius?: Radius | Radius[]
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
   text: React.ReactNode
   tone?: SelectableTone
 }
@@ -1445,14 +1432,17 @@ export declare interface MenuGroupProps {
  */
 export declare const MenuItem: ForwardRefExoticComponent<
   MenuItemProps &
-    Omit<HTMLProps<HTMLDivElement>, 'selected' | 'height' | 'tabIndex' | 'ref' | 'as'> &
+    Omit<
+      HTMLProps<HTMLDivElement>,
+      'selected' | 'height' | 'width' | 'wrap' | 'tabIndex' | 'ref' | 'as' | 'rows'
+    > &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
+export declare interface MenuItemProps extends PaddingStyleProps, RadiusStyleProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
   hotkeys?: string[]
@@ -1460,7 +1450,7 @@ export declare interface MenuItemProps extends ResponsivePaddingProps, Responsiv
   iconRight?: React.ElementType | React.ReactNode
   pressed?: boolean
   selected?: boolean
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
   text?: React.ReactNode
   tone?: SelectableTone
 }
@@ -1468,7 +1458,7 @@ export declare interface MenuItemProps extends ResponsivePaddingProps, Responsiv
 /**
  * @public
  */
-export declare interface MenuProps extends ResponsivePaddingProps {
+export declare interface MenuProps extends PaddingStyleProps {
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -1484,7 +1474,7 @@ export declare interface MenuProps extends ResponsivePaddingProps {
   originElement?: HTMLElement | null
   registerElement?: (el: HTMLElement) => () => void
   shouldFocus?: 'first' | 'last' | null
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
 }
 
 /**
@@ -1528,7 +1518,11 @@ export declare type Placement =
 export declare const Popover: MemoExoticComponent<
   ForwardRefExoticComponent<
     Omit<
-      PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'children' | 'as'>,
+      PopoverProps &
+        Omit<
+          HTMLProps<HTMLDivElement>,
+          'content' | 'height' | 'width' | 'wrap' | 'children' | 'as' | 'rows'
+        >,
       'ref'
     > &
       RefAttributes<HTMLDivElement>
@@ -1542,8 +1536,8 @@ export declare type PopoverMargins = [number, number, number, number]
 
 /** @public */
 export declare interface PopoverProps
-  extends Omit<LayerProps, 'as'>,
-    ResponsiveRadiusProps,
+  extends Omit<LayerProps, 'width'>,
+    RadiusStyleProps,
     ResponsiveShadowProps {
   /** @beta */
   __unstable_margins?: PopoverMargins
@@ -1666,6 +1660,11 @@ export declare interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
+/**
+ * @public
+ */
+export declare function px(pixelValue: number): string | 0
+
 /**
  * The `Radio` component allows the user to select one option from a set.
  *
@@ -1683,10 +1682,7 @@ export declare interface RadioProps {
   customValidity?: string
 }
 
-/**
- * @public
- */
-export declare type Radius = number | 'full'
+export {Radius}
 
 /**
  * @internal
@@ -1726,6 +1722,7 @@ export declare interface ResponsiveAvatarSizeStyleProps {
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ResponsiveBorderProps {
   border?: boolean | boolean[]
@@ -1737,6 +1734,7 @@ export declare interface ResponsiveBorderProps {
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ResponsiveBoxProps {
   display?: BoxDisplay | BoxDisplay[]
@@ -1755,6 +1753,7 @@ export declare function responsiveCodeFontStyle(
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ResponsiveFlexItemProps {
   /** Sets the flex CSS attribute. The property is responsive. */
@@ -1763,6 +1762,7 @@ export declare interface ResponsiveFlexItemProps {
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ResponsiveFlexProps {
   align?: FlexAlign | FlexAlign[]
@@ -1791,6 +1791,7 @@ export declare interface ResponsiveFontStyleProps
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ResponsiveGridItemProps {
   column?: GridItemColumn | GridItemColumn[]
@@ -1803,15 +1804,13 @@ 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[]
 }
 
@@ -1833,6 +1832,7 @@ export declare function responsiveLabelFont(
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ResponsiveMarginProps {
   /** Applies margins to all sides. The property is responsive. */
@@ -1849,6 +1849,7 @@ export declare interface ResponsiveMarginProps {
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ResponsivePaddingProps {
   padding?: number | number[]
@@ -1862,6 +1863,7 @@ export declare interface ResponsivePaddingProps {
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ResponsiveRadiusProps {
   radius?: Radius | Radius[]
@@ -1869,6 +1871,7 @@ export declare interface ResponsiveRadiusProps {
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ResponsiveShadowProps {
   shadow?: number | number[]
@@ -1899,6 +1902,7 @@ export declare function responsiveTextFont(
 
 /**
  * @public
+ * @deprecated
  */
 export declare interface ResponsiveWidthProps {
   width?: number | 'auto' | (number | 'auto')[]
@@ -1979,14 +1983,18 @@ export declare interface SelectProps {
  * @beta
  */
 export declare const Skeleton: ForwardRefExoticComponent<
-  Omit<SkeletonProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<HTMLDivElement>
+  Omit<
+    SkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'wrap' | 'as' | 'rows'>,
+    'ref'
+  > &
+    RefAttributes<HTMLDivElement>
 >
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export declare interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
+export declare interface SkeletonProps extends SkeletonStyleProps, Omit<BoxProps, 'children'> {
   animated?: boolean
   delay?: number
 }
@@ -2006,7 +2014,7 @@ export declare const Spinner: ForwardRefExoticComponent<
  */
 export declare interface SpinnerProps {
   muted?: boolean
-  size?: number | number[]
+  size?: ResponsiveProp<FontTextSize>
 }
 
 /**
@@ -2031,15 +2039,18 @@ export declare interface SrOnlyProps {
  * @public
  */
 export declare const Stack: ForwardRefExoticComponent<
-  StackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
+  StackProps &
+    Omit<HTMLProps<HTMLDivElement>, 'width' | 'ref' | 'as'> &
+    RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface StackProps extends BoxProps {
+export declare interface StackProps
+  extends Omit<BoxProps, 'direction' | 'display' | 'gap' | 'gapX' | 'gapY'> {
   as?: React.ElementType | keyof JSX.IntrinsicElements
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
 }
 
 /**
@@ -2093,7 +2104,7 @@ export declare const Tab: ForwardRefExoticComponent<
  */
 export declare const TabList: ForwardRefExoticComponent<
   Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
-    RefAttributes<unknown>
+    RefAttributes<HTMLDivElement>
 >
 
 /**
@@ -2136,7 +2147,7 @@ export declare interface TabProps {
   'id': string
   'icon'?: React.ElementType | React.ReactNode
   'focused'?: boolean
-  'fontSize'?: number | number[]
+  'fontSize'?: ResponsiveProp<FontTextSize>
   'label'?: React.ReactNode
   'padding'?: number | number[]
   'selected'?: boolean
@@ -2154,10 +2165,7 @@ declare const Text_2: ForwardRefExoticComponent<
 >
 export {Text_2 as Text}
 
-/**
- * @public
- */
-export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
+export {TextAlign}
 
 /**
  * A multiline text input.
@@ -2191,7 +2199,7 @@ export declare interface TextAreaProps extends ResponsiveRadiusProps {
  * @public
  */
 export declare const TextInput: ForwardRefExoticComponent<
-  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'prefix' | 'as'>, 'ref'> &
+  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'as' | 'prefix'>, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
@@ -2204,7 +2212,7 @@ export declare type TextInputClearButtonProps = Omit<ButtonProps, 'as'> &
 /**
  * @public
  */
-export declare interface TextInputProps {
+export declare interface TextInputProps extends RadiusStyleProps {
   /**
    * @beta
    */
@@ -2215,17 +2223,16 @@ export declare interface TextInputProps {
    */
   clearButton?: boolean | TextInputClearButtonProps
   customValidity?: string
-  fontSize?: number | number[]
+  fontSize?: ResponsiveProp<FontTextSize>
   icon?: React.ElementType | React.ReactNode
   iconRight?: React.ElementType | React.ReactNode
   /**
    * @beta
    */
   onClear?: () => void
-  padding?: number | number[]
+  padding?: ResponsiveProp<Space>
   prefix?: React.ReactNode
-  radius?: Radius | Radius[]
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey_2
@@ -2251,13 +2258,11 @@ export declare type TextInputType =
 /**
  * @public
  */
-export declare interface TextProps {
+export declare interface TextProps extends TextStyleProps {
   accent?: boolean
-  align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof 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.
@@ -2273,7 +2278,11 @@ export declare interface TextProps {
  */
 export declare const TextSkeleton: ForwardRefExoticComponent<
   Omit<
-    TextSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'children' | 'size' | 'as'>,
+    TextSkeletonProps &
+      Omit<
+        HTMLProps<HTMLDivElement>,
+        'height' | 'width' | 'size' | 'wrap' | 'children' | 'as' | 'rows'
+      >,
     'ref'
   > &
     RefAttributes<HTMLDivElement>
@@ -2284,7 +2293,7 @@ export declare const TextSkeleton: ForwardRefExoticComponent<
  * @beta
  */
 export declare interface TextSkeletonProps extends SkeletonProps {
-  size?: number | number[]
+  size?: ResponsiveProp<FontTextSize>
 }
 
 /**
@@ -2478,7 +2487,11 @@ export declare type ThemeShadow = ThemeShadow_2
  * @public
  */
 export declare function Toast(
-  props: ToastProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'ref' | 'title'>,
+  props: ToastProps &
+    Omit<
+      React.HTMLProps<HTMLDivElement>,
+      'as' | 'height' | 'ref' | 'rows' | 'title' | 'width' | 'wrap'
+    >,
 ): React.ReactElement
 
 export declare namespace Toast {
@@ -2509,11 +2522,10 @@ export declare interface ToastParams {
 /**
  * @public
  */
-export declare interface ToastProps {
+export declare interface ToastProps extends RadiusStyleProps {
   closable?: boolean
   description?: React.ReactNode
   onClose?: () => void
-  radius?: number | number[]
   title?: React.ReactNode
   status?: 'error' | 'warning' | 'success' | 'info'
   duration?: number
@@ -2545,7 +2557,11 @@ export declare interface ToastProviderProps {
  * @public
  */
 export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'children' | 'as'>, 'ref'> &
+  Omit<
+    TooltipProps &
+      Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'wrap' | 'children' | 'as'>,
+    'ref'
+  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -2599,7 +2615,7 @@ export declare interface TooltipDelayGroupProviderProps {
 /**
  * @public
  */
-export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
+export declare interface TooltipProps extends Omit<LayerProps, 'as'>, RadiusStyleProps {
   /** @deprecated Use `fallbackPlacements` instead. */
   allowedAutoPlacements?: Placement[]
   arrow?: boolean
@@ -2612,7 +2628,6 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
   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[]
   /**
@@ -2642,7 +2657,10 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
 export declare const Tree: MemoExoticComponent<
   ForwardRefExoticComponent<
     TreeProps &
-      Omit<HTMLProps<HTMLDivElement>, 'height' | 'role' | 'wrap' | 'ref' | 'as' | 'align'> &
+      Omit<
+        HTMLProps<HTMLDivElement>,
+        'height' | 'width' | 'wrap' | 'role' | 'ref' | 'as' | 'rows' | 'align'
+      > &
       RefAttributes<HTMLDivElement>
   >
 >
@@ -2658,7 +2676,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: number | number[]
+  space: ResponsiveProp<Space>
   state: TreeState
 }
 
@@ -2667,7 +2685,8 @@ export declare interface TreeContextValue {
  * @beta
  */
 export declare const TreeItem: NamedExoticComponent<
-  TreeItemProps & Omit<HTMLProps<HTMLLIElement>, 'role' | 'ref' | 'as'>
+  TreeItemProps &
+    Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'wrap' | 'role' | 'ref' | 'as' | 'rows'>
 >
 
 /**
@@ -2682,7 +2701,7 @@ export declare interface TreeItemProps {
    */
   linkAs?: BoxProps['as']
   padding?: number | number[]
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
   text?: React.ReactNode
   weight?: ThemeFontWeightKey_2
 }
@@ -2692,7 +2711,7 @@ export declare interface TreeItemProps {
  * @beta
  */
 export declare interface TreeProps {
-  space?: number | number[]
+  space?: ResponsiveProp<Space>
 }
 
 /**