/// <reference types="react" />

import { ContextData } from '@floating-ui/react';
import { ExtendedElements } from '@floating-ui/react';
import { ExtendedRefs } from '@floating-ui/react';
import { FloatingEvents } from '@floating-ui/react';
import { MiddlewareData } from '@floating-ui/core';
import type { Placement } from '@floating-ui/react';
import * as React from 'react';
import { ReferenceType } from '@floating-ui/react';
import { Strategy } from '@floating-ui/utils';

export declare const Accordion: ({ children, allowMultiple, className, spacing, reduceMotion, defaultExpanded, expanded, onChange, disableKeyboardExpansion, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, }: AccordionPropsType) => React.JSX.Element;

export declare const AccordionItem: ({ title, titleSize, children, className, padding, tabIndex, id: customId, ariaHeadingLevel, }: AccordionItemPropsType) => React.JSX.Element;

export declare type AccordionItemPropsType = Readonly<{
    title: React.ReactNode;
    titleSize?: ResponsivePropType<'small' | 'large'>;
    children?: React.ReactNode;
    className?: string;
    padding?: ResponsivePropType<PaddingType_2>;
    tabIndex?: number;
    id?: string;
    ariaHeadingLevel?: number;
}>;

export declare type AccordionPropsType = Readonly<{
    allowMultiple?: boolean;
    children?: React.ReactNode;
    className?: string;
    spacing?: ResponsivePropType<SpacingType>;
    reduceMotion?: boolean;
    expanded?: string | Array<string>;
    defaultExpanded?: string | Array<string>;
    onChange?: (arg0: string) => void;
    disableKeyboardExpansion?: boolean;
    'aria-label'?: string;
    'aria-labelledby'?: string;
}>;

export declare const ActionList: ({ children, toTop, direction, align, noWrap, className, ...props }: ActionListPropsType) => React.JSX.Element;

export declare const ActionListHole: ({ children, asContainer, spacing, noSpacing, spaceBellow, spacedLarge, noShrink, grow, toEnd, toRight, stretch, equalWidth, hideOverflow, className, ...props }: ActionListHolePropsType) => React.JSX.Element;

