@hitachivantara/uikit-react-core 5.16.0 → 5.18.0

package/dist/types/index.d.ts

@@ -52,7 +52,6 @@ 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';
@@ -209,6 +208,8 @@ export declare const appSwitcherClasses: {
     closed: "HvAppSwitcher-closed";
 };
 
+export declare type Arrayable<T> = T | T[];
+
 declare type AsProp<C extends React.ElementType> = {
     component?: C;
 };
@@ -305,16 +306,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: {
@@ -413,26 +414,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: {
@@ -462,11 +463,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 }: {
@@ -518,12 +514,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";
 };
 
@@ -566,6 +562,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;
@@ -667,9 +680,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";
 };
@@ -706,7 +719,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";
@@ -1045,19 +1058,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. */
@@ -1365,11 +1373,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_2>;
+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_3>;
+export declare type HvBannerContentClasses = ExtractNames<typeof useClasses_13>;
 
 export declare interface HvBannerContentProps extends Omit<SnackbarContentProps, "variant" | "classes" | "onClose">, HvBaseProps {
     /** The message to display. */
@@ -1391,7 +1399,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"> {
@@ -1424,7 +1432,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";
@@ -1625,42 +1633,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. */
@@ -2199,22 +2174,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. */
@@ -2225,16 +2191,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. */
@@ -2249,12 +2208,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. */
@@ -2295,11 +2251,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_26>;
 
 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 */
@@ -2336,11 +2292,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_27>;
 
 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 */
@@ -2558,23 +2514,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_25>;
 
 export declare interface HvColorPickerProps {
     "aria-label"?: string;
@@ -2815,27 +2757,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_18>;
 
 export declare interface HvDatePickerProps extends HvBaseProps<HTMLDivElement, "onChange"> {
     /**
@@ -3006,7 +2930,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;
@@ -3022,13 +2946,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;
 
@@ -3280,24 +3198,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. */
@@ -3766,28 +3669,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_16>;
 
-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_17>;
 
 declare interface HvFilterGroupContentProps extends Omit<HvBaseDropdownProps, "onChange"> {
     description?: React.ReactNode;
@@ -3834,7 +3720,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. */
@@ -4335,12 +4221,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_21>;
 
 /**
  * Provides the user with additional descriptive text for the form element.
@@ -4366,20 +4247,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_23>;
 
 export declare interface HvInlineEditorProps extends HvBaseProps<HTMLDivElement, "onBlur" | "onChange"> {
     /** The value of the form element. */
@@ -4405,48 +4275,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: ({ classes: classesProp, 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 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. */
@@ -5054,34 +4885,9 @@ export declare interface HvOverflowTooltipProps extends HvBaseProps {
  * Pagination is the process of dividing a document into discrete pages. It relates to how users interact
  * with structured content on a website or application.
  */
-export declare const HvPagination: ({ classes, className, id, pages, page, showPageSizeOptions, pageSizeOptions, pageSize, showPageJump, canPrevious, canNext, onPageChange, onPageSizeChange, labels: labelsProp, showPageProps, navigationProps, currentPageInputProps, ...others }: HvPaginationProps) => JSX_2.Element;
+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 interface HvPaginationClasses {
-    /** Styles applied to the component root class. */
-    root?: string;
-    /** Styles applied to the page size selector container. */
-    pageSizeOptions?: string;
-    /** Styles applied to the page size selector dropdown element. */
-    pageSizeOptionsSelect?: string;
-    /** Styles applied to the element that holds the labels for the page size selector */
-    pageSizeTextContainer?: string;
-    /** Styles applied to the page navigation container. */
-    pageNavigator?: string;
-    /** Styles applied to the central page information container. */
-    pageInfo?: string;
-    /** Styles applied to the page selector input container. */
-    pageJump?: string;
-    /** Styles passed down to the page selector Input component as `input`. */
-    pageSizeInput?: string;
-    /** Styles passed down to the page selector Input root. */
-    pageSizeInputRoot?: string;
-    /** Styles passed down to the page selector Input component as `container`. */
-    pageSizeInputContainer?: string;
-    /** Styles applied to each navigation `HvButton` icon container. */
-    iconContainer?: string;
-    /** Styles applied to each navigation icon. */
-    icon?: string;
-}
+export declare type HvPaginationClasses = ExtractNames<typeof useClasses_10>;
 
 export declare interface HvPaginationLabels {
     /** The show label. */
@@ -5144,7 +4950,7 @@ export declare interface HvPaginationProps extends HvBaseProps {
     /** Extra properties passed to the input component representing the current pages. */
     currentPageInputProps?: HvInputProps;
     /** A Jss Object used to override or extend the styles applied to the component. */
-    classes?: HvPaginationClasses;
+    classes?: Partial<HvPaginationClasses>;
 }
 
 /**
@@ -5277,50 +5083,12 @@ export declare interface HvProviderProps {
 /**
  * **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 type HvQueryBuilderClasses = Partial<ExtractNames<typeof useClasses_24>>;
 
 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.
@@ -5351,6 +5119,11 @@ export declare interface HvQueryBuilderProps {
      * A flag indicating if the Query Builder is in read only mode.
      */
     readOnly?: boolean;
+    /**
+     * Override or extend the styles applied to the component.
+     * See CSS API tab for more details.
+     */
+    classes?: HvQueryBuilderClasses;
 }
 
 /**
@@ -5629,16 +5402,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_22>;
 
 export declare interface HvScrollToHorizontalOption {
     key?: string;
@@ -5689,13 +5455,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_20>;
 
 export declare interface HvScrollToVerticalOption {
     key?: string;
@@ -6395,58 +6157,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_15>;
 
 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. */
@@ -6753,28 +6464,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_14>;
 
 export declare interface HvTableRowProps extends HvBaseProps<HTMLTableRowElement, "children"> {
     /** Content to be rendered */
@@ -7232,7 +6922,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_4>;
+export declare type HvTimePickerClasses = ExtractNames<typeof useClasses_28>;
 
 export declare type HvTimePickerClassKey = "root" | "input" | "label" | "placeholder" | "timePopperContainer" | "separator" | "periodContainer" | "formElementRoot" | "dropdownPlaceholder" | "iconBaseRoot" | "error" | "labelContainer" | "description" | "dropdownHeaderInvalid" | "dropdownPlaceholderDisabled" | "dropdownHeaderOpen";
 
@@ -7240,7 +6930,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. */
@@ -7971,12 +7661,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_19>;
 
 /**
  * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.
@@ -8030,8 +7715,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";
@@ -8043,20 +7728,20 @@ 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";
 };
 
 export declare const isBrowser: (browsers: any) => boolean | null;
@@ -8321,8 +8006,8 @@ export declare const paginationClasses: {
     root: "HvPagination-root";
     iconContainer: "HvPagination-iconContainer";
     pageSizeOptions: "HvPagination-pageSizeOptions";
-    pageSizeOptionsSelect: "HvPagination-pageSizeOptionsSelect";
     pageSizeTextContainer: "HvPagination-pageSizeTextContainer";
+    pageSizeOptionsSelect: "HvPagination-pageSizeOptionsSelect";
     pageNavigator: "HvPagination-pageNavigator";
     pageInfo: "HvPagination-pageInfo";
     pageJump: "HvPagination-pageJump";
@@ -8375,12 +8060,12 @@ declare interface Query {
 
 export declare const queryBuilderClasses: {
     root: "HvQueryBuilder-root";
-    combinator: "HvQueryBuilder-combinator";
+    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";
@@ -8645,180 +8330,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";
@@ -8859,19 +8370,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: {
@@ -8905,21 +8415,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";
@@ -8972,9 +8482,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";
@@ -9022,9 +8532,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";
@@ -9104,9 +8614,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;
@@ -9115,7 +8640,29 @@ declare const useClasses: (classesProp?: Partial<Record<"root", string>>) => {
     cx: (...args: any) => string;
 };
 
-declare const useClasses_2: (classesProp?: Partial<Record<"root" | "rootClosed" | "anchorOriginTopCenter" | "anchorOriginBottomCenter", 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;
+        iconContainer: string;
+        pageSizeOptions: string;
+        pageSizeTextContainer: string;
+        pageSizeOptionsSelect: string;
+        pageNavigator: string;
+        pageInfo: string;
+        pageJump: string;
+        pageSizeInput: string;
+        pageSizeInputRoot: string;
+        pageSizeInputContainer: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_11: (classesProp?: Partial<Record<"root" | "rootClosed" | "anchorOriginTopCenter" | "anchorOriginBottomCenter", string>>) => {
     classes: {
         root: string;
         rootClosed: string;
@@ -9129,7 +8676,21 @@ declare const useClasses_2: (classesProp?: Partial<Record<"root" | "rootClosed"
     cx: (...args: any) => string;
 };
 
-declare const useClasses_3: (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;
@@ -9148,7 +8709,302 @@ declare const useClasses_3: (classesProp?: Partial<Record<"default" | "action" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_4: (classesProp?: Partial<Record<"placeholder" | "label" | "icon" | "error" | "root" | "description" | "labelContainer" | "dropdownHeader" | "dropdownHeaderInvalid" | "dropdownHeaderOpen" | "placeholderDisabled" | "dropdownPanel" | "timePopperContainer", string>>) => {
+declare const useClasses_14: (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_15: (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_16: (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_17: (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_18: (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_19: (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_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<"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_21: (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_22: (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_23: (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_24: (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;
+        topRemoveButton: string;
+        topRemoveButtonDisabled: string;
+        rulesContainer: string;
+        subRulesContainer: string;
+        actionButtonContainer: string;
+        topActionButtonContainer: string;
+        topRulesContainer: string;
+        buttonBackground: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_25: (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_26: (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_27: (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_28: (classesProp?: Partial<Record<"placeholder" | "label" | "icon" | "error" | "root" | "description" | "labelContainer" | "dropdownHeaderInvalid" | "dropdownHeaderOpen" | "dropdownHeader" | "placeholderDisabled" | "dropdownPanel" | "timePopperContainer", string>>) => {
     classes: {
         placeholder: string;
         label: string;
@@ -9157,9 +9013,9 @@ declare const useClasses_4: (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;
@@ -9171,6 +9027,122 @@ declare const useClasses_4: (classesProp?: Partial<Record<"placeholder" | "label
     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_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[];