@sanity/ui 3.0.0-static.8 → 3.0.0

package/dist/_visual-editing.d.mts

@@ -1,45 +1,21 @@
-import {BoxStyleProps} from '@sanity/ui/css'
-import {ButtonStyleProps} from '@sanity/ui/css'
-import {CardStyleProps} from '@sanity/ui/css'
-import type {ComponentProps} from 'react'
-import {DisplayStyleProps} from '@sanity/ui/css'
-import {ElementProps} from '../..'
-import {ElementType} from 'react'
-import {FlexStyleProps} from '@sanity/ui/css'
-import {FontTextSize} from '@sanity/ui/theme'
-import {ForwardedRef} from 'react'
+import {BaseTheme} from '@sanity/ui/theme'
+import {DetailedHTMLProps} from 'react'
+import {FastOmit} from 'styled-components'
 import {ForwardRefExoticComponent} from 'react'
-import {GapStyleProps} from '@sanity/ui/css'
-import {InputStyleProps} from '@sanity/ui/css'
-import {InsetStyleProps} from '@sanity/ui/css'
+import {HTMLAttributes} from 'react'
+import {HTMLProps} from 'react'
+import {IStyledComponentBase} from 'styled-components/dist/types'
 import {MutableRefObject} from 'react'
 import {NamedExoticComponent} from 'react'
-import {PaddingStyleProps} from '@sanity/ui/css'
-import {PolymorphicProps} from '../..'
-import {PositionStyleProps} 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 {RefAttributes} from 'react'
 import {RefCallback} from 'react'
-import {ResponsiveProp} from '@sanity/ui/css'
 import {RootTheme} from '@sanity/ui/theme'
-import {ShadowStyleProps} from '@sanity/ui/css'
-import {Space} from '@sanity/ui/theme'
-import {TextOverflowStyleProps} from '@sanity/ui/css'
-import {TextStyleProps} from '@sanity/ui/css'
 import {Theme_v2} from '@sanity/ui/theme'
 import {ThemeColorButtonModeKey} from '@sanity/ui/theme'
 import {ThemeColorCardToneKey} from '@sanity/ui/theme'
 import {ThemeColorSchemeKey} from '@sanity/ui/theme'
 import {ThemeColorStateToneKey} from '@sanity/ui/theme'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
-import {Width} from '@sanity/ui/css'
-
-/** @public */
-declare type Assign<T, U> = Omit<T, keyof U> & U
 
 /**
  * The `Box` component is a basic layout wrapper component which provides utility properties
@@ -48,64 +24,79 @@ declare type Assign<T, U> = Omit<T, keyof U> & U
  * @public
  */
 export declare const Box: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof BoxProps> &
-    BoxProps &
+  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface BoxProps
-  extends BoxStyleProps,
-    GapStyleProps,
-    InsetStyleProps,
-    PositionStyleProps {}
+declare type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'
+
+/**
+ * @public
+ */
+declare type BoxHeight = 'stretch' | 'fill'
+
+/**
+ * @public
+ */
+declare type BoxOverflow = 'visible' | 'hidden' | 'auto'
+
+/**
+ * @public
+ */
+declare interface BoxProps
+  extends ResponsiveFlexItemProps,
+    ResponsiveBoxProps,
+    ResponsiveGridItemProps,
+    ResponsiveMarginProps,
+    ResponsivePaddingProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
+}
+
+/**
+ * @public
+ */
+declare type BoxSizing = 'content' | 'border'
 
 /**
  * @public
  */
 export declare const Button: ForwardRefExoticComponent<
-  Omit<ElementProps<'button'> & PolymorphicProps, keyof ButtonProps> &
-    ButtonProps &
+  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'width' | 'as'>, 'ref'> &
     RefAttributes<HTMLButtonElement>
 >
 
 /**
  * @public
- * @deprecated Use `ThemeColorButtonModeKey` instead
  */
 declare type ButtonMode = ThemeColorButtonModeKey
 
 /**
  * @public
  */
