@hitachivantara/uikit-react-core/dist/index.d.ts

UI Kit Core React components.

import { ActionType } from 'react-table';
import { AvatarProps } from '@mui/material/Avatar';
import { Breakpoint } from '@mui/material/styles';
import { CardContentProps } from '@mui/material/CardContent';
import { CardHeaderProps } from '@mui/material/CardHeader';
import { CardMediaProps } from '@mui/material/CardMedia';
import { Cell } from 'react-table';
import { CheckboxProps } from '@mui/material/Checkbox';
import { ClickAwayListenerProps } from '@mui/material/ClickAwayListener';
import { ColumnInstance } from 'react-table';
import { ColumnInterface } from 'react-table';
import { ComponentProps } from 'react';
import { ContainerProps } from '@mui/material/Container';
import { Context } from 'react';
import { createClasses } from '@hitachivantara/uikit-react-utils';
import { default as default_2 } from 'embla-carousel-react';
import { defaultCacheKey } from '@hitachivantara/uikit-react-shared';
import { defaultEmotionCache } from '@hitachivantara/uikit-react-shared';
import { DialogActionsProps } from '@mui/material/DialogActions';
import { DialogContentProps } from '@mui/material/DialogContent';
import { DialogProps } from '@mui/material/Dialog';
import { DialogTitleProps } from '@mui/material/DialogTitle';
import { DividerProps } from '@mui/material/Divider';
import { DrawerProps } from '@mui/material/Drawer';
import { EmotionCache } from '@emotion/cache';
import { EmotionContext } from '@hitachivantara/uikit-react-shared';
import { ExtractNames } from '@hitachivantara/uikit-react-utils';
import { ForwardRefExoticComponent } from 'react';
import { GridLegacyProps } from '@mui/material/GridLegacy';
import { Hooks } from 'react-table';
import { HvBaseTheme } from '@hitachivantara/uikit-styles';
import { HvBreakpoints } from '@hitachivantara/uikit-styles';
import { HvColor } from '@hitachivantara/uikit-styles';
import { HvColorAny } from '@hitachivantara/uikit-styles';
import { HvRadius } from '@hitachivantara/uikit-styles';
import { HvSize } from '@hitachivantara/uikit-styles';
import { PluginHook as HvTablePluginHook } from 'react-table';
import { HvTheme } from '@hitachivantara/uikit-react-shared';
import { HvThemeBreakpoint } from '@hitachivantara/uikit-styles';
import { HvThemeColorMode } from '@hitachivantara/uikit-styles';
import { HvThemeContext } from '@hitachivantara/uikit-react-shared';
import { HvThemeContextValue } from '@hitachivantara/uikit-react-shared';
import { HvThemeStructure } from '@hitachivantara/uikit-styles';
import { IdType as IdType_2 } from 'react-table';
import { InputBaseProps } from '@mui/material/InputBase';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { MutableRefObject } from 'react';
import { OptionGroupProps } from '@mui/base';
import { OptionOwnProps } from '@mui/base';
import { OptionsGeneric } from '@popperjs/core';
import { OptionsObject } from 'notistack';
import { PopperProps } from '@mui/material/Popper';
import { PropGetter } from 'react-table';
import { PropsWithoutRef } from 'react';
import { RadioProps } from '@mui/material/Radio';
import * as React_2 from 'react';
import { ReactNode } from 'react';
import { ReducerTableState } from 'react-table';
import { RefAttributes } from 'react';
import { Renderer } from 'react-table';
import { Row } from 'react-table';
import { SelectOption } from '@mui/base';
import { SelectValue } from '@mui/base';
import { SlideProps } from '@mui/material/Slide';
import { SliderProps } from 'rc-slider';
import { SliderRef } from 'rc-slider';
import { SnackbarCloseReason } from '@mui/material/Snackbar';
import { SnackbarContentProps } from '@mui/material/SnackbarContent';
import { SnackbarKey } from 'notistack';
import { SnackbarOrigin } from '@mui/material/Snackbar';
import { SnackbarProps } from '@mui/material/Snackbar';
import { SnackbarProviderProps } from 'notistack';
import { State } from '@popperjs/core';
import { SwitchProps } from '@mui/material/Switch';
import { TableCellProps } from 'react-table';
import { TableCommonProps } from 'react-table';
import { TableExpandedToggleProps } from 'react-table';
import { TableFooterProps } from 'react-table';
import { TableHeaderProps } from 'react-table';
import { TableInstance } from 'react-table';
import { TableOptions } from 'react-table';
import { TableProps } from 'react-table';
import { TableRowProps } from 'react-table';
import { TableState } from 'react-table';
import { TabProps } from '@mui/material/Tab';
import { TabsProps } from '@mui/material/Tabs';
import { theme } from '@hitachivantara/uikit-styles';
import { TooltipProps } from '@mui/material/Tooltip';
import { TransitionProps } from '@mui/material/transitions';
import { UseColumnOrderInstanceProps } from 'react-table';
import { UseColumnOrderState } from 'react-table';
import { useCss } from '@hitachivantara/uikit-react-utils';
import { useDefaultProps } from '@hitachivantara/uikit-react-utils';
import { useEffect } from 'react';
import { UseExpandedHooks } from 'react-table';
import { UseExpandedInstanceProps } from 'react-table';
import { UseExpandedOptions } from 'react-table';
import { UseExpandedRowProps } from 'react-table';
import { UseExpandedState } from 'react-table';
import { UseFiltersColumnOptions } from 'react-table';
import { UseFiltersColumnProps } from 'react-table';
import { UseFiltersInstanceProps } from 'react-table';
import { UseFiltersOptions } from 'react-table';
import { UseFiltersState } from 'react-table';
import { UseGlobalFiltersColumnOptions } from 'react-table';
import { UseGlobalFiltersInstanceProps } from 'react-table';
import { UseGlobalFiltersOptions } from 'react-table';
import { UseGlobalFiltersState } from 'react-table';
import { UseGroupByCellProps } from 'react-table';
import { UseGroupByColumnOptions } from 'react-table';
import { UseGroupByColumnProps } from 'react-table';
import { UseGroupByHooks } from 'react-table';
import { UseGroupByInstanceProps } from 'react-table';
import { UseGroupByOptions } from 'react-table';
import { UseGroupByRowProps } from 'react-table';
import { UseGroupByState } from 'react-table';
import { UsePaginationInstanceProps } from 'react-table';
import { UsePaginationOptions } from 'react-table';
import { UsePaginationState } from 'react-table';
import { UseResizeColumnsColumnOptions } from 'react-table';
import { UseResizeColumnsColumnProps } from 'react-table';
import { UseResizeColumnsOptions } from 'react-table';
import { UseResizeColumnsState } from 'react-table';
import { useRowState } from 'react-table';
import { UseRowStateInstanceProps } from 'react-table';
import { UseRowStateOptions } from 'react-table';
import { UseRowStateRowProps } from 'react-table';
import { UseRowStateState } from 'react-table';
import { UseSelectParameters } from '@mui/base';
import { UseSortByColumnOptions } from 'react-table';
import { UseSortByColumnProps } from 'react-table';
import { UseSortByHooks } from 'react-table';
import { UseSortByInstanceProps } from 'react-table';
import { UseSortByOptions } from 'react-table';
import { UseSortByState } from 'react-table';
import { UseTableHeaderGroupProps } from 'react-table';
import { useTheme } from '@hitachivantara/uikit-react-utils';

