import { AllHTMLAttributes } from 'react';
import type { ChangeEvent } from 'react';
import { ChangeEventHandler } from 'react';
import { CountryCode } from 'libphonenumber-js';
import { CSSProperties } from 'react';
import { E164Number } from 'libphonenumber-js';
import { FocusEventHandler } from 'react';
import { FormEvent } from 'react';
import { FunctionComponent } from 'react';
import { HTMLAttributes } from 'react';
import type { InputHTMLAttributes } from 'react';
import { JSX as JSX_2 } from 'react';
import { MouseEventHandler } from 'react';
import { MutableRefObject } from 'react';
import { default as React_2 } from 'react';
import { ReactNode } from 'react';
import { RefCallback } from 'react';

export declare const AdvancedTable: React_2.FunctionComponent<AdvancedTableProps>;

declare interface AdvancedTableAction {
    label: React_2.ReactNode | ((row?: AdvancedTableRow) => React_2.ReactNode);
    action: (row?: AdvancedTableRow) => void;
    isDisabled?: (row?: AdvancedTableRow) => boolean | boolean;
    isExcluded?: (row?: AdvancedTableRow) => boolean | boolean;
    actionId?: string;
}

declare interface AdvancedTableActionGroup {
    header?: string;
    actions: AdvancedTableAction[];
}

declare interface AdvancedTableCellProps extends Omit<React_2.AllHTMLAttributes<HTMLDivElement>, 'value'> {
    value: any;
    renderCellContent?: RenderCellContent;
    isCellContentInteractive?: boolean;
    width?: string | number;
    widthBuffer?: number;
    alignment?: Alignment;
    rowId: string;
    columnId: string;
    rowIndex: number;
    columnIndex: number;
    'data-testid'?: string;
    isFocused: boolean;
    onKeyDown: React_2.KeyboardEventHandler<HTMLDivElement>;
    onFocus: React_2.FocusEventHandler<HTMLDivElement>;
    isDragging: boolean;
    rowPropReference: AdvancedTableRow;
    rowsProp: AdvancedTableRow[];
    depth: number;
    onRowsChange?: (newRows: AdvancedTableRow[]) => void;
}

export declare interface AdvancedTableColumnConfig {
    id: string;
    headerLabel: React_2.ReactNode | React_2.ComponentType<AdvancedTableHeaderLabelProps>;
    width?: string | number;
    alignment?: 'left' | 'center' | 'right';
    sortOptions?: {
        ascendingLabel: string;
        descendingLabel: string;
        ascendingIcon?: React_2.ComponentType;
        descendingIcon?: React_2.ComponentType;
        sort?: (selectedSortOption: AdvancedTableSelectedSortOption) => AdvancedTableRow[];
    }[];
    renderCellContent?: (cellParams: {
        value: AdvancedTableCellProps['value'];
        setValue: (newValue: any) => void;
        focusCell: () => void;
        focusableElementRef: React_2.Ref<any>;
        isEditing: boolean;
        rowId: string;
        columnId: string;
        rowIndex: number;
        columnIndex: number;
    }) => React_2.ReactNode;
    isCellContentInteractive?: boolean;
}

export declare interface AdvancedTableHeaderLabelProps {
    sortIndicator: React_2.ReactNode;
    focusSource?: 'keyboard' | 'mouse' | null;
    contentId?: string;
    shouldShowTooltip?: boolean;
    isMenuOpen?: boolean;
}

declare interface AdvancedTablePaginationProps {
    rowsPerPage: number;
    currentPage: number;
    setCurrentPage: React_2.Dispatch<React_2.SetStateAction<number>>;
    rows: AdvancedTableRow[];
    ariaLabel?: AdvancedTableProps['paginationAriaLabel'];
    onPageChange?: (pageNumber: number) => void;
    className?: string;
    'data-testid'?: string;
}

export declare interface AdvancedTableProps {
    /** An array of column config objects that configure each column. */
    columnConfigs: AdvancedTableColumnConfig[];
    /** An array of row objects to define the rows.
     * @defaultValue []
     */
    rows?: AdvancedTableRow[];
    /** Handler to be called whenever the rows change. In case of modifiable cell content, it should trigger state changes (e.g. `setRows`). */
    onRowsChange?: (newRows: AdvancedTableRow[]) => void;
    /** Handler to be called whenever a row is selected from click or Enter. When defined, enables the ability to focus an entire row via keyboard navigation. */
    onRowSelect?: (row: AdvancedTableRow) => void;
    /** Used to control which row is selected. */
    selectedRowId?: string;
    /** Handler to be called whenever a row checkbox is toggled. When defined, adds a checkbox to each row and enables the ability to focus an entire row via keyboard navigation. */
    onCheckedRowIdsChange?: (newCheckedRowIds: string[]) => void;
    /** Used to control which rows are checked. */
    checkedRowIds?: string[];
    /** Handler to be called whenever a sort option is selected. */
    onSelectedSortOptionChange?: (newSelectedSortOption: AdvancedTableSelectedSortOption) => void;
    /** Control which sort option is initially selected. */
    defaultSelectedSortOption?: AdvancedTableSelectedSortOption;
    /** Control which sort option is selected. */
    selectedSortOption?: AdvancedTableSelectedSortOption;
    /** Prevents users from pinning/unpinning columns.
     * @defaultValue false */
    disableUserPinnableColumns?: boolean;
    /** An array of column ids to control which columns are intitially pinned.
     * @defaultValue [] */
    initialPinnedColumns?: string[];
    /** An array of column ids to control which columns are pinned. */
    pinnedColumns?: string[];
    /** Handler to be called whenever a user pins/unpins a column. */
    onPinnedColumnsChange?: (newPinnedColumns: string[]) => void;
    /** Prevents users from moving columns left/right.
     * @defaultValue false */
    disableUserReorderableColumns?: boolean;
    /** An array of column ids to control the order the columns are rendered in.
     * When not defined, the initial column order defaults to the order of the `columnConfigs` prop. */
    columnOrder?: string[];
    /** Handler to be called whenever a user moves a column. */
    onColumnOrderChange?: (newColumnOrder: string[]) => void;
    /** Prevents users from changing column widths.
     * @defaultValue false */
    disableUserResizableColumns?: boolean;
    /** An object used to control the column widths where the keys are columnIds and the values are widths.
     * When not defined, the initial column widths default to the width specified in the `columnConfigs` prop. */
    columnWidths?: Record<string, string | number>;
    /** Handler to be called whenever a user resizes a column. */
    onColumnWidthsChange?: (newColumnWidths: Record<string, string | number>) => void;
    /** Number of lines to allow text to wrap in column headers.
     * @defaultValue 1
     */
    headerMaxLines?: number;
    /** Determines the number of rows for each page. Default is all rows. */
    rowsPerPage?: number;
    /** Determines the starting page; must be used with `rowsPerPage`.
     * @defaultValue 1
     */
    initialPage?: number;
    /** Handler to be called whenever the page changes. */
    onPageChange?: AdvancedTablePaginationProps['onPageChange'];
    /** Appended to internal classes on the pagination interface. */
    paginationClassName?: string;
    /** The aria-label applied to the pagination interface. */
    paginationAriaLabel?: string;
    /** The id of the element that serves as an accessible label for the AdvancedTable. */
    'aria-labelledby'?: string;
    /** An accessible label for the `AdvancedTable` for when it does not have a visible label. */
    'aria-label'?: string;
    /** The id of the element that describes `AdvancedTable`. Internally this is combined with the screen reader descriptions mentioned in the localization section. */
    'aria-describedby'?: string;
    /** Forwarded to the containing `div` element and to the sub-elements, each with their own suffix:
     * - columnheader: `-<columnId>`, or `-CheckboxColumnHeader` for the checkbox column
     * - columnheader menu: `-<columnId>-ColumnHeaderMenu`
     *   - pin column: `-PinColumn`
     *   - move column left: `-MoveColumnLeft`
     *   - move column right: `-MoveColumnRight`
     *   - sort: `-Sort-<index>-<direction>`
     * - row: `-row-<rowId>`
     * - row checkbox: `-row-<rowId>-Checkbox`
     * - row action button: `-row-<rowId>-RowActionButton`
     * - row action menu: `-row-<rowId>-RowActionMenu`
     *   - action: `-action-<actionId>`
     * - gridcell: `-cell-<rowId>-<columnId>`
     * - pagination: `-TablePagination`
     *   - previous button: `-PreviousButton`
     *   - page input: `-PageInput`
     *   - next button: `-NextButton` */
    'data-testid'?: string;
    /** Controls which actions appear beside each row. */
    rowActions?: AdvancedTableActionGroup[];
    /** The aria-label applied to the row actions button. */
    rowActionsButtonAriaLabel?: string;
    /** Where to prioritize placement of the rowActions pane relative to the button.
     * @defaultValue 'bottom-end'
     */
    rowActionsPlacement?: DropdownListProps['placement'];
    /** A unique id for the AdvancedTable. */
    id?: string;
}

