@sanity/ui/dist/index.d.mts

The Sanity UI components.

import {BaseTheme as BaseTheme_2} from '@sanity/ui/theme'
import {Component} from 'react'
import {Context} from 'react'
import {createColorTheme as createColorTheme_2} from '@sanity/ui/theme'
import {CSSObject} from '@sanity/ui/theme'
import {DetailedHTMLProps} from 'react'
import {ElementType} from 'react'
import {FastOmit} from 'styled-components'
import {ForwardRefExoticComponent} from 'react'
import {hexToRgb as hexToRgb_2} from '@sanity/ui/theme'
import {HSL as HSL_2} from '@sanity/ui/theme'
import {hslToRgb as hslToRgb_2} from '@sanity/ui/theme'
import {HTMLAttributes} from 'react'
import {HTMLProps} from 'react'
import {IStyledComponentBase} from 'styled-components/dist/types'
import {multiply as multiply_2} from '@sanity/ui/theme'
import {parseColor as parseColor_2} from '@sanity/ui/theme'
import {PartialThemeColorBuilderOpts} from '@sanity/ui/theme'
import {PropsWithChildren} from 'react'
import {ReactNode} from 'react'
import {Ref} from 'react'
import {RefAttributes} from 'react'
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 {Theme as Theme_2} from '@sanity/ui/theme'
import {Theme_v2} from '@sanity/ui/theme'
import {ThemeAvatar} from '@sanity/ui/theme'
import {ThemeBoxShadow} from '@sanity/ui/theme'
import {ThemeColor} from '@sanity/ui/theme'
import {ThemeColorAvatarColorKey} from '@sanity/ui/theme'
import {ThemeColorBase} from '@sanity/ui/theme'
import {ThemeColorBuilderOpts} from '@sanity/ui/theme'
import {ThemeColorButton} from '@sanity/ui/theme'
import {ThemeColorButtonModeKey as ThemeColorButtonModeKey_2} from '@sanity/ui/theme'
import {ThemeColorButtonState} from '@sanity/ui/theme'
import {ThemeColorButtonStates} from '@sanity/ui/theme'
import {ThemeColorButtonTones} from '@sanity/ui/theme'
import {ThemeColorCard} from '@sanity/ui/theme'
import {ThemeColorCardState} from '@sanity/ui/theme'
import {ThemeColorCardToneKey} from '@sanity/ui/theme'
import {ThemeColorGenericState} from '@sanity/ui/theme'
import {ThemeColorInput} from '@sanity/ui/theme'
import {ThemeColorInputState} from '@sanity/ui/theme'
import {ThemeColorInputStates} from '@sanity/ui/theme'
import {ThemeColorMuted} from '@sanity/ui/theme'
import {ThemeColorMutedTone} from '@sanity/ui/theme'
import {ThemeColorName} from '@sanity/ui/theme'
import {ThemeColorScheme} from '@sanity/ui/theme'
import {ThemeColorSchemeKey as ThemeColorSchemeKey_2} from '@sanity/ui/theme'
import {ThemeColorSchemes} from '@sanity/ui/theme'
import {ThemeColorSelectable} from '@sanity/ui/theme'
import {ThemeColorSelectableState} from '@sanity/ui/theme'
import {ThemeColorSelectableStates} from '@sanity/ui/theme'
import {ThemeColorSolid} from '@sanity/ui/theme'
import {ThemeColorSolidTone} from '@sanity/ui/theme'
import {ThemeColorSpot} from '@sanity/ui/theme'
import {ThemeColorSpotKey} from '@sanity/ui/theme'
import {ThemeColorStateToneKey} from '@sanity/ui/theme'
import {ThemeColorSyntax as ThemeColorSyntax_2} from '@sanity/ui/theme'
import {ThemeColorToneKey} from '@sanity/ui/theme'
import {ThemeFont as ThemeFont_2} from '@sanity/ui/theme'
import {ThemeFontKey as ThemeFontKey_2} from '@sanity/ui/theme'
import {ThemeFonts as ThemeFonts_2} from '@sanity/ui/theme'
import {ThemeFontSize as ThemeFontSize_2} from '@sanity/ui/theme'
import {ThemeFontWeight as ThemeFontWeight_2} from '@sanity/ui/theme'
import {ThemeFontWeightKey as ThemeFontWeightKey_2} from '@sanity/ui/theme'
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'

/** @beta */
export declare type ArrayPropPrimitive = string | number | boolean | undefined | null

/** @internal */
export declare const Arrow: ForwardRefExoticComponent<
  Omit<
    {
      width: number
      height: number
      radius?: number
    } & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width'>,
    'ref'
  > &
    RefAttributes<HTMLDivElement>
>

/**
 * @internal
 */
export declare function attemptFocus(element: HTMLElement): boolean

/**
 * The Autocomplete component is typically used for search components.
 * It consists of a text input for writing a query, and properties for rendering suggestions.
 *
 * @public
 */
export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
  props: AutocompleteProps<Option> &
    Omit<
      HTMLProps<HTMLInputElement>,
      | 'aria-activedescendant'
      | 'aria-autocomplete'
      | 'aria-expanded'
      | 'aria-owns'
      | 'as'
      | 'autoCapitalize'
      | 'autoComplete'
      | 'autoCorrect'
      | 'id'
      | 'inputMode'
      | 'onChange'
      | 'onSelect'
      | 'popover'
      | 'prefix'
      | 'ref'
      | 'role'
      | 'spellCheck'
      | 'type'
      | 'value'
    > & {
      ref?: Ref<HTMLInputElement>
    },
) => React.JSX.Element