declare type Accessor<D extends object> = (originalRow: D, index: number, sub: {
    subRows: D[];
    depth: number;
    data: D[];
}) => CellValue;

export declare const accordionClasses: {
    root: string;
    hidden: string;
    container: string;
    label: string;
    disabled: string;
};

export declare const actionBarClasses: {
    root: string;
};

export declare const actionClasses: {
    action: string;
    noIcon: string;
    minimized: string;
};

/** @private label structure action icon buttons */
declare interface ActionIconLabels extends DialogLabels {
    tooltip?: string;
}

export declare const actionsClasses: {
    root: string;
    hide: string;
};

export declare const actionsGenericClasses: {
    root: string;
    button: string;
    actionContainer: string;
    dropDownMenu: string;
    dropDownMenuButtonSelected: string;
};

export declare const adornmentClasses: {
    root: string;
    hideIcon: string;
    disabled: string;
};

export declare const appSwitcherActionClasses: {
    root: string;
    icon: string;
    iconUrl: string;
    iconInfo: string;
    disabled: string;
    selected: string;
    typography: string;
    title: string;
    titleAnchor: string;
};

export declare const appSwitcherClasses: {
    root: string;
    item: string;
    itemSelected: string;
    itemDisabled: string;
    itemTrigger: string;
    itemIcon: string;
    itemTitle: string;
    itemInfoIcon: string;
    actionsContainer: string;
    footerContainer: string;
    open: string;
    closed: string;
    title: string;
    titleAnchor: string;
    single: string;
    dual: string;
    fluid: string;
};

export declare type Arrayable<T> = T | T[];

declare interface AskAction {
    actions: QueryAction[];
    dialog: DialogLabels;
}

declare type AsProp<C extends React.ElementType> = {
    /** Custom element type to override the root component */
    component?: C;
};

export declare const avatarClasses: {
    root: string;
    img: string;
    fallback: string;
    container: string;
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    avatar: string;
    badge: string;
    circular: string;
    square: string;
};

export declare const avatarGroupClasses: {
    root: string;
    row: string;
    column: string;
    highlight: string;
    toBack: string;
};

export declare const badgeClasses: {
    root: string;
    badge: string;
    badgeHidden: string;
    badgeIcon: string;
    badgeOneDigit: string;
};

export declare const bannerClasses: {
    rootClosed: string;
    root: string;
    anchorOriginTopCenter: string;
    anchorOriginBottomCenter: string;
};

export declare const bannerContentClasses: {
    root: string;
    success: string;
    warning: string;
    error: string;
    default: string;
    info: string;
    accent: string;
    message: string;
    action: string;
    messageContainer: string;
    iconContainer: string;
    messageActions: string;
    actionContainer: string;
    closeAction: string;
};

declare interface BarProps extends HvBaseProps {
    data: HvHeaderNavigationItemProp[];
    type?: "menubar" | "menu";
    classes?: HvHeaderMenuBarClasses;
}

export declare const baseCheckBoxClasses: {
    root: string;
    disabled: string;
    focusVisible: string;
    icon: string;
    checked: string;
    indeterminate: string;
    semantic: string;
};

export declare const baseDropdownClasses: {
    root: string;
    rootDisabled: string;
    anchor: string;
    container: string;
    header: string;
    headerOpen: string;
    headerDisabled: string;
    headerReadOnly: string;
    arrowContainer: string;
    arrow: string;
    selection: string;
    selectionDisabled: string;
    placeholder: string;
    panel: string;
};