export declare type ActionListHolePropsType = {
    children: React.ReactNode;
    asContainer?: boolean | null | undefined;
    spacing?: ActionListHoleSpacingType | null | undefined;
    noSpacing?: boolean | null | undefined;
    spaceBellow?: boolean | null | undefined;
    spacedLarge?: boolean | null | undefined;
    noShrink?: boolean | null | undefined;
    grow?: boolean | null | undefined;
    toEnd?: boolean | null | undefined;
    toRight?: boolean | null | undefined;
    stretch?: boolean | null | undefined;
    equalWidth?: boolean | null | undefined;
    hideOverflow?: boolean | null | undefined;
    className?: string | null | undefined;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'asContainer' | 'spacing' | 'noSpacing' | 'spaceBellow' | 'spacedLarge' | 'noShrink' | 'grow' | 'toEnd' | 'toRight' | 'stretch' | 'equalWidth' | 'hideOverflow' | 'className'>;

declare type ActionListHoleSpacingType = 'xsmall' | 'small';

export declare type ActionListPropsType = {
    children?: React.ReactNode;
    toTop?: boolean | null | undefined;
    className?: string | null | undefined;
    noWrap?: boolean | null | undefined;
    direction?: DirectionType | null | undefined;
    align?: AligmentType | null | undefined;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'toTop' | 'className' | 'noWrap' | 'direction' | 'align'>;

declare type AligmentType = 'align-baseline' | 'stretch';

declare type AligmentType_2 = 'start' | 'center' | 'end';

declare type AligmentType_3 = 'left' | 'center' | 'right';

declare type AligmentType_4 = 'left' | 'center' | 'right';

declare type AligmentType_5 = 'left' | 'center' | 'right';

declare type AligmentType_6 = 'left' | 'center' | 'right';

declare type AriaLiveType = 'off' | 'polite' | 'assertive';

declare type AriaLiveType_2 = 'off' | 'polite' | 'assertive';

declare type AriaLiveType_3 = 'off' | 'polite' | 'assertive';

declare type AriaLiveType_4 = 'polite' | 'assertive';

declare type AriaStatusLabelType = {
    loading?: string;
    uploaded?: string;
};

declare type AriaStatusLabelType_2 = {
    loading?: string;
    loaded?: string;
};

export declare const Avatar: ({ size, border, spaced, imgSrc, className, link, ariaLinkLabel, alt, ...props }: AvatarPropsType) => React.JSX.Element;

export declare type AvatarPropsType = {
    width?: number;
    height?: number;
    size?: AvatarSizeType;
    border?: boolean;
    spaced?: boolean;
    imgSrc?: string;
    className?: string;
    link?: string;
    ariaLinkLabel?: string;
    alt?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'size' | 'border' | 'spaced' | 'imgSrc' | 'className' | 'link' | 'ariaLinkLabel' | 'alt' | 'width' | 'height'>;

declare type AvatarSizeType = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';

/**
 * Container for grouping elements. It provides padding, background color, border and shadow.
 *
 * @see react docs: https://styleguide.brainly.com/latest/docs/interactive.html#boxes
 * @see twig-compatible docs: https://styleguide.brainly.com/latest/docs/containers.html#box
 *
 * @example <Box>Text inside Box</Box>
 * @returns {JSX.Element} Box component
 */
export declare const Box: React.ForwardRefExoticComponent<{
    /**
     * Children to be rendered inside of the Box
     * @example <Box>Text inside Box</Box>
     */
    children?: React.ReactNode;
    /**
     * Additional class names
     */
    className?: string | null | undefined;
    /**
     * Box background color
     * @example <Box color="green-30">Text on a 'green-30' background</Box>
     */
    color?: ColorType | null | undefined;
    /**
     * Box shadow
     * @example <Box shadow>Text inside box with shadow</Box>
     * @default false
     */
    shadow?: ResponsivePropType<boolean> | undefined;
    /**
     * Padding size. Defaults to 'm' size, pass null to set it to 0
     * @example <Box padding="l">Text inside Box with large padding</Box>
     */
    padding?: ResponsivePropType<PaddingType | null> | undefined;
    /**
     * Disable border radius
     * @example <Box noBorderRadius>Text inside Box with no border radius</Box>
     * @default false
     */
    noBorderRadius?: ResponsivePropType<boolean> | undefined;
    /**
     * Show border
     * @example <Box border>Text inside bordered Box</Box>
     * @default false
     */
    border?: ResponsivePropType<boolean> | undefined;
    /**
     * Border color (works only with `border` prop)
     * @example <Box border borderColor="green-40">Text inside Box with 'green-40' border</Box>
     */
    borderColor?: ColorType | null | undefined;
} & Omit<React.AllHTMLAttributes<HTMLElement>, "children" | "className" | "color" | "shadow" | "padding" | "noBorderRadius" | "border" | "borderColor"> & React.RefAttributes<HTMLDivElement>>;

export declare type BoxPropsType = {
    /**
     * Children to be rendered inside of the Box
     * @example <Box>Text inside Box</Box>
     */
    children?: React.ReactNode;
    /**
     * Additional class names
     */
    className?: string | null | undefined;
    /**
     * Box background color
     * @example <Box color="green-30">Text on a 'green-30' background</Box>
     */
    color?: ColorType | null | undefined;
    /**
     * Box shadow
     * @example <Box shadow>Text inside box with shadow</Box>
     * @default false
     */
    shadow?: ResponsivePropType<boolean>;
    /**
     * Padding size. Defaults to 'm' size, pass null to set it to 0
     * @example <Box padding="l">Text inside Box with large padding</Box>
     */
    padding?: ResponsivePropType<PaddingType | null>;
    /**
     * Disable border radius
     * @example <Box noBorderRadius>Text inside Box with no border radius</Box>
     * @default false
     */
    noBorderRadius?: ResponsivePropType<boolean>;
    /**
     * Show border
     * @example <Box border>Text inside bordered Box</Box>
     * @default false
     */
    border?: ResponsivePropType<boolean>;
    /**
     * Border color (works only with `border` prop)
     * @example <Box border borderColor="green-40">Text inside Box with 'green-40' border</Box>
     */
    borderColor?: ColorType | null | undefined;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className' | 'color' | 'shadow' | 'padding' | 'noBorderRadius' | 'border' | 'borderColor'>;

export declare const Breadcrumb: ({ className, short, adaptive, inlineItems, elements, spaced, ...props }: BreadcrumbPropsType) => React.JSX.Element;

export declare type BreadcrumbPropsType = {
    className?: string | null | undefined;
    adaptive?: boolean | null | undefined;
    short?: boolean | null | undefined;
    inlineItems?: boolean | null | undefined;
    elements?: ReadonlyArray<React.ReactNode>;
    spaced?: boolean;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'className' | 'adaptive' | 'short' | 'inlineItems' | 'elements'>;

export declare const Bubble: ({ alignment, direction, color, full, noShadow, children, className, ...props }: BubblePropsType) => React.JSX.Element;

declare type BubbleColorType = 'white' | 'gray-40' | 'gray-20' | 'blue-40' | 'blue-30' | 'blue-20' | 'indigo-40' | 'green-40' | 'green-30' | 'green-20' | 'red-40';

export declare type BubblePropsType = {
    children: React.ReactNode;
    className?: string | null | undefined;
    alignment?: AligmentType_2;
    direction: DirectionType_2;
    color?: BubbleColorType | null | undefined;
    full?: boolean | null | undefined;
    noShadow?: boolean | null | undefined;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className' | 'alignment' | 'direction' | 'color' | 'full' | 'noShadow'>;

export declare const Button: React.ForwardRefExoticComponent<{
    /**
     * Specify type of the button that you want to use
     * @example <Button variant="solid">
     *            button
     *          </Button>
     * @see variant="solid" https://styleguide.brainly.com/latest/docs/interactive.html?variant="solid"#buttons
     * @see variant="solid-inverted" https://styleguide.brainly.com/latest/docs/interactive.html?variant="solid-inverted"#buttons
     * @see variant="solid-indigo" https://styleguide.brainly.com/latest/docs/interactive.html?variant="solid-indigo"#buttons
     * @see variant="solid-indigo-inverted" https://styleguide.brainly.com/latest/docs/interactive.html?variant="solid-indigo-inverted"#buttons
     * @see variant="solid-light" https://styleguide.brainly.com/latest/docs/interactive.html?variant="solid-light"#buttons
     * @see variant="outline" https://styleguide.brainly.com/latest/docs/interactive.html?variant="outline"#buttons
     * @see variant="outline-indigo" https://styleguide.brainly.com/latest/docs/interactive.html?variant="outline-indigo"#buttons
     * @see variant="outline-inverted" https://styleguide.brainly.com/latest/docs/interactive.html?variant="outline-indigo-inverted"#buttons
     * @see variant="transparent" https://styleguide.brainly.com/latest/docs/interactive.html?variant="transparent"#buttons
     * @see variant="transparent-light" https://styleguide.brainly.com/latest/docs/interactive.html?variant="transparent-light"#buttons
     * @see variant="transparent-red" https://styleguide.brainly.com/latest/docs/interactive.html?variant="transparent-red"#buttons
     * @see variant="transparent-inverted" https://styleguide.brainly.com/latest/docs/interactive.html?variant="transparent-inverted"#buttons
     * @see variant="facebook" https://styleguide.brainly.com/latest/docs/interactive.html?variant="facebook"#buttons
     * @see variant="google" https://styleguide.brainly.com/latest/docs/interactive.html?variant="google"#buttons
     * @see variant="apple" https://styleguide.brainly.com/latest/docs/interactive.html?variant="apple"#buttons
     *
     */
    variant?: ButtonVariantType | undefined;
    /**
     * Set toggle state of the button.
     * Caution: Toggle property work with for specific button variants:
     * `solid-light`,`outline`, `outline-indigo`, `outline-inverted`,
     * `transparent`, `transparent-light`, `transparent-red`, `transparent-inverted`
     */
    toggle?: ButtonToggleType | undefined;
    /**
     * You can render icon inside each variant of button on the left side
     * @example <Button
     *           icon={<Icon variant="facebook" color="icon-white" size={24} />}
     *           variant="facebook"
     *          >
     *            Login with Facebook
     *          </Button>
     */
    icon?: React.ReactNode;
    /** Optional and available when icon is set. it hides button's text
     * @example <Button
     *            icon={<Icon variant="facebook" color="icon-white" size={24} />}
     *            iconOnly
     *            variant="facebook"
     *          >
     *            Login with Facebook
     *          </Button>
     * */
    iconOnly?: boolean | undefined;
    /**
     * Reverses order of icon and text. Effective only when icon is set.
     */
    reversedOrder?: boolean | undefined;
    /**
     * Children to be rendered inside Button
     * @example <Button
     *           icon={<Icon type="answer" color="icon-white" size={24} />}
     *           variant="solid"
     *          >
     *            button
     *          </Button>
     */
    children?: React.ReactNode;
    /**
     * There are three sizes options for buttons, not need to be specify, default is m
     * @example <Button variant="solid" size="m">
     *            button
     *          </Button>
     * @see size="s" https://styleguide.brainly.com/latest/docs/interactive.html?size="s"#buttons
     * @see size="m" https://styleguide.brainly.com/latest/docs/interactive.html?size="m"#buttons
     * @see size="l" https://styleguide.brainly.com/latest/docs/interactive.html?size="l"#buttons
     */
    size?: ButtonSizeType | undefined;
    /**
     * Specify href for button, optional string
     * @example <Button href="https://brainly.com/" size="m" variant="solid-indigo">
     *            button
     *          </Button>
     */
    href?: string | undefined;
    /**
     * Optional boolean for disabled button
     * @example <Button variant="solid-indigo" disabled>
     *            button
     *          </Button>
     */
    disabled?: boolean | undefined;
    /**
     * Show loading state. By default loading state make button disabled while
     * showing spinner inside and keep button's width unchanged.
     */
    loading?: boolean | undefined;
    /**
     * `aria-live` for loading state. Defaults to "off".
     */
    loadingAriaLive?: AriaLiveType | undefined;
    /**
     * Accessible information about loading state. Defaults to "loading".
     */
    loadingAriaLabel?: string | undefined;
    /**
     * Optional boolean for full width button
     * @example <Button variant="solid-indigo" fullWidth>
     *            button
     *          </Button>
     */
    fullWidth?: boolean | undefined;
    /**
     * Additional class names
     */
    className?: string | undefined;
    /**
     * Specifies where to display the linked URL.
     */
    target?: TargetType | undefined;
    /**
     * Accessible information that indicates opening in new tab.
     */
    newTabLabel?: string | undefined;
    /**
     * Accessible name for Button.
     */
    'aria-label'?: string | undefined;
    /**
     * The default behavior of the button.
     */
    type?: ButtonTypeType | undefined;
    /**
     * Callback, called by clicking on Button
     */
    onClick?: ((arg0: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => unknown) | undefined;
} & Omit<React.AllHTMLAttributes<HTMLElement>, "children" | "className" | "aria-label" | "toggle" | "disabled" | "href" | "size" | "target" | "type" | "onClick" | "fullWidth" | "newTabLabel" | "loading" | "variant" | "icon" | "iconOnly" | "reversedOrder" | "loadingAriaLive" | "loadingAriaLabel"> & React.RefAttributes<unknown>>;

export declare const ButtonLite: ({ className, variant, children, size, loading, loadingAriaLabel, loadingAriaLive, disabled, icon, reversedOrder, href, target, newTabLabel, type, onClick, "aria-label": ariaLabel, ...rest }: ButtonLitePropsType) => React.JSX.Element;

export declare type ButtonLitePropsType = {
    /**
     * Children to be rendered inside Button
     * @example <Button
     *           icon={<Icon type="answer" color="icon-white" size={24} />}
     *           variant="solid"
     *          >
     *            button
     *          </Button>
     */
    children?: React.ReactNode;
    /**
     * Specify variant of the button that you want to use
     * @example <ButtonLite variant="solid-light">
     *            button
     *          </ButtonLite>
     *
     */
    variant?: ButtonLiteVariantType;
    /**
     * Specify href for button, optional string
     * @example <Button href="https://brainly.com/" size="m" variant="solid-indigo">
     *            button
     *          </Button>
     */
    href?: string;
    /**
     * Specifies where to display the linked URL.
     */
    target?: TargetType_2;
    /**
     * Accessible information that indicates opening in new tab.
     */
    newTabLabel?: string;
    /**
     * Accessible name for Button.
     */
    'aria-label'?: string;
    onClick?: (arg0: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => unknown;
    /**
     * The default behavior of the button.
     */
    type?: ButtonLiteTypeType;
    /**
     * There are two sizes options for buttons, not need to be specify, default is s
     * @example <ButtonLite  size="xs">
     *            button
     *          </ButtonLite>
     */
    size?: ButtonLiteSizeType;
    /**
     * Show loading state. By default loading state make button disabled while
     * showing spinner inside and keep button's width unchanged.
     */
    loading?: boolean;
    /**
     * `aria-live` for loading state. Defaults to "off".
     */
    loadingAriaLive?: AriaLiveType_2;
    /**
     * Accessible information about loading state. Defaults to "loading".
     */
    loadingAriaLabel?: string;
    /**
     * Optional boolean for disabled button
     * @example <Button variant="solid-indigo" disabled>
     *            button
     *          </Button>
     */
    disabled?: boolean;
    /**
     * You can render icon inside each variant of button on the left side
     * @example <ButtonLite
     *           icon={<Icon variant="facebook" color="icon-white" size={24} />}
     *           variant="facebook"
     *          >
     *            Login with Facebook
     *          </ButtonLite>
     */
    icon?: React.ReactNode;
    /**
     * Reverses order of icon and text. Effective only when icon is set.
     */
    reversedOrder?: boolean;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'variant' | 'icon' | 'reversedOrder' | 'children' | 'size' | 'href' | 'disabled' | 'loading' | 'loadingAriaLive' | 'loadingAriaLabel' | 'fullWidth' | 'className' | 'target' | 'newTabLabel' | 'aria-label' | 'type' | 'onClick'>;

declare type ButtonLiteSizeType = 'xs' | 's';

declare type ButtonLiteTypeType = 'button' | 'submit' | 'reset';

declare type ButtonLiteVariantType = 'transparent' | 'transparent-inverted' | 'transparent-light' | 'transparent-indigo' | 'solid-light' | 'solid-indigo-light';

export declare type ButtonPropsType = {
    /**
     * Specify type of the button that you want to use
     * @example <Button variant="solid">
     *            button
     *          </Button>
     * @see variant="solid" https://styleguide.brainly.com/latest/docs/interactive.html?variant="solid"#buttons
     * @see variant="solid-inverted" https://styleguide.brainly.com/latest/docs/interactive.html?variant="solid-inverted"#buttons
     * @see variant="solid-indigo" https://styleguide.brainly.com/latest/docs/interactive.html?variant="solid-indigo"#buttons
     * @see variant="solid-indigo-inverted" https://styleguide.brainly.com/latest/docs/interactive.html?variant="solid-indigo-inverted"#buttons
     * @see variant="solid-light" https://styleguide.brainly.com/latest/docs/interactive.html?variant="solid-light"#buttons
     * @see variant="outline" https://styleguide.brainly.com/latest/docs/interactive.html?variant="outline"#buttons
     * @see variant="outline-indigo" https://styleguide.brainly.com/latest/docs/interactive.html?variant="outline-indigo"#buttons
     * @see variant="outline-inverted" https://styleguide.brainly.com/latest/docs/interactive.html?variant="outline-indigo-inverted"#buttons
     * @see variant="transparent" https://styleguide.brainly.com/latest/docs/interactive.html?variant="transparent"#buttons
     * @see variant="transparent-light" https://styleguide.brainly.com/latest/docs/interactive.html?variant="transparent-light"#buttons
     * @see variant="transparent-red" https://styleguide.brainly.com/latest/docs/interactive.html?variant="transparent-red"#buttons
     * @see variant="transparent-inverted" https://styleguide.brainly.com/latest/docs/interactive.html?variant="transparent-inverted"#buttons
     * @see variant="facebook" https://styleguide.brainly.com/latest/docs/interactive.html?variant="facebook"#buttons
     * @see variant="google" https://styleguide.brainly.com/latest/docs/interactive.html?variant="google"#buttons
     * @see variant="apple" https://styleguide.brainly.com/latest/docs/interactive.html?variant="apple"#buttons
     *
     */
    variant?: ButtonVariantType;
    /**
     * Set toggle state of the button.
     * Caution: Toggle property work with for specific button variants:
     * `solid-light`,`outline`, `outline-indigo`, `outline-inverted`,
     * `transparent`, `transparent-light`, `transparent-red`, `transparent-inverted`
     */
    toggle?: ButtonToggleType;
    /**
     * You can render icon inside each variant of button on the left side
     * @example <Button
     *           icon={<Icon variant="facebook" color="icon-white" size={24} />}
     *           variant="facebook"
     *          >
     *            Login with Facebook
     *          </Button>
     */
    icon?: React.ReactNode;
    /** Optional and available when icon is set. it hides button's text
     * @example <Button
     *            icon={<Icon variant="facebook" color="icon-white" size={24} />}
     *            iconOnly
     *            variant="facebook"
     *          >
     *            Login with Facebook
     *          </Button>
     * */
    iconOnly?: boolean;
    /**
     * Reverses order of icon and text. Effective only when icon is set.
     */
    reversedOrder?: boolean;
    /**
     * Children to be rendered inside Button
     * @example <Button
     *           icon={<Icon type="answer" color="icon-white" size={24} />}
     *           variant="solid"
     *          >
     *            button
     *          </Button>
     */
    children?: React.ReactNode;
    /**
     * There are three sizes options for buttons, not need to be specify, default is m
     * @example <Button variant="solid" size="m">
     *            button
     *          </Button>
     * @see size="s" https://styleguide.brainly.com/latest/docs/interactive.html?size="s"#buttons
     * @see size="m" https://styleguide.brainly.com/latest/docs/interactive.html?size="m"#buttons
     * @see size="l" https://styleguide.brainly.com/latest/docs/interactive.html?size="l"#buttons
     */
    size?: ButtonSizeType;
    /**
     * Specify href for button, optional string
     * @example <Button href="https://brainly.com/" size="m" variant="solid-indigo">
     *            button
     *          </Button>
     */
    href?: string;
    /**
     * Optional boolean for disabled button
     * @example <Button variant="solid-indigo" disabled>
     *            button
     *          </Button>
     */
    disabled?: boolean;
    /**
     * Show loading state. By default loading state make button disabled while
     * showing spinner inside and keep button's width unchanged.
     */
    loading?: boolean;
    /**
     * `aria-live` for loading state. Defaults to "off".
     */
    loadingAriaLive?: AriaLiveType;
    /**
     * Accessible information about loading state. Defaults to "loading".
     */
    loadingAriaLabel?: string;
    /**
     * Optional boolean for full width button
     * @example <Button variant="solid-indigo" fullWidth>
     *            button
     *          </Button>
     */
    fullWidth?: boolean;
    /**
     * Additional class names
     */
    className?: string;
    /**
     * Specifies where to display the linked URL.
     */
    target?: TargetType;
    /**
     * Accessible information that indicates opening in new tab.
     */
    newTabLabel?: string;
    /**
     * Accessible name for Button.
     */
    'aria-label'?: string;
    /**
     * The default behavior of the button.
     */
    type?: ButtonTypeType;
    /**
     * Callback, called by clicking on Button
     */
    onClick?: (arg0: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => unknown;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'variant' | 'toggle' | 'icon' | 'iconOnly' | 'reversedOrder' | 'children' | 'size' | 'href' | 'disabled' | 'loading' | 'loadingAriaLive' | 'loadingAriaLabel' | 'fullWidth' | 'className' | 'target' | 'newTabLabel' | 'aria-label' | 'type' | 'onClick'>;

export declare const ButtonRound: ({ label, children, href, className, ...props }: ButtonRoundPropsType) => React.JSX.Element;

export declare type ButtonRoundPropsType = {
    children?: React.ReactNode | null | undefined;
    className?: string | null | undefined;
    wide?: boolean | null | undefined;
    disabled?: boolean | null | undefined;
    small?: boolean | null | undefined;
    href?: string;
    label?: string | null | undefined;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className' | 'wide' | 'disabled' | 'small' | 'href' | 'label'>;

declare type ButtonSizeType = 'l' | 'm' | 's';

declare type ButtonToggleType = 'red' | 'yellow';

declare type ButtonTypeType = 'button' | 'submit' | 'reset';

declare type ButtonVariantType = 'solid' | 'solid-inverted' | 'solid-indigo' | 'solid-indigo-inverted' | 'solid-light' | 'outline' | 'outline-indigo' | 'outline-inverted' | 'transparent' | 'transparent-light' | 'transparent-red' | 'transparent-inverted' | 'facebook' | 'google' | 'apple';

export declare const Card: ({ children, full, vertical, centered, padding, shadow, noBorder, transparent, className, ...props }: CardPropsType) => React.JSX.Element;

export declare const CardButton: React.ForwardRefExoticComponent<Omit<CardButtonPropsType, "ref"> & React.RefAttributes<HTMLButtonElement>> & {
    Indicator: {
        ({ slot, size, style, className, }: CardButtonIndicatorPropsType): React.JSX.Element;
        displayName: string;
    };
};

declare interface CardButtonIndicatorPropsType {
    slot?: 'top-left' | 'center-left' | 'bottom-left' | 'top-right' | 'center-right' | 'bottom-right';
    style?: React.CSSProperties;
    className?: string;
    size?: 16 | 24;
}

export declare interface CardButtonPropsType extends React.ComponentPropsWithRef<'button'> {
    /**
     * Optional string. Variant of the card. Default is 'outline'.
     */
    variant?: 'solid' | 'outline';
    color?: 'light' | 'dark';
    /**
     * Optional React.ReactNode. Children of the CardButton.
     * @example <CardButton>Card content</CardButton>
     */
    children?: React.ReactNode;
    /**
     * Optional. Width of the card.
     * @example <CardButton width="100px" />
     */
    width?: React.CSSProperties['width'];
    /**
     * Optional. Height of the card.
     * @example <CardButton height="100px" />
     */
    height?: React.CSSProperties['height'];
    /**
     * Optional object. Inline styles.
     * @example <CardCheckbox style={--card-background-color: var(--green-20)} />
     */
    style?: React.CSSProperties;
    /**
     * Optional string. ID of the CardButton.
     */
    id?: string;
}

export declare const CardCheckbox: React.ForwardRefExoticComponent<CardCheckboxPropsType & React.RefAttributes<HTMLInputElement>> & {
    Indicator: {
        ({ slot, style, className, }: CardCheckboxIndicatorPropsType): React.JSX.Element;
        displayName: string;
    };
};

declare interface CardCheckboxIndicatorPropsType {
    slot?: 'top-left' | 'center-left' | 'bottom-left' | 'top-right' | 'center-right' | 'bottom-right';
    style?: React.CSSProperties;
    className?: string;
}

export declare interface CardCheckboxPropsType extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange'> {
    /**
     * Optional string. Variant of the card. Default is 'outline'.
     */
    variant?: 'solid' | 'outline';
    color?: 'light' | 'dark';
    /**
     * Optional string. Additional class names.
     */
    className?: string;
    /**
     * Optional React.ReactNode. Children of the card. This is the place where label should be used and connected to the card.
     * @example <CardCheckbox>Card content</Card.Checkbox>
     */
    children?: React.ReactNode;
    /**
     * Optional string. Width of the card.
     * @example <CardCheckbox width="100px" />
     **/
    width?: React.CSSProperties['width'];
    /**
     * Optional string. Height of the card.
     * @example <CardCheckbox height="100px" />
     */
    height?: React.CSSProperties['height'];
    /**
     * Optional object. Inline styles.
     * @example <CardCheckbox style={--card-background-color: var(--green-20)} />
     */
    style?: React.CSSProperties;
    /**
     * Optional boolean. Whether the checkbox is checked.
     */
    checked?: boolean;
    /**
     * Optional boolean. Whether the checkbox is checked by default. Only works when `checked` is not defined.
     */
    defaultChecked?: boolean;
    /**
     * Optional boolean. Whether the checkbox is disabled.
     */
    disabled?: boolean;
    /**
     * Optional string. ID of the checkbox.
     */
    id?: string;
    /**
     * Sets whether the checkbox is displayed as indeterminate. Note: this prop doesn't modify the `checked` property.
     * @example  <CardCheckbox indeterminate />
     * @default false
     */
    indeterminate?: boolean;
    /**
     * Optional boolean. Whether the checkbox is invalid.
     * @default <CardCheckbox invalid />
     */
    invalid?: boolean;
    /**
     * Optional boolean. Whether the checkbox is required.
     * @default <CardCheckbox required />
     */
    required?: boolean;
    /**
     * Value of the Card.Checkbox input.
     * @example <CardCheckbox value="1" />
     */
    value?: string;
    /**
     * Name of the Card.Checkbox input.
     * @example <CardCheckbox name="checkbox" />
     */
    name?: string;
    /**
     * Function called whenever the state of the checkbox changes.
     */
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    /**
     * Optional string. ID of the element that labels the Radio.
     * @example <CardCheckbox aria-labelledby="label-id" />
     **/
    'aria-labelledby'?: string;
    /**
     * Optional string. ID of the element that describes the Radio.
     * @example <CardCheckbox aria-describedby="description-id" />
     **/
    'aria-describedby'?: string;
}

export declare const CardHole: ({ color, children, className, ...props }: CardHolePropsType) => React.JSX.Element;

export declare type CardHolePropsType = {
    children: React.ReactNode;
    className?: string;
    color?: ColorType_2;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className' | 'color'>;

declare type CardPaddingType = 'padding-small' | 'padding-normal' | 'padding-large' | 'padding-xlarge';

export declare type CardPropsType = {
    children?: React.ReactNode;
    className?: string;
    full?: boolean;
    vertical?: boolean;
    centered?: boolean;
    noBorder?: boolean;
    shadow?: boolean;
    transparent?: boolean;
    padding?: CardPaddingType;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className' | 'full' | 'vertical' | 'centered' | 'noBorder' | 'shadow' | 'transparent' | 'padding'>;

export declare const CardRadioGroup: React.ForwardRefExoticComponent<CardRadioGroupPropsType & React.RefAttributes<HTMLDivElement>> & {
    Item: React.ForwardRefExoticComponent<CardRadioPropsType & React.RefAttributes<HTMLInputElement>>;
    Indicator: typeof CardRadioIndicator;
};

export declare interface CardRadioGroupPropsType {
    /**
     * The name of the radio group and the form data when submitting the form.
     */
    name?: string;
    /**
     * Optional boolean. Whether the CardRadioGroup is required.
     * @default false
     */
    required?: boolean;
    /**
     * Optional boolean. Whether the CardRadioGroup is disabled.
     * @default false
     */
    disabled?: boolean;
    /**
     * Optional boolean. Whether the CardRadioGroup is invalid.
     * @default false
     **/
    invalid?: boolean;
    /**
     * Optional string. The direction of the CardRadioGroup.
     * @default 'row'
     **/
    direction?: FlexPropsType['direction'];
    /**
     * CardRadioGroup  inner elements
     * @example
     * <CardRadioGroup>
     *  <CardRadioGroup.Item value="1">1</CardRadioGroup.Item>
     *  <CardRadioGroup.Item value="2">2</CardRadioGroup.Item>
     * </CardRadioGroup>
     *
     **/
    children: React.ReactNode;
    /**
     * Optional string. The className of the CardRadioGroup.
     * @default undefined
     **/
    className?: string;
    'aria-labelledby'?: string;
    'aria-describedby'?: string;
    'aria-label'?: string;
    /**
     * Optional string. The default value of the CardRadioGroup.
     * @default ''
     **/
    defaultValue?: string;
    /**
     * Optional string. Currently selected value of the CardRadioGroup.Item.
     **/
    value?: string;
    /**
     * Optional function. The callback function that is triggered when the value of the CardRadioGroup changes.
     **/
    onChange?: (value: string) => void;
}

declare function CardRadioIndicator({ slot, style, className, }: CardRadioIndicatorPropsType): React.JSX.Element;

declare namespace CardRadioIndicator {
    var displayName: string;
}

declare interface CardRadioIndicatorPropsType {
    slot?: 'top-left' | 'center-left' | 'bottom-left' | 'top-right' | 'center-right' | 'bottom-right';
    style?: React.CSSProperties;
    className?: string;
}

declare interface CardRadioPropsType extends Omit<React.ComponentPropsWithoutRef<'label'>, 'onChange'> {
    /**
     * Required string. Value of the CardRadio input.
     */
    value: string;
    /**
     * Optional boolean. Whether the Radio is required.
     * @default false
     */
    required?: boolean;
    /**
     * Optional boolean. Whether the Radio is disabled.
     * @default false
     */
    disabled?: boolean;
    /**
     * Optional boolean. Whether the Radio is invalid.
     * @default false
     */
    invalid?: boolean;
    /**
     * Optional string. ID of the Radio.
     */
    id?: string;
    /**
     * Optional string. Variant of the card. Default is 'outline'.
     */
    variant?: 'solid' | 'outline';
    /**
     * Optional string. Color of the card. Default is 'dark'.
     */
    color?: 'light' | 'dark';
    /**
     * Optional string. Additional class names.
     */
    className?: string;
    /**
     * Optional React.ReactNode. Children of the card. This is the place where label should be used and connected to the card.
     * @example <CardRadio>Card content</CardRadio>
     */
    children?: React.ReactNode;
    /**
     * Optional string. Width of the card.
     * @example <CardRadio width="100px" />
     */
    width?: React.CSSProperties['width'];
    /**
     * Optional string. Height of the card.
     * @example <CardRadio height="100px" />
     */
    height?: React.CSSProperties['height'];
    /**
     * Optional object. Inline styles.
     * @example <CardRadio style={--card-background-color: var(--green-20)} />
     */
    style?: StyleType_3;
    /**
     * Function called whenever the state of the Radio changes.
     */
    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
    /**
     * Optional string. ID of the element that labels the Radio.
     * @example <CardRadio aria-labelledby="label-id" />
     **/
    'aria-labelledby'?: string;
    /**
     * Optional string. ID of the element that describes the Radio.
     * @example <CardRadio aria-describedby="description-id" />
     **/
    'aria-describedby'?: string;
}

export declare const Checkbox: ({ checked, children, className, color, defaultChecked, description, disabled, errorMessage, id, indeterminate, invalid, labelSize, required, name, onChange, style, value, "aria-labelledby": ariaLabelledBy, ...props }: CheckboxPropsType) => React.JSX.Element;

declare type CheckboxColorType = 'dark' | 'light';

declare type CheckboxLabelSizeType = 'medium' | 'small';

export declare type CheckboxPropsType = {
    /**
     * Sets whether the checkbox is checked or unchecked.
     * @example <Checkbox checked />
     */
    checked?: boolean;
    /**
     * To be displayed to the right of the checkbox as a label. The label is clickable checkbox element.
     * @example <Checkbox>Label</Checkbox>
     */
    children?: React.ReactNode;
    /**
     * Optional string. Additional classnames.
     */
    className?: string;
    /**
     * Specify color variant of the checkbox that you want to use.
     * @example <Checkbox color="dark" />
     */
    color?: CheckboxColorType;
    /**
     * Sets whether the checkbox is initially checked.
     * @example <Checkbox defaultChecked />
     * @default false
     */
    defaultChecked?: boolean;
    /**
     * To be displayed below checkbox and its label. The description is not clickable. You can either pass text or your own component with custom styling.
     * @example <Checkbox description="More detailed description about this element. You can use here even some formatting and links." />
     */
    description?: React.ReactNode | string;
    /**
     * Sets whether the checkbox is disabled.
     * @example <Checkbox disabled />
     * @default false
     */
    disabled?: boolean;
    /**
     * To be displayed below checkbox and its label. The error message is not clickable. Note: you have to set `invalid` prop as well, to render the error message.
     * @example <Checkbox invalid errorMessage="Error message">Label</Checkbox>
     */
    errorMessage?: string;
    /**
     * ID assigned to the checkbox input. If not provided, random id will be generated.
     * @example <Checkbox id="my-checkbox-1" />
     */
    id?: string;
    /**
     * Sets whether the checkbox is displayed as indeterminate. Note: this prop doesn't modify the `checked` property.
     * @example <Checkbox indeterminate />
     * @default false
     */
    indeterminate?: boolean;
    /**
     * Sets whether the checkbox marked as invalid.
     * @example <Checkbox invalid />
     * @default false
     */
    invalid?: boolean;
    /**
     * Sets label size.
     * @example <Checkbox labelSize="small" />
     * @default false
     */
    labelSize?: CheckboxLabelSizeType;
    /**
     * The name of the checkbox input.
     * @example <Checkbox name="name" />
     */
    name?: string;
    /**
     * Function called with an object containing the react synthetic event, whenever the state of the checkbox changes.
     */
    onChange?: (arg0: React.SyntheticEvent<HTMLInputElement>) => void;
    /**
     * Style applied to the container.
     * @example <Checkbox style={{ '--checkboxColor': '#000' }} />
     */
    style?: StyleType;
    /**
     * Sets whether the checkbox input is marked as required. This doesn't affect checkbox style.
     * @example <Checkbox required />
     * @default false
     */
    required?: boolean;
    /**
     * Value of the checkbox input.
     * @example <Checkbox value="1" />
     */
    value?: string;
    /**
     * ID of a custom label, that describes the checkbox input.
     * @example <Checkbox aria-labelledby="my-custom-label" />
     */
    'aria-labelledby'?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'checked' | 'children' | 'className' | 'color' | 'defaultChecked' | 'description' | 'disabled' | 'errorMessage' | 'id' | 'indeterminate' | 'invalid' | 'labelSize' | 'name' | 'onChange' | 'style' | 'required' | 'value' | 'undefined'>;

export declare const Chip: {
    ({ children, className, value, style, name, disabled, size, multiSelect, checked, required, icon, onChange, "aria-describedby": ariaDescribedBy, ...props }: ChipPropsType): React.JSX.Element;
    Group: ({ className, children, disabled, name, required, value, onChange, multiSelect, wrap, ...props }: ChipGroupPropsType) => React.JSX.Element;
};

declare type ChipContextType = {
    disabled?: boolean;
    required?: boolean;
    multiSelect?: boolean;
    name: string;
    groupValue: string | null | undefined | Array<string>;
    onChipChange: (event: React.SyntheticEvent<HTMLInputElement>, chipValue: string | null | undefined) => void;
};

export declare const ChipGroup: ({ className, children, disabled, name, required, value, onChange, multiSelect, wrap, ...props }: ChipGroupPropsType) => React.JSX.Element;

export declare type ChipGroupPropsType = {
    /**
     * Chip group inner elements
     * @example <ChipGroup><Chip>Label</Chip></ChipGroup>
     */
    children?: React.ReactNode;
    /**
     * Optional string. Additional classnames.
     */
    className?: string | null | undefined;
    /**
     * Specify items display direction.
     * @example <ChipGroup direction="column" />
     * @default "row"
     */
    direction?: DirectionType_4;
    /**
     * Sets whether the group is disabled.
     * @example <ChipGroup disabled />
     */
    disabled?: boolean;
    /**
     * Sets whether the group is required.
     * @example <ChipGroup required />
     */
    required?: boolean;
    /**
     * The name of Chip inputs.
     * @example <ChipGroup name="name" />
     */
    name?: string;
    /**
     * Function called with an object containing the react synthetic event, whenever selected radio input changes.
     */
    onChange?: (event: React.SyntheticEvent<HTMLInputElement>, value: string | null | undefined) => void;
    /**
     * Sets whether the Chip is multi select or single select.
     * @example <Chip multiSelect />
     */
    multiSelect?: boolean;
    /**
     * Currently selected radio input.
     * @example <ChipGroup value="1"><Chip value="1">Label</Chip></ChipGroup>
     */
    value?: string | null | undefined | Array<string>;
    /**
     * It will wrap component
     * @example <Flex wrap>
     *            component content
     *          </Flex>
     */
    wrap?: ResponsivePropType<boolean>;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className' | 'direction' | 'disabled' | 'name' | 'onChange' | 'value' | 'multiSelect' | 'as' | 'wrap'>;

export declare type ChipPropsType = {
    children: React.ReactNode;
    /**
     * Sets whether the chip is checked or unchecked.
     * @example <Chip checked />
     */
    checked?: boolean;
    /**
     * Sets whether the Chip is multi select or single select.
     * @example <Chip multiSelect />
     */
    multiSelect?: boolean;
    /**
     * Optional string. Additional classnames.
     */
    className?: string | null | undefined;
    /**
     * Sets whether the Chip is disabled.
     * @example <Chip disabled />
     */
    disabled?: boolean;
    /**
     * Sets whether the Chip is required.
     * @example <Chip required />
     */
    required?: boolean;
    /**
     * Sets size.
     * @example <Chip size="s" />
     * @default m
     */
    size?: ChipSizeType;
    /**
     * The name of the chip group.
     * @example <Chip name="subjects" />
     */
    name?: string;
    /**
     * Style applied to the container.
     * @example <Chip style={{ '--chipBorderColor': '#000' }} />
     */
    style?: StyleType_4;
    /**
     * Value of the input.
     * @example <Chip value="1" />
     */
    value: string;
    /**
     * You can render icon inside the chip on the left side
     * @example <Chip
     *           icon={<Icon variant="funnel" color="icon-white" size={16} />}
     *          >
     *            Math
     *          </Chip>
     */
    icon?: React.ReactNode;
    /**
     * Function called with an object containing the react synthetic event, whenever the state of the chip changes.
     */
    onChange?: (arg0: React.SyntheticEvent<HTMLInputElement>) => void;
    'aria-describedby'?: string;
} & Omit<React.AllHTMLAttributes<HTMLLabelElement>, 'checked' | 'children' | 'size' | 'name' | 'onChange' | 'style' | 'value' | 'icon'>;

declare type ChipSizeType = 'm' | 's';

declare const COLOR: {
    readonly BLUE: "blue";
    readonly BLACK: "black";
};

declare type ColorType = 'transparent' | 'white' | 'gray-40' | 'gray-20' | 'gray-10' | 'blue-40' | 'blue-30' | 'blue-20' | 'green-40' | 'green-30' | 'green-20' | 'green-10' | 'indigo-40' | 'indigo-20' | 'indigo-10' | 'red-40' | 'red-30' | 'red-20' | 'yellow-40' | 'yellow-20';

declare type ColorType_2 = 'gray-70' | 'gray-50' | 'gray-40' | 'gray-20' | 'gray-10' | 'blue-40' | 'blue-30' | 'blue-20' | 'green-40' | 'green-30' | 'green-20' | 'indigo-40' | 'indigo-30' | 'indigo-20' | 'yellow-40' | 'yellow-30' | 'yellow-20';

declare type ColorType_3 = 'white' | 'transparent' | 'blue-20' | 'gray-20';

declare type ColorType_4 = typeof COLOR[keyof typeof COLOR];

declare type ColorType_5 = 'dark' | 'light';

export declare const ContentBox: ({ children, spacedTop, spacedBottom, spaced, spacedSmall, full, className, ...props }: ContentBoxPropsType) => React.JSX.Element;

export declare const ContentBoxActions: ({ children, spacedTop, spacedBottom, className, align, ...props }: ContentBoxActionsPropsType) => React.JSX.Element;

export declare type ContentBoxActionsPropsType = {
    children: React.ReactNode;
    className?: string | null | undefined;
    spacedTop?: SizeType_2 | null | undefined;
    spacedBottom?: SizeType_2 | null | undefined;
    align?: AligmentType_3;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className' | 'spacedTop' | 'spacedBottom' | 'align'>;

export declare const ContentBoxContent: ({ children, full, spacedTop, spacedBottom, className, align, ...props }: ContentBoxContentPropsType) => React.JSX.Element;

export declare type ContentBoxContentPropsType = {
    children: React.ReactNode;
    full?: boolean | null | undefined;
    className?: string | null | undefined;
    spacedTop?: SizeType_3 | null | undefined;
    spacedBottom?: SizeType_3 | null | undefined;
    align?: AligmentType_4;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'full' | 'className' | 'spacedTop' | 'spacedBottom' | 'align'>;

export declare const ContentBoxHeader: ({ children, spaced, spacedSmall, spacedTop, spacedBottom, className, align, ...props }: ContentBoxHeaderPropsType) => React.JSX.Element;

export declare type ContentBoxHeaderPropsType = {
    children: React.ReactNode;
    spaced?: boolean | null | undefined;
    spacedSmall?: boolean | null | undefined;
    full?: boolean | null | undefined;
    className?: string | null | undefined;
    spacedTop?: SizeType_4 | null | undefined;
    spacedBottom?: SizeType_4 | null | undefined;
    align?: AligmentType_5;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'spaced' | 'spacedSmall' | 'full' | 'className' | 'spacedTop' | 'spacedBottom' | 'align'>;

export declare type ContentBoxPropsType = {
    children: React.ReactNode;
    spaced?: boolean | null | undefined;
    spacedSmall?: boolean | null | undefined;
    full?: boolean | null | undefined;
    className?: string | null | undefined;
    spacedTop?: SizeType | null | undefined;
    spacedBottom?: SizeType | null | undefined;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'spaced' | 'spacedSmall' | 'full' | 'className' | 'spacedTop' | 'spacedBottom'>;

export declare const ContentBoxTitle: ({ children, spaced, spacedSmall, spacedTop, spacedBottom, className, align, }: ContentBoxTitlePropsType) => React.JSX.Element;

export declare type ContentBoxTitlePropsType = {
    children: React.ReactNode;
    spaced?: boolean | null | undefined;
    spacedSmall?: boolean | null | undefined;
    className?: string | null | undefined;
    spacedTop?: SizeType_5 | null | undefined;
    spacedBottom?: SizeType_5 | null | undefined;
    align?: AligmentType_6;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'spaced' | 'spacedSmall' | 'className' | 'spacedTop' | 'spacedBottom' | 'align'>;

export declare const Counter: ({ icon, children, className, size, color, variant, withAnimation, "aria-label": ariaLabel, ...props }: CounterPropsType) => React.JSX.Element;

declare type CounterColorType = 'blue' | 'green' | 'indigo' | 'red' | 'yellow' | 'gray' | 'achromatic';

export declare type CounterPropsType = {
    /**
     * Children to be rendered inside Counter
     * @example <Counter>
     *            text
     *          </Counter>
     */
    children: React.ReactNode;
    /**
     * You can render icon inside of counter
     * @example <Counter icon="points">
     *            1
     *          </Counter>
     */
    icon?: IconType | null | undefined;
    /**
     * There are two sizes options for counters, not need to be specify, default is xs
     * @example <Counter>
     *            1pts
     *          </Counter>
     */
    size?: CounterSizeType | null | undefined;
    /**
     * Counter background color
     * @example <Counter color="blue-60">1</Counter>
     */
    color?: CounterColorType | null | undefined;
    /**
     * Specify variant of counter
     * @example <Counter variant="solid">1</Counter>
     */
    variant?: CounterVariantType;
    /**
     * Optional boolean for counter with animation
     * @example <Counter withAnimation>
     *            12
     *          </Counter>
     */
    withAnimation?: boolean;
    /**
     * Additional class names
     */
    className?: string;
    /**
     * Label describing counter
     */
    'aria-label'?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'icon' | 'size' | 'color' | 'variant' | 'withAnimation' | 'className' | 'undefined'>;

declare type CounterSizeType = 'xs' | 'xxs';

declare type CounterVariantType = 'solid' | 'light';

declare function createEffect({ type, ...customEffectProps }: Readonly<TransitionEffectType & {
    type?: PredefinedEffectType;
}>): TransitionEffectType;

export declare const Dialog: {
    ({ open, onExitTransitionEnd, ...otherProps }: DialogPropsType): React.JSX.Element | null;
    Overlay: ({ children }: DialogOverlayPropsType) => React.JSX.Element;
};

export declare const DialogBody: ({ children, className }: DialogBodyPropsType) => React.JSX.Element;

export declare type DialogBodyPropsType = Readonly<{
    children: React.ReactNode;
    className?: string;
}>;

export declare const DialogCloseButton: ({ onClick, className, label, "data-testid": dataTestId, disabled, }: DialogCloseButtonPropsType) => React.JSX.Element;

export declare type DialogCloseButtonPropsType = Readonly<{
    onClick?: () => void;
    className?: string;
    label?: string;
    'data-testid'?: string;
    disabled?: boolean;
}>;

export declare const DialogHeader: ({ children, className, id }: DialogHeaderPropsType) => React.JSX.Element;

export declare type DialogHeaderPropsType = Readonly<{
    children: React.ReactNode;
    className?: string;
    id?: string;
}>;

export declare type DialogOverlayPropsType = {
    children: React.ReactNode;
    slot: SlotType;
};

export declare type DialogPropsType = Readonly<{
    open: boolean;
    children: React.ReactNode;
    size?: 's' | 'm' | 'l' | 'xl' | 'fullscreen';
    motionPreset?: 'none' | 'default';
    'aria-labelledby'?: string;
    'aria-label'?: string;
    'aria-describedby'?: string;
    'aria-description'?: string;
    /**
     * https://github.com/w3c/aria-practices/issues/1241
     * Fix for Safari, when multiple nodes with aria-modal="true" exists.
     * Use this to set aria-modal to "false" when you open another (no need when nesting) dialog.
     * This will prevent loosing focus on last opened dialog.
     */
    'aria-modal'?: boolean;
    /**
     * Specify the dialog scrolling behavior when
     * the content is longer than the viewport.
     */
    scroll?: 'inside' | 'outside';
    zIndex?: number | string;
    /**
     * Fires on user actions like clicking outside
     * the Dialog or the Escape key.
     */
    onDismiss?: () => void;
    onEntryTransitionEnd?: () => void;
    onExitTransitionEnd?: () => void;
    'data-testid'?: string;
    position?: 'center' | 'top';
    overlay?: 'light' | 'dark';
    appearance?: 'none' | 'dialog';
}>;

declare type DirectionType = 'to-right' | 'centered' | 'space-between' | 'space-around' | 'space-evenly';

declare type DirectionType_2 = 'left' | 'right' | 'top' | 'bottom';

declare type DirectionType_3 = 'row' | 'column';

declare type DirectionType_4 = 'row' | 'column';

export declare const Dropdown: ({ name, links, initiallyOpened, color, fullWidth, onItemSelect, }: DropdownPropsType) => React.JSX.Element;

export declare type DropdownPropsType = Readonly<{
    name: string;
    links: Array<LinksType>;
    initiallyOpened?: boolean;
    color?: 'default' | 'white';
    fullWidth?: boolean;
    onItemSelect?: (e: React.SyntheticEvent<HTMLAnchorElement>, link: LinksType) => void;
}>;

declare type ElementType = 'a' | 'button';

export declare const FileHandler: ({ children, color, iconType, thumbnailSrc, src, loading, onClose, onClick, textRef, className, ariaCloseButtonLabel, statusLabel, ...props }: FileHandlerPropsType) => React.JSX.Element;

declare type FileHandlerColorType = 'gray-20' | 'white';

export declare type FileHandlerPropsType = Readonly<{
    /**
     * Specify color of the background for FileHandler
     * @example <FileHandler color="white">
     *            text
     *          </FileHandler>
     * @default 'gray-20'
     */
    color?: FileHandlerColorType;
    /**
     * Specify iconType to display SG icon as the image inside FileHandler
     * @example <FileHandler iconType="answer">
     *            text
     *          </FileHandler>
     * @default attachment
     */
    iconType?: IconType;
    /**
     * Specify thumbnailSrc of the image inside FileHandler
     * @example <FileHandler thumbnailSrc="https://source.unsplash.com/64x64/?bird">
     *            text
     *          </FileHandler>
     */
    thumbnailSrc?: string;
    /**
     * Specify src of the file to display it in the new tab when link is clicked
     * @example <FileHandler src="https://source.unsplash.com/64x64/?bird">
     *            text
     *          </FileHandler>
     */
    src?: string;
    /**
     * Optional boolean for loading state of FileHandler
     * @example <FileHandler loading>
     *            text
     *          </FileHandler>
     * @default false
     */
    loading?: boolean;
    /**
     * Callback, called by clicking on **close** button. If specified, button will be added automatically
     * @example <FileHandler onClose={() => doSomething()}>
     *            text
     *          </FileHandler>
     */
    onClose?: (arg0: React.MouseEvent<HTMLButtonElement>) => void;
    /**
     * Callback, called by clicking on link
     * @example <FileHandler
     *           src="https://source.unsplash.com/64x64/?bird"
     *           onClose={() => doSomething()}
     *          >
     *            text
     *          </FileHandler>
     */
    onClick?: (arg0: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => unknown;
    /**
     * Additional function to set ref for text
     */
    textRef?: {
        current: HTMLSpanElement | null;
    };
    /**
     * Additional class names
     */
    className?: string;
    /**
     * Children to be rendered inside FileHandler
     * @example <FileHandler>
     *            text
     *          </FileHandler>
     */
    children?: React.ReactNode;
    /**
     * An accessible, short-text description of `onClose` action,
     * defaults to 'Close'
     */
    ariaCloseButtonLabel?: string;
    /**
     * An accessible, short-text description for loading
     * and uploded status.
     */
    statusLabel?: AriaStatusLabelType;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'color' | 'iconType' | 'thumbnailSrc' | 'src' | 'loading' | 'onClose' | 'onClick' | 'textRef' | 'className' | 'children' | 'ariaCloseButtonLabel' | 'statusLabel'>>;

export declare const FlashMessage: ({ text, type, className, ...props }: FlashMessagePropsType) => React.JSX.Element;

export declare type FlashMessagePropsType = {
    text: string;
    type?: FlashMessageTypeType;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'text' | 'type' | 'className'>;

declare type FlashMessageTypeType = 'default' | 'success' | 'error' | 'info';

export declare const Flex: React.ForwardRefExoticComponent<{
    /**
     * Children to be render inside of the Flex.
     * @example <Flex>
     *            children to be render here
     *          </Flex>
     *
     */
    children: React.ReactNode;
    /**
     * Html tag used as container
     */
    as?: FlexContainerType | undefined;
    /**
     * Additional class names
     */
    className?: string | undefined;
    /**
     * component will be rendered on 100% width of a parent
     * @example <Flex fullWidth>
     *            component content
     *          </Flex>
     */
    fullWidth?: ResponsivePropType<boolean> | undefined;
    /**
     * component will be rendered on 100% height of a parent
     * @example <Flex fullHeight>
     *            component content
     *          </Flex>
     */
    fullHeight?: ResponsivePropType<boolean> | undefined;
    /**
     * It will set flex-shirnk to 0
     * @example <Flex noShrink>
     *            component content
     *          </Flex>
     */
    noShrink?: ResponsivePropType<boolean> | undefined;
    /**
     * Specify flex direction
     * @example <Flex direction="column">
     *            component content
     *          </Flex>
     * @see direction=column https://styleguide.brainly.com/latest/docs/interactive.html?direction=column#flexbox
     * @see direction=column-reverse https://styleguide.brainly.com/latest/docs/interactive.html?direction=column-reverse#flexbox
     * @see direction=row https://styleguide.brainly.com/latest/docs/interactive.html?direction=row#flexbox
     * @see direction=row-reverse https://styleguide.brainly.com/latest/docs/interactive.html?direction=row-reverse#flexbox
     */
    direction?: ResponsivePropType<FlexDirectionType> | undefined;
    /**
     * Specify flex justify content
     * @example <Flex justifyContent="space-between">
     *            component content
     *          </Flex>
     * @see justifyContent=center https://styleguide.brainly.com/latest/docs/interactive.html?justifyContent=center#flexbox
     * @see justifyContent=flex-start https://styleguide.brainly.com/latest/docs/interactive.html?ustifyContent=flex-start#flexbox
     * @see justifyContent=flex-end https://styleguide.brainly.com/latest/docs/interactive.html?justifyContent=flex-end#flexbox
     * @see justifyContent=space-between https://styleguide.brainly.com/latest/docs/interactive.html?justifyContent=space-between#flexbox
     * @see justifyContent=space-around https://styleguide.brainly.com/latest/docs/interactive.html?justifyContent=space-around#flexbox
     * @see justifyContent=space-evenly https://styleguide.brainly.com/latest/docs/interactive.html?justifyContent=space-evenly#flexbox
     * @see justifyContent=stretch https://styleguide.brainly.com/latest/docs/interactive.html?justifyContent=stretch#flexbox
     */
    justifyContent?: ResponsivePropType<FlexJustifyValuesType> | undefined;
    /**
     * Specify flex align content
     * @example <Flex alignContent="center">
     *            component content
     *          </Flex>
     * @see alignContent=center https://styleguide.brainly.com/latest/docs/interactive.html?alignContent=center#flexbox
     * @see alignContent=flex-start https://styleguide.brainly.com/latest/docs/interactive.html?alignContent=flex-start#flexbox
     * @see alignContent=flex-end https://styleguide.brainly.com/latest/docs/interactive.html?alignContent=flex-end#flexbox
     * @see alignContent=baseline https://styleguide.brainly.com/latest/docs/interactive.html?alignContent=baseline#flexbox
     * @see alignContent=stretch https://styleguide.brainly.com/latest/docs/interactive.html?alignContent=stretch#flexbox
     */
    alignContent?: ResponsivePropType<FlexAlignmentValuesType> | undefined;
    /**
     * Specify flex align items
     * @example <Flex alignItems="center">
     *            component content
     *          </Flex>
     * @see alignItems=center https://styleguide.brainly.com/latest/docs/interactive.html?alignItems=center#flexbox
     * @see alignItems=flex-start https://styleguide.brainly.com/latest/docs/interactive.html?alignItems=flex-start#flexbox
     * @see alignItems=flex-end https://styleguide.brainly.com/latest/docs/interactive.html?alignItems=flex-end#flexbox
     * @see alignItems=baseline https://styleguide.brainly.com/latest/docs/interactive.html?alignItems=baseline#flexbox
     * @see alignItems=stretch https://styleguide.brainly.com/latest/docs/interactive.html?alignContent=stretch#flexbox
     */
    alignItems?: ResponsivePropType<FlexAlignmentValuesType> | undefined;
    /**
     * Specify flex align self
     * @example <Flex alignSelf="center">
     *            component content
     *          </Flex>
     * @see alignSelf=center https://styleguide.brainly.com/latest/docs/interactive.html?alignSelf=center#flexbox
     * @see alignSelf=flex-start https://styleguide.brainly.com/latest/docs/interactive.html?alignSelf=flex-start#flexbox
     * @see alignSelf=flex-end https://styleguide.brainly.com/latest/docs/interactive.html?alignSelf=flex-end#flexbox
     * @see alignSelf=baseline https://styleguide.brainly.com/latest/docs/interactive.html?alignSelf=baseline#flexbox
     * @see alignSelf=stretch https://styleguide.brainly.com/latest/docs/interactive.html?alignSelf=stretch#flexbox
     */
    alignSelf?: ResponsivePropType<FlexAlignmentValuesType> | undefined;
    /**
     * It will set flex display to inline-flex
     * @example <Flex inlineFlex>
     *            component content
     *          </Flex>
     */
    inlineFlex?: ResponsivePropType<boolean> | undefined;
    /**
     * It will wrap component
     * @example <Flex wrap>
     *            component content
     *          </Flex>
     */
    wrap?: ResponsivePropType<boolean> | undefined;
    /**
     * It will wrap reverse component
     * @example <Flex wrapReverse>
     *            component content
     *          </Flex>
     */
    wrapReverse?: ResponsivePropType<boolean> | undefined;
    /**
     * Specify margin for flex based on spacings: none: 0px, xxs: 4px, xs: 8px, s: 16px, m: 24px, l: 40px, xl: 64px, xxl: 104px, xxxl: 168px, xxxxl: 272px
     * @example <Flex margin="m">
     *            component content
     *          </Flex>
     */
    margin?: ResponsivePropType<FlexMarginsType> | undefined;
    /**
     * Specify margin top for flex based on spacings: none: 0px, xxs: 4px, xs: 8px, s: 16px, m: 24px, l: 40px, xl: 64px, xxl: 104px, xxxl: 168px, xxxxl: 272px
     * @example <Flex marginTop="m">
     *            component content
     *          </Flex>
     */
    marginTop?: ResponsivePropType<FlexMarginsType> | undefined;
    /**
     * Specify margin right for flex based on spacings: none: 0px, xxs: 4px, xs: 8px, s: 16px, m: 24px, l: 40px, xl: 64px, xxl: 104px, xxxl: 168px, xxxxl: 272px
     * @example <Flex marginRight="m">
     *            component content
     *          </Flex>
     */
    marginRight?: ResponsivePropType<FlexMarginsType> | undefined;
    /**
     * Specify margin bottom for flex based on spacings: none: 0px, xxs: 4px, xs: 8px, s: 16px, m: 24px, l: 40px, xl: 64px, xxl: 104px, xxxl: 168px, xxxxl: 272px
     * @example <Flex marginBottom="m">
     *            component content
     *          </Flex>
     */
    marginBottom?: ResponsivePropType<FlexMarginsType> | undefined;
    /**
     * Specify margin left for flex based on spacings: none: 0px, xxs: 4px, xs: 8px, s: 16px, m: 24px, l: 40px, xl: 64px, xxl: 104px, xxxl: 168px, xxxxl: 272px
     * @example <Flex marginLeft="m">
     *            component content
     *          </Flex>
     */
    marginLeft?: ResponsivePropType<FlexMarginsType> | undefined;
    /**
     * Specify gap between flex children: none: 0px, xxs: 4px, xs: 8px, s: 16px, m: 24px, l: 40px, xl: 64px, xxl: 104px, xxxl: 168px, xxxxl: 272px
     * @example <Flex gap="m">
     *            component content
     *          </Flex>
     */
    gap?: ResponsivePropType<FlexGapValueType> | undefined;
    /**
     * Specify flex value:
     * @example <Flex flex="auto">
     *            component content
     *          </Flex>
     */
    flex?: ResponsivePropType<FlexFlexValueType> | undefined;
} & Omit<React.AllHTMLAttributes<HTMLElement>, "children" | "className" | "as" | "wrap" | "fullWidth" | "fullHeight" | "noShrink" | "direction" | "justifyContent" | "alignContent" | "alignItems" | "alignSelf" | "inlineFlex" | "wrapReverse" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "gap" | "flex"> & React.RefAttributes<HTMLElement>>;

declare type FlexAlignmentValuesType = 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';

declare type FlexContainerType = 'a' | 'article' | 'aside' | 'div' | 'footer' | 'form' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'header' | 'input' | 'li' | 'main' | 'nav' | 'ol' | 'p' | 'pre' | 'section' | 'span' | 'textarea' | 'ul';

declare type FlexDirectionType = 'column' | 'column-reverse' | 'row' | 'row-reverse';

declare type FlexFlexValueType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' | 'initial' | 'none';

declare type FlexGapValueType = 'none' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';

declare type FlexJustifyValuesType = 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';

declare type FlexMarginsType = 'none' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl';

export declare type FlexPropsType = {
    /**
     * Children to be render inside of the Flex.
     * @example <Flex>
     *            children to be render here
     *          </Flex>
     *
     */
    children: React.ReactNode;
    /**
     * Html tag used as container
     */
    as?: FlexContainerType;
    /**
     * Additional class names
     */
    className?: string;
    /**
     * component will be rendered on 100% width of a parent
     * @example <Flex fullWidth>
     *            component content
     *          </Flex>
     */
    fullWidth?: ResponsivePropType<boolean>;
    /**
     * component will be rendered on 100% height of a parent
     * @example <Flex fullHeight>
     *            component content
     *          </Flex>
     */
    fullHeight?: ResponsivePropType<boolean>;
    /**
     * It will set flex-shirnk to 0
     * @example <Flex noShrink>
     *            component content
     *          </Flex>
     */
    noShrink?: ResponsivePropType<boolean>;
    /**
     * Specify flex direction
     * @example <Flex direction="column">
     *            component content
     *          </Flex>
     * @see direction=column https://styleguide.brainly.com/latest/docs/interactive.html?direction=column#flexbox
     * @see direction=column-reverse https://styleguide.brainly.com/latest/docs/interactive.html?direction=column-reverse#flexbox
     * @see direction=row https://styleguide.brainly.com/latest/docs/interactive.html?direction=row#flexbox
     * @see direction=row-reverse https://styleguide.brainly.com/latest/docs/interactive.html?direction=row-reverse#flexbox
     */
    direction?: ResponsivePropType<FlexDirectionType>;
    /**
     * Specify flex justify content
     * @example <Flex justifyContent="space-between">
     *            component content
     *          </Flex>
     * @see justifyContent=center https://styleguide.brainly.com/latest/docs/interactive.html?justifyContent=center#flexbox
     * @see justifyContent=flex-start https://styleguide.brainly.com/latest/docs/interactive.html?ustifyContent=flex-start#flexbox
     * @see justifyContent=flex-end https://styleguide.brainly.com/latest/docs/interactive.html?justifyContent=flex-end#flexbox
     * @see justifyContent=space-between https://styleguide.brainly.com/latest/docs/interactive.html?justifyContent=space-between#flexbox
     * @see justifyContent=space-around https://styleguide.brainly.com/latest/docs/interactive.html?justifyContent=space-around#flexbox
     * @see justifyContent=space-evenly https://styleguide.brainly.com/latest/docs/interactive.html?justifyContent=space-evenly#flexbox
     * @see justifyContent=stretch https://styleguide.brainly.com/latest/docs/interactive.html?justifyContent=stretch#flexbox
     */
    justifyContent?: ResponsivePropType<FlexJustifyValuesType>;
    /**
     * Specify flex align content
     * @example <Flex alignContent="center">
     *            component content
     *          </Flex>
     * @see alignContent=center https://styleguide.brainly.com/latest/docs/interactive.html?alignContent=center#flexbox
     * @see alignContent=flex-start https://styleguide.brainly.com/latest/docs/interactive.html?alignContent=flex-start#flexbox
     * @see alignContent=flex-end https://styleguide.brainly.com/latest/docs/interactive.html?alignContent=flex-end#flexbox
     * @see alignContent=baseline https://styleguide.brainly.com/latest/docs/interactive.html?alignContent=baseline#flexbox
     * @see alignContent=stretch https://styleguide.brainly.com/latest/docs/interactive.html?alignContent=stretch#flexbox
     */
    alignContent?: ResponsivePropType<FlexAlignmentValuesType>;
    /**
     * Specify flex align items
     * @example <Flex alignItems="center">
     *            component content
     *          </Flex>
     * @see alignItems=center https://styleguide.brainly.com/latest/docs/interactive.html?alignItems=center#flexbox
     * @see alignItems=flex-start https://styleguide.brainly.com/latest/docs/interactive.html?alignItems=flex-start#flexbox
     * @see alignItems=flex-end https://styleguide.brainly.com/latest/docs/interactive.html?alignItems=flex-end#flexbox
     * @see alignItems=baseline https://styleguide.brainly.com/latest/docs/interactive.html?alignItems=baseline#flexbox
     * @see alignItems=stretch https://styleguide.brainly.com/latest/docs/interactive.html?alignContent=stretch#flexbox
     */
    alignItems?: ResponsivePropType<FlexAlignmentValuesType>;
    /**
     * Specify flex align self
     * @example <Flex alignSelf="center">
     *            component content
     *          </Flex>
     * @see alignSelf=center https://styleguide.brainly.com/latest/docs/interactive.html?alignSelf=center#flexbox
     * @see alignSelf=flex-start https://styleguide.brainly.com/latest/docs/interactive.html?alignSelf=flex-start#flexbox
     * @see alignSelf=flex-end https://styleguide.brainly.com/latest/docs/interactive.html?alignSelf=flex-end#flexbox
     * @see alignSelf=baseline https://styleguide.brainly.com/latest/docs/interactive.html?alignSelf=baseline#flexbox
     * @see alignSelf=stretch https://styleguide.brainly.com/latest/docs/interactive.html?alignSelf=stretch#flexbox
     */
    alignSelf?: ResponsivePropType<FlexAlignmentValuesType>;
    /**
     * It will set flex display to inline-flex
     * @example <Flex inlineFlex>
     *            component content
     *          </Flex>
     */
    inlineFlex?: ResponsivePropType<boolean>;
    /**
     * It will wrap component
     * @example <Flex wrap>
     *            component content
     *          </Flex>
     */
    wrap?: ResponsivePropType<boolean>;
    /**
     * It will wrap reverse component
     * @example <Flex wrapReverse>
     *            component content
     *          </Flex>
     */
    wrapReverse?: ResponsivePropType<boolean>;
    /**
     * Specify margin for flex based on spacings: none: 0px, xxs: 4px, xs: 8px, s: 16px, m: 24px, l: 40px, xl: 64px, xxl: 104px, xxxl: 168px, xxxxl: 272px
     * @example <Flex margin="m">
     *            component content
     *          </Flex>
     */
    margin?: ResponsivePropType<FlexMarginsType>;
    /**
     * Specify margin top for flex based on spacings: none: 0px, xxs: 4px, xs: 8px, s: 16px, m: 24px, l: 40px, xl: 64px, xxl: 104px, xxxl: 168px, xxxxl: 272px
     * @example <Flex marginTop="m">
     *            component content
     *          </Flex>
     */
    marginTop?: ResponsivePropType<FlexMarginsType>;
    /**
     * Specify margin right for flex based on spacings: none: 0px, xxs: 4px, xs: 8px, s: 16px, m: 24px, l: 40px, xl: 64px, xxl: 104px, xxxl: 168px, xxxxl: 272px
     * @example <Flex marginRight="m">
     *            component content
     *          </Flex>
     */
    marginRight?: ResponsivePropType<FlexMarginsType>;
    /**
     * Specify margin bottom for flex based on spacings: none: 0px, xxs: 4px, xs: 8px, s: 16px, m: 24px, l: 40px, xl: 64px, xxl: 104px, xxxl: 168px, xxxxl: 272px
     * @example <Flex marginBottom="m">
     *            component content
     *          </Flex>
     */
    marginBottom?: ResponsivePropType<FlexMarginsType>;
    /**
     * Specify margin left for flex based on spacings: none: 0px, xxs: 4px, xs: 8px, s: 16px, m: 24px, l: 40px, xl: 64px, xxl: 104px, xxxl: 168px, xxxxl: 272px
     * @example <Flex marginLeft="m">
     *            component content
     *          </Flex>
     */
    marginLeft?: ResponsivePropType<FlexMarginsType>;
    /**
     * Specify gap between flex children: none: 0px, xxs: 4px, xs: 8px, s: 16px, m: 24px, l: 40px, xl: 64px, xxl: 104px, xxxl: 168px, xxxxl: 272px
     * @example <Flex gap="m">
     *            component content
     *          </Flex>
     */
    gap?: ResponsivePropType<FlexGapValueType>;
    /**
     * Specify flex value:
     * @example <Flex flex="auto">
     *            component content
     *          </Flex>
     */
    flex?: ResponsivePropType<FlexFlexValueType>;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'as' | 'className' | 'fullWidth' | 'fullHeight' | 'noShrink' | 'direction' | 'justifyContent' | 'alignContent' | 'alignItems' | 'alignSelf' | 'inlineFlex' | 'wrap' | 'wrapReverse' | 'margin' | 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft' | 'gap' | 'flex'>;

export declare function getIconGroup(iconName: string): string;

declare type GroupedOptionsPropsType = {
    label: string;
    options: ReadonlyArray<OptionsPropsType>;
};

export declare const Header: ({ children, fixed, withDivider, className, ...props }: HeaderPropsType) => React.JSX.Element;

export declare const HeaderContainer: ({ children, className, ...props }: HeaderContainerPropsType) => React.JSX.Element;

export declare type HeaderContainerPropsType = {
    children: React.ReactNode;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className'>;

export declare const HeaderContent: ({ children, autoHeight, className, ...props }: HeaderContentPropsType) => React.JSX.Element;

export declare type HeaderContentPropsType = {
    children: React.ReactNode;
    autoHeight?: boolean;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'autoHeight' | 'className'>;

export declare const HeaderLeft: ({ children, className, ...props }: HeaderLeftPropsType) => React.JSX.Element;

export declare type HeaderLeftPropsType = {
    children?: React.ReactNode;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className'>;

export declare const HeaderMiddle: ({ children, className, ...props }: HeaderMiddlePropsType) => React.JSX.Element;

export declare type HeaderMiddlePropsType = {
    children?: React.ReactNode;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className'>;

export declare type HeaderPropsType = {
    children: React.ReactNode;
    withDivider?: boolean;
    fixed?: boolean;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'withDivider' | 'fixed' | 'className'>;

export declare const HeaderRight: ({ children, className, ...props }: HeaderRightPropsType) => React.JSX.Element;

export declare type HeaderRightPropsType = {
    children?: React.ReactNode;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className'>;

export declare const Headline: ({ children, as, size, extraBold, transform, align, color, className, inherited, ...props }: HeadlinePropsType) => React.JSX.Element;

declare type HeadlineAlignType = 'to-left' | 'to-center' | 'to-right' | 'justify';

declare type HeadlineAsType = 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'blockquote' | 'q' | 'strong' | 'em' | 'del' | 'ins';

export declare type HeadlinePropsType = {
    children?: React.ReactNode;
    size?: ResponsivePropType<HeadlineSizeType>;
    as?: HeadlineAsType;
    color?: TextColorType | null | undefined;
    transform?: ResponsivePropType<HeadlineTransformType | null | undefined>;
    align?: ResponsivePropType<HeadlineAlignType | null | undefined>;
    className?: string | null | undefined;
    extraBold?: ResponsivePropType<boolean | null | undefined>;
    inherited?: boolean | null | undefined;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'size' | 'type' | 'color' | 'transform' | 'align' | 'className' | 'extraBold' | 'inherited'>;

declare type HeadlineSizeType = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';

declare type HeadlineTransformType = 'uppercase' | 'lowercase' | 'capitalize';

export declare const hex: Record<string, string>;

export declare const HomeButton: ({ type, href, className, alt, "aria-label": ariaLabel, ...props }: HomeButtonPropsType) => React.JSX.Element;

declare type HomeButtonLogoTypeType = 'brainly' | 'eodev' | 'nosdevoirs' | 'znanija' | 'znanija-plus' | 'brainly-plus' | 'brainly-tutoring';

export declare type HomeButtonPropsType = {
    type?: HomeButtonLogoTypeType;
    href?: string;
    className?: string;
    alt?: string;
    'aria-label'?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'type' | 'href' | 'className' | 'alt' | 'undefined'>;

export declare const Icon: ({ color, size, type, children, as, className, title, description, ...props }: IconPropsType) => React.JSX.Element;

export declare const IconAsButton: ({ color, size, type, children, action, transparent, active, border, className, title, ...props }: IconAsButtonPropsType) => React.JSX.Element;

export declare type IconAsButtonPropsType = {
    size?: IconSizeType;
    color?: IconColorType;
    type?: IconType | null | undefined;
    children?: React.ReactElement<any> | null | undefined;
    border?: boolean;
    action?: boolean;
    transparent?: boolean;
    active?: boolean;
    href?: string;
    className?: string;
    title?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'size' | 'color' | 'type' | 'children' | 'border' | 'action' | 'transparent' | 'active' | 'href' | 'className' | 'title'>;

declare type IconAsType = 'div' | 'span';

declare type IconColorType = 'adaptive' | 'icon-black' | 'icon-white' | 'icon-blue-50' | 'icon-blue-60' | 'icon-indigo-50' | 'icon-indigo-60' | 'icon-green-50' | 'icon-green-60' | 'icon-yellow-50' | 'icon-yellow-60' | 'icon-red-50' | 'icon-red-60' | 'icon-gray-70' | 'icon-gray-60' | 'icon-gray-50' | 'icon-gray-40';

export declare type IconPropsType = ({
    /**
     * Additional class names
     */
    className?: string | null | undefined;
    /**
     * Icons colors example, see more in SG interactive
     * @example <Icon color="icon-black" type="answer" />
     * @see color="adaptive" https://styleguide.brainly.com/latest/docs/interactive.html?color=adaptive#icons
     */
    color?: IconColorType | null | undefined;
    /**
     * Icons size example, see more in SG interactive
     * @example <Icon size="24" type="answer" />
     * @see size="24" https://styleguide.brainly.com/latest/docs/interactive.html?size=24#icons
     */
    size?: IconSizeType_2 | null | undefined;
    /**
     * Icons types example, see more in SG interactive
     * @example <Icon size="24" type="answer" />
     * @see type="heart" https://styleguide.brainly.com/latest/docs/interactive.html?type=heart#icons
     */
    type: IconType;
    /**
     * Option to change tag to span, which allows correct HTML structure
     * @example  <Button
     variant="secondary"
     >
     Get +50
     <Icon
     type={iconTypes.POINTS}
     color="dark"
     size={16}
     as="span"
     />
     </Button>
     */
    as?: IconAsType;
    /**
     * An accessible, short-text description; defaults to `type`
     */
    title?: string;
    /**
     * An accessible, long-text description
     */
    description?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'className' | 'color' | 'size' | 'type' | 'as' | 'title' | 'description'>) | ({
    /**
     * Children to be rendered inside Icon
     */
    children: React.ReactNode;
    /**
     * Additional class names
     */
    className?: string | null | undefined;
    /**
     * Icons colors example, see more in SG interactive
     * @example <Icon color="icon-black" type="answer" />
     * @see color="adaptive" https://styleguide.brainly.com/latest/docs/interactive.html?color=adaptive#icons
     */
    color?: IconColorType | null | undefined;
    /**
     * Icons size example, see more in SG interactive
     * @example <Icon size="24" type="answer" />
     * @see size="24" https://styleguide.brainly.com/latest/docs/interactive.html?size=24#icons
     */
    size?: IconSizeType_2 | null | undefined;
    /**
     * Option to change tag to span, which allows correct HTML structure
     * @example  <Button
     variant="secondary"
     >
     Get +50
     <Icon
     type={iconTypes.POINTS}
     color="dark"
     size={16}
     as="span"
     />
     </Button>
     */
    as?: IconAsType;
    /**
     * An accessible, short-text description; defaults to `type`
     */
    title?: string;
    /**
     * An accessible, long-text description
     */
    description?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className' | 'color' | 'size' | 'as' | 'title' | 'description'>);

declare type IconSizeType = 'small' | 'normal';

declare type IconSizeType_2 = 16 | 24 | 32 | 40 | 56 | 80 | 104;

export declare type IconType = 'academic_cap' | 'achievement' | 'add_more' | 'ai' | 'all_questions' | 'answer_bubble' | 'answer' | 'answers' | 'apple' | 'archive_checked' | 'archive' | 'arrow_double_right' | 'arrow_down' | 'arrow_left' | 'arrow_right' | 'arrow_top_right' | 'arrow_up' | 'ask_bubble' | 'ask_parent_to_pay' | 'attachment' | 'autopublish' | 'bell_checked' | 'bell_outlined' | 'best_answer' | 'block' | 'bold' | 'brainly_oval' | 'brainly_parallelogram' | 'bulb_checked' | 'bulb_filled' | 'bulb' | 'bulleted_list' | 'calendar' | 'camera' | 'caret_down' | 'caret_up' | 'chapter' | 'chat' | 'check' | 'check_circle' | 'chevron_double_down' | 'chevron_double_right' | 'chevron_down' | 'chevron_left' | 'chevron_right' | 'chevron_up' | 'chevrons_horizontal' | 'circle' | 'clear' | 'clipboard' | 'clipboard_outlined' | 'close' | 'collapse' | 'comment_outlined' | 'comment' | 'counter' | 'credit_card' | 'crop' | 'crown_outlined' | 'crown' | 'cup' | 'cursor_select' | 'cyrillic' | 'discord' | 'document' | 'dot' | 'draw' | 'drawing_mode' | 'envelope' | 'equation' | 'eraser' | 'european' | 'exclamation_mark' | 'expand' | 'facebook' | 'filters' | 'forwad' | 'friend_add' | 'friend_checked' | 'friend_pending' | 'friend_remove' | 'friends' | 'fullscreen' | 'funnel' | 'ginny' | 'globe' | 'google' | 'graph' | 'greek' | 'heading' | 'heart_outlined' | 'heart' | 'highlight' | 'home' | 'how_to_scan' | 'image_library' | 'image' | 'influence' | 'info_outlined' | 'info' | 'instagram' | 'italic' | 'keyboard' | 'less' | 'line' | 'link' | 'linkedin' | 'lock_with_play' | 'logout' | 'math_scan' | 'medium' | 'megaphone' | 'menu' | 'message_new' | 'messages' | 'mic' | 'minimize' | 'mic_muted' | 'minus_in_circle_outlined' | 'money_transfer' | 'more' | 'multiselect_checked' | 'multiselect_unchecked' | 'notifications' | 'numbered_list' | 'open_in_new_tab' | 'options' | 'padlock_open' | 'padlock' | 'pause' | 'pdf' | 'pencil' | 'pi' | 'play' | 'plus' | 'points' | 'printer' | 'profile_settings' | 'profile_view' | 'profile' | 'question_alt' | 'question' | 'quote' | 'recent_questions_alt' | 'recent_questions' | 'rectangle' | 'reload' | 'report_flag_outlined' | 'report_flag' | 'rotate_90' | 'rotate' | 'search' | 'search_add' | 'seen' | 'send' | 'settings' | 'share' | 'shield' | 'sidebar_left' | 'sidebar_right' | 'smartphone' | 'sms' | 'spark' | 'sparks' | 'star_half_outlined' | 'star_half' | 'star_outlined' | 'star' | 'subtitle' | 'sup_sub' | 'symbols' | 'textbook' | 'thumb_down_outlined' | 'thumb_down' | 'thumb_up_outlined' | 'thumb_up' | 'title' | 'tiktok' | 'toughest_questions_alt' | 'toughest_questions' | 'trash' | 'triangle' | 'twitter' | 'underlined' | 'unseen' | 'upload' | 'user_block' | 'verified' | 'view_checked' | 'warning' | 'youtube' | 'gift';

export declare const Input: (props: InputPropsType) => React.JSX.Element;

declare type InputColorType = 'default' | 'white';

export declare type InputPropsType = {
    /**
     * Optional specification for input type
     * @example <Input type="email" placeholder="placeholder" />
     */
    type?: InputType | null | undefined;
    /**
     * Optional specification for input value, which can be string or number
     * @example <Input type="email" value={2} />
     */
    value?: string | number;
    /**
     * There are two sizes options for most of the form elements
     * @example <Input size="normal" placeholder="placeholder" />
     * @see size="normal" https://styleguide.brainly.com/latest/docs/interactive.html?size="normal"#input
     * @see size="large" https://styleguide.brainly.com/latest/docs/interactive.html?size="large"#input
     */
    size?: InputSizeType | null | undefined;
    /**
     * There are two color variants for form elements, default does not have to be specified
     * @example <Input color="white" placeholder="placeholder" />
     * @see color="default" https://styleguide.brainly.com/latest/docs/interactive.html?color="default"#input
     * @see color="white" https://styleguide.brainly.com/latest/docs/interactive.html?color="white"#input
     */
    color?: InputColorType | null | undefined;
    /**
     * Optional boolean to specified if it's valid
     * @example <Input valid placeholder="placeholder" />
     */
    valid?: boolean;
    /**
     * Optional boolean to specified if it's invalid
     * @example <Input invalid placeholder="placeholder" />
     */
    invalid?: boolean;
    /**
     * Optional boolean to specified if it's full width
     * @example <Input fullWidth placeholder="placeholder" />
     */
    fullWidth?: boolean;
    /**
     * Optional boolean to specified if it's with icon, used in search component
     * @example <Input withIcon placeholder="placeholder" />
     */
    withIcon?: boolean;
    /**
     * Optional Node if there should be an error message displayed
     * @example <Input errorMessage="This is an error" />
     */
    errorMessage?: React.ReactNode;
    /**
     * Additional class names
     */
    className?: string;
    /**
     * Additional function to set ref for input
     */
    setInputRef?: {
        current: HTMLInputElement | null | undefined;
    } | ((ref: (HTMLElement | null | undefined) | (HTMLInputElement | null | undefined)) => unknown);
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'type' | 'value' | 'size' | 'color' | 'valid' | 'invalid' | 'fullWidth' | 'withIcon' | 'errorMessage' | 'className' | 'setInputRef'>;

declare type InputSizeType = 's' | 'm' | 'l';

declare type InputType = 'button' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';

export declare const Label: ({ children, type, iconType, onClose, color, className, closeButtonLabel, iconTitle, iconAriaHidden, ...props }: LabelPropsType) => React.JSX.Element;

declare type LabelColorType = 'blue' | 'green' | 'indigo' | 'red' | 'yellow' | 'gray' | 'achromatic';

export declare type LabelPropsType = Readonly<{
    /**
     * Specify type of label
     * @example <Label
     *           type="default"
     *           color="blue"
     *          >
     *            example label
     *          </Label>
     * @see type="default" https://styleguide.brainly.com/latest/docs/interactive.html?type="default"#labels
     * @see type="solid" https://styleguide.brainly.com/latest/docs/interactive.html?type="solid"#labels
     * @see type="transparent" https://styleguide.brainly.com/latest/docs/interactive.html?type="transparent"#labels
     * @see type="transparent-color" https://styleguide.brainly.com/latest/docs/interactive.html?type="transparent-color"#labels
     */
    type?: LabelType;
    /**
     * Specify color for label
     * @example <Label
     *           type="default"
     *           color="blue"
     *          >
     *            example label
     *          </Label>
     * @see color="blue" https://styleguide.brainly.com/latest/docs/interactive.html?color="blue"#labels
     * @see color="green" https://styleguide.brainly.com/latest/docs/interactive.html?color="green"#labels
     * @see color="indigo" https://styleguide.brainly.com/latest/docs/interactive.html?color="indigo"#labels
     * @see color="red" https://styleguide.brainly.com/latest/docs/interactive.html?color="red"#labels
     * @see color="yellow" https://styleguide.brainly.com/latest/docs/interactive.html?color="yellow"#labels
     * @see color="gray" https://styleguide.brainly.com/latest/docs/interactive.html?color="gray"#labels
     * @see color="achromatic" https://styleguide.brainly.com/latest/docs/interactive.html?color="achromatic"#labels
     */
    color?: LabelColorType;
    /**
     * Icons types example, see more in SG interactive
     * @example <Label
     *           type="default"
     *           color="blue"
     *           iconType="heart"
     *          >
     *            example label
     *          </Label>
     * @see type="iconType" https://styleguide.brainly.com/latest/docs/interactive.html?iconType=heart#labels
     */
    iconType?: IconType;
    /**
     * Callback, called by clicking on **close** button. If specified, button will be added automatically
     * @example <Label
     *           type="default"
     *           color="blue"
     *           iconType="heart"
     *           onClose={() => doSomething()}
     *          >
     *            example label
     *          </Label>
     */
    onClose?: ((arg0: React.SyntheticEvent<HTMLButtonElement>) => void) | null | undefined;
    /**
     * Children to be rendered inside Label
     * @example <Label
     *           type="default"
     *           color="blue"
     *          >
     *            example label
     *          </Label>
     */
    children: React.ReactNode;
    /**
     * Additional class names
     */
    className?: string;
    /**
     * Accessible label for **close** button
     */
    closeButtonLabel?: string;
    /**
     * Accessible title for an icon
     */
    iconTitle?: string;
    /**
     * Hiding icon from accessibility tree
     */
    iconAriaHidden?: boolean;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'type' | 'color' | 'iconType' | 'onClose' | 'children' | 'className' | 'closeButtonLabel' | 'iconTitle' | 'iconAriaHidden'>>;

declare type LabelType = 'default' | 'solid' | 'transparent' | 'transparent-color';

export declare const Layout: ({ children, header, footer, reversedOrder, noMaxWidth, noMarginTop, fullPage, threeColumns, className, containerClassName, as: Type, ...props }: LayoutPropsType) => React.JSX.Element;

export declare const LayoutAsideContent: ({ children, className, as: Type, ...props }: LayoutAsideContentPropsType) => React.JSX.Element;

declare type LayoutAsideContentAsType = 'div' | 'main' | 'section' | 'article' | 'aside';

export declare type LayoutAsideContentPropsType = {
    className?: string | null | undefined;
    children: React.ReactNode;
    as?: LayoutAsideContentAsType;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'className' | 'children' | 'as'>;

declare type LayoutAsType = 'div' | 'main' | 'section' | 'article' | 'aside';

export declare const LayoutContent: ({ children, noMaxWidth, center, className, as: Type, ...props }: LayoutContentPropsType) => React.JSX.Element;

declare type LayoutContentAsType = 'div' | 'main' | 'section' | 'article' | 'aside';

export declare type LayoutContentPropsType = {
    className?: string | null | undefined;
    children: React.ReactNode;
    noMaxWidth?: boolean;
    center?: boolean;
    as?: LayoutContentAsType;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'className' | 'children' | 'noMaxWidth' | 'center' | 'as'>;

export declare type LayoutPropsType = {
    className?: string;
    containerClassName?: string;
    children: React.ReactNode;
    header?: React.ReactNode;
    footer?: React.ReactNode;
    noMaxWidth?: boolean;
    noMarginTop?: boolean;
    reversedOrder?: boolean;
    fullPage?: boolean;
    threeColumns?: boolean;
    as?: LayoutAsType;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'className' | 'containerClassName' | 'children' | 'header' | 'footer' | 'noMaxWidth' | 'noMarginTop' | 'reversedOrder' | 'fullPage' | 'threeColumns' | 'as'>;

export declare const LayoutSecondaryContent: ({ children, className, as: Type, ...props }: LayoutSecondaryContentPropsType) => React.JSX.Element;

declare type LayoutSecondaryContentAsType = 'div' | 'main' | 'section' | 'article' | 'aside';

export declare type LayoutSecondaryContentPropsType = {
    className?: string | null | undefined;
    children: React.ReactNode;
    as?: LayoutSecondaryContentAsType;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'className' | 'children' | 'as'>;

export declare const Link: (props: LinkPropsType) => React.JSX.Element;

export declare type LinkPropsType = {
    children?: React.ReactNode | null | undefined;
    as?: ElementType | null | undefined;
    href?: string | null | undefined;
    size?: ResponsivePropType<LinkSizeType>;
    color?: TextColorType | null | undefined;
    weight?: ResponsivePropType<TextWeightType>;
    transform?: ResponsivePropType<TextTransformType | null | undefined>;
    align?: ResponsivePropType<TextAlignType | null | undefined>;
    noWrap?: ResponsivePropType<boolean | null | undefined>;
    breakWords?: ResponsivePropType<boolean | null | undefined>;
    underlined?: boolean;
    unstyled?: boolean;
    emphasised?: boolean;
    disabled?: boolean;
    className?: string | null | undefined;
    inherited?: boolean;
    'aria-label'?: string;
    target?: TargetType_3;
    newTabLabel?: string;
    hideNewTabIndicator?: boolean;
    onClick?: (arg0: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => unknown;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'as' | 'href' | 'size' | 'color' | 'weight' | 'transform' | 'align' | 'noWrap' | 'breakWords' | 'underlined' | 'unstyled' | 'emphasised' | 'disabled' | 'className' | 'inherited' | 'undefined' | 'target' | 'newTabLabel' | 'hideNewTabIndicator' | 'onClick'>;

declare type LinkSizeType = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';

declare type LinksType = Readonly<{
    label: string;
    url: string;
}>;

export declare const List: ({ spaced, className, ordered, children, ...props }: ListPropsType) => React.JSX.Element;

export declare const ListItem: ({ children, className, ...props }: ListItemPropsType) => React.JSX.Element;

export declare const ListItemIcon: ({ small, children, className, ...props }: ListItemIconPropsType) => React.JSX.Element;

export declare type ListItemIconPropsType = {
    children?: React.ReactNode;
    className?: string;
    small?: boolean;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className' | 'small'>;

export declare type ListItemPropsType = {
    children?: React.ReactNode;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className'>;

export declare type ListPropsType = {
    children?: React.ReactNode;
    spaced?: boolean;
    className?: string;
    ordered?: boolean;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'spaced' | 'className' | 'ordered'>;

export declare const Logo: ({ type, className, alt, ...props }: LogoPropsType) => React.JSX.Element;

export declare type LogoPropsType = {
    className?: string;
    type?: LogoType;
    alt?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'className' | 'type' | 'alt'>;

export declare type LogoType = 'brainly' | 'brainly-inverse' | 'brainly-mobile' | 'brainly-mobile-inverse' | 'eodev' | 'eodev-inverse' | 'eodev-mobile' | 'eodev-mobile-inverse' | 'nosdevoirs' | 'nosdevoirs-inverse' | 'nosdevoirs-mobile' | 'nosdevoirs-mobile-inverse' | 'znanija' | 'znanija-inverse' | 'znanija-mobile' | 'znanija-mobile-inverse' | 'znanija-plus' | 'znanija-plus-inverse' | 'znanija-plus-small' | 'brainly-plus' | 'brainly-plus-inverse' | 'brainly-tutoring' | 'brainly-tutoring-inverse' | 'brainly-logotype-tutor' | 'logo-tutor' | 'logo-math-solver' | 'logo-community-qa' | 'logo-textbook-detective' | 'brainly-logotype-math-solver' | 'brainly-logotype-community-qa' | 'brainly-logotype-textbook-detective';

export declare const MathSymbol: ({ type, size, color, className, title, ...props }: MathSymbolPropsType) => React.JSX.Element;

export declare type MathSymbolPropsType = {
    type: MathSymbolType;
    size?: MathSymbolSizeType;
    color?: IconColorType;
    className?: string;
    title?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'type' | 'size' | 'color' | 'className' | 'title'>;

declare type MathSymbolSizeType = 'small' | 'medium' | 'normal';

export declare type MathSymbolType = 'squere-root' | 'nth-root' | 'power' | 'subscript' | 'less-then-or-equal' | 'greater-then-or-equal' | 'inequality' | 'division' | 'pi' | 'alpha' | 'beta' | 'line' | 'limit' | 'matrix' | 'integral' | 'equation-system';

export declare const Media: (props: MediaPropsType) => React.JSX.Element;

export declare type MediaPropsType = {
    aside: React.ReactNode;
    contentArray: Array<React.ReactNode>;
    toRight?: boolean;
    clickable?: boolean;
    noPadding?: boolean;
    small?: boolean;
    spacedBottom?: boolean;
    className?: string;
    color?: ColorType_3;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'aside' | 'contentArray' | 'toRight' | 'clickable' | 'noPadding' | 'small' | 'spacedBottom' | 'className' | 'color'>;

declare type MenuItemPropsType = {
    className?: string;
    href?: string;
    text: string;
    as?: string | ((arg0: any) => React.ReactNode);
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'className' | 'href' | 'text' | 'as'>;

export declare const MenuList: ({ items, size, className, ...props }: MenuListPropsType) => React.JSX.Element;

export declare type MenuListPropsType = {
    size?: SizeType_7;
    className?: string;
    items?: Array<MenuItemPropsType>;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'size' | 'className' | 'items'>;

export declare const MobileIcon: ({ type, size, color, className, ...props }: MobileIconPropsType) => React.JSX.Element;

export declare type MobileIconPropsType = Readonly<{
    type: MobileIconType;
    size?: SizeType_6;
    color?: IconColorType;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'type' | 'size' | 'color' | 'className'>>;

export declare type MobileIconType = 'arrow' | 'answer_bubble' | 'ask_bubble' | 'backward_5s' | 'backward_end' | 'barcode_scanner' | 'bookmark' | 'bookmark_checked' | 'bookmark_outlined' | 'chapter' | 'circle_fill' | 'clear' | 'comment' | 'crown' | 'crown_outlined' | 'cup' | 'cursor_select' | 'dashed_line' | 'draw' | 'filters' | 'flashlight_off' | 'flashlight_on' | 'forward_5s' | 'hand_move' | 'heart_outlined' | 'hexagon' | 'info' | 'keyboard' | 'options' | 'replay' | 'send_back' | 'bring_front' | 'share_on_ios' | 'spark' | 'star_outlined' | 'text' | 'textbook' | 'time_speed' | 'unbookmark';

declare type OnMouseEnterType = (index: number, event: React.MouseEvent<HTMLSpanElement>) => unknown;

declare type OptionsPropsType = {
    value: string;
    text: string;
};

export declare const Overlay: ({ partial, children, className, color, ...props }: OverlayPropsType) => React.JSX.Element;

export declare const OverlayedBox: ({ overlay, children, className, ...props }: OverlayedBoxPropsType) => React.JSX.Element;

export declare type OverlayedBoxPropsType = {
    children?: React.ReactNode | null | undefined;
    overlay?: React.ReactNode | null | undefined;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'overlay' | 'className'>;

export declare type OverlayPropsType = {
    children?: React.ReactNode;
    partial?: boolean;
    className?: string;
    color?: ColorType_4;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'partial' | 'className' | 'color'>;

declare type PaddingType = 'none' | 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';

declare type PaddingType_2 = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl';

export declare const Popover: {
    ({ children, placement, id, useHover, useClick, useFocus, defaultOpen, open, role, onOpenChange, }: PopoverPropsType): React.JSX.Element;
    Trigger: React.ForwardRefExoticComponent<{
        children: React.ReactNode;
    } & Omit<React.AllHTMLAttributes<HTMLElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
    Element: React.ForwardRefExoticComponent<{
        children: React.ReactNode;
        className?: string | null | undefined;
        maxWidth?: string | undefined;
        padding?: string | undefined;
        withArrow?: boolean | undefined;
    } & Omit<React.AllHTMLAttributes<HTMLElement>, "children" | "className"> & React.RefAttributes<HTMLDivElement>>;
};

declare type PopoverContextType = ReturnType<typeof usePopover> | null;

declare type PopoverPlacement = Placement;

export declare type PopoverPropsType = {
    /**
     * Popover content which consists of popover element and popover trigger.
     * @example <Popover>
     <Popover.Element>Here's my popover</Popover.Element>
     <Popover.Trigger>
     <Button>Hover me</Button>
     </Popover.Trigger>
     </Popover>
     */
    children?: React.ReactNode;
    /**
     * Popover id.
     */
    id?: string;
    /**
     * Popover alignment.
     */
    placement?: PopoverPlacement;
    /**
     * Set if Popover should be displayed by default.
     */
    defaultOpen?: boolean;
    /**
     * Only controlled component. Set Popover open state.
     */
    open?: boolean;
    role?: PopoverRole;
    /**
     * Determine if hover should affect popover visibility.
     * @default true
     */
    useHover?: boolean;
    /**
     * Determine if click should affect popover visibility.
     * @default true
     */
    useClick?: boolean;
    /**
     * Determine if focus should affect popover visibility.
     * @default true
     */
    useFocus?: boolean;
    /**
     * Only controlled component. Handle Popover open state change.
     */
    onOpenChange?: (arg0: boolean) => void;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className' | 'placement'>;

declare type PopoverRole = 'listbox' | 'dialog';

export declare const PopupMenu: ({ items, extraSpacing, className, ...props }: PopupMenuPropsType) => React.JSX.Element;

export declare type PopupMenuPropsType = {
    items: Array<React.ReactNode>;
    extraSpacing?: boolean;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'items' | 'extraSpacing' | 'className'>;

declare type PredefinedDurationType = 'instant' | 'quick1' | 'quick2' | 'moderate1' | 'moderate2' | 'gentle1' | 'gentle2';

declare type PredefinedEasingType = 'regular' | 'entry' | 'exit' | 'linear';

declare namespace predefinedEffects {
    export {
        createEffect,
        PredefinedEffectType,
        predefinedEffects_2 as predefinedEffects
    }
}

declare const predefinedEffects_2: Record<PredefinedEffectType, () => TransitionEffectType>;

declare type PredefinedEffectType = 'fade' | 'scaleFade' | 'slideUpFade' | 'slideDownFade' | 'slideLeftFade' | 'slideRightFade';

declare type PredefinedTranslateType = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '-xxs' | '-xs' | '-s' | '-m' | '-l' | '-xl';

export declare const ProgressBar: ({ size, noBorderRadius, invisibleTrack, value, minValue, maxValue, textValue, className, ...props }: ProgressBarPropsType) => React.JSX.Element;

export declare type ProgressBarPropsType = {
    /**
     * ProgressBar size
     * @example <ProgressBar size="xs"/>
     * @default s
     */
    size?: SizeType_10;
    /**
     * Disable border radius
     * @example <ProgressBar value={4} noBorderRadius/>
     * @default false
     */
    noBorderRadius?: boolean;
    /**
     * Enable invisible track
     * @example <ProgressBar value={4} invisibleTrack/>
     * @default false
     */
    invisibleTrack?: boolean;
    /**
     * Current value, represents current progress of the process
     * By default represents the current percentage of progress
     * @example <ProgressBar value={4}/>
     */
    value: number;
    /**
     * The human-readable text alternative of value
     * @example <ProgressBar value={4} textValue="step 4 of 10"/>
     */
    textValue?: string;
    /**
     * Max value
     * @example <ProgressBar value={4} maxValue={20}/>
     * @default 100
     */
    maxValue?: number;
    /**
     * Min value
     * @example <ProgressBar value={4} minValue={2}/>
     * @default 0
     */
    minValue?: number;
    className?: string;
};

declare type PropertyObjectType = Readonly<TimingPropsType & {
    className?: string;
    transform?: Readonly<TimingPropsType & {
        /**
         * The numerical value is expressed in pixels [px].
         */
        translateX?: PredefinedTranslateType | number | string;
        /**
         * The numerical value is expressed in pixels [px].
         */
        translateY?: PredefinedTranslateType | number | string;
        /**
         * Common scale for both the X and Y axis.
         */
        scale?: number;
        /**
         * Overrides the common scale for the X axis.
         */
        scaleX?: number;
        /**
         * Overrides the common scale for the Y axis.
         */
        scaleY?: number;
        origin?: 'center' | 'left top' | 'left bottom' | 'right top' | 'right bottom';
    }>;
    width?: 'auto' | number | Readonly<TimingPropsType & {
        value: 'auto' | number;
    }>;
    height?: 'auto' | number | Readonly<TimingPropsType & {
        value: 'auto' | number;
    }>;
    opacity?: number | Readonly<TimingPropsType & {
        value: number;
    }>;
}>;

export declare const Radio: ({ checked, color, children, className, description, disabled, id, invalid, labelSize, name, onChange, required, style, value, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: RadioPropsType) => React.JSX.Element;

declare type RadioColorType = 'light' | 'dark';

declare type RadioContextType = {
    color?: RadioColorType;
    disabled?: boolean;
    invalid?: boolean;
    name?: string;
    selectedValue: string | null | undefined;
    setSelectedValue: (arg0: React.SyntheticEvent<HTMLInputElement>, arg1: string | null | undefined) => void;
    lastFocusedValue: string | null | undefined;
    setLastFocusedValue: (arg0: string | null | undefined) => void;
    isPristine?: boolean;
};

export declare const RadioGroup: ({ className, children, color, direction, disabled, errorMessage, invalid, name, required, value, onChange, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: RadioGroupPropsType) => React.JSX.Element;

export declare type RadioGroupPropsType = {
    /**
     * Radiogroup inner elements
     * @example <RadioGroup><Radio>Label</Radio></RadioGroup>
     */
    children?: React.ReactNode;
    /**
     * Optional string. Additional classnames.
     */
    className?: string | null | undefined;
    /**
     * Specify color variant of the Radios that you want to use.
     * @example <RadioGroup color="light" />
     */
    color?: RadioColorType;
    /**
     * Specify items display direction.
     * @example <RadioGroup direction="row" />
     * @default "column"
     */
    direction?: DirectionType_3;
    /**
     * Sets whether the radio is disabled.
     * @example <RadioGroup disabled />
     */
    disabled?: boolean;
    /**
     * To be displayed below RadioGroup. The error message is not clickable. Note: you have to set `invalid` prop as well, to render the error message.
     * @example <RadioGroup invalid errorMessage="Error message"><Radio>Label</Radio></RadioGroup>
     */
    errorMessage?: string;
    /**
     * Sets whether Radios are marked as invalid.
     * @example <RadioGroup invalid />
     */
    invalid?: boolean;
    /**
     * Sets whether the RadioGroup is marked as required. This has no effect on the style.
     * @example <RadioGroup required />
     */
    required?: boolean;
    /**
     * The name of Radio inputs.
     * @example <RadioGroup name="name" />
     */
    name?: string;
    /**
     * Function called with an object containing the react synthetic event, whenever selected radio input changes.
     */
    onChange?: (arg0: React.SyntheticEvent<HTMLInputElement>) => void;
    /**
     * Currently selected radio input.
     * @example <RadioGroup value="1"><Radio value="1">Label</Radio></RadioGroup>
     */
    value?: string | null | undefined;
    /**
     * ID of a custom label, that describes the radio group.
     * @example <RadioGroup aria-labelledby="my-custom-label" />
     */
    'aria-labelledby'?: string;
    /**
     * ID of a custom text / section, that describes the radio group.
     * @example <RadioGroup aria-describedby="my-custom-label" />
     */
    'aria-describedby'?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className' | 'color' | 'direction' | 'disabled' | 'errorMessage' | 'invalid' | 'required' | 'name' | 'onChange' | 'value' | 'undefined' | 'undefined'>;

declare type RadioLabelSizeType = 'medium' | 'small';

export declare type RadioPropsType = {
    /**
     * Sets whether the radio is checked or unchecked.
     * @example <Radio checked />
     */
    checked?: boolean;
    /**
     * To be displayed to the right of the radio as a label. The label is clickable radio element.
     * @example <Radio>Label</Radio>
     */
    children?: React.ReactNode;
    /**
     * Optional string. Additional classnames.
     */
    className?: string | null | undefined;
    /**
     * Specify color variant of the radio that you want to use.
     * @example <Radio color="dark" />
     */
    color?: RadioColorType | null | undefined;
    /**
     * To be displayed below radio and its label. The description is not clickable. You can either pass text or your own component with custom styling.
     * @example <Radio description="More detailed description about this element. You can use here even some formatting and links." />
     */
    description?: React.ReactNode | string;
    /**
     * Sets whether the radio is disabled.
     * @example <Radio disabled />
     */
    disabled?: boolean;
    /**
     * ID assigned to the radio input. If not provided, random id will be generated.
     * @example <Radio id="my-radio-1" />
     */
    id?: string;
    /**
     * Sets whether the radio marked as invalid.
     * @example <Radio invalid />
     */
    invalid?: boolean;
    /**
     * Sets label size.
     * @example <Radio labelSize="small" />
     * @default false
     */
    labelSize?: RadioLabelSizeType;
    /**
     * The name of the radio input.
     * @example <Radio name="name" />
     */
    name?: string;
    /**
     * Function called with an object containing the react synthetic event, whenever the state of the radio changes.
     */
    onChange?: (arg0: React.SyntheticEvent<HTMLInputElement>) => void;
    /**
     * Sets whether the radio input is marked as required. This doesn't affect radio style.
     * @example <Radio required />
     * @default false
     */
    required?: boolean;
    /**
     * Style applied to the container.
     * @example <Radio style={{ '--radioColor': '#000' }} />
     */
    style?: StyleType_2;
    /**
     * Value of the radio input.
     * @example <Radio value="1" />
     */
    value?: string | null | undefined;
    /**
     * ID of a custom label, that describes the radio input.
     * @example <Radio aria-labelledby="my-custom-label" />
     */
    'aria-labelledby'?: string;
    /**
     * ID of a custom text / section, that describes the radio input.
     * @example <Radio aria-describedby="my-custom-label" />
     */
    'aria-describedby'?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'checked' | 'children' | 'className' | 'color' | 'description' | 'disabled' | 'id' | 'invalid' | 'labelSize' | 'name' | 'onChange' | 'required' | 'style' | 'value' | 'undefined' | 'undefined'>;

export declare class Rating extends React.Component<RatingPropsType> {
    static defaultProps: {
        onChange: () => undefined;
        onStarMouseEnter: () => undefined;
        onMouseLeave: () => undefined;
        metricSize: number;
        rate: number;
        'aria-label': string;
    };
    constructor(props: RatingPropsType);
    name: string;
    starsOnChangeFunctions: Array<() => unknown>;
    starsMouseEnterFunctions: Array<(arg0: React.MouseEvent<HTMLSpanElement>) => unknown>;
    componentWillReciveProps(nextProps: RatingPropsType): void;
    createStarsOnChangeFunctions(metricSize: number): void;
    createStarsMouseEnterFunctions(metricSize: number): void;
    onStarChange: (index: number) => void;
    onStarMouseEnter: (index: number, event: React.MouseEvent<HTMLSpanElement>) => void;
    onMouseLeave: () => void;
    render(): React.JSX.Element;
}

export declare type RatingPropsType = {
    size?: RatingSizeType;
    rate: number;
    metricSize: number;
    active?: boolean;
    onChange: (arg0: number) => unknown;
    onStarMouseEnter: OnMouseEnterType;
    onMouseLeave: () => unknown;
    counterText?: string;
    activeText?: string;
    noLabel?: boolean;
    className?: string;
    'aria-label'?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'size' | 'rate' | 'metricSize' | 'active' | 'onChange' | 'onStarMouseEnter' | 'onMouseLeave' | 'counterText' | 'activeText' | 'noLabel' | 'className' | 'undefined'>;

declare type RatingSizeType = 's' | 'xs';

declare type ResponsivePropType<T> = T | Array<T | null | undefined> | Readonly<{
    sm?: T;
    md?: T;
    lg?: T;
    xl?: T;
}>;

export declare const RwdHelper: ({ hide, children }: RwdHelperPropsType) => React.JSX.Element | null;

export declare type RwdHelperPropsType = {
    hide: RwdHelperTypeType;
    children: React.ReactElement<any> | string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'hide' | 'children'>;

declare type RwdHelperTypeType = 'small-only' | 'medium-only' | 'medium-down' | 'medium-up' | 'large-only';

export declare const Search: ({ className, fullWidth, size, withRoundButton, inputClassName, buttonType, ...additionalProps }: SearchPropsType) => React.JSX.Element;

export declare type SearchPropsType = {
    inputClassName?: string;
    withRoundButton?: boolean;
    buttonType?: ButtonTypeType;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'inputClassName' | 'withRoundButton' | 'size'> & InputPropsType;

export declare const Select: React.ForwardRefExoticComponent<{
    /**
     * Optional specification for select value
     * @example <Select value="Option1" options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     */
    value?: string | undefined;
    /**
     * Optional boolean to specified if it's valid
     * @example <Select valid options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     */
    valid?: boolean | undefined;
    /**
     * Optional boolean to specified if it's invalid
     * @example <Select invalid options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     */
    invalid?: boolean | undefined;
    /**
     * Optional boolean to specified if it's capitalized
     * @example <Select capitalized options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     */
    capitalized?: boolean | undefined;
    /**
     * There are two color variants for form elements, default does not have to be specified
     * @example <Select color="white" options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     * @see color="default" https://styleguide.brainly.com/latest/docs/interactive.html?color="default"#select
     * @see color="white" https://styleguide.brainly.com/latest/docs/interactive.html?color="white"#select
     */
    color?: SelectColorType | null | undefined;
    /**
     * There are two sizes options for most of the form elements
     * @example <Select size="m" options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     * @see size="m" https://styleguide.brainly.com/latest/docs/interactive.html?size="m"#select
     * @see size="l" https://styleguide.brainly.com/latest/docs/interactive.html?size="l"#select
     */
    size?: SelectSizeType | undefined;
    /**
     * Optional boolean to specified if it's full width
     * @example <Select fullWidth placeholder="placeholder" />
     */
    fullWidth?: boolean | undefined;
    /**
     * Optional array of options of the select
     * @example <Select size="m" options={[{value:"option1",text:"Option1"},{label:"Label title",options:[{value:"option1",text:"Option1"},{value:"option2",text:"Select selector"}]},{value:"option2",text:"Select selector"}]} />
     */
    options?: readonly (OptionsPropsType | GroupedOptionsPropsType)[] | undefined;
    /**
     * Additional class names
     */
    className?: string | undefined;
} & Omit<React.AllHTMLAttributes<HTMLElement>, "className" | "value" | "invalid" | "color" | "size" | "fullWidth" | "options" | "valid" | "capitalized"> & React.RefAttributes<HTMLSelectElement>>;

declare type SelectColorType = 'default' | 'white';

export declare const SelectMenu: React.ForwardRefExoticComponent<{
    /**
     * Optional string. Additional class names.
     */
    className?: string | undefined;
    /**
     * Optional string. Select placeholder text.
     * @example <Select placeholder="Select an option" options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} />
     * @default 'Select...'
     */
    placeholder?: string | undefined;
    /**
     * Optional boolean. Set to true if select is valid.
     * @example <Select valid options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} />
     * @default false
     * */
    valid?: boolean | undefined;
    /**
     * Optional boolean. Set to true if select is invalid.
     * @example <Select invalid options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} />
     * @default false
     */
    invalid?: boolean | undefined;
    /**
     * Optional array. Select options.
     * @example <Select options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} />
     * @default []
     */
    options?: readonly SelectMenuOptionType[] | undefined;
    /**
     * Optional array. Select selected options.
     * @example <Select options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} selectedOptions={[{value: 'option1', label: 'Option1'}]} />
     * @default []
     */
    selectedOptions?: readonly SelectMenuOptionType[] | undefined;
    /**
     * Optional boolean. Set to true, if user can select multiple options.
     * @example <Select multiSelect options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} />
     */
    multiSelect?: boolean | undefined;
    /**
     * Optional boolean. Set when you want to manually controll select popup menu appearance. If not set, the component will manage it itself.
     * @example <Select expanded={false} options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} selectedOptions={[{value: 'option1', label: 'Option1'}]} />
     * @default undefined
     */
    expanded?: boolean | undefined;
    /**
     * Optional boolean. Set when you want to display select popup menu on first render, but you want the component manage it's expanded state itself.
     * @example <Select defaultExpanded options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} selectedOptions={[{value: 'option1', label: 'Option1'}]} />
     * @default undefined
     */
    defaultExpanded?: boolean | undefined;
    /**
     * Optional boolean. Set to `true` when you want to display option icon (if it has any).
     * @example <Select withIcons options={[{value: 'option1', label: 'Option1', iconName: 'physics'},{value: 'option2', label: 'Select selector', iconName: 'chemistry'}]} selectedOptions={[{value: 'option1', label: 'Option1'}]} />
     * @default false
     */
    withIcons?: boolean | undefined;
    /**
     * Optional boolean. Set to `true` if you want to disable select.
     * @example <Select disabled />
     */
    disabled?: boolean | undefined;
    /**
     * Set to change the Select size. There are three sizes options: `s`, `m` and `l`.
     * @example <Select size="s" options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     * @default "m"
     */
    size?: SelectMenuSizeType | undefined;
    /**
     * There are two color variants, `default` and `white`. The default does not have to be specified.
     * @example <Select color="white" options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} />
     */
    color?: SelectMenuColorType | null | undefined;
    /**
     * Optional callback. Called by clicking on the any part of the Select component.
     * @example <Select
     *           onClick={(e) => console.log(e.target)}
     *           options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]}
     *          />
     */
    onClick?: ((arg0: React.MouseEvent<HTMLDivElement>) => unknown) | undefined;
    /**
     * Callback. Called by selecting an option.
     * @example <Select
     *           onOptionChange={({value, label, iconName}) => {
     *              // update component selected options array
     *           }}
     *           options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]}
     *          />
     */
    onOptionChange: (SelectMenuOptionType: any) => unknown;
    /**
     * Callback. Called only when expanded state is controlled, called when component informs the expanded state should change.
     * @example <Select
     *           onToggle={(isOpen) => {
     *              // set component expanded state to isOpen state
     *           }}
     *           options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]}
     *          />
     */
    onToggle?: ((boolean: any) => unknown) | undefined;
} & Omit<React.AllHTMLAttributes<HTMLElement>, "className" | "expanded" | "defaultExpanded" | "invalid" | "color" | "disabled" | "placeholder" | "size" | "onClick" | "options" | "multiSelect" | "valid" | "selectedOptions" | "withIcons" | "onOptionChange" | "onToggle"> & React.RefAttributes<HTMLDivElement>>;

declare type SelectMenuColorType = 'default' | 'white';

declare type SelectMenuOptionType = {
    value: string;
    label: string;
    icon?: {
        name: IconType | SubjectIconType;
        isSubjectIcon?: boolean;
    };
};

export declare type SelectMenuPropsType = {
    /**
     * Optional string. Additional class names.
     */
    className?: string;
    /**
     * Optional string. Select placeholder text.
     * @example <Select placeholder="Select an option" options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} />
     * @default 'Select...'
     */
    placeholder?: string;
    /**
     * Optional boolean. Set to true if select is valid.
     * @example <Select valid options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} />
     * @default false
     * */
    valid?: boolean;
    /**
     * Optional boolean. Set to true if select is invalid.
     * @example <Select invalid options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} />
     * @default false
     */
    invalid?: boolean;
    /**
     * Optional array. Select options.
     * @example <Select options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} />
     * @default []
     */
    options?: ReadonlyArray<SelectMenuOptionType>;
    /**
     * Optional array. Select selected options.
     * @example <Select options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} selectedOptions={[{value: 'option1', label: 'Option1'}]} />
     * @default []
     */
    selectedOptions?: ReadonlyArray<SelectMenuOptionType>;
    /**
     * Optional boolean. Set to true, if user can select multiple options.
     * @example <Select multiSelect options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} />
     */
    multiSelect?: boolean;
    /**
     * Optional boolean. Set when you want to manually controll select popup menu appearance. If not set, the component will manage it itself.
     * @example <Select expanded={false} options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} selectedOptions={[{value: 'option1', label: 'Option1'}]} />
     * @default undefined
     */
    expanded?: boolean;
    /**
     * Optional boolean. Set when you want to display select popup menu on first render, but you want the component manage it's expanded state itself.
     * @example <Select defaultExpanded options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} selectedOptions={[{value: 'option1', label: 'Option1'}]} />
     * @default undefined
     */
    defaultExpanded?: boolean;
    /**
     * Optional boolean. Set to `true` when you want to display option icon (if it has any).
     * @example <Select withIcons options={[{value: 'option1', label: 'Option1', iconName: 'physics'},{value: 'option2', label: 'Select selector', iconName: 'chemistry'}]} selectedOptions={[{value: 'option1', label: 'Option1'}]} />
     * @default false
     */
    withIcons?: boolean;
    /**
     * Optional boolean. Set to `true` if you want to disable select.
     * @example <Select disabled />
     */
    disabled?: boolean;
    /**
     * Set to change the Select size. There are three sizes options: `s`, `m` and `l`.
     * @example <Select size="s" options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     * @default "m"
     */
    size?: SelectMenuSizeType;
    /**
     * There are two color variants, `default` and `white`. The default does not have to be specified.
     * @example <Select color="white" options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]} />
     */
    color?: SelectMenuColorType | null | undefined;
    /**
     * Optional callback. Called by clicking on the any part of the Select component.
     * @example <Select
     *           onClick={(e) => console.log(e.target)}
     *           options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]}
     *          />
     */
    onClick?: (arg0: React.MouseEvent<HTMLDivElement>) => unknown;
    /**
     * Callback. Called by selecting an option.
     * @example <Select
     *           onOptionChange={({value, label, iconName}) => {
     *              // update component selected options array
     *           }}
     *           options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]}
     *          />
     */
    onOptionChange: (SelectMenuOptionType: any) => unknown;
    /**
     * Callback. Called only when expanded state is controlled, called when component informs the expanded state should change.
     * @example <Select
     *           onToggle={(isOpen) => {
     *              // set component expanded state to isOpen state
     *           }}
     *           options={[{value: 'option1', label: 'Option1'},{value: 'option2', label: 'Select selector'}]}
     *          />
     */
    onToggle?: (boolean: any) => unknown;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'className' | 'placeholder' | 'valid' | 'invalid' | 'options' | 'selectedOptions' | 'multiSelect' | 'expanded' | 'defaultExpanded' | 'withIcons' | 'disabled' | 'size' | 'color' | 'onClick' | 'onOptionChange' | 'onToggle'>;

declare type SelectMenuSizeType = 's' | 'm' | 'l';

export declare type SelectPropsType = {
    /**
     * Optional specification for select value
     * @example <Select value="Option1" options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     */
    value?: string;
    /**
     * Optional boolean to specified if it's valid
     * @example <Select valid options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     */
    valid?: boolean;
    /**
     * Optional boolean to specified if it's invalid
     * @example <Select invalid options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     */
    invalid?: boolean;
    /**
     * Optional boolean to specified if it's capitalized
     * @example <Select capitalized options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     */
    capitalized?: boolean;
    /**
     * There are two color variants for form elements, default does not have to be specified
     * @example <Select color="white" options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     * @see color="default" https://styleguide.brainly.com/latest/docs/interactive.html?color="default"#select
     * @see color="white" https://styleguide.brainly.com/latest/docs/interactive.html?color="white"#select
     */
    color?: SelectColorType | null | undefined;
    /**
     * There are two sizes options for most of the form elements
     * @example <Select size="m" options={[{value: 'option1', text: 'Option1'},{value: 'option2', text: 'Select selector'}]} />
     * @see size="m" https://styleguide.brainly.com/latest/docs/interactive.html?size="m"#select
     * @see size="l" https://styleguide.brainly.com/latest/docs/interactive.html?size="l"#select
     */
    size?: SelectSizeType;
    /**
     * Optional boolean to specified if it's full width
     * @example <Select fullWidth placeholder="placeholder" />
     */
    fullWidth?: boolean;
    /**
     * Optional array of options of the select
     * @example <Select size="m" options={[{value:"option1",text:"Option1"},{label:"Label title",options:[{value:"option1",text:"Option1"},{value:"option2",text:"Select selector"}]},{value:"option2",text:"Select selector"}]} />
     */
    options?: ReadonlyArray<GroupedOptionsPropsType | OptionsPropsType>;
    /**
     * Additional class names
     */
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'value' | 'valid' | 'invalid' | 'capitalized' | 'color' | 'size' | 'fullWidth' | 'options' | 'className'>;

declare type SelectSizeType = 's' | 'm' | 'l';

export declare const SeparatorHorizontal: ({ type, color, className, ...props }: SeparatorHorizontalPropsType) => React.JSX.Element;

declare type SeparatorHorizontalColorType = 'white' | 'gray-50' | 'gray-40';

export declare type SeparatorHorizontalPropsType = {
    type?: SeparatorHorizontalTypeType;
    color?: SeparatorHorizontalColorType;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'type' | 'color' | 'className'>;

declare type SeparatorHorizontalTypeType = 'normal' | 'spaced' | 'short-spaced';

export declare const SeparatorVertical: ({ size, color, className, ...props }: SeparatorVerticalPropsType) => React.JSX.Element;

declare type SeparatorVerticalColorType = 'white' | 'gray-50' | 'gray-40';

export declare type SeparatorVerticalPropsType = {
    size?: SizeType_8;
    color?: SeparatorVerticalColorType;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'size' | 'color' | 'className'>;

declare type SizeType = 'xxsmall' | 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge' | 'xxlarge';

declare type SizeType_10 = 'xs' | 's';

declare type SizeType_11 = 'default' | 'small';

declare type SizeType_2 = 'xxsmall' | 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge' | 'xxlarge';

declare type SizeType_3 = 'xxsmall' | 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge' | 'xxlarge';

declare type SizeType_4 = 'xxsmall' | 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge' | 'xxlarge';

declare type SizeType_5 = 'xxsmall' | 'xsmall' | 'small' | 'normal' | 'large' | 'xlarge' | 'xxlarge';

declare type SizeType_6 = 104 | 102 | 80 | 78 | 56 | 54 | 40 | 32 | 30 | 26 | 24 | 22 | 20 | 18 | 16 | 14 | 10;

declare type SizeType_7 = 'small' | 'normal' | 'large';

declare type SizeType_8 = 'normal' | 'small' | 'large' | 'full';

declare type SizeType_9 = 'small' | 'medium' | 'normal';

export declare const SkipLink: ({ children, className, id, ...rest }: SkipLinkPropsType) => React.JSX.Element;

export declare type SkipLinkPropsType = {
    className?: string;
    children: string | number;
    id: string;
};

declare type SlotType = 'backdrop' | 'top' | 'left' | 'right' | 'bottom' | 'top-left' | 'top-middle' | 'top-right' | 'middle-left' | 'middle-right' | 'bottom-left' | 'bottom-middle' | 'bottom-right';

declare type SpacingType = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl' | 'xxxxl' | 'none';

export declare const Sparks: React.ForwardRefExoticComponent<SparksPropsType & React.RefAttributes<HTMLDivElement>>;

export declare interface SparksPropsType {
    /**
     * Optional string. Additional class names.
     */
    className?: string;
    /**
     * Optional object. Style object to be applied to the component.
     * @example <Sparks style={{color: 'red'}} />
     **/
    style?: React.CSSProperties;
    /**
     * Optional ReacNode. Component to be warped with sparks.
     */
    children?: React.ReactNode;
    /**
     * Optional string. Shape of the sparks.
     * @default 'spark'
     * @example <Sparks shape="spark" />
     **/
    shape?: 'spark' | 'heart';
    /**
     * Optional string. Variant of the sparks which determines the size and the number of sparks.
     * @default 'l'
     * @example <Sparks variant="m" />
     **/
    variant?: 's' | 'm' | 'l';
    /**
     * Optional boolean. Whether the sparks are active.
     * @default false
     * @example
     * <Sparks active/>
     * <Sparks active={false}/>
     **/
    active?: boolean;
    /**
     * Optional number. Duration of the animation.
     * @default 6000
     * @example
     * <Sparks duration={6000}/>
     * <Sparks duration={Infinity}/>
     * <Sparks duration={0}/>
     **/
    duration?: number;
    /**
     * Optional number. Delay of the animation.
     * This value is used at the beginning of the whole animation
     * @default 0
     * @example <Sparks delay={0}/>
     **/
    delay?: number;
    /**
     * Optional number. Delay of the animation.
     * This value is used between each iteration of the animation
     * @default 500
     * @example <Sparks iterationDelay={1000}/>
     **/
    iterationDelay?: number;
    /**
     * Optional number. Number of iterations to play the full sequence: entry, exit, iterationDelay.
     * @default 3
     * @example
     * <Sparks iterationCount={3}/>
     * <Sparks iterationCount={Infinity}/>
     **/
    iterationCount?: number;
    /**
     * Optional array of strings. Colors of the particles. If not provided, the colors will be chosen based on the shape.
     * @example <Sparks colors={['var(--indigo-20)', 'var(--indigo-30)', 'var(--indigo-40)', 'var(--indigo-50)']} />
     **/
    colors?: [string, string, string, string];
    /**
     * Optional string. The placement property is a shorthand property for setting the top, right, bottom, and left properties (inset) of an internal canvas.
     * Thanks to that you can adjust the position of the canvas thus the position of the sparks to always keep them in line with the edge of the container
     * no matter what the size of the container and the variant of the sparks is. It is useful when specific variant of the sparks is used in a container
     * of the size that is not covered perfectly by the default positioning.
     * @remarks
     * @example
     * // This will move the sparks 8px outside the container top and bottom edge and 0px outside the container left and right edge.
     * <Sparks inset="-8 0" />
     * @example
     * // this will move the sparks 16px outside the container top and bottom endge and 0px outside the container left and right edge.
     * <Sparks inset="-16 0" />
     **/
    placement?: React.CSSProperties['inset'];
    /**
     * Optional string. The display property specifies the display behavior (the type of rendering box) of spark container.
     * It's exposed directly from the CSS to conveniently change the display behavior of the spark container.
     */
    display?: React.CSSProperties['display'];
    /**
     * Optional string. The width property specifies the width of the spark container.
     * It's exposed directly from the CSS to conveniently change the width of the spark container.
     * @example <Sparks width="100%" />
     */
    width?: React.CSSProperties['width'];
    /**
     * Optional string. The height property specifies the height of the spark container.
     * It's exposed directly from the CSS to conveniently change the height of the spark container.
     * @example <Sparks height="100%" />
     */
    height?: React.CSSProperties['height'];
}

export declare const Spinner: ({ color, size, "aria-label": ariaLabel, "aria-live": ariaLive, className, ...props }: SpinnerPropsType) => React.JSX.Element;

declare type SpinnerColorType = 'black' | 'white' | 'gray-70' | 'gray-50' | 'red-40' | 'red-50' | 'yellow-40' | 'blue-40' | 'blue-60' | 'indigo-50';

export declare const SpinnerContainer: ({ loading, color, fullWidth, size, children, ariaStatusLabel, "aria-live": ariaLive, ...props }: SpinnerContainerPropsType) => React.JSX.Element;

export declare type SpinnerContainerPropsType = {
    loading?: boolean;
    color?: SpinnerColorType;
    fullWidth?: boolean;
    size?: SpinnerSizeType;
    children?: React.ReactNode;
    ariaStatusLabel?: AriaStatusLabelType_2;
    'aria-live'?: AriaLiveType_4;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'loading' | 'color' | 'fullWidth' | 'size' | 'children' | 'ariaStatusLabel' | 'undefined'>;

export declare type SpinnerPropsType = {
    color?: SpinnerColorType;
    size?: SpinnerSizeType;
    className?: string;
    'aria-label'?: string;
    'aria-live'?: AriaLiveType_3;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'color' | 'size' | 'className' | 'undefined' | 'undefined'>;

declare type SpinnerSizeType = 'small' | 'xsmall' | 'xxsmall';

declare type StyleType = Partial<React.CSSProperties & {
    '--checkboxColor'?: string;
    '--checkboxHoverColor'?: string;
    '--checkboxIconFillColor'?: string;
    '--checkboxLabelColor'?: string;
    '--checkboxCheckedColor'?: string;
    '--checkboxInvalidColor'?: string;
    '--checkboxInvalidHoverColor'?: string;
    '--checkboxInvalidIconFillColor'?: string;
}>;

declare type StyleType_2 = Partial<React.CSSProperties & {
    '--radioColor'?: string;
    '--radioRingInsideColor'?: string;
    '--radioHoverColor'?: string;
    '--radioInvalidColor'?: string;
    '--radioInvalidHoverColor'?: string;
    '--radioLabelColor'?: string;
    '--radioDescriptionColor'?: string;
    '--radioBorderWidth'?: string;
    '--radioRingColor'?: string;
}>;

declare type StyleType_3 = React.CSSProperties & {
    '--card-background-color'?: React.CSSProperties['backgroundColor'];
    '--card-border-color'?: React.CSSProperties['borderColor'];
    '--card-border-color-hover'?: React.CSSProperties['borderColor'];
    '--card-border-color-invalid'?: React.CSSProperties['borderColor'];
    '--card-border-color-invalid-hover'?: React.CSSProperties['borderColor'];
    '--card-border-color-checked'?: React.CSSProperties['borderColor'];
    '--card-border-color-checked-hover'?: React.CSSProperties['borderColor'];
    '--card-indicator-color'?: React.CSSProperties['color'];
    '--card-focus-color'?: React.CSSProperties['color'];
    '--card-focus-inner-color'?: React.CSSProperties['color'];
    '--card-focus-outer-color'?: React.CSSProperties['color'];
    '--card-focus-color-invalid'?: React.CSSProperties['color'];
    '--card-focus-outer-color-invalid'?: React.CSSProperties['color'];
    '--card-press-scale-factor'?: number;
};

declare type StyleType_4 = Partial<React.CSSProperties & {
    '--chipBorderColor'?: string;
    '--chipCheckedBorderColor'?: string;
}>;

export declare const Subheadline: ({ children, as, size, transform, align, color, className, inherited, ...props }: SubheadlinePropsType) => React.JSX.Element;

declare type SubheadlineAlignType = 'to-left' | 'to-center' | 'to-right' | 'justify';

declare type SubheadlineAsType = 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'blockquote' | 'q' | 'strong' | 'em' | 'del' | 'ins';

export declare type SubheadlinePropsType = {
    children?: React.ReactNode;
    size?: ResponsivePropType<SubheadlineSizeType>;
    as?: SubheadlineAsType;
    color?: TextColorType | null | undefined;
    transform?: ResponsivePropType<SubheadlineTransformType | null | undefined>;
    align?: ResponsivePropType<SubheadlineAlignType | null | undefined>;
    className?: string | null | undefined;
    inherited?: boolean | null | undefined;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'size' | 'type' | 'color' | 'transform' | 'align' | 'className' | 'inherited'>;

declare type SubheadlineSizeType = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';

declare type SubheadlineTransformType = 'uppercase' | 'lowercase' | 'capitalize';

export declare const SubjectIcon: ({ type, size, monoColor, className, title, ...props }: SubjectIconPropsType) => React.JSX.Element;

export declare const SubjectIconBox: ({ type, size, darker, className, ...props }: SubjectIconBoxPropsType) => React.JSX.Element;

export declare type SubjectIconBoxPropsType = {
    className?: string;
    darker?: boolean;
    type: SubjectIconType;
    size?: SizeType_9;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'className' | 'darker' | 'type' | 'size'>;

export declare type SubjectIconPropsType = {
    className?: string;
    type: SubjectIconType;
    size?: SizeType_9;
    monoColor?: IconColorType;
    title?: string;
} & Omit<React.SVGProps<SVGSVGElement>, 'className' | 'type' | 'size' | 'monoColor' | 'title'>;

export declare type SubjectIconType = 'accountancy' | 'administration' | 'algebra' | 'all' | 'arabic' | 'art' | 'artmusic' | 'astronomy' | 'belarus' | 'belarus-alt' | 'biology' | 'business' | 'catala' | 'chemistry' | 'chinese' | 'economics' | 'egzam' | 'exam' | 'english' | 'environment' | 'ethics' | 'euskara' | 'first-aid' | 'french' | 'galego' | 'geography' | 'geology' | 'geometry' | 'german' | 'grammar' | 'health' | 'history' | 'india-lang' | 'indonesian-lang' | 'informatics' | 'italian' | 'japanese' | 'kazach' | 'kazach-alt' | 'kyrgyz' | 'language' | 'latin' | 'law' | 'life-science' | 'literature' | 'logic' | 'mathematics' | 'music' | 'otherlanguages' | 'others' | 'pedagogics' | 'philosophy' | 'physical-education' | 'physics' | 'politics' | 'psychology' | 'religion' | 'russian' | 'russian-alt' | 'science' | 'security' | 'skills' | 'social-science' | 'sociology' | 'spanish' | 'statistics' | 'technology' | 'tourism' | 'traffic' | 'turkish' | 'ukrainian' | 'ukrainian-alt' | 'ukrainian-literature' | 'uzbek' | 'wos';

declare type TargetType = '_self' | '_blank' | '_parent' | '_top';

declare type TargetType_2 = '_self' | '_blank' | '_parent' | '_top';

declare type TargetType_3 = '_self' | '_blank' | '_parent' | '_top';

declare const Text_2: ({ children, as, size, weight, color, transform, align, noWrap, asContainer, full, breakWords, whiteSpace, className, inherited, ...props }: TextPropsType) => React.JSX.Element;
export { Text_2 as Text }

declare type TextAlignType = 'to-left' | 'to-center' | 'to-right' | 'justify';

declare type TextAlignType_2 = 'to-left' | 'to-center' | 'to-right' | 'justify';

export declare const Textarea: (props: TextareaPropsType) => React.JSX.Element;

declare type TextareaColorType = 'default' | 'white';

export declare type TextareaPropsType = {
    as?: string | ((arg0: any) => React.ReactNode);
    /**
     * Additional function to set ref for textarea
     */
    textareaRef?: (ref: HTMLElement | null | undefined) => unknown;
    /**
     * Optional specification for input value
     * @example <Textarea value="some example value" />
     */
    value?: unknown;
    /**
     * There are two color variants for form elements, default does not have to be specified
     * @example <Textarea color="white" placeholder="placeholder" />
     * @see color="default" https://styleguide.brainly.com/latest/docs/interactive.html?color="default"#textarea
     * @see color="white" https://styleguide.brainly.com/latest/docs/interactive.html?color="white"#textarea
     */
    color?: TextareaColorType | null | undefined;
    /**
     * Specify size of the textarea
     * @example <Textarea size="short" placeholder="example placeholder" />
     * @see size="short" https://styleguide.brainly.com/latest/docs/interactive.html?size="short"#textarea
     * @see size="normal" https://styleguide.brainly.com/latest/docs/interactive.html?size="normal"#textarea
     * @see size="tall" https://styleguide.brainly.com/latest/docs/interactive.html?size="tall"#textarea
     * @see size="xtall" https://styleguide.brainly.com/latest/docs/interactive.html?size="xtall"#textarea
     */
    size?: TextareaSizeType | null | undefined;
    /**
     * Optional boolean to specified if it's valid
     * @example <Textarea valid placeholder="example placeholder" />
     */
    valid?: boolean;
    /**
     * Optional boolean to specified if it's valid
     * @example <Textarea valid placeholder="example placeholder" />
     */
    invalid?: boolean;
    /**
     * Optional boolean to specified if it's full width
     * @example <Textarea fullWidth placeholder="example placeholder" />
     */
    fullWidth?: boolean;
    /**
     * Optional boolean for simple variant (does not have border radius)
     * @example <Textarea simple placeholder="example placeholder" />
     */
    simple?: boolean;
    /**
     * Optional boolean for variant with no padding
     * @example <Textarea noPadding placeholder="example placeholder" />
     */
    noPadding?: boolean;
    /**
     * Optional boolean for variant with height auto
     * @example <Textarea autoHeight placeholder="example placeholder" />
     */
    autoHeight?: boolean;
    /**
     * Optional Node if there should be an error message displayed
     * @example <Textarea errorMessage="This is an error" />
     */
    errorMessage?: React.ReactNode | string;
    /**
     * Additional class names
     */
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'as' | 'textareaRef' | 'value' | 'color' | 'size' | 'valid' | 'invalid' | 'fullWidth' | 'simple' | 'noPadding' | 'autoHeight' | 'errorMessage' | 'className'>;

declare type TextareaSizeType = 'short' | 'normal' | 'tall' | 'xtall';

declare type TextAsType = 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'label' | 'a' | 'strong' | 'em' | 'ins' | 'del' | 'blockquote' | 'q';

export declare const TextBit: ({ children, as, size, color, className, inherited, ...props }: TextBitPropsType) => React.JSX.Element;

declare type TextBitAsType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'div' | 'span' | 'blockquote' | 'q' | 'strong' | 'em' | 'del' | 'ins';

export declare type TextBitPropsType = {
    children: React.ReactNode;
    as?: TextBitAsType;
    size?: ResponsivePropType<TextBitSizeType>;
    color?: TextColorType | null | undefined;
    className?: string | null | undefined;
    inherited?: boolean;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'type' | 'size' | 'color' | 'className' | 'inherited'>;

declare type TextBitSizeType = 'small' | 'medium' | 'large' | 'xlarge';

declare type TextColorType = 'text-black' | 'text-white' | 'text-gray-70' | 'text-gray-60' | 'text-gray-50' | 'text-gray-40' | 'text-blue-60' | 'text-blue-40' | 'text-green-60' | 'text-green-40' | 'text-indigo-60' | 'text-indigo-40' | 'text-red-60' | 'text-red-40' | 'text-yellow-60' | 'text-yellow-40';

export declare type TextPropsType = {
    children?: React.ReactNode;
    size?: ResponsivePropType<TextSizeType>;
    as?: TextAsType;
    color?: TextColorType | null | undefined;
    weight?: ResponsivePropType<TextWeightType_2>;
    transform?: ResponsivePropType<TextTransformType_2 | null | undefined>;
    align?: ResponsivePropType<TextAlignType_2 | null | undefined>;
    noWrap?: ResponsivePropType<boolean | null | undefined>;
    asContainer?: boolean | null | undefined;
    full?: ResponsivePropType<boolean | null | undefined>;
    breakWords?: ResponsivePropType<boolean | null | undefined>;
    whiteSpace?: ResponsivePropType<TextWhiteSpaceType>;
    className?: string | null | undefined;
    href?: string;
    inherited?: boolean;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'size' | 'type' | 'color' | 'weight' | 'transform' | 'align' | 'noWrap' | 'asContainer' | 'full' | 'breakWords' | 'whiteSpace' | 'className' | 'href' | 'inherited'>;

declare type TextSizeType = 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';

declare type TextTransformType = 'uppercase' | 'lowercase' | 'capitalize';

declare type TextTransformType_2 = 'uppercase' | 'lowercase' | 'capitalize';

declare type TextWeightType = 'regular' | 'bold';

declare type TextWeightType_2 = 'regular' | 'bold';

declare type TextWhiteSpaceType = 'pre-wrap' | 'pre-line' | 'normal';

declare type TimingPropsType = Readonly<{
    /**
     * The numerical value is expressed in milliseconds [ms].
     */
    duration?: PredefinedDurationType | number;
    easing?: PredefinedEasingType;
}>;

export declare const Tooltip: {
    ({ children, placement, id, size, color, asLabel, defaultOpen, open, onOpenChange, }: TooltipPropsType): React.JSX.Element;
    Trigger: React.ForwardRefExoticComponent<{
        children: React.ReactNode;
    } & Omit<React.AllHTMLAttributes<HTMLElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
    Element: React.ForwardRefExoticComponent<{
        label: string;
        className?: string | null | undefined;
    } & Omit<React.AllHTMLAttributes<HTMLElement>, "children" | "className"> & React.RefAttributes<HTMLDivElement>>;
};

declare type TooltipContextType = ReturnType<typeof useTooltip> | null;

declare type TooltipPlacement = Exclude<Placement, 'left-start' | 'left-end' | 'right-start' | 'right-end'>;

export declare type TooltipPropsType = {
    /**
     * Tooltip content which consists of tooltip element and tooltip trigger.
     * @example <Tooltip>
     <Tooltip.Element>Here's my tooltip</Tooltip.Element>
     <Tooltip.Trigger>
     <Button>Hover me</Button>
     </Tooltip.Trigger>
     </Tooltip>
     */
    children?: React.ReactNode;
    /**
     * Tooltip id.
     */
    id?: string;
    /**
     * Tooltip alignment.
     */
    placement?: TooltipPlacement;
    /**
     * Tooltip size.
     */
    size?: SizeType_11;
    /**
     * Specify color variant of the Tooltip.
     * @example <Tooltip color="dark">...</Tooltip>
     */
    color?: ColorType_5;
    /**
     * Set if Tooltip should be displayed by default.
     */
    defaultOpen?: boolean;
    /**
     * Only controlled component. Set Tooltip open state.
     */
    open?: boolean;
    asLabel?: boolean;
    /**
     * Only controlled component. Handle Tooltip open state change.
     */
    onOpenChange?: (arg0: boolean) => void;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'className' | 'size' | 'placement'>;

export declare const TopLayer: (props: TopLayerPropsType) => React.JSX.Element;

export declare type TopLayerPropsType = {
    children?: React.ReactNode;
    onClose?: (arg0: React.MouseEvent<HTMLDivElement>) => unknown;
    onCloseButtonKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
    lead?: boolean;
    fill?: boolean;
    modal?: boolean;
    withBugbox?: boolean;
    smallSpaced?: boolean;
    splashScreen?: boolean;
    limitedWidth?: boolean;
    row?: boolean;
    size?: TopLayerSizeType;
    transparent?: boolean;
    noPadding?: boolean;
    className?: string;
} & Omit<React.AllHTMLAttributes<HTMLElement>, 'children' | 'onClose' | 'onCloseButtonKeyDown' | 'lead' | 'fill' | 'modal' | 'withBugbox' | 'smallSpaced' | 'splashScreen' | 'limitedWidth' | 'row' | 'size' | 'transparent' | 'noPadding' | 'className'>;

declare type TopLayerSizeType = 'small' | 'medium' | 'large';

export declare function Transition({ active, delay, fillMode, onTransitionEnd, ...otherProps }: TransitionPropsType): React.JSX.Element | null;

export declare namespace Transition {
    var createEffect: typeof predefinedEffects.createEffect;
}

declare type TransitionEffectFnType = (prefersReducedMotion: boolean) => TransitionEffectType | null;

export declare type TransitionEffectType = Readonly<{
    initial?: PropertyObjectType;
    animate?: PropertyObjectType;
    exit?: PropertyObjectType;
}>;

export declare type TransitionPropsType = Readonly<{
    active: boolean;
    effect: TransitionEffectType | TransitionEffectFnType | null;
    delay?: number;
    /**
     * Defines how styles are applied to the container element before
     * and after executing the transition effect, extending the animation.
     *
     * - `none` (default) no styles are applied when the effect is not animating,
     * - `forwards` retains styles from the recent phase of the current effect,
     * - `backwards` applies styles from the upcoming phase of the current effect
     *    as soon as possible, mounting component earlier and before the delay,
     * - `both` follows the rules for both forwards and backwards.
     */
    fillMode?: 'none' | 'forwards' | 'backwards' | 'both';
    /**
     * Makes a component "inline" without a line-break after
     * the container element, so the element can sit next to
     * other elements. That is useful for text transitions.
     */
    inline?: boolean;
    className?: string;
    children?: React.ReactNode;
    onTransitionStart?: (effect: TransitionEffectType) => void;
    onTransitionEnd?: (effect: TransitionEffectType) => void;
}>;

export declare const UnstyledButton: React.ForwardRefExoticComponent<{
    className?: string | undefined;
} & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;

export declare type UnstyledButtonPropsType = {
    className?: string;
} & React.ButtonHTMLAttributes<HTMLButtonElement>;

export declare const useChipContext: () => ChipContextType;

declare const usePopover: ({ placement, customId, defaultOpen, open, useHover, useClick, useFocus, role, onOpenChange, }: UsePopoverPropTypes) => {
    placement: Placement;
    strategy: Strategy;
    middlewareData: MiddlewareData;
    x: number | null;
    y: number | null;
    update: () => void;
    reference: (node: ReferenceType | null) => void;
    floating: (node: HTMLElement | null) => void;
    positionReference: (node: ReferenceType | null) => void;
    context: {
        x: number | null;
        y: number | null;
        placement: Placement;
        strategy: Strategy;
        middlewareData: MiddlewareData;
        isPositioned: boolean;
        update: () => void;
        reference: (node: ReferenceType | null) => void;
        floating: (node: HTMLElement | null) => void;
        open: boolean;
        onOpenChange: (open: boolean) => void;
        events: FloatingEvents;
        dataRef: React.MutableRefObject<ContextData>;
        nodeId: string | undefined;
        floatingId: string;
        refs: ExtendedRefs<ReferenceType>;
        elements: ExtendedElements<ReferenceType>;
    };
    refs: ExtendedRefs<ReferenceType>;
    elements: ExtendedElements<ReferenceType>;
    isPositioned: boolean;
    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
    id: string;
    isOpen: boolean;
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
    arrowRef: React.MutableRefObject<null>;
    arrowPadding: number;
    hasArrow: boolean;
    setHasArrow: React.Dispatch<React.SetStateAction<boolean>>;
    isMounted: boolean;
    status: "close" | "open" | "initial" | "unmounted";
    role: PopoverRole;
    floatingPlacement: Placement;
};

export declare const usePopoverContext: () => PopoverContextType;

declare interface UsePopoverPropTypes {
    placement?: PopoverPlacement;
    customId?: string;
    defaultOpen?: boolean;
    open?: boolean;
    useHover?: boolean;
    useClick?: boolean;
    useFocus?: boolean;
    role?: PopoverRole;
    onOpenChange?: (arg0: boolean) => void;
}

export declare const useRadioContext: () => RadioContextType;

export declare function useReducedMotion(): boolean;

declare const useTooltip: ({ placement, customId, size, color, defaultOpen, open, asLabel, onOpenChange, }: UseTooltipPropTypes) => {
    placement: Placement;
    strategy: Strategy;
    middlewareData: MiddlewareData;
    x: number | null;
    y: number | null;
    update: () => void;
    reference: (node: ReferenceType | null) => void;
    floating: (node: HTMLElement | null) => void;
    positionReference: (node: ReferenceType | null) => void;
    context: {
        x: number | null;
        y: number | null;
        placement: Placement;
        strategy: Strategy;
        middlewareData: MiddlewareData;
        isPositioned: boolean;
        update: () => void;
        reference: (node: ReferenceType | null) => void;
        floating: (node: HTMLElement | null) => void;
        open: boolean;
        onOpenChange: (open: boolean) => void;
        events: FloatingEvents;
        dataRef: React.MutableRefObject<ContextData>;
        nodeId: string | undefined;
        floatingId: string;
        refs: ExtendedRefs<ReferenceType>;
        elements: ExtendedElements<ReferenceType>;
    };
    refs: ExtendedRefs<ReferenceType>;
    elements: ExtendedElements<ReferenceType>;
    isPositioned: boolean;
    getReferenceProps: (userProps?: React.HTMLProps<Element> | undefined) => Record<string, unknown>;
    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
    getItemProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
    id: string;
    asLabel: boolean | undefined;
    isOpen: boolean;
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
    arrowRef: React.MutableRefObject<null>;
    arrowPadding: number;
    size: SizeType_11;
    color: ColorType_5;
    isMounted: boolean;
    status: "close" | "open" | "initial" | "unmounted";
    floatingPlacement: Placement;
};

export declare const useTooltipContext: () => TooltipContextType;

declare interface UseTooltipPropTypes {
    placement?: TooltipPlacement;
    customId?: string;
    size?: SizeType_11;
    color?: ColorType_5;
    defaultOpen?: boolean;
    open?: boolean;
    asLabel?: boolean;
    onOpenChange?: (arg0: boolean) => void;
}

export { }