/**
 * @internal
 */
export declare interface AutocompleteInputChangeMsg {
  type: 'input/change'
  query: string | null
}

/**
 * @internal
 */
export declare interface AutocompleteInputFoocusMsg {
  type: 'input/focus'
}

/**
 * @internal
 */
export declare type AutocompleteMsg =
  | AutocompleteRootBlurMsg
  | AutocompleteRootClearMsg
  | AutocompleteRootEscapeMsg
  | AutocompleteRootOpenMsg
  | AutocompleteRootSetActiveValueMsg
  | AutocompleteRootSetListFocusedMsg
  | AutocompleteInputChangeMsg
  | AutocompleteInputFoocusMsg
  | AutocompleteValueChangeMsg

/**
 * @public
 */
export declare type AutocompleteOpenButtonProps = Omit<ButtonProps, 'as'> &
  Omit<React.HTMLProps<HTMLButtonElement>, 'as' | 'ref'>

/**
 * @public
 */
export declare interface AutocompleteProps<
  Option extends BaseAutocompleteOption = BaseAutocompleteOption,
> {
  border?: boolean
  customValidity?: string
  filterOption?: (query: string, option: Option) => boolean
  fontSize?: number | number[]
  icon?: ElementType | ReactNode
  id: string
  /** @beta */
  listBox?: BoxProps
  loading?: boolean
  onChange?: (value: string) => void
  onQueryChange?: (query: string | null) => void
  onSelect?: (value: string) => void
  /** @beta */
  openButton?: boolean | AutocompleteOpenButtonProps
  /** @beta */
  openOnFocus?: boolean
  /** The options to render. */
  options?: Option[]
  padding?: number | number[]
  popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
    Omit<HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content' | 'ref' | 'width'>
  prefix?: ReactNode
  radius?: Radius | Radius[]
  /** @beta */
  relatedElements?: HTMLElement[]
  /** The callback function for rendering each option. */
  renderOption?: (option: Option) => React.JSX.Element
  /** @beta */
  renderPopover?: (
    props: {
      content: React.JSX.Element | null
      hidden: boolean
      inputElement: HTMLInputElement | null
      onMouseEnter: () => void
      onMouseLeave: () => void
    },
    ref: Ref<HTMLDivElement>,
  ) => ReactNode
  renderValue?: (value: string, option?: Option) => string
  suffix?: ReactNode
  /** The current value. */
  value?: string
}

/**
 * @internal
 */
export declare interface AutocompleteRootBlurMsg {
  type: 'root/blur'
}

/**
 * @internal
 */
export declare interface AutocompleteRootClearMsg {
  type: 'root/clear'
}

/**
 * @internal
 */
export declare interface AutocompleteRootEscapeMsg {
  type: 'root/escape'
}

/**
 * @internal
 */
export declare interface AutocompleteRootOpenMsg {
  type: 'root/open'
  query: string | null
}

/**
 * @internal
 */
export declare interface AutocompleteRootSetActiveValueMsg {
  type: 'root/setActiveValue'
  value: string
  listFocused?: boolean
}

/**
 * @internal
 */
export declare interface AutocompleteRootSetListFocusedMsg {
  type: 'root/setListFocused'
  listFocused: boolean
}

/**
 * @internal
 */
export declare interface AutocompleteState {
  activeValue: string | null
  focused: boolean
  listFocused: boolean
  query: string | null
  value: string | null
}

/**
 * @internal
 */
export declare interface AutocompleteValueChangeMsg {
  type: 'value/change'
  value: string | null
}

/**
 * Avatars are used to represent people and other agents (e.g. bots).
 *
 * @public
 */
export declare const Avatar: ForwardRefExoticComponent<
  AvatarProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare const AvatarCounter: ForwardRefExoticComponent<
  AvatarCounterProps & RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare interface AvatarCounterProps {
  count: number
  size?: AvatarSize | AvatarSize[]
  /** @deprecated No longer supported. */
  tone?: 'navbar'
}

/**
 * @public
 */
export declare type AvatarPosition = 'top' | 'bottom' | 'inside'

/**
 * @public
 */
export declare interface AvatarProps {
  /** @beta */
  __unstable_hideInnerStroke?: boolean
  animateArrowFrom?: AvatarPosition
  arrowPosition?: AvatarPosition
  as?: React.ElementType | keyof React.JSX.IntrinsicElements
  color?: ThemeColorAvatarColorKey
  initials?: string
  onImageLoadError?: (event: Error) => void
  size?: AvatarSize | AvatarSize[]
  src?: string
  /**
   * The status of the entity this Avatar represents.
   * @alpha
   */
  status?: AvatarStatus
  title?: string
}

/**
 * @internal
 */
export declare interface AvatarRootStyleProps {
  $color: ThemeColorAvatarColorKey
}

/**
 * @public
 */
export declare type AvatarSize = 0 | 1 | 2 | 3

/**
 * @public
 */
export declare const AvatarStack: ForwardRefExoticComponent<
  AvatarStackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare interface AvatarStackProps {
  children: React.ReactNode
  maxLength?: number
  size?: AvatarSize | AvatarSize[]
  /** @deprecated No longer supported. */
  tone?: 'navbar'
}

/**
 * @public
 */
export declare type AvatarStatus = 'online' | 'editing' | 'inactive'

/**
 * Badges are used to tag resources.
 *
 * @public
 */
export declare const Badge: ForwardRefExoticComponent<
  Omit<BadgeProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
>

/**
 * @public
 * @deprecated No longer used
 */
export declare type BadgeMode = 'default' | 'outline'

/**
 * @public
 */