export declare const baseInputClasses: {
    root: string;
    disabled: string;
    invalid: string;
    multiline: string;
    resizable: string;
    readOnly: string;
    focused: string;
    input: string;
    inputDisabled: string;
    inputReadOnly: string;
    inputResizable: string;
};

export declare const baseRadioClasses: {
    root: string;
    disabled: string;
    focusVisible: string;
    icon: string;
    checked: string;
    semantic: string;
};

export declare const baseSwitchClasses: {
    root: string;
    switch: string;
    switchBase: string;
    track: string;
    thumb: string;
    checked: string;
    disabled: string;
    readOnly: string;
    focusVisible: string;
};

export declare const breadCrumbClasses: {
    root: string;
    link: string;
    orderedList: string;
    currentPage: string;
    centerContainer: string;
    separatorContainer: string;
    a: string;
};

export declare const bulkActionsClasses: {
    root: string;
    semantic: string;
    disabled: string;
    actions: string;
    selectAllContainer: string;
    selectAll: string;
    selectAllPages: string;
    divider: string;
};

export declare const buttonBaseClasses: {
    root: string;
    disabled: string;
};

export declare const buttonClasses: {
    root: string;
    startIcon: string;
    endIcon: string;
    focusVisible: string;
    disabled: string;
    icon: string;
    contained: string;
    subtle: string;
    ghost: string;
    semantic: string;
};

export declare const calendarClasses: {
    root: string;
    rangeCalendarContainer: string;
    singleCalendar: string;
    focusSelection: string;
    calendarMonthlyCell: string;
    calendarMonthlyCellSelected: string;
};

export declare const calendarHeaderClasses: {
    root: string;
    invalid: string;
    headerDayOfWeek: string;
};

export declare const cardClasses: {
    root: string;
    selected: string;
    selectable: string;
    semanticContainer: string;
    icon: string;
    semanticBar: string;
};

export declare const cardContentClasses: {
    content: string;
};

export declare const cardHeaderClasses: {
    root: string;
    title: string;
    subheader: string;
    content: string;
    action: string;
};

export declare const cardMediaClasses: {
    root: string;
    media: string;
};

export declare const carouselClasses: {
    root: string;
    xs: string;
    fullscreen: string;
    title: string;
    actions: string;
    closeButton: string;
    mainContainer: string;
    controls: string;
    pageCounter: string;
    main: string;
    mainXs: string;
    mainFullscreen: string;
    counterContainer: string;
    counter: string;
    slideControls: string;
    slidesViewport: string;
    slidesContainer: string;
    dots: string;
    dotsXs: string;
    dot: string;
    dotSelected: string;
    panel: string;
    thumbnail: string;
    thumbnailSelected: string;
};

declare type CellValue<V = any> = V;

export declare const charCounterClasses: {
    root: string;
    counterDisabled: string;
    gutter: string;
    overloaded: string;
};

export declare const checkBoxClasses: {
    root: string;
    container: string;
    invalidContainer: string;
    disabled: string;
    focusVisible: string;
    checkbox: string;
    invalidCheckbox: string;
    label: string;
    checked: string;
    indeterminate: string;
    semantic: string;
    left: string;
    right: string;
};

export declare const checkBoxGroupClasses: {
    root: string;
    label: string;
    group: string;
    vertical: string;
    horizontal: string;
    invalid: string;
    selectAll: string;
    error: string;
};

export declare const colorPickerClasses: {
    root: string;
    labelContainer: string;
    label: string;
    description: string;
    headerColorValue: string;
    headerColorIcon: string;
    panel: string;
    colorPicker: string;
    colorPickerIcon: string;
    dropdownRootIconOnly: string;
    headerColorIconOnly: string;
};

declare type ColorVariant = "primary" | "secondary" | "positive" | "negative" | "warning";

export declare const containerClasses: {
    root: string;
    disableGutters: string;
    fixed: string;
    maxWidthXs: string;
    maxWidthSm: string;
    maxWidthMd: string;
    maxWidthLg: string;
    maxWidthXl: string;
};

export declare const controlsClasses: {
    root: string;
    section: string;
    rightSection: string;
    leftSection: string;
};

export { createClasses }

export declare const datePickerClasses: {
    root: string;
    actionContainer: string;
    leftContainer: string;
    rightContainer: string;
    labelContainer: string;
    label: string;
    description: string;
    error: string;
    dropdown: string;
    panel: string;
    dropdownHeaderInvalid: string;
    dropdownHeaderOpen: string;
    icon: string;
    action: string;
    inputText: string;
    dateText: string;
    container: string;
};

export declare interface DateRangeProp {
    startDate: Date;
    endDate?: Date;
}

/** This type allows to do a deep partial by applying the Partial type to each key recursively */
export declare type DeepPartial<T> = T extends {} ? Partial<{
    [P in keyof T]: DeepPartial<T[P]>;
}> : T;

declare const DEFAULT_ERROR_MESSAGES: {
    /** The value when a validation fails. */
    error: string;
    /** The message that appears when there are too many characters. */
    maxCharError: string;
    /** The message that appears when there are too few characters. */
    minCharError: string;
    /** The message that appears when the input is empty and required. */
    requiredError: string;
    /** The message that appears when the input is value is incompatible with the expected type. */
    typeMismatchError: string;
};

declare const DEFAULT_LABELS: {
    dropdownMenu: string;
};