export declare interface AdvancedTableRow {
    id: string;
    data: Record<string, any>;
    isExpanded?: boolean;
    isCheckboxDisabled?: boolean;
    childRows?: AdvancedTableRow[];
    unsafe_rowProps?: Record<string, any>;
}

export declare interface AdvancedTableSelectedSortOption {
    columnId: string;
    index: number;
    direction: 'ascending' | 'descending' | 'none';
}

declare type Alignment = AdvancedTableColumnConfig['alignment'];

declare interface ButtonProps extends React_2.AllHTMLAttributes<HTMLButtonElement> {
    /** The contents of the button. */
    children?: React_2.ReactNode;
    /** Specifies the use of the button and customizes its color.
     * @defaultValue 'default'*/
    kind?: 'default' | 'primary' | 'secondary' | 'tertiary' | 'link' | 'danger';
    /** Disables click events on the button and styles it to look as though it cannot be clicked.
     * @defaultValue false */
    disabled?: boolean;
    /** Makes the button take up the full width of its container.
     * @defaultValue false */
    full?: boolean;
    /** Makes the button smaller.
     * @defaultValue false */
    small?: boolean;
    /** Appended to internal classes on the `button` element. */
    className?: string;
    /** Specifies the type of the button.
     * @defaultValue 'button' */
    type?: 'button' | 'submit' | 'reset';
    /** Handler to be called when the button is clicked. Use to handle user interaction with the button. */
    onClick?: (event: React_2.MouseEvent<HTMLButtonElement>) => void;
    /** Handler to be called when a keyboard key is pressed down while button has focus. */
    onKeyDown?: (event: React_2.KeyboardEvent<HTMLButtonElement>) => void;
    /** Causes the button to be declared as disabled by screen readers. If not defined, `aria-disabled` defaults to the value of the `disabled` prop. */
    'aria-disabled'?: boolean;
    [prop: string]: any;
}

export declare const Chat: React_2.ForwardRefExoticComponent<ChatProps & React_2.RefAttributes<HTMLDivElement>>;

export declare const ChatInput: React_2.ForwardRefExoticComponent<ChatInputProps & React_2.RefAttributes<HTMLTextAreaElement>>;

export declare interface ChatInputProps {
    /** Function to call when the send button is clicked
     * or "enter" is pressed on the input or send button */
    onMessageSend?: (message: string) => void;
    /** Whether the input and button should be disabled */
    isDisabled?: boolean;
    /** The value of the underlying `textarea`
     * @defaultValue false
     */
    value?: string;
    /** Function to call whenever the value of theunderlying `textarea` changes */
    onChange?: (newValue: string) => void;
    /** Forwarded to sub-components with the following suffixes
     * * `-input`
     * * `-button`
     */
    'data-testid'?: string;
    /**
     * The value of the placeholder of the `textarea`
     * @defaultValue translate('chat.inputLabel')
     */
    placeholderText?: string;
    /**
     * Identifier for this component.
     * * Input will receive <id>-chat-input
     * * Helper text will receive <id>-input-helper-text
     * * Error text will receive <id>-input-error-text
     */
    id?: string;
    /**
     * Max character limit that can be submitted to component, set to undefined/less or equal 0 to disable
     */
    characterLimit?: number;
    /**
     *  Helper text content for characterLimit
     *  @defaultValue translate('chat.inputHelperText')
     */
    helperText?: string;
}

export declare const ChatMessage: React_2.ForwardRefExoticComponent<ChatMessageProps & React_2.RefAttributes<HTMLLIElement> & React_2.RefAttributes<unknown>>;

export declare const ChatMessageList: React_2.ForwardRefExoticComponent<ChatMessageListProps & React_2.RefAttributes<HTMLDivElement>>;

export declare interface ChatMessageListProps {
    /** The `Message`s to display */
    children?: ReactNode;
    /** Used to control which child in the message list should be part of the page's tab order.
     * See the accessibility notes for details on if/how you should use this prop */
    focusedMessageIndex?: number;
    /** Used to control which child in the message list should be part of the page's tab order.
     * See the accessibility notes for details on if/how you should use this prop */
    onFocusedMessageIndexChange?: (newFocusedMessageIndex: number) => void;
    /** Forwarded to the `div` element */
    'data-testid'?: string;
}

export declare interface ChatMessageProps {
    /** The message's content */
    children: ReactNode;
    /** Who the message is from. Sets the message's style and labels */
    variant: Variant;
    /** The type of message. Updates the message's style and labels
     * @defaultValue 'default'
     */
    messageLevel?: MessageLevel;
    /** Forwarded to the `li` element */
    'data-testid'?: string;
    /** Sets the message text to be used in the message's accessible label.
     * See the accessibility notes for details on if/how you should use this prop */
    accessibleText?: string;
    /** Sets the message header to be used in the message's accessible label.
     * See the accessibility notes for details on if/how you should use this prop */
    accessibleHeader?: string;
}

export declare interface ChatProps {
    /** The `ChatMessageList` and `ChatInput` */
    children: ReactNode;
    /** Function to call whenever the cancel button (visible when `isLoading` is `true`) is clicked */
    onMessageCancel?: () => void;
    /** Displays a loading spinner and a button to cancel the last message
     * @defaultValue false
     */
    isLoading?: boolean;
    /** Forwarded to the `div` element */
    'data-testid'?: string;
}

declare interface CheckboxRegisterProps<V extends Values> {
    name: keyof V;
    type: 'checkbox';
    checked: boolean;
    onBlur: FocusEventHandler<HTMLInputElement>;
    onChange: ChangeEventHandler<HTMLInputElement>;
    ref: RefCallback<HTMLInputElement>;
}

declare type ChildrenType = React_2.ReactNode & React_2.RefAttributes<HTMLElement>;

declare type ChildrenType_2 = React_2.ReactNode & React_2.RefAttributes<HTMLElement>;

export declare const CollapsibleSearchInput: React_2.ForwardRefExoticComponent<CollapsibleSearchInputProps & React_2.RefAttributes<HTMLSpanElement>>;

export declare interface CollapsibleSearchInputProps {
    /** The initial value for the search input.
     * @defaultValue ''
     */
    defaultValue?: string;
    /** The value for the search input. */
    value?: string;
    /** Handler to be called when the value of the search input changes. */
    onValueChange?: (newValue: string) => void;
    /** A custom placeholder for the search input. */
    placeholder?: string;
    /** The initial value for the expanded state
     * @defaultValue false
     */
    defaultIsExpanded?: boolean;
    /** If true, expands into a search input. If false, collapses into an icon button. */
    isExpanded?: boolean;
    /** Handler to be called when the `isExpanded` value changes. */
    onIsExpandedChange?: (newIsExpanded: boolean) => void;
    /** The width of the component when it is expanded. This can be any valid CSS `width` value. Use this prop instead of setting a `max-width` on the component.
     * @defaultValue 100%
     */
    widthWhenExpanded?: string | number;
    /** Forwarded to the [`SearchInput`](/components/search-input) component's `aria-label` prop. */
    searchInputAriaLabel?: string;
    /** Forwarded to the [`SearchInput`](/components/search-input) component's `aria-labelledby` prop. */
    searchInputAriaLabelledBy?: string;
    /** Forwarded to the [`SearchInput`](/components/search-input) component's `aria-describedby` prop. */
    searchInputAriaDescribedBy?: string;
    /** Forwarded to the containing `span` element, the [`SearchInput`](/components/search-input), and the [`IconButton`](/components/icon-button). The subcomponents each get their own suffix:
     * * `SearchInput`: `-SearchInput`
     * * `IconButton`: `-IconButton`
     * */
    'data-testid'?: string;
}

export declare const CollectionGrid: React_2.ForwardRefExoticComponent<CollectionGridProps & React_2.RefAttributes<HTMLElement>>;

export declare const CollectionGridItem: React_2.ForwardRefExoticComponent<CollectionGridItemProps & React_2.RefAttributes<HTMLElement>>;

export declare interface CollectionGridItemProps {
    /** Replaces the `CollectionGridItem`'s default element with its single child and merges `CollectionGridItem`'s props and behavior into the child's. This is especially useful if your grid item should be represented by a semantic HTML element. Use this prop with caution, as any future changes we make to the component may override the child's props.
     * @defaultValue false
     */
    asChild?: boolean;
    /** Content to display inside of the grid item */
    children?: ChildrenType;
    /** Added to the containing `div` */
    'data-testid'?: string;
}