export declare interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
  as?: React.ElementType | keyof React.JSX.IntrinsicElements
  fontSize?: number | number[]
  /** @deprecated No longer used. */
  mode?: BadgeMode
  tone?: BadgeTone
}

/**
 * @public
 */
export declare type BadgeTone = ThemeColorStateToneKey

/**
 * @public
 */
export declare interface BaseAutocompleteOption {
  value: string
}

/**
 * @public
 * @deprecated Use `BaseTheme` from `@sanity/ui/theme` instead.
 */
export declare type BaseTheme = BaseTheme_2

/**
 * @public
 */
export declare interface BoundaryElementContextValue {
  version: 0.0
  element: HTMLElement | null
}

/**
 * @public
 */
export declare function BoundaryElementProvider(
  props: BoundaryElementProviderProps,
): React.JSX.Element

export declare namespace BoundaryElementProvider {
  var displayName: string
}

/**
 * @public
 */
export declare interface BoundaryElementProviderProps {
  children: React.ReactNode
  element: HTMLElement | null
}

/**
 * The `Box` component is a basic layout wrapper component which provides utility properties
 * for flex, margins and padding.
 *
 * @public
 */
export declare const Box: ForwardRefExoticComponent<
  Omit<BoxProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare type BoxDisplay = 'none' | 'block' | 'grid' | 'flex' | 'inline-block'

/**
 * @public
 */
export declare type BoxHeight = 'stretch' | 'fill'

/**
 * @public
 */
export declare type BoxOverflow = 'visible' | 'hidden' | 'auto'

/**
 * @public
 */
export declare interface BoxProps
  extends ResponsiveFlexItemProps,
    ResponsiveBoxProps,
    ResponsiveGridItemProps,
    ResponsiveMarginProps,
    ResponsivePaddingProps {
  as?: React.ElementType | keyof React.JSX.IntrinsicElements
  forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
}

/**
 * @public
 * @deprecated Use `ThemeBoxShadow` from `@sanity/ui/theme` instead.
 */
export declare type BoxShadow = ThemeBoxShadow

/**
 * @public
 */
export declare type BoxSizing = 'content' | 'border'

/**
 * @beta
 */
export declare const Breadcrumbs: ForwardRefExoticComponent<
  BreadcrumbsProps &
    Omit<HTMLProps<HTMLOListElement>, 'type' | 'ref' | 'as'> &
    RefAttributes<HTMLOListElement>
>

/**
 * @beta
 */
export declare interface BreadcrumbsProps {
  maxLength?: number
  separator?: React.ReactNode
  space?: number | number[]
}

/**
 * @public
 */
export declare const Button: ForwardRefExoticComponent<
  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'width' | 'as'>, 'ref'> &
    RefAttributes<HTMLButtonElement>
>

/**
 * @public
 */
export declare type ButtonMode = ThemeColorButtonModeKey_2

/**
 * @public
 */
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
}

/**
 * @public
 */
export declare type ButtonTextAlign = 'left' | 'right' | 'center'

/**
 * @public
 */
export declare type ButtonTone = ThemeColorStateToneKey

/**
 * @public
 */
export 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.
 *
 * @public
 */
export declare const Card: ForwardRefExoticComponent<
  Omit<CardProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare interface CardProps
  extends BoxProps,
    ResponsiveBorderProps,
    ResponsiveRadiusProps,
    ResponsiveShadowProps {
  /**
   * Do not use in production.
   * @beta
   */
  __unstable_checkered?: boolean
  /**
   * Do not use in production.
   * @beta
   */
  __unstable_focusRing?: boolean
  muted?: boolean
  pressed?: boolean
  scheme?: ThemeColorSchemeKey_2
  tone?: CardTone
}

/**
 * @internal
 */
export declare interface CardStyleProps {
  $checkered: boolean
  $focusRing: boolean
  $muted: boolean
  $tone: ThemeColorToneKey
}

/**
 * @public
 */
export declare type CardTone = ThemeColorCardToneKey | 'inherit'

/**
 * Checkboxes allow the user to select one or more items from a set.
 *
 * @public
 */
export declare const Checkbox: ForwardRefExoticComponent<
  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & CheckboxProps, 'ref'> &
    RefAttributes<HTMLInputElement>
>

/**
 * @public
 */
export declare interface CheckboxProps {
  indeterminate?: boolean
  customValidity?: string
}

/**
 * @public
 */
export declare type ClickOutsideElements = (HTMLElement | null | (HTMLElement | null)[])[]

/**
 * @public
 */
export declare type ClickOutsideEventElements = (HTMLElement | null | (HTMLElement | null)[])[]

/**
 * @public
 */
export declare type ClickOutsideEventListener = (event: MouseEvent) => void

/**
 * @public
 */
export declare type ClickOutsideListener = (event: MouseEvent) => void

/**
 * @public
 */
export declare const Code: ForwardRefExoticComponent<
  Omit<CodeProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> & RefAttributes<HTMLElement>
>

/**
 * @public
 */
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
}

/**
 * This API might change. DO NOT USE IN PRODUCTION.
 * @beta
 */
export declare const CodeSkeleton: ForwardRefExoticComponent<
  Omit<
    CodeSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
    'ref'
  > &
    RefAttributes<HTMLDivElement>
>

/**
 * This API might change. DO NOT USE IN PRODUCTION.
 * @beta
 */
export declare interface CodeSkeletonProps extends SkeletonProps {
  size?: number | number[]
}

/**
 * @internal
 * @deprecated this component will be removed in the next major release
 */