declare const DEFAULT_LABELS_10: {
    /** Apply button label. */
    applyLabel: string;
    /** Cancel button label. */
    cancelLabel: string;
    /** Clear button label. */
    clearLabel: string;
    /** Placeholder label. */
    placeholder: string;
    /** SearchBox placeholder label. */
    searchBoxPlaceholder: string;
    /** Select All placeholder label. */
    selectAll: string;
    /** Multi selection conjunction placeholder label. */
    multiSelectionConjunction: string;
};

declare const DEFAULT_LABELS_11: {
    /** The label used in the middle of the multi-selection count. */
    selectionConjunction: string;
};

declare const DEFAULT_LABELS_2: {
    close: string;
    fullscreen: string;
    backwards: string;
    forwards: string;
};

declare const DEFAULT_LABELS_3: {
    /** The show label. */
    pageSizePrev: string;
    /** Indicate the units of the page size selection. */
    pageSizeEntryName: string;
    /** Used for the aria-label of the selection of number of unit.s */
    pageSizeSelectorDescription: string;
    /** Separator of current page and total pages. */
    pagesSeparator: string;
    /** Aria-label passed to the page input. */
    paginationInputLabel: string;
    /** Label of the first page button */
    firstPage: string;
    /** Label of the previous page button */
    previousPage: string;
    /** Label of the next page button */
    nextPage: string;
    /** Label of the last page button */
    lastPage: string;
};

declare const DEFAULT_LABELS_4: {
    backwards: string;
    forwards: string;
};

declare const DEFAULT_LABELS_5: {
    recommendedColorsLabel: string;
    customColorsLabel: string;
};

declare const DEFAULT_LABELS_6: {
    /** The label of the clear button. */
    clearButtonLabel: string;
    /** The tooltip of the reveal password button when the password is hidden. */
    revealPasswordButtonClickToShowTooltip: string;
    /** The tooltip of the reveal password button when the password is revealed. */
    revealPasswordButtonClickToHideTooltip: string;
    /** The label of the search button. */
    searchButtonLabel: string;
};

declare const DEFAULT_LABELS_7: {
    /** Label for overwrite the default header behavior. */
    select: string | undefined;
    /** Cancel button label. */
    cancelLabel: string;
    /** Apply button label. */
    applyLabel: string;
    /** The label used in the middle of the multiSelection count. */
    searchPlaceholder: string;
    /** The label used in search. */
    multiSelectionConjunction: string;
};

declare const DEFAULT_LABELS_8: {
    /** Apply button label. */
    applyLabel: string;
    /** Cancel button label. */
    cancelLabel: string;
    /** Clear button label. */
    clearLabel: string;
    /** Invalid Date label. */
    invalidDateLabel: string;
};

declare const DEFAULT_LABELS_9: {
    /** Extensions of the accepted file types */
    acceptedFiles: string;
    /** Size file warning label. */
    sizeWarning: string;
    /** Size file warning label. */
    drag: string;
    /** Size file warning label. */
    selectFiles: string;
    /** Theming sheet used to style components */
    dropFiles: string;
    /** Message to display when file size is greater than allowed */
    fileSizeError: string;
    /** Message to display when file type is greater than allowed */
    fileTypeError: string;
    removeFileButtonLabel: string;
};

declare type DefaultAttributes = "boolean" | "numeric" | "dateandtime" | "text" | "textarea";

export { defaultCacheKey }

export { defaultEmotionCache }

declare interface DefaultTreeViewPluginParameters<Multiple extends boolean | undefined> extends UseTreeViewNodesParameters, UseTreeViewExpansionParameters, UseTreeViewFocusParameters, UseTreeViewSelectionParameters<Multiple>, UseTreeViewContextValueBuilderParameters {
}

export declare const dialogActionClasses: {
    root: string;
    fullscreen: string;
    spacing: string;
};

export declare const dialogClasses: {
    root: string;
    background: string;
    paper: string;
    fullScreen: string;
    fullHeight: string;
    closeButton: string;
    statusBar: string;
    success: string;
    error: string;
    warning: string;
};

export declare const dialogContentClasses: {
    root: string;
    textContent: string;
};

declare interface DialogLabels {
    dialogTitle: string;
    dialogMessage: string;
    dialogConfirm: string;
    dialogCancel: string;
    dialogCloseTooltip: string;
}

export declare const dialogTitleClasses: {
    root: string;
    fullScreen: string;
};

export declare const dotPaginationClasses: {
    root: string;
    horizontal: string;
    radio: string;
    icon: string;
};

export declare const drawerClasses: {
    root: string;
    paper: string;
    background: string;
    closeButton: string;
};

export declare const dropdownClasses: {
    root: string;
    labelContainer: string;
    label: string;
    description: string;
    error: string;
    placeholder: string;
    placeholderClosed: string;
    selectionDisabled: string;
    dropdown: string;
    arrow: string;
    dropdownHeader: string;
    dropdownHeaderInvalid: string;
    dropdownHeaderOpen: string;
    dropdownListContainer: string;
    rootList: string;
    disabled: string;
    readOnly: string;
};

export declare const dropDownMenuClasses: {
    root: string;
    open: string;
    menuListRoot: string;
    menuList: string;
};

export { EmotionContext }

export declare const emptyStateClasses: {
    root: string;
    container: string;
    containerMessageOnly: string;
    iconContainer: string;
    titleContainer: string;
    textContainer: string;
    messageContainer: string;
    actionContainer: string;
};

export { ExtractNames }

export declare const fileClasses: {
    root: string;
    progressbar: string;
    progressbarContainer: string;
    progressbarBack: string;
    nameText: string;
    progressTextContainer: string;
    removeButton: string;
    previewContainer: string;
    icon: string;
    fail: string;
};