-export declare interface ButtonProps
-  extends ButtonStyleProps,
-    DisplayStyleProps,
-    FlexStyleProps,
-    GapStyleProps,
-    PaddingStyleProps {
-  'data-ui'?: string
-  'fontSize'?: ResponsiveProp<FontTextSize>
-  'href'?: string
-  'mode'?: ButtonMode
-  'icon'?: ElementType | ReactNode
-  'iconRight'?: ElementType | ReactNode
-  /** @beta Do not use in production, as this might change.*/
-  'loading'?: boolean
-  'selected'?: boolean
-  /** @deprecated Use `gap` instead. */
-  'space'?: ResponsiveProp<Space>
-  'textAlign'?: ButtonTextAlign
-  'muted'?: boolean
-  'target'?: string
-  'text'?: ReactNode
-  'textOverflow'?: TextProps['textOverflow']
-  'textWeight'?: TextProps['weight']
-  'tone'?: ButtonTone
-  'type'?: 'button' | 'reset' | 'submit'
-  'width'?: ResponsiveProp<Width>
+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
+  tone?: ButtonTone
+  type?: 'button' | 'reset' | 'submit'
+  width?: ButtonWidth
 }
 
 /**
@@ -115,10 +106,14 @@ declare type ButtonTextAlign = 'left' | 'right' | 'center'
 
 /**
  * @public
- * @deprecated Use `ThemeColorStateToneKey` instead
  */
 declare type ButtonTone = ThemeColorStateToneKey
 
+/**
+ * @public
+ */
+declare type ButtonWidth = 'fill'
+
 /**
  * The `Card` component acts much like a `Box`, but with a background and foreground color.
  * Components within a `Card` inherit its colors.
@@ -126,15 +121,18 @@ declare type ButtonTone = ThemeColorStateToneKey
  * @public
  */
 export declare const Card: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof CardProps> &
-    CardProps &
+  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface CardProps extends BoxProps, CardStyleProps {
+declare interface CardProps
+  extends BoxProps,
+    ResponsiveBorderProps,
+    ResponsiveRadiusProps,
+    ResponsiveShadowProps {
   /**
    * Do not use in production.
    * @beta
@@ -145,13 +143,17 @@ export declare interface CardProps extends BoxProps, CardStyleProps {
    * @beta
    */
   __unstable_focusRing?: boolean
-  disabled?: boolean
-  href?: string
+  muted?: boolean
   pressed?: boolean
-  selected?: boolean
-  target?: string
+  scheme?: ThemeColorSchemeKey
+  tone?: CardTone
 }
 
+/**
+ * @public
+ */
+declare type CardTone = ThemeColorCardToneKey | 'inherit'
+
 /**
  * @public
  */
@@ -162,42 +164,116 @@ declare type Delay =
       close: number
     }>
 
-/** @public */
-declare type ElementProps_2<E extends ElementType> = Omit<ComponentProps<E>, 'as' | 'ref'>
-
 /**
  * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
  *
  * @public
  */
 export declare const Flex: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof FlexProps> &