export declare function ConditionalWrapper({
  children,
  condition,
  wrapper,
}: {
  children: React.ReactNode
  condition: boolean
  wrapper: (children: React.ReactNode) => React.ReactNode
}): React.ReactNode

export declare namespace ConditionalWrapper {
  var displayName: string
}

/**
 * The `Container` component wraps content layout in a defined set of widths.
 *
 * @public
 */
export declare const Container: ForwardRefExoticComponent<
  Omit<ContainerProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'width' | 'as'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare interface ContainerProps extends BoxProps, ResponsiveWidthProps {}

/**
 * @internal
 */
export declare function containsOrEqualsElement(element: HTMLElement, node: Node): boolean

/**
 * @public
 * @deprecated Use `createColorTheme` from `@sanity/ui/theme` instead.
 */
export declare const createColorTheme: typeof createColorTheme_2

/**
 * @public
 */
export declare type Delay =
  | number
  | Partial<{
      open: number
      close: number
    }>

/**
 * The Dialog component.
 *
 * @public
 */
export declare const Dialog: ForwardRefExoticComponent<
  Omit<DialogProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'width' | 'as'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>

/**
 * @internal
 */
export declare const DialogContext: Context<DialogContextValue>

/**
 * This API might change. DO NOT USE IN PRODUCTION.
 * @beta
 */
export declare interface DialogContextValue {
  version: 0.0
  position?: DialogPosition | DialogPosition[]
  zOffset?: number | number[]
}

/**
 * @public
 */
export declare type DialogPosition = 'absolute' | 'fixed'

/**
 * @public
 */
export declare interface DialogProps extends ResponsivePaddingProps, ResponsiveWidthProps {
  /**
   * @beta
   */
  __unstable_autoFocus?: boolean
  /**
   * @beta
   */
  __unstable_hideCloseButton?: boolean
  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
  portal?: string
  position?: DialogPosition | DialogPosition[]
  scheme?: ThemeColorSchemeKey_2
  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): React.JSX.Element

export declare namespace DialogProvider {
  var displayName: string
}

/**
 * This API might change. DO NOT USE IN PRODUCTION.
 * @beta
 */
export declare interface DialogProviderProps {
  children?: React.ReactNode
  position?: DialogPosition | DialogPosition[]
  zOffset?: number | number[]
}

/**
 * DO NOT USE IN PRODUCTION.
 * @beta
 */
export declare const ElementQuery: ForwardRefExoticComponent<
  Omit<MediaQueryProps & Omit<HTMLProps<HTMLDivElement>, 'media' | 'as'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>

/**
 * @beta
 */
export declare interface ElementRectValue {
  width: number
  height: number
}

/**
 * @beta
 */
export declare interface ElementSize {
  content: ElementRectValue
  border: ElementRectValue
  /** @deprecated INTERNAL ONLY */
  _contentRect: DOMRectReadOnly
}

/**
 * @internal
 */
export declare interface _ElementSizeListener {
  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
}

/**
 * @internal
 */
export declare interface _ElementSizeObserver {
  subscribe: (element: HTMLElement, subscriber: _ElementSizeSubscriber) => () => void
}

/**
 * @internal
 */
export declare const _elementSizeObserver: _ElementSizeObserver

/**
 * @internal
 */
export declare type _ElementSizeSubscriber = (elementRect: ElementSize) => void

/**
 * DO NOT USE IN PRODUCTION
 * @beta
 */
export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  state: ErrorBoundaryState
  static getDerivedStateFromError(error: Error): ErrorBoundaryState
  componentDidCatch(error: Error, info: React.ErrorInfo): void
  render(): React.ReactNode
}

/**
 * DO NOT USE IN PRODUCTION
 * @beta
 */
export declare type ErrorBoundaryProps = PropsWithChildren<{
  onCatch: (params: {error: Error; info: React.ErrorInfo}) => void
}>

/**
 * DO NOT USE IN PRODUCTION
 * @beta
 */
export declare interface ErrorBoundaryState {
  error: Error | null
}

/**
 * @internal
 */
export declare function _fillCSSObject(
  keys: string[],
  value: string | number | CSSObject,
): CSSObject

/**
 * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
 *
 * @public
 */
export declare const Flex: ForwardRefExoticComponent<
  Omit<FlexProps & Omit<HTMLProps<HTMLDivElement>, 'wrap' | 'as'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare type FlexAlign = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'

/**
 * @public
 */
export declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'

/**
 * @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'>,
    ResponsiveFlexProps,
    ResponsiveFlexItemProps {
  gap?: number | number[]
}

/**
 * @public
 */
export declare type FlexValue = number | 'none' | 'auto' | 'initial'

/**
 * @public
 */
export declare type FlexWrap = 'wrap' | 'wrap-reverse' | 'nowrap'

/**
 * @internal
 */
export declare function focusFirstDescendant(element: HTMLElement): boolean

/**
 * @internal
 */
export declare function focusLastDescendant(element: HTMLElement): boolean

/**
 * @internal
 */
export declare interface FontWeightStyleProps {
  $weight?: ThemeFontWeightKey_2
}

/**
 * @internal
 */
export declare function _getArrayProp<T = number>(val: T | T[] | undefined, defaultVal?: T[]): T[]

/**
 * @internal
 */
export declare function _getResponsiveSpace(
  theme: Theme_2,
  props: string[],
  spaceIndexes?: number[],
): CSSObject[] | null

/**
 * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
 *
 * @public
 */
export declare const Grid: ForwardRefExoticComponent<
  Omit<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'

/**
 * @public
 */
export declare type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'

/**
 * @public
 */
export declare type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'

/**
 * @public
 */
export declare type GridItemColumn = 'auto' | 'full' | number