export declare const fileUploaderClasses: {
    root: string;
};

export declare const fileUploaderPreviewClasses: {
    previewButton: string;
    overlay: string;
};

export declare const filterGroupClasses: {
    root: string;
    label: string;
    labelContainer: string;
    description: string;
    error: string;
};

declare type FixComponentProps<T> = T extends any ? T : never;

/** React.forwardRef with fixed type declarations */
export declare function fixedForwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode): (props: P & React.RefAttributes<T>) => React.ReactNode;

export declare const footerClasses: {
    root: string;
    name: string;
    rightContainer: string;
    copyright: string;
    separator: string;
    small: string;
};

export declare const formElementClasses: {
    root: string;
};

export declare const globalActionsClasses: {
    root: string;
    positionSticky: string;
    positionFixed: string;
    global: string;
    section: string;
    wrapper: string;
    backButton: string;
    name: string;
    actions: string;
};

export declare const gridClasses: {
    root: string;
    container: string;
    item: string;
    zeroMinWidth: string;
    "direction-xs-column": string;
    "direction-xs-reverse": string;
    "direction-xs-row-reverse": string;
    "wrap-xs-nowrap": string;
    "wrap-xs-wrap-reverse": string;
    "spacing-xs-1": string;
    "spacing-xs-2": string;
    "spacing-xs-3": string;
    "spacing-xs-4": string;
    "spacing-xs-5": string;
    "spacing-xs-6": string;
    "spacing-xs-7": string;
    "spacing-xs-8": string;
    "spacing-xs-9": string;
    "spacing-xs-10": string;
    "grid-xs-auto": string;
    "grid-xs-true": string;
    "grid-xs-1": string;
    "grid-xs-2": string;
    "grid-xs-3": string;
    "grid-xs-4": string;
    "grid-xs-5": string;
    "grid-xs-6": string;
    "grid-xs-7": string;
    "grid-xs-8": string;
    "grid-xs-9": string;
    "grid-xs-10": string;
    "grid-xs-11": string;
    "grid-xs-12": string;
};

export declare const headerActionsClasses: {
    root: string;
};

export declare const headerBrandClasses: {
    root: string;
    separator: string;
    brandName: string;
};

export declare const headerClasses: {
    root: string;
    header: string;
    fixed: string;
};

export declare const headerNavigationClasses: {
    root: string;
};

export declare const horizontalScrollListItemClasses: {
    root: string;
    button: string;
    text: string;
    selected: string;
    bullet: string;
    bulletSelected: string;
};

/**
 * An accordion is a design element that expands in place to expose hidden information.
 */
export declare const HvAccordion: ForwardRefExoticComponent<HvAccordionProps & RefAttributes<HTMLDivElement>>;

export declare type HvAccordionClasses = ExtractNames<typeof useClasses_21>;

export declare interface HvAccordionProps extends HvBaseProps<HTMLDivElement, "onChange" | "children"> {
    /** Content to be rendered. */
    children: React.ReactNode;
    /** The accordion label button. */
    label?: React.ReactNode;
    /** The function that will be executed whenever the accordion toggles. It will receive the state of the accordion. */
    onChange?: (event: React.SyntheticEvent, value: boolean) => void;
    /** Whether the accordion is open or not. If this property is defined the accordion must be fully controlled. */
    expanded?: boolean;
    /** When uncontrolled, defines the initial expanded state. */
    defaultExpanded?: boolean;
    /** An object containing props to be passed onto container holding the accordion children. */
    containerProps?: React.HTMLAttributes<HTMLDivElement>;
    /** Heading level to apply to accordion button. If `undefined` the button won't have a header wrapper. */
    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
    /** Whether the accordion is disabled. */
    disabled?: boolean;
    /** Typography variant for the label. */
    labelVariant?: HvTypographyVariants;
    /** A Jss Object used to override or extend the styles applied. */
    classes?: HvAccordionClasses;
}

/**
 * The Action Bar accommodates all the actions related to a specific task on a screen or pattern.
 */
export declare const HvActionBar: ForwardRefExoticComponent<HvActionBarProps & RefAttributes<HTMLDivElement>>;

export declare type HvActionBarClasses = ExtractNames<typeof useClasses_22>;

export declare interface HvActionBarProps extends HvBaseProps {
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvActionBarClasses;
}

export declare interface HvActionGeneric {
    /** Action id. */
    id: string;
    /** Action label. */
    label: string;
    /** Action icon. */
    icon?: React.ReactNode | ((params: {
        isDisabled?: boolean;
    }) => React.ReactNode);
    /** Whether the action is disabled or not. */
    disabled?: boolean;
    /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */
    iconOnly?: boolean;
}

export declare const HvActionsGeneric: ForwardRefExoticComponent<HvActionsGenericProps & RefAttributes<HTMLDivElement>>;

export declare type HvActionsGenericClasses = ExtractNames<typeof useClasses_23>;

export declare interface HvActionsGenericProps extends HvBaseProps {
    /** The button variant for all actions. */
    variant?: HvButtonVariant;
    /** Whether the actions should be all disabled. */
    disabled?: boolean;
    /** Whether the actions should be all icon buttons when visible. */
    iconOnly?: boolean;
    /** The renderable content inside the actions slot of the footer, or an array of actions. */
    actions: React.ReactNode | HvActionGeneric[];
    /** The callback function called when an action is triggered, receiving the `action` as parameter. */
    onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;
    /** The maximum number of visible actions before they're collapsed into a dropdown menu. */
    maxVisibleActions?: number;
    /** Props to be applied to the dropdown menu. */
    dropdownMenuProps?: Partial<HvDropDownMenuProps>;
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvActionsGenericClasses;
}