export declare interface CollectionGridProps extends CollectionGridItemProps {
    /** Sets the minimum width that a column in the grid will shrink to */
    minColumnWidth?: string;
    /** Sets the maximum width that a column in the grid will take up
     * @defaultValue 1fr
     */
    maxColumnWidth?: string;
    /** Sets the number of columns in the grid. The two non-numeric options you will generally use are `auto-fit` and `auto-fill`. `auto-fill` means "fill the row with as many columns as possible, even if some are empty". `auto-fit` does the same thing, but extra space is distributed among non-empty columns instead of leaving empty space.
     * @defaultValue auto-fit
     */
    numColumns?: number | string;
    /** Sets the height of rows in the grid. If not provided, row heights are established by the height of the grid's children */
    rowHeight?: React_2.CSSProperties['gridAutoRows'];
    /** Sets the size of the gap between columns in the grid */
    columnGap?: React_2.CSSProperties['columnGap'];
    /** Sets the size of the gap between rows in the grid */
    rowGap?: React_2.CSSProperties['rowGap'];
    /** Sets `columnGap` and `rowGap` */
    gap?: React_2.CSSProperties['gap'];
}

export declare function Combobox({ initialValue, value, onChange, onSubmit, isDisabled, isInvalid, isRequired, isLoading, isOpen: externalIsOpen, onIsOpenChange: externalOnIsOpenChange, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'data-testid': dataTestId, children, }: ComboboxProps): React_2.ReactElement;

export declare const ComboboxFlyout: FunctionComponent<ComboboxFlyoutProps>;

export declare interface ComboboxFlyoutProps {
    /** The `ComboboxOption`s and `ComboboxGroup`s. */
    children?: ReactNode;
    /** Forwarded to the element with `role="listbox"`. If defined, it will override the `aria-label` prop value provided to `Combobox`. */
    'aria-label'?: string;
    /** Forwarded to the element with `role="listbox"`. If defined, it will override the `aria-labelledby` prop value provided to `Combobox`. */
    'aria-labelledby'?: string;
    /** Forwarded to the element with `role="listbox"`. */
    'aria-describedby'?: string;
}

export declare function ComboboxGroup({ label, 'aria-describedby': ariaDescribedBy, children, }: ComboboxGroupProps): React_2.ReactElement;

export declare interface ComboboxGroupProps {
    /** The `ComboboxOption`s. */
    children: ReactNode;
    /** Rendered as text that represents the name of the group. The label needs to be unique across all `ComboboxGroup`s for a given `Combobox` instance. */
    label: string;
    /** Forwarded to the element with `role="group"`. */
    'aria-describedby'?: string;
}

export declare const ComboboxInput: React_2.ForwardRefExoticComponent<ComboboxInputProps & React_2.RefAttributes<HTMLInputElement>>;

export declare interface ComboboxInputProps {
    /** Forwarded to the `placeholder` prop of [Input](/next/input). */
    placeholder?: string;
    /** Forwarded to the `leftAddOn` prop of [Input](/next/input). */
    leftAddOn?: InputProps['leftAddOn'];
    /** Forwarded to the `className` prop of [Input](/next/input). */
    className?: string;
    /** Forwarded to the `style` prop of [Input](/next/input). */
    style?: CSSProperties;
    /** Forwarded to the `id` prop of [Input](/next/input). */
    id?: string;
    /**
     * Disables search filtering. Useful for custom search behavior.
     * @defaultValue false
     */
    isSearchFilteringDisabled?: boolean;
    /** Forwarded to the `aria-label` prop of [Input](/next/input).  If defined, it will override the `aria-label` prop value provided to `Combobox` */
    'aria-label'?: string;
    /** Forwarded to the `aria-labelledby` prop of [Input](/next/input).  If defined, it will override the `aria-labelledby` prop value provided to `Combobox` */
    'aria-labelledby'?: string;
    /** Forwarded to the `aria-describedby` prop of [Input](/next/input). */
    'aria-describedby'?: string;
}

export declare function ComboboxOption({ label }: ComboboxOptionProps): React_2.ReactElement | null;

export declare interface ComboboxOptionProps {
    /** Rendered as text that represents the name of the option. The label needs to be unique across all `ComboboxOption`s for a given `Combobox` instance. */
    label: string;
}

export declare interface ComboboxProps {
    /** The `ComboboxInput` and `ComboboxFlyout`. */
    children: ReactNode;
    /** The initial value of the input.
     * @defaultValue ''
     */
    initialValue?: string;
    /** The current value of the combobox. */
    value?: string;
    /** Handler to be called whenever `value` changes. */
    onChange?: (newValue: string) => void;
    /** Handler to be called whenever `enter` is pressed or a value is selected.
     */
    onSubmit?: (value: string) => void;
    /**
     * * Removes the component from the page tab order.
     * * Adds styling to the ComboboxInput to indicate that it is disabled.
     * * Closes the flyout.
     * @defaultValue false
     */
    isDisabled?: boolean;
    /** Tells the screen reader that the `ComboboxInput` is invalid. Also adds styling to the `ComboboxInput` to indicate that it is invalid.
     * * @defaultValue false
     */
    isInvalid?: boolean;
    /** Tells the screen reader that the `ComboboxInput` is required.
     * * @defaultValue false
     */
    isRequired?: boolean;
    /** Indicates that new `ComboboxOption`s are loading. If this prop is used, be sure to set the `width` CSS property on the `ComboboxInput` so that the loading spinner doesn't make the input wider when `isLoading` is `true`.
     * @defaultValue false
     */
    isLoading?: boolean;
    /** Controls the open state of the flyout. */
    isOpen?: boolean;
    /** Handler to be called whenever the open state changes. */
    onIsOpenChange?: (shouldOpen: boolean) => void;
    /** Forwarded to the `ComboboxInput` and `ComboboxFlyout`. */
    'aria-label'?: string;
    /** Forwarded to the `ComboboxInput` and `ComboboxFlyout`. */
    'aria-labelledby'?: string;
    /** Forwarded to sub-components with the following suffixes:
     * * `ComboboxInput`: `-input`
     * * `ComboboxFlyout`: `-flyout`
     * * `ComboboxGroup`: `-group-<label>`
     * * `ComboboxOption`: `-option-<label>`
     */
    'data-testid'?: string;
}

declare interface CustomRegisterProps<V extends Values> {
    name: keyof V;
    value: V[keyof V];
    onBlur: OnBlur;
    onChange: OnChange<V>;
    ref: RefCallback<HTMLElement>;
}

export declare const Drawer: {
    ({ id, isOpen: externalIsOpen, onIsOpenChange, title, width, zIndex, elementRefToFocusOnClose, containerRef, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestId, children, }: DrawerProps): React_2.ReactPortal | null;
    displayName: string;
};

export declare interface DrawerProps {
    /** Controls whether component is expanded or collapsed */
    isOpen: boolean;
    /** Handler to be called when component expands or collapses */
    onIsOpenChange: (newIsOpen: boolean) => void;
    /** Header content displayed inside expanded Drawer */
    title: ReactNode;
    /** The contents of the Drawer */
    children: ReactNode;
    /** Id applied to outermost Drawer element */
    id?: string;
    /** Sets the width of the expanded Drawer
     * @defaultValue '292px'
     */
    width?: CSSProperties['width'];
    /** Sets the zIndex of the Drawer. The overlay zIndex will be 1 smaller than the Drawer zIndex.
     * @defaultValue 1000
     */
    zIndex?: CSSProperties['zIndex'];
    /** Ref belonging to element that should be focused when Drawer collapses */
    elementRefToFocusOnClose?: MutableRefObject<HTMLElement | null>;
    /** Ref belonging to the element that the Drawer component should fill
     * @defaultValue document.body
     */
    containerRef?: MutableRefObject<HTMLElement | null>;
    /** Forwarded to the `aside` element */
    'aria-label'?: string;
    /** Forwarded to the `aside` element */
    'aria-labelledby'?: string;
    /** Forwarded to the `aside` element */
    'aria-describedby'?: string;
    /** Added to the outermost Drawer element and to main sub-components with the following suffixes:
     * * `-title`: assigned to the title container
     * * `-close-button`: assigned to the close button inside the expanded Drawer
     * * `-body`: assigned to the body content container
     * * `-overlay`: assigned to the overlay that appears while the Drawer is expanded
     * */
    'data-testid'?: string;
}

declare interface DropdownButtonProps extends Omit<React_2.AllHTMLAttributes<HTMLButtonElement>, 'label'> {
    /** The component that should render as the dropdown button. */
    children?: React_2.ReactElement & {
        ref?: React_2.Ref<HTMLElement>;
    };
    /**
     * The text to display when no option is selected.
     * @defaultValue ''
     */
    defaultLabel?: string | React_2.ReactNode;
    /** The label to display. */
    label?: React_2.ReactNode;
    /**
     * The unique identifier for the button, used for linking accessible labels throughout the component.
     * @defaultValue random
     */
    id?: string;
    /** @internal */
    disabled?: boolean;
    /** @internal */
    isInvalid?: boolean;
    /** @internal */
    onLabelChange?: (string: any) => void;
    /**
     * The `id` of the element that acts as a label for the button.
     * Overrides any `aria-labelledby` value received from the top-level
     * `Dropdown` component.
     */
    'aria-labelledby'?: string;
    /**
     * An accessible label for the dropdown that is used by screen readers.
     * Overrides any `aria-label` value received from the top-level `Dropdown` component.
     */
    'aria-label'?: string;
    /**
     * The `id` of the element that acts as a description for the button.
     * Overrides any `aria-describedby` value received from the top-level
     * `Dropdown` component.
     */
    'aria-describedby'?: string;
    /** Appended to internal classes on the `button` element. */
    className?: string;
    /** Appended to the internal `button` element. Overwrites `data-testid` from parent, if present. */
    'data-testid'?: string;
    [prop: string]: any;
}