/**
 * @public
 */
export declare type GridItemColumnEnd = 'auto' | number

/**
 * @public
 */
export declare type GridItemColumnStart = 'auto' | number

/**
 * @public
 */
export declare type GridItemRow = 'auto' | 'full' | number

/**
 * @public
 */
export declare type GridItemRowEnd = 'auto' | number

/**
 * @public
 */
export declare type GridItemRowStart = 'auto' | number

/**
 * @public
 */
export declare interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}

/**
 * @internal
 */
export declare function _hasFocus(element: HTMLElement): boolean

/**
 * Typographic headings.
 *
 * @public
 */
export declare const Heading: ForwardRefExoticComponent<
  Omit<HeadingProps & Omit<HTMLProps<HTMLElement>, 'size' | 'as'>, 'ref'> &
    RefAttributes<HTMLElement>
>

/**
 * @public
 */
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<
    HeadingSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
    'ref'
  > &
    RefAttributes<HTMLDivElement>
>

/**
 * This API might change. DO NOT USE IN PRODUCTION.
 * @beta
 */
export declare interface HeadingSkeletonProps extends SkeletonProps {
  size?: number | number[]
}

/**
 * @public
 * @deprecated Use `hexToRgb` from `@sanity/ui/theme` instead.
 */
export declare const hexToRgb: typeof hexToRgb_2

/**
 * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
 *
 * @public
 */
export declare const Hotkeys: ForwardRefExoticComponent<
  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLElement>
>

/**
 * @public
 */
export declare interface HotkeysProps {
  fontSize?: number | number[]
  padding?: number | number[]
  radius?: Radius | Radius[]
  space?: number | number[]
  keys?: string[]
}

/**
 * @public
 * @deprecated Use `HSL` from `@sanity/ui/theme` instead.
 */
export declare type HSL = HSL_2

/**
 * @public
 * @deprecated Use `hslToRgb` from `@sanity/ui/theme` instead.
 */
export declare const hslToRgb: typeof hslToRgb_2

/**
 * The `Inline` component is a layout utility for aligning and spacing items horizontally.
 *
 * @public
 */
export declare const Inline: ForwardRefExoticComponent<
  Omit<InlineProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<unknown>
>

/**
 * @public
 */
export declare interface InlineProps extends Omit<BoxProps, 'display'> {
  /** The spacing between children. */
  space?: number | number[]
}

/**
 * @internal
 */
export declare function _isEnterToClickElement(element: HTMLElement): boolean

/**
 * @internal
 */
export declare function isFocusable(element: HTMLElement): boolean

/**
 * @internal
 */
export declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement

/**
 * @internal
 */
export declare function isHTMLButtonElement(element: unknown): element is HTMLButtonElement

/**
 * @internal
 */
export declare function isHTMLElement(node: unknown): node is HTMLElement

/**
 * @internal
 */
export declare function isHTMLInputElement(element: unknown): element is HTMLInputElement

/**
 * @internal
 */
export declare function isHTMLSelectElement(element: unknown): element is HTMLSelectElement

/**
 * @internal
 */
export declare function isHTMLTextAreaElement(element: unknown): element is HTMLTextAreaElement

/**
 * @internal
 */
export declare function _isScrollable(el: Node): boolean

/**
 * Used to define some text as keyboard input.
 *
 * @public
 */
export declare const KBD: ForwardRefExoticComponent<
  KBDProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare interface KBDProps {
  as?: React.ElementType | keyof React.JSX.IntrinsicElements
  fontSize?: number | number[]
  padding?: number | number[]
  radius?: Radius | Radius[]
}

/**
 * Typographic labels.
 *
 * @public
 */
export declare const Label: ForwardRefExoticComponent<
  Omit<LabelProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare interface LabelProps {
  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 LabelSkeleton: ForwardRefExoticComponent<
  Omit<
    LabelSkeletonProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'size' | 'children' | 'as'>,
    'ref'
  > &
    RefAttributes<HTMLDivElement>
>

/**
 * This API might change. DO NOT USE IN PRODUCTION.
 * @beta
 */
export declare interface LabelSkeletonProps extends SkeletonProps {
  size?: number | number[]
}

/**
 * @public
 */
export declare const Layer: ForwardRefExoticComponent<
  Omit<LayerProps & Omit<HTMLProps<HTMLDivElement>, 'as'>, 'ref'> & RefAttributes<HTMLDivElement>
>

/** @public */
export declare interface LayerContextValue {
  version: 0.0
  isTopLayer: boolean
  level?: number
  registerChild: (childLevel?: number) => () => void
  size: number
  zIndex: number
}

/**
 * @public
 */
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[]
}

/**
 * @public
 */
export declare function LayerProvider(props: LayerProviderProps): React.JSX.Element

export declare namespace LayerProvider {
  var displayName: string
}

/**
 * @public
 */
export declare interface LayerProviderProps {
  children?: React.ReactNode
  zOffset?: number | number[]
}

/**
 * DO NOT USE IN PRODUCTION.
 * @beta
 */
export declare interface MediaQueryProps {
  as?: React.ElementType | keyof React.JSX.IntrinsicElements
  media?: number[]
}

/**
 * @internal
 */
export declare interface _MediaStore {
  subscribe: (onStoreChange: () => void) => () => void
  getSnapshot: () => number
}

/**
 * The `Menu` component is a building block for application menus.
 *
 * @public
 */
export declare const Menu: ForwardRefExoticComponent<
  Omit<MenuProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'tabIndex' | 'role' | 'as'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>

/**
 * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
 *
 * @public
 */