/**
 * Allows to add a decorative icon or an action to a form element, usually on the right side of an input.
 * E.g., the reveal password button.
 *
 * This component disables keyboard navigation by default, ensuring that it doesn't steal focus from the input.
 * As such, its functionality, if any, for accessibility purposes must be provided through an alternative mean.
 * This behavior can be overridden by providing an a `tabIndex={0}`.
 */
export declare const HvAdornment: ForwardRefExoticComponent<HvAdornmentProps & RefAttributes<HTMLButtonElement | HTMLDivElement>>;

export declare type HvAdornmentClasses = ExtractNames<typeof useClasses_7>;

export declare interface HvAdornmentProps extends HvBaseProps<HTMLDivElement | HTMLButtonElement, "onMouseDown" | "onKeyDown"> {
    /** The icon to be added into the input. */
    icon: React.ReactNode;
    /** Controls the visibility of the adornment based on the form element's status. `isVisible` overrides this behavior. */
    showWhen?: HvFormStatus;
    /** Function to be executed when this element is clicked. */
    onClick?: React.MouseEventHandler<HTMLButtonElement>;
    /** If this property is defined the adornment visibility will be exclusively controlled by this value. */
    isVisible?: boolean;
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvAdornmentClasses;
}

/**
 * An app switcher lets users quickly navigate between different applications or modules within a platform.
 */
export declare const HvAppSwitcher: ForwardRefExoticComponent<HvAppSwitcherProps & RefAttributes<HTMLDivElement>>;

export declare const HvAppSwitcherAction: ({ id, className, classes: classesProp, application, onClickCallback, isSelectedCallback, }: HvAppSwitcherActionProps) => JSX_2.Element;

export declare interface HvAppSwitcherActionApplication {
    /** Id of the application. */
    id?: string;
    /** Name of the application, this is the value that will be displayed on the component. */
    name: string;
    /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */
    iconUrl?: string;
    /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */
    iconElement?: React.ReactElement<any>;
    /** Small description of the application. */
    description?: string;
    /**  URL where the application is accessible. */
    url?: string;
    /** Defines if the application should be opened in the same tab or in a new one. */
    target?: "_top" | "_blank";
    /** If true, the item will be disabled. */
    disabled?: boolean;
    /** True when the application is selected, false otherwise. */
    isSelected?: boolean;
    /** The color of the application. */
    color?: HvColorAny;
}

export declare type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses_26>;

export declare interface HvAppSwitcherActionProps extends HvBaseProps {
    /** The application data to be used to render the Action object. */
    application: HvAppSwitcherActionApplication;
    /** Callback triggered when the action is clicked. */
    onClickCallback?: (event: React.MouseEvent, application: HvAppSwitcherActionApplication) => void;
    /** Must return a boolean stating if the action element is selected or not. */
    isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvAppSwitcherActionClasses;
}

export declare type HvAppSwitcherClasses = ExtractNames<typeof useClasses_25>;

export declare interface HvAppSwitcherProps extends HvBaseProps {
    /** Number of columns to render. One, two, or whatever fits the component's width. */
    layout?: "single" | "dual" | "fluid";
    /** Title to be displayed on the header of the component. */
    title?: string;
    /** The list of applications to be used to render the actions on the component. */
    applications?: HvAppSwitcherActionApplication[];
    /** Triggered when an action is clicked. */
    onActionClickedCallback?: (event: React.MouseEvent, application: HvAppSwitcherActionApplication) => void;
    /** Must return a boolean stating if the action element is selected or not. */
    isActionSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;
    /** Element to be added to the header container, if none is provided a label with the title will be added. */
    header?: React.ReactNode;
    /** Element to be added to the footer container. */
    footer?: React.ReactNode;
    /**
     * Flag stating if the panel is opened or closed.
     *
     * @deprecated This logic should be external, i.e. using the HvAppSwitcher inside a Drawer component.
     */
    isOpen?: boolean;
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvAppSwitcherClasses;
}

/**
 * Avatars represent a user or brand and can display an image, icon, or initials.
 */
export declare const HvAvatar: ForwardRefExoticComponent<HvAvatarProps & RefAttributes<HTMLDivElement>>;

export declare type HvAvatarClasses = ExtractNames<typeof useClasses_27>;

/**
 *The Avatar Group displays a collection of avatars, often used to represent groups or teams.
 */
export declare const HvAvatarGroup: ForwardRefExoticComponent<HvAvatarGroupProps & RefAttributes<HTMLDivElement>>;

export declare type HvAvatarGroupClasses = ExtractNames<typeof useClasses_28>;

export declare interface HvAvatarGroupProps extends HvBaseProps {
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvAvatarGroupClasses;
    /** The avatar size. */
    size?: HvSize;
    /** The spacing between avatars. */
    spacing?: "compact" | "loose";
    /** The direction of the group. */
    direction?: "row" | "column";
    /** Whether the avatars display behind the previous avatar or on top. */
    toBack?: boolean;
    /**
     * The maximum number of visible avatars. If there are more avatars then the value of this property, an added avatar will
     * be added to the end of the list, indicating the number of hidden avatars.
     */
    maxVisible?: number;
    /**
     * What to show as an overflow representation.
     * If `undefined` a default `HvAvatar` will be displayed along with a HvTooltip with the count of overflowing items.
     * */
    overflowComponent?: (overflowCount: number) => React.ReactNode;
    /**
     * If `true` the avatars will be brought to the front when hovered.
     */
    highlight?: boolean;
}

