npm - @hitachivantara/uikit-react-core - Versions diffs - 5.17.0 → 5.18.1 - Mend

@hitachivantara/uikit-react-core 5.17.0 → 5.18.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (523) hide show

package/dist/types/index.d.ts CHANGED Viewed

@@ -10,8 +10,10 @@ import { Cell } from 'react-table';
 import { ChangeEvent } from 'react';
 import { CheckboxProps } from '@mui/material';
 import { ChipProps } from '@mui/material/Chip';
+import { ClassNameMap } from '@mui/material';
 import { ColumnInstance } from 'react-table';
 import { ColumnInterface } from 'react-table';
+import type { CombinedClassKey } from 'notistack';
 import { ComponentProps } from 'react';
 import { ContainerProps } from '@mui/material/Container';
 import type { Context } from 'react';
@@ -47,16 +49,17 @@ import { IconBaseProps } from '@hitachivantara/uikit-react-icons';
 import { IdType as IdType_2 } from 'react-table';
 import { ImgHTMLAttributes } from 'react';
 import { InputBaseComponentProps } from '@mui/material';
+import { InputBaseProps } from '@mui/material';
 import { InputProps } from '@mui/material';
 import type { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
 import { PopperProps } from '@mui/material';
-import type { Property } from 'csstype';
 import { PropGetter } from 'react-table';
 import { RadioProps } from '@mui/material';
 import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
+import { ReactNode } from 'react';
 import { ReducerTableState } from 'react-table';
 import type { RefAttributes } from 'react';
 import { RefObject } from 'react';
@@ -307,16 +310,16 @@ export declare const baseInputClasses: {
     invalid: "HvBaseInput-invalid";
     root: "HvBaseInput-root";
     resizable: "HvBaseInput-resizable";
+    inputBorderContainer: "HvBaseInput-inputBorderContainer";
+    inputRootInvalid: "HvBaseInput-inputRootInvalid";
+    inputRootReadOnly: "HvBaseInput-inputRootReadOnly";
     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";
+    inputResizable: "HvBaseInput-inputResizable";
 };
 export declare const baseRadioClasses: {
@@ -415,26 +418,26 @@ export declare const cardClasses: {
     selected: "HvCard-selected";
     root: "HvCard-root";
     selectable: "HvCard-selectable";
-    semanticBar: "HvCard-semanticBar";
     semanticContainer: "HvCard-semanticContainer";
+    semanticBar: "HvCard-semanticBar";
 };
 export declare const cardContentClasses: {
-    content: "HvCard-Content-content";
+    content: "HvCardContent-content";
 };
 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";
+    title: "HvCardHeader-title";
+    content: "HvCardHeader-content";
+    action: "HvCardHeader-action";
+    root: "HvCardHeader-root";
+    titleShort: "HvCardHeader-titleShort";
+    subheader: "HvCardHeader-subheader";
 };
 export declare const cardMediaClasses: {
-    media: "HvCard-Media-media";
-    root: "HvCard-Media-root";
+    media: "HvCardMedia-media";
+    root: "HvCardMedia-root";
 };
 export declare const carouselClasses: {
@@ -464,11 +467,6 @@ export declare const carouselClasses: {
     thumbnailSelected: "HvCarousel-thumbnailSelected";
 };
-export declare const cc: {
-    image: "HvCarouselSlide-image";
-    slide: "HvCarouselSlide-slide";
-};
 declare type CellValue<V = any> = V;
 export declare const CellWithCheckBox: ({ row, labels: labelsProp }: {
@@ -520,12 +518,12 @@ export declare const colorPickerClasses: {
     panel: "HvColorPicker-panel";
     description: "HvColorPicker-description";
     labelContainer: "HvColorPicker-labelContainer";
-    headerColorIcon: "HvColorPicker-headerColorIcon";
     headerColorValue: "HvColorPicker-headerColorValue";
+    headerColorIcon: "HvColorPicker-headerColorIcon";
     colorPickerIcon: "HvColorPicker-colorPickerIcon";
+    recommendedColorsRoot: "HvColorPicker-recommendedColorsRoot";
     dropdownRootIconOnly: "HvColorPicker-dropdownRootIconOnly";
     headerColorIconOnly: "HvColorPicker-headerColorIconOnly";
-    recommendedColorsRoot: "HvColorPicker-recommendedColorsRoot";
     pickerFields: "HvColorPicker-pickerFields";
 };
@@ -568,6 +566,23 @@ name: Name, stylesObject: Record<ClassName, CSSInterpolation_2>): {
  */
 export declare const createTheme: (props: HvCreateThemeProps) => HvTheme | HvThemeStructure;
+export declare const datePickerClasses: {
+    label: "HvDatePicker-label";
+    icon: "HvDatePicker-icon";
+    action: "HvDatePicker-action";
+    error: "HvDatePicker-error";
+    dropdown: "HvDatePicker-dropdown";
+    root: "HvDatePicker-root";
+    actionContainer: "HvDatePicker-actionContainer";
+    panel: "HvDatePicker-panel";
+    description: "HvDatePicker-description";
+    labelContainer: "HvDatePicker-labelContainer";
+    leftContainer: "HvDatePicker-leftContainer";
+    rightContainer: "HvDatePicker-rightContainer";
+    dropdownHeaderInvalid: "HvDatePicker-dropdownHeaderInvalid";
+    dropdownHeaderOpen: "HvDatePicker-dropdownHeaderOpen";
+};
 export declare interface DateRangeProp {
     startDate: Date;
     endDate?: Date;
@@ -669,9 +684,9 @@ export declare const dropdownClasses: {
     selectionDisabled: "HvDropdown-selectionDisabled";
     description: "HvDropdown-description";
     labelContainer: "HvDropdown-labelContainer";
-    dropdownHeader: "HvDropdown-dropdownHeader";
     dropdownHeaderInvalid: "HvDropdown-dropdownHeaderInvalid";
     dropdownHeaderOpen: "HvDropdown-dropdownHeaderOpen";
+    dropdownHeader: "HvDropdown-dropdownHeader";
     dropdownListContainer: "HvDropdown-dropdownListContainer";
     rootList: "HvDropdown-rootList";
 };
@@ -708,7 +723,7 @@ export declare const emptyStateClasses: {
 export declare type ExtractNames<T extends (...args: any) => {
     classes: Record<string, any>;
     cx: any;
-}> = ReturnType<T>["classes"];
+}> = Partial<ReturnType<T>["classes"]>;
 export declare const fileClasses: {
     progressbar: "HvFile-progressbar";
@@ -1047,19 +1062,14 @@ export declare interface HvAccordionProps extends HvBaseProps<HTMLDivElement, "o
 export declare const HvActionBar: (props: HvActionBarProps) => JSX_2.Element;
-export declare type HvActionBarClasses = ExtractNames<typeof useClasses>;
+export declare type HvActionBarClasses = ExtractNames<typeof useClasses_2>;
 export declare interface HvActionBarProps extends HvBaseProps {
     /** A Jss Object used to override or extend the styles applied to the component. */
-    classes?: Partial<HvActionBarClasses>;
+    classes?: HvActionBarClasses;
 }
-declare interface HvActionContainerClasses {
-    actionContainer?: string;
-    closeAction?: string;
-    iconContainer?: string;
-    actionsInnerContainer?: string;
-}
+declare type HvActionContainerClasses = ExtractNames<typeof useClasses_12>;
 declare interface HvActionContainerProps extends HvBaseProps<HTMLButtonElement> {
     /** onClose function. */
@@ -1367,11 +1377,11 @@ export declare const HvBanner: ({ id, classes: classesProp, className, open, onC
 export declare type HvBannerActionPosition = "auto" | "inline" | "bottom-right";
-export declare type HvBannerClasses = ExtractNames<typeof useClasses_3>;
+export declare type HvBannerClasses = ExtractNames<typeof useClasses_11>;
 export declare const HvBannerContent: ForwardRefExoticComponent<Omit<HvBannerContentProps, "ref"> & RefAttributes<HTMLDivElement>>;
-export declare type HvBannerContentClasses = ExtractNames<typeof useClasses_4>;
+export declare type HvBannerContentClasses = ExtractNames<typeof useClasses_13>;
 export declare interface HvBannerContentProps extends Omit<SnackbarContentProps, "variant" | "classes" | "onClose">, HvBaseProps {
     /** The message to display. */
@@ -1393,7 +1403,7 @@ export declare interface HvBannerContentProps extends Omit<SnackbarContentProps,
     /** The props to pass down to the Action Container. */
     actionProps?: HvActionContainerProps;
     /** A Jss Object used to override or extend the styles applied to the component. */
-    classes?: Partial<HvBannerContentClasses>;
+    classes?: HvBannerContentClasses;
 }
 export declare interface HvBannerProps extends Omit<SnackbarProps, "anchorOrigin" | "classes" | "onClose">, HvBaseProps<HTMLDivElement, "children"> {
@@ -1426,7 +1436,7 @@ export declare interface HvBannerProps extends Omit<SnackbarProps, "anchorOrigin
     /** Props to pass down to the Banner Wrapper. An object `actionProps` can be included to be passed as others to actions. */
     bannerContentProps?: HvBannerContentProps;
     /** A Jss Object used to override or extend the styles applied to the component. */
-    classes?: Partial<HvBannerClasses>;
+    classes?: HvBannerClasses;
 }
 export declare type HvBannerVariant = "success" | "warning" | "error" | "default";
@@ -1627,42 +1637,9 @@ export declare interface HvBaseDropdownProps extends HvBaseProps<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: ({ classes, className, id, name, value, defaultValue, required, readOnly, disabled, onChange, type, placeholder, multiline, resizable, invalid, inputRef, inputProps, ...others }: HvBaseInputProps) => JSX_2.Element;
+export declare const HvBaseInput: ({ classes: classesProp, className, id, name, value, defaultValue, required, readOnly, disabled, onChange, type, placeholder, multiline, resizable, invalid, inputRef, inputProps, ...others }: HvBaseInputProps) => JSX_2.Element;
-export declare interface HvBaseInputClasses {
-    /** Styles applied to the root container of the input. */
-    root?: string;
-    /** Styles applied to the root container of the input when it is disabled. */
-    disabled?: string;
-    /** Styles applied to the root container of the input when it is invalid. */
-    invalid?: string;
-    /** Styles applied to the root container of the input when it is resizable. */
-    resizable?: string;
-    /** Styles applied to input root which is the input that encloses all the other elements. */
-    inputRoot?: string;
-    /** Styles applied to input root when it is focused. */
-    inputRootFocused?: string;
-    /** Styles applied to input root element when it is disabled. */
-    inputRootDisabled?: string;
-    /** Styles applied to input root element when it is multiline mode. */
-    inputRootMultiline?: string;
-    /** Styles applied to input root element when it is invalid. */
-    inputRootInvalid?: string;
-    /** Styles applied to input root element when it is read only. */
-    inputRootReadOnly?: string;
-    /** Styles applied to input html element. */
-    input?: string;
-    /** Styles applied to input html element when is disabled. */
-    inputDisabled?: string;
-    /** Styles applied to input html element when it is resizable. */
-    inputResizable?: string;
-    /** Styles applied to input html element when it is read only. */
-    inputReadOnly?: string;
-    /** Styles applied to the container of the border element. */
-    inputBorderContainer?: string;
-    /** Styles applied to the container of the border element, when in read only mode. */
-    readOnly?: string;
-}
+export declare type HvBaseInputClasses = ExtractNames<typeof useClasses>;
 export declare interface HvBaseInputProps extends Omit<InputProps, "onChange" | "classes">, HvBaseProps<HTMLDivElement, "onChange" | "color" | "onBlur" | "onFocus" | "onInvalid" | "onKeyDown" | "onKeyUp"> {
     /** The input name. */
@@ -1693,7 +1670,7 @@ export declare interface HvBaseInputProps extends Omit<InputProps, "onChange" |
     /** Attributes applied to the input element. */
     inputProps?: InputBaseComponentProps;
     /** Allows passing a ref to the underlying input */
-    inputRef?: RefObject<HTMLElement>;
+    inputRef?: InputBaseProps["inputRef"];
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvBaseInputClasses;
 }
@@ -1701,11 +1678,6 @@ export declare interface HvBaseInputProps extends Omit<InputProps, "onChange" |
 /** 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;
-    sx?: SxProps;
-}>;
 /**
  * A Radio Button is a mechanism that allows user to select one or more options.
  *
@@ -1891,9 +1863,19 @@ export declare interface HvBaseSwitchProps extends Omit<SwitchProps, "onChange"
 export { HvBaseTheme }
+/**
+ * Customizable layout component that can be used to wrap other components.
+ * It can be used to add styles to the wrapped components.
+ * It can also be used to create a layout using the flexbox properties.
+ */
 export declare const HvBox: HvBoxProps;
-export declare type HvBoxProps = <C extends React.ElementType = "div">(props: HvBaseProps_2<C>) => React.ReactElement | null;
+declare type HvBoxBaseProps<C extends React.ElementType> = PolymorphicComponentRef<C, {
+    style?: React.CSSProperties;
+    sx?: SxProps;
+}>;
+export declare type HvBoxProps = <C extends React.ElementType = "div">(props: HvBoxBaseProps<C>) => React.ReactElement | null;
 /**
  * A breadcrumb is a graphical control element frequently used as a navigational aid.
@@ -2201,22 +2183,13 @@ export declare interface HvCalendarProps {
  * linked short representation of a conceptual unit. For that reason,
  * this pattern must be used as an entry-point for further information.
  */
-export declare const HvCard: ({ classes, className, children, icon, selectable, selected, statusColor, bgcolor, ...others }: HvCardProps) => JSX_2.Element;
+export declare const HvCard: ({ classes: classesProp, className, children, icon, selectable, selected, statusColor, bgcolor, ...others }: HvCardProps) => JSX_2.Element;
-export declare interface HvCardClasses {
-    root?: string;
-    selectable?: string;
-    selected?: string;
-    semanticBar?: string;
-    semanticContainer?: string;
-    icon?: string;
-}
+export declare type HvCardClasses = ExtractNames<typeof useClasses_3>;
-export declare const HvCardContent: ({ id, classes, className, children, onClick, ...others }: HvCardContentProps) => JSX_2.Element;
+export declare const HvCardContent: ({ id, classes: classesProp, className, children, onClick, ...others }: HvCardContentProps) => JSX_2.Element;
-export declare interface HvCardContentClasses {
-    content?: string;
-}
+export declare type HvCardContentClasses = ExtractNames<typeof useClasses_5>;
 export declare interface HvCardContentProps extends Omit<CardContentProps, "classes">, HvBaseProps {
     /** Id to be applied to the root node. */
@@ -2227,16 +2200,9 @@ export declare interface HvCardContentProps extends Omit<CardContentProps, "clas
     classes?: HvCardContentClasses;
 }
-export declare const HvCardHeader: ({ classes, className, title, subheader, icon, onClick, ...others }: HvCardHeaderProps) => JSX_2.Element;
+export declare const HvCardHeader: ({ classes: classesProp, className, title, subheader, icon, onClick, ...others }: HvCardHeaderProps) => JSX_2.Element;
-export declare interface HvCardHeaderClasses {
-    root?: string;
-    title?: string;
-    titleShort?: string;
-    subheader?: string;
-    action?: string;
-    content?: string;
-}
+export declare type HvCardHeaderClasses = ExtractNames<typeof useClasses_4>;
 export declare interface HvCardHeaderProps extends Omit<CardHeaderProps, "classes">, HvBaseProps<HTMLDivElement, "title"> {
     /** The renderable content inside the title slot of the header. */
@@ -2251,12 +2217,9 @@ export declare interface HvCardHeaderProps extends Omit<CardHeaderProps, "classe
     classes?: HvCardHeaderClasses;
 }
-export declare const HvCardMedia: ({ id, classes, className, children, title, onClick, ...others }: HvCardMediaProps) => JSX_2.Element;
+export declare const HvCardMedia: ({ id, classes: classesProp, className, children, title, onClick, ...others }: HvCardMediaProps) => JSX_2.Element;
-export declare interface HvCardMediaClasses {
-    root?: string;
-    media?: string;
-}
+export declare type HvCardMediaClasses = ExtractNames<typeof useClasses_6>;
 export declare interface HvCardMediaProps extends Omit<CardMediaProps, "classes">, ImgHTMLAttributes<HTMLDivElement>, HvBaseProps<HTMLDivElement, "onClick" | "title"> {
     /** Id to be applied to the root node. */
@@ -2297,11 +2260,11 @@ export declare interface HvCardProps extends HvBaseProps {
  */
 export declare const HvCarousel: (props: HvCarouselProps) => JSX_2.Element;
-export declare type HvCarouselClasses = Record<keyof typeof styles, string>;
+export declare type HvCarouselClasses = ExtractNames<typeof useClasses_29>;
 export declare interface HvCarouselProps extends HvBaseProps<HTMLDivElement, "title" | "onChange"> {
     /** A Jss Object used to override or extend the styles applied. */
-    classes?: Partial<HvCarouselClasses>;
+    classes?: HvCarouselClasses;
     /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */
     height?: CSSProperties["height"];
     /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */
@@ -2338,11 +2301,11 @@ export declare interface HvCarouselProps extends HvBaseProps<HTMLDivElement, "ti
  */
 export declare const HvCarouselSlide: ({ classes: classesProp, children, size: flexBasis, src, alt, ...props }: HvCarouselSlideProps) => JSX_2.Element;
-export declare type HvCarouselSlideClasses = Record<keyof typeof styles_2, string>;
+export declare type HvCarouselSlideClasses = ExtractNames<typeof useClasses_30>;
 export declare interface HvCarouselSlideProps extends ImgHTMLAttributes<HTMLImageElement> {
     /** A Jss Object used to override or extend the styles applied. */
-    classes?: Partial<HvCarouselSlideClasses>;
+    classes?: HvCarouselSlideClasses;
     /** The width of the Slide. Defaults to `100%` */
     size?: string;
     /** Content of a slide to be displayed */
@@ -2560,23 +2523,9 @@ export declare type HvClickOutsideEvent = MouseEvent | KeyboardEvent | TouchEven
  * 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 const HvColorPicker: ({ id, name, required, disabled, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, description, "aria-describedby": ariaDescribedBy, className, classes: classesProp, 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 type HvColorPickerClasses = ExtractNames<typeof useClasses_28>;
 export declare interface HvColorPickerProps {
     "aria-label"?: string;
@@ -2817,27 +2766,9 @@ declare interface HvDateColumnCellProp {
  * A date picker, popup calendar or date range picker is a graphical user
  * interface widget which allows the user to select a date from a calendar.
  */
-export declare const HvDatePicker: ({ classes, className, id, name, required, disabled, readOnly, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, description, "aria-describedby": ariaDescribedBy, onChange, onCancel, onClear, status, statusMessage, "aria-errormessage": ariaErrorMessage, placeholder, labels: labelsProp, value, startValue, endValue, rangeMode, startAdornment, horizontalPlacement, locale: localeProp, showActions, showClear, disablePortal, escapeWithReference, dropdownProps, calendarProps, ...others }: HvDatePickerProps) => JSX_2.Element;
+export declare const HvDatePicker: ({ classes: classesProp, className, id, name, required, disabled, readOnly, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, description, "aria-describedby": ariaDescribedBy, onChange, onCancel, onClear, status, statusMessage, "aria-errormessage": ariaErrorMessage, placeholder, labels: labelsProp, value, startValue, endValue, rangeMode, startAdornment, horizontalPlacement, locale: localeProp, showActions, showClear, disablePortal, escapeWithReference, dropdownProps, calendarProps, ...others }: HvDatePickerProps) => JSX_2.Element;
-declare type HvDatePickerClasses = {
-    root?: string;
-    labelContainer?: string;
-    label?: string;
-    description?: string;
-    error?: string;
-    placeholder?: string;
-    selectionDisabled?: string;
-    dropdown?: string;
-    panel?: string;
-    action?: string;
-    icon?: string;
-    dropdownHeader?: string;
-    dropdownHeaderInvalid?: string;
-    dropdownHeaderOpen?: string;
-    actionContainer?: string;
-    leftContainer?: string;
-    rightContainer?: string;
-};
+export declare type HvDatePickerClasses = ExtractNames<typeof useClasses_21>;
 export declare interface HvDatePickerProps extends HvBaseProps<HTMLDivElement, "onChange"> {
     /**
@@ -3008,7 +2939,7 @@ export declare interface HvDatePickerProps extends HvBaseProps<HTMLDivElement, "
 export declare type HvDatePickerStatus = "standBy" | "valid" | "invalid";
-export declare const HvDialog: ({ classes, className, id, children, open, onClose, firstFocusable, buttonTitle, fullscreen, disableBackdropClick, ...others }: HvDialogProps) => JSX_2.Element;
+export declare const HvDialog: ({ classes: classesProp, className, id, children, open, onClose, firstFocusable, buttonTitle, fullscreen, disableBackdropClick, ...others }: HvDialogProps) => JSX_2.Element;
 export declare interface HvDialogActionClasses {
     root?: string;
@@ -3024,13 +2955,7 @@ export declare interface HvDialogActionsProps extends Omit<DialogActionsProps, "
     classes?: HvDialogActionClasses;
 }
-export declare interface HvDialogClasses {
-    root?: string;
-    closeButton?: string;
-    fullscreen?: string;
-    background?: string;
-    paper?: string;
-}
+export declare type HvDialogClasses = ExtractNames<typeof useClasses_7>;
 export declare const HvDialogContent: ({ classes, className, children, indentContent, }: HvDialogContentProps) => JSX_2.Element;
@@ -3282,24 +3207,9 @@ declare interface HvDropdownListProps {
 /**
  * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.
  */
-export declare const HvDropDownMenu: ({ id: idProp, classes, className, icon, placement, dataList, disablePortal, onToggle, onClick, keepOpened, disabled, expanded, defaultExpanded, category, ...others }: HvDropDownMenuProps) => JSX_2.Element;
+export declare const HvDropDownMenu: ({ id: idProp, classes: classesProp, className, icon, placement, dataList, disablePortal, onToggle, onClick, keepOpened, disabled, expanded, defaultExpanded, category, ...others }: HvDropDownMenuProps) => JSX_2.Element;
-export declare interface HvDropDownMenuClasses {
-    /** Styles applied to the root. */
-    root?: string;
-    /** Styles applied to the container. */
-    container?: string;
-    /** Styles applied to the BaseDropdown container. */
-    baseContainer?: string;
-    /** Styles applied to the icon. */
-    icon?: string;
-    /** Styles applied to the icon when selected. */
-    iconSelected?: string;
-    /** Styles applied to the list root. */
-    menuListRoot?: string;
-    /** Styles applied to the list. */
-    menuList?: string;
-}
+export declare type HvDropDownMenuClasses = ExtractNames<typeof useClasses_9>;
 export declare interface HvDropDownMenuProps extends HvBaseProps<HTMLDivElement, "onClick"> {
     /** Icon. */
@@ -3768,28 +3678,11 @@ export declare interface HvFileUploaderProps extends HvBaseProps {
  * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,
  * while we do not provide a better approach for building this component with smaller and more composable parts.
  */
-export declare const HvFilterGroup: ({ className, id, name, required, disabled, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, description, "aria-describedby": ariaDescribedBy, onChange, onCancel, onClear, status, statusMessage, labels: labelsProp, defaultValue, value, filters, horizontalPlacement, disablePortal, escapeWithReference, height, filterContentProps, classes, ...others }: HvFilterGroupProps) => JSX_2.Element;
+export declare const HvFilterGroup: ({ className, id, name, required, disabled, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, description, "aria-describedby": ariaDescribedBy, onChange, onCancel, onClear, status, statusMessage, labels: labelsProp, defaultValue, value, filters, horizontalPlacement, disablePortal, escapeWithReference, height, filterContentProps, classes: classesProp, ...others }: HvFilterGroupProps) => JSX_2.Element;
-export declare interface HvFilterGroupClasses {
-    root?: string;
-    labelContainer?: string;
-    label?: string;
-    description?: string;
-    error?: string;
-}
+export declare type HvFilterGroupClasses = ExtractNames<typeof useClasses_19>;
-declare interface HvFilterGroupContentClasses {
-    dropdown?: string;
-    panel?: string;
-    baseDropdownSelection?: string;
-    header?: string;
-    root?: string;
-    leftSidePanel?: string;
-    rightSidePanel?: string;
-    actionBar?: string;
-    space?: string;
-    applyButton?: string;
-}
+declare type HvFilterGroupContentClasses = ExtractNames<typeof useClasses_20>;
 declare interface HvFilterGroupContentProps extends Omit<HvBaseDropdownProps, "onChange"> {
     description?: React.ReactNode;
@@ -3836,7 +3729,7 @@ export declare interface HvFilterGroupLabels {
     multiSelectionConjunction?: string;
 }
-export declare interface HvFilterGroupProps extends Omit<HvFormElementProps, "onChange" | "defaultValue" | "statusMessage"> {
+export declare interface HvFilterGroupProps extends Omit<HvFormElementProps, "classes" | "onChange" | "defaultValue" | "statusMessage"> {
     /** The initial value of the input when in single calendar mode. */
     filters: HvFilterGroupFilters;
     /** The form element name. */
@@ -4337,12 +4230,7 @@ export declare interface HvHooks<D extends object = Record<string, unknown>, H e
     useFinalInstance: Array<(instance: HvTableInstance<D, H>) => void>;
 }
-export declare interface HvHorizontalScrollListItemClasses {
-    root?: string;
-    selected?: string;
-    button?: string;
-    text?: string;
-}
+export declare type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses_24>;
 /**
  * Provides the user with additional descriptive text for the form element.
@@ -4368,20 +4256,9 @@ export declare interface HvInfoMessageProps extends HvBaseProps {
  * An Inline Editor allows the user to edit a record without making a major switch
  * between viewing and editing, making it an efficient method of updating a record.
  */
-export declare const HvInlineEditor: ({ className, classes, value: valueProp, defaultValue, showIcon, component: InputComponent, variant, placeholder, onBlur, onChange, onKeyDown, buttonProps, typographyProps, ...others }: HvInlineEditorProps) => JSX_2.Element;
+export declare const HvInlineEditor: ({ className, classes: classesProp, value: valueProp, defaultValue, showIcon, component: InputComponent, variant, placeholder, onBlur, onChange, onKeyDown, buttonProps, typographyProps, ...others }: HvInlineEditorProps) => JSX_2.Element;
-export declare interface HvInlineEditorClasses {
-    root?: string;
-    button?: string;
-    largeText?: string;
-    text?: string;
-    textEmpty?: string;
-    icon?: string;
-    iconVisible?: string;
-    inputRoot?: string;
-    input?: string;
-    inputBorderContainer?: string;
-}
+export declare type HvInlineEditorClasses = ExtractNames<typeof useClasses_26>;
 export declare interface HvInlineEditorProps extends HvBaseProps<HTMLDivElement, "onBlur" | "onChange"> {
     /** The value of the form element. */
@@ -4407,48 +4284,9 @@ export declare interface HvInlineEditorProps extends HvBaseProps<HTMLDivElement,
 /**
  * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.
  */
-export declare const HvInput: ({ classes, className, id, name, value: valueProp, defaultValue, required, readOnly, disabled, label, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, description, "aria-describedby": ariaDescribedBy, onChange, onEnter, status, statusMessage, "aria-errormessage": ariaErrorMessage, type, placeholder, autoFocus, labels: labelsProp, validationMessages, disableClear, disableRevealPassword, disableSearchButton, endAdornment, maxCharQuantity, minCharQuantity, validation, showValidationIcon, suggestionListCallback, inputRef: inputRefProp, onBlur, onFocus, onKeyDown, inputProps, ...others }: HvInputProps) => JSX_2.Element;
+export declare const HvInput: React_2.ForwardRefExoticComponent<HvInputProps & React_2.RefAttributes<InputElement>>;
-export declare interface HvInputClasses {
-    /** Styles applied to the root container of the input. */
-    root?: string;
-    /** Styles applied to the root container when the suggestion list is open. */
-    hasSuggestions?: string;
-    /** Styles applied to input root which is comprising of everything but the labels and descriptions. */
-    inputRoot?: string;
-    /** Styles applied to the base input border element. */
-    inputBorderContainer?: string;
-    /** Styles applied to input root when it is focused. */
-    inputRootFocused?: string;
-    /** Styles applied to input html element when it is disabled. */
-    inputRootDisabled?: string;
-    /** Styles applied to input html element when it is multiline mode. */
-    inputRootMultiline?: string;
-    /** Styles applied to input html element. */
-    input?: string;
-    /** Styles applied to the container of the labels elements. */
-    labelContainer?: string;
-    /** Styles applied to the label element. */
-    label?: string;
-    /** Styles applied to the icon information text. */
-    description?: string;
-    /** Styles applied to the error area. */
-    error?: string;
-    /** Styles applied to the div around the adornment. */
-    adornmentsBox?: string;
-    /** Styles applied to the the adornment when behaving as a button. */
-    adornmentButton?: string;
-    /** Styles applied to the input adornment icons. */
-    icon?: string;
-    /** Styles applied to the icon used to clean the input. */
-    iconClear?: string;
-    /** Styles applied to the input extension shown when the suggestions list is visible. */
-    inputExtension?: string;
-    /** Styles applied to the container of the suggestions list. */
-    suggestionsContainer?: string;
-    /** Styles applied to the suggestions list. */
-    suggestionList?: string;
-}
+export declare type HvInputClasses = ExtractNames<typeof useClasses_8>;
 export declare interface HvInputLabels {
     /** The label of the clear button. */
@@ -4500,28 +4338,28 @@ export declare interface HvInputProps extends HvBaseProps<HTMLElement, "onChange
      * The function that will be executed onChange, allows modification of the input,
      * it receives the value. If a new value should be presented it must returned it.
      */
-    onChange?: (event: React_2.ChangeEvent<HTMLInputElement>, value: string) => void;
+    onChange?: HvBaseInputProps["onChange"];
     /**
      * Callback called when the user submits the value by pressing Enter/Return.
      *
      * Also called when the search button is clicked (when type is "search").
      */
-    onEnter?: (event: React_2.KeyboardEvent<HTMLInputElement> | React_2.MouseEvent, value: string) => void;
+    onEnter?: (event: React_2.KeyboardEvent<InputElement> | React_2.MouseEvent, value: string) => void;
     /**
      * The function that will be executed onBlur, allows checking the validation state,
      * it receives the value and the validation state.
      */
-    onBlur?: (event: React_2.FocusEvent<HTMLInputElement>, value: string, validationState: HvInputValidity) => void;
+    onBlur?: (event: React_2.FocusEvent<InputElement>, value: string, validationState: HvInputValidity) => void;
     /**
      * The function that will be executed onBlur, allows checking the value state,
      * it receives the value.
      */
-    onFocus?: (event: React_2.FocusEventHandler<HTMLInputElement>, value: string) => void;
+    onFocus?: (event: React_2.FocusEvent<InputElement>, value: string) => void;
     /**
      * The function that will be executed onKeyDown, allows checking the value state,
      * it receives the event and value.
      */
-    onKeyDown?: (event: React_2.KeyboardEvent<HTMLInputElement> | React_2.MouseEvent, value: string) => void;
+    onKeyDown?: (event: React_2.KeyboardEvent<InputElement> | React_2.MouseEvent, value: string) => void;
     /** The input type. */
     type?: HTMLInputTypeAttribute;
     /** The placeholder value of the input. */
@@ -4532,8 +4370,11 @@ export declare interface HvInputProps extends HvBaseProps<HTMLElement, "onChange
     validationMessages?: HvValidationMessages;
     /** Attributes applied to the input element. */
     inputProps?: InputBaseComponentProps;
-    /** Allows passing a ref to the underlying input */
-    inputRef?: any;
+    /**
+     * Allows passing a ref to the underlying input
+     * @deprecated Use `ref` directly instead
+     * */
+    inputRef?: HvBaseInputProps["inputRef"];
     /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */
     suggestionListCallback?: (value: string) => HvInputSuggestion[] | null;
     /**
@@ -5014,7 +4855,7 @@ export declare interface HvNotistackSnackMessageProps {
     /** Classname to apply on the root node */
     className?: string;
     /** Your component tree. */
-    message?: string;
+    message?: ReactNode | string;
     /** Variant of the snackbar. */
     variant?: HvSnackbarVariant;
     /** Extra values to pass to the snackbar. */
@@ -5058,7 +4899,7 @@ export declare interface HvOverflowTooltipProps extends HvBaseProps {
  */
 export declare const HvPagination: ({ classes: classesProp, className, id, pages, page, showPageSizeOptions, pageSizeOptions, pageSize, showPageJump, canPrevious, canNext, onPageChange, onPageSizeChange, labels: labelsProp, showPageProps, navigationProps, currentPageInputProps, ...others }: HvPaginationProps) => JSX_2.Element;
-export declare type HvPaginationClasses = ExtractNames<typeof useClasses_2>;
+export declare type HvPaginationClasses = ExtractNames<typeof useClasses_10>;
 export declare interface HvPaginationLabels {
     /** The show label. */
@@ -5257,7 +5098,7 @@ export declare interface HvProviderProps {
  */
 export declare const HvQueryBuilder: ({ attributes, query, onChange, operators, combinators, maxDepth, labels, readOnly, classes, }: HvQueryBuilderProps) => JSX_2.Element;
-export declare type HvQueryBuilderClasses = Partial<ExtractNames<typeof useClasses_5>>;
+export declare type HvQueryBuilderClasses = Partial<ExtractNames<typeof useClasses_27>>;
 export declare interface HvQueryBuilderProps {
     attributes?: Record<string, Attribute>;
@@ -5573,16 +5414,9 @@ declare type HvRowPropGetter<D extends object = Record<string, unknown>, H exten
 /**
  * The horizontal scroll to element can be used to quickly navigate in a page.
  */
-export declare const HvScrollToHorizontal: ({ id, defaultSelectedIndex, scrollElementId, href, onChange, onClick, onEnter, className, classes, options, offset, position, tooltipPosition, ...others }: HvScrollToHorizontalProps) => JSX_2.Element;
+export declare const HvScrollToHorizontal: ({ id, defaultSelectedIndex, scrollElementId, href, onChange, onClick, onEnter, className, classes: classesProp, options, offset, position, tooltipPosition, ...others }: HvScrollToHorizontalProps) => JSX_2.Element;
-export declare interface HvScrollToHorizontalClasses {
-    root?: string;
-    positionSticky?: string;
-    positionFixed?: string;
-    notSelectedRoot?: string;
-    notSelected?: string;
-    selected?: string;
-}
+export declare type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses_25>;
 export declare interface HvScrollToHorizontalOption {
     key?: string;
@@ -5633,13 +5467,9 @@ export declare type HvScrollToTooltipPositions = "left" | "right" | "top" | "bot
 /**
  * The vertical scroll to element can be used to quickly navigate in a page.
  */
-export declare const HvScrollToVertical: ({ id, defaultSelectedIndex, scrollElementId, href, onChange, onClick, onEnter, className, classes, options, offset, position, tooltipPosition, ...others }: HvScrollToVerticalProps) => JSX_2.Element;
+export declare const HvScrollToVertical: ({ id, defaultSelectedIndex, scrollElementId, href, onChange, onClick, onEnter, className, classes: classesProp, options, offset, position, tooltipPosition, style, ...others }: HvScrollToVerticalProps) => JSX_2.Element;
-export declare interface HvScrollToVerticalClasses {
-    root?: string;
-    positionAbsolute?: string;
-    positionFixed?: string;
-}
+export declare type HvScrollToVerticalClasses = ExtractNames<typeof useClasses_23>;
 export declare interface HvScrollToVerticalOption {
     key?: string;
@@ -5953,38 +5783,13 @@ export declare interface HvSliderProps extends HvBaseProps<HTMLDivElement, "onCh
  * One is the HvSnackbar, which wraps all the positioning, transition, auto hide, etc.
  * The other is the HvSnackbarContent, which allows a finer control and customization of the content of the Snackbar.
  */
-export declare const HvSnackbar: ({ classes, className, id, open, onClose, label, anchorOrigin, autoHideDuration, variant, showIcon, customIcon, action, actionCallback, transitionDuration, transitionDirection, offset, snackbarContentProps, ...others }: HvSnackbarProps) => JSX_2.Element;
+export declare const HvSnackbar: ({ classes: classesProp, className, id, open, onClose, label, anchorOrigin, autoHideDuration, variant, showIcon, customIcon, action, actionCallback, transitionDuration, transitionDirection, offset, snackbarContentProps, ...others }: HvSnackbarProps) => JSX_2.Element;
-export declare interface HvSnackbarClasses {
-    root?: string;
-    /** Styles applied to the component when define as top right.  */
-    anchorOriginTopRight?: string;
-    /** Styles applied to the component when define as top left.  */
-    anchorOriginTopLeft?: string;
-    /** Styles applied to the component when define as top center.  */
-    anchorOriginTopCenter?: string;
-    /** Styles applied to the component when define as bottom center.  */
-    anchorOriginBottomCenter?: string;
-    /** Styles applied to the component when define as bottom left.  */
-    anchorOriginBottomLeft?: string;
-    /** Styles applied to the component when define as bottom right.  */
-    anchorOriginBottomRight?: string;
-}
+export declare type HvSnackbarClasses = ExtractNames<typeof useClasses_14>;
 export declare const HvSnackbarContent: ForwardRefExoticComponent<Omit<HvSnackbarContentProps, "ref"> & RefAttributes<HTMLDivElement>>;
-export declare interface HvSnackbarContentClasses {
-    root?: string;
-    message?: string;
-    messageSpan?: string;
-    iconVariant?: string;
-    messageText?: string;
-    action?: string;
-    default?: string;
-    success?: string;
-    warning?: string;
-    error?: string;
-}
+export declare type HvSnackbarContentClasses = ExtractNames<typeof useClasses_15>;
 export declare interface HvSnackbarContentProps extends Omit<SnackbarContentProps, "variant" | "action" | "classes">, HvBaseProps {
     /** The message to display. */
@@ -6000,7 +5805,7 @@ export declare interface HvSnackbarContentProps extends Omit<SnackbarContentProp
     /** The callback function ran when an action is triggered, receiving `action` as param */
     actionCallback?: (event: React.SyntheticEvent, id: string, action: HvActionGeneric) => void;
     /** A Jss Object used to override or extend the styles applied to the component. */
-    classes?: HvSnackbarContentClasses;
+    classes?: Partial<HvSnackbarContentClasses>;
 }
 export declare interface HvSnackbarProps extends Omit<SnackbarProps, "action" | "classes">, Omit<HvBaseProps, "children"> {
@@ -6033,20 +5838,12 @@ export declare interface HvSnackbarProps extends Omit<SnackbarProps, "action" |
     /** Others applied to the content of the snackbar. */
     snackbarContentProps?: HvSnackbarContentProps;
     /** A Jss Object used to override or extend the styles applied to the component. */
-    classes?: HvSnackbarClasses;
+    classes?: Partial<HvSnackbarClasses>;
 }
-export declare const HvSnackbarProvider: ({ children, notistackClassesOverride, maxSnack, autoHideDuration, anchorOrigin, ...others }: {
-    [x: string]: any;
-    children: any;
-    notistackClassesOverride?: {} | undefined;
-    maxSnack?: number | undefined;
-    autoHideDuration?: number | undefined;
-    anchorOrigin?: {
-        vertical: string;
-        horizontal: string;
-    } | undefined;
-}) => JSX_2.Element;
+export declare const HvSnackbarProvider: ({ children, notistackClassesOverride, maxSnack, autoHideDuration, anchorOrigin, classes: classesProp, className, ...others }: HvSnackbarProviderProps) => JSX_2.Element;
+export declare type HvSnackbarProviderClasses = ExtractNames<typeof useClasses_16>;
 export declare interface HvSnackbarProviderProps {
     /** Your component tree. */
@@ -6058,7 +5855,10 @@ export declare interface HvSnackbarProviderProps {
     /** Where is the snackbar placed. */
     anchorOrigin?: SnackbarOrigin;
     /** Class object used to override notistack classes. */
-    notistackClassesOverride?: object;
+    notistackClassesOverride?: Partial<ClassNameMap<CombinedClassKey>>;
+    /** A Jss Object used to override or extend the styles applied to the component. */
+    classes?: Partial<HvSnackbarProviderClasses>;
+    className?: string;
 }
 export declare type HvSnackbarVariant = "default" | "success" | "warning" | "error";
@@ -6106,7 +5906,7 @@ export declare interface HvSuggestion {
     disabled?: boolean;
 }
-export declare const HvSuggestions: ({ id, className, classes, expanded, anchorEl, suggestionValues, onClose, onSuggestionSelected, ...others }: HvSuggestionsProps) => JSX_2.Element;
+export declare const HvSuggestions: React_2.ForwardRefExoticComponent<HvSuggestionsProps & React_2.RefAttributes<unknown>>;
 export declare interface HvSuggestionsClasses {
     root?: string;
@@ -6339,58 +6139,7 @@ export declare const HvTableCell: ForwardRefExoticComponent<HvTableCellProps & R
 export declare type HvTableCellAlign = "center" | "inherit" | "justify" | "left" | "right";
-export declare interface HvTableCellClasses {
-    /** Styles applied to the component root class. */
-    root?: string;
-    /** Styles applied to the cell when it's in the table head. */
-    head?: string;
-    /** Styles applied to the cell when it's in the table body. */
-    body?: string;
-    /** Styles applied to the cell when it's in the table footer. */
-    footer?: string;
-    /** Styles applied to the cell when it's part of a sticky column. */
-    stickyColumn?: string;
-    /** Styles applied to the cell when it's part of the last sticky to the left column. */
-    stickyColumnMostLeft?: string;
-    /** Styles applied to the cell when it's part of the first right sticky column. */
-    stickyColumnLeastRight?: string;
-    /** Styles applied to the cell when it's part of the first column in the group. */
-    groupColumnMostLeft?: string;
-    /** Styles applied to the cell when it's part of the last column in the group. */
-    groupColumnMostRight?: string;
-    /** Styles applied to the cell when it's part of a sorted column. */
-    sorted?: string;
-    /** Styles applied to the sort icon. */
-    sortIcon?: string;
-    /** Styles applied to the component root when it is left aligned */
-    alignLeft?: string;
-    /** Styles applied to the component root when it is right aligned */
-    alignRight?: string;
-    /** Styles applied to the component root when it is center aligned */
-    alignCenter?: string;
-    /** Styles applied to the component root when it is justified */
-    alignJustify?: string;
-    /** Styles applied to the component root when its variant is checkbox */
-    variantCheckbox?: string;
-    /** Styles applied to the component root when its variant is expand */
-    variantExpand?: string;
-    /** Styles applied to the component root when its variant is actions */
-    variantActions?: string;
-    /** Styles applied to the component root when its variant is none */
-    variantNone?: string;
-    /** Styles applied to the component root when its variant is list */
-    variantList?: string;
-    /** Styles applied to the cell when its variant is list and actions. */
-    variantListactions?: string;
-    /** Styles applied to the cell when its variant is list and checkbox. */
-    variantListcheckbox?: string;
-    /** Styles applied to the cell when its variant is list and the type is head . */
-    variantListHead?: string;
-    /** Styles applied to the cell when it's part of a resizable column. */
-    resizable?: string;
-    /** Styles applied to the cell when it's part of a resizing column. */
-    resizing?: string;
-}
+export declare type HvTableCellClasses = ExtractNames<typeof useClasses_18>;
 export declare interface HvTableCellProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, "align"> {
     /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */
@@ -6697,28 +6446,7 @@ export declare interface HvTableProps extends TableHTMLAttributes<HTMLTableEleme
  */
 export declare const HvTableRow: ForwardRefExoticComponent<HvTableRowProps & RefAttributes<HTMLElement>>;
-export declare interface HvTableRowClasses {
-    /** Styles applied to the component root class. */
-    root?: string;
-    /** Styles applied to the component root when selected. */
-    selected?: string;
-    /** Styles applied to the component root when expanded. */
-    expanded?: string;
-    /** Styles applied to the component root when striped. */
-    striped?: string;
-    /** Styles applied to the component root on hover. */
-    hover?: string;
-    /** Styles applied to the component root when inside a `HvTableHead`. */
-    head?: string;
-    /** Styles applied to the component root when inside a `HvTableBody`. */
-    body?: string;
-    /** Styles applied to the component root when inside a `HvTableFooter`. */
-    footer?: string;
-    /** Styles applied to the component root when its table variant is list. */
-    variantList?: string;
-    /** Styles applied to the component root when its table variant is list. */
-    variantListHead?: string;
-}
+export declare type HvTableRowClasses = ExtractNames<typeof useClasses_17>;
 export declare interface HvTableRowProps extends HvBaseProps<HTMLTableRowElement, "children"> {
     /** Content to be rendered */
@@ -6969,7 +6697,7 @@ export declare interface HvTagSuggestion extends HvInputSuggestion {
 /**
  * A text area is a multiline text input box, with an optional character counter when there is a length limit.
  */
-export declare const HvTextArea: ({ id, className, classes, name, label, description, placeholder, status, statusMessage, validationMessages, maxCharQuantity, minCharQuantity, value: valueProp, inputRef: inputRefProp, rows, defaultValue, middleCountLabel, countCharProps, inputProps, required, readOnly, disabled, autoFocus, resizable, autoScroll, hideCounter, blockMax, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, validation, onChange, onBlur, onFocus, ...others }: HvTextAreaProps) => JSX_2.Element;
+export declare const HvTextArea: ForwardRefExoticComponent<Omit<HvTextAreaProps, "ref"> & RefAttributes<any>>;
 export declare interface HvTextAreaClasses {
     root?: string;
@@ -7113,7 +6841,7 @@ export declare interface HvThemePalette {
     support: HvSupportColors;
 }
-export declare const HvThemeProvider: ({ children, themes: themesList, theme, emotionCache, colorMode, themeRootId, }: HvThemeProviderProps) => JSX_2.Element;
+export declare const HvThemeProvider: ({ children, themes: themesList, theme, emotionCache, colorMode, themeRootId: rootId, }: HvThemeProviderProps) => JSX_2.Element;
 declare interface HvThemeProviderProps {
     children: React.ReactNode;
@@ -7176,7 +6904,7 @@ export declare interface HvTimeAgoProps extends HvBaseProps<HTMLElement, "childr
  */
 export declare const HvTimePicker: (props: HvTimePickerProps) => JSX_2.Element;
-export declare type HvTimePickerClasses = ExtractNames<typeof useClasses_6>;
+export declare type HvTimePickerClasses = ExtractNames<typeof useClasses_31>;
 export declare type HvTimePickerClassKey = "root" | "input" | "label" | "placeholder" | "timePopperContainer" | "separator" | "periodContainer" | "formElementRoot" | "dropdownPlaceholder" | "iconBaseRoot" | "error" | "labelContainer" | "description" | "dropdownHeaderInvalid" | "dropdownPlaceholderDisabled" | "dropdownHeaderOpen";
@@ -7184,7 +6912,7 @@ export declare interface HvTimePickerProps extends Omit<HvFormElementProps, "cla
     /** Id to be applied to the form element root node. */
     id?: string;
     /** A Jss Object used to override or extend the styles applied to the component. */
-    classes?: Partial<HvTimePickerClasses>;
+    classes?: HvTimePickerClasses;
     /** Current value of the element when _controlled_. Follows the 24-hour format. */
     value?: HvTimePickerValue;
     /** Initial value of the element when _uncontrolled_. Follows the 24-hour format. */
@@ -7915,12 +7643,7 @@ export declare interface HvVerticalNavigationTreeViewProps {
     children?: React.ReactNode;
 }
-export declare interface HvVerticalScrollListItemClasses {
-    root?: string;
-    notSelected?: string;
-    button?: string;
-    text?: string;
-}
+export declare type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses_22>;
 /**
  * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.
@@ -7974,8 +7697,8 @@ export declare const inlineEditorClasses: {
     text: "HvInlineEditor-text";
     icon: "HvInlineEditor-icon";
     root: "HvInlineEditor-root";
-    inputRoot: "HvInlineEditor-inputRoot";
     inputBorderContainer: "HvInlineEditor-inputBorderContainer";
+    inputRoot: "HvInlineEditor-inputRoot";
     largeText: "HvInlineEditor-largeText";
     textEmpty: "HvInlineEditor-textEmpty";
     iconVisible: "HvInlineEditor-iconVisible";
@@ -7987,22 +7710,24 @@ export declare const inputClasses: {
     icon: "HvInput-icon";
     error: "HvInput-error";
     root: "HvInput-root";
+    inputBorderContainer: "HvInput-inputBorderContainer";
     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";
+    hasSuggestions: "HvInput-hasSuggestions";
     suggestionsContainer: "HvInput-suggestionsContainer";
     suggestionList: "HvInput-suggestionList";
+    inputExtension: "HvInput-inputExtension";
 };
+declare type InputElement = HTMLInputElement | HTMLTextAreaElement;
 export declare const isBrowser: (browsers: any) => boolean | null;
 export declare const isInvalid: (compareState: any) => boolean;
@@ -8319,12 +8044,12 @@ declare interface Query {
 export declare const queryBuilderClasses: {
     root: "HvQueryBuilder-root";
+    removeButton: "HvQueryBuilder-removeButton";
     topGroup: "HvQueryBuilder-topGroup";
     subGroup: "HvQueryBuilder-subGroup";
     combinator: "HvQueryBuilder-combinator";
     topCombinator: "HvQueryBuilder-topCombinator";
     combinatorButton: "HvQueryBuilder-combinatorButton";
-    removeButton: "HvQueryBuilder-removeButton";
     topRemoveButton: "HvQueryBuilder-topRemoveButton";
     topRemoveButtonDisabled: "HvQueryBuilder-topRemoveButtonDisabled";
     rulesContainer: "HvQueryBuilder-rulesContainer";
@@ -8577,8 +8302,12 @@ export declare const snackbarContentClasses: {
     root: "HvSnackbar-Content-root";
     message: "HvSnackbar-Content-message";
     messageSpan: "HvSnackbar-Content-messageSpan";
-    iconVariant: "HvSnackbar-Content-iconVariant";
     messageText: "HvSnackbar-Content-messageText";
+    iconVariant: "HvSnackbar-Content-iconVariant";
+};
+export declare const snackbarProviderClasses: {
+    snackItemRoot: "HvSnackbarProvider-snackItemRoot";
 };
 export declare type Spacing = "sm" | "md" | "lg" | "xl";
@@ -8589,180 +8318,6 @@ export declare const stackClasses: {
 declare type StringKey<D> = Extract<keyof D, string>;
-declare const styles: {
-    /** Styles applied to the component root class. */
-    root: {
-        display: "flex";
-        alignItems: "stretch";
-        flexDirection: "column";
-        backgroundColor: string;
-        margin: number;
-        paddingTop: string;
-        paddingBottom: string;
-    };
-    xs: {
-        "&:not(._)": {
-            padding: number;
-        };
-        "& $dots": {
-            position: "relative";
-            top: string;
-        };
-        "& $actions": {
-            top: number;
-        };
-        "& $controls": {
-            display: string;
-        };
-    };
-    fullscreen: {
-        width: string;
-        height: string;
-        position: "fixed";
-        inset: number;
-        zIndex: string;
-        "&:not(._)": {
-            padding: string;
-        };
-    };
-    title: {
-        display: "flex";
-        justifyContent: "flex-start";
-        marginBottom: string;
-    };
-    actions: {
-        display: "flex";
-        justifyContent: "flex-end";
-        height: number;
-        zIndex: number;
-        position: "relative";
-        top: string;
-    };
-    closeButton: {};
-    mainContainer: {
-        display: "flex";
-        flexDirection: Property.FlexDirection | undefined;
-    };
-    controls: {
-        display: "flex";
-        alignItems: "center";
-        height: number;
-        justifyContent: string;
-        backgroundColor: string;
-        border: string;
-        gap: string;
-        "&:has($dots)": {
-            justifyContent: "center";
-        };
-    };
-    pageCounter: {};
-    main: {
-        padding: number;
-        display: "flex";
-        flexDirection: "column";
-        position: "relative";
-        "&:hover $slideControls": {
-            opacity: number;
-        };
-    };
-    mainXs: {};
-    mainFullscreen: {
-        maxHeight: string;
-    };
-    counterContainer: {
-        position: "absolute";
-        top: string;
-        right: string;
-        zIndex: number;
-        display: string;
-    };
-    counter: {
-        color: string;
-        backgroundColor: string;
-        padding: string;
-    };
-    slideControls: {
-        position: "absolute";
-        left: number;
-        right: number;
-        top: string;
-        padding: string;
-        display: "flex";
-        flexDirection: "row";
-        alignItems: "center";
-        justifyContent: "space-between";
-        opacity: number;
-        "& button": {
-            zIndex: number;
-        };
-        "&:focus-within": {
-            opacity: number;
-        };
-    };
-    slidesViewport: {
-        overflow: "hidden";
-    };
-    slidesContainer: {
-        display: "flex";
-        flexDirection: "row";
-        height: string;
-    };
-    dots: {
-        display: "flex";
-        alignItems: "center";
-        justifyContent: "center";
-        gap: string;
-        height: string;
-    };
-    dotsXs: {};
-    dot: {
-        width: number;
-        height: number;
-        margin: string;
-        borderRadius: string;
-        backgroundColor: string;
-    };
-    dotSelected: {
-        width: number;
-        height: number;
-        backgroundColor: string;
-    };
-    panel: {
-        display: "flex";
-        width: string;
-        overflowX: "auto";
-        overflowY: "hidden";
-        padding: string;
-    };
-    thumbnail: {
-        height: string;
-        padding: number;
-        "& img": {
-            width: string;
-            height: string;
-            textAlign: "center";
-            aspectRatio: "16/9";
-            opacity: "50%";
-            borderRadius: string;
-        };
-    };
-    thumbnailSelected: {
-        "& img": {
-            border: string;
-            opacity: "100%";
-        };
-    };
-};
-declare const styles_2: {
-    slide: {};
-    image: {
-        aspectRatio: "16/9";
-        width: string;
-        height: string;
-    };
-};
 export declare const suggestionsClasses: {
     list: "HvSuggestions-list";
     root: "HvSuggestions-root";
@@ -8803,19 +8358,18 @@ export declare const tableCellClasses: {
     groupColumnMostLeft: "HvTableCell-groupColumnMostLeft";
     groupColumnMostRight: "HvTableCell-groupColumnMostRight";
     resizing: "HvTableCell-resizing";
-    sortIcon: "HvTableCell-sortIcon";
     alignLeft: "HvTableCell-alignLeft";
-    alignRight: "HvTableCell-alignRight";
     alignCenter: "HvTableCell-alignCenter";
+    alignRight: "HvTableCell-alignRight";
     alignJustify: "HvTableCell-alignJustify";
+    variantNone: "HvTableCell-variantNone";
     variantCheckbox: "HvTableCell-variantCheckbox";
-    variantExpand: "HvTableCell-variantExpand";
     variantActions: "HvTableCell-variantActions";
-    variantNone: "HvTableCell-variantNone";
+    variantExpand: "HvTableCell-variantExpand";
     variantList: "HvTableCell-variantList";
+    variantListHead: "HvTableCell-variantListHead";
     variantListactions: "HvTableCell-variantListactions";
     variantListcheckbox: "HvTableCell-variantListcheckbox";
-    variantListHead: "HvTableCell-variantListHead";
 };
 export declare const tableClasses: {
@@ -8849,21 +8403,21 @@ export declare const tableHeaderClasses: {
     groupColumnMostLeft: "HvTableHeader-groupColumnMostLeft";
     groupColumnMostRight: "HvTableHeader-groupColumnMostRight";
     resizing: "HvTableHeader-resizing";
-    sortIcon: "HvTableHeader-sortIcon";
     alignLeft: "HvTableHeader-alignLeft";
-    alignRight: "HvTableHeader-alignRight";
     alignCenter: "HvTableHeader-alignCenter";
+    alignRight: "HvTableHeader-alignRight";
     alignJustify: "HvTableHeader-alignJustify";
+    variantNone: "HvTableHeader-variantNone";
     variantCheckbox: "HvTableHeader-variantCheckbox";
-    variantExpand: "HvTableHeader-variantExpand";
     variantActions: "HvTableHeader-variantActions";
-    variantNone: "HvTableHeader-variantNone";
+    variantExpand: "HvTableHeader-variantExpand";
     variantList: "HvTableHeader-variantList";
     headerContent: "HvTableHeader-headerContent";
     headerText: "HvTableHeader-headerText";
     headerParagraph: "HvTableHeader-headerParagraph";
     sortableHeaderText: "HvTableHeader-sortableHeaderText";
     sortButton: "HvTableHeader-sortButton";
+    sortIcon: "HvTableHeader-sortIcon";
     alignFlexLeft: "HvTableHeader-alignFlexLeft";
     alignFlexRight: "HvTableHeader-alignFlexRight";
     alignFlexCenter: "HvTableHeader-alignFlexCenter";
@@ -8916,9 +8470,9 @@ export declare const tagsInputClasses: {
     resizable: "HvTagsInput-resizable";
     description: "HvTagsInput-description";
     labelContainer: "HvTagsInput-labelContainer";
-    inputExtension: "HvTagsInput-inputExtension";
     suggestionsContainer: "HvTagsInput-suggestionsContainer";
     suggestionList: "HvTagsInput-suggestionList";
+    inputExtension: "HvTagsInput-inputExtension";
     chipRoot: "HvTagsInput-chipRoot";
     listItemGutters: "HvTagsInput-listItemGutters";
     listItemRoot: "HvTagsInput-listItemRoot";
@@ -8966,9 +8520,9 @@ export declare const timePickerClasses: {
     root: "HvTimerPicker-root";
     description: "HvTimerPicker-description";
     labelContainer: "HvTimerPicker-labelContainer";
-    dropdownHeader: "HvTimerPicker-dropdownHeader";
     dropdownHeaderInvalid: "HvTimerPicker-dropdownHeaderInvalid";
     dropdownHeaderOpen: "HvTimerPicker-dropdownHeaderOpen";
+    dropdownHeader: "HvTimerPicker-dropdownHeader";
     placeholderDisabled: "HvTimerPicker-placeholderDisabled";
     dropdownPanel: "HvTimerPicker-dropdownPanel";
     timePopperContainer: "HvTimerPicker-timePopperContainer";
@@ -9048,9 +8602,24 @@ export declare type UseBulkActionsProps = (<D extends object = Record<string, un
     pluginName: string;
 };
-declare const useClasses: (classesProp?: Partial<Record<"root", string>>) => {
+declare const useClasses: (classesProp?: Partial<Record<"input" | "disabled" | "readOnly" | "invalid" | "root" | "resizable" | "inputBorderContainer" | "inputRootInvalid" | "inputRootReadOnly" | "inputRoot" | "inputRootFocused" | "inputRootDisabled" | "inputRootMultiline" | "inputDisabled" | "inputReadOnly" | "inputResizable", string>>) => {
     classes: {
+        input: string;
+        disabled: string;
+        readOnly: string;
+        invalid: string;
         root: string;
+        resizable: string;
+        inputBorderContainer: string;
+        inputRootInvalid: string;
+        inputRootReadOnly: string;
+        inputRoot: string;
+        inputRootFocused: string;
+        inputRootDisabled: string;
+        inputRootMultiline: string;
+        inputDisabled: string;
+        inputReadOnly: string;
+        inputResizable: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -9059,7 +8628,7 @@ declare const useClasses: (classesProp?: Partial<Record<"root", string>>) => {
     cx: (...args: any) => string;
 };
-declare const useClasses_2: (classesProp?: Partial<Record<"icon" | "root" | "iconContainer" | "pageSizeOptions" | "pageSizeTextContainer" | "pageSizeOptionsSelect" | "pageNavigator" | "pageInfo" | "pageJump" | "pageSizeInput" | "pageSizeInputRoot" | "pageSizeInputContainer", string>>) => {
+declare const useClasses_10: (classesProp?: Partial<Record<"icon" | "root" | "iconContainer" | "pageSizeOptions" | "pageSizeTextContainer" | "pageSizeOptionsSelect" | "pageNavigator" | "pageInfo" | "pageJump" | "pageSizeInput" | "pageSizeInputRoot" | "pageSizeInputContainer", string>>) => {
     classes: {
         icon: string;
         root: string;
@@ -9081,7 +8650,7 @@ declare const useClasses_2: (classesProp?: Partial<Record<"icon" | "root" | "ico
     cx: (...args: any) => string;
 };
-declare const useClasses_3: (classesProp?: Partial<Record<"root" | "rootClosed" | "anchorOriginTopCenter" | "anchorOriginBottomCenter", string>>) => {
+declare const useClasses_11: (classesProp?: Partial<Record<"root" | "rootClosed" | "anchorOriginTopCenter" | "anchorOriginBottomCenter", string>>) => {
     classes: {
         root: string;
         rootClosed: string;
@@ -9095,7 +8664,21 @@ declare const useClasses_3: (classesProp?: Partial<Record<"root" | "rootClosed"
     cx: (...args: any) => string;
 };
-declare const useClasses_4: (classesProp?: Partial<Record<"default" | "action" | "error" | "warning" | "success" | "root" | "message" | "baseVariant" | "outContainer", string>>) => {
+declare const useClasses_12: (classesProp?: Partial<Record<"actionContainer" | "iconContainer" | "actionsInnerContainer" | "closeAction", string>>) => {
+    classes: {
+        actionContainer: string;
+        iconContainer: string;
+        actionsInnerContainer: string;
+        closeAction: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_13: (classesProp?: Partial<Record<"default" | "action" | "error" | "warning" | "success" | "root" | "message" | "baseVariant" | "outContainer", string>>) => {
     classes: {
         default: string;
         action: string;
@@ -9114,15 +8697,264 @@ declare const useClasses_4: (classesProp?: Partial<Record<"default" | "action" |
     cx: (...args: any) => string;
 };
-declare const useClasses_5: (classesProp?: Partial<Record<"root" | "topGroup" | "subGroup" | "combinator" | "topCombinator" | "combinatorButton" | "removeButton" | "topRemoveButton" | "topRemoveButtonDisabled" | "rulesContainer" | "subRulesContainer" | "actionButtonContainer" | "topActionButtonContainer" | "topRulesContainer" | "buttonBackground", string>>) => {
+declare const useClasses_14: (classesProp?: Partial<Record<"root" | "anchorOriginTopCenter" | "anchorOriginBottomCenter" | "anchorOriginTopRight" | "anchorOriginBottomRight" | "anchorOriginTopLeft" | "anchorOriginBottomLeft", string>>) => {
+    classes: {
+        root: string;
+        anchorOriginTopCenter: string;
+        anchorOriginBottomCenter: string;
+        anchorOriginTopRight: string;
+        anchorOriginBottomRight: string;
+        anchorOriginTopLeft: string;
+        anchorOriginBottomLeft: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_15: (classesProp?: Partial<Record<"default" | "action" | "error" | "warning" | "success" | "root" | "message" | "messageSpan" | "messageText" | "iconVariant", string>>) => {
+    classes: {
+        default: string;
+        action: string;
+        error: string;
+        warning: string;
+        success: string;
+        root: string;
+        message: string;
+        messageSpan: string;
+        messageText: string;
+        iconVariant: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_16: (classesProp?: Partial<Record<"snackItemRoot", string>>) => {
+    classes: {
+        snackItemRoot: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_17: (classesProp?: Partial<Record<"body" | "footer" | "head" | "expanded" | "selected" | "root" | "hover" | "striped" | "variantList" | "variantListHead", string>>) => {
+    classes: {
+        body: string;
+        footer: string;
+        head: string;
+        expanded: string;
+        selected: string;
+        root: string;
+        hover: string;
+        striped: string;
+        variantList: string;
+        variantListHead: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_18: (classesProp?: Partial<Record<"body" | "footer" | "head" | "root" | "resizable" | "sorted" | "stickyColumn" | "stickyColumnMostLeft" | "stickyColumnLeastRight" | "groupColumnMostLeft" | "groupColumnMostRight" | "resizing" | "alignLeft" | "alignCenter" | "alignRight" | "alignJustify" | "variantNone" | "variantCheckbox" | "variantActions" | "variantExpand" | "variantList" | "variantListHead" | "variantListactions" | "variantListcheckbox", string>>) => {
+    classes: {
+        body: string;
+        footer: string;
+        head: string;
+        root: string;
+        resizable: string;
+        sorted: string;
+        stickyColumn: string;
+        stickyColumnMostLeft: string;
+        stickyColumnLeastRight: string;
+        groupColumnMostLeft: string;
+        groupColumnMostRight: string;
+        resizing: string;
+        alignLeft: string;
+        alignCenter: string;
+        alignRight: string;
+        alignJustify: string;
+        variantNone: string;
+        variantCheckbox: string;
+        variantActions: string;
+        variantExpand: string;
+        variantList: string;
+        variantListHead: string;
+        variantListactions: string;
+        variantListcheckbox: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_19: (classesProp?: Partial<Record<"label" | "error" | "root" | "description" | "labelContainer", string>>) => {
     classes: {
+        label: string;
+        error: string;
         root: string;
+        description: string;
+        labelContainer: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_2: (classesProp?: Partial<Record<"root", string>>) => {
+    classes: {
+        root: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_20: (classesProp?: Partial<Record<"header" | "space" | "actionBar" | "dropdown" | "root" | "panel" | "baseDropdownSelection" | "rightSidePanel" | "leftSidePanel" | "applyButton", string>>) => {
+    classes: {
+        header: string;
+        space: string;
+        actionBar: string;
+        dropdown: string;
+        root: string;
+        panel: string;
+        baseDropdownSelection: string;
+        rightSidePanel: string;
+        leftSidePanel: string;
+        applyButton: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_21: (classesProp?: Partial<Record<"label" | "icon" | "action" | "error" | "dropdown" | "root" | "actionContainer" | "panel" | "description" | "labelContainer" | "leftContainer" | "rightContainer" | "dropdownHeaderInvalid" | "dropdownHeaderOpen", string>>) => {
+    classes: {
+        label: string;
+        icon: string;
+        action: string;
+        error: string;
+        dropdown: string;
+        root: string;
+        actionContainer: string;
+        panel: string;
+        description: string;
+        labelContainer: string;
+        leftContainer: string;
+        rightContainer: string;
+        dropdownHeaderInvalid: string;
+        dropdownHeaderOpen: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_22: (classesProp?: Partial<Record<"button" | "text" | "root" | "notSelected", string>>) => {
+    classes: {
+        button: string;
+        text: string;
+        root: string;
+        notSelected: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_23: (classesProp?: Partial<Record<"root" | "positionFixed" | "positionAbsolute", string>>) => {
+    classes: {
+        root: string;
+        positionFixed: string;
+        positionAbsolute: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_24: (classesProp?: Partial<Record<"button" | "text" | "selected" | "root", string>>) => {
+    classes: {
+        button: string;
+        text: string;
+        selected: string;
+        root: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_25: (classesProp?: Partial<Record<"selected" | "root" | "positionFixed" | "positionSticky" | "notSelectedRoot" | "notSelected", string>>) => {
+    classes: {
+        selected: string;
+        root: string;
+        positionFixed: string;
+        positionSticky: string;
+        notSelectedRoot: string;
+        notSelected: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_26: (classesProp?: Partial<Record<"button" | "input" | "text" | "icon" | "root" | "inputBorderContainer" | "inputRoot" | "largeText" | "textEmpty" | "iconVisible", string>>) => {
+    classes: {
+        button: string;
+        input: string;
+        text: string;
+        icon: string;
+        root: string;
+        inputBorderContainer: string;
+        inputRoot: string;
+        largeText: string;
+        textEmpty: string;
+        iconVisible: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_27: (classesProp?: Partial<Record<"root" | "removeButton" | "topGroup" | "subGroup" | "combinator" | "topCombinator" | "combinatorButton" | "topRemoveButton" | "topRemoveButtonDisabled" | "rulesContainer" | "subRulesContainer" | "actionButtonContainer" | "topActionButtonContainer" | "topRulesContainer" | "buttonBackground", string>>) => {
+    classes: {
+        root: string;
+        removeButton: string;
         topGroup: string;
         subGroup: string;
         combinator: string;
         topCombinator: string;
         combinatorButton: string;
-        removeButton: string;
         topRemoveButton: string;
         topRemoveButtonDisabled: string;
         rulesContainer: string;
@@ -9139,7 +8971,92 @@ declare const useClasses_5: (classesProp?: Partial<Record<"root" | "topGroup" |
     cx: (...args: any) => string;
 };
-declare const useClasses_6: (classesProp?: Partial<Record<"placeholder" | "label" | "icon" | "error" | "root" | "description" | "labelContainer" | "dropdownHeader" | "dropdownHeaderInvalid" | "dropdownHeaderOpen" | "placeholderDisabled" | "dropdownPanel" | "timePopperContainer", string>>) => {
+declare const useClasses_28: (classesProp?: Partial<Record<"label" | "colorPicker" | "root" | "panel" | "description" | "labelContainer" | "headerColorValue" | "headerColorIcon" | "colorPickerIcon" | "recommendedColorsRoot" | "dropdownRootIconOnly" | "headerColorIconOnly" | "pickerFields", string>>) => {
+    classes: {
+        label: string;
+        colorPicker: string;
+        root: string;
+        panel: string;
+        description: string;
+        labelContainer: string;
+        headerColorValue: string;
+        headerColorIcon: string;
+        colorPickerIcon: string;
+        recommendedColorsRoot: string;
+        dropdownRootIconOnly: string;
+        headerColorIconOnly: string;
+        pickerFields: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_29: (classesProp?: Partial<Record<"title" | "main" | "dot" | "controls" | "xs" | "root" | "actions" | "panel" | "fullscreen" | "closeButton" | "mainContainer" | "pageCounter" | "mainXs" | "mainFullscreen" | "counterContainer" | "counter" | "slideControls" | "slidesViewport" | "slidesContainer" | "dots" | "dotsXs" | "dotSelected" | "thumbnail" | "thumbnailSelected", string>>) => {
+    classes: {
+        title: string;
+        main: string;
+        dot: string;
+        controls: string;
+        xs: string;
+        root: string;
+        actions: string;
+        panel: string;
+        fullscreen: string;
+        closeButton: string;
+        mainContainer: string;
+        pageCounter: string;
+        mainXs: string;
+        mainFullscreen: string;
+        counterContainer: string;
+        counter: string;
+        slideControls: string;
+        slidesViewport: string;
+        slidesContainer: string;
+        dots: string;
+        dotsXs: string;
+        dotSelected: string;
+        thumbnail: string;
+        thumbnailSelected: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_3: (classesProp?: Partial<Record<"icon" | "selected" | "root" | "selectable" | "semanticContainer" | "semanticBar", string>>) => {
+    classes: {
+        icon: string;
+        selected: string;
+        root: string;
+        selectable: string;
+        semanticContainer: string;
+        semanticBar: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_30: (classesProp?: Partial<Record<"image" | "slide", string>>) => {
+    classes: {
+        image: string;
+        slide: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_31: (classesProp?: Partial<Record<"placeholder" | "label" | "icon" | "error" | "root" | "description" | "labelContainer" | "dropdownHeaderInvalid" | "dropdownHeaderOpen" | "dropdownHeader" | "placeholderDisabled" | "dropdownPanel" | "timePopperContainer", string>>) => {
     classes: {
         placeholder: string;
         label: string;
@@ -9148,9 +9065,9 @@ declare const useClasses_6: (classesProp?: Partial<Record<"placeholder" | "label
         root: string;
         description: string;
         labelContainer: string;
-        dropdownHeader: string;
         dropdownHeaderInvalid: string;
         dropdownHeaderOpen: string;
+        dropdownHeader: string;
         placeholderDisabled: string;
         dropdownPanel: string;
         timePopperContainer: string;
@@ -9162,6 +9079,106 @@ declare const useClasses_6: (classesProp?: Partial<Record<"placeholder" | "label
     cx: (...args: any) => string;
 };
+declare const useClasses_4: (classesProp?: Partial<Record<"title" | "content" | "action" | "root" | "titleShort" | "subheader", string>>) => {
+    classes: {
+        title: string;
+        content: string;
+        action: string;
+        root: string;
+        titleShort: string;
+        subheader: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_5: (classesProp?: Partial<Record<"content", string>>) => {
+    classes: {
+        content: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_6: (classesProp?: Partial<Record<"media" | "root", string>>) => {
+    classes: {
+        media: string;
+        root: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_7: (classesProp?: Partial<Record<"background" | "root" | "fullscreen" | "closeButton" | "paper", string>>) => {
+    classes: {
+        background: string;
+        root: string;
+        fullscreen: string;
+        closeButton: string;
+        paper: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_8: (classesProp?: Partial<Record<"input" | "label" | "icon" | "error" | "root" | "inputBorderContainer" | "inputRoot" | "inputRootFocused" | "inputRootDisabled" | "inputRootMultiline" | "description" | "labelContainer" | "adornmentsBox" | "adornmentButton" | "iconClear" | "hasSuggestions" | "suggestionsContainer" | "suggestionList" | "inputExtension", string>>) => {
+    classes: {
+        input: string;
+        label: string;
+        icon: string;
+        error: string;
+        root: string;
+        inputBorderContainer: string;
+        inputRoot: string;
+        inputRootFocused: string;
+        inputRootDisabled: string;
+        inputRootMultiline: string;
+        description: string;
+        labelContainer: string;
+        adornmentsBox: string;
+        adornmentButton: string;
+        iconClear: string;
+        hasSuggestions: string;
+        suggestionsContainer: string;
+        suggestionList: string;
+        inputExtension: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+declare const useClasses_9: (classesProp?: Partial<Record<"container" | "icon" | "root" | "baseContainer" | "iconSelected" | "menuListRoot" | "menuList", string>>) => {
+    classes: {
+        container: string;
+        icon: string;
+        root: string;
+        baseContainer: string;
+        iconSelected: string;
+        menuListRoot: string;
+        menuList: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
 export declare const useClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: HvClickOutsideEvent) => void) => void;
 export declare function useComputation(valueFn: any, valueFallback?: any): any[];
@@ -9331,7 +9348,7 @@ export declare interface UseHvRowSelectionTableRowProps {
 }
 export declare const useHvSnackbar: () => {
-    enqueueSnackbar: (message: any, options?: {}) => SnackbarKey;
+    enqueueSnackbar: (message: ReactNode | string | undefined, options?: {}) => SnackbarKey;
     closeSnackbar: (key?: SnackbarKey | undefined) => void;
 };