export declare const MenuButton: ForwardRefExoticComponent<
  MenuButtonProps & RefAttributes<HTMLButtonElement | null>
>

/**
 * @public
 */
export declare interface MenuButtonProps {
  /**
   * @beta Do not use in production.
   */
  __unstable_disableRestoreFocusOnClose?: boolean
  /**
   * @deprecated Use `popover={{boundaryElement: element}}` instead.
   */
  boundaryElement?: HTMLElement
  button: React.JSX.Element
  id: string
  menu?: React.JSX.Element
  onClose?: () => void
  onOpen?: () => void
  /**
   * @deprecated Use `popover={{placement: 'top'}}` instead.
   */
  placement?: Placement
  popover?: Omit<PopoverProps, 'content' | 'open'>
  /**
   * @deprecated Use `popover={{scheme: 'dark'}}` instead.
   */
  popoverScheme?: ThemeColorSchemeKey_2
  /**
   * @deprecated Use `popover={{radius: 2}}` instead.
   */
  popoverRadius?: Radius | Radius[]
  /**
   * @beta Do not use in production.
   * @deprecated Use `popover={{portal: true}}` instead.
   */
  portal?: boolean
  /**
   * @deprecated Use `popover={{preventOverflow: true}}` instead.
   */
  preventOverflow?: boolean
}

/**
 * @public
 */
export declare const MenuDivider: IStyledComponentBase<
  'web',
  FastOmit<DetailedHTMLProps<HTMLAttributes<HTMLHRElement>, HTMLHRElement>, never>
> &
  string

/**
 * @public
 */
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
}

/**
 * @public
 */
export declare interface MenuGroupProps {
  as?: React.ElementType | keyof React.JSX.IntrinsicElements
  fontSize?: number | number[]
  icon?: React.ElementType | React.ReactNode
  menu?: Omit<
    MenuProps,
    | 'onClickOutside'
    | 'onEscape'
    | 'onItemClick'
    | 'onKeyDown'
    | 'onMouseEnter'
    | 'registerElement'
    | 'shouldFocus'
    | 'onBlurCapture'
  >
  padding?: number | number[]
  popover?: Omit<PopoverProps, 'content' | 'open'>
  radius?: Radius | Radius[]
  space?: number | number[]
  text: React.ReactNode
  tone?: SelectableTone
}

/**
 * @public
 */
export declare const MenuItem: ForwardRefExoticComponent<
  MenuItemProps &
    Omit<HTMLProps<HTMLDivElement>, 'selected' | 'height' | 'ref' | 'tabIndex' | 'as'> &
    RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare interface MenuItemProps extends ResponsivePaddingProps, ResponsiveRadiusProps {
  as?: React.ElementType | keyof React.JSX.IntrinsicElements
  fontSize?: number | number[]
  hotkeys?: string[]
  icon?: React.ElementType | React.ReactNode
  iconRight?: React.ElementType | React.ReactNode
  pressed?: boolean
  selected?: boolean
  space?: number | number[]
  text?: React.ReactNode
  tone?: SelectableTone
}

/**
 * @public
 */
export declare interface MenuProps extends ResponsivePaddingProps {
  /**
   * @deprecated Use `shouldFocus="first"` instead.
   */
  'focusFirst'?: boolean
  /**
   * @deprecated Use `shouldFocus="last"` instead.
   */
  'focusLast'?: boolean
  'onClickOutside'?: (event: MouseEvent) => void
  'onEscape'?: () => void
  'onItemClick'?: () => void
  'onItemSelect'?: (index: number) => void
  'originElement'?: HTMLElement | null
  'registerElement'?: (el: HTMLElement) => () => void
  'shouldFocus'?: 'first' | 'last' | null
  'space'?: number | number[]
  'aria-labelledby'?: string
  'onBlurCapture'?: (event: FocusEvent) => void
}

/**
 * @public
 * @deprecated Use `multiply` from `@sanity/ui/theme` instead.
 */
export declare const multiply: typeof multiply_2

/**
 * @public
 * @deprecated Use `parseColor` from `@sanity/ui/theme` instead.
 */
export declare const parseColor: typeof parseColor_2

export {PartialThemeColorBuilderOpts}

/**
 * Placement of floating UI elements.
 *
 * @public
 */
export declare type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'right'
  | 'right-start'
  | 'right-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end'

/**
 * The `Popover` component is used to display some content on top of another.
 *
 * @public
 */
export declare const Popover: ForwardRefExoticComponent<
  Omit<
    PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'children' | 'as'>,
    'ref'
  > &
    RefAttributes<HTMLDivElement>
>

/**
 * @beta
 */
export declare type PopoverMargins = [number, number, number, number]

/** @public */
export declare interface PopoverProps
  extends Omit<LayerProps, 'as'>,
    ResponsiveRadiusProps,
    ResponsiveShadowProps {
  /** @beta */
  __unstable_margins?: PopoverMargins
  /**
   * Whether the popover should animate in and out.
   *
   * @beta
   * @defaultValue false
   */
  animate?: boolean
  arrow?: boolean
  /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
  boundaryElement?: HTMLElement | null
  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
     */
  constrainSize?: boolean
  content?: React.ReactNode
  disabled?: boolean
  fallbackPlacements?: Placement[]
  floatingBoundary?: HTMLElement | null
  /**
   * When `true`, set the maximum width to match the reference element, and also prevent overflow within
   * the current boundary by resizing.
   *
   * Note that setting `constrainSize` to `true` also causes the popover to resize
   *
   * @defaultValue false
   */
  matchReferenceWidth?: boolean
  /**
   * When true, blocks all pointer interaction with elements beneath the popover until closed.
   *
   * @beta
   * @defaultValue false
   */
  modal?: boolean
  open?: boolean
  overflow?: BoxOverflow
  padding?: number | number[]
  placement?: Placement
  /**
   * 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
  referenceBoundary?: HTMLElement | null
  /**
   * When defined, the popover will be positioned relative to this element.
   * The children of the popover won't be rendered.
   */
  referenceElement?: HTMLElement | null
  scheme?: ThemeColorSchemeKey_2
  tone?: CardTone
  /** @beta */
  updateRef?: Ref<PopoverUpdateCallback | undefined>
  width?: PopoverWidth | PopoverWidth[]
}