export declare interface HvAvatarProps extends HvBaseProps {
    /** The component used for the root node. Either a string to use a DOM element or a component. */
    component?: React.ElementType;
    /** Sets one of the standard sizes of the icons */
    size?: HvSize;
    /** A color representing the foreground color of the avatar's letters or the generic User icon fallback. */
    color?: HvColorAny;
    /** A String representing the background color of the avatar. */
    backgroundColor?: HvColorAny;
    /** The `src` attribute for the `img` element. */
    src?: string;
    /** The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. */
    srcSet?: string;
    /** The `sizes` attribute for the `img` element. */
    sizes?: string;
    /** Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. */
    alt?: string;
    /**
     * Attributes applied to the `img` element if the component is used to display an image.
     * It can be used to listen for the loading error event.
     */
    imgProps?: React.HTMLAttributes<HTMLImageElement>;
    /** A string representing the type of avatar to display, circular or square. */
    variant?: HvAvatarVariant;
    /** A string representing the color of the avatar border that represents its status. */
    status?: HvColorAny;
    /** A string representing the color of the avatar badge. */
    badge?: HvColorAny;
    /** Attributes applied to the avatar element. */
    avatarProps?: AvatarProps;
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvAvatarClasses;
}

export declare type HvAvatarVariant = "circular" | "square";

/**
 * The badge is a component used to notify the user that something has occurred, in the app context.
 */
export declare const HvBadge: ForwardRefExoticComponent<HvBadgeProps & RefAttributes<HTMLDivElement>>;

export declare type HvBadgeClasses = ExtractNames<typeof useClasses_29>;

export declare interface HvBadgeProps extends HvBaseProps {
    /** The badge color. */
    color?: HvColorAny;
    /** True if a **numeric** `label` should be displayed. */
    showCount?: boolean;
    /** The maximum number of unread notifications to be displayed */
    maxCount?: number;
    /**
     * Badge content to show in.
     *
     * If value is numeric, then `showCount` and `maxCount` will show or limit the value respectively.
     */
    label?: React.ReactNode;
    /** Icon which the notification will be attached. */
    icon?: React.ReactNode;
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvBadgeClasses;
}

/**
 * A **Banner** shows an important message with optional actions. It appears below the top app bar and requires user dismissal.
 */
export declare const HvBanner: ForwardRefExoticComponent<Omit<HvBannerProps, "ref"> & RefAttributes<unknown>>;

export declare type HvBannerActionPosition = "auto" | "inline" | "bottom-right";

export declare type HvBannerClasses = ExtractNames<typeof useClasses_30>;

export declare const HvBannerContent: ForwardRefExoticComponent<Omit<HvBannerContentProps, "ref"> & RefAttributes<HTMLDivElement>>;

export declare type HvBannerContentClasses = ExtractNames<typeof useClasses_32>;

export declare interface HvBannerContentProps extends Omit<SnackbarContentProps, "variant" | "classes" | "onClose"> {
    /** The message to display. @deprecated use `children` instead */
    content?: string;
    /** The message to display. */
    children?: React.ReactNode;
    /** Variant of the snackbar. */
    variant?: HvBannerVariant;
    /** Controls if the associated icon to the variant should be shown. */
    showIcon?: boolean;
    /** Custom icon to replace the variant default. */
    customIcon?: React.ReactNode;
    /** Function called when clicking on the close button. */
    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    /** Actions to display on the right side. */
    actions?: HvActionsGenericProps["actions"];
    /** The callback function called when an action is triggered, receiving `action` as parameter. */
    onAction?: HvActionsGenericProps["onAction"];
    /** The position property of the header. */
    actionsPosition?: HvBannerActionPosition;
    /** The props to pass down to the Action Container. */
    actionProps?: Partial<HvButtonProps>;
    /** The size of the banner. */
    size?: Extract<HvCalloutProps["size"], "regular" | "large" | "micro">;
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvBannerContentClasses;
}

export declare interface HvBannerProps extends Omit<SnackbarProps, "anchorOrigin" | "classes" | "onClose"> {
    /** If true, the snackbar is open. */
    open: boolean;
    /**
     * Callback fired when the component requests to be closed.
     * Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop.
     * The reason parameter can optionally be used to control the response to onClose, for example ignoring click away.
     * */
    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    /** The message to display. */
    label?: React.ReactNode;
    /** The anchor of the Snackbar. */
    anchorOrigin?: "top" | "bottom";
    /** Variant of the snackbar. */
    variant?: HvBannerVariant;
    /** Custom icon to replace the variant default. */
    customIcon?: React.ReactNode;
    /** Controls if the associated icon to the variant should be shown. */
    showIcon?: boolean;
    /** Actions to display on the right side. */
    actions?: HvActionsGenericProps["actions"];
    /** The callback function called when an action is triggered, receiving `action` as parameter. */
    onAction?: HvActionsGenericProps["onAction"];
    /** The position property of the header. */
    actionsPosition?: HvBannerActionPosition;
    /** How much the transition animation last in milliseconds, if 0 no animation is played. */
    transitionDuration?: number;
    /** Direction of slide transition. */
    transitionDirection?: "up" | "down" | "left" | "right";
    /** The container the banner should slide from. */
    container?: SlideProps["container"];
    /** Offset from top/bottom of the page, in px. Defaults to 60px. */
    offset?: number;
    /** Props to pass down to the banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */
    bannerContentProps?: HvBannerContentProps;
    /** The size of the banner. */
    size?: HvBannerContentProps["size"];
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvBannerClasses;
    /** @ignore */
    ref?: SnackbarProps["ref"];
}