declare interface DropdownListProps extends React_2.AllHTMLAttributes<HTMLDivElement> {
    /** The displayed `DropdownOption` components. */
    children?: React_2.ReactNode;
    /**
     * Where to prioritize placement of the `DropdownList` relative to the `DropdownButton`.
     * @defaultValue 'bottom-start'
     */
    placement?: Placement;
    /** Handler to be called when a keyboard key is pressed down. */
    onKeyDown?: (event: React_2.KeyboardEvent<HTMLDivElement>) => void;
    /**
     * The unique identifier for the `DropdownList`, used for linking it to the `DropdownButton`.
     * @defaultValue random
     */
    id?: string;
    /**
     * The container element where the `DropdownList` should be rendered.
     * Overrides the default set by `UIProvider`.
     */
    portalTarget?: HTMLElement;
    /**
     * The id of the element that acts as a label for the listbox.
     * Used to override the `DropdownButton` serving as its label.
     * @defaultValue button id
     */
    'aria-labelledby'?: string;
    /** Appended to internal classes on the containing `div` element. */
    className?: string;
    /** Appended to the internal `div` element. Overwrites `data-testid` from parent, if present. */
    'data-testid'?: string;
    [prop: string]: any;
}

declare interface ExternalStackProps extends StackItemProps {
    /** The size of the gap to place between the component's children. */
    gap?: string | number;
    /** Sets the CSS `padding-left` for the component. */
    paddingLeft?: string | number;
    /** Sets the CSS `padding-right` for the component. */
    paddingRight?: string | number;
    /** Sets the CSS `padding-top` for the component. */
    paddingTop?: string | number;
    /** Sets the CSS `padding-bottom` for the component. */
    paddingBottom?: string | number;
    /** Sets the CSS `margin-left` for the component. */
    marginLeft?: string | number;
    /** Sets the CSS `margin-right` for the component. */
    marginRight?: string | number;
    /** Sets the CSS `margin-top` for the component. */
    marginTop?: string | number;
    /** Sets the CSS `margin-bottom` for the component. */
    marginBottom?: string | number;
    alignChildrenX?: HStackAlignChildrenX | VStackAlignChildrenX;
    alignChildrenY?: HStackAlignChildrenY | VStackAlignChildrenY;
}

export declare const FilterAnchor: React_2.ForwardRefExoticComponent<FilterAnchorProps & React_2.RefAttributes<HTMLButtonElement>>;

export declare interface FilterAnchorProps extends Omit<AllHTMLAttributes<HTMLButtonElement>, 'type' | 'disabled' | 'aria-disabled'> {
    /** The label for the button. This should be treated as a form control label. */
    label: string;
    /** Indicates if the associated flyout is open. This component is not aware of whether the associated flyout is open, so the value must come from state held in a component wrapping this component. */
    isOpen: boolean;
    /** The filters passed in via this prop should be derived from values selected in the flyout. This component only displays the string and adds styling which means that the prop expects a string that is already translated. */
    selectedFilters?: string;
    /** If true, adds a lock icon. If this prop is set to `true`, a value for the `locked` translation key must be exist in the `UIProvider`.
     * @defaultValue false
     */
    isLocked?: boolean;
    /** Indicates if the component is disabled. Use this prop instead of `disabled` or `aria-disabled`.
     * @defaultValue false
     */
    isDisabled?: boolean;
    /** When set to `true`, the `selectedFilters` content will be replaced with a `LoadingSpinner` until `isLoading` is set to false again. Use for indicating asynchronous filtering.
     * @defaultValue false
     */
    isLoading?: boolean;
    /** Appended to the list of internal ids used to label the `button` element. */
    'aria-labelledby'?: string;
    /** An accessible label to indicate that new filters are loading, added to the `LoadingSpinner` that is visible when `isLoading` is set to `true`. */
    loadingSpinnerAriaLabel?: string;
    /** Appended to internal classes on the `button` element. */
    className?: string;
    /** Added to the `button` element, and to main sub-components with the following suffixes:
     * - `-label`: assigned to the label span
     * - `-selected-filters`: assigned to the selected filters span
     * - `-spinner`: assigned to the loading spinner
     */
    'data-testid'?: string;
}

declare type FormProps = React.ComponentPropsWithoutRef<'form'>;

declare type HandleSubmit = (onSubmit: OnSubmit) => (event: FormEvent<HTMLFormElement>) => Promise<void>;

export declare const HStack: React_2.ForwardRefExoticComponent<HStackProps & React_2.RefAttributes<HTMLDivElement>>;

declare type HStackAlignChildrenX = 'left' | 'center' | 'right' | 'spaceAround' | 'spaceBetween' | 'spaceEvenly';

declare type HStackAlignChildrenY = 'top' | 'center' | 'bottom' | 'stretch';

export declare interface HStackProps extends ExternalStackProps {
    /** Align children along the component's x-axis.
     * * `left`:  Move children to the left side of the container.
     * * `center`:  Move children to the horizontal center of the container.
     * * `right`: Move children to the right side of the container.
     * * `spaceAround`: Each child gets the same amount of space before it and after it. Each child gets space on both sides, so there will be more space between two children than there is between the first child and the stack's edge.
     * * `spaceBetween`: Distribute children to maximize the amount of space between them.
     * * `spaceEvenly`: Space children equally apart from each other and the edges of the stack.
     * @defaultValue 'center'
     */
    alignChildrenX?: HStackAlignChildrenX;
    /** Align children along the component's y-axis.
     * * `top`: Move children to the top of the container.
     * * `center`: Move children to the vertical center of the container.
     * * `bottom`: Move children to the bottom of the container.
     * * `stretch`: Stretch children vertically to take up the full width of the stack.
     * @defaultValue 'center'
     */
    alignChildrenY?: HStackAlignChildrenY;
}

export declare const Indicator: React_2.ForwardRefExoticComponent<IndicatorProps & React_2.RefAttributes<HTMLDivElement>>;

export declare interface IndicatorProps extends React_2.HTMLAttributes<HTMLDivElement> {
    /** The contents of the indicator. */
    children?: React_2.ReactNode;
    /** Specifies the use of the indicator and customizes its color.
     * @defaultValue 'generic'*/
    variant?: 'generic' | 'warning' | 'error' | 'success' | 'informational';
    /** Specifies the size of the indicator.
     * @defaultValue 'medium' */
    size?: 'small' | 'medium';
    /** Hides icon selected variant
     * @defaultValue false */
    hideIcon?: boolean;
    /** Appended to internal classes on the `indicator` element. */
    className?: string;
    [prop: string]: any;
}

export declare const Input: React_2.ForwardRefExoticComponent<InputProps & React_2.RefAttributes<HTMLInputElement>>;

export declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
    /**
     * Unique name for use with forms.
     *
     * See [Form API](../../form/getting-started) for more information.
     */
    name?: string;
    /** See [MDN notes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types). */
    type?: 'email' | 'number' | 'password' | 'tel' | 'text' | 'url';
    /** The initial value of the input. Use this prop instead of `value` and `onChange` when there is no need to control the input. */
    initialValue?: string;
    /** The value of the input. Use this prop with the `onChange` prop to create controlled state. */
    value?: string;
    /** Handler that is called when the value of the input changes. */
    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
    /** Provides a label for the input */
    label?: string;
    /** - Positioned on the left side of the `Input` (vertically centered).
     * - Pointer events are ignored by default for the add-on. If pointer events are needed, set `pointer-events: auto` on the root level element passed to this prop.
     * - If a `string` or `number` is passed in, the text will be hidden from screen readers. */
    leftAddOn?: ReactNode;
    /** - Positioned on the right side of the `Input` (vertically centered).
     * - Pointer events are ignored by default for the add-on. If pointer events are needed, set `pointer-events: auto` on the root level element passed to this prop.
     * - If a `string` or `number` is passed in, the text will be hidden from screen readers. */
    rightAddOn?: ReactNode;
    /** Adds an error message directly below `Input` */
    errorText?: ReactNode;
    /** Adds additional information directly below `Input` */
    helperText?: ReactNode;
    /** Makes the input ignore non-numeric input.
     *  @defaultValue true
     */
    allowDecimalNumbers?: boolean;
    /** Passed to the `input` */
    'data-testid'?: string;
    /** Appended to internal classes on the containing `span` element. */
    className?: string;
    /** Forwarded to the containing `span` element. */
    style?: CSSProperties;
}