/** @beta */
export declare type PopoverUpdateCallback = () => void

/** @public */
export declare type PopoverWidth = number | 'auto'

/**
 * @public
 */
export declare function Portal(props: PortalProps): React.ReactPortal | null

export declare namespace Portal {
  var displayName: string
}

/**
 * @public
 */
export declare interface PortalContextValue {
  version: 0.0
  boundaryElement: HTMLElement | null
  element: HTMLElement | null
  elements?: Record<string, HTMLElement | null | undefined>
}

/**
 * @public
 */
export declare interface PortalProps {
  children: React.ReactNode
  /**
   * @beta This API might change. DO NOT USE IN PRODUCTION.
   */
  __unstable_name?: string
}

/**
 * @public
 */
export declare function PortalProvider(props: PortalProviderProps): React.JSX.Element

export declare namespace PortalProvider {
  var displayName: string
}

/**
 * @public
 */
export declare interface PortalProviderProps {
  /**
   * @deprecated Use `<BoundaryElementProvider element={...} />` instead
   */
  boundaryElement?: HTMLElement | null
  children: React.ReactNode
  element?: HTMLElement | null
  /**
   * @beta
   */
  __unstable_elements?: Record<string, HTMLElement | null | undefined>
}

/**
 * The `Radio` component allows the user to select one option from a set.
 *
 * @public
 */
export declare const Radio: ForwardRefExoticComponent<
  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & RadioProps, 'ref'> &
    RefAttributes<HTMLInputElement>
>

/**
 * @public
 */
export declare interface RadioProps {
  customValidity?: string
}

/**
 * @public
 */
export declare type Radius = number | 'full'

/**
 * @internal
 */
export declare function _raf(fn: () => void): () => void

/**
 * @internal
 */
export declare function _raf2(fn: () => void): () => void

/**
 * @public
 */
export declare function rem(pixelValue: number): string | 0

/**
 * @internal
 */
export declare const _ResizeObserver: typeof ResizeObserver

/**
 * @internal
 */
export declare function _responsive<T>(
  media: number[],
  values: T[],
  callback: (value: T, index: number, array: T[]) => CSSObject,
): CSSObject[]

/**
 * @internal
 */
export declare interface ResponsiveAvatarSizeStyleProps {
  $size: AvatarSize[]
}

/**
 * @public
 */
export declare interface ResponsiveBorderProps {
  border?: boolean | boolean[]
  borderTop?: boolean | boolean[]
  borderRight?: boolean | boolean[]
  borderBottom?: boolean | boolean[]
  borderLeft?: boolean | boolean[]
}

/**
 * @public
 */
export declare interface ResponsiveBoxProps {
  display?: BoxDisplay | BoxDisplay[]
  height?: BoxHeight | BoxHeight[]
  overflow?: BoxOverflow | BoxOverflow[]
  sizing?: BoxSizing | BoxSizing[]
}

/**
 * Get responsive CSS for the `code` font style.
 * @internal
 */
export declare function responsiveCodeFontStyle(
  props: ResponsiveFontStyleProps & ThemeProps,
): CSSObject[]

/**
 * @public
 */
export declare interface ResponsiveFlexItemProps {
  /** Sets the flex CSS attribute. The property is responsive. */
  flex?: FlexValue | FlexValue[]
}

/**
 * @public
 */
export declare interface ResponsiveFlexProps {
  align?: FlexAlign | FlexAlign[]
  direction?: FlexDirection | FlexDirection[]
  justify?: FlexJustify | FlexJustify[]
  wrap?: FlexWrap | FlexWrap[]
}

/**
 * @internal
 */
export declare interface ResponsiveFontSizeStyleProps {
  $size: number[]
}

/**
 * @internal
 */
export declare interface ResponsiveFontStyleProps
  extends FontWeightStyleProps,
    ResponsiveFontSizeStyleProps,
    ResponsiveTextAlignStyleProps {
  $accent?: boolean
  $muted?: boolean
}

/**
 * @public
 */
export declare interface ResponsiveGridItemProps {
  column?: GridItemColumn | GridItemColumn[]
  columnStart?: GridItemColumnStart | GridItemColumnStart[]
  columnEnd?: GridItemColumnEnd | GridItemColumnEnd[]
  row?: GridItemRow | GridItemRow[]
  rowStart?: GridItemRowStart | GridItemRowStart[]
  rowEnd?: GridItemRowEnd | GridItemRowEnd[]
}

/**
 * @public
 */
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
 */
export 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
 */
export 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
 */
export declare interface ResponsiveRadiusProps {
  radius?: Radius | Radius[]
}

/**
 * @public
 */
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
 */
export declare interface ResponsiveWidthProps {
  width?: number | 'auto' | (number | 'auto')[]
}

/**
 * @internal
 */
export declare interface ResponsiveWidthStyleProps {
  $width: (number | 'auto')[]
}

/**
 * @public
 * @deprecated Use `RGB` from `@sanity/ui/theme` instead.
 */