export declare type HvBannerVariant = HvCalloutVariant;

/**
 * A Checkbox is a mechanism that allows user to select one or more options.
 *
 * The Base Checkbox is a building block of the Checkbox form element. Don't use unless
 * implementing a custom use case not covered by the Checkbox form element.
 */
export declare const HvBaseCheckBox: ForwardRefExoticComponent<Omit<HvBaseCheckBoxProps, "ref"> & RefAttributes<HTMLButtonElement>>;

export declare type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses_33>;

export declare interface HvBaseCheckBoxProps extends Omit<CheckboxProps, "onChange" | "classes" | "color"> {
    /**
     * The input name.
     */
    name?: string;
    /**
     * The value of the input.
     *
     * Is up to the application's logic when to consider the submission of this value.
     * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.
     *
     * The default value is "on".
     */
    value?: any;
    /**
     * Indicates that the input is disabled.
     */
    disabled?: boolean;
    /**
     * Indicates that the input is not editable.
     */
    readOnly?: boolean;
    /**
     * Indicates that user input is required.
     */
    required?: boolean;
    /**
     * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.
     *
     * When defined the checkbox state becomes controlled.
     */
    checked?: boolean;
    /**
     * When uncontrolled, defines the initial checked state.
     */
    defaultChecked?: boolean;
    /**
     * If `true` the checkbox visually shows the indeterminate state.
     */
    indeterminate?: boolean;
    /**
     * The callback fired when the checkbox is pressed.
     */
    onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean, value: any) => void;
    /**
     * Whether the selector should use semantic colors.
     */
    semantic?: boolean;
    /**
     * Properties passed on to the input element.
     */
    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
    /**
     * Callback fired when the component is focused with a keyboard.
     * We trigger a `onFocus` callback too.
     */
    onFocusVisible?: (event: React.FocusEvent<any>) => void;
    /**
     * Callback fired when the component is blurred.
     */
    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
    /**
     * Color applied to the check box.
     */
    color?: HvColorAny;
    /**
     * A Jss Object used to override or extend the styles applied to the checkbox.
     */
    classes?: HvBaseCheckBoxClasses;
}

export declare const HvBaseDropdown: ForwardRefExoticComponent<Omit<HvBaseDropdownProps, "ref"> & RefAttributes<HTMLDivElement>>;

export declare type HvBaseDropdownClasses = ExtractNames<typeof useClasses_18>;

export declare interface HvBaseDropdownProps extends HvBaseProps<HTMLDivElement, "onToggle"> {
    /**
     * The role of the element that triggers the popup.
     *
     * Defaults to "combobox" if `component` and the default
     * "textbox" header is used, undefined otherwise.
     */
    role?: string;
    /**
     * Header placeholder.
     */
    placeholder?: React.ReactNode;
    /**
     * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.
     */
    disabled?: boolean;
    /**
     * If `true` the dropdown will be in read only mode, unable to be interacted.
     */
    readOnly?: boolean;
    /**
     * Indicates that user input is required on the form element.
     */
    required?: boolean;
    /**
     * Disable the portal behavior.
     * The children stay within it's parent DOM hierarchy.
     */
    disablePortal?: boolean;
    /**
     * If `true` the dropdown width depends size of content if `false` the width depends on the header size.
     * Defaults to `false`.
     */
    variableWidth?: boolean;
    /**
     * If `true` the dropdown starts opened if `false` it starts closed.
     */
    expanded?: boolean;
    /**
     * When uncontrolled, defines the initial expanded state.
     */
    defaultExpanded?: boolean;
    /**
     * An object containing props to be wired to the popper component.
     */
    popperProps?: PopperProps["popperOptions"];
    /**
     * Placement of the dropdown.
     */
    placement?: "left" | "right";
    /**
     * Replacement for the header component.
     * @deprecated use `headerComponent` instead
     */
    component?: React.ReactNode;
    /** Replacement for the header component */
    headerComponent?: React.ElementType;
    /**
     * Adornment to replace the default arrows.
     */
    adornment?: React.ReactNode;
    /**
     * When dropdown changes the expanded state.
     */
    onToggle?: (event: Event, open: boolean) => void;
    /**
     * When user click outside the open container.
     */
    onClickOutside?: (event: Event) => void;
    /**
     * Callback called when the dropdown is opened and ready,
     * commonly used to set focus to the content.
     */
    onContainerCreation?: (container: HTMLElement | null, state: Partial<State>) => void;
    /**
     * Attributes applied to the dropdown header element.
     */
    dropdownHeaderProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
    /**
     * Pass a ref to the dropdown header element.
     */
    dropdownHeaderRef?: React.Ref<HTMLDivElement>;
    /**
     * A Jss Object used to override or extend the component styles applied.
     */
    classes?: HvBaseDropdownClasses;
    /** @ignore */
    ref?: React.Ref<HTMLDivElement>;
}

/**
 * An Input component that only posses the most basic functionalities.
 * It should be used alongside the other form elements to construct a proper accessible form.
 */
export declare const HvBaseInput: ForwardRefExoticComponent<HvBaseInputProps & RefAttributes<HTMLInputElement>>;

export declare type HvBaseInputClasses = ExtractNames<typeof useClasses_20>;

export declare interface Hv