export declare const LayoutGrid: React_2.ForwardRefExoticComponent<LayoutGridProps & React_2.RefAttributes<HTMLElement>>;

export declare const LayoutGridItem: React_2.ForwardRefExoticComponent<LayoutGridItemProps & React_2.RefAttributes<HTMLElement>>;

export declare interface LayoutGridItemProps {
    /** Content to display inside of the grid item */
    children?: ChildrenType_2;
    /** Assigns a grid item to one of the areas defined in the parent `LayoutGrid`'s `areas` prop */
    area?: React_2.CSSProperties['gridArea'];
    /** Replaces the `LayoutGridItem`'s default element with its single child and merges `LayoutGridItem`'s props and behavior into the child's. This is especially useful if your grid item should be represented by a semantic HTML element. Use this prop with caution, as any future changes we make to the component may override the child's props.
     * @defaultValue false */
    asChild?: boolean;
    /** Added to the containing `div` */
    'data-testid'?: string;
}

export declare interface LayoutGridProps extends LayoutGridItemProps {
    /** Defines the different sections of a grid. Each subarray represents a single row */
    areas: Array<Array<string>>;
    /** Defines the width of each grid column. Its length should match that of one of `areas`&apos;s subarrays */
    columnWidths: Array<string>;
    /** Defines the height of each grid row. Its length should match the length of `areas` */
    rowHeights?: Array<string>;
    /** Sets the size of the gap between columns in the grid */
    columnGap?: React_2.CSSProperties['columnGap'];
    /** Sets the size of the gap between rows in the grid */
    rowGap?: React_2.CSSProperties['rowGap'];
    /** Sets `columnGap` and `rowGap` */
    gap?: React_2.CSSProperties['gap'];
    /** Replaces the `LayoutGrid`'s default element with its single child and merges `LayoutGrid`'s props and behavior into the child's. This is especially useful if your grid should be represented by a semantic HTML element. Use this prop with caution, as any future changes we make to the component may override the child's props.
     * @defaultValue false
     */
    asChild?: boolean;
    /** @internal */
    'data-testid'?: string;
    /** @internal */
    area?: React_2.CSSProperties['gridArea'];
}

export declare const LoadingSpinner: React_2.ForwardRefExoticComponent<LoadingSpinnerProps & React_2.RefAttributes<HTMLDivElement>>;

export declare interface LoadingSpinnerProps extends Omit<React_2.AllHTMLAttributes<HTMLDivElement>, 'size'> {
    /** Makes the LoadingSpinner visible.
     * @defaultValue false */
    show?: boolean;
    /** The size of the `LoadingSpinner`. For `LoadingSpinner`s with no child component, a minimum width and height will be applied.
     * @defaultValue 'medium' */
    size?: 'xs' | 'small' | 'medium' | 'large';
    /** Changes the opacity of the `LoadingSpinner`'s children.
     * @defaultValue 'fade' */
    background?: 'hide' | 'fade';
    /** Changes the `LoadingSpinner` color from black to white.
     * @defaultValue false */
    inverted?: boolean;
    /** When the spinner is showing, pointer events will be disabled on the children, but children can still be navigated by a keyboard user. Add the `disabled` prop to children components as appropriate. */
    children?: React_2.ReactNode;
    /** Appended to internal classes on the containing `div` element. */
    className?: string;
    /** Controls the message sent to the screen reader for loading events. */
    'aria-label'?: string;
    /** Directs the screen reader to other elements designated for messaging. */
    'aria-labelledby'?: string;
    /** Controls the timing of screen reader messages.
     * @defaultValue 'polite' */
    'aria-live'?: 'off' | 'assertive' | 'polite';
    [prop: string]: any;
}

export declare const Menu: {
    ({ "data-testid": dataTestId, isOpen, onIsOpenChange, isDisabled, children, isVirtualizationDisabled, elementRefToFocusOnClose, }: MenuProps): React_2.ReactElement;
    displayName: string;
};

export declare const MenuButton: React_2.ForwardRefExoticComponent<MenuButtonProps & React_2.RefAttributes<HTMLButtonElement>>;

export declare interface MenuButtonProps extends Omit<AllHTMLAttributes<HTMLButtonElement>, 'type'> {
    /** Replaces the entire button component with its only child. Props will be merged together, excluding `className`. Only the `className` of the child will be used. See "Custom Anchor" example above.
     * @defaultValue false
     */
    asChild?: boolean;
    /** Either acts as the label, or replaces the `button` if used with `asChild`. */
    children: React_2.ReactNode;
}

export declare const MenuItem: React_2.ForwardRefExoticComponent<MenuItemProps & React_2.RefAttributes<HTMLDivElement> & React_2.RefAttributes<unknown>>;

export declare interface MenuItemProps extends AllHTMLAttributes<HTMLDivElement> {
    /** Disables the item
     * @defaultValue false
     */
    isDisabled?: boolean;
    /** Replaces the entire item with its only child. Props will be merged together, including `className`.
     * @defaultValue false
     */
    asChild?: boolean;
    /** Either acts as the label, or replaces the item if used with `asChild`. */
    children?: React_2.ReactNode;
    /** Handler to be called when `MenuItem` is selected. */
    onSelect?: () => void;
    /** The visible label for the item. This prop will overwrite any `string` `children` labels. */
    label?: string;
}

export declare const MenuPane: React_2.ForwardRefExoticComponent<MenuPaneProps & React_2.RefAttributes<HTMLDivElement> & React_2.RefAttributes<unknown>>;

export declare interface MenuPaneProps extends AllHTMLAttributes<HTMLDivElement> {
    /** Defines where to prioritize placement of the pane. A demo of this behavior is available [here](https://popper.js.org/).
     * @defaultValue "bottom-start"
     */
    placement?: Placement;
    /** Determines whether or not to include search functionality.
     * @defaultValue false
     */
    isSearchable?: boolean;
    /** Controls the value of the search bar. */
    searchValue?: string;
    /** Handler to be called whenever the search input value changes. */
    onSearchValueChange?: (newValue: string) => void;
    /** Disables search filtering. Useful for controlled searching.
     * @defaultValue false
     */
    isSearchFilteringDisabled?: boolean;
    /** Sets the z-index for the top-level menu flyout.
     * @defaultValue 1000
     */
    zIndex?: number;
}

export declare interface MenuProps {
    /** Controls whether or not the `MenuPane` is open
     * @defaultValue false
     */
    isOpen?: boolean;
    /** Handler to be called whenever the `MenuPane` should open or close */
    onIsOpenChange?: (shouldOpen: boolean) => void;
    /** Disables the entire component
     * @defaultValue false
     */
    isDisabled?: boolean;
    /** Accepts `MenuPane` and `MenuButton` */
    children: React_2.ReactNode;
    /** Controls whether or not `MenuItem`s are virtualized within their pane. By default, virtualization is enabled only if many items are passed.
     * @defaultValue false
     */
    isVirtualizationDisabled?: boolean;
    /** An element ref to focus when the menu closes. If this prop is not used, focus returns to the `MenuButton`. */
    elementRefToFocusOnClose?: React_2.RefObject<HTMLElement | null>;
    /** Forwarded to all component parts with the following suffixes:
     * - `MenuButton`: `-menubutton`
     * - `MenuPane`: `-menupane`
     * - `MenuItem`: `-menuitem-<index path>`
     *    - `<index path>`: Comprised of the indices of each `MenuItem` that must be activated in order to access this `MenuItem`.
     *    - See "SubMenu" example above.
     * - `SubMenu`: `-menupane-<index path>`
     *    - `<index path>`: Comprised of the indices of each `MenuItem` that must be activated in order to access this `SubMenu`.
     *    - See "SubMenu" examples above.
     * - Search bar: `-menusearch-<index path>`
     *    - `<index path>`: Comprised of the indices of each `MenuItem` that must be activated in order to access the search.
     *    - See "SubMenu" examples above.
     * */
    'data-testid'?: string;
}

declare type MessageLevel = 'info' | 'error' | 'default';

declare type OnBlur = () => void;

declare type OnChange<V extends Values> = (fieldValue: V[keyof V]) => void;

declare type OnSubmit = (values?: Values, event?: FormEvent<HTMLFormElement>) => Promise<void> | void;

export declare const Pagination: {
    ({ hidePageNumber, hideFirstAndLastButtons, numPages, currentPage, onPageChange, isDisabled, "data-testid": dataTestId, }: PaginationProps): React_2.ReactElement;
    displayName: string;
};