export declare type RGB = RGB_2

/**
 * @public
 * @deprecated Use `rgba` from `@sanity/ui/theme` instead.
 */
export declare const rgba: typeof rgba_2

/**
 * @public
 * @deprecated Use `rgbToHex` from `@sanity/ui/theme` instead.
 */
export declare const rgbToHex: typeof rgbToHex_2

/**
 * @public
 * @deprecated Use `rgbToHsl` from `@sanity/ui/theme` instead.
 */
export declare const rgbToHsl: typeof rgbToHsl_2

/**
 * @public
 * @deprecated Use `RootTheme` from `@sanity/ui/theme` instead.
 */
export declare type RootTheme = RootTheme_2

/**
 * @public
 * @deprecated Use `screen` from `@sanity/ui/theme` instead.
 */
declare const screen_2: typeof screen_3
export {screen_2 as screen}

/**
 * The `Select` component provides control of options.
 *
 * @public
 */
export declare const Select: ForwardRefExoticComponent<
  Omit<SelectProps & Omit<HTMLProps<HTMLSelectElement>, 'as'>, 'ref'> &
    RefAttributes<HTMLSelectElement>
>

/**
 * @public
 */
export declare type SelectableTone = ThemeColorStateToneKey

/**
 * @public
 */
export declare interface SelectProps {
  fontSize?: number | number[]
  padding?: number | number[]
  radius?: Radius | Radius[]
  space?: number | number[]
  customValidity?: string
}

/**
 * This API might change. DO NOT USE IN PRODUCTION.
 * @beta
 */
export declare const Skeleton: ForwardRefExoticComponent<
  Omit<SkeletonProps & HTMLProps<HTMLDivElement>, 'ref'> & RefAttributes<HTMLDivElement>
>

/**
 * This API might change. DO NOT USE IN PRODUCTION.
 * @beta
 */
export declare interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxProps, 'children'> {
  animated?: boolean
  delay?: number
}

/**
 * Indicate that something is loading for an indeterminate amount of time.
 *
 * @public
 */
export declare const Spinner: ForwardRefExoticComponent<
  Omit<SpinnerProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare interface SpinnerProps {
  muted?: boolean
  size?: number | number[]
}

/**
 * @public
 */
export declare const SrOnly: ForwardRefExoticComponent<
  Omit<SrOnlyProps & Omit<HTMLProps<HTMLDivElement>, 'aria-hidden' | 'as'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare interface SrOnlyProps {
  as?: React.ElementType | keyof React.JSX.IntrinsicElements
  children?: React.ReactNode
}

/**
 * The `Stack` component is used to place elements on top of each other.
 *
 * @public
 */
export declare const Stack: ForwardRefExoticComponent<
  StackProps & Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> & RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
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: BaseTheme_2

/**
 * @public
 * @deprecated Use `ThemeStyles` from `@sanity/ui/theme` instead.
 */
export declare type Styles = ThemeStyles

/**
 * The `Switch` component allows the user to toggle a setting on and off.
 *
 * Extends all properties of an `<input type="checkbox" />` element, except type.
 *
 * @public
 */
export declare const Switch: ForwardRefExoticComponent<
  Omit<Omit<HTMLProps<HTMLInputElement>, 'type' | 'as'> & SwitchProps, 'ref'> &
    RefAttributes<HTMLInputElement>
>

/**
 * @public
 */
export declare interface SwitchProps {
  indeterminate?: boolean
}

/**
 * @public
 */
export declare const Tab: ForwardRefExoticComponent<
  Omit<
    TabProps &
      Omit<
        HTMLProps<HTMLButtonElement>,
        'label' | 'id' | 'type' | 'width' | 'aria-controls' | 'as'
      >,
    'ref'
  > &
    RefAttributes<HTMLButtonElement>
>

/**
 * @public
 */
export declare const TabList: ForwardRefExoticComponent<
  Omit<TabListProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as'>, 'ref'> &
    RefAttributes<unknown>
>

/**
 * @public
 */
export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
  children: Array<React.JSX.Element | null | undefined | false>
}

/**
 * @public
 */
export declare const TabPanel: ForwardRefExoticComponent<
  Omit<
    TabPanelProps & Omit<HTMLProps<HTMLDivElement>, 'id' | 'role' | 'aria-labelledby' | 'as'>,
    'ref'
  > &
    RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
export declare interface TabPanelProps extends BoxProps {
  /**
   * The `id` of the correlating `Tab` component.
   */
  'aria-labelledby': string
  'id': string
}

/**
 * @public
 */
export declare interface TabProps {
  /**
   * The `id` of the correlating `TabPanel` component.
   */
  'aria-controls': string
  'id': string
  'icon'?: React.ElementType | React.ReactNode
  'focused'?: boolean
  'fontSize'?: number | number[]
  'label'?: React.ReactNode
  'padding'?: number | number[]
  'selected'?: boolean
  'tone'?: ButtonTone
}

/**
 * The `Text` component is an agile, themed typographic element.
 *
 * @public
 */
declare const Text_2: ForwardRefExoticComponent<
  Omit<TextProps & Omit<HTMLProps<HTMLDivElement>, 'size' | 'as'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>
export {Text_2 as Text}

/**
 * @public
 */
export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'

/**
 * A multiline text input.
 *

 * @public
 */
export declare const TextArea: ForwardRefExoticComponent<
  Omit<TextAreaProps & Omit<HTMLProps<HTMLTextAreaElement>, 'as'>, 'ref'> &
    RefAttributes<HTMLTextAreaElement>
>

/**
 * @public
 */
export declare interface TextAreaP