@hitachivantara/uikit-react-core 5.5.0 → 5.7.0

package/dist/types/index.d.ts

@@ -132,45 +132,214 @@ declare type Accessor<D extends object> = (originalRow: D, index: number, sub: {
     data: D[];
 }) => CellValue;
 
-export declare const accordionClasses: HvAccordionClasses;
+export declare const accordionClasses: {
+    label: "HvAccordion-label";
+    hidden: "HvAccordion-hidden";
+    container: "HvAccordion-container";
+    disabled: "HvAccordion-disabled";
+    root: "HvAccordion-root";
+};
 
-export declare const actionBarClasses: HvActionBarClasses;
+export declare const actionBarClasses: {
+    root: "HvActionBar-root";
+};
 
-export declare const actionClasses: HvVerticalNavigationActionClasses;
+export declare const actionClasses: {
+    action: "HvVerticalNavigationAction-action";
+    noIcon: "HvVerticalNavigationAction-noIcon";
+    minimized: "HvVerticalNavigationAction-minimized";
+};
 
-export declare const actionsClasses: HvVerticalNavigationActionsClasses;
+export declare const actionsClasses: {
+    hide: "HvVerticalNavigationActions-hide";
+    root: "HvVerticalNavigationActions-root";
+};
 
-export declare const actionsGenericClasses: HvActionsGenericClasses;
+export declare const actionsGenericClasses: {
+    button: "HvActionsGeneric-button";
+    dropDownMenu: "HvActionsGeneric-dropDownMenu";
+    root: "HvActionsGeneric-root";
+    actionContainer: "HvActionsGeneric-actionContainer";
+    dropDownMenuButton: "HvActionsGeneric-dropDownMenuButton";
+    dropDownMenuButtonSelected: "HvActionsGeneric-dropDownMenuButtonSelected";
+};
 
-export declare const adornmentClasses: HvAdornmentClasses;
+export declare const adornmentClasses: {
+    icon: "HvAdornment-icon";
+    root: "HvAdornment-root";
+    adornment: "HvAdornment-adornment";
+    adornmentButton: "HvAdornment-adornmentButton";
+    adornmentIcon: "HvAdornment-adornmentIcon";
+    hideIcon: "HvAdornment-hideIcon";
+};
 
-export declare const appSwitcherActionClasses: HvAppSwitcherActionClasses;
+export declare const appSwitcherActionClasses: {
+    title: "HvAppSwitcher-Action-title";
+    typography: "HvAppSwitcher-Action-typography";
+    icon: "HvAppSwitcher-Action-icon";
+    disabled: "HvAppSwitcher-Action-disabled";
+    selected: "HvAppSwitcher-Action-selected";
+    root: "HvAppSwitcher-Action-root";
+    iconUrl: "HvAppSwitcher-Action-iconUrl";
+    iconInfo: "HvAppSwitcher-Action-iconInfo";
+};
 
-export declare const appSwitcherClasses: HvAppSwitcherClasses;
+export declare const appSwitcherClasses: {
+    title: "HvAppSwitcher-title";
+    open: "HvAppSwitcher-open";
+    single: "HvAppSwitcher-single";
+    root: "HvAppSwitcher-root";
+    dual: "HvAppSwitcher-dual";
+    fluid: "HvAppSwitcher-fluid";
+    item: "HvAppSwitcher-item";
+    itemSelected: "HvAppSwitcher-itemSelected";
+    itemDisabled: "HvAppSwitcher-itemDisabled";
+    itemTrigger: "HvAppSwitcher-itemTrigger";
+    itemIcon: "HvAppSwitcher-itemIcon";
+    itemTitle: "HvAppSwitcher-itemTitle";
+    itemInfoIcon: "HvAppSwitcher-itemInfoIcon";
+    actionsContainer: "HvAppSwitcher-actionsContainer";
+    footerContainer: "HvAppSwitcher-footerContainer";
+    closed: "HvAppSwitcher-closed";
+};
 
 declare type AsProp<C extends React.ElementType> = {
     as?: C;
 };
 
-export declare const avatarClasses: HvAvatarClasses;
+declare interface Attribute extends Record<string, unknown> {
+    id?: string;
+    label: string;
+    type: string;
+    value?: unknown;
+    order?: number;
+}
+
+export declare const avatarClasses: {
+    img: "HvAvatar-img";
+    status: "HvAvatar-status";
+    container: "HvAvatar-container";
+    square: "HvAvatar-square";
+    xs: "HvAvatar-xs";
+    sm: "HvAvatar-sm";
+    md: "HvAvatar-md";
+    lg: "HvAvatar-lg";
+    xl: "HvAvatar-xl";
+    root: "HvAvatar-root";
+    circular: "HvAvatar-circular";
+    fallback: "HvAvatar-fallback";
+    badge: "HvAvatar-badge";
+    avatar: "HvAvatar-avatar";
+};
 
-export declare const badgeClasses: HvBadgeClasses;
+export declare const badgeClasses: {
+    root: "HvBadgeClasses-root";
+    badge: "HvBadgeClasses-badge";
+    showCount: "HvBadgeClasses-showCount";
+    badgeContainer: "HvBadgeClasses-badgeContainer";
+    badgePosition: "HvBadgeClasses-badgePosition";
+    showLabel: "HvBadgeClasses-showLabel";
+    badgeIcon: "HvBadgeClasses-badgeIcon";
+    badgeOneDigit: "HvBadgeClasses-badgeOneDigit";
+};
 
-export declare const bannerClasses: HvBannerClasses;
+export declare const bannerClasses: {
+    root: "HvBanner-root";
+    rootClosed: "HvBanner-rootClosed";
+    anchorOriginTopCenter: "HvBanner-anchorOriginTopCenter";
+    anchorOriginBottomCenter: "HvBanner-anchorOriginBottomCenter";
+};
 
-export declare const bannerContentClasses: HvBannerContentClasses;
+export declare const bannerContentClasses: {
+    default: "HvBanner-Content-default";
+    action: "HvBanner-Content-action";
+    error: "HvBanner-Content-error";
+    warning: "HvBanner-Content-warning";
+    success: "HvBanner-Content-success";
+    info: "HvBanner-Content-info";
+    root: "HvBanner-Content-root";
+    message: "HvBanner-Content-message";
+    outContainer: "HvBanner-Content-outContainer";
+    baseVariant: "HvBanner-Content-baseVariant";
+};
 
-export declare const baseCheckBoxClasses: HvBaseCheckBoxClasses;
+export declare const baseCheckBoxClasses: {
+    icon: "HvBaseCheckBox-icon";
+    disabled: "HvBaseCheckBox-disabled";
+    root: "HvBaseCheckBox-root";
+    focusVisible: "HvBaseCheckBox-focusVisible";
+};
 
-export declare const baseDropdownClasses: HvBaseDropdownClasses;
+export declare const baseDropdownClasses: {
+    header: "HvBaseDropdown-header";
+    placeholder: "HvBaseDropdown-placeholder";
+    arrow: "HvBaseDropdown-arrow";
+    anchor: "HvBaseDropdown-anchor";
+    container: "HvBaseDropdown-container";
+    root: "HvBaseDropdown-root";
+    rootDisabled: "HvBaseDropdown-rootDisabled";
+    headerOpen: "HvBaseDropdown-headerOpen";
+    headerOpenUp: "HvBaseDropdown-headerOpenUp";
+    headerOpenDown: "HvBaseDropdown-headerOpenDown";
+    headerDisabled: "HvBaseDropdown-headerDisabled";
+    headerReadOnly: "HvBaseDropdown-headerReadOnly";
+    selection: "HvBaseDropdown-selection";
+    selectionDisabled: "HvBaseDropdown-selectionDisabled";
+    panel: "HvBaseDropdown-panel";
+    inputExtensionOpen: "HvBaseDropdown-inputExtensionOpen";
+    inputExtensionLeftPosition: "HvBaseDropdown-inputExtensionLeftPosition";
+    inputExtensionOpenShadow: "HvBaseDropdown-inputExtensionOpenShadow";
+    inputExtensionFloatRight: "HvBaseDropdown-inputExtensionFloatRight";
+    inputExtensionFloatLeft: "HvBaseDropdown-inputExtensionFloatLeft";
+};
 
-export declare const baseInputClasses: HvBaseInputClasses;
+export declare const baseInputClasses: {
+    input: "HvBaseInput-input";
+    disabled: "HvBaseInput-disabled";
+    readOnly: "HvBaseInput-readOnly";
+    invalid: "HvBaseInput-invalid";
+    root: "HvBaseInput-root";
+    resizable: "HvBaseInput-resizable";
+    inputRoot: "HvBaseInput-inputRoot";
+    inputRootFocused: "HvBaseInput-inputRootFocused";
+    inputRootDisabled: "HvBaseInput-inputRootDisabled";
+    inputRootMultiline: "HvBaseInput-inputRootMultiline";
+    inputRootInvalid: "HvBaseInput-inputRootInvalid";
+    inputRootReadOnly: "HvBaseInput-inputRootReadOnly";
+    inputDisabled: "HvBaseInput-inputDisabled";
+    inputResizable: "HvBaseInput-inputResizable";
+    inputReadOnly: "HvBaseInput-inputReadOnly";
+    inputBorderContainer: "HvBaseInput-inputBorderContainer";
+};
 
-export declare const baseRadioClasses: HvBaseRadioClasses;
+export declare const baseRadioClasses: {
+    icon: "HvBaseRadio-icon";
+    disabled: "HvBaseRadio-disabled";
+    root: "HvBaseRadio-root";
+    focusVisible: "HvBaseRadio-focusVisible";
+};
 
-export declare const baseSwitchClasses: HvBaseSwitchClasses;
+export declare const baseSwitchClasses: {
+    track: "HvBaseSwitch-track";
+    switch: "HvBaseSwitch-switch";
+    disabled: "HvBaseSwitch-disabled";
+    checked: "HvBaseSwitch-checked";
+    readOnly: "HvBaseSwitch-readOnly";
+    root: "HvBaseSwitch-root";
+    focusVisible: "HvBaseSwitch-focusVisible";
+    thumb: "HvBaseSwitch-thumb";
+    switchBase: "HvBaseSwitch-switchBase";
+};
 