export declare interface PaginationProps {
    /** The current page in pagination. This should be passed in from a controlled state in the parent. */
    currentPage: number;
    /** The function to call when the page number is to change. This should be passed in from a controlled state in the parent. */
    onPageChange: (pageNumber: number) => void;
    /** The total number of pages to paginate through. When left blank the "of ####" label is removed. Also first and last buttons are removed. */
    numPages?: number;
    /** Controls whether or not to show the page number input and "of ####" label.
     * @defaultValue false
     */
    hidePageNumber?: boolean;
    /** Controls whether or not to show the first and last page buttons.
     * @defaultValue false
     */
    hideFirstAndLastButtons?: boolean;
    /** Controls if all controls in the pagination component are disabled.
     * @defaultValue false
     */
    isDisabled?: boolean;
    /** Test ID for use in testing environments. Added to the containing `div`
     * element and to each child component with a suffix:
     *
     * - First Page Button: `-first-page`
     * - Previous Page Button: `-previous-page`
     * - Current Page Input: `-current-page-input`
     * - Next Page Button: `-next-page`
     * - Last Page Button: `-last-page`
     */
    'data-testid'?: string;
}

export declare const PhoneNumberInput: React_2.ForwardRefExoticComponent<PhoneNumberInputProps & React_2.RefAttributes<HTMLInputElement>>;

export declare interface PhoneNumberInputProps {
    /** Determines the country to be displayed on initial load.
     * @defaultValue 'US'
     */
    initialCountryCode?: CountryCode;
    /** Determines the list of countries available in the dropdown. Defaults to all country codes listed in the table below. */
    countryCodes?: CountryCode[];
    /** Handler to be called when the user enters new input.
     * - `e164Number`: The phone number formatted to the [E.164 international standard](https://en.wikipedia.org/wiki/E.164).
     * - `isValidLength`: Returns whether or not the user-entered phone number matches a valid length for the given country code. These lengths are determined by Google's actively-maintained [libphonenumber](https://github.com/google/libphonenumber) library. National phone number standards commonly change, and this boolean is only as good as Google's ability to keep up with them.
     * - `countryCode`: The selected CountryCode. See ["Supported Countries/Regions" table](/next/phone-number-input/#supported-countriesregions) below.
     * - `rawUserInput`: The raw user input without any masking.
     */
    onChange?: (e164Number: E164Number | null, isValidLength: boolean, countryCode: CountryCode, rawUserInput: string) => void;
    /** Controls whether or not to limit user input to the maximum valid length for a given country. The "maximum valid length" is determined by Google's actively-maintained [libphonenumber](https://github.com/google/libphonenumber) library. National phone number standards commonly change, and this length limit is only as good as Google's ability to keep up with them.
     * @defaultValue false
     */
    limitToValidLength?: boolean;
    /** Disables the input and dropdown.
     * @defaultValue false
     */
    isDisabled?: boolean;
    /** The starting value. A formatting mask will be applied where possible. */
    initialValue?: string;
    /** Applied to the country code `button` dropdown. */
    buttonAriaLabel?: string;
    /** Applied to the `input`. */
    inputAriaLabel?: string;
    /** Applied to the country code `button` dropdown. */
    buttonAriaLabelledBy?: string;
    /** Applied to the `input`. */
    inputAriaLabelledBy?: string;
    /** Applied to the containing `div`. */
    'data-testid'?: string;
    /** Applied to the `input`. */
    inputId?: string;
}

declare type Placement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';

declare interface RadioRegisterProps<V extends Values> {
    name: keyof V;
    type: 'radio';
    value: string;
    checked: boolean;
    onBlur: FocusEventHandler<HTMLInputElement>;
    onChange: ChangeEventHandler<HTMLInputElement>;
    ref: RefCallback<HTMLInputElement>;
}

declare type Register<V extends Values> = {
    (name: keyof V, options: {
        type: 'text' | 'email' | 'password';
    }): TextRegisterProps<V>;
    (name: keyof V, options: {
        type: 'checkbox';
    }): CheckboxRegisterProps<V>;
    (name: keyof V, options: {
        type: 'radio';
        radioValue: string;
    }): RadioRegisterProps<V>;
    (name: keyof V, options: {
        type: 'custom';
    }): CustomRegisterProps<V>;
};

declare type RenderCellContent = AdvancedTableColumnConfig['renderCellContent'];

export declare const RowDisplayCount: ({ "data-testid": dataTestId, displayCount, displayCountOptions, onDisplayCountChange, isDisabled, }: RowDisplayCountProps) => React_2.ReactElement;

export declare interface RowDisplayCountProps {
    /** The number of rows to show in pagination. */
    displayCount: number;
    /** The options for counts to show in the dropdown. */
    displayCountOptions: Array<number>;
    /** The function called when a the display count is changed. */
    onDisplayCountChange: (newDisplayCount: number) => void;
    /** Controls whether the dropdown is disabled.
     * @defaultValue false
     */
    isDisabled?: boolean;
    /** Test ID for use in testing environments. Added to the containing `div`
     * element and to the `Select` child with the suffix `-select`.
     */
    'data-testid'?: string;
}

export declare const Select: {
    ({ multiselect, children, isDisabled, onChange, isOpen, onIsOpenChange, value, isInvalid, "data-testid": dataTestId, isVirtualizationDisabled, elementRefToFocusOnClose, }: SelectProps): React_2.ReactElement;
    displayName: string;
};

export declare const SelectButton: React_2.ForwardRefExoticComponent<SelectButtonProps & React_2.RefAttributes<HTMLButtonElement>>;

export declare interface SelectButtonProps extends AllHTMLAttributes<HTMLButtonElement> {
    /** Replaces the entire button component with its only child. Props will be merged together, excluding `className`. Only the `className` of the child will be used. See "Custom Anchor" example above.
     * @defaultValue false
     */
    asChild?: boolean;
    /** Overrides the default label when no items are selected. */
    placeholder?: string;
    /** Either acts as an override for the visible label, or replaces the `button` if used with `asChild`. */
    children?: React_2.ReactNode;
}

export declare const SelectItem: React_2.ForwardRefExoticComponent<SelectItemProps & React_2.RefAttributes<HTMLDivElement>>;

export declare interface SelectItemProps extends AllHTMLAttributes<HTMLDivElement> {
    /** Disables the item
     * @defaultValue false
     */
    isDisabled?: boolean;
    /** The visible label associated with the item. Also displayed in 'Selected items' pane, and determines search results. */
    label: string;
    /** The unique identifier for the item. */
    value: string | number;
}

export declare const SelectPane: React_2.ForwardRefExoticComponent<SelectPaneProps & React_2.RefAttributes<HTMLDivElement>>;

export declare interface SelectPaneProps extends AllHTMLAttributes<HTMLDivElement> {
    /** Defines where to prioritize placement of the pane.
     * @defaultValue 'bottom-start'
     */
    placement?: Placement;
    /** Determines whether or not to include search functionality.
     * @defaultValue false
     */
    isSearchable?: boolean;
    /** Controls the value of the search bar. */
    searchValue?: string;
    /** Handler to be called whenever the search input value changes. */
    onSearchValueChange?: (newValue: string) => void;
    /** Disables search filtering. Useful for custom search behavior.
     * @defaultValue false
     */
    isSearchFilteringDisabled?: boolean;
    /** Determines whether or not the 'Selected item' subpane is shown.
     * @defaultValue false
     */
    showSelectedItemsPane?: boolean;
    /** Sets the z-index for the top-level flyout.
     * @defaultValue 1000
     */
    zIndex?: number;
}

export declare interface SelectProps {
    /** Allows for the selection of multiple items.
     * @defaultValue false
     */
    multiselect?: boolean;
    /** Forwarded to all component parts with the following suffixes:
     * - `SelectButton`: `-selectbutton`
     * - `SelectPane`: `-selectpane`
     * - `SelectItem`: `-selectitem-<index path>`
     *   - `<index path>`: Comprised of the indices of each `SelectItem` that must be activated in order to access this `SelectItem`.
     *   - See "Multiselect" example above.
     * - `SubSelect`: `-selectpane-<index path>`
     *   - `<index path>`: Comprised of the indices of each `SelectItem` that must be activated in order to access this `SubSelect`.
     *   - See "Multiselect" examples above.
     * - Search bar:` -selectsearch-<index path>`
     *   - `<index path>`: Comprised of the indices of each SelectItem that must be activated in order to access the search.
     *   - See "Multiselect" examples above. */
    'data-testid'?: string;
    /** Controls whether or not the SelectPane is open. */
    isOpen?: boolean;
    /** Handler to be called whenever the `SelectPane` should open or close */
    onIsOpenChange?: (shouldOpen: boolean) => void;
    /** Disables the entire component
     * @defaultValue false
     */
    isDisabled?: boolean;
    /** Handler to be called whenever `value` should change */
    onChange?: (value: string | number | (string | number)[]) => void;
    /** Controls the selected value */
    value?: string | number | (string | number)[];
    /** Styles the component as invalid
     * @defaultValue false
     */
    isInvalid?: boolean;
    /** `SelectButton` and `SelectPane` */
    children: React_2.ReactNode;
    /** Controls whether or not SelectItems are virtualized within their pane. By default, virtualization is enabled only if many items are passed.
     * @defaultValue false
     */
    isVirtualizationDisabled?: boolean;
    /** An element ref to focus when the select closes. If this prop is not used, focus returns to the `SelectButton`. */
    elementRefToFocusOnClose?: React_2.RefObject<HTMLElement | null>;
}