-    FlexProps &
+  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'wrap' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface FlexProps extends Omit<BoxProps, 'display'> {
-  htmlFor?: string
+declare type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'
+
+/**
+ * @public
+ */
+declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+
+/**
+ * @public
+ */
+declare type FlexJustify =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+
+/**
+ * @public
+ */
+declare interface FlexProps
+  extends Omit<BoxProps, 'display'>,
+    ResponsiveFlexProps,
+    ResponsiveFlexItemProps {
+  gap?: number | number[]
 }
 
+/**
+ * @public
+ */
+declare type FlexValue = number | 'none' | 'auto' | 'initial'
+
+/**
+ * @public
+ */
+declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'
+
 /**
  * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
  *
  * @public
  */
 export declare const Grid: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof GridProps> &
-    GridProps &
+  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface GridProps extends Omit<BoxProps, 'display'> {}
+declare type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
+
+/**
+ * @public
+ */
+declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ */
+declare type GridItemColumn = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+declare type GridItemColumnEnd = 'auto' | number
+
+/**
+ * @public
+ */
+declare type GridItemColumnStart = 'auto' | number
+
+/**
+ * @public
+ */
+declare type GridItemRow = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+declare type GridItemRowEnd = 'auto' | number
+
+/**
+ * @public
+ */
+declare type GridItemRowStart = 'auto' | number
+
+/**
+ * @public
+ */
+declare interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
 
 /**
  * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
@@ -205,28 +281,26 @@ export declare interface GridProps extends Omit<BoxProps, 'display'> {}
  * @public
  */
 export declare const Hotkeys: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, 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>
+declare interface HotkeysProps {
+  fontSize?: number | number[]
+  padding?: number | number[]
+  radius?: Radius | Radius[]
+  space?: number | number[]
   keys?: string[]
 }
 
 /**
  * @public
  */
-declare interface InlineProps extends Omit<BoxProps, 'align' | 'display' | 'justify'> {
-  /** @deprecated Use `gap` instead. */
-  space?: ResponsiveProp<Space>
+declare interface InlineProps extends Omit<BoxProps, 'display'> {
+  /** The spacing between children. */
+  space?: number | number[]
 }
 
 /**
@@ -242,7 +316,8 @@ export declare function isHTMLElement(node: unknown): node is HTMLElement
 /**
  * @public
  */
-declare interface LayerProps extends BoxProps {
+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[]
@@ -251,7 +326,7 @@ 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
@@ -261,7 +336,7 @@ export declare namespace LayerProvider {
  * @public
  */
 declare interface LayerProviderProps {
-  children?: ReactNode
+  children?: React.ReactNode
   zOffset?: number | number[]
 }
 
@@ -271,27 +346,26 @@ declare interface LayerProviderProps {
  * @public
  */
 export declare const Menu: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof MenuProps> &
-    MenuProps &
+  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'role' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare const MenuDivider: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, never> &
-    MenuDividerProps &
-    RefAttributes<HTMLHRElement>
->
-
-/** @public */
-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
@@ -300,10 +374,10 @@ export declare namespace MenuGroup {
 /**
  * @public
  */
-export declare interface MenuGroupProps extends GapStyleProps {
-  disabled?: boolean
-  fontSize?: ResponsiveProp<FontTextSize>
-  icon?: ElementType | ReactNode
+declare interface MenuGroupProps {
+  as?: React.ElementType | keyof React.JSX.IntrinsicElements
+  fontSize?: number | number[]
+  icon?: React.ElementType | React.ReactNode
   menu?: Omit<
     MenuProps,
     | 'onClickOutside'
@@ -315,12 +389,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
 }
 
@@ -328,32 +401,31 @@ export declare interface MenuGroupProps extends GapStyleProps {
  * @public
  */
 export declare const MenuItem: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, 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'> {
+declare interface MenuProps extends ResponsivePaddingProps {
   /**
    * @deprecated Use `shouldFocus="first"` instead.
    */
@@ -369,9 +441,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
 }
 
 /**
@@ -393,18 +465,16 @@ declare type Placement =
   | 'left-start'
   | 'left-end'
 
-declare interface PolymorphicProps_2 {
-  as?: ElementType
-}
-
 /**
  * The `Popover` component is used to display some content on top of another.
  *
  * @public
  */
 export declare const Popover: NamedExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof PopoverProps> &
-    PopoverProps &
+  Omit<
+    PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'children' | 'as'>,
+    'ref'
+  > &
     RefAttributes<HTMLDivElement>
 >
 
@@ -414,7 +484,10 @@ export declare const Popover: NamedExoticComponent<
 export declare type PopoverMargins = [number, number, number, number]
 
 /** @public */
-export declare interface PopoverProps extends CardProps, LayerProps {
+declare interface PopoverProps
+  extends Omit<LayerProps, 'as'>,
+    ResponsiveRadiusProps,
+    ResponsiveShadowProps {
   /** @beta */
   __unstable_margins?: PopoverMargins
   /**
@@ -427,22 +500,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
@@ -463,7 +534,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
@@ -473,19 +556,25 @@ export declare interface PopoverProps extends CardProps, LayerProps {
    * The children of the popover won't be rendered.
    */
   referenceElement?: HTMLElement | null
+  scheme?: ThemeColorSchemeKey
+  tone?: CardTone
   /** @beta */
   updateRef?:
     | MutableRefObject<PopoverUpdateCallback | undefined>
     | RefCallback<PopoverUpdateCallback | undefined>
+  width?: PopoverWidth | PopoverWidth[]
 }
 
 /** @beta */
 declare type PopoverUpdateCallback = () => void
 
+/** @public */
+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
@@ -494,8 +583,8 @@ export declare namespace Portal {
 /**
  * @public
  */
-export declare interface PortalProps {
-  children: ReactNode
+declare interface PortalProps {
+  children: React.ReactNode
   /**
    * @beta This API might change. DO NOT USE IN PRODUCTION.
    */
@@ -505,7 +594,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
@@ -514,12 +603,12 @@ export declare namespace PortalProvider {
 /**
  * @public
  */
-export declare interface PortalProviderProps {
+declare interface PortalProviderProps {
   /**
    * @deprecated Use `<BoundaryElementProvider element={...} />` instead
    */
   boundaryElement?: HTMLElement | null
-  children: ReactNode
+  children: React.ReactNode
   element?: HTMLElement | null
   /**
    * @beta
@@ -527,15 +616,121 @@ export declare interface PortalProviderProps {
   __unstable_elements?: Record<string, HTMLElement | null | undefined>
 }
 
-/** @public */
-declare type Props<P extends {} = {}, E extends ElementType = ElementType> = Assign<
-  ElementProps_2<E> & PolymorphicProps_2,
-  P
->
+/**
+ * @public
+ */
+declare type Radius = number | 'full'
+
+/**
+ * @public
+ */
+declare interface ResponsiveBorderProps {
+  border?: boolean | boolean[]
+  borderTop?: boolean | boolean[]
+  borderRight?: boolean | boolean[]
+  borderBottom?: boolean | boolean[]
+  borderLeft?: boolean | boolean[]
+}
+
+/**
+ * @public
+ */
+declare interface ResponsiveBoxProps {
+  display?: BoxDisplay | BoxDisplay[]
+  height?: BoxHeight | BoxHeight[]
+  overflow?: BoxOverflow | BoxOverflow[]
+  sizing?: BoxSizing | BoxSizing[]
+}
+
+/**
+ * @public
+ */
+declare interface ResponsiveFlexItemProps {
+  /** Sets the flex CSS attribute. The property is responsive. */
+  flex?: FlexValue | FlexValue[]
+}
+
+/**
+ * @public
+ */
+declare interface ResponsiveFlexProps {
+  align?: FlexAlign | FlexAlign[]
+  direction?: FlexDirection | FlexDirection[]
+  justify?: FlexJustify | FlexJustify[]
+  wrap?: FlexWrap | FlexWrap[]
+}
+
+/**
+ * @public
+ */
+declare interface ResponsiveGridItemProps {
+  column?: GridItemColumn | GridItemColumn[]
+  columnStart?: GridItemColumnStart | GridItemColumnStart[]
+  columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
+  row?: GridItemRow | GridItemRow[]
+  rowStart?: GridItemRowStart | GridItemRowStart[]
+  rowEnd?: GridItemRowEnd | GridItemRowEnd[]
+}
+
+/**
+ * @public
+ */
+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[]
+}
+
+/**
+ * @public
+ */
+declare interface ResponsiveMarginProps {
+  /** Applies margins to all sides. The property is responsive. */
+  margin?: number | number[]
+  /** Applies margins to the left and right sides. The property is responsive. */
+  marginX?: number | number[]
+  /** Applies margins to the top and bottom sides. The property is responsive. */
+  marginY?: number | number[]
+  marginTop?: number | number[]
+  marginRight?: number | number[]
+  marginBottom?: number | number[]
+  marginLeft?: number | number[]
+}
+
+/**
+ * @public
+ */
+declare interface ResponsivePaddingProps {
+  padding?: number | number[]
+  paddingX?: number | number[]
+  paddingY?: number | number[]
+  paddingTop?: number | number[]
+  paddingRight?: number | number[]
+  paddingBottom?: number | number[]
+  paddingLeft?: number | number[]
+}
+
+/**
+ * @public
+ */
+declare interface ResponsiveRadiusProps {
+  radius?: Radius | Radius[]
+}
+
+/**
+ * @public
+ */
+declare interface ResponsiveShadowProps {
+  shadow?: number | number[]
+}
 
 /**
  * @public
- * @deprecated Use `ThemeColorStateToneKey` instead
  */
 declare type SelectableTone = ThemeColorStateToneKey
 
@@ -545,17 +740,16 @@ declare type SelectableTone = ThemeColorStateToneKey
  * @public
  */
 export declare const Spinner: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof SpinnerProps> &
-    SpinnerProps &
+  Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface SpinnerProps {
+declare interface SpinnerProps {
   muted?: boolean
-  size?: ResponsiveProp<FontTextSize>
+  size?: number | number[]
 }
 
 /**
@@ -564,37 +758,35 @@ export declare interface SpinnerProps {
  * @public
  */
 export declare const Stack: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, 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>
+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
-}
+export declare const studioTheme: BaseTheme
 
 /**
  * @public
  */
 export declare const Tab: ForwardRefExoticComponent<
-  Omit<ElementProps<'button'> & PolymorphicProps, keyof TabProps> &
+  Omit<
     TabProps &
+      Omit<
+        HTMLProps<HTMLButtonElement>,
+        'label' | 'id' | 'type' | 'width' | 'aria-controls' | 'as'
+      >,
+    'ref'
+  > &
     RefAttributes<HTMLButtonElement>
 >
 
@@ -602,37 +794,31 @@ export declare const Tab: ForwardRefExoticComponent<
  * @public
  */
 export declare const TabList: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof TabListProps> &
-    TabListProps &
-    RefAttributes<HTMLDivElement>
+  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
+    RefAttributes<unknown>
 >
 
 /**
  * @public
  */
-declare type TabListChild = ReactElement<Props<TabProps, 'button'>> | null | undefined | false
-
-/**
- * @public
- */
-export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
-  children: TabListChild[]
+declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
+  children: Array<React.JSX.Element | null | undefined | false>
 }
 
 /**
  * @public
  */
-export declare interface TabProps {
+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
 }
@@ -643,54 +829,58 @@ export declare interface TabProps {
  * @public
  */
 declare const Text_2: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof TextProps> &
-    TextProps &
+  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 export {Text_2 as Text}
 
+/**
+ * @public
+ */
+declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
+
 /**
  * Single line text input.
  *
  * @public
  */
 export declare const TextInput: ForwardRefExoticComponent<
-  Omit<ElementProps<'input'> & PolymorphicProps, keyof TextInputProps> &
-    TextInputProps &
+  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'prefix' | 'as'>, 'ref'> &
     RefAttributes<HTMLInputElement>
 >
 
 /**
  * @public
  */
-declare type TextInputClearButtonProps = Omit<
-  Props<ButtonProps, 'button'>,
-  'as' | 'onClick' | 'onMouseDown'
->
+declare type TextInputClearButtonProps = Omit<ButtonProps, 'as'> &
+  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'onClick' | 'onMouseDown' | 'ref'>
 
 /**
  * @public
  */
-export declare interface TextInputProps extends InputStyleProps {
+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
 }
@@ -716,14 +906,26 @@ declare type TextInputType =
 /**
  * @public
  */
-export declare interface TextProps extends TextStyleProps, TextOverflowStyleProps {
-  htmlFor?: string
+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
 }
 
 /**
  * @public
  */
-export declare function ThemeProvider(props: ThemeProviderProps): ReactElement
+export declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element
 
 export declare namespace ThemeProvider {
   var displayName: string
@@ -732,8 +934,8 @@ export declare namespace ThemeProvider {
 /**
  * @public
  */
-export declare interface ThemeProviderProps {
-  children?: ReactNode
+declare interface ThemeProviderProps {
+  children?: React.ReactNode
   scheme?: ThemeColorSchemeKey
   theme?: RootTheme
   tone?: ThemeColorCardToneKey
@@ -745,31 +947,29 @@ export declare interface ThemeProviderProps {
  * @public
  */
 export declare const Tooltip: ForwardRefExoticComponent<
-  Omit<ElementProps<'div'> & PolymorphicProps, keyof TooltipProps> &
-    TooltipProps &
+  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'children' | 'as'>, 'ref'> &
     RefAttributes<HTMLDivElement>
 >
 
 /**
  * @public
  */
-export declare interface TooltipProps
-  extends Omit<LayerProps, 'as'>,
-    RadiusStyleProps,
-    ShadowStyleProps {
+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
+  shadow?: number | number[]
   /**
    * Adds a delay to open or close the tooltip.
    *
@@ -781,19 +981,19 @@ 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
-  tone?: ThemeColorCardToneKey
+  /**
+   * Whether the tooltip should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
 }
 
 /**
  * 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