-export declare const breadCrumbClasses: HvBreadCrumbClasses;
+export declare const breadCrumbClasses: {
+    a: "HvBreadCrumb-a";
+    link: "HvBreadCrumb-link";
+    root: "HvBreadCrumb-root";
+    orderedList: "HvBreadCrumb-orderedList";
+    currentPage: "HvBreadCrumb-currentPage";
+    centerContainer: "HvBreadCrumb-centerContainer";
+    separatorContainer: "HvBreadCrumb-separatorContainer";
+};
 
 export declare interface Breakpoint {
     cols?: number;
@@ -193,21 +362,67 @@ export declare const buildFormElementPropsFromContext: (name: any, disabled: any
     status: any;
 };
 
-export declare const bulkActionsClasses: HvBulkActionsClasses;
+export declare const bulkActionsClasses: {
+    semantic: "HvBulkActions-semantic";
+    root: "HvBulkActions-root";
+    actions: "HvBulkActions-actions";
+    selectAllContainer: "HvBulkActions-selectAllContainer";
+    selectAll: "HvBulkActions-selectAll";
+    selectAllPages: "HvBulkActions-selectAllPages";
+};
 
-export declare const buttonClasses: HvButtonClasses;
+export declare const buttonClasses: {
+    root: "HvButton-root";
+    startIcon: "HvButton-startIcon";
+    endIcon: "HvButton-endIcon";
+    focusVisible: "HvButton-focusVisible";
+};
 
-export declare const calendarClasses: HvCalendarClasses;
+export declare const calendarClasses: {
+    root: "HvCalendar-root";
+    rangeCalendarContainer: "HvCalendar-rangeCalendarContainer";
+    singleCalendar: "HvCalendar-singleCalendar";
+    focusSelection: "HvCalendar-focusSelection";
+    calendarMonthlyCell: "HvCalendar-calendarMonthlyCell";
+    calendarMonthlyCellSelected: "HvCalendar-calendarMonthlyCellSelected";
+};
 
-export declare const calendarHeaderClasses: HvCalendarHeaderClasses;
+export declare const calendarHeaderClasses: {
+    input: "HvCalendarHeader-input";
+    invalid: "HvCalendarHeader-invalid";
+    root: "HvCalendarHeader-root";
+    inputBorderContainer: "HvCalendarHeader-inputBorderContainer";
+    headerDayOfWeek: "HvCalendarHeader-headerDayOfWeek";
+    headerDate: "HvCalendarHeader-headerDate";
+    invalidMessageStyling: "HvCalendarHeader-invalidMessageStyling";
+};
 
-export declare const cardClasses: HvCardClasses;
+export declare const cardClasses: {
+    icon: "HvCard-icon";
+    selected: "HvCard-selected";
+    root: "HvCard-root";
+    selectable: "HvCard-selectable";
+    semanticBar: "HvCard-semanticBar";
+    semanticContainer: "HvCard-semanticContainer";
+};
 
-export declare const cardContentClasses: HvCardContentClasses;
+export declare const cardContentClasses: {
+    content: "HvCard-Content-content";
+};
 
-export declare const cardHeaderClasses: HvCardHeaderClasses;
+export declare const cardHeaderClasses: {
+    title: "HvCard-Header-title";
+    content: "HvCard-Header-content";
+    action: "HvCard-Header-action";
+    root: "HvCard-Header-root";
+    titleShort: "HvCard-Header-titleShort";
+    subheader: "HvCard-Header-subheader";
+};
 
-export declare const cardMediaClasses: HvCardMediaClasses;
+export declare const cardMediaClasses: {
+    media: "HvCard-Media-media";
+    root: "HvCard-Media-root";
+};
 
 declare type CellValue<V = any> = V;
 
@@ -222,15 +437,68 @@ export declare const CellWithExpandButton: ({ row, cell, labels: labelsProp }: {
     labels: any;
 }) => JSX_2.Element;
 
-export declare const charCounterClasses: HvCharCounterClasses;
+export declare const charCounterClasses: {
+    root: "HvCharCounter-root";
+    counterDisabled: "HvCharCounter-counterDisabled";
+    gutter: "HvCharCounter-gutter";
+    overloaded: "HvCharCounter-overloaded";
+};
 
-export declare const checkBoxClasses: HvCheckBoxClasses;
+export declare const checkBoxClasses: {
+    label: "HvCheckBox-label";
+    checkbox: "HvCheckBox-checkbox";
+    container: "HvCheckBox-container";
+    disabled: "HvCheckBox-disabled";
+    root: "HvCheckBox-root";
+    focusVisible: "HvCheckBox-focusVisible";
+    invalidContainer: "HvCheckBox-invalidContainer";
+    invalidCheckbox: "HvCheckBox-invalidCheckbox";
+};
 
-export declare const checkBoxGroupClasses: HvCheckBoxGroupClasses;
+export declare const checkBoxGroupClasses: {
+    label: "HvCheckBoxGroup-label";
+    group: "HvCheckBoxGroup-group";
+    horizontal: "HvCheckBoxGroup-horizontal";
+    vertical: "HvCheckBoxGroup-vertical";
+    error: "HvCheckBoxGroup-error";
+    invalid: "HvCheckBoxGroup-invalid";
+    root: "HvCheckBoxGroup-root";
+    selectAll: "HvCheckBoxGroup-selectAll";
+};
 
-export declare const containerClasses: HvContainerClasses;
+export declare const colorPickerClasses: {
+    label: "HvColorPicker-label";
+    colorPicker: "HvColorPicker-colorPicker";
+    root: "HvColorPicker-root";
+    panel: "HvColorPicker-panel";
+    description: "HvColorPicker-description";
+    labelContainer: "HvColorPicker-labelContainer";
+    headerColorIcon: "HvColorPicker-headerColorIcon";
+    headerColorValue: "HvColorPicker-headerColorValue";
+    colorPickerIcon: "HvColorPicker-colorPickerIcon";
+    dropdownRootIconOnly: "HvColorPicker-dropdownRootIconOnly";
+    headerColorIconOnly: "HvColorPicker-headerColorIconOnly";
+    recommendedColorsRoot: "HvColorPicker-recommendedColorsRoot";
+    pickerFields: "HvColorPicker-pickerFields";
+};
+
+export declare const containerClasses: {
+    fixed: "HvContainer-fixed";
+    root: "HvContainer-root";
+    disableGutters: "HvContainer-disableGutters";
+    maxWidthXs: "HvContainer-maxWidthXs";
+    maxWidthSm: "HvContainer-maxWidthSm";
+    maxWidthMd: "HvContainer-maxWidthMd";
+    maxWidthLg: "HvContainer-maxWidthLg";
+    maxWidthXl: "HvContainer-maxWidthXl";
+};
 
-export declare const controlsClasses: HvControlsClasses;
+export declare const controlsClasses: {
+    section: "HvControls-section";
+    root: "HvControls-root";
+    rightSection: "HvControls-rightSection";
+    leftSection: "HvControls-leftSection";
+};
 
 /**
  * Creates a customized theme based on the base theme and customizations given.
@@ -243,8 +511,19 @@ export declare interface DateRangeProp {
     endDate?: Date;
 }
 
+declare interface DateTimeRange {
+    start?: DateTimeStrings;
+    end?: DateTimeStrings;
+}
+
+declare interface DateTimeStrings {
+    date?: string;
+    time?: string;
+}
+
 export declare const decreaseSize: (size: string) => "XS" | "S" | "M" | "L";
 
+/** This type allows to do a deep partial by applying the Partial type to each key recursively */
 declare type DeepPartial<T> = Partial<{
     [P in keyof T]: DeepPartial<T[P]>;
 }>;
@@ -272,31 +551,113 @@ declare interface Descriptor {
     htmlFor?: string;
 }
 
-export declare const dialogActionClasses: HvDialogActionClasses;
+export declare const dialogActionClasses: {
+    spacing: "HvDialog-Action-spacing";
+    root: "HvDialog-Action-root";
+    fullscreen: "HvDialog-Action-fullscreen";
+};
 
-export declare const dialogClasses: HvDialogClasses;
+export declare const dialogClasses: {
+    background: "HvDialog-background";
+    root: "HvDialog-root";
+    closeButton: "HvDialog-closeButton";
+    fullscreen: "HvDialog-fullscreen";
+    paper: "HvDialog-paper";
+};
 
-export declare const dialogContentClasses: HvDialogContentClasses;
+export declare const dialogContentClasses: {
+    root: "HvDialog-Content-root";
+    textContent: "HvDialog-Content-textContent";
+};
 
-export declare const dialogTitleClasses: HvDialogTitleClasses;
+declare interface DialogLabels {
+    dialogTitle: string;
+    dialogMessage: string;
+    dialogConfirm: string;
+    dialogCancel: string;
+    dialogCloseTooltip: string;
+}
 
-export declare const dotPaginationClasses: HvDotPaginationClasses;
+export declare const dialogTitleClasses: {
+    root: "HvDialog-Title-root";
+    fullscreen: "HvDialog-Title-fullscreen";
+    messageContainer: "HvDialog-Title-messageContainer";
+    textWithIcon: "HvDialog-Title-textWithIcon";
+};
 
-export declare const dropdownClasses: HvDropdownClasses;
+export declare const dotPaginationClasses: {
+    radio: "HvDotPagination-radio";
+    horizontal: "HvDotPagination-horizontal";
+    icon: "HvDotPagination-icon";
+    root: "HvDotPagination-root";
+    radioRoot: "HvDotPagination-radioRoot";
+};
 
-export declare const dropDownMenuClasses: HvDropDownMenuClasses;
+export declare const dropdownClasses: {
+    label: "HvDropdown-label";
+    placeholder: "HvDropdown-placeholder";
+    arrow: "HvDropdown-arrow";
+    error: "HvDropdown-error";
+    dropdown: "HvDropdown-dropdown";
+    root: "HvDropdown-root";
+    selectionDisabled: "HvDropdown-selectionDisabled";
+    description: "HvDropdown-description";
+    labelContainer: "HvDropdown-labelContainer";
+    dropdownHeader: "HvDropdown-dropdownHeader";
+    dropdownHeaderInvalid: "HvDropdown-dropdownHeaderInvalid";
+    dropdownHeaderOpen: "HvDropdown-dropdownHeaderOpen";
+    dropdownListContainer: "HvDropdown-dropdownListContainer";
+    rootList: "HvDropdown-rootList";
+};
+
+export declare const dropDownMenuClasses: {
+    container: "HvDropDownMenu-container";
+    icon: "HvDropDownMenu-icon";
+    root: "HvDropDownMenu-root";
+    baseContainer: "HvDropDownMenu-baseContainer";
+    iconSelected: "HvDropDownMenu-iconSelected";
+    menuList: "HvDropDownMenu-menuList";
+};
 
 export { ds3 }
 
 export { ds5 }
 
-export declare const emptyStateClasses: HvEmptyStateClasses;
+export declare const emptyStateClasses: {
+    container: "HvEmptyState-container";
+    root: "HvEmptyState-root";
+    actionContainer: "HvEmptyState-actionContainer";
+    containerMessageOnly: "HvEmptyState-containerMessageOnly";
+    iconContainer: "HvEmptyState-iconContainer";
+    titleContainer: "HvEmptyState-titleContainer";
+    textContainer: "HvEmptyState-textContainer";
+    messageContainer: "HvEmptyState-messageContainer";
+};
 
-export declare const fileClasses: HvFileClasses;
+export declare const fileClasses: {
+    progressbar: "HvFile-progressbar";
+    icon: "HvFile-icon";
+    root: "HvFile-root";
+    removeButton: "HvFile-removeButton";
+    fail: "HvFile-fail";
+    progressbarBack: "HvFile-progressbarBack";
+    nameText: "HvFile-nameText";
+    progressTextContainer: "HvFile-progressTextContainer";
+    previewContainer: "HvFile-previewContainer";
+};
 
-export declare const fileUploaderPreviewClasses: HvFileUploaderPreviewClasses;
+export declare const fileUploaderPreviewClasses: {
+    overlay: "HvFileUploaderPreview-overlay";
+    previewButton: "HvFileUploaderPreview-previewButton";
+};
 
-export declare const filterGroupClasses: HvFilterGroupClasses;
+export declare const filterGroupClasses: {
+    label: "HvFilterGroup-label";
+    error: "HvFilterGroup-error";
+    root: "HvFilterGroup-root";
+    description: "HvFilterGroup-description";
+    labelContainer: "HvFilterGroup-labelContainer";
+};
 
 /**
  * Scans the element's children looking for the children IDs that match the different form element types.
@@ -323,13 +684,30 @@ export declare const findDescriptors: (children: any, descriptors?: {
     HvCalendarHeader?: Descriptor[] | undefined;
 };
 
-export declare const focusClasses: HvFocusClasses;
+export declare const focusClasses: {
+    disabled: "HvFocus-disabled";
+    selected: "HvFocus-selected";
+    focus: "HvFocus-focus";
+    root: "HvFocus-root";
+    focused: "HvFocus-focused";
+    focusDisabled: "HvFocus-focusDisabled";
+    externalReference: "HvFocus-externalReference";
+    falseFocus: "HvFocus-falseFocus";
+};
 
-export declare const footerClasses: HvFooterClasses;
+export declare const footerClasses: {
+    separator: "HvFooter-separator";
+    name: "HvFooter-name";
+    root: "HvFooter-root";
+    rightContainer: "HvFooter-rightContainer";
+    copyright: "HvFooter-copyright";
+};
 
-export declare const formElementClasses: HvFormElementClasses;
+export declare const formElementClasses: {
+    root: "HvFormElement-root";
+};
 
-export declare const getClasses: <T>(keys: string[], name: string) => T;
+export declare const getClasses: <T extends string, N extends string>(keys: T[], name: N) => { [P in T]: `${N}-${P}`; };
 
 export declare const getComponentName: (Component: any) => any;
 
@@ -399,21 +777,82 @@ export declare const getTableHeadPropsHook: (props: any, { instance }: {
  */
 export declare const getVarValue: (cssVar: string) => string;
 
-export declare const globalActionsClasses: HvGlobalActionsClasses;
+export declare const globalActionsClasses: {
+    name: "HvGlobalActions-name";
+    global: "HvGlobalActions-global";
+    wrapper: "HvGlobalActions-wrapper";
+    root: "HvGlobalActions-root";
+    actions: "HvGlobalActions-actions";
+    backButton: "HvGlobalActions-backButton";
+    globalSectionArea: "HvGlobalActions-globalSectionArea";
+    positionFixed: "HvGlobalActions-positionFixed";
+    positionSticky: "HvGlobalActions-positionSticky";
+    globalWrapperComplement: "HvGlobalActions-globalWrapperComplement";
+};
 
-export declare const gridClasses: HvGridClasses;
+export declare const gridClasses: {
+    container: "HvGrid-container";
+    root: "HvGrid-root";
+    item: "HvGrid-item";
+    zeroMinWidth: "HvGrid-zeroMinWidth";
+    "direction-xs-column": "HvGrid-direction-xs-column";
+    "direction-xs-row-reverse": "HvGrid-direction-xs-row-reverse";
+    "wrap-xs-nowrap": "HvGrid-wrap-xs-nowrap";
+    "wrap-xs-wrap-reverse": "HvGrid-wrap-xs-wrap-reverse";
+    "spacing-xs-1": "HvGrid-spacing-xs-1";
+    "spacing-xs-2": "HvGrid-spacing-xs-2";
+    "spacing-xs-3": "HvGrid-spacing-xs-3";
+    "spacing-xs-4": "HvGrid-spacing-xs-4";
+    "spacing-xs-5": "HvGrid-spacing-xs-5";
+    "spacing-xs-6": "HvGrid-spacing-xs-6";
+    "spacing-xs-7": "HvGrid-spacing-xs-7";
+    "spacing-xs-8": "HvGrid-spacing-xs-8";
+    "spacing-xs-9": "HvGrid-spacing-xs-9";
+    "spacing-xs-10": "HvGrid-spacing-xs-10";
+    "grid-xs-auto": "HvGrid-grid-xs-auto";
+    "grid-xs-true": "HvGrid-grid-xs-true";
+    "grid-xs-1": "HvGrid-grid-xs-1";
+    "grid-xs-2": "HvGrid-grid-xs-2";
+    "grid-xs-3": "HvGrid-grid-xs-3";
+    "grid-xs-4": "HvGrid-grid-xs-4";
+    "grid-xs-5": "HvGrid-grid-xs-5";
+    "grid-xs-6": "HvGrid-grid-xs-6";
+    "grid-xs-7": "HvGrid-grid-xs-7";
+    "grid-xs-8": "HvGrid-grid-xs-8";
+    "grid-xs-9": "HvGrid-grid-xs-9";
+    "grid-xs-10": "HvGrid-grid-xs-10";
+    "grid-xs-11": "HvGrid-grid-xs-11";
+    "grid-xs-12": "HvGrid-grid-xs-12";
+    "direction-xs-reverse": "HvGrid-direction-xs-reverse";
+};
 
-export declare const headerActionsClasses: HvHeaderActionsClasses;
+export declare const headerActionsClasses: {
+    root: "HvHeader-Actions-root";
+};
 
-export declare const headerBrandClasses: HvHeaderBrandClasses;
+export declare const headerBrandClasses: {
+    separator: "HvHeader-Brand-separator";
+    root: "HvHeader-Brand-root";
+};
 
-export declare const headerClasses: HvHeaderClasses;
+export declare const headerClasses: {
+    header: "HvHeader-header";
+    backgroundColor: "HvHeader-backgroundColor";
+    root: "HvHeader-root";
+};
 
-export declare const headerNavigationClasses: HvHeaderNavigationClasses;
+export declare const headerNavigationClasses: {
+    root: "HvHeader-Navigation-root";
+};
 
 export declare const hexToRgbA: (hex: any, factor?: number) => string;
 
-export declare const horizontalScrollListItemClasses: HvHorizontalScrollListItemClasses;
+export declare const horizontalScrollListItemClasses: {
+    button: "HvHorizontalScrollListItem-button";
+    text: "HvHorizontalScrollListItem-text";
+    selected: "HvHorizontalScrollListItem-selected";
+    root: "HvHorizontalScrollListItem-root";
+};
 
 export declare type HvAccentColorKeys = "primary" | "primary_80" | "primary_20" | "brand" | "secondary" | "secondary_60" | "secondary_80";
 
@@ -437,9 +876,7 @@ export declare interface HvAccordionClasses {
     disabled?: string;
 }
 
-export declare interface HvAccordionProps extends HvBaseProps<HTMLDivElement, {
-    onChange: any;
-}> {
+export declare interface HvAccordionProps extends HvBaseProps<HTMLDivElement, "onChange"> {
     /**
      * Id to be applied to the root node of the accordion.
      */
@@ -578,10 +1015,7 @@ export declare interface HvAdornmentClasses {
     adornmentButton?: string;
 }
 
-export declare interface HvAdornmentProps extends HvBaseProps<HTMLDivElement | HTMLButtonElement, {
-    onMouseDown: any;
-    onKeyDown: any;
-}> {
+export declare interface HvAdornmentProps extends HvBaseProps<HTMLDivElement | HTMLButtonElement, "onMouseDown" | "onKeyDown"> {
     /** The icon to be added into the input. */
     icon: React.ReactNode;
     /** When the adornment should be displayed. */
@@ -862,9 +1296,7 @@ export declare interface HvBannerContentProps extends Omit<SnackbarContentProps,
     classes?: HvBannerContentClasses;
 }
 
-export declare interface HvBannerProps extends Omit<SnackbarProps, "anchorOrigin" | "classes" | "onClose">, HvBaseProps<HTMLDivElement, {
-    children: any;
-}> {
+export declare interface HvBannerProps extends Omit<SnackbarProps, "anchorOrigin" | "classes" | "onClose">, HvBaseProps<HTMLDivElement, "children"> {
     /** 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 clickaway. */
@@ -914,10 +1346,7 @@ export declare interface HvBaseCheckBoxClasses {
     icon?: string;
 }
 
-export declare interface HvBaseCheckBoxProps extends Omit<CheckboxProps, "onChange" | "classes">, HvBaseProps<HTMLButtonElement, {
-    onChange: any;
-    color: any;
-}> {
+export declare interface HvBaseCheckBoxProps extends Omit<CheckboxProps, "onChange" | "classes">, HvBaseProps<HTMLButtonElement, "onChange" | "color"> {
     /**
      * The input name.
      */
@@ -1013,9 +1442,7 @@ export declare interface HvBaseDropdownClasses {
     inputExtensionFloatLeft?: string;
 }
 
-export declare interface HvBaseDropdownProps extends HvBaseProps<HTMLDivElement, {
-    placeholder: any;
-}> {
+export declare interface HvBaseDropdownProps extends HvBaseProps<HTMLDivElement, "placeholder"> {
     /**
      * The role of the element that triggers the popup.
      *
@@ -1137,15 +1564,7 @@ export declare interface HvBaseInputClasses {
     readOnly?: string;
 }
 
-export declare interface HvBaseInputProps extends Omit<InputProps, "onChange" | "classes">, HvBaseProps<HTMLDivElement, {
-    onChange: any;
-    color: any;
-    onBlur: any;
-    onFocus: any;
-    onInvalid: any;
-    onKeyDown: any;
-    onKeyUp: any;
-}> {
+export declare interface HvBaseInputProps extends Omit<InputProps, "onChange" | "classes">, HvBaseProps<HTMLDivElement, "onChange" | "color" | "onBlur" | "onFocus" | "onInvalid" | "onKeyDown" | "onKeyUp"> {
     /** The input name. */
     name?: string;
     /** The value of the input, when controlled. */
@@ -1179,7 +1598,8 @@ export declare interface HvBaseInputProps extends Omit<InputProps, "onChange" |
     classes?: HvBaseInputClasses;
 }
 
-export declare type HvBaseProps<E = HTMLDivElement, P = {}> = Omit<HTMLAttributes<E>, keyof P>;
+/** HV Base Props. Extends `HTMLAttributes` of an element `E`, and filters `K` keys. */
+export declare type HvBaseProps<E extends HTMLElement = HTMLDivElement, K extends keyof HTMLAttributes<E> = never> = Omit<HTMLAttributes<E>, K>;
 
 declare type HvBaseProps_2<C extends React.ElementType> = PolymorphicComponentRef<C, {
     style?: React.CSSProperties;
@@ -1205,10 +1625,7 @@ export declare interface HvBaseRadioClasses {
     icon?: string;
 }
 
-export declare interface HvBaseRadioProps extends Omit<RadioProps, "onChange" | "classes">, HvBaseProps<HTMLButtonElement, {
-    onChange: any;
-    color: any;
-}> {
+export declare interface HvBaseRadioProps extends Omit<RadioProps, "onChange" | "classes">, HvBaseProps<HTMLButtonElement, "onChange" | "color"> {
     /**
      * Class names to be applied.
      */
@@ -1305,10 +1722,7 @@ export declare interface HvBaseSwitchClasses {
     focusVisible?: string;
 }
 
-export declare interface HvBaseSwitchProps extends Omit<SwitchProps, "onChange" | "classes">, HvBaseProps<HTMLButtonElement, {
-    onChange: any;
-    color: any;
-}> {
+export declare interface HvBaseSwitchProps extends Omit<SwitchProps, "onChange" | "classes">, HvBaseProps<HTMLButtonElement, "onChange" | "color"> {
     /**
      * Class names to be applied.
      */
@@ -1401,9 +1815,7 @@ export declare interface HvBreadCrumbPathElement {
     path: string;
 }
 
-export declare interface HvBreadCrumbProps extends HvBaseProps<HTMLDivElement, {
-    onClick: any;
-}> {
+export declare interface HvBreadCrumbProps extends HvBaseProps<HTMLDivElement, "onClick"> {
     /** List of breadcrumb. */
     listRoute?: HvBreadCrumbPathElement[];
     /** URL to build the breadcrumb. */
@@ -1716,9 +2128,7 @@ export declare interface HvCardHeaderClasses {
     content?: string;
 }
 
-export declare interface HvCardHeaderProps extends Omit<CardHeaderProps, "classes">, HvBaseProps<HTMLDivElement, {
-    title: any;
-}> {
+export declare interface HvCardHeaderProps extends Omit<CardHeaderProps, "classes">, HvBaseProps<HTMLDivElement, "title"> {
     /** The renderable content inside the title slot of the header. */
     title: React.ReactNode;
     /** The renderable content inside the subheader slot of the header. */
@@ -1738,10 +2148,7 @@ export declare interface HvCardMediaClasses {
     media?: string;
 }
 
-export declare interface HvCardMediaProps extends Omit<CardMediaProps, "classes">, ImgHTMLAttributes<HTMLDivElement>, HvBaseProps<HTMLDivElement, {
-    onClick: any;
-    title: any;
-}> {
+export declare interface HvCardMediaProps extends Omit<CardMediaProps, "classes">, ImgHTMLAttributes<HTMLDivElement>, HvBaseProps<HTMLDivElement, "onClick" | "title"> {
     /** Id to be applied to the root node. */
     id?: string;
     /** The title of the media. */
@@ -1861,9 +2268,7 @@ export declare interface HvCheckBoxGroupClasses {
     error?: string;
 }
 
-export declare interface HvCheckBoxGroupProps extends HvBaseProps<HTMLDivElement, {
-    onChange: any;
-}> {
+export declare interface HvCheckBoxGroupProps extends HvBaseProps<HTMLDivElement, "onChange"> {
     /**
      * The form element name.
      *
@@ -1983,6 +2388,96 @@ export declare interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, "clas
 
 export declare type HvClickOutsideEvent = MouseEvent | KeyboardEvent | TouchEvent;
 
+/**
+ * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.
+ * It receives a color string in HEX format and outputs an HEX formatted color.
+ */
+export declare const HvColorPicker: ({ id, name, required, disabled, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, description, "aria-describedby": ariaDescribedBy, className, classes, value, onChange, defaultValue, expanded, defaultExpanded, recommendedColorsPosition, recommendedColors, showLabels, labels: labelsProp, dropdownIcon, placeholder, iconOnly, showSavedColors, showCustomColors, savedColorsValue, defaultSavedColorsValue, onSavedColorAdded, onSavedColorRemoved, deleteSavedColorButtonArialLabel, }: HvColorPickerProps) => JSX_2.Element;
+
+export declare interface HvColorPickerClasses {
+    root?: string;
+    labelContainer?: string;
+    label?: string;
+    description?: string;
+    headerColorIcon?: string;
+    headerColorValue?: string;
+    panel?: string;
+    colorPicker?: string;
+    colorPickerIcon?: string;
+    dropdownRootIconOnly?: string;
+    headerColorIconOnly?: string;
+    recommendedColorsRoot?: string;
+    pickerFields?: string;
+}
+
+export declare interface HvColorPickerProps {
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    /** Class names to be applied. */
+    className?: string;
+    /** Id to be applied to the form element root node. */
+    id?: string;
+    /** The form element name. */
+    name?: string;
+    /**
+     * The label of the form element.
+     *
+     * The form element must be labeled for accessibility reasons.
+     * If not provided, an aria-label or aria-labelledby must be provided instead.
+     */
+    label?: React.ReactNode;
+    /** Provide additional descriptive text for the form element. */
+    description?: React.ReactNode;
+    /** Indicates that user input is required on the form element. */
+    required?: boolean;
+    /** The value color, in HEX format. */
+    value?: string;
+    /** The default value color, in HEX format. */
+    defaultValue?: string;
+    /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */
+    disabled?: boolean;
+    /** If `true` the dropdown starts opened if `false` it starts closed. */
+    expanded?: boolean;
+    /** When uncontrolled, defines the initial expanded state. */
+    defaultExpanded?: boolean;
+    /** A function to be executed whenever the color changes. */
+    onChange?: (color: string) => void;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: HvColorPickerClasses;
+    /** The placeholder value when nothing is selected. */
+    placeholder?: string;
+    /** Recommended colors. The colors are HEX values. */
+    recommendedColors?: string[];
+    /** Recommended colors position. */
+    recommendedColorsPosition?: "top" | "bottom";
+    /** If `true`, the labels are shown. If `false`, they are not shown. */
+    showLabels?: boolean;
+    /** An object containing all the labels. */
+    labels?: {
+        recommendedColorsLabel?: string;
+        customColorsLabel?: string;
+    };
+    /** Icon type for the input's end adornment. */
+    dropdownIcon?: "arrow" | "colorPicker";
+    /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */
+    iconOnly?: boolean;
+    /** If `true`, the saved colors area is shown. If `false`, it is not shown. */
+    showSavedColors?: boolean;
+    /** If `true`, the custom colors area is shown. If `false`, it is not shown. */
+    showCustomColors?: boolean;
+    /** The saved colors. The colors are HEX values. */
+    savedColorsValue?: string[];
+    /** The default saved colors. The colors are HEX values. */
+    defaultSavedColorsValue?: string[];
+    /** Callback fired when a new saved color is added. */
+    onSavedColorAdded?: (color?: string) => void;
+    /** Callback fired when a new saved color is removed. */
+    onSavedColorRemoved?: (color?: string) => void;
+    /** Aria label to apply to delete saved color button. */
+    deleteSavedColorButtonArialLabel?: string;
+}
+
 declare type HvColumnGroup<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> = HvTableColumnOptions<D, H> & HvColumnGroupInterface<D, H> & ({
     Header: H;
 } | ({
@@ -2176,9 +2671,7 @@ declare type HvDatePickerClasses = {
     rightContainer?: string;
 };
 
-export declare interface HvDatePickerProps extends HvBaseProps<HTMLDivElement, {
-    onChange: any;
-}> {
+export declare interface HvDatePickerProps extends HvBaseProps<HTMLDivElement, "onChange"> {
     /**
      * Class names to be applied.
      */
@@ -2294,6 +2787,7 @@ export declare interface HvDatePickerProps extends HvBaseProps<HTMLDivElement, {
     endValue?: Date;
     /**
      * Flag informing if the the component should be in range mode or in single mode.
+     * TODO: remove this in favour of discriminated union
      */
     rangeMode?: boolean;
     /**
@@ -2407,9 +2901,7 @@ export declare interface HvDialogTitleClasses {
     textWithIcon?: string;
 }
 
-export declare interface HvDialogTitleProps extends Omit<DialogTitleProps, "variant" | "classes">, HvBaseProps<HTMLSpanElement, {
-    color: any;
-}> {
+export declare interface HvDialogTitleProps extends Omit<DialogTitleProps, "variant" | "classes">, HvBaseProps<HTMLSpanElement, "color"> {
     /** Variant of the Dialog. */
     variant?: HvDialogTitleVariant;
     /** Controls if the associated icon to the variant should be shown. */
@@ -2627,9 +3119,7 @@ export declare interface HvDropDownMenuClasses {
     menuList?: string;
 }
 
-export declare interface HvDropDownMenuProps extends HvBaseProps<HTMLDivElement, {
-    onClick: any;
-}> {
+export declare interface HvDropDownMenuProps extends HvBaseProps<HTMLDivElement, "onClick"> {
     /** Icon. */
     icon?: React.ReactElement;
     /**
@@ -2664,9 +3154,7 @@ export declare interface HvDropDownMenuProps extends HvBaseProps<HTMLDivElement,
     classes?: HvDropDownMenuClasses;
 }
 
-export declare interface HvDropdownProps extends HvBaseProps<HTMLDivElement, {
-    onChange: any;
-}> {
+export declare interface HvDropdownProps extends HvBaseProps<HTMLDivElement, "onChange"> {
     /**
      * Class names to be applied.
      */
@@ -2905,9 +3393,7 @@ export declare interface HvEmptyStateClasses {
     actionContainer?: string;
 }
 
-export declare interface HvEmptyStateProps extends HvBaseProps<HTMLDivElement, {
-    title: any;
-}> {
+export declare interface HvEmptyStateProps extends HvBaseProps<HTMLDivElement, "title"> {
     /** Icon to be presented. */
     icon: React_2.ReactNode;
     /** The title to be shown. */
@@ -2922,6 +3408,7 @@ export declare interface HvEmptyStateProps extends HvBaseProps<HTMLDivElement, {
 
 export declare function hvExpandColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig<D, H>, expandRowButtonAriaLabel: string, collapseRowButtonAriaLabel: string, getCanRowExpand?: (row: HvRowInstance<D, H>) => boolean): HvTableColumnConfig<D, H>;
 
+/** This type combines the HvExtraProps and DeepPartial types */
 export declare type HvExtraDeepPartialProps<T> = Partial<{
     [P in keyof T]: DeepPartial<T[P]> & HvExtraProps;
 }> & HvExtraProps;
@@ -3119,6 +3606,7 @@ declare interface HvFilterGroupContentClasses {
     rightSidePanel?: string;
     actionBar?: string;
     space?: string;
+    applyButton?: string;
 }
 
 declare interface HvFilterGroupContentProps extends Omit<HvBaseDropdownProps, "onChange"> {
@@ -3238,9 +3726,7 @@ export declare interface HvFocusClasses {
     focusDisabled?: string;
 }
 
-export declare interface HvFocusProps extends HvBaseProps<HTMLElement, {
-    children: any;
-}> {
+export declare interface HvFocusProps extends HvBaseProps<HTMLElement, "children"> {
     children: React_2.ReactElement;
     /** Extra configuration for the child element. */
     configuration?: {
@@ -3348,9 +3834,7 @@ export declare const HvFormElementDescriptorsContextProvider: React_2.Provider<{
     label?: any;
 }>;
 
-export declare interface HvFormElementProps extends HvBaseProps<HTMLDivElement, {
-    onChange: any;
-}> {
+export declare interface HvFormElementProps extends HvBaseProps<HTMLDivElement, "onChange"> {
     /**
      * Name of the form element.
      *
@@ -3426,9 +3910,7 @@ export declare type HvGlobalActionsHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 
 export declare type HvGlobalActionsPosition = "sticky" | "fixed" | "relative";
 
-export declare interface HvGlobalActionsProps extends HvBaseProps<HTMLDivElement, {
-    title: any;
-}> {
+export declare interface HvGlobalActionsProps extends HvBaseProps<HTMLDivElement, "title"> {
     /** Text to display in the component. */
     title?: React.ReactNode;
     /** Denotes if this is a global or section component. */
@@ -3505,9 +3987,7 @@ export declare interface HvGridClasses {
 
 export declare type HvGridDirection = "row" | "row-reverse" | "column" | "column-reverse";
 
-export declare interface HvGridProps extends Omit<GridProps, "classes">, HvBaseProps<HTMLDivElement, {
-    color: any;
-}> {
+export declare interface HvGridProps extends Omit<GridProps, "classes">, HvBaseProps<HTMLDivElement, "color"> {
     /**
      * If `true`, the component will have the flex *container* behavior.
      * You should be wrapping *items* with a *container*.
@@ -3635,9 +4115,7 @@ export declare interface HvHeaderNavigationItemProp {
     data?: HvHeaderNavigationItemProp[];
 }
 
-export declare interface HvHeaderNavigationProps extends HvBaseProps<HTMLDivElement, {
-    onClick: any;
-}> {
+export declare interface HvHeaderNavigationProps extends HvBaseProps<HTMLDivElement, "onClick"> {
     data: HvHeaderNavigationItemProp[];
     selected?: string;
     onClick?: (event: MouseEvent_2, selection: HvHeaderNavigationItemProp) => void;
@@ -3725,7 +4203,7 @@ export declare interface HvInlineEditorClasses {
     inputBorderContainer?: string;
 }
 
-export declare interface HvInlineEditorProps extends Omit<HvBaseProps<HTMLDivElement>, "onBlur" | "onChange"> {
+export declare interface HvInlineEditorProps extends HvBaseProps<HTMLDivElement, "onBlur" | "onChange"> {
     /** The value of the form element. */
     value?: string;
     /** Whether the Edit icon should always be visible */
@@ -3805,13 +4283,7 @@ export declare interface HvInputLabels {
     searchButtonLabel?: string;
 }
 
-export declare interface HvInputProps extends HvBaseProps<HTMLElement, {
-    onChange: any;
-    onBlur: any;
-    onFocus: any;
-    onKeyDown: any;
-    color: any;
-}> {
+export declare interface HvInputProps extends HvBaseProps<HTMLElement, "onChange" | "onBlur" | "onFocus" | "onKeyDown" | "color"> {
     /** The form element name. */
     name?: string;
     /** The value of the form element. */
@@ -3984,9 +4456,7 @@ export declare interface HvKpiLabelProps {
     comparisonIndicatorInfo?: string;
 }
 
-export declare interface HvKpiProps extends HvBaseProps<HTMLDivElement, {
-    children: any;
-}> {
+export declare interface HvKpiProps extends HvBaseProps<HTMLDivElement, "children"> {
     /**
      * An Element that will be rendered to the left of the kpi indicator text.
      */
@@ -4066,9 +4536,7 @@ export declare interface HvLinkClasses {
     a?: string;
 }
 
-export declare interface HvLinkProps extends HvBaseProps<HTMLAnchorElement, {
-    onClick: any;
-}> {
+export declare interface HvLinkProps extends HvBaseProps<HTMLAnchorElement, "onClick"> {
     onClick?: (event: MouseEventHandler<HTMLAnchorElement>, data: any) => void | undefined;
     route?: string;
     data?: any;
@@ -4149,9 +4617,7 @@ export declare interface HvListItemClasses {
     withEndAdornment?: string;
 }
 
-export declare interface HvListItemProps extends HvBaseProps<HTMLLIElement, {
-    role: any;
-}> {
+export declare interface HvListItemProps extends HvBaseProps<HTMLLIElement> {
     /**
      * Overrides the implicit list item role.
      * It defaults to "option" if unspecified and the container list role is "listbox".
@@ -4206,10 +4672,7 @@ export declare interface HvListLabels {
     selectionConjunction?: string;
 }
 
-export declare interface HvListProps extends HvBaseProps<HTMLUListElement, {
-    onChange: any;
-    onClick: any;
-}> {
+export declare interface HvListProps extends HvBaseProps<HTMLUListElement, "onChange" | "onClick"> {
     /**
      * A list containing the elements to be rendered.
      *
@@ -4290,7 +4753,7 @@ export declare interface HvLoadingClasses {
     regularColor?: string;
 }
 
-export declare interface HvLoadingProps extends HvBaseProps<HTMLDivElement> {
+export declare interface HvLoadingProps extends HvBaseProps {
     /** Indicates if the component should be render in a small size. */
     small?: boolean;
     /** The label to be displayed.  */
@@ -4328,9 +4791,7 @@ export declare interface HvMarkProperty {
     label?: string;
 }
 
-declare interface HvMenuBarProps extends HvBaseProps<"div", {
-    onClick: any;
-}> {
+declare interface HvMenuBarProps extends HvBaseProps<HTMLDivElement, "onClick"> {
     data: HvHeaderNavigationItemProp[];
     type: string;
     onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;
@@ -4633,6 +5094,85 @@ export declare interface HvProviderProps {
     colorMode?: string;
 }
 
+/**
+ * **HvQueryBuilder** component allows you to create conditions and group them using logical operators.
+ * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.
+ *
+ * **PLEASE NOTE**: This component implementation is still a WIP. There might be breaking changes.
+ */
+export declare const HvQueryBuilder: ({ attributes, query, onChange, operators, combinators, maxDepth, labels, readOnly, classes, }: HvQueryBuilderProps) => JSX_2.Element;
+
+export declare interface HvQueryBuilderClasses {
+    /** Styles applied to the component root class. */
+    root?: string;
+    /** Styles applied to the top group container. */
+    topGroup?: string;
+    /** Styles applied to the sub group containers. */
+    subGroup?: string;
+    /** Styles applied to the radio button+label topGroup when the radio button is disabled. */
+    combinator?: string;
+    /** Styles applied to the multi-button combinator container on the top group. */
+    topCombinator?: string;
+    /** Styles applied to each combinator button. */
+    combinatorButton?: string;
+    /** Styles applied to the remove button.  */
+    removeButton?: string;
+    /** Styles applied to the remove button on the top group. */
+    topRemoveButton?: string;
+    /** Styles applied to the remove button when disabled on the top group. */
+    topRemoveButtonDisabled?: string;
+    /** Styles applied to the rules container. */
+    rulesContainer?: string;
+    /** Styles applied to the sub rules container. */
+    subRulesContainer?: string;
+    /** Styles applied to the action button container. */
+    actionButtonContainer?: string;
+    /** Styles applied to the top action button container. */
+    topActionButtonContainer?: string;
+    /** Styles applied to the top rules container. */
+    topRulesContainer?: string;
+    /** Styles applied to the background of buttons to remove transparency */
+    buttonBackground?: string;
+}
+
+export declare interface HvQueryBuilderProps {
+    /**
+     * Override or extend the styles applied to the component.
+     * See CSS API tab for more details.
+     */
+    classes?: HvQueryBuilderClasses;
+    attributes?: Record<string, Attribute>;
+    /**
+     * The query rules operators by attribute type and combinator.
+     */
+    operators?: Record<string, QueryOperator[]>;
+    /**
+     * The query combinators operands.
+     */
+    combinators?: QueryCombinator[];
+    /**
+     * The initial query representation.
+     */
+    query?: Query;
+    /**
+     * Callback fired when query changes.
+     * @param {Query} value - the query representation.
+     */
+    onChange?: (value: Query) => void;
+    /**
+     * Max depth of nested query groups.
+     */
+    maxDepth?: number;
+    /**
+     * An object containing all the labels.
+     */
+    labels?: QueryBuilderLabels;
+    /**
+     * A flag indicating if the Query Builder is in read only mode.
+     */
+    readOnly?: boolean;
+}
+
 /**
  * A Radio Button is a mechanism that allows user to select just an option from a group of options.
  *
@@ -4680,9 +5220,7 @@ export declare interface HvRadioGroupClasses {
     error?: string;
 }
 
-export declare interface HvRadioGroupProps extends HvBaseProps<HTMLDivElement, {
-    onChange: any;
-}> {
+export declare interface HvRadioGroupProps extends HvBaseProps<HTMLDivElement, "onChange"> {
     /**
      * The form element name.
      *
@@ -4754,10 +5292,7 @@ export declare interface HvRadioGroupProps extends HvBaseProps<HTMLDivElement, {
     classes?: HvRadioGroupClasses;
 }
 
-export declare interface HvRadioProps extends Omit<RadioProps, "onChange" | "classes">, HvBaseProps<HTMLButtonElement, {
-    onChange: any;
-    color: any;
-}> {
+export declare interface HvRadioProps extends Omit<RadioProps, "onChange" | "classes">, HvBaseProps<HTMLButtonElement, "onChange" | "color"> {
     /**
      * Class names to be applied.
      */
@@ -4934,10 +5469,7 @@ export declare interface HvScrollToHorizontalOption {
 
 export declare type HvScrollToHorizontalPositions = "sticky" | "fixed" | "relative";
 
-export declare interface HvScrollToHorizontalProps extends HvBaseProps<HTMLOListElement, {
-    onChange: any;
-    onClick: any;
-}> {
+export declare interface HvScrollToHorizontalProps extends HvBaseProps<HTMLOListElement, "onChange" | "onClick"> {
     /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */
     options: HvScrollToHorizontalOption[];
     /** True if the href location link should be applied. It will create an a element around every list item */
@@ -4994,10 +5526,7 @@ export declare interface HvScrollToVerticalOption {
 
 export declare type HvScrollToVerticalPositions = "absolute" | "fixed" | "relative";
 
-export declare interface HvScrollToVerticalProps extends HvBaseProps<HTMLOListElement, {
-    onChange: any;
-    onClick: any;
-}> {
+export declare interface HvScrollToVerticalProps extends HvBaseProps<HTMLOListElement, "onChange" | "onClick"> {
     /** An Array of Objects with Label and Value. Label is the displayed Element and Value is the local navigation location applied */
     options: HvScrollToVerticalOption[];
     /** True if the href location link should be applied. It will create an a element around every list item */
@@ -5051,9 +5580,7 @@ export declare interface HvSelectionListClasses {
     invalid?: string;
 }
 
-export declare interface HvSelectionListProps extends HvBaseProps<HTMLUListElement, {
-    onChange: any;
-}> {
+export declare interface HvSelectionListProps extends HvBaseProps<HTMLUListElement, "onChange"> {
     /** The form element name. */
     name?: string;
     /**
@@ -5164,10 +5691,7 @@ export declare interface HvSliderClasses {
     sliderContainer?: string;
 }
 
-export declare interface HvSliderProps extends HvBaseProps<HTMLDivElement, {
-    onChange: any;
-    onBlur: any;
-}> {
+export declare interface HvSliderProps extends HvBaseProps<HTMLDivElement, "onChange" | "onBlur"> {
     /**
      * The slider name.
      */
@@ -5525,10 +6049,7 @@ declare interface HvSwitchColumnCellProp {
     switchProps?: HvBaseSwitchProps;
 }
 
-export declare interface HvSwitchProps extends Omit<SwitchProps, "onChange" | "classes">, HvBaseProps<HTMLButtonElement, {
-    onChange: any;
-    color: any;
-}> {
+export declare interface HvSwitchProps extends Omit<SwitchProps, "onChange" | "classes">, HvBaseProps<HTMLButtonElement, "onChange" | "color"> {
     /**
      * Class names to be applied.
      */
@@ -5662,9 +6183,7 @@ export declare interface HvTableBodyClasses {
     root?: string;
 }
 
-export declare interface HvTableBodyProps extends HvBaseProps<HTMLTableSectionElement, {
-    children: any;
-}> {
+export declare interface HvTableBodyProps extends HvBaseProps<HTMLTableSectionElement, "children"> {
     /**
      * Content to be rendered
      */
@@ -5814,9 +6333,7 @@ export declare interface HvTableContainerClasses {
     root?: string;
 }
 
-export declare interface HvTableContainerProps extends HvBaseProps<HTMLDivElement, {
-    children: any;
-}> {
+export declare interface HvTableContainerProps extends HvBaseProps<HTMLDivElement, "children"> {
     /**
      * Content to be rendered
      */
@@ -5964,9 +6481,7 @@ export declare type HvTableHeaderRenderer<D extends object = Record<string, unkn
 
 export declare type HvTableHeadPropGetter<D extends object> = PropGetter<D, UseHvTableStickyTableHeadProps>;
 
-export declare interface HvTableHeadProps extends HvBaseProps<HTMLTableSectionElement, {
-    children: any;
-}> {
+export declare interface HvTableHeadProps extends HvBaseProps<HTMLTableSectionElement, "children"> {
     /**
      * Content to be rendered
      */
@@ -6081,9 +6596,7 @@ export declare interface HvTableRowClasses {
     variantListHead?: string;
 }
 
-export declare interface HvTableRowProps extends HvBaseProps<HTMLTableRowElement, {
-    children: any;
-}> {
+export declare interface HvTableRowProps extends HvBaseProps<HTMLTableRowElement, "children"> {
     /** Content to be rendered */
     children: React.ReactNode;
     /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to tbody. */
@@ -6106,9 +6619,7 @@ export declare interface HvTableState<D extends object = Record<string, unknown>
 
 export declare type HvTableVariant = "listrow" | "default";
 
-export declare interface HvTabProps extends Omit<TabProps, "children">, HvBaseProps<HTMLDivElement, {
-    children: any;
-}> {
+export declare interface HvTabProps extends Omit<TabProps, "children">, HvBaseProps<HTMLDivElement, "children"> {
     /** If `true`, the tab will be disabled. */
     disabled?: boolean;
     /** The icon element. */
@@ -6134,9 +6645,7 @@ export declare interface HvTabsClasses {
     scroller?: string;
 }
 
-export declare interface HvTabsProps extends TabsProps, HvBaseProps<HTMLButtonElement, {
-    onChange: any;
-}> {
+export declare interface HvTabsProps extends TabsProps, HvBaseProps<HTMLButtonElement, "onChange"> {
     /**
      * The value of the currently selected Tab. If you don't want any selected Tab, you can set this property to `false`.
      */
@@ -6179,9 +6688,7 @@ export declare interface HvTagClasses {
 
 export declare function hvTagColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer, A extends object = Record<string, unknown>>(col: HvTableColumnConfig<D, H>, valueDataKey: keyof A, colorDataKey: keyof A, textColorDataKey: keyof A, fromRowData?: boolean, tagProps?: HvTagProps): HvTableColumnConfig<D, H>;
 
-export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes">, HvBaseProps<HTMLDivElement, {
-    children: any;
-}> {
+export declare interface HvTagProps extends Omit<ChipProps, "color" | "classes">, HvBaseProps<HTMLDivElement, "children"> {
     /** Inline styles to be applied to the root element. */
     style?: CSSProperties;
     /** The label of the tag element. */
@@ -6267,14 +6774,7 @@ export declare interface HvTagsInputClasses {
     suggestionList?: string;
 }
 
-export declare interface HvTagsInputProps extends HvBaseProps<HTMLElement, {
-    onChange: any;
-    onBlur: any;
-    onFocus: any;
-    onKeyDown: any;
-    color: any;
-    defaultValue: any;
-}> {
+export declare interface HvTagsInputProps extends HvBaseProps<HTMLElement, "onChange" | "onBlur" | "onFocus" | "onKeyDown" | "color" | "defaultValue"> {
     /** The form element name. */
     name?: string;
     /** The value of the form element. */
@@ -6508,9 +7008,7 @@ export declare interface HvTimeAgoClasses {
     root?: string;
 }
 
-export declare interface HvTimeAgoProps extends HvBaseProps<HTMLElement, {
-    children: any;
-}> {
+export declare interface HvTimeAgoProps extends HvBaseProps<HTMLElement, "children"> {
     /**
      * The timestamp to format, in seconds or milliseconds.
      * Defaults to `emptyElement` if value is null or 0
@@ -6550,9 +7048,7 @@ export declare interface HvTimeAgoProps extends HvBaseProps<HTMLElement, {
 
 export declare const HvToggleButton: ForwardRefExoticComponent<HvToggleButtonProps & RefAttributes<HTMLButtonElement>>;
 
-export declare interface HvToggleButtonProps extends HvBaseProps<HTMLButtonElement, {
-    onClick: any;
-}> {
+export declare interface HvToggleButtonProps extends HvBaseProps<HTMLButtonElement, "onClick"> {
     /** When uncontrolled, defines the initial selected state. */
     defaultSelected?: boolean;
     /** Defines if the button is selected. When defined the button state becomes controlled. */
@@ -6686,9 +7182,7 @@ export declare interface HvTypographyClasses {
 
 export declare type HvTypographyLegacyVariants = "5xlTitle" | "4xlTitle" | "3xlTitle" | "xxlTitle" | "xlTitle" | "lTitle" | "mTitle" | "sTitle" | "xsTitle" | "xxsTitle" | "sectionTitle" | "highlightText" | "normalText" | "placeholderText" | "link" | "disabledText" | "selectedNavText" | "vizText" | "vizTextDisabled" | "xsInlineLink";
 
-export declare interface HvTypographyProps extends Omit<AllHTMLAttributes<HTMLElement>, "disabled">, HvBaseProps<HTMLElement, {
-    disabled: any;
-}> {
+export declare interface HvTypographyProps extends Omit<AllHTMLAttributes<HTMLElement>, "disabled">, HvBaseProps<HTMLElement> {
     component?: React.ReactNode | React.ElementType;
     /** Use the variant prop to change the visual style of the Typography. */
     variant?: HvTypographyVariants | HvTypographyLegacyVariants;
@@ -6961,9 +7455,7 @@ export declare interface HvVerticalNavigationTreeClasses {
     popup?: string;
 }
 
-export declare interface HvVerticalNavigationTreeProps extends HvBaseProps<HTMLDivElement, {
-    onChange: any;
-}> {
+export declare interface HvVerticalNavigationTreeProps extends HvBaseProps<HTMLDivElement, "onChange"> {
     /**
      * Id to be applied to the root node.
      */
@@ -7279,11 +7771,46 @@ declare type IdType<D> = StringKey<D> | string;
 
 export declare const increaseSize: (size: string) => "S" | "M" | "L" | "XL";
 
-export declare const infoMessageClasses: HvInfoMessageClasses;
+export declare const infoMessageClasses: {
+    root: "HvInfoMessage-root";
+    gutter: "HvInfoMessage-gutter";
+    infoDisabled: "HvInfoMessage-infoDisabled";
+};
 
-export declare const inlineEditorClasses: HvInlineEditorClasses;
+export declare const inlineEditorClasses: {
+    button: "HvInlineEditor-button";
+    input: "HvInlineEditor-input";
+    text: "HvInlineEditor-text";
+    icon: "HvInlineEditor-icon";
+    root: "HvInlineEditor-root";
+    inputRoot: "HvInlineEditor-inputRoot";
+    inputBorderContainer: "HvInlineEditor-inputBorderContainer";
+    largeText: "HvInlineEditor-largeText";
+    textEmpty: "HvInlineEditor-textEmpty";
+    iconVisible: "HvInlineEditor-iconVisible";
+};
 
-export declare const inputClasses: HvInputClasses;
+export declare const inputClasses: {
+    input: "HvInput-input";
+    label: "HvInput-label";
+    icon: "HvInput-icon";
+    error: "HvInput-error";
+    root: "HvInput-root";
+    inputRoot: "HvInput-inputRoot";
+    inputRootFocused: "HvInput-inputRootFocused";
+    inputRootDisabled: "HvInput-inputRootDisabled";
+    inputRootMultiline: "HvInput-inputRootMultiline";
+    inputBorderContainer: "HvInput-inputBorderContainer";
+    description: "HvInput-description";
+    labelContainer: "HvInput-labelContainer";
+    hasSuggestions: "HvInput-hasSuggestions";
+    adornmentsBox: "HvInput-adornmentsBox";
+    adornmentButton: "HvInput-adornmentButton";
+    iconClear: "HvInput-iconClear";
+    inputExtension: "HvInput-inputExtension";
+    suggestionsContainer: "HvInput-suggestionsContainer";
+    suggestionList: "HvInput-suggestionList";
+};
 
 export declare const isBrowser: (browsers: any) => boolean | null;
 
@@ -7411,33 +7938,95 @@ export declare const keyboardCodes: Readonly<{
     singleQuote: 222;
 }>;
 
-export declare const kpiClasses: HvKpiClasses;
+export declare const kpiClasses: {
+    root: "HvKpi-root";
+    visualIndicatorContainer: "HvKpi-visualIndicatorContainer";
+    comparisons: "HvKpi-comparisons";
+    comparisonContainer: "HvKpi-comparisonContainer";
+    comparisonComposition: "HvKpi-comparisonComposition";
+    indicatorsContainer: "HvKpi-indicatorsContainer";
+    indicatorText: "HvKpi-indicatorText";
+    indicatorUnit: "HvKpi-indicatorUnit";
+    spacingToTheRight: "HvKpi-spacingToTheRight";
+    trendLine: "HvKpi-trendLine";
+};
 
-export declare const labelClasses: HvLabelClasses;
+export declare const labelClasses: {
+    root: "HvLabel-root";
+    labelDisabled: "HvLabel-labelDisabled";
+    childGutter: "HvLabel-childGutter";
+};
 
-export declare const leftControlClasses: HvLeftControlClasses;
+export declare const leftControlClasses: {
+    root: "HvLeftControl-root";
+};
 
-export declare const linkClasses: HvLinkClasses;
+export declare const linkClasses: {
+    a: "HvLink-a";
+};
 
-export declare const listClasses: HvListClasses;
+export declare const listClasses: {
+    link: "HvList-link";
+    root: "HvList-root";
+    item: "HvList-item";
+    virtualizedRoot: "HvList-virtualizedRoot";
+    selectorRoot: "HvList-selectorRoot";
+    selectorContainer: "HvList-selectorContainer";
+    box: "HvList-box";
+    truncate: "HvList-truncate";
+    itemSelector: "HvList-itemSelector";
+    selectAllSelector: "HvList-selectAllSelector";
+};
 
-export declare const listContainerClasses: HvListContainerClasses;
+export declare const listContainerClasses: {
+    root: "HvListContainer-root";
+};
 
-export declare const listItemClasses: HvListItemClasses;
+export declare const listItemClasses: {
+    condensed: "HvListItem-condensed";
+    disabled: "HvListItem-disabled";
+    selected: "HvListItem-selected";
+    focus: "HvListItem-focus";
+    root: "HvListItem-root";
+    interactive: "HvListItem-interactive";
+    endAdornment: "HvListItem-endAdornment";
+    startAdornment: "HvListItem-startAdornment";
+    gutters: "HvListItem-gutters";
+    withStartAdornment: "HvListItem-withStartAdornment";
+    withEndAdornment: "HvListItem-withEndAdornment";
+};
 
-export declare const loadingClasses: HvLoadingClasses;
+export declare const loadingClasses: {
+    label: "HvLoading-label";
+    small: "HvLoading-small";
+    hidden: "HvLoading-hidden";
+    overlay: "HvLoading-overlay";
+    blur: "HvLoading-blur";
+    root: "HvLoading-root";
+    regular: "HvLoading-regular";
+    regularColor: "HvLoading-regularColor";
+    smallColor: "HvLoading-smallColor";
+    barContainer: "HvLoading-barContainer";
+    loadingBar: "HvLoading-loadingBar";
+};
 
-export declare const loginClasses: HvLoginClasses;
+export declare const loginClasses: {
+    root: "HvLogin-root";
+    formContainer: "HvLogin-formContainer";
+};
 
-declare interface MenuItemProps extends HvBaseProps<HTMLDivElement, {
-    onClick: any;
-}> {
+declare interface MenuItemProps extends HvBaseProps<HTMLDivElement, "onClick"> {
     item: HvHeaderNavigationItemProp;
     type?: string;
     onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;
 }
 
-export declare const multiButtonClasses: HvMultiButtonClasses;
+export declare const multiButtonClasses: {
+    button: "HvMultiButton-button";
+    vertical: "HvMultiButton-vertical";
+    selected: "HvMultiButton-selected";
+    root: "HvMultiButton-root";
+};
 
 export declare const multiSelectionEventHandler: (evt: any, index: any, selectionAnchor: any, allValues: any, selectedState: any, selectionCheck: any) => any[];
 
@@ -7484,6 +8073,11 @@ export declare type NavigationMode = "treeview" | "navigation" | "slider";
 
 export declare const normalizeProgressBar: (value: number, max: number) => number;
 
+declare interface NumericRange {
+    from: number | string;
+    to: number | string;
+}
+
 export declare const outlineStyles: {
     outlineColor: string;
     outlineStyle: string;
@@ -7492,11 +8086,31 @@ export declare const outlineStyles: {
     boxShadow: string;
 };
 
-export declare const overflowTooltipClasses: HvOverflowTooltipClasses;
+export declare const overflowTooltipClasses: {
+    root: "HvOverflowTooltip-root";
+    tooltipAnchor: "HvOverflowTooltip-tooltipAnchor";
+    tooltipAnchorParagraph: "HvOverflowTooltip-tooltipAnchorParagraph";
+    tooltipData: "HvOverflowTooltip-tooltipData";
+};
 
-export declare const paginationClasses: HvPaginationClasses;
+export declare const paginationClasses: {
+    icon: "HvPagination-icon";
+    root: "HvPagination-root";
+    iconContainer: "HvPagination-iconContainer";
+    pageSizeOptions: "HvPagination-pageSizeOptions";
+    pageSizeOptionsSelect: "HvPagination-pageSizeOptionsSelect";
+    pageSizeTextContainer: "HvPagination-pageSizeTextContainer";
+    pageNavigator: "HvPagination-pageNavigator";
+    pageInfo: "HvPagination-pageInfo";
+    pageJump: "HvPagination-pageJump";
+    pageSizeInput: "HvPagination-pageSizeInput";
+    pageSizeInputRoot: "HvPagination-pageSizeInputRoot";
+    pageSizeInputContainer: "HvPagination-pageSizeInputContainer";
+};
 
-export declare const panelClasses: HvPanelClasses;
+export declare const panelClasses: {
+    root: "HvPanel-root";
+};
 
 declare type PolymorphicComponent<C extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & AsProp<C>> & Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
 
@@ -7517,13 +8131,191 @@ export declare function prepareRow(row: any, { instance }: {
  */
 export declare const processThemes: (themesList?: (HvTheme | HvThemeStructure)[]) => (HvTheme | HvThemeStructure)[];
 
-export declare const progressBarClasses: HvProgressBarClasses;
+export declare const progressBarClasses: {
+    progress: "HvProgressBar-progress";
+    root: "HvProgressBar-root";
+    progressBar: "HvProgressBar-progressBar";
+    progressBarLabel: "HvProgressBar-progressBarLabel";
+    progressContainer: "HvProgressBar-progressContainer";
+    progressDone: "HvProgressBar-progressDone";
+    progressBarContainer: "HvProgressBar-progressBarContainer";
+    progressError: "HvProgressBar-progressError";
+};
 
 declare type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
 
-export declare const radioClasses: HvRadioClasses;
+declare interface Query {
+    id?: number;
+    combinator: string;
+    rules: Array<QueryRule>;
+}
+
+export declare const queryBuilderClasses: {
+    root: "HvQueryBuilder-root";
+    combinator: "HvQueryBuilder-combinator";
+    topGroup: "HvQueryBuilder-topGroup";
+    subGroup: "HvQueryBuilder-subGroup";
+    topCombinator: "HvQueryBuilder-topCombinator";
+    combinatorButton: "HvQueryBuilder-combinatorButton";
+    removeButton: "HvQueryBuilder-removeButton";
+    topRemoveButton: "HvQueryBuilder-topRemoveButton";
+    topRemoveButtonDisabled: "HvQueryBuilder-topRemoveButtonDisabled";
+    rulesContainer: "HvQueryBuilder-rulesContainer";
+    subRulesContainer: "HvQueryBuilder-subRulesContainer";
+    actionButtonContainer: "HvQueryBuilder-actionButtonContainer";
+    topActionButtonContainer: "HvQueryBuilder-topActionButtonContainer";
+    topRulesContainer: "HvQueryBuilder-topRulesContainer";
+    buttonBackground: "HvQueryBuilder-buttonBackground";
+};
 
-export declare const radioGroupClasses: HvRadioGroupClasses;
+declare interface QueryBuilderLabels {
+    query?: {
+        delete?: {
+            ariaLabel: string;
+            tooltip?: string;
+        } & DialogLabels;
+        addRule?: {
+            label: string;
+        };
+        addGroup?: {
+            label: string;
+        };
+    };
+    rule: {
+        attribute: {
+            exists: string;
+            label: string;
+            placeholder: string;
+        };
+        operator: {
+            label: string;
+            placeholder: string;
+        };
+        value: {
+            distance: {
+                label: string;
+                placeholder?: string;
+                connectorText: string;
+                button: string;
+                validation: {
+                    required: string;
+                    invalid: string;
+                };
+            };
+            text: {
+                label: string;
+                placeholder: string;
+                validation: {
+                    required: string;
+                };
+            };
+            boolean: {
+                label: string;
+                placeholder: string;
+                options: Record<string, string>;
+            };
+            numeric: {
+                label: string;
+                placeholder: string;
+                validation: {
+                    required: string;
+                    invalid: string;
+                    equal: string;
+                    greaterThan: string;
+                };
+                range: {
+                    leftLabel: string;
+                    rightLabel: string;
+                };
+            };
+            datetime: {
+                dateLabel: string;
+                datePlaceholder: string;
+                timeLabel: string;
+                timePlaceholder: string;
+                startDateLabel: string;
+                startDatePlaceholder: string;
+                startTimeLabel: string;
+                startTimePlaceholder: string;
+                endDateLabel: string;
+                endDatePlaceholder: string;
+                endTimeLabel: string;
+                endTimePlaceholder: string;
+                validation: {
+                    required: string;
+                    invalidInterval: string;
+                };
+            };
+        };
+        delete: {
+            ariaLabel: string;
+            tooltip?: string;
+        } & DialogLabels;
+    };
+    group: {
+        delete: {
+            ariaLabel: string;
+            tooltip?: string;
+        } & DialogLabels;
+        reset: {
+            ariaLabel: string;
+            tooltip?: string;
+        } & DialogLabels;
+        addRule: {
+            label: string;
+        };
+        addGroup: {
+            label: string;
+        };
+    };
+    empty: {
+        title: string;
+        createCondition: string;
+        createGroup: string;
+        spacer: string;
+    };
+}
+
+declare interface QueryCombinator {
+    operand: string;
+    label: string;
+}
+
+declare interface QueryOperator {
+    operator: string;
+    label: string;
+    combinators: string[];
+}
+
+declare interface QueryRule {
+    id?: number | string;
+    attribute?: string;
+    operator?: string;
+    value?: QueryRuleValue;
+}
+
+declare type QueryRuleValue = string | number | boolean | NumericRange | DateTimeStrings | DateTimeRange;
+
+export declare const radioClasses: {
+    label: "HvRadio-label";
+    radio: "HvRadio-radio";
+    container: "HvRadio-container";
+    disabled: "HvRadio-disabled";
+    root: "HvRadio-root";
+    focusVisible: "HvRadio-focusVisible";
+    invalidContainer: "HvRadio-invalidContainer";
+    invalidRadio: "HvRadio-invalidRadio";
+};
+
+export declare const radioGroupClasses: {
+    label: "HvRadioGroup-label";
+    group: "HvRadioGroup-group";
+    horizontal: "HvRadioGroup-horizontal";
+    vertical: "HvRadioGroup-vertical";
+    error: "HvRadioGroup-error";
+    invalid: "HvRadioGroup-invalid";
+    root: "HvRadioGroup-root";
+};
 
 export declare class Random {
     i: number;
@@ -7535,13 +8327,36 @@ export declare class Random {
 
 export declare function reducer(state: any, action: any, previousState: any, instance: any): any;
 
-export declare const rightControlClasses: HvRightControlClasses;
+export declare const rightControlClasses: {
+    root: "HvRightControl-root";
+    sortDropdown: "HvRightControl-sortDropdown";
+};
 
-export declare const scrollToHorizontalClasses: HvScrollToHorizontalClasses;
+export declare const scrollToHorizontalClasses: {
+    selected: "HvScrollToHorizontal-selected";
+    root: "HvScrollToHorizontal-root";
+    positionFixed: "HvScrollToHorizontal-positionFixed";
+    positionSticky: "HvScrollToHorizontal-positionSticky";
+    notSelectedRoot: "HvScrollToHorizontal-notSelectedRoot";
+    notSelected: "HvScrollToHorizontal-notSelected";
+};
 
-export declare const scrollToVerticalClasses: HvScrollToVerticalClasses;
+export declare const scrollToVerticalClasses: {
+    root: "HvScrollToVertical-root";
+    positionFixed: "HvScrollToVertical-positionFixed";
+    positionAbsolute: "HvScrollToVertical-positionAbsolute";
+};
 
-export declare const selectionListClasses: HvSelectionListClasses;
+export declare const selectionListClasses: {
+    label: "HvSelectionList-label";
+    listbox: "HvSelectionList-listbox";
+    horizontal: "HvSelectionList-horizontal";
+    vertical: "HvSelectionList-vertical";
+    error: "HvSelectionList-error";
+    invalid: "HvSelectionList-invalid";
+    root: "HvSelectionList-root";
+    description: "HvSelectionList-description";
+};
 
 /**
  * Sets the element attributes and style for a theme and color mode.
@@ -7552,61 +8367,320 @@ export declare const setId: (...args: any[]) => string | undefined;
 
 export declare const setUid: (id: any, suffix: any) => string | undefined;
 
-export declare const sliderClasses: HvSliderClasses;
+export declare const sliderClasses: {
+    label: "HvSlider-label";
+    error: "HvSlider-error";
+    root: "HvSlider-root";
+    rootDisabled: "HvSlider-rootDisabled";
+    labelContainer: "HvSlider-labelContainer";
+    rootRange: "HvSlider-rootRange";
+    handle: "HvSlider-handle";
+    handleContainer: "HvSlider-handleContainer";
+    sliderBase: "HvSlider-sliderBase";
+    sliderRoot: "HvSlider-sliderRoot";
+    trackDragging: "HvSlider-trackDragging";
+    trackStandBy: "HvSlider-trackStandBy";
+    handleHiddenContainer: "HvSlider-handleHiddenContainer";
+    handleContainerDisabled: "HvSlider-handleContainerDisabled";
+    labelIncluded: "HvSlider-labelIncluded";
+    onlyInput: "HvSlider-onlyInput";
+    sliderTooltip: "HvSlider-sliderTooltip";
+    sliderContainer: "HvSlider-sliderContainer";
+};
 
-export declare const snackbarClasses: HvSnackbarClasses;
+export declare const snackbarClasses: {
+    root: "HvSnackbar-root";
+    anchorOriginTopCenter: "HvSnackbar-anchorOriginTopCenter";
+    anchorOriginBottomCenter: "HvSnackbar-anchorOriginBottomCenter";
+    anchorOriginTopRight: "HvSnackbar-anchorOriginTopRight";
+    anchorOriginBottomRight: "HvSnackbar-anchorOriginBottomRight";
+    anchorOriginTopLeft: "HvSnackbar-anchorOriginTopLeft";
+    anchorOriginBottomLeft: "HvSnackbar-anchorOriginBottomLeft";
+};
 
-export declare const snackbarContentClasses: HvSnackbarContentClasses;
+export declare const snackbarContentClasses: {
+    default: "HvSnackbar-Content-default";
+    action: "HvSnackbar-Content-action";
+    error: "HvSnackbar-Content-error";
+    warning: "HvSnackbar-Content-warning";
+    success: "HvSnackbar-Content-success";
+    root: "HvSnackbar-Content-root";
+    message: "HvSnackbar-Content-message";
+    messageSpan: "HvSnackbar-Content-messageSpan";
+    iconVariant: "HvSnackbar-Content-iconVariant";
+    messageText: "HvSnackbar-Content-messageText";
+};
 
 export declare type Spacing = "sm" | "md" | "lg" | "xl";
 
-export declare const stackClasses: HvStackClasses;
+export declare const stackClasses: {
+    root: "HvStack-root";
+};
 
 declare type StringKey<D> = Extract<keyof D, string>;
 
-export declare const suggestionsClasses: HvSuggestionsClasses;
+export declare const suggestionsClasses: {
+    list: "HvSuggestions-list";
+    root: "HvSuggestions-root";
+    popper: "HvSuggestions-popper";
+};
 
-export declare const switchClasses: HvSwitchClasses;
+export declare const switchClasses: {
+    label: "HvSwitch-label";
+    error: "HvSwitch-error";
+    root: "HvSwitch-root";
+    switchContainer: "HvSwitch-switchContainer";
+    invalidSwitch: "HvSwitch-invalidSwitch";
+};
 
 declare type SxProps = React.CSSProperties | ((theme: any) => React.CSSProperties);
 
-export declare const tabClasses: HvTabClasses;
+export declare const tabClasses: {
+    disabled: "HvTab-disabled";
+    selected: "HvTab-selected";
+    root: "HvTab-root";
+    focusVisible: "HvTab-focusVisible";
+};
 
-export declare const tableBodyClasses: HvTableBodyClasses;
+export declare const tableBodyClasses: {
+    root: "HvTableBody-root";
+};
 
-export declare const tableCellClasses: HvTableCellClasses;
+export declare const tableCellClasses: {
+    body: "HvTableCell-body";
+    footer: "HvTableCell-footer";
+    head: "HvTableCell-head";
+    root: "HvTableCell-root";
+    resizable: "HvTableCell-resizable";
+    alignLeft: "HvTableCell-alignLeft";
+    alignCenter: "HvTableCell-alignCenter";
+    alignRight: "HvTableCell-alignRight";
+    alignJustify: "HvTableCell-alignJustify";
+    sorted: "HvTableCell-sorted";
+    stickyColumn: "HvTableCell-stickyColumn";
+    stickyColumnMostLeft: "HvTableCell-stickyColumnMostLeft";
+    stickyColumnLeastRight: "HvTableCell-stickyColumnLeastRight";
+    groupColumnMostLeft: "HvTableCell-groupColumnMostLeft";
+    groupColumnMostRight: "HvTableCell-groupColumnMostRight";
+    resizing: "HvTableCell-resizing";
+    sortIcon: "HvTableCell-sortIcon";
+    variantCheckbox: "HvTableCell-variantCheckbox";
+    variantExpand: "HvTableCell-variantExpand";
+    variantActions: "HvTableCell-variantActions";
+    variantNone: "HvTableCell-variantNone";
+    variantList: "HvTableCell-variantList";
+    variantListactions: "HvTableCell-variantListactions";
+    variantListcheckbox: "HvTableCell-variantListcheckbox";
+    variantListHead: "HvTableCell-variantListHead";
+};
 
-export declare const tableClasses: HvTableClasses;
+export declare const tableClasses: {
+    root: "HvTable-root";
+    stickyHeader: "HvTable-stickyHeader";
+    stickyColumns: "HvTable-stickyColumns";
+    listRow: "HvTable-listRow";
+};
 
-export declare const tableContainerClasses: HvTableContainerClasses;
+export declare const tableContainerClasses: {
+    root: "HvTableContainer-root";
+};
 
-export declare const tableHeadClasses: HvTableHeadClasses;
+export declare const tableHeadClasses: {
+    root: "HvTableHead-root";
+    stickyHeader: "HvTableHead-stickyHeader";
+};
 
-export declare const tableHeaderClasses: HvTableHeaderClasses;
+export declare const tableHeaderClasses: {
+    body: "HvTableHeader-body";
+    footer: "HvTableHeader-footer";
+    head: "HvTableHeader-head";
+    resizer: "HvTableHeader-resizer";
+    root: "HvTableHeader-root";
+    resizable: "HvTableHeader-resizable";
+    alignLeft: "HvTableHeader-alignLeft";
+    alignCenter: "HvTableHeader-alignCenter";
+    alignRight: "HvTableHeader-alignRight";
+    alignJustify: "HvTableHeader-alignJustify";
+    sortable: "HvTableHeader-sortable";
+    sorted: "HvTableHeader-sorted";
+    stickyColumn: "HvTableHeader-stickyColumn";
+    stickyColumnMostLeft: "HvTableHeader-stickyColumnMostLeft";
+    stickyColumnLeastRight: "HvTableHeader-stickyColumnLeastRight";
+    groupColumnMostLeft: "HvTableHeader-groupColumnMostLeft";
+    groupColumnMostRight: "HvTableHeader-groupColumnMostRight";
+    resizing: "HvTableHeader-resizing";
+    sortIcon: "HvTableHeader-sortIcon";
+    variantCheckbox: "HvTableHeader-variantCheckbox";
+    variantExpand: "HvTableHeader-variantExpand";
+    variantActions: "HvTableHeader-variantActions";
+    variantNone: "HvTableHeader-variantNone";
+    variantList: "HvTableHeader-variantList";
+    headerContent: "HvTableHeader-headerContent";
+    headerText: "HvTableHeader-headerText";
+    headerParagraph: "HvTableHeader-headerParagraph";
+    sortableHeaderText: "HvTableHeader-sortableHeaderText";
+    sortButton: "HvTableHeader-sortButton";
+    alignFlexLeft: "HvTableHeader-alignFlexLeft";
+    alignFlexRight: "HvTableHeader-alignFlexRight";
+    alignFlexCenter: "HvTableHeader-alignFlexCenter";
+    alignFlexJustify: "HvTableHeader-alignFlexJustify";
+};
 
-export declare const tableRowClasses: HvTableRowClasses;
+export declare const tableRowClasses: {
+    body: "HvTableRow-body";
+    footer: "HvTableRow-footer";
+    head: "HvTableRow-head";
+    expanded: "HvTableRow-expanded";
+    selected: "HvTableRow-selected";
+    root: "HvTableRow-root";
+    hover: "HvTableRow-hover";
+    striped: "HvTableRow-striped";
+    variantList: "HvTableRow-variantList";
+    variantListHead: "HvTableRow-variantListHead";
+};
 
-export declare const tabsClasses: HvTabsClasses;
+export declare const tabsClasses: {
+    root: "HvTabs-root";
+    indicator: "HvTabs-indicator";
+    flexContainer: "HvTabs-flexContainer";
+    scroller: "HvTabs-scroller";
+};
 
-export declare const tagClasses: HvTagClasses;
+export declare const tagClasses: {
+    button: "HvTag-button";
+    label: "HvTag-label";
+    disabled: "HvTag-disabled";
+    root: "HvTag-root";
+    focusVisible: "HvTag-focusVisible";
+    clickable: "HvTag-clickable";
+    deleteIcon: "HvTag-deleteIcon";
+    tagButton: "HvTag-tagButton";
+    chipRoot: "HvTag-chipRoot";
+    categorical: "HvTag-categorical";
+    categoricalFocus: "HvTag-categoricalFocus";
+    categoricalDisabled: "HvTag-categoricalDisabled";
+    disabledDeleteIcon: "HvTag-disabledDeleteIcon";
+};
 
-export declare const tagsInputClasses: HvTagsInputClasses;
+export declare const tagsInputClasses: {
+    input: "HvTagsInput-input";
+    label: "HvTagsInput-label";
+    disabled: "HvTagsInput-disabled";
+    error: "HvTagsInput-error";
+    invalid: "HvTagsInput-invalid";
+    root: "HvTagsInput-root";
+    resizable: "HvTagsInput-resizable";
+    description: "HvTagsInput-description";
+    labelContainer: "HvTagsInput-labelContainer";
+    inputExtension: "HvTagsInput-inputExtension";
+    suggestionsContainer: "HvTagsInput-suggestionsContainer";
+    suggestionList: "HvTagsInput-suggestionList";
+    chipRoot: "HvTagsInput-chipRoot";
+    listItemGutters: "HvTagsInput-listItemGutters";
+    listItemRoot: "HvTagsInput-listItemRoot";
+    characterCounter: "HvTagsInput-characterCounter";
+    tagsList: "HvTagsInput-tagsList";
+    tagInputContainerRoot: "HvTagsInput-tagInputContainerRoot";
+    tagInputRoot: "HvTagsInput-tagInputRoot";
+    tagSelected: "HvTagsInput-tagSelected";
+    tagInputBorderContainer: "HvTagsInput-tagInputBorderContainer";
+    tagInputRootFocused: "HvTagsInput-tagInputRootFocused";
+    tagInputRootEmpty: "HvTagsInput-tagInputRootEmpty";
+    singleLine: "HvTagsInput-singleLine";
+};
 
-export declare const textAreaClasses: HvTextAreaClasses;
+export declare const textAreaClasses: {
+    input: "HvTextArea-input";
+    label: "HvTextArea-label";
+    disabled: "HvTextArea-disabled";
+    error: "HvTextArea-error";
+    invalid: "HvTextArea-invalid";
+    baseInput: "HvTextArea-baseInput";
+    root: "HvTextArea-root";
+    resizable: "HvTextArea-resizable";
+    inputResizable: "HvTextArea-inputResizable";
+    description: "HvTextArea-description";
+    labelContainer: "HvTextArea-labelContainer";
+    characterCounter: "HvTextArea-characterCounter";
+};
 
 export { theme }
 
 export { themes }
 
-export declare const timeAgoClasses: HvTimeAgoClasses;
+export declare const timeAgoClasses: {
+    root: "HvTimeAgo-root";
+};
 
-export declare const tooltipClasses: HvTooltipClasses;
+export declare const tooltipClasses: {
+    title: "HvTooltip-title";
+    color: "HvTooltip-color";
+    separator: "HvTooltip-separator";
+    tooltip: "HvTooltip-tooltip";
+    values: "HvTooltip-values";
+    root: "HvTooltip-root";
+    popper: "HvTooltip-popper";
+    tooltipMulti: "HvTooltip-tooltipMulti";
+    valuesContainer: "HvTooltip-valuesContainer";
+    separatorColor: "HvTooltip-separatorColor";
+    valueWrapper: "HvTooltip-valueWrapper";
+};
 
-export declare const treeViewClasses: HvVerticalNavigationTreeViewClasses;
+export declare const treeViewClasses: {
+    root: "HvVerticalNavigationTreeView-root";
+};
 
-export declare const treeViewItemClasses: HvVerticalNavigationTreeViewItemClasses;
+export declare const treeViewItemClasses: {
+    link: "HvVerticalNavigationTreeViewItem-link";
+    content: "HvVerticalNavigationTreeViewItem-content";
+    unselectable: "HvVerticalNavigationTreeViewItem-unselectable";
+    group: "HvVerticalNavigationTreeViewItem-group";
+    hide: "HvVerticalNavigationTreeViewItem-hide";
+    expanded: "HvVerticalNavigationTreeViewItem-expanded";
+    disabled: "HvVerticalNavigationTreeViewItem-disabled";
+    selected: "HvVerticalNavigationTreeViewItem-selected";
+    node: "HvVerticalNavigationTreeViewItem-node";
+    focused: "HvVerticalNavigationTreeViewItem-focused";
+    selectable: "HvVerticalNavigationTreeViewItem-selectable";
+    collapsed: "HvVerticalNavigationTreeViewItem-collapsed";
+    minimized: "HvVerticalNavigationTreeViewItem-minimized";
+    expandable: "HvVerticalNavigationTreeViewItem-expandable";
+    unselected: "HvVerticalNavigationTreeViewItem-unselected";
+};
 
-export declare const typographyClasses: HvTypographyClasses;
+export declare const typographyClasses: {
+    body: "HvTypography-body";
+    label: "HvTypography-label";
+    link: "HvTypography-link";
+    display: "HvTypography-display";
+    noWrap: "HvTypography-noWrap";
+    title1: "HvTypography-title1";
+    title2: "HvTypography-title2";
+    title3: "HvTypography-title3";
+    title4: "HvTypography-title4";
+    caption1: "HvTypography-caption1";
+    caption2: "HvTypography-caption2";
+    "5xlTitle": "HvTypography-5xlTitle";
+    "4xlTitle": "HvTypography-4xlTitle";
+    xxlTitle: "HvTypography-xxlTitle";
+    lTitle: "HvTypography-lTitle";
+    sTitle: "HvTypography-sTitle";
+    xxsTitle: "HvTypography-xxsTitle";
+    sectionTitle: "HvTypography-sectionTitle";
+    placeholderText: "HvTypography-placeholderText";
+    disabledText: "HvTypography-disabledText";
+    selectedNavText: "HvTypography-selectedNavText";
+    vizTextDisabled: "HvTypography-vizTextDisabled";
+    xsInlineLink: "HvTypography-xsInlineLink";
+    root: "HvTypography-root";
+    "3xlTitle": "HvTypography-3xlTitle";
+    xlTitle: "HvTypography-xlTitle";
+    mTitle: "HvTypography-mTitle";
+    xsTitle: "HvTypography-xsTitle";
+    highlightText: "HvTypography-highlightText";
+    normalText: "HvTypography-normalText";
+    vizText: "HvTypography-vizText";
+};
 
 export declare type UseBulkActionsProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {
     pluginName: string;
@@ -7923,7 +8997,11 @@ export declare const useWidth: () => string;
 
 declare type ValueOf<T> = T[keyof T];
 
-export declare const verticalNavigationClasses: HvVerticalNavigationClasses;
+export declare const verticalNavigationClasses: {
+    slider: "HvVerticalNavigation-slider";
+    root: "HvVerticalNavigation-root";
+    collapsed: "HvVerticalNavigation-collapsed";
+};
 
 export declare const VerticalNavigationContext: Context<VerticalNavigationContextValue>;
 
@@ -7944,17 +9022,42 @@ declare interface VerticalNavigationContextValue {
     hasAnyChildWithData?: boolean;
 }
 
-export declare const verticalNavigationHeaderClasses: HvVerticalNavigationHeaderClasses;
+export declare const verticalNavigationHeaderClasses: {
+    root: "HvVerticalNavigationHeader-root";
+    minimized: "HvVerticalNavigationHeader-minimized";
+};
 
-export declare const verticalNavigationSliderClasses: HvVerticalNavigationSliderClasses;
+export declare const verticalNavigationSliderClasses: {
+    root: "HvVerticalNavigationSlider-root";
+    listItemSelected: "HvVerticalNavigationSlider-listItemSelected";
+};
 
-export declare const verticalNavigationTreeClasses: HvVerticalNavigationTreeClasses;
+export declare const verticalNavigationTreeClasses: {
+    list: "HvVerticalNavigationTree-list";
+    popup: "HvVerticalNavigationTree-popup";
+    root: "HvVerticalNavigationTree-root";
+    collapsed: "HvVerticalNavigationTree-collapsed";
+    listItem: "HvVerticalNavigationTree-listItem";
+};
 
-export declare const verticalScrollListItemClasses: HvVerticalScrollListItemClasses;
+export declare const verticalScrollListItemClasses: {
+    button: "HvVerticalScrollListItem-button";
+    text: "HvVerticalScrollListItem-text";
+    root: "HvVerticalScrollListItem-root";
+    notSelected: "HvVerticalScrollListItem-notSelected";
+};
 
 export declare type VisibilitySelectorActions = "previous_month" | "next_month" | "previous_year" | "next_year" | "month" | "month_year";
 
-export declare const warningTextClasses: HvWarningTextClasses;
+export declare const warningTextClasses: {
+    show: "HvWarningText-show";
+    root: "HvWarningText-root";
+    hideText: "HvWarningText-hideText";
+    defaultIcon: "HvWarningText-defaultIcon";
+    warningText: "HvWarningText-warningText";
+    topGutter: "HvWarningText-topGutter";
+    topBorder: "HvWarningText-topBorder";
+};
 
 export declare const withId: (Component: any) => {
     ({ id, ...others }: WithIdProps): JSX_2.Element;