export declare const SplitButton: React_2.ForwardRefExoticComponent<SplitButtonProps & React_2.RefAttributes<HTMLDivElement>>;

export declare const SplitButtonOption: React_2.ForwardRefExoticComponent<SplitButtonOptionProps & React_2.RefAttributes<HTMLDivElement>>;

export declare interface SplitButtonOptionProps {
    /** Handler that is called when the option is clicked. */
    onClick: MouseEventHandler<HTMLDivElement>;
    /** The content of the `SplitButtonOption`. */
    children: React_2.ReactNode;
    /** Disables the option.
     * @defaultValue false
     */
    isDisabled?: boolean;
}

export declare interface SplitButtonProps {
    /** Determines the label for the main button. Supports [`Icon`](/components/icon) */
    label: React_2.ReactNode;
    /** Determines the style of the button. See example above.
     * @defaultValue 'primary'
     */
    kind?: 'primary' | 'secondary';
    /** Handler that is called when the main button is clicked. */
    onClick?: (event: React_2.MouseEvent<HTMLButtonElement>) => void;
    /** Disables only the main button.
     * @defaultValue false
     */
    isButtonDisabled?: boolean;
    /** Disables only the dropdown button.
     * @defaultValue false
     */
    isDropdownDisabled?: boolean;
    /** Added to the `div` container. Also added to the main button and the dropdown button using the following suffixes:
     * - `-button`
     * - `-dropdown`
     */
    'data-testid'?: string;
    /** Added to the container. */
    className?: string;
    /** Added to main button. */
    buttonAriaLabel?: string;
    /** Added to main button. */
    buttonAriaLabelledBy?: string;
    /** Added to dropdown button. */
    dropdownAriaLabel?: string;
    /** Added to dropdown button. */
    dropdownAriaLabelledBy?: string;
    /** The `SplitButtonOption`s. */
    children?: React_2.ReactNode;
    /** Additional props passed to main button.
     *
     * \* It does not include properties such as `children, kind, disabled, full, small, className, type, onClick`. The usage of these properties may result in undefined behavior. */
    mainButtonProps?: Omit<ButtonProps, 'children' | 'kind' | 'disabled' | 'full' | 'small' | 'className' | 'type' | 'onClick'>;
    /** Additional props passed to dropdown's anchor button.
     *
     * \* It does not include properties such as `children, defaultLabel, label, disabled, isInvalid, onLabelChange, className, tabIndex`. The usage of these properties may result in undefined behavior.
     */
    dropdownAnchorProps?: Omit<DropdownButtonProps, 'children' | 'defaultLabel' | 'label' | 'disabled' | 'isInvalid' | 'onLabelChange' | 'className' | 'tabIndex'>;
}

export declare const StackItem: React_2.ForwardRefExoticComponent<StackItemProps & React_2.RefAttributes<HTMLDivElement>>;

export declare interface StackItemProps {
    /** Children to be wrapped by the `StackItem`. */
    children?: React_2.ReactNode;
    /** Determines whether the item will grow and shrink to take up space in the containing Stack.
     * @defaultValue false
     */
    fillSpace?: boolean;
    /** Sets the CSS `width` for the component. */
    width?: string | number;
    /** Sets the CSS `min-width` for the component. */
    minWidth?: string | number;
    /** Sets the CSS `max-width` for the component. */
    maxWidth?: string | number;
    /** Sets the CSS `height` for the component. */
    height?: string | number;
    /** Sets the CSS `min-height` for the component. */
    minHeight?: string | number;
    /** Sets the CSS `max-height` for the component. */
    maxHeight?: string | number;
    /** An accessible label for the item to be used by screen readers. This prop is forwarded to the div that wraps the component's children. */
    'aria-label'?: string;
    /** The id of an element that acts as a label for the item. This prop is forwarded to the div that wraps the component's children. */
    'aria-labelledby'?: string;
    /** The id of an element that describes the item. This prop is forwarded to the div that wraps the component's children. */
    'aria-describedby'?: string;
    /** Added to the containing div. */
    'data-testid'?: string;
}

export declare const SubMenu: React_2.ForwardRefExoticComponent<SubMenuProps & React_2.RefAttributes<HTMLDivElement> & React_2.RefAttributes<unknown>>;

export declare interface SubMenuProps extends Omit<AllHTMLAttributes<HTMLDivElement>, 'label'> {
    /** The label used on the trigger */
    label?: React_2.ReactNode;
    /** Prevents the trigger from opening the pane
     * @defaultValue false
     */
    isDisabled?: boolean;
    /** Determines whether or not to include search functionality.
     * @defaultValue false
     */
    isSearchable?: boolean;
    /** Controls the value of the search bar. */
    searchValue?: string;
    /** Handler to be called whenever the search input value changes. */
    onSearchValueChange?: (newValue: string) => void;
    /** Disables search filtering. Useful for controlled searching.
     * @defaultValue false
     */
    isSearchFilteringDisabled?: boolean;
    /** Handler to be called whenever `SubMenu` opens or closes. The pane is considered open even while animating away. */
    onIsOpenChange?: (isOpen: boolean) => void;
}

export declare const SubSelect: React_2.ForwardRefExoticComponent<SubSelectProps & React_2.RefAttributes<HTMLDivElement>>;

export declare interface SubSelectProps extends Omit<SelectPaneProps, 'label' | 'placement' | 'showSelectedItemsPane' | 'zIndex'> {
    /** The visible label associated with the item. Determines search results. */
    label?: string | React_2.ReactNode;
    /** Prevents the trigger from opening the pane
     * @defaultValue false
     */
    isDisabled?: boolean;
    /**
     * Handler to be called whenever the `SubSelect` pane opens or closes. The pane is considered open even while animating away.
     * */
    onIsOpenChange?: (isOpen: boolean) => void;
}

declare interface TextRegisterProps<V extends Values> {
    name: keyof V;
    type: 'text' | 'email' | 'password';
    value: string;
    onBlur: FocusEventHandler<HTMLInputElement>;
    onChange: ChangeEventHandler<HTMLInputElement>;
    ref: RefCallback<HTMLInputElement>;
}

declare interface Time {
    hour: number;
    minute: number;
}

export declare const TimePicker: React_2.ForwardRefExoticComponent<TimePickerProps & React_2.RefAttributes<HTMLInputElement>>;

export declare interface TimePickerProps {
    /** An object containing the current value of the `TimePicker`. Uses 24-hour time regardless of whether `is24Hour` is `true` or `false`. Should always be a valid time, where `hour` is a number between 0 and 23 (inclusive) and `minute` is a number between 0 and 59 (inclusive).*/
    value?: Time;
    /** Handler to be called whenever time changes. Note that this is called only when the user actually submits a time by hitting enter, selecting an item, or navigating away from the component. Will always be called with a valid time. */
    onChange?: (value: Time) => void;
    /** Sets the `TimePicker` to a 24-hour format.
     * @defaultValue false
     */
    is24HourClock?: boolean;
    /** Disables user interactions with the component.
     * @defaultValue false
     */
    isDisabled?: boolean;
    /** Shows an invalid state for the component.
     * @defaultValue false
     */
    isInvalid?: boolean;
    /** The unique identifier used for linking accessibility properties within the component.
     * @defaultValue random
     */
    id?: string;
    /** Sets data-testid for the component and forwards it to sub-components with the following suffixes:
     * * `-input`
     * * `-dropdown`
     * * `-option-${index}`
     * */
    'data-testid'?: string;
    /** An accessible label for the `TimePicker` to be used by screen readers. This prop is forwarded to the input and dropdown components. */
    'aria-label'?: string;
    /** The id of an element that acts as a label for the `TimePicker`. This prop is forwarded to the input and dropdown components. */
    'aria-labelledby'?: string;
    /** The id of an element that describes the `TimePicker`. This prop is forwarded to the input and dropdown components. */
    'aria-describedby'?: string;
}

export declare const ToggleButton: React_2.ForwardRefExoticComponent<ToggleButtonProps & React_2.RefAttributes<HTMLSpanElement>>;

export declare const ToggleButtonGroup: React_2.ForwardRefExoticComponent<ToggleButtonGroupProps & React_2.RefAttributes<HTMLFieldSetElement>>;

