import { FlattenInterpolation, FlattenSimpleInterpolation, ThemedStyledProps, } from 'styled-components'; import { ReactComponentElement } from 'react'; import { Icon } from 'grommet-icons'; import { BackgroundType, BorderType, BreakpointBorderSize, BreakpointEdgeSize, BreakpointSize, ColorType, DeepReadonly, DirectionType, EdgeSizeType, ElevationType, GapType, GraphColorsType, MarginType, OpacityType, RoundType, PadType, PropsOf, AlignContentType, SkeletonColorsType, AlignSelfType, AlignType, WidthType, HeightType, } from '../utils'; import { AnchorProps } from '../components/Anchor/index'; import { BoxProps } from '../components/Box/index'; import { Anchor } from '../components/Anchor'; import { Box } from '../components/Box'; import { Text, TextProps } from '../components/Text'; import { LayerPositionType, LayerProps } from '../components/Layer'; import { DropProps, DropType } from '../components/Drop'; import { AreasType, GridColumnsType, GridGapType, GridSizeType, } from '../components/Grid'; import { HeadingProps } from '../components/Heading'; import { ParagraphProps } from '../components/Paragraph'; import { SkeletonProps } from '../components/Skeleton/index'; export declare const base: DeepReadonly; export declare const generate: ( baseSpacing?: number, scale?: number, ) => DeepReadonly; /** * ExtendProps represents the props that will be provided to an ExtendType. */ type ExtendProps = ThemedStyledProps; /** * ExtendValue represents a valid `extend` value, which can be a CSS string or a * styled-components interpolation. In the theme an ExtendValue can be provided * directly to `extend` or it can be computed as the result of an ExtendFn. */ type ExtendValue = | string | FlattenSimpleInterpolation | FlattenInterpolation>; /** * ExtendFn represents a function passed to `extend`. These functions receive * props and produce an ExtendValue. */ type ExtendFn = (props: ExtendProps) => ExtendValue; /** * ExtendType represents the type for `extend` values in the theme. * * Acceptable values for `extend` are one of: * * * A string containing css * * An array of styled-components interpolations (usually returned by the styled-components `css` helper function) * * A function taking props and returning one of the above values */ type ExtendType> = | ExtendValue | ExtendFn; declare const colors: { active?: ColorType; black?: ColorType; border?: ColorType; brand?: ColorType; control?: ColorType; focus?: ColorType; placeholder?: ColorType; selected?: ColorType; text?: ColorType; icon?: ColorType; white?: ColorType; }; type Colors = typeof colors & { 'accent-1'?: ColorType; 'accent-2'?: ColorType; 'accent-3'?: ColorType; 'accent-4'?: ColorType; 'background-back'?: ColorType; 'background-contrast'?: ColorType; 'background-front'?: ColorType; 'neutral-1'?: ColorType; 'neutral-2'?: ColorType; 'neutral-3'?: ColorType; 'neutral-4'?: ColorType; 'dark-1'?: ColorType; 'dark-2'?: ColorType; 'dark-3'?: ColorType; 'dark-4'?: ColorType; 'dark-5'?: ColorType; 'dark-6'?: ColorType; 'light-1'?: ColorType; 'light-2'?: ColorType; 'light-3'?: ColorType; 'light-4'?: ColorType; 'light-5'?: ColorType; 'light-6'?: ColorType; 'status-critical'?: ColorType; 'status-error'?: ColorType; 'status-warning'?: ColorType; 'status-ok'?: ColorType; 'status-unknown'?: ColorType; 'status-disabled'?: ColorType; 'graph-0'?: ColorType; 'graph-1'?: ColorType; 'graph-2'?: ColorType; 'graph-3'?: ColorType; 'graph-4'?: ColorType; 'graph-5'?: ColorType; [x: string]: ColorType; }; interface ButtonKindType { background?: BackgroundType; border?: | { color?: ColorType; width?: string; radius?: string; } | boolean; color?: ColorType; direction?: DirectionType; elevation?: ElevationType; font?: { size?: string; weight?: number | string; }; icon?: React.ReactNode | Icon; padding?: { vertical?: string; horizontal?: string; }; reverse?: boolean; extend?: ExtendType; } interface ButtonType { intelligentPad?: boolean; badge?: { align?: 'container'; container?: { background?: BackgroundType; pad?: PadType; extend?: ExtendType; }; size?: { medium?: string; }; text?: { size?: { medium?: string; }; }; }; busy?: { gap?: GapType; icons?: { success?: React.ReactNode | Icon; }; }; gap?: GapType; background?: BackgroundType; border?: { color?: ColorType; width?: string; radius?: string; }; color?: ColorType; elevation?: ElevationType; extend?: ExtendType; minWidth?: string; maxWidth?: string; padding?: { vertical?: string; horizontal?: string; }; default?: ButtonKindType; primary?: ButtonKindType; secondary?: ButtonKindType; option?: ButtonKindType; active?: | (ButtonKindType & { default?: ButtonKindType; primary?: ButtonKindType; secondary?: ButtonKindType; }) | { [key: string]: ButtonKindType }; disabled?: | (ButtonKindType & { default?: ButtonKindType; primary?: ButtonKindType; secondary?: ButtonKindType; }) | ({ [key: string]: ButtonKindType } & { opacity?: OpacityType }); hover?: | (ButtonKindType & { default?: ButtonKindType; primary?: ButtonKindType; secondary?: ButtonKindType; }) | { [key: string]: ButtonKindType }; size?: { small?: { border?: { radius?: string; }; pad?: { vertical?: string; horizontal?: string; }; iconOnly?: { pad?: string | { horizontal?: string; vertical?: string }; }; }; medium?: { border?: { radius?: string; }; pad?: { vertical?: string; horizontal?: string; }; iconOnly?: { pad?: string | { horizontal?: string; vertical?: string }; }; }; large?: { border?: { radius?: string; }; pad?: { vertical?: string; horizontal?: string; }; iconOnly?: { pad?: string | { horizontal?: string; vertical?: string }; }; }; }; skeleton?: SkeletonProps; style?: Partial; transition?: { timing?: string; duration?: number; properties?: string[]; }; } interface FormFieldLabelType extends TextProps { requiredIndicator?: boolean | JSX.Element | string; } type DigitalTexts = | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | string; type ContainerExtend = { container?: { extend?: ExtendType; }; }; export interface ThemeType { global?: { active?: { background?: | ColorType | { color?: ColorType; opacity?: OpacityType; }; color?: ColorType; }; animation?: { duration?: string; jiggle?: { duration?: string; }; }; backgrounds?: { [x: string]: BackgroundType | { dark?: string; light?: string }; }; borderSize?: { xsmall?: string; small?: string; medium?: string; large?: string; xlarge?: string; }; breakpoints?: { small?: { value?: number; borderSize?: BreakpointBorderSize; edgeSize?: BreakpointEdgeSize; radius?: BreakpointEdgeSize; size?: BreakpointSize; }; medium?: { value?: number; borderSize?: BreakpointBorderSize; edgeSize?: BreakpointEdgeSize; radius?: BreakpointEdgeSize; size?: BreakpointSize; }; large?: { value?: number; borderSize?: BreakpointBorderSize; edgeSize?: BreakpointEdgeSize; radius?: BreakpointEdgeSize; size?: BreakpointSize; }; [x: string]: | { value?: number; borderSize?: BreakpointBorderSize; edgeSize?: BreakpointEdgeSize; radius?: BreakpointEdgeSize; size?: BreakpointSize; } | undefined; }; deprecated?: { backgrounds?: { name: string; message?: string }[]; colors?: { name: string; message?: string }[]; button?: { kind?: { name: string; message?: string }[]; }; }; deviceBreakpoints?: { phone?: string; tablet?: string; computer?: string; }; colors?: Colors; control?: { border?: { width?: string; radius?: string; color?: ColorType; }; disabled?: { opacity: OpacityType; }; }; debounceDelay?: number; drop?: { background?: BackgroundType; border?: { width?: string; radius?: string; }; intelligentMargin?: boolean; margin?: MarginType; shadowSize?: string; zIndex?: number | string; }; edgeSize?: { none?: string; hair?: string; xxsmall?: string; xsmall?: string; small?: string; medium?: string; large?: string; xlarge?: string; responsiveBreakpoint?: string; }; elevation?: { light?: { none?: string; xsmall?: string; small?: string; medium?: string; large?: string; xlarge?: string; [x: string]: string; }; dark?: { none?: string; xsmall?: string; small?: string; medium?: string; large?: string; xlarge?: string; [x: string]: string; }; }; focus?: { border?: { color?: ColorType; }; outline?: { color?: ColorType; size?: string; offset?: string; }; shadow?: | string | { color?: ColorType; size?: string; blur?: string; }; twoColor?: boolean; inset?: { border?: { color?: ColorType; }; outline?: { color?: ColorType; size?: string; offset?: string; }; shadow?: | string | { color?: ColorType; size?: string; blur?: string; }; twoColor?: boolean; }; }; font?: { face?: string; family?: string; height?: string; maxWidth?: string; size?: string; weight?: number | string; variant?: string; }; graph?: { // remove in v3. Should have been removed in // https://github.com/grommet/grommet/pull/3608/ colors?: GraphColorsType; }; hover?: { background?: BackgroundType; color?: ColorType; }; input?: { extend?: ExtendType; padding?: | string | { top?: string; bottom?: string; left?: string; right?: string; horizontal?: string; vertical?: string; }; font?: { height?: string; size?: string; weight?: number | string; }; readOnly?: { background?: BackgroundType; border?: { color?: ColorType; }; }; weight?: number | string; }; opacity?: { strong?: number; medium?: number; weak?: number; }; radius?: BreakpointEdgeSize; selected?: { background?: BackgroundType; color?: ColorType; }; spacing?: string; size?: { xxsmall?: string; xsmall?: string; small?: string; medium?: string; large?: string; xlarge?: string; xxlarge?: string; full?: string; [x: string]: string | undefined; }; }; accordion?: { icon?: { container?: { pad?: { horizontal?: string; }; }; }; label?: { container?: { pad?: { horizontal?: string; }; }; }; panel?: { border?: BorderType; }; border?: BorderType; heading?: { level?: string; margin?: MarginType; }; hover?: { background?: BackgroundType; color?: ColorType; // deprecated heading?: { color?: ColorType; }; }; icons?: { collapse?: any; expand?: any; color?: ColorType; }; }; anchor?: { color?: ColorType; extend?: ExtendType>; fontWeight?: number; gap?: GapType; hover?: { extend?: ExtendType>; textDecoration?: string; }; icon?: { color?: ColorType; }; iconOnly?: { pad?: PadType; }; textDecoration?: string; size?: { medium?: { color?: ColorType; fontWeight?: number; textDecoration?: string; gap?: GapType; }; [x: string]: | { color?: ColorType; fontWeight?: number; textDecoration?: string; gap?: GapType; } | undefined; }; }; avatar?: { size?: { xsmall?: string; small?: string; medium?: string; large?: string; xlarge?: string; [x: string]: string | undefined; }; text?: { size?: { xsmall?: string; small?: string; medium?: string; large?: string; xlarge?: string; [x: string]: string | undefined; }; fontWeight?: number; extend?: ExtendType; }; extend?: ExtendType; }; box?: { border?: { offset?: string; }; extend?: ExtendType; responsiveBreakpoint?: string; }; button?: ButtonType; calendar?: { day?: { adjacent?: { color?: ColorType; }; hover?: { background?: BackgroundType; color?: ColorType; }; selected?: { background?: BackgroundType; color?: ColorType; font?: { weight?: string | number; }; hover?: { background?: BackgroundType; color?: ColorType; }; }; inRange?: { color?: ColorType; font?: { weight?: string | number; }; hover?: { background?: BackgroundType; color?: ColorType; }; }; extend?: ExtendType; }; range?: { background?: BackgroundType; }; extend?: ExtendType; small?: { day?: { round?: RoundType; }; range?: { round?: RoundType; start?: { round?: RoundType; }; end?: { round?: RoundType; }; }; title?: TextProps & { container?: { pad?: { horizontal?: string; }; }; }; fontSize?: string; lineHeight?: number; daySize?: string; slideDuration?: string; }; medium?: { day?: { round?: RoundType; }; range?: { round?: RoundType; start?: { round?: RoundType; }; end?: { round?: RoundType; }; }; title?: TextProps & { container?: { pad?: { horizontal?: string; }; }; }; fontSize?: string; lineHeight?: number; daySize?: string; slideDuration?: string; }; large?: { day?: { round?: RoundType; }; range?: { round?: RoundType; start?: { round?: RoundType; }; end?: { round?: RoundType; }; }; title?: TextProps & { container?: { pad?: { horizontal?: string; }; }; }; fontSize?: string; lineHeight?: number; daySize?: string; slideDuration?: string; }; heading?: { level?: string; }; icons?: { previous?: any; next?: any; small?: { previous?: any; next?: any; }; }; }; card?: { container?: BoxProps | { extend?: ExtendType }; hover?: { container?: { elevation?: ElevationType; }; }; header?: BoxProps; body?: BoxProps; footer?: BoxProps; }; cards?: { container?: BoxProps; grid?: { columns?: GridColumnsType; gap?: GridGapType; }; }; carousel?: { animation?: { duration?: number; }; disabled?: { icons?: { color?: ColorType; }; }; icons?: { color?: ColorType; current?: any; next?: any; previous?: any; }; }; chart?: { color?: ColorType; extend?: ExtendType; height?: string; thickness?: PadType; width?: string; }; checkBox?: { border?: { color?: ColorType; width?: string; }; label?: { align?: AlignContentType; }; check?: { extend?: ExtendType; radius?: string; thickness?: string; }; color?: ColorType; extend?: ExtendType; gap?: GapType; hover?: { border?: { color?: ColorType; }; background?: { color?: ColorType; }; extend?: ExtendType; }; icon?: { size?: string; extend?: ExtendType; }; icons?: { checked?: React.ReactNode | Icon; indeterminate?: any; }; pad?: PadType; size?: string; toggle?: { background?: BackgroundType; color?: ColorType; extend?: ExtendType; radius?: string; size?: string; knob?: { extend?: ExtendType; }; }; }; checkBoxGroup?: { container?: BoxProps; }; clock?: { analog?: { extend?: ExtendType; hour?: { color?: ColorType; width?: string; size?: string; shape?: string; }; minute?: { color?: ColorType; width?: string; size?: string; shape?: string; }; second?: { color?: ColorType; width?: string; size?: string; shape?: string; }; size?: { small?: string; medium?: string; large?: string; xlarge?: string; huge?: string; }; }; digital?: { text?: { [key in DigitalTexts]: { size?: string; height?: number; }; }; }; }; collapsible?: { minSpeed?: number; baseline?: number; }; data?: { button?: { kind?: string; }; drop?: { pad?: PadType; }; }; dataChart?: { colors?: string[]; gap?: GapType; granularity?: { y?: { [key: string]: { fine: number; medium: number; }; }; }; detail?: { gap?: GridGapType; pad?: PadType; }; halfPad?: { [key: string]: string; }; legend?: { margin?: MarginType; gap?: GapType; item?: { gap?: GapType; pad?: PadType; }; }; orderedSizes?: string[]; size?: { height?: string; }; thickness?: { veryDense?: string; dense?: string; heavy?: string; moderate?: string; light?: string; sparse?: string; }; thicknessPad?: { xlarge?: PadType; large?: PadType; medium?: PadType; small?: PadType; xsmall?: PadType; }; }; dataFilter?: { rangeSelector?: { size?: string; round?: string; }; selectMultiple?: { dropHeight?: string; }; }; dataFilters?: { icons?: { close?: React.ReactNode | Icon; filter?: React.ReactNode | Icon; }; footer?: { actions?: { margin?: MarginType; gap?: GapType; }; }; clearControl?: { margin?: MarginType; }; pad?: PadType; width?: WidthType; }; dataSearch?: { icons?: { search?: React.ReactNode | Icon; }; }; dataSort?: { icons?: { control?: React.ReactNode | Icon; }; }; dataSummary?: { margin?: MarginType; separator?: { margin?: MarginType; }; }; dateInput?: { button?: { margin?: string; }; container?: { round?: RoundType; }; icon?: { calendar?: React.ReactNode | Icon; size?: string; }; }; dataTable?: { body?: { extend?: ExtendType; row?: { extend?: ExtendType; }; selected?: { background?: BackgroundType; }; }; container?: BoxProps; expand?: { size?: string; }; header?: { background?: BackgroundType; border?: BorderType; color?: ColorType; extend?: ExtendType; font?: { weight?: string; size?: string; }; gap?: GapType; hover?: { background?: BackgroundType; }; pad?: PadType; units?: TextProps; }; groupHeader?: { border?: { side?: string; size?: string; }; fill?: string; pad?: PadType; background?: BackgroundType; }; groupEnd?: { border?: { side?: string; size?: string; }; }; icons?: { ascending?: any; contract?: any; descending?: any; expand?: any; resizeDecrease?: React.ReactNode | Icon; resizeIncrease?: React.ReactNode | Icon; search?: React.ReactNode | Icon; sortable?: any; }; pinned?: { body?: { background?: BackgroundType; extend?: ExtendType; }; header?: { background?: BackgroundType; extend?: ExtendType; }; footer?: { background?: BackgroundType; extend?: ExtendType; }; }; resize?: { border?: { side?: string; color?: ColorType; }; hover?: { border?: { color?: ColorType; side: string; size: string; }; }; padding?: { vertical?: string; }; }; primary?: { weight?: string; }; search?: { pad?: PadType; text?: { pad?: PadType; }; }; sort?: { gap?: GapType; }; }; dataTableColumns?: { icons?: { control?: React.ReactNode | Icon; pinned?: React.ReactNode | Icon; search?: React.ReactNode | Icon; }; tabs?: { pad?: PadType; }; selectColumns?: { pad?: PadType; gap?: GapType; }; orderColumns?: { pad?: PadType; }; }; diagram?: { extend?: ExtendType; line?: { color?: ColorType; }; }; distribution?: { gap?: GapType; }; drop?: { extend?: ExtendType; maxHeight?: string; }; fileInput?: { anchor?: { margin?: MarginType; }; background?: BackgroundType; border?: BorderType; dragOver?: { background?: BackgroundType; border?: BorderType; extend?: ExtendType; pad?: PadType; }; extend?: ExtendType; hover?: { background?: BackgroundType; border?: BorderType; extend?: ExtendType; pad?: PadType; }; icons?: { error?: React.ReactNode | Icon; remove?: any; }; label?: TextProps & { extend?: ExtendType }; margin?: MarginType; message?: TextProps & { extend?: ExtendType }; pad?: PadType; round?: RoundType; }; footer?: { gap?: GapType; }; formField?: { border?: BorderType & { error?: { color?: ColorType; }; }; content?: { margin?: MarginType; pad?: PadType; }; disabled?: { background?: BackgroundType; border?: { color?: ColorType; }; label?: { color?: ColorType; }; help?: { color?: ColorType; }; info?: { color?: ColorType; }; }; focus?: { background?: BackgroundType; border?: { color?: ColorType; }; containerFocus?: boolean; }; error?: { background?: BackgroundType; border?: BorderType & { error?: { color?: ColorType; }; }; color?: ColorType; margin?: MarginType; container?: BoxProps; icon?: any; }; help?: { color?: ColorType; margin?: MarginType; }; info?: { color?: ColorType; margin?: MarginType; container?: BoxProps; icon?: any; }; label?: FormFieldLabelType; margin?: MarginType; round?: RoundType; extend?: ExtendType; survey?: { label?: { margin?: MarginType; size?: string; color?: ColorType; }; }; checkBox?: ContainerExtend & { pad?: PadType }; checkBoxGroup?: ContainerExtend; textArea?: ContainerExtend; textInput?: ContainerExtend; select?: ContainerExtend; maskedInput?: ContainerExtend; selectMultiple?: ContainerExtend; dateInput?: ContainerExtend; fileInput?: ContainerExtend; radioButton?: ContainerExtend; radioButtonGroup?: ContainerExtend; rangeSelector?: ContainerExtend; starRating?: ContainerExtend; thumbsRating?: ContainerExtend; }; grommet?: { extend?: ExtendType; }; header?: { sticky?: { zIndex?: string; }; gap?: GapType; }; heading?: { color?: ColorType; extend?: ExtendType; font?: {}; level?: { 1?: { font?: {}; small?: { size?: string; height?: string; maxWidth?: string; }; medium?: { size?: string; height?: string; maxWidth?: string; }; large?: { size?: string; height?: string; maxWidth?: string; }; xlarge?: { size?: string; height?: string; maxWidth?: string; }; }; 2?: { font?: {}; small?: { size?: string; height?: string; maxWidth?: string; }; medium?: { size?: string; height?: string; maxWidth?: string; }; large?: { size?: string; height?: string; maxWidth?: string; }; xlarge?: { size?: string; height?: string; maxWidth?: string; }; }; 3?: { font?: {}; small?: { size?: string; height?: string; maxWidth?: string; }; medium?: { size?: string; height?: string; maxWidth?: string; }; large?: { size?: string; height?: string; maxWidth?: string; }; xlarge?: { size?: string; height?: string; maxWidth?: string; }; }; 4?: { font?: {}; small?: { size?: string; height?: string; maxWidth?: string; }; medium?: { size?: string; height?: string; maxWidth?: string; }; large?: { size?: string; height?: string; maxWidth?: string; }; xlarge?: { size?: string; height?: string; maxWidth?: string; }; }; 5?: { font?: {}; small?: { size?: string; height?: string; maxWidth?: string; }; medium?: { size?: string; height?: string; maxWidth?: string; }; large?: { size?: string; height?: string; maxWidth?: string; }; xlarge?: { size?: string; height?: string; maxWidth?: string; }; }; 6?: { font?: {}; small?: { size?: string; height?: string; maxWidth?: string; }; medium?: { size?: string; height?: string; maxWidth?: string; }; large?: { size?: string; height?: string; maxWidth?: string; }; xlarge?: { size?: string; height?: string; maxWidth?: string; }; }; }; responsiveBreakpoint?: string; skeleton?: SkeletonProps; weight?: number; }; icon?: { extend?: ExtendType; disableScaleDown?: boolean; matchSize?: boolean; size?: { small?: string; medium?: string; large?: string; xlarge?: string; [x: string]: string | undefined; }; }; layer?: { background?: BackgroundType; border?: { radius?: string; intelligentRounding?: boolean; }; container?: { height?: HeightType; elevation?: ElevationType; extend?: ExtendType; zIndex?: string; }; extend?: ExtendType; overlay?: { background?: BackgroundType; backdropFilter?: string; }; responsiveBreakpoint?: string; zIndex?: string; }; list?: { container?: BoxProps; item?: { background?: BackgroundType; border?: BorderType; disabled?: { color?: ColorType; cursor?: string; }; gap?: GapType; pinned?: { background?: BackgroundType; icon?: { size?: string; pad?: PadType; }; }; pad?: PadType; extend?: ExtendType; }; primaryKey?: TextProps; icons?: { down?: React.ReactNode | Icon; up?: React.ReactNode | Icon; }; extend?: ExtendType; }; maskedInput?: { container?: { extend?: ExtendType; }; extend?: ExtendType; disabled?: { opacity?: OpacityType; }; }; menu?: { background?: BackgroundType; item?: | ButtonType & { align?: AlignType; }; drop?: DropType; extend?: ExtendType; container?: BoxProps; group?: { container?: BoxProps; separator?: { color?: ColorType; size?: string; pad?: PadType; }; }; icons?: { down?: any; up?: any; color?: ColorType; }; disabled?: { icons?: { color?: ColorType; }; }; }; meter?: { background?: BackgroundType; color?: ColorType; colors?: GraphColorsType; extend?: ExtendType; gap?: GapType; }; nav?: { gap?: GapType; }; notification?: { actions?: AnchorProps; container?: BoxProps; direction?: 'column' | 'row'; gap?: GapType; global?: { direction?: 'column' | 'row'; container?: BoxProps; }; toast?: { container?: BoxProps; direction?: 'column' | 'row'; layer?: LayerProps; time?: number; }; iconContainer?: BoxProps; textContainer?: BoxProps; title?: TextProps; message?: TextProps & { fill?: boolean; text?: { margin?: MarginType } }; close?: { icon?: React.ReactNode | Icon; color?: ColorType; }; critical?: { icon?: React.ReactNode | Icon; background?: BackgroundType; color?: ColorType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; global?: { background?: BackgroundType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; }; toast?: { background?: BackgroundType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; }; }; warning?: { icon?: React.ReactNode | Icon; background?: BackgroundType; color?: ColorType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; global?: { background?: BackgroundType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; }; toast?: { background?: BackgroundType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; }; }; normal?: { icon?: React.ReactNode | Icon; background?: BackgroundType; color?: ColorType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; global?: { background?: BackgroundType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; }; toast?: { background?: BackgroundType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; }; }; info?: { icon?: React.ReactNode | Icon; background?: BackgroundType; color?: ColorType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; global?: { background?: BackgroundType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; }; toast?: { background?: BackgroundType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; }; }; unknown?: { icon?: React.ReactNode | Icon; background?: BackgroundType; color?: ColorType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; global?: { background?: BackgroundType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; }; toast?: { background?: BackgroundType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; }; }; undefined?: { icon?: React.ReactNode | Icon; background?: BackgroundType; color?: ColorType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; global?: { background?: BackgroundType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; }; toast?: { background?: BackgroundType; message?: { color?: ColorType; }; title?: { color?: ColorType; }; }; }; }; page?: { [key: string]: { alignSelf?: AlignContentType; width?: | string | { min: string; max: string; }; small?: BoxProps; medium?: BoxProps; large?: BoxProps; }; }; pageHeader?: { actions?: BoxProps; pad?: PadType; parent?: BoxProps; responsive?: { actions?: BoxProps; areas?: AreasType; breakpoints?: string[]; columns?: GridColumnsType; rows?: GridSizeType; gap?: GridGapType; }; subtitle?: ParagraphProps; title?: HeadingProps; size?: { small?: { pad?: PadType; subtitle?: ParagraphProps; title?: ParagraphProps; }; medium?: { pad?: PadType; subtitle?: ParagraphProps; title?: ParagraphProps; }; large?: { pad?: PadType; subtitle?: ParagraphProps; title?: ParagraphProps; }; }; small?: { areas?: AreasType; columns?: GridColumnsType; rows?: GridSizeType; gap?: GridGapType; }; medium?: { areas?: AreasType; columns?: GridColumnsType; rows?: GridSizeType; gap?: GridGapType; }; large?: { areas?: AreasType; columns?: GridColumnsType; rows?: GridSizeType; gap?: GridGapType; }; }; pagination?: { button?: ButtonType | string; container?: BoxProps | { extend?: ExtendType }; controls?: { align?: AlignContentType; direction?: DirectionType; gap?: GapType; pad?: PadType; margin?: MarginType; }; icons?: { color?: ColorType; next?: React.ReactNode | Icon; previous?: React.ReactNode | Icon; }; step?: { container?: { gap?: GapType; }; }; }; paragraph?: { extend?: ExtendType; small?: { size?: string; height?: string; maxWidth?: string; }; medium?: { size?: string; height?: string; maxWidth?: string; }; large?: { size?: string; height?: string; maxWidth?: string; }; xlarge?: { size?: string; height?: string; maxWidth?: string; }; xxlarge?: { size?: string; height?: string; maxWidth?: string; }; skeleton?: { gap?: GapType; }; }; radioButton?: { extend?: ExtendType; container?: { extend?: ExtendType; }; background?: { color?: ColorType; }; border?: { color?: ColorType; width?: string; }; check?: { color?: ColorType; extend?: ExtendType; radius?: string; background?: { color?: ColorType; }; }; color?: ColorType; hover?: { border?: { color?: ColorType; }; background?: { color?: ColorType; }; }; icon?: { extend?: ExtendType; size?: string; }; icons?: { circle?: React.ReactNode | Icon; }; gap?: string; size?: string; font?: { weight?: number | string; }; }; nameValueList?: { gap?: { column?: GapType; row?: GapType; }; pair?: { column?: { gap?: { column?: GapType; row?: GapType; }; }; }; name?: { width: string; }; value?: { width: string; }; }; nameValuePair?: { column?: { gap?: GapType; }; name?: TextProps; value?: TextProps; }; radioButtonGroup?: { container?: BoxProps; }; rangeInput?: { disabled?: { opacity?: OpacityType; track?: { color?: ColorType; }; thumb?: { color?: ColorType; }; }; track?: { height?: string; color?: any; extend?: ExtendType; opacity?: OpacityType; lower?: { color?: ColorType; opacity?: OpacityType; }; upper?: { color?: ColorType; opacity?: OpacityType; }; }; thumb?: { color?: ColorType; extend?: ExtendType; }; wheel?: boolean; extend?: ExtendType; }; rangeSelector?: { background?: { invert?: { color?: ColorType; }; }; edge?: { type?: string; size?: EdgeSizeType | string; }; label?: { margin?: MarginType; }; }; select?: { background?: BackgroundType; clear?: { container?: BoxProps & { hover?: BoxProps }; text?: TextProps; }; container?: { extend?: ExtendType; }; control?: { extend?: ExtendType; open?: string | object; }; extend?: ExtendType; emptySearchMessage?: { container?: BoxProps; text?: TextProps; }; icons?: { color?: ColorType; down?: React.ReactNode | Icon; up?: React.ReactNode | Icon; margin?: MarginType; search?: React.ReactNode | Icon; }; listbox?: { extend?: ExtendType; }; options?: { container?: PropsOf; text?: PropsOf; }; search?: { pad?: PadType; }; // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37506 searchInput?: ReactComponentElement; step?: number; }; selectMultiple?: { help?: { container?: { pad: PadType; }; }; maxInline?: number; listbox?: { extend?: ExtendType; }; option?: { pad?: PadType; }; search?: { pad?: PadType; }; showMore?: { pad?: PadType; }; summary?: { pad?: PadType; showSelectedInline?: { pad: PadType; }; }; }; sidebar?: { gap?: GapType; pad?: PadType; }; skeleton?: BoxProps & { colors?: SkeletonColorsType; extend?: ExtendType }; skipLinks?: { position?: LayerPositionType; container?: BoxProps; label?: TextProps; }; spinner?: { container?: | BoxProps | { color?: ColorType } | { size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | string }; icon?: React.ReactNode | Icon; responsive?: boolean; size?: { xsmall?: string; small?: string; medium?: string; large?: string; xlarge?: string; }; }; starRating?: { color?: ColorType; icons?: { selected?: React.ReactNode | Icon; unselected?: React.ReactNode | Icon; }; }; thumbsRating?: { dislike?: { color?: ColorType; }; icons?: { dislike?: React.ReactNode | Icon; dislikeSelected?: React.ReactNode | Icon; like?: React.ReactNode | Icon; likeSelected?: React.ReactNode | Icon; }; like?: { color?: ColorType; }; }; tab?: { active?: { background?: BackgroundType; color?: ColorType; }; background?: BackgroundType; border?: { side?: string; size?: string; color?: ColorType; active?: { color?: ColorType; }; disabled?: { color?: ColorType; }; hover?: { color?: ColorType; extend?: ExtendType; }; }; color?: ColorType; disabled?: { color?: ColorType; }; extend?: ExtendType; gap?: GapType; hover?: { background?: BackgroundType; color?: ColorType; extend?: ExtendType; }; margin?: MarginType; pad?: PadType; }; tabs?: { background?: BackgroundType; extend?: ExtendType; gap?: GapType; header?: { alignSelf?: AlignSelfType; background?: BackgroundType; border?: { side?: string; size?: string; style?: string; color?: ColorType; }; extend?: ExtendType; nextButton?: { icon?: React.ReactNode | Icon; pad?: PadType; }; previousButton?: { icon?: React.ReactNode | Icon; pad?: PadType; }; }; panel?: { extend?: ExtendType; }; step?: { small?: number; medium?: number; large?: number; }; }; table?: { caption?: { margin?: MarginType; }; header?: { background?: BackgroundType; extend?: ExtendType; align?: string; pad?: PadType; border?: string; verticalAlign?: string; fill?: string; }; body?: { align?: string; background?: BackgroundType; border?: string; extend?: ExtendType; pad?: PadType; }; footer?: { align?: string; background?: BackgroundType; extend?: ExtendType; pad?: PadType; border?: string; verticalAlign?: string; fill?: string; }; row?: { hover?: { background?: BackgroundType; extend?: ExtendType; }; }; }; tag?: { background?: BackgroundType; border?: BorderType; hover?: { background?: BackgroundType; border?: BorderType; }; round?: RoundType; name?: TextProps; pad?: PadType; remove?: ButtonType | { kind?: string }; separator?: string; size?: { xsmall?: { pad?: PadType; icon?: { size?: string; }; remove?: { size?: string; margin?: MarginType }; }; small?: { pad?: PadType; icon?: { size?: string; }; remove?: { size?: string; margin?: MarginType }; }; medium?: { pad?: PadType; icon?: { size?: string; }; remove?: { size?: string; margin?: MarginType }; }; large?: { pad?: PadType; icon?: { size?: string; }; remove?: { size?: string; margin?: MarginType }; }; xlarge?: { pad?: PadType; icon?: { size?: string; }; remove?: { size?: string; margin?: MarginType }; }; }; value?: TextProps; icons?: { remove?: React.ReactNode | Icon; }; }; text?: { extend?: ExtendType; xsmall?: { size?: string; height?: string; maxWidth?: string; }; small?: { size?: string; height?: string; maxWidth?: string; }; medium?: { size?: string; height?: string; maxWidth?: string; }; large?: { size?: string; height?: string; maxWidth?: string; }; xlarge?: { size?: string; height?: string; maxWidth?: string; }; xxlarge?: { size?: string; height?: string; maxWidth?: string; }; '2xl'?: { size?: string; height?: string; maxWidth?: string; }; '3xl'?: { size?: string; height?: string; maxWidth?: string; }; '4xl'?: { size?: string; height?: string; maxWidth?: string; }; '5xl'?: { size?: string; height?: string; maxWidth?: string; }; '6xl'?: { size?: string; height?: string; maxWidth?: string; }; skeleton?: BoxProps & { colors?: SkeletonColorsType }; }; textArea?: { extend?: ExtendType; disabled?: OpacityType; }; textInput?: { extend?: ExtendType; disabled?: OpacityType | { opacity: OpacityType }; container?: { extend?: ExtendType; }; icons?: { copy?: React.ReactNode | Icon; }; placeholder?: { extend?: ExtendType; }; suggestions?: { extend?: ExtendType; }; }; tip?: { content?: BoxProps; drop?: DropProps; }; toggleGroup?: { button?: { kind?: string; border?: { radius?: string; }; iconOnly?: { pad?: PadType; }; pad?: PadType; }; container?: BoxProps & { extend?: ExtendType }; divider?: | { color?: ColorType; } | boolean; }; toolbar?: { small: { gap?: GapType; }; gap?: GapType; }; video?: { captions?: { background?: BackgroundType; }; controls?: { background?: BackgroundType; }; icons?: { closedCaption?: any; color?: ColorType; configure?: any; fullScreen?: any; pause?: any; play?: any; reduceVolume?: any; volume?: any; }; scrubber?: { color?: ColorType; interval?: number; track?: { color?: ColorType; }; thickness?: string; }; time?: { container?: { pad?: PadType; }; }; }; worldMap?: { color?: ColorType; continent?: { active?: string; base?: string; }; hover?: { color?: ColorType; }; place?: { active?: string; base?: string; }; }; }