import {BaseTheme} from '@sanity/ui/theme'
import {DetailedHTMLProps} from 'react'
import {FastOmit} from 'styled-components'
import {ForwardRefExoticComponent} from 'react'
import {HTMLAttributes} from 'react'
import {HTMLProps} from 'react'
import {IStyledComponentBase} from 'styled-components/dist/types'
import {MutableRefObject} from 'react'
import {NamedExoticComponent} from 'react'
import {RefAttributes} from 'react'
import {RefCallback} from 'react'
import {RootTheme} from '@sanity/ui/theme'
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'

/**
 * 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
 */
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<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'width' | 'as'>, 'ref'> &
    RefAttributes<HTMLButtonElement>
>

/**
 * @public
 */
declare type ButtonMode = ThemeColorButtonModeKey

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

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

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

/**
 * @public
 */
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
  tone?: CardTone
}

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

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

/**
 * 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
 */
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<GridProps & Omit<HTMLProps<HTMLDivElement>, 'height' | 'as' | 'rows'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
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.
 *
 * @public
 */
export declare const Hotkeys: ForwardRefExoticComponent<
  HotkeysProps & Omit<HTMLProps<HTMLElement>, 'size' | 'ref' | 'as'> & RefAttributes<HTMLElement>
>

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

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

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

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

/**
 * @public
 */
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
 */
declare interface LayerProviderProps {
  children?: React.ReactNode
  zOffset?: number | number[]
}

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

/**
 * @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
 */
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' | 'tabIndex' | 'ref' | '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
 */
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
}

/**
 * Placement of floating UI elements.
 *
 * @public
 */
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: NamedExoticComponent<
  Omit<
    PopoverProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'width' | 'children' | 'as'>,
    'ref'
  > &
    RefAttributes<HTMLDivElement>
>

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

/** @public */
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
  /** 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
  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): React.ReactPortal | null

export declare namespace Portal {
  var displayName: string
}

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

/**
 * @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
 */
declare type SelectableTone = ThemeColorStateToneKey

/**
 * 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
 */
declare interface SpinnerProps {
  muted?: boolean
  size?: number | number[]
}

/**
 * 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
 */
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

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

/**
 * @public
 */
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
 */
declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'

/**
 * Single line text input.
 *
 * @public
 */
export declare const TextInput: ForwardRefExoticComponent<
  Omit<TextInputProps & Omit<HTMLProps<HTMLInputElement>, 'type' | 'prefix' | 'as'>, 'ref'> &
    RefAttributes<HTMLInputElement>
>

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

/**
 * @public
 */
declare interface TextInputProps {
  /**
   * @beta
   */
  __unstable_disableFocusRing?: boolean
  border?: boolean
  /**
   * @beta
   */
  clearButton?: boolean | TextInputClearButtonProps
  customValidity?: string
  fontSize?: number | number[]
  icon?: React.ElementType | React.ReactNode
  iconRight?: React.ElementType | React.ReactNode
  /**
   * @beta
   */
  onClear?: () => void
  padding?: number | number[]
  prefix?: React.ReactNode
  radius?: Radius | Radius[]
  space?: number | number[]
  suffix?: React.ReactNode
  type?: TextInputType
  weight?: ThemeFontWeightKey
}

/**
 * @public
 */
declare type TextInputType =
  | 'search'
  | 'date'
  | 'datetime-local'
  | 'email'
  | 'url'
  | 'month'
  | 'number'
  | 'password'
  | 'tel'
  | 'time'
  | 'text'
  | 'week'
  | 'color'

/**
 * @public
 */
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): React.JSX.Element

export declare namespace ThemeProvider {
  var displayName: string
}

/**
 * @public
 */
declare interface ThemeProviderProps {
  children?: React.ReactNode
  scheme?: ThemeColorSchemeKey
  theme?: RootTheme
  tone?: ThemeColorCardToneKey
}

/**
 * Tooltips display information when hovering, focusing or tapping.
 *
 * @public
 */
export declare const Tooltip: ForwardRefExoticComponent<
  Omit<TooltipProps & Omit<HTMLProps<HTMLDivElement>, 'content' | 'children' | 'as'>, 'ref'> &
    RefAttributes<HTMLDivElement>
>

/**
 * @public
 */
declare interface TooltipProps extends Omit<LayerProps, 'as'> {
  /** @deprecated Use `fallbackPlacements` instead. */
  allowedAutoPlacements?: Placement[]
  arrow?: boolean
  boundaryElement?: HTMLElement | null
  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.
   *
   * If only a `number` is passed, it will be used for both opening and closing.
   *
   * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
   *
   * @public
   * @defaultValue 0
   */
  delay?: Delay
  /**
   * 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://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
 * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
 *
 * @public
 */
export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean

/**
 * @public
 */
export declare function useTheme_v2(): Theme_v2

export {}