export declare interface ToggleButtonGroupProps {
    /** The toggle buttons to act as radios in the group. The individual buttons can be wrapped in tooltips */
    children: React_2.ReactNode;
    /** The value of the selected child toggle button. */
    value: string | null;
    /** Change handler to be fired when the toggle button group value changes. */
    onChange: (value: string) => void;
    /** The name used by the internal radio controls. Overwrites the same property set on children. Useful when retrieving a radio group's value within a form */
    name?: string;
    /** Label for the radio button group. */
    label?: string;
    /** Disables interaction with the entire button group. */
    isDisabled?: boolean;
    /** The label forwarded to the the internal radiogroup. Should be provided if visual label is not set and aria-labelledby is not set. */
    'aria-label'?: string;
    /** The label reference forwarded to the the internal radiogroup. Should be provided if visual label is not set and aria-label is not set. */
    'aria-labelledby'?: string;
}

export declare interface ToggleButtonProps {
    /** String or components to show up inside the button. */
    children: React_2.ReactNode;
    /** Determines if the toggle is activated. Required outside a group context.
     * @defaultValue false
     */
    isActivated?: boolean;
    /** Change handler to be fired when the toggle button state changes. Required outside of a group context. */
    onChange?: (newIsActivated: boolean) => void;
    /** Defines the value the toggle represents. Required in group context, as this will be the value passed on change. */
    value?: string;
    /** Disables interaction with the button. Overwritten by group level setting, if present.
     * @defaultValue false
     */
    isDisabled?: boolean;
    /** The kind of button to present. Modifies style to support different button types. Defaults to expecting an icon and text. For icon or text only use the appropriate value.
     * @defaultValue 'icon-text'
     */
    kind?: 'icon' | 'icon-text' | 'text';
    /** The label forwarded to the the internal input, enabling screen reader support if there is no text in the button */
    'aria-label'?: string;
    /** The label reference forwarded to the the internal input, enabling screen reader support if there is no text in the button */
    'aria-labelledby'?: string;
    /** The name used by the internal input control. Overwritten by group level setting. Useful for retrieving a toggle button value within a form. */
    name?: string;
    /** Test ID prefix to attach to the internal input (prefix-input) and label (prefix-label). */
    dataTestId?: string;
    /** Additional props passed to internal input. It does not include properties such as `'type', 'name', 'checked', 'onChange', 'id', 'disabled', 'value', 'className', 'data-testid', 'role', 'aria-pressed', 'aria-label', 'aria-labelledby'`. The usage of these properties may result in undefined behavior.*/
    inputProps?: Omit<React_2.DetailedHTMLProps<React_2.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'type' | 'name' | 'checked' | 'onChange' | 'id' | 'disabled' | 'value' | 'className' | 'data-testid' | 'role' | 'aria-pressed' | 'aria-label' | 'aria-labelledby'>;
}

export declare const Tooltip: React_2.ForwardRefExoticComponent<TooltipProps & React_2.RefAttributes<HTMLDivElement>>;

export declare interface TooltipProps extends Omit<TooltipProps_2, 'lightTheme'> {
    children: TooltipProps_2['children'];
    /**
     * This prop was designed to control whether the tooltip stays in the DOM when hidden,
     * but setting it to `false` causes significant accessibility issues therefore we highly discourage from using it.
     * @defaultValue true
     * @deprecated This prop is deprecated and will be removed in a future major version.
     */
    persistentInDom?: boolean;
}

declare interface TooltipProps_2 extends Omit<React_2.AllHTMLAttributes<HTMLDivElement>, 'content'> {
    /** Element or component to which the tooltip should be anchored, which must accept a ref. */
    children: React_2.ReactElement & React_2.RefAttributes<HTMLElement>;
    /** Element(s) or component(s) to be displayed in the tooltip. */
    content?: React_2.ReactNode;
    /** Number of milliseconds to wait before displaying the tooltip.
     * @defaultValue 0
     */
    delayMs?: number;
    /** Disables the tooltip from displaying.
     * @defaultValue false
     */
    disabled?: boolean;
    /** Dictates the position of the tooltip relative to its anchor.
     * @defaultValue 'top'
     */
    placement?: Placement;
    /** If true, removes the arrow from the tooltip.
     * @defaultValue false
     */
    isArrowRemoved?: boolean;
    /** Themes the tooltip to a light color. We recommend using tooltip with lightTheme set to true. This property will be **deprecated** in the next major version.
     * @defaultValue false
     */
    lightTheme?: boolean;
    /** The z-index of the tooltip content.
     * @defaultValue 1000
     */
    zIndex?: number;
    /** Show the tooltip when a focusable descendant of the anchor element is focused via keyboard control
     * @defaultValue false
     */
    showOnDescendantFocus?: boolean;
    /** The container element where the Tooltip should be rendered. Overrides the default set by UIProvider */
    portalTarget?: HTMLElement;
    /** Appended to internal classes on the containing `div` element. */
    className?: string;
    /** Controls visibility of tooltip, overrides default behavior. If you intend to use this prop, see the accessibility section for further instruction. */
    show?: boolean;
    /** Handler to be called when the user's interaction triggers a change in visibility. */
    onShowChange?: (show: boolean) => void;
    /**
     * @internal
     */
    unstable_contentKey?: string;
    /**
     * @internal
     * Internal property to control whether the tooltip should be removed from the DOM when hidden.
     * @defaultValue true
     */
    persistentInDom?: boolean;
    /**
     * If true, the tooltip will be hidden when the user hovers outside of the anchor element (also over tooltip itself). **In most cases it violates accessibility best practices, do not use it unless necessary**.
     * @defaultValue false
     */
    forceHideOutsideOfAnchor?: boolean;
    [prop: string]: any;
}

export declare const Typography: React_2.FC<TypographyProps>;

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

export declare interface TypographyProps extends HTMLAttributes<HTMLElement> {
    /** Element or component to be displayed inside the Typography component.*/
    children: React_2.ReactNode;
    /** The variant of tag this component will be rendered as */
    variant: TypographyVariant;
    /** The kind of font weight to use
     * @defaultValue 'regular'
     */
    fontWeight?: TypographyFontWeight;
    /** The base style to use for the typography variant */
    baseStyle?: TypographyVariant;
    /** Additional props to be spread to the component */
    [prop: string]: any;
}

declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body';

export declare function useForm<V extends Values>({ initialValues, validateField, }: UseFormOptions<V>): {
    Form: (props: FormProps) => JSX_2.Element;
    register: {
        (name: keyof V, options: {
            type: "text" | "email" | "password";
        }): TextRegisterProps<V>;
        (name: keyof V, options: {
            type: "checkbox";
        }): CheckboxRegisterProps<V>;
        (name: keyof V, options: {
            type: "radio";
            radioValue: string;
        }): RadioRegisterProps<V>;
        (name: keyof V, options: {
            type: "custom";
        }): CustomRegisterProps<V>;
    };
    formValues: V;
    fieldErrors: Partial<Record<keyof V, string>>;
    formError: string;
    formTouched: Partial<Record<keyof V, boolean>>;
    isSubmitting: boolean;
    handleSubmit: HandleSubmit;
};

export declare function useFormField(): {
    register: Register<Partial<Record<string, string | boolean | string[]>>> | undefined;
    formValues: Partial<Record<string, string | boolean | string[]>> | undefined;
    formTouched: Partial<Record<string, boolean>> | undefined;
    fieldErrors: Partial<Record<string, string>> | undefined;
};

declare interface UseFormOptions<V extends Values> {
    initialValues: V;
    validateField?: ValidateField<V>;
}

declare type ValidateField<V extends Values> = (fieldName: keyof V, fieldValue: V[keyof V], formValues?: V) => string;

declare type Value = string | string[] | boolean;

declare type Values = Partial<Record<string, Value>>;

declare type Variant = 'user' | 'bot';

export declare const VStack: React_2.ForwardRefExoticComponent<VStackProps & React_2.RefAttributes<HTMLDivElement>>;

declare type VStackAlignChildrenX = 'left' | 'center' | 'right' | 'stretch';

declare type VStackAlignChildrenY = 'top' | 'center' | 'bottom' | 'spaceAround' | 'spaceBetween' | 'spaceEvenly';

export declare interface VStackProps extends ExternalStackProps {
    /** Align children along the component's x-axis.
     * * `left`:  Move children to the left side of the container.
     * * `center`:  Move children to the horizontal center of the container.
     * * `right`: Move children to the right side of the container.
     * * `stretch`: Stretch children horizontally to take up the full width of the stack.
     * @defaultValue 'center'
     */
    alignChildrenX?: VStackAlignChildrenX;
    /** Align children along the component's y-axis.
     * * `top`: Move children to the top of the container.
     * * `center`: Move children to the vertical center of the container.
     * * `bottom`: Move children to the bottom of the container.
     * * `spaceAround`: Each child gets the same amount of space before it and after it. Each child gets space on both sides, so there will be more space between two children than there is between the first child and the stack's edge.
     * * `spaceBetween`: Distribute children to maximize the amount of space between them.
     * * `spaceEvenly`: Space children equally apart from each other and the edges of the stack.
     * @defaultValue 'center'
     */
    alignChildrenY?: VStackAlignChildrenY;
}

export { }