@hitachivantara/uikit-react-core 5.21.0 → 5.22.1

package/dist/types/index.d.ts

@@ -15,7 +15,7 @@ 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 type { ComponentProps } from 'react';
 import { ContainerProps } from '@mui/material/Container';
 import type { Context } from 'react';
 import { CSSInterpolation } from '@emotion/serialize';
@@ -243,21 +243,21 @@ export declare const avatarClasses: {
     lg: "HvAvatar-lg";
     xl: "HvAvatar-xl";
     root: "HvAvatar-root";
-    circular: "HvAvatar-circular";
     fallback: "HvAvatar-fallback";
-    badge: "HvAvatar-badge";
     avatar: "HvAvatar-avatar";
+    badge: "HvAvatar-badge";
+    circular: "HvAvatar-circular";
 };
 
 export declare const badgeClasses: {
-    root: "HvBadgeClasses-root";
-    badge: "HvBadgeClasses-badge";
-    showCount: "HvBadgeClasses-showCount";
-    badgeContainer: "HvBadgeClasses-badgeContainer";
-    badgePosition: "HvBadgeClasses-badgePosition";
-    showLabel: "HvBadgeClasses-showLabel";
-    badgeIcon: "HvBadgeClasses-badgeIcon";
-    badgeOneDigit: "HvBadgeClasses-badgeOneDigit";
+    root: "HvBadge-root";
+    badge: "HvBadge-badge";
+    badgeContainer: "HvBadge-badgeContainer";
+    badgePosition: "HvBadge-badgePosition";
+    showCount: "HvBadge-showCount";
+    showLabel: "HvBadge-showLabel";
+    badgeIcon: "HvBadge-badgeIcon";
+    badgeOneDigit: "HvBadge-badgeOneDigit";
 };
 
 export declare const bannerClasses: {
@@ -396,11 +396,11 @@ export declare const buttonClasses: {
     focusVisible: "HvButton-focusVisible";
 };
 
-declare const buttonRadius: readonly ["none", "base", "round", "circle", "full"];
+export declare const buttonRadius: readonly ["none", "base", "round", "circle", "full"];
 
-declare const buttonSize: readonly ["xs", "sm", "md", "lg", "xl"];
+export declare const buttonSize: readonly ["xs", "sm", "md", "lg", "xl"];
 
-declare const buttonVariant: readonly ["primary", "primarySubtle", "primaryGhost", "secondarySubtle", "secondaryGhost", "semantic", "secondary", "ghost"];
+export declare const buttonVariant: readonly ["primary", "primarySubtle", "primaryGhost", "secondarySubtle", "secondaryGhost", "semantic", "secondary", "ghost"];
 
 export declare const calendarClasses: {
     root: "HvCalendar-root";
@@ -1064,7 +1064,7 @@ export declare interface HvActionBarProps extends HvBaseProps {
     classes?: HvActionBarClasses;
 }
 
-declare type HvActionContainerClasses = ExtractNames<typeof useClasses_23>;
+declare type HvActionContainerClasses = ExtractNames<typeof useClasses_25>;
 
 declare interface HvActionContainerProps extends HvBaseProps<HTMLButtonElement> {
     /** onClose function. */
@@ -1088,7 +1088,7 @@ export declare interface HvActionGeneric {
 
 export declare const HvActionsGeneric: ({ id, classes: classesProp, className, category, disabled, actions, actionsCallback, maxVisibleActions, ...others }: HvActionsGenericProps) => JSX_2.Element | null;
 
-export declare type HvActionsGenericClasses = ExtractNames<typeof useClasses_20>;
+export declare type HvActionsGenericClasses = ExtractNames<typeof useClasses_22>;
 
 export declare interface HvActionsGenericProps extends HvBaseProps {
     /** Button category. */
@@ -1167,7 +1167,7 @@ export declare interface HvAppSwitcherActionApplication {
     color?: string;
 }
 
-export declare type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses_16>;
+export declare type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses_18>;
 
 export declare interface HvAppSwitcherActionProps extends HvBaseProps {
     /** The application data to be used to render the Action object. */
@@ -1180,7 +1180,7 @@ export declare interface HvAppSwitcherActionProps extends HvBaseProps {
     classes?: HvAppSwitcherActionClasses;
 }
 
-export declare type HvAppSwitcherClasses = ExtractNames<typeof useClasses_15>;
+export declare type HvAppSwitcherClasses = ExtractNames<typeof useClasses_17>;
 
 export declare interface HvAppSwitcherProps extends HvBaseProps {
     /** Number of columns to render. One, two, or whatever fits the component's width. */
@@ -1215,24 +1215,9 @@ export declare type HvAtmosphereColors = Record<HvAtmosphereColorKeys, string>;
  * Avatars can be used to represent a user or a brand.
  * They can show an image, an icon or the initial letters of a name, for example.
  */
-export declare const HvAvatar: ({ className, style, classes, children: childrenProp, component, size, backgroundColor, color, src, srcSet, sizes, alt, imgProps, status, badge, variant, avatarProps, ...others }: HvAvatarProps) => JSX_2.Element;
+export declare const HvAvatar: ({ className, style, classes: classesProp, children: childrenProp, component, size, backgroundColor, color, src, srcSet, sizes, alt, imgProps, status, badge, variant, avatarProps, ...others }: HvAvatarProps) => JSX_2.Element;
 
-export declare interface HvAvatarClasses {
-    root?: string;
-    container?: string;
-    img?: string;
-    fallback?: string;
-    badge?: string;
-    avatar?: string;
-    status?: string;
-    xs?: string;
-    sm?: string;
-    md?: string;
-    lg?: string;
-    xl?: string;
-    circular?: string;
-    square?: string;
-}
+export declare type HvAvatarClasses = ExtractNames<typeof useClasses_5>;
 
 export declare interface HvAvatarProps extends HvBaseProps {
     /** Inline styles to be applied to the root element. */
@@ -1283,16 +1268,7 @@ export declare type HvAvatarVariant = "circular" | "square";
  */
 export declare const HvBadge: (props: HvBadgeProps) => JSX_2.Element;
 
-export declare interface HvBadgeClasses {
-    root?: string;
-    badgeContainer?: string;
-    badgePosition?: string;
-    badge?: string;
-    showCount?: string;
-    showLabel?: string;
-    badgeIcon?: string;
-    badgeOneDigit?: string;
-}
+export declare type HvBadgeClasses = ExtractNames<typeof useClasses_6>;
 
 export declare interface HvBadgeProps extends HvBaseProps {
     /**
@@ -1333,11 +1309,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_22>;
+export declare type HvBannerClasses = ExtractNames<typeof useClasses_24>;
 
 export declare const HvBannerContent: ForwardRefExoticComponent<Omit<HvBannerContentProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
-export declare type HvBannerContentClasses = ExtractNames<typeof useClasses_24>;
+export declare type HvBannerContentClasses = ExtractNames<typeof useClasses_26>;
 
 export declare interface HvBannerContentProps extends Omit<SnackbarContentProps, "variant" | "classes" | "onClose">, HvBaseProps {
     /** The message to display. */
@@ -1959,7 +1935,7 @@ export declare interface HvBulkActionsProps extends HvBaseProps {
  */
 export declare const HvButton: <C extends React_2.ElementType = "button">(props: HvButtonProps<C>) => React_2.ReactElement | null;
 
-export declare type HvButtonClasses = ExtractNames<typeof useClasses_5>;
+export declare type HvButtonClasses = ExtractNames<typeof useClasses_7>;
 
 export declare type HvButtonProps<C extends React_2.ElementType = "button"> = PolymorphicComponentRef<C, {
     /** Use the variant prop to change the visual style of the Button. */
@@ -2136,11 +2112,11 @@ export declare interface HvCalendarProps {
  */
 export declare const HvCard: ({ classes: classesProp, className, children, icon, selectable, selected, statusColor, bgcolor, ...others }: HvCardProps) => JSX_2.Element;
 
-export declare type HvCardClasses = ExtractNames<typeof useClasses_6>;
+export declare type HvCardClasses = ExtractNames<typeof useClasses_8>;
 
 export declare const HvCardContent: ({ id, classes: classesProp, className, children, onClick, ...others }: HvCardContentProps) => JSX_2.Element;
 
-export declare type HvCardContentClasses = ExtractNames<typeof useClasses_8>;
+export declare type HvCardContentClasses = ExtractNames<typeof useClasses_10>;
 
 export declare interface HvCardContentProps extends Omit<CardContentProps, "classes">, HvBaseProps {
     /** Id to be applied to the root node. */
@@ -2153,7 +2129,7 @@ export declare interface HvCardContentProps extends Omit<CardContentProps, "clas
 
 export declare const HvCardHeader: ({ classes: classesProp, className, title, subheader, icon, onClick, ...others }: HvCardHeaderProps) => JSX_2.Element;
 
-export declare type HvCardHeaderClasses = ExtractNames<typeof useClasses_7>;
+export declare type HvCardHeaderClasses = ExtractNames<typeof useClasses_9>;
 
 export declare interface HvCardHeaderProps extends Omit<CardHeaderProps, "classes">, HvBaseProps<HTMLDivElement, "title"> {
     /** The renderable content inside the title slot of the header. */
@@ -2170,7 +2146,7 @@ export declare interface HvCardHeaderProps extends Omit<CardHeaderProps, "classe
 
 export declare const HvCardMedia: ({ id, classes: classesProp, className, children, title, onClick, ...others }: HvCardMediaProps) => JSX_2.Element;
 
-export declare type HvCardMediaClasses = ExtractNames<typeof useClasses_9>;
+export declare type HvCardMediaClasses = ExtractNames<typeof useClasses_11>;
 
 export declare interface HvCardMediaProps extends Omit<CardMediaProps, "classes">, ImgHTMLAttributes<HTMLDivElement>, HvBaseProps<HTMLDivElement, "onClick" | "title"> {
     /** Id to be applied to the root node. */
@@ -2211,12 +2187,13 @@ export declare interface HvCardProps extends HvBaseProps {
  */
 export declare const HvCarousel: (props: HvCarouselProps) => JSX_2.Element;
 
-export declare type HvCarouselClasses = ExtractNames<typeof useClasses_41>;
+export declare type HvCarouselClasses = ExtractNames<typeof useClasses_43>;
 
 export declare const HvCarouselControls: (props: HvCarouselControlsProps) => JSX_2.Element;
 
-declare interface HvCarouselControlsProps extends HvBaseProps<HTMLDivElement>, Pick<HvPaginationProps, "page" | "pages" | "canPrevious" | "canNext">, Pick<HvCarouselProps, "showDots"> {
-    classes?: HvCarouselClasses;
+declare interface HvCarouselControlsProps extends HvBaseProps<HTMLDivElement>, Pick<HvPaginationProps, "page" | "pages" | "canPrevious" | "canNext"> {
+    showDots?: boolean;
+    classes?: ExtractNames<typeof useClasses_43>;
     actions?: ReactNode;
     onPreviousClick?: MouseEventHandler<HTMLButtonElement>;
     onNextClick?: MouseEventHandler<HTMLButtonElement>;
@@ -2263,7 +2240,7 @@ export declare interface HvCarouselProps extends HvBaseProps<HTMLDivElement, "ti
  */
 export declare const HvCarouselSlide: ({ classes: classesProp, className, children, size: flexBasis, src, alt, ...props }: HvCarouselSlideProps) => JSX_2.Element;
 
-export declare type HvCarouselSlideClasses = ExtractNames<typeof useClasses_42>;
+export declare type HvCarouselSlideClasses = ExtractNames<typeof useClasses_44>;
 
 export declare interface HvCarouselSlideProps extends ImgHTMLAttributes<HTMLImageElement> {
     /** A Jss Object used to override or extend the styles applied. */
@@ -2276,11 +2253,13 @@ export declare interface HvCarouselSlideProps extends ImgHTMLAttributes<HTMLImag
 
 export declare const HvCarouselThumbnails: ForwardRefExoticComponent<HvCarouselThumbnailsProps & RefAttributes<HTMLDivElement>>;
 
-declare interface HvCarouselThumbnailsProps extends HvBaseProps<HTMLDivElement, "children">, Pick<HvPaginationProps, "page" | "pages" | "canPrevious" | "canNext">, Pick<HvCarouselProps, "showDots" | "renderThumbnail"> {
+declare interface HvCarouselThumbnailsProps extends HvBaseProps<HTMLDivElement, "children">, Pick<HvPaginationProps, "page" | "pages" | "canPrevious" | "canNext"> {
     width?: CSSProperties["width"];
-    classes?: HvCarouselClasses;
+    classes?: ExtractNames<typeof useClasses_43>;
     onThumbnailClick?: (event: MouseEvent_2<HTMLButtonElement>, index: number) => void;
     thumbnailProps?: Partial<HvButtonProps>;
+    showDots?: boolean;
+    renderThumbnail?: (index: number) => React.ReactNode;
 }
 
 export declare type HvCategoricalColorKeys = "cat1" | "cat1_180" | "cat1_160" | "cat1_140" | "cat1_120" | "cat1_80" | "cat1_60" | "cat1_40" | "cat1_20" | "cat2" | "cat2_180" | "cat2_160" | "cat2_140" | "cat2_120" | "cat2_80" | "cat2_60" | "cat2_40" | "cat2_20" | "cat3" | "cat3_180" | "cat3_160" | "cat3_140" | "cat3_120" | "cat3_80" | "cat3_60" | "cat3_40" | "cat3_20" | "cat4" | "cat4_180" | "cat4_160" | "cat4_140" | "cat4_120" | "cat4_80" | "cat4_60" | "cat4_40" | "cat4_20" | "cat5" | "cat5_180" | "cat5_160" | "cat5_140" | "cat5_120" | "cat5_80" | "cat5_60" | "cat5_40" | "cat5_20" | "cat6" | "cat6_180" | "cat6_160" | "cat6_140" | "cat6_120" | "cat6_80" | "cat6_60" | "cat6_40" | "cat6_20" | "cat7" | "cat7_180" | "cat7_160" | "cat7_140" | "cat7_120" | "cat7_80" | "cat7_60" | "cat7_40" | "cat7_20" | "cat8" | "cat8_180" | "cat8_160" | "cat8_140" | "cat8_120" | "cat8_80" | "cat8_60" | "cat8_40" | "cat8_20" | "cat9" | "cat9_180" | "cat9_160" | "cat9_140" | "cat9_120" | "cat9_80" | "cat9_60" | "cat9_40" | "cat9_20" | "cat10" | "cat10_180" | "cat10_160" | "cat10_140" | "cat10_120" | "cat10_80" | "cat10_60" | "cat10_40" | "cat10_20" | "cat11" | "cat11_180" | "cat11_160" | "cat11_140" | "cat11_120" | "cat11_80" | "cat11_60" | "cat11_40" | "cat11_20" | "cat12" | "cat12_180" | "cat12_160" | "cat12_140" | "cat12_120" | "cat12_80" | "cat12_60" | "cat12_40" | "cat12_20" | "cat13" | "cat14" | "cat15" | "cat16" | "cat17" | "cat18" | "cat19" | "cat20";
@@ -2496,7 +2475,7 @@ export declare type HvClickOutsideEvent = MouseEvent | KeyboardEvent | TouchEven
  */
 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 type HvColorPickerClasses = ExtractNames<typeof useClasses_40>;
+export declare type HvColorPickerClasses = ExtractNames<typeof useClasses_42>;
 
 export declare interface HvColorPickerProps {
     "aria-label"?: string;
@@ -2726,7 +2705,7 @@ export declare function hvDateColumn<D extends object = Record<string, unknown>,
 
 export declare const HvDateColumnCell: ({ date, dateFormat, }: HvDateColumnCellProp) => JSX.Element;
 
-declare interface HvDateColumnCellProp {
+export declare interface HvDateColumnCellProp {
     /** The date's text representation format. */
     dateFormat?: string;
     /** Date to render. */
@@ -2739,7 +2718,7 @@ declare interface HvDateColumnCellProp {
  */
 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;
 
-export declare type HvDatePickerClasses = ExtractNames<typeof useClasses_32>;
+export declare type HvDatePickerClasses = ExtractNames<typeof useClasses_34>;
 
 export declare interface HvDatePickerProps extends HvBaseProps<HTMLDivElement, "onChange"> {
     /**
@@ -2913,7 +2892,7 @@ export declare type HvDatePickerStatus = HvFormStatus;
 
 export declare const HvDialog: ({ variant, classes: classesProp, className, id, children, open, onClose, firstFocusable, buttonTitle, fullscreen, disableBackdropClick, ...others }: HvDialogProps) => JSX_2.Element;
 
-export declare type HvDialogActionClasses = ExtractNames<typeof useClasses_12>;
+export declare type HvDialogActionClasses = ExtractNames<typeof useClasses_14>;
 
 export declare const HvDialogActions: ({ classes: classesProp, className, children, fullscreen, ...others }: HvDialogActionsProps) => JSX_2.Element;
 
@@ -2924,11 +2903,11 @@ export declare interface HvDialogActionsProps extends Omit<DialogActionsProps, "
     classes?: HvDialogActionClasses;
 }
 
-export declare type HvDialogClasses = ExtractNames<typeof useClasses_13>;
+export declare type HvDialogClasses = ExtractNames<typeof useClasses_15>;
 
 export declare const HvDialogContent: ({ classes: classesProp, className, children, indentContent, }: HvDialogContentProps) => JSX_2.Element;
 
-export declare type HvDialogContentClasses = ExtractNames<typeof useClasses_11>;
+export declare type HvDialogContentClasses = ExtractNames<typeof useClasses_13>;
 
 export declare interface HvDialogContentProps extends Omit<DialogContentProps, "classes">, HvBaseProps {
     /** Content should be indented in relationship to the Dialog title. */
@@ -2968,7 +2947,7 @@ export declare interface HvDialogProps extends Omit<DialogProps, "fullScreen" |
 
 export declare const HvDialogTitle: ({ classes: classesProp, className, children, variant, showIcon, customIcon, ...others }: HvDialogTitleProps) => JSX_2.Element;
 
-export declare type HvDialogTitleClasses = ExtractNames<typeof useClasses_10>;
+export declare type HvDialogTitleClasses = ExtractNames<typeof useClasses_12>;
 
 export declare interface HvDialogTitleProps extends Omit<DialogTitleProps, "variant" | "classes">, HvBaseProps<HTMLSpanElement, "color"> {
     /** Variant of the dialog title. */
@@ -2989,7 +2968,7 @@ export declare type HvDialogTitleVariant = "success" | "warning" | "error" | "in
  */
 export declare const HvDotPagination: ({ className, classes: classesProp, unselectedIcon, selectedIcon, pages, page, onPageChange, getItemAriaLabel, ...others }: HvDotPaginationProps) => JSX_2.Element;
 
-export declare type HvDotPaginationClasses = ExtractNames<typeof useClasses_21>;
+export declare type HvDotPaginationClasses = ExtractNames<typeof useClasses_23>;
 
 export declare interface HvDotPaginationProps extends Omit<HvRadioGroupProps, "classes"> {
     /**
@@ -3033,7 +3012,7 @@ export declare interface HvDotPaginationProps extends Omit<HvRadioGroupProps, "c
  */
 export declare const HvDrawer: ({ className, classes: classesProp, id, children, open, onClose, anchor, buttonTitle, ...others }: HvDrawerProps) => JSX_2.Element;
 
-export declare type HvDrawerClasses = ExtractNames<typeof useClasses_14>;
+export declare type HvDrawerClasses = ExtractNames<typeof useClasses_16>;
 
 export declare interface HvDrawerProps extends DrawerProps, Omit<DrawerProps, "classes">, HvBaseProps<HTMLDivElement> {
     /**
@@ -3098,7 +3077,7 @@ export declare function hvDropdownColumn<D extends object = Record<string, unkno
 
 export declare const HvDropdownColumnCell: ({ values, disabled, onChange, placeholder, dropdownProps, }: HvDropdownColumnCellProp) => JSX.Element;
 
-declare interface HvDropdownColumnCellProp {
+export declare interface HvDropdownColumnCellProp {
     /** Values to render in the dropdown. */
     values: HvListValue[];
     /** Placeholder text for when the dropdown is empty. */
@@ -3222,7 +3201,7 @@ declare interface HvDropdownListProps {
  */
 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 type HvDropDownMenuClasses = ExtractNames<typeof useClasses_18>;
+export declare type HvDropDownMenuClasses = ExtractNames<typeof useClasses_20>;
 
 export declare interface HvDropDownMenuProps extends HvBaseProps<HTMLDivElement, "onClick"> {
     /** Icon. */
@@ -3693,9 +3672,9 @@ export declare interface HvFileUploaderProps extends HvBaseProps {
  */
 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 type HvFilterGroupClasses = ExtractNames<typeof useClasses_30>;
+export declare type HvFilterGroupClasses = ExtractNames<typeof useClasses_32>;
 
-declare type HvFilterGroupContentClasses = ExtractNames<typeof useClasses_31>;
+declare type HvFilterGroupContentClasses = ExtractNames<typeof useClasses_33>;
 
 declare interface HvFilterGroupContentProps extends Omit<HvBaseDropdownProps, "onChange"> {
     description?: React.ReactNode;
@@ -4032,6 +4011,13 @@ export declare type HvGlobalActionsVariant = "global" | "section";
  * | lg         | [992-1199[    | 32              | 12                |
  * | xl         | [1200-...[    | 32              | 12                |
  *
+ * However, the number of columns is set to 12 for all breakpoints, as it serves most
+ * of the use cases and simplifies the implementation.
+ * To opt-in to the Design System directives, you can set the `columns` prop to `auto`.
+ *
+ * Also, the Design System specifications are omissive about the horizontal gutters.
+ * The HvGrid sets them to the same value as the vertical gutters, depending on the breakpoint.
+ * It can be overridden by setting the `rowSpacing` prop.
  */
 export declare const HvGrid: ForwardRefExoticComponent<Omit<HvGridProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
@@ -4073,7 +4059,7 @@ export declare interface HvGridClasses {
 
 export declare type HvGridDirection = "row" | "row-reverse" | "column" | "column-reverse";
 
-export declare interface HvGridProps extends Omit<GridProps, "classes">, HvBaseProps<HTMLDivElement, "color"> {
+export declare interface HvGridProps extends Omit<GridProps, "classes" | "columns">, HvBaseProps<HTMLDivElement, "color"> {
     /**
      * If `true`, the component will have the flex *container* behavior.
      * You should be wrapping *items* with a *container*.
@@ -4090,6 +4076,27 @@ export declare interface HvGridProps extends Omit<GridProps, "classes">, HvBaseP
      * (number between 0 and 10), breakpoint or auto.
      */
     spacing?: HvGridSpacing | number;
+    /**
+     * Defines the vertical space between the type item component. It can only be used on a type container component.
+     * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor
+     * (number between 0 and 10), breakpoint or auto.
+     * It overrides the value of the spacing prop.
+     */
+    rowSpacing?: HvGridSpacing | number;
+    /**
+     * Defines the horizontal space between the type item component. It can only be used on a type container component.
+     * Based in the 8x factor defined in the theme, it allows the definition of this factor based on the factor
+     * (number between 0 and 10), breakpoint or auto.
+     * It overrides the value of the spacing prop.
+     */
+    columnSpacing?: HvGridSpacing | number;
+    /**
+     * The number of columns.
+     * Defaults to a 12-column grid.
+     * The value "auto" implements the Design System directives in terms of variable number of columns.
+     * @default 12
+     */
+    columns?: "auto" | GridProps["columns"];
     /**
      * Defines the `flex-direction` style property.
      * It is applied for all screen sizes.
@@ -4182,9 +4189,25 @@ declare interface HvHeaderGroup<D extends object = Record<string, unknown>, H ex
     headers: Array<HvHeaderGroup<D, H>>;
 }
 
-export declare const HvHeaderMenuBar: ({ id, data, onClick, type, levels, currentLevel, className, }: HvMenuBarProps) => JSX_2.Element;
+export declare const HvHeaderMenuBar: ({ data, onClick, type, levels, currentLevel, ...others }: HvHeaderMenuBarProps) => JSX_2.Element;
 
-export declare const HvHeaderMenuItem: ({ id, item, type, onClick, levels, currentLevel, }: MenuItemProps) => JSX_2.Element;
+declare interface HvHeaderMenuBarProps extends HvBaseProps<HTMLDivElement, "onClick"> {
+    data: HvHeaderNavigationItemProp[];
+    type: string;
+    onClick?: (event: MouseEvent_2, selection: HvHeaderNavigationItemProp) => void;
+    levels: number;
+    currentLevel: number;
+}
+
+export declare const HvHeaderMenuItem: ({ id, item, type, onClick, levels, currentLevel, }: HvHeaderMenuItemProps) => JSX_2.Element;
+
+declare interface HvHeaderMenuItemProps extends HvBaseProps<HTMLDivElement, "onClick"> {
+    item: HvHeaderNavigationItemProp;
+    type?: string;
+    onClick?: (event: MouseEvent_2, selection: HvHeaderNavigationItemProp) => void;
+    levels: number;
+    currentLevel: number;
+}
 
 export declare const HvHeaderNavigation: ({ data, selected, onClick, className, classes, levels, ...others }: HvHeaderNavigationProps) => JSX_2.Element;
 
@@ -4244,7 +4267,7 @@ export declare interface HvHooks<D extends object = Record<string, unknown>, H e
     useFinalInstance: Array<(instance: HvTableInstance<D, H>) => void>;
 }
 
-export declare type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses_35>;
+export declare type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses_37>;
 
 /**
  * Provides the user with additional descriptive text for the form element.
@@ -4272,7 +4295,7 @@ export declare interface HvInfoMessageProps extends HvBaseProps {
  */
 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 type HvInlineEditorClasses = ExtractNames<typeof useClasses_37>;
+export declare type HvInlineEditorClasses = ExtractNames<typeof useClasses_39>;
 
 export declare interface HvInlineEditorProps extends HvBaseProps<HTMLDivElement, "onBlur" | "onChange"> {
     /** The value of the form element. */
@@ -4300,7 +4323,7 @@ export declare interface HvInlineEditorProps extends HvBaseProps<HTMLDivElement,
  */
 export declare const HvInput: React_2.ForwardRefExoticComponent<HvInputProps & React_2.RefAttributes<InputElement>>;
 
-export declare type HvInputClasses = ExtractNames<typeof useClasses_17>;
+export declare type HvInputClasses = ExtractNames<typeof useClasses_19>;
 
 export declare interface HvInputLabels {
     /** The label of the clear button. */
@@ -4828,14 +4851,6 @@ export declare interface HvMarkProperty {
     label?: string;
 }
 
-declare interface HvMenuBarProps extends HvBaseProps<HTMLDivElement, "onClick"> {
-    data: HvHeaderNavigationItemProp[];
-    type: string;
-    onClick?: (event: MouseEvent_2, selection: HvHeaderNavigationItemProp) => void;
-    levels: number;
-    currentLevel: number;
-}
-
 export declare type HvMeta<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer, Extension = never, M = HvMetaBase<D, H>> = [Extension] extends [never] ? M : M & Extension;
 
 declare interface HvMetaBase<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer> {
@@ -4915,7 +4930,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_19>;
+export declare type HvPaginationClasses = ExtractNames<typeof useClasses_21>;
 
 export declare interface HvPaginationLabels {
     /** The show label. */
@@ -5114,7 +5129,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 = ExtractNames<typeof useClasses_39>;
+export declare type HvQueryBuilderClasses = ExtractNames<typeof useClasses_41>;
 
 export declare interface HvQueryBuilderProps {
     attributes?: Record<string, Attribute>;
@@ -5432,7 +5447,7 @@ declare type HvRowPropGetter<D extends object = Record<string, unknown>, H exten
  */
 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 type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses_36>;
+export declare type HvScrollToHorizontalClasses = ExtractNames<typeof useClasses_38>;
 
 export declare interface HvScrollToHorizontalOption {
     key?: string;
@@ -5485,7 +5500,7 @@ export declare type HvScrollToTooltipPositions = "left" | "right" | "top" | "bot
  */
 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 type HvScrollToVerticalClasses = ExtractNames<typeof useClasses_34>;
+export declare type HvScrollToVerticalClasses = ExtractNames<typeof useClasses_36>;
 
 export declare interface HvScrollToVerticalOption {
     key?: string;
@@ -5801,11 +5816,11 @@ export declare interface HvSliderProps extends HvBaseProps<HTMLDivElement, "onCh
  */
 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 type HvSnackbarClasses = ExtractNames<typeof useClasses_25>;
+export declare type HvSnackbarClasses = ExtractNames<typeof useClasses_27>;
 
 export declare const HvSnackbarContent: ForwardRefExoticComponent<Omit<HvSnackbarContentProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
-export declare type HvSnackbarContentClasses = ExtractNames<typeof useClasses_26>;
+export declare type HvSnackbarContentClasses = ExtractNames<typeof useClasses_28>;
 
 export declare interface HvSnackbarContentProps extends Omit<SnackbarContentProps, "variant" | "action" | "classes">, HvBaseProps {
     /** The message to display. */
@@ -5859,7 +5874,7 @@ export declare interface HvSnackbarProps extends Omit<SnackbarProps, "action" |
 
 export declare const HvSnackbarProvider: ({ children, notistackClassesOverride, maxSnack, autoHideDuration, anchorOrigin, classes: classesProp, className, ...others }: HvSnackbarProviderProps) => JSX_2.Element;
 
-export declare type HvSnackbarProviderClasses = ExtractNames<typeof useClasses_27>;
+export declare type HvSnackbarProviderClasses = ExtractNames<typeof useClasses_29>;
 
 export declare interface HvSnackbarProviderProps {
     /** Your component tree. */
@@ -5974,7 +5989,7 @@ export declare function hvSwitchColumn<D extends object = Record<string, unknown
 
 export declare const HvSwitchColumnCell: ({ checked, value, switchLabel, falseLabel, trueLabel, switchProps, }: HvSwitchColumnCellProp) => JSX.Element;
 
-declare interface HvSwitchColumnCellProp {
+export declare interface HvSwitchColumnCellProp {
     /** Whether the switch is checked or not. */
     checked: boolean;
     /** The switch label. */
@@ -6155,7 +6170,7 @@ export declare const HvTableCell: ForwardRefExoticComponent<HvTableCellProps & R
 
 export declare type HvTableCellAlign = "center" | "inherit" | "justify" | "left" | "right";
 
-export declare type HvTableCellClasses = ExtractNames<typeof useClasses_29>;
+export declare type HvTableCellClasses = ExtractNames<typeof useClasses_31>;
 
 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. */
@@ -6462,7 +6477,7 @@ export declare interface HvTableProps extends TableHTMLAttributes<HTMLTableEleme
  */
 export declare const HvTableRow: ForwardRefExoticComponent<HvTableRowProps & RefAttributes<HTMLElement>>;
 
-export declare type HvTableRowClasses = ExtractNames<typeof useClasses_28>;
+export declare type HvTableRowClasses = ExtractNames<typeof useClasses_30>;
 
 export declare interface HvTableRowProps extends HvBaseProps<HTMLTableRowElement, "children"> {
     /** Content to be rendered */
@@ -6873,7 +6888,7 @@ declare interface HvThemeProviderProps {
  */
 export declare const HvTimeAgo: ({ classes: classesProp, className, timestamp, locale: localeProp, component: Component, emptyElement, disableRefresh, showSeconds, justText, ...others }: HvTimeAgoProps) => JSX_2.Element;
 
-export declare type HvTimeAgoClasses = ExtractNames<typeof useClasses_38>;
+export declare type HvTimeAgoClasses = ExtractNames<typeof useClasses_40>;
 
 export declare interface HvTimeAgoProps extends HvBaseProps<HTMLElement, "children"> {
     /**
@@ -6918,7 +6933,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_43>;
+export declare type HvTimePickerClasses = ExtractNames<typeof useClasses_45>;
 
 export declare type HvTimePickerClassKey = "root" | "input" | "label" | "placeholder" | "timePopperContainer" | "separator" | "periodContainer" | "formElementRoot" | "dropdownPlaceholder" | "iconBaseRoot" | "error" | "labelContainer" | "description" | "dropdownHeaderInvalid" | "dropdownPlaceholderDisabled" | "dropdownHeaderOpen";
 
@@ -7625,7 +7640,7 @@ export declare interface HvVerticalNavigationTreeViewProps {
     children?: React.ReactNode;
 }
 
-export declare type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses_33>;
+export declare type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses_35>;
 
 /**
  * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.
@@ -7661,7 +7676,7 @@ export declare interface HvWarningTextProps extends HvBaseProps {
     classes?: HvWarningTextClasses;
 }
 
-export declare const iconVariant: (variant: HvDialogTitleVariant, color?: IconBaseProps["color"], semantic?: true) => JSX_2.Element | null;
+export declare const iconVariant: (variant: "success" | "warning" | "error" | "info" | "default", color?: IconBaseProps["color"], semantic?: true) => JSX_2.Element | null;
 
 declare type IdType<D> = StringKey<D> | string;
 
@@ -7821,14 +7836,6 @@ export declare const loginClasses: {
     formContainer: "HvLogin-formContainer";
 };
 
-declare interface MenuItemProps extends HvBaseProps<HTMLDivElement, "onClick"> {
-    item: HvHeaderNavigationItemProp;
-    type?: string;
-    onClick?: (event: MouseEvent_2, selection: HvHeaderNavigationItemProp) => void;
-    levels: number;
-    currentLevel: number;
-}
-
 export declare const multiButtonClasses: {
     button: "HvMultiButton-button";
     vertical: "HvMultiButton-vertical";
@@ -8541,7 +8548,30 @@ declare const useClasses: (classesProp?: Partial<Record<"link" | "body" | "label
     cx: (...args: any) => string;
 };
 
-declare const useClasses_10: (classesProp?: Partial<Record<"root" | "fullscreen" | "messageContainer" | "textWithIcon", string>>, addStatic?: boolean) => {
+declare const useClasses_10: (classesProp?: Partial<Record<"content", string>>, addStatic?: boolean) => {
+    classes: {
+        content: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_11: (classesProp?: Partial<Record<"media" | "root", string>>, addStatic?: boolean) => {
+    classes: {
+        media: string;
+        root: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_12: (classesProp?: Partial<Record<"root" | "fullscreen" | "messageContainer" | "textWithIcon", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         fullscreen: string;
@@ -8555,7 +8585,7 @@ declare const useClasses_10: (classesProp?: Partial<Record<"root" | "fullscreen"
     cx: (...args: any) => string;
 };
 
-declare const useClasses_11: (classesProp?: Partial<Record<"root" | "textContent", string>>, addStatic?: boolean) => {
+declare const useClasses_13: (classesProp?: Partial<Record<"root" | "textContent", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         textContent: string;
@@ -8567,7 +8597,7 @@ declare const useClasses_11: (classesProp?: Partial<Record<"root" | "textContent
     cx: (...args: any) => string;
 };
 
-declare const useClasses_12: (classesProp?: Partial<Record<"spacing" | "root" | "fullscreen", string>>, addStatic?: boolean) => {
+declare const useClasses_14: (classesProp?: Partial<Record<"spacing" | "root" | "fullscreen", string>>, addStatic?: boolean) => {
     classes: {
         spacing: string;
         root: string;
@@ -8580,7 +8610,7 @@ declare const useClasses_12: (classesProp?: Partial<Record<"spacing" | "root" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_13: (classesProp?: Partial<Record<"background" | "error" | "warning" | "success" | "root" | "fullscreen" | "closeButton" | "paper" | "statusBar", string>>, addStatic?: boolean) => {
+declare const useClasses_15: (classesProp?: Partial<Record<"background" | "error" | "warning" | "success" | "root" | "fullscreen" | "closeButton" | "paper" | "statusBar", string>>, addStatic?: boolean) => {
     classes: {
         background: string;
         error: string;
@@ -8599,7 +8629,7 @@ declare const useClasses_13: (classesProp?: Partial<Record<"background" | "error
     cx: (...args: any) => string;
 };
 
-declare const useClasses_14: (classesProp?: Partial<Record<"background" | "root" | "closeButton" | "paper", string>>, addStatic?: boolean) => {
+declare const useClasses_16: (classesProp?: Partial<Record<"background" | "root" | "closeButton" | "paper", string>>, addStatic?: boolean) => {
     classes: {
         background: string;
         root: string;
@@ -8613,7 +8643,7 @@ declare const useClasses_14: (classesProp?: Partial<Record<"background" | "root"
     cx: (...args: any) => string;
 };
 
-declare const useClasses_15: (classesProp?: Partial<Record<"title" | "open" | "single" | "root" | "item" | "itemSelected" | "itemDisabled" | "itemTrigger" | "itemIcon" | "itemTitle" | "itemInfoIcon" | "actionsContainer" | "footerContainer" | "closed" | "dual" | "fluid", string>>, addStatic?: boolean) => {
+declare const useClasses_17: (classesProp?: Partial<Record<"title" | "open" | "single" | "root" | "item" | "itemSelected" | "itemDisabled" | "itemTrigger" | "itemIcon" | "itemTitle" | "itemInfoIcon" | "actionsContainer" | "footerContainer" | "closed" | "dual" | "fluid", string>>, addStatic?: boolean) => {
     classes: {
         title: string;
         open: string;
@@ -8639,7 +8669,7 @@ declare const useClasses_15: (classesProp?: Partial<Record<"title" | "open" | "s
     cx: (...args: any) => string;
 };
 
-declare const useClasses_16: (classesProp?: Partial<Record<"title" | "typography" | "icon" | "disabled" | "selected" | "root" | "iconUrl" | "iconInfo", string>>, addStatic?: boolean) => {
+declare const useClasses_18: (classesProp?: Partial<Record<"title" | "typography" | "icon" | "disabled" | "selected" | "root" | "iconUrl" | "iconInfo", string>>, addStatic?: boolean) => {
     classes: {
         title: string;
         typography: string;
@@ -8657,7 +8687,7 @@ declare const useClasses_16: (classesProp?: Partial<Record<"title" | "typography
     cx: (...args: any) => string;
 };
 
-declare const useClasses_17: (classesProp?: Partial<Record<"input" | "label" | "icon" | "error" | "root" | "inputBorderContainer" | "inputRoot" | "inputRootFocused" | "inputRootDisabled" | "inputRootMultiline" | "description" | "labelContainer" | "adornmentsBox" | "adornmentButton" | "iconClear" | "hasSuggestions" | "suggestionsContainer" | "suggestionList" | "inputExtension", string>>, addStatic?: boolean) => {
+declare const useClasses_19: (classesProp?: Partial<Record<"input" | "label" | "icon" | "error" | "root" | "inputBorderContainer" | "inputRoot" | "inputRootFocused" | "inputRootDisabled" | "inputRootMultiline" | "description" | "labelContainer" | "adornmentsBox" | "adornmentButton" | "iconClear" | "hasSuggestions" | "suggestionsContainer" | "suggestionList" | "inputExtension", string>>, addStatic?: boolean) => {
     classes: {
         input: string;
         label: string;
@@ -8686,7 +8716,33 @@ declare const useClasses_17: (classesProp?: Partial<Record<"input" | "label" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_18: (classesProp?: Partial<Record<"container" | "icon" | "root" | "baseContainer" | "iconSelected" | "menuListRoot" | "menuList", string>>, addStatic?: boolean) => {
+declare const useClasses_2: (classesProp?: Partial<Record<"input" | "disabled" | "readOnly" | "invalid" | "root" | "resizable" | "inputBorderContainer" | "inputRootInvalid" | "inputRootReadOnly" | "inputRoot" | "inputRootFocused" | "inputRootDisabled" | "inputRootMultiline" | "inputDisabled" | "inputReadOnly" | "inputResizable", string>>, addStatic?: boolean) => {
+    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;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_20: (classesProp?: Partial<Record<"container" | "icon" | "root" | "baseContainer" | "iconSelected" | "menuListRoot" | "menuList", string>>, addStatic?: boolean) => {
     classes: {
         container: string;
         icon: string;
@@ -8703,7 +8759,7 @@ declare const useClasses_18: (classesProp?: Partial<Record<"container" | "icon"
     cx: (...args: any) => string;
 };
 
-declare const useClasses_19: (classesProp?: Partial<Record<"icon" | "root" | "pageSizeOptions" | "iconContainer" | "pageSizeTextContainer" | "pageSizeOptionsSelect" | "pageNavigator" | "pageInfo" | "pageJump" | "pageSizeInput" | "pageSizeInputRoot" | "pageSizeInputContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_21: (classesProp?: Partial<Record<"icon" | "root" | "pageSizeOptions" | "iconContainer" | "pageSizeTextContainer" | "pageSizeOptionsSelect" | "pageNavigator" | "pageInfo" | "pageJump" | "pageSizeInput" | "pageSizeInputRoot" | "pageSizeInputContainer", string>>, addStatic?: boolean) => {
     classes: {
         icon: string;
         root: string;
@@ -8725,33 +8781,7 @@ declare const useClasses_19: (classesProp?: Partial<Record<"icon" | "root" | "pa
     cx: (...args: any) => string;
 };
 
-declare const useClasses_2: (classesProp?: Partial<Record<"input" | "disabled" | "readOnly" | "invalid" | "root" | "resizable" | "inputBorderContainer" | "inputRootInvalid" | "inputRootReadOnly" | "inputRoot" | "inputRootFocused" | "inputRootDisabled" | "inputRootMultiline" | "inputDisabled" | "inputReadOnly" | "inputResizable", string>>, addStatic?: boolean) => {
-    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;
-        (...args: CSSInterpolation[]): string;
-    };
-    cx: (...args: any) => string;
-};
-
-declare const useClasses_20: (classesProp?: Partial<Record<"button" | "dropDownMenu" | "root" | "actionContainer" | "dropDownMenuButton" | "dropDownMenuButtonSelected", string>>, addStatic?: boolean) => {
+declare const useClasses_22: (classesProp?: Partial<Record<"button" | "dropDownMenu" | "root" | "actionContainer" | "dropDownMenuButton" | "dropDownMenuButtonSelected", string>>, addStatic?: boolean) => {
     classes: {
         button: string;
         dropDownMenu: string;
@@ -8767,7 +8797,7 @@ declare const useClasses_20: (classesProp?: Partial<Record<"button" | "dropDownM
     cx: (...args: any) => string;
 };
 
-declare const useClasses_21: (classesProp?: Partial<Record<"radio" | "horizontal" | "icon" | "root" | "radioRoot", string>>, addStatic?: boolean) => {
+declare const useClasses_23: (classesProp?: Partial<Record<"radio" | "horizontal" | "icon" | "root" | "radioRoot", string>>, addStatic?: boolean) => {
     classes: {
         radio: string;
         horizontal: string;
@@ -8782,7 +8812,7 @@ declare const useClasses_21: (classesProp?: Partial<Record<"radio" | "horizontal
     cx: (...args: any) => string;
 };
 
-declare const useClasses_22: (classesProp?: Partial<Record<"root" | "rootClosed" | "anchorOriginTopCenter" | "anchorOriginBottomCenter", string>>, addStatic?: boolean) => {
+declare const useClasses_24: (classesProp?: Partial<Record<"root" | "rootClosed" | "anchorOriginTopCenter" | "anchorOriginBottomCenter", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         rootClosed: string;
@@ -8796,7 +8826,7 @@ declare const useClasses_22: (classesProp?: Partial<Record<"root" | "rootClosed"
     cx: (...args: any) => string;
 };
 
-declare const useClasses_23: (classesProp?: Partial<Record<"actionContainer" | "iconContainer" | "actionsInnerContainer" | "closeAction", string>>, addStatic?: boolean) => {
+declare const useClasses_25: (classesProp?: Partial<Record<"actionContainer" | "iconContainer" | "actionsInnerContainer" | "closeAction", string>>, addStatic?: boolean) => {
     classes: {
         actionContainer: string;
         iconContainer: string;
@@ -8810,7 +8840,7 @@ declare const useClasses_23: (classesProp?: Partial<Record<"actionContainer" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_24: (classesProp?: Partial<Record<"default" | "action" | "error" | "warning" | "success" | "root" | "message" | "baseVariant" | "outContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_26: (classesProp?: Partial<Record<"default" | "action" | "error" | "warning" | "success" | "root" | "message" | "baseVariant" | "outContainer", string>>, addStatic?: boolean) => {
     classes: {
         default: string;
         action: string;
@@ -8829,7 +8859,7 @@ declare const useClasses_24: (classesProp?: Partial<Record<"default" | "action"
     cx: (...args: any) => string;
 };
 
-declare const useClasses_25: (classesProp?: Partial<Record<"root" | "anchorOriginTopCenter" | "anchorOriginBottomCenter" | "anchorOriginTopRight" | "anchorOriginBottomRight" | "anchorOriginTopLeft" | "anchorOriginBottomLeft", string>>, addStatic?: boolean) => {
+declare const useClasses_27: (classesProp?: Partial<Record<"root" | "anchorOriginTopCenter" | "anchorOriginBottomCenter" | "anchorOriginTopRight" | "anchorOriginBottomRight" | "anchorOriginTopLeft" | "anchorOriginBottomLeft", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         anchorOriginTopCenter: string;
@@ -8846,7 +8876,7 @@ declare const useClasses_25: (classesProp?: Partial<Record<"root" | "anchorOrigi
     cx: (...args: any) => string;
 };
 
-declare const useClasses_26: (classesProp?: Partial<Record<"default" | "action" | "error" | "warning" | "success" | "root" | "message" | "messageSpan" | "messageText" | "iconVariant", string>>, addStatic?: boolean) => {
+declare const useClasses_28: (classesProp?: Partial<Record<"default" | "action" | "error" | "warning" | "success" | "root" | "message" | "messageSpan" | "messageText" | "iconVariant", string>>, addStatic?: boolean) => {
     classes: {
         default: string;
         action: string;
@@ -8866,7 +8896,7 @@ declare const useClasses_26: (classesProp?: Partial<Record<"default" | "action"
     cx: (...args: any) => string;
 };
 
-declare const useClasses_27: (classesProp?: Partial<Record<"snackItemRoot", string>>, addStatic?: boolean) => {
+declare const useClasses_29: (classesProp?: Partial<Record<"snackItemRoot", string>>, addStatic?: boolean) => {
     classes: {
         snackItemRoot: string;
     };
@@ -8877,7 +8907,18 @@ declare const useClasses_27: (classesProp?: Partial<Record<"snackItemRoot", stri
     cx: (...args: any) => string;
 };
 
-declare const useClasses_28: (classesProp?: Partial<Record<"body" | "footer" | "head" | "expanded" | "selected" | "root" | "hover" | "striped" | "variantList" | "variantListHead", string>>, addStatic?: boolean) => {
+declare const useClasses_3: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+    classes: {
+        root: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_30: (classesProp?: Partial<Record<"body" | "footer" | "head" | "expanded" | "selected" | "root" | "hover" | "striped" | "variantList" | "variantListHead", string>>, addStatic?: boolean) => {
     classes: {
         body: string;
         footer: string;
@@ -8897,7 +8938,7 @@ declare const useClasses_28: (classesProp?: Partial<Record<"body" | "footer" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_29: (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>>, addStatic?: boolean) => {
+declare const useClasses_31: (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>>, addStatic?: boolean) => {
     classes: {
         body: string;
         footer: string;
@@ -8931,18 +8972,7 @@ declare const useClasses_29: (classesProp?: Partial<Record<"body" | "footer" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_3: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
-    classes: {
-        root: string;
-    };
-    css: {
-        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
-        (...args: CSSInterpolation[]): string;
-    };
-    cx: (...args: any) => string;
-};
-
-declare const useClasses_30: (classesProp?: Partial<Record<"label" | "error" | "root" | "description" | "labelContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_32: (classesProp?: Partial<Record<"label" | "error" | "root" | "description" | "labelContainer", string>>, addStatic?: boolean) => {
     classes: {
         label: string;
         error: string;
@@ -8957,7 +8987,7 @@ declare const useClasses_30: (classesProp?: Partial<Record<"label" | "error" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_31: (classesProp?: Partial<Record<"header" | "space" | "actionBar" | "dropdown" | "root" | "panel" | "baseDropdownSelection" | "rightSidePanel" | "leftSidePanel" | "applyButton", string>>, addStatic?: boolean) => {
+declare const useClasses_33: (classesProp?: Partial<Record<"header" | "space" | "actionBar" | "dropdown" | "root" | "panel" | "baseDropdownSelection" | "rightSidePanel" | "leftSidePanel" | "applyButton", string>>, addStatic?: boolean) => {
     classes: {
         header: string;
         space: string;
@@ -8977,7 +9007,7 @@ declare const useClasses_31: (classesProp?: Partial<Record<"header" | "space" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_32: (classesProp?: Partial<Record<"label" | "icon" | "action" | "error" | "dropdown" | "root" | "actionContainer" | "panel" | "description" | "labelContainer" | "leftContainer" | "rightContainer" | "dropdownHeaderInvalid" | "dropdownHeaderOpen", string>>, addStatic?: boolean) => {
+declare const useClasses_34: (classesProp?: Partial<Record<"label" | "icon" | "action" | "error" | "dropdown" | "root" | "actionContainer" | "panel" | "description" | "labelContainer" | "leftContainer" | "rightContainer" | "dropdownHeaderInvalid" | "dropdownHeaderOpen", string>>, addStatic?: boolean) => {
     classes: {
         label: string;
         icon: string;
@@ -9001,7 +9031,7 @@ declare const useClasses_32: (classesProp?: Partial<Record<"label" | "icon" | "a
     cx: (...args: any) => string;
 };
 
-declare const useClasses_33: (classesProp?: Partial<Record<"button" | "text" | "root" | "notSelected", string>>, addStatic?: boolean) => {
+declare const useClasses_35: (classesProp?: Partial<Record<"button" | "text" | "root" | "notSelected", string>>, addStatic?: boolean) => {
     classes: {
         button: string;
         text: string;
@@ -9015,7 +9045,7 @@ declare const useClasses_33: (classesProp?: Partial<Record<"button" | "text" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_34: (classesProp?: Partial<Record<"root" | "positionFixed" | "positionAbsolute", string>>, addStatic?: boolean) => {
+declare const useClasses_36: (classesProp?: Partial<Record<"root" | "positionFixed" | "positionAbsolute", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         positionFixed: string;
@@ -9028,7 +9058,7 @@ declare const useClasses_34: (classesProp?: Partial<Record<"root" | "positionFix
     cx: (...args: any) => string;
 };
 
-declare const useClasses_35: (classesProp?: Partial<Record<"button" | "text" | "selected" | "root", string>>, addStatic?: boolean) => {
+declare const useClasses_37: (classesProp?: Partial<Record<"button" | "text" | "selected" | "root", string>>, addStatic?: boolean) => {
     classes: {
         button: string;
         text: string;
@@ -9042,7 +9072,7 @@ declare const useClasses_35: (classesProp?: Partial<Record<"button" | "text" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_36: (classesProp?: Partial<Record<"selected" | "root" | "positionFixed" | "positionSticky" | "notSelectedRoot" | "notSelected", string>>, addStatic?: boolean) => {
+declare const useClasses_38: (classesProp?: Partial<Record<"selected" | "root" | "positionFixed" | "positionSticky" | "notSelectedRoot" | "notSelected", string>>, addStatic?: boolean) => {
     classes: {
         selected: string;
         root: string;
@@ -9058,7 +9088,7 @@ declare const useClasses_36: (classesProp?: Partial<Record<"selected" | "root" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_37: (classesProp?: Partial<Record<"button" | "input" | "text" | "icon" | "root" | "inputBorderContainer" | "inputRoot" | "largeText" | "textEmpty" | "iconVisible", string>>, addStatic?: boolean) => {
+declare const useClasses_39: (classesProp?: Partial<Record<"button" | "input" | "text" | "icon" | "root" | "inputBorderContainer" | "inputRoot" | "largeText" | "textEmpty" | "iconVisible", string>>, addStatic?: boolean) => {
     classes: {
         button: string;
         input: string;
@@ -9078,8 +9108,12 @@ declare const useClasses_37: (classesProp?: Partial<Record<"button" | "input" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_38: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+declare const useClasses_4: (classesProp?: Partial<Record<"hidden" | "label" | "container" | "disabled" | "root", string>>, addStatic?: boolean) => {
     classes: {
+        hidden: string;
+        label: string;
+        container: string;
+        disabled: string;
         root: string;
     };
     css: {
@@ -9089,7 +9123,18 @@ declare const useClasses_38: (classesProp?: Partial<Record<"root", string>>, add
     cx: (...args: any) => string;
 };
 
-declare const useClasses_39: (classesProp?: Partial<Record<"root" | "removeButton" | "topGroup" | "subGroup" | "combinator" | "topCombinator" | "combinatorButton" | "topRemoveButton" | "topRemoveButtonDisabled" | "rulesContainer" | "subRulesContainer" | "actionButtonContainer" | "topActionButtonContainer" | "topRulesContainer" | "buttonBackground", string>>, addStatic?: boolean) => {
+declare const useClasses_40: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+    classes: {
+        root: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_41: (classesProp?: Partial<Record<"root" | "removeButton" | "topGroup" | "subGroup" | "combinator" | "topCombinator" | "combinatorButton" | "topRemoveButton" | "topRemoveButtonDisabled" | "rulesContainer" | "subRulesContainer" | "actionButtonContainer" | "topActionButtonContainer" | "topRulesContainer" | "buttonBackground", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         removeButton: string;
@@ -9114,22 +9159,7 @@ declare const useClasses_39: (classesProp?: Partial<Record<"root" | "removeButto
     cx: (...args: any) => string;
 };
 
-declare const useClasses_4: (classesProp?: Partial<Record<"hidden" | "label" | "container" | "disabled" | "root", string>>, addStatic?: boolean) => {
-    classes: {
-        hidden: string;
-        label: string;
-        container: string;
-        disabled: string;
-        root: string;
-    };
-    css: {
-        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
-        (...args: CSSInterpolation[]): string;
-    };
-    cx: (...args: any) => string;
-};
-
-declare const useClasses_40: (classesProp?: Partial<Record<"label" | "colorPicker" | "root" | "panel" | "description" | "labelContainer" | "headerColorValue" | "headerColorIcon" | "colorPickerIcon" | "recommendedColorsRoot" | "dropdownRootIconOnly" | "headerColorIconOnly" | "pickerFields", string>>, addStatic?: boolean) => {
+declare const useClasses_42: (classesProp?: Partial<Record<"label" | "colorPicker" | "root" | "panel" | "description" | "labelContainer" | "headerColorValue" | "headerColorIcon" | "colorPickerIcon" | "recommendedColorsRoot" | "dropdownRootIconOnly" | "headerColorIconOnly" | "pickerFields", string>>, addStatic?: boolean) => {
     classes: {
         label: string;
         colorPicker: string;
@@ -9152,7 +9182,7 @@ declare const useClasses_40: (classesProp?: Partial<Record<"label" | "colorPicke
     cx: (...args: any) => string;
 };
 
-declare const useClasses_41: (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>>, addStatic?: boolean) => {
+declare const useClasses_43: (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>>, addStatic?: boolean) => {
     classes: {
         title: string;
         main: string;
@@ -9186,7 +9216,7 @@ declare const useClasses_41: (classesProp?: Partial<Record<"title" | "main" | "d
     cx: (...args: any) => string;
 };
 
-declare const useClasses_42: (classesProp?: Partial<Record<"image" | "slide", string>>, addStatic?: boolean) => {
+declare const useClasses_44: (classesProp?: Partial<Record<"image" | "slide", string>>, addStatic?: boolean) => {
     classes: {
         image: string;
         slide: string;
@@ -9198,7 +9228,7 @@ declare const useClasses_42: (classesProp?: Partial<Record<"image" | "slide", st
     cx: (...args: any) => string;
 };
 
-declare const useClasses_43: (classesProp?: Partial<Record<"placeholder" | "label" | "icon" | "error" | "root" | "description" | "labelContainer" | "dropdownHeaderInvalid" | "dropdownHeaderOpen" | "dropdownHeader" | "placeholderDisabled" | "dropdownPanel" | "timePopperContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_45: (classesProp?: Partial<Record<"placeholder" | "label" | "icon" | "error" | "root" | "description" | "labelContainer" | "dropdownHeaderInvalid" | "dropdownHeaderOpen" | "dropdownHeader" | "placeholderDisabled" | "dropdownPanel" | "timePopperContainer", string>>, addStatic?: boolean) => {
     classes: {
         placeholder: string;
         label: string;
@@ -9221,14 +9251,22 @@ declare const useClasses_43: (classesProp?: Partial<Record<"placeholder" | "labe
     cx: (...args: any) => string;
 };
 
-declare const useClasses_5: (classesProp?: Partial<Record<"icon" | "disabled" | "root" | "startIcon" | "endIcon" | "focusVisible", string>>, addStatic?: boolean) => {
+declare const useClasses_5: (classesProp?: Partial<Record<"img" | "status" | "container" | "square" | "xs" | "sm" | "md" | "lg" | "xl" | "root" | "fallback" | "avatar" | "badge" | "circular", string>>, addStatic?: boolean) => {
     classes: {
-        icon: string;
-        disabled: string;
+        img: string;
+        status: string;
+        container: string;
+        square: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
         root: string;
-        startIcon: string;
-        endIcon: string;
-        focusVisible: string;
+        fallback: string;
+        avatar: string;
+        badge: string;
+        circular: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -9237,14 +9275,16 @@ declare const useClasses_5: (classesProp?: Partial<Record<"icon" | "disabled" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_6: (classesProp?: Partial<Record<"icon" | "selected" | "root" | "selectable" | "semanticContainer" | "semanticBar", string>>, addStatic?: boolean) => {
+declare const useClasses_6: (classesProp?: Partial<Record<"root" | "badge" | "badgeContainer" | "badgePosition" | "showCount" | "showLabel" | "badgeIcon" | "badgeOneDigit", string>>, addStatic?: boolean) => {
     classes: {
-        icon: string;
-        selected: string;
         root: string;
-        selectable: string;
-        semanticContainer: string;
-        semanticBar: string;
+        badge: string;
+        badgeContainer: string;
+        badgePosition: string;
+        showCount: string;
+        showLabel: string;
+        badgeIcon: string;
+        badgeOneDigit: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -9253,14 +9293,14 @@ declare const useClasses_6: (classesProp?: Partial<Record<"icon" | "selected" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_7: (classesProp?: Partial<Record<"title" | "content" | "action" | "root" | "titleShort" | "subheader", string>>, addStatic?: boolean) => {
+declare const useClasses_7: (classesProp?: Partial<Record<"icon" | "disabled" | "root" | "startIcon" | "endIcon" | "focusVisible", string>>, addStatic?: boolean) => {
     classes: {
-        title: string;
-        content: string;
-        action: string;
+        icon: string;
+        disabled: string;
         root: string;
-        titleShort: string;
-        subheader: string;
+        startIcon: string;
+        endIcon: string;
+        focusVisible: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -9269,9 +9309,14 @@ declare const useClasses_7: (classesProp?: Partial<Record<"title" | "content" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_8: (classesProp?: Partial<Record<"content", string>>, addStatic?: boolean) => {
+declare const useClasses_8: (classesProp?: Partial<Record<"icon" | "selected" | "root" | "selectable" | "semanticContainer" | "semanticBar", string>>, addStatic?: boolean) => {
     classes: {
-        content: string;
+        icon: string;
+        selected: string;
+        root: string;
+        selectable: string;
+        semanticContainer: string;
+        semanticBar: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -9280,10 +9325,14 @@ declare const useClasses_8: (classesProp?: Partial<Record<"content", string>>, a
     cx: (...args: any) => string;
 };
 
-declare const useClasses_9: (classesProp?: Partial<Record<"media" | "root", string>>, addStatic?: boolean) => {
+declare const useClasses_9: (classesProp?: Partial<Record<"title" | "content" | "action" | "root" | "titleShort" | "subheader", string>>, addStatic?: boolean) => {
     classes: {
-        media: string;
+        title: string;
+        content: string;
+        action: string;
         root: string;
+        titleShort: string;
+        subheader: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -9294,7 +9343,7 @@ declare const useClasses_9: (classesProp?: Partial<Record<"media" | "root", stri
 
 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[];
+export declare const useComputation: (valueFn: any, valueFallback?: any) => any[];
 
 export declare const useControlled: (controlledProp: any, initialState: any) => any[];
 
@@ -9304,7 +9353,7 @@ export declare type UseFiltersProps = (<D extends object = Record<string, unknow
     pluginName: string;
 };
 
-export declare function useForkRef(refA: any, refB: any): ((refValue: any) => void) | null;
+export declare const useForkRef: (refA: any, refB: any) => ((refValue: any) => void) | null;
 
 export declare type UseGlobalFilterProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {
     pluginName: string;