@hitachivantara/uikit-react-core 5.66.13 → 5.67.0

package/dist/types/index.d.ts

@@ -12,6 +12,7 @@ import { ColumnInterface } from 'react-table';
 import { ComponentProps } from 'react';
 import { ContainerProps } from '@mui/material/Container';
 import { Context } from 'react';
+import { createClasses } from '@hitachivantara/uikit-react-shared';
 import { CSSInterpolation } from '@emotion/serialize';
 import { CSSInterpolation as CSSInterpolation_2 } from '@emotion/css/dist/declarations/src/create-instance';
 import { default as default_2 } from 'react';
@@ -28,6 +29,7 @@ import { ds3 } from '@hitachivantara/uikit-styles';
 import { ds5 } from '@hitachivantara/uikit-styles';
 import { EmotionCache } from '@emotion/cache';
 import { EmotionContext } from '@hitachivantara/uikit-react-shared';
+import { ExtractNames } from '@hitachivantara/uikit-react-shared';
 import { ForwardRefExoticComponent } from 'react';
 import { GridProps } from '@mui/material/Grid';
 import { Hooks } from 'react-table';
@@ -55,8 +57,7 @@ import { HvThemeContextValue } from '@hitachivantara/uikit-react-shared';
 import { HvThemeStructure } from '@hitachivantara/uikit-styles';
 import { IconBaseProps } from '@hitachivantara/uikit-react-icons';
 import { IdType as IdType_2 } from 'react-table';
-import { InputBaseComponentProps } from '@mui/material';
-import { InputBaseComponentProps as InputBaseComponentProps_2 } from '@mui/material/InputBase';
+import { InputBaseComponentProps } from '@mui/material/InputBase';
 import { InputBaseProps } from '@mui/material/InputBase';
 import { InputProps } from '@mui/material/Input';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
@@ -102,7 +103,7 @@ import { TooltipProps } from '@mui/material/Tooltip';
 import { TransitionProps } from '@mui/material/transitions';
 import { UseColumnOrderInstanceProps } from 'react-table';
 import { UseColumnOrderState } from 'react-table';
-import { useEffect } from 'react';
+import { useCss } from '@hitachivantara/uikit-react-shared';
 import { UseExpandedHooks } from 'react-table';
 import { UseExpandedInstanceProps } from 'react-table';
 import { UseExpandedOptions } from 'react-table';
@@ -125,6 +126,7 @@ import { UseGroupByInstanceProps } from 'react-table';
 import { UseGroupByOptions } from 'react-table';
 import { UseGroupByRowProps } from 'react-table';
 import { UseGroupByState } from 'react-table';
+import { useLayoutEffect } from 'react';
 import { UsePaginationInstanceProps } from 'react-table';
 import { UsePaginationOptions } from 'react-table';
 import { UsePaginationState } from 'react-table';
@@ -145,6 +147,7 @@ import { UseSortByInstanceProps } from 'react-table';
 import { UseSortByOptions } from 'react-table';
 import { UseSortByState } from 'react-table';
 import { UseTableHeaderGroupProps } from 'react-table';
+import { useTheme } from '@hitachivantara/uikit-react-shared';
 
 declare type Accessor<D extends object> = (originalRow: D, index: number, sub: {
     subRows: D[];
@@ -589,20 +592,7 @@ export declare const controlsClasses: {
     leftSection: "HvControls-leftSection";
 };
 
-/** Utility function to create classes for a component. */
-export declare function createClasses<Name extends string, ClassName extends string>(
-/** Component name in PascalCase (ie. `HvTableCell`). */
-name: Name, stylesObject: Record<ClassName, CSSInterpolation>): {
-    useClasses: (classesProp?: Partial<Record<ClassName, string>>, addStatic?: boolean) => {
-        classes: { [P in ClassName]: string; };
-        css: {
-            (template: TemplateStringsArray, ...args: CSSInterpolation_2[]): string;
-            (...args: CSSInterpolation_2[]): string;
-        };
-        cx: (...args: any) => string;
-    };
-    staticClasses: { [P in ClassName]: `${Name}-${P}`; };
-};
+export { createClasses }
 
 /**
  * Creates a customized theme based on the base theme and customizations given.
@@ -642,6 +632,28 @@ export declare type DeepPartial<T> = T extends {} ? Partial<{
 }> : T;
 
 declare const DEFAULT_LABELS: {
+    dropdownMenu: string;
+};
+
+declare const DEFAULT_LABELS_10: {
+    /** The text at the top of the kpi. */
+    title: string;
+    /** The text in the middle of the kpi. */
+    indicator: string | undefined;
+    /** The text to the right of the indicator. */
+    unit: string | undefined;
+    /** The text to the right of the visual comparison. */
+    comparisonIndicatorInfo: string | undefined;
+};
+
+declare const DEFAULT_LABELS_2: {
+    close: string;
+    fullscreen: string;
+    backwards: string;
+    forwards: string;
+};
+
+declare const DEFAULT_LABELS_3: {
     /** The show label. */
     pageSizePrev: string;
     /** Indicate the units of the page size selection. */
@@ -670,7 +682,7 @@ declare const DEFAULT_LABELS: {
     lastPage: string;
 };
 
-declare const DEFAULT_LABELS_2: {
+declare const DEFAULT_LABELS_4: {
     /** The label of the clear button. */
     clearButtonLabel: string;
     /** The label of the reveal password button. */
@@ -683,12 +695,17 @@ declare const DEFAULT_LABELS_2: {
     searchButtonLabel: string;
 };
 
-declare const DEFAULT_LABELS_3: {
+declare const DEFAULT_LABELS_5: {
+    backwards: string;
+    forwards: string;
+};
+
+declare const DEFAULT_LABELS_6: {
     recommendedColorsLabel: string;
     customColorsLabel: string;
 };
 
-declare const DEFAULT_LABELS_4: {
+declare const DEFAULT_LABELS_7: {
     /** Label for overwrite the default header behavior. */
     select: string | undefined;
     /** Label used for the All checkbox action. */
@@ -703,7 +720,7 @@ declare const DEFAULT_LABELS_4: {
     multiSelectionConjunction: string;
 };
 
-declare const DEFAULT_LABELS_5: {
+declare const DEFAULT_LABELS_8: {
     /** Apply button label. */
     applyLabel: string;
     /** Cancel button label. */
@@ -714,7 +731,7 @@ declare const DEFAULT_LABELS_5: {
     invalidDateLabel: string;
 };
 
-declare const DEFAULT_LABELS_6: {
+declare const DEFAULT_LABELS_9: {
     /** Apply button label. */
     applyLabel: string;
     /** Cancel button label. */
@@ -731,17 +748,6 @@ declare const DEFAULT_LABELS_6: {
     multiSelectionConjunction: string;
 };
 
-declare const DEFAULT_LABELS_7: {
-    /** The text at the top of the kpi. */
-    title: string;
-    /** The text in the middle of the kpi. */
-    indicator: string | undefined;
-    /** The text to the right of the indicator. */
-    unit: string | undefined;
-    /** The text to the right of the visual comparison. */
-    comparisonIndicatorInfo: string | undefined;
-};
-
 declare type DefaultAttributes = (typeof defaultAttributes)[number];
 
 declare const defaultAttributes: readonly ["boolean", "numeric", "dateandtime", "text", "textarea"];
@@ -869,10 +875,7 @@ export declare const emptyStateClasses: {
     textContainer: "HvEmptyState-textContainer";
 };
 
-export declare type ExtractNames<T extends (...args: any) => {
-    classes: Record<string, any>;
-    cx: any;
-}> = Partial<ReturnType<T>["classes"]>;
+export { ExtractNames }
 
 export declare const fileClasses: {
     root: "HvFile-root";
@@ -931,7 +934,7 @@ export declare const findDescriptors: (children: default_2.ReactNode, descriptor
 declare type FixComponentProps<T> = T extends any ? T : never;
 
 /** React.forwardRef with fixed type declarations */
-export declare function fixedForwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactNode): (props: P & React.RefAttributes<T>) => React.ReactNode;
+export declare function fixedForwardRef<T, P = {}>(render: (props: P, ref: React.Ref<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;
 
 export declare const focusClasses: {
     root: "HvFocus-root";
@@ -972,8 +975,6 @@ export declare const getBorderStyles: (color: string, rowBorderRadius: string) =
     };
 };
 
-export declare const getClasses: <T extends string, N extends string>(keys: T[], name: N) => { [P in T]: `${N}-${P}`; };
-
 export declare const getComponentName: (Component: React.FC) => string;
 
 /** Get the first and last focusable element from a node. */
@@ -1137,7 +1138,7 @@ export declare interface HvActionBarProps extends HvBaseProps {
     classes?: HvActionBarClasses;
 }
 
-declare type HvActionContainerClasses = ExtractNames<typeof useClasses_28>;
+declare type HvActionContainerClasses = ExtractNames<typeof useClasses_29>;
 
 declare interface HvActionContainerProps extends HvBaseProps<HTMLButtonElement>, Pick<Partial<HvActionsGenericProps>, "onAction"> {
     /** Function called when clicking on the close button. */
@@ -1198,6 +1199,8 @@ export declare interface HvActionsGenericProps extends HvBaseProps {
     onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;
     /** The maximum number of visible actions before they're collapsed into a dropdown menu. */
     maxVisibleActions?: number;
+    /** Props to be applied to the dropdown menu. */
+    dropdownMenuProps?: Partial<HvDropDownMenuProps>;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvActionsGenericClasses;
 }
@@ -1257,7 +1260,7 @@ export declare interface HvAppSwitcherActionApplication {
     color?: HvColorAny;
 }
 
-export declare type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses_23>;
+export declare type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses_24>;
 
 export declare interface HvAppSwitcherActionProps extends HvBaseProps {
     /** The application data to be used to render the Action object. */
@@ -1270,7 +1273,7 @@ export declare interface HvAppSwitcherActionProps extends HvBaseProps {
     classes?: HvAppSwitcherActionClasses;
 }
 
-export declare type HvAppSwitcherClasses = ExtractNames<typeof useClasses_22>;
+export declare type HvAppSwitcherClasses = ExtractNames<typeof useClasses_23>;
 
 export declare interface HvAppSwitcherProps extends HvBaseProps {
     /** Number of columns to render. One, two, or whatever fits the component's width. */
@@ -1309,14 +1312,14 @@ export declare type HvAtmosphereColors = Record<HvAtmosphereColorKeys, string>;
  */
 export declare const HvAvatar: ForwardRefExoticComponent<HvAvatarProps & RefAttributes<any>>;
 
-export declare type HvAvatarClasses = ExtractNames<typeof useClasses_24>;
+export declare type HvAvatarClasses = ExtractNames<typeof useClasses_25>;
 
 /**
  * The AvatarGroup component is used to group multiple avatars.
  */
 export declare const HvAvatarGroup: ForwardRefExoticComponent<HvAvatarGroupProps & RefAttributes<HTMLDivElement>>;
 
-export declare type HvAvatarGroupClasses = ExtractNames<typeof useClasses_25>;
+export declare type HvAvatarGroupClasses = ExtractNames<typeof useClasses_26>;
 
 export declare interface HvAvatarGroupProps extends HvBaseProps {
     /** A Jss Object used to override or extend the styles applied to the component. */
@@ -1389,7 +1392,7 @@ export declare type HvAvatarVariant = "circular" | "square";
  */
 export declare const HvBadge: (props: HvBadgeProps) => JSX_2.Element;
 
-export declare type HvBadgeClasses = ExtractNames<typeof useClasses_26>;
+export declare type HvBadgeClasses = ExtractNames<typeof useClasses_27>;
 
 export declare interface HvBadgeProps extends HvBaseProps {
     /**
@@ -1430,11 +1433,11 @@ export declare const HvBanner: (props: HvBannerProps) => JSX_2.Element;
 
 export declare type HvBannerActionPosition = "auto" | "inline" | "bottom-right";
 
-export declare type HvBannerClasses = ExtractNames<typeof useClasses_27>;
+export declare type HvBannerClasses = ExtractNames<typeof useClasses_28>;
 
 export declare const HvBannerContent: ForwardRefExoticComponent<Omit<HvBannerContentProps, "ref"> & RefAttributes<HTMLDivElement>>;
 
-export declare type HvBannerContentClasses = ExtractNames<typeof useClasses_29>;
+export declare type HvBannerContentClasses = ExtractNames<typeof useClasses_30>;
 
 export declare interface HvBannerContentProps extends Omit<SnackbarContentProps, "variant" | "classes" | "onClose"> {
     /** The message to display. */
@@ -1522,7 +1525,7 @@ export declare type HvBannerVariant = "success" | "warning" | "error" | "default
  */
 export declare const HvBaseCheckBox: ForwardRefExoticComponent<Omit<HvBaseCheckBoxProps, "ref"> & RefAttributes<HTMLButtonElement>>;
 
-export declare type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses_30>;
+export declare type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses_31>;
 
 export declare interface HvBaseCheckBoxProps extends Omit<CheckboxProps, "onChange" | "classes"> {
     /**
@@ -1723,7 +1726,7 @@ export declare interface HvBaseInputProps extends Omit<InputProps, "onChange" |
     /** Denotes if the input is in an invalid state. */
     invalid?: boolean;
     /** Attributes applied to the input element. */
-    inputProps?: InputBaseComponentProps_2;
+    inputProps?: InputBaseComponentProps;
     /** Allows passing a ref to the underlying input */
     inputRef?: InputBaseProps["inputRef"];
     /** A Jss Object used to override or extend the styles applied to the component. */
@@ -1741,7 +1744,7 @@ export declare type HvBaseProps<E extends HTMLElement = HTMLDivElement, K extend
  */
 export declare const HvBaseRadio: ForwardRefExoticComponent<Omit<HvBaseRadioProps, "ref"> & RefAttributes<HTMLButtonElement>>;
 
-export declare type HvBaseRadioClasses = ExtractNames<typeof useClasses_31>;
+export declare type HvBaseRadioClasses = ExtractNames<typeof useClasses_32>;
 
 export declare interface HvBaseRadioProps extends Omit<RadioProps, "onChange" | "classes"> {
     /**
@@ -1819,7 +1822,7 @@ export declare interface HvBaseRadioProps extends Omit<RadioProps, "onChange" |
  */
 export declare const HvBaseSwitch: ForwardRefExoticComponent<Omit<HvBaseSwitchProps, "ref"> & RefAttributes<HTMLButtonElement>>;
 
-export declare type HvBaseSwitchClasses = ExtractNames<typeof useClasses_32>;
+export declare type HvBaseSwitchClasses = ExtractNames<typeof useClasses_33>;
 
 export declare interface HvBaseSwitchProps extends Omit<SwitchProps, "onChange" | "classes"> {
     /**
@@ -1904,7 +1907,7 @@ export declare const HvBox: <C extends React.ElementType = "div">(props: {
     children?: ReactNode | undefined;
 } & (Omit<PropsWithoutRef<ComponentProps<C>>, "style" | "component" | "sx"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "style" | "component" | "sx"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
-} & RefAttributes<unknown>) => React.ReactNode;
+} & RefAttributes<unknown>) => React.ReactElement | null;
 
 export declare type HvBoxProps<C extends React.ElementType = "div"> = PolymorphicComponentRef<C, {
     style?: React.CSSProperties;
@@ -1916,7 +1919,7 @@ export declare type HvBoxProps<C extends React.ElementType = "div"> = Polymorphi
  */
 export declare const HvBreadCrumb: (props: HvBreadCrumbProps) => JSX_2.Element;
 
-export declare type HvBreadCrumbClasses = ExtractNames<typeof useClasses_33>;
+export declare type HvBreadCrumbClasses = ExtractNames<typeof useClasses_34>;
 
 export declare interface HvBreadCrumbPathElement extends Record<string, any> {
     label: string;
@@ -2029,7 +2032,7 @@ export declare const HvButton: <C extends React.ElementType = "button">(props: {
     children?: ReactNode | undefined;
 } & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
-} & RefAttributes<unknown>) => React.ReactNode;
+} & RefAttributes<unknown>) => React.ReactElement | null;
 
 export declare type HvButtonClasses = ExtractNames<typeof useClasses_12>;
 
@@ -2280,6 +2283,8 @@ declare interface HvCarouselControlsProps extends HvBaseProps<HTMLDivElement>, P
     actions?: React.ReactNode;
     onPreviousClick?: React.MouseEventHandler<HTMLButtonElement>;
     onNextClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /** Labels used on the component. */
+    labels?: Partial<typeof DEFAULT_LABELS_5>;
 }
 
 export declare interface HvCarouselProps extends HvBaseProps<HTMLDivElement, "title" | "onChange"> {
@@ -2317,6 +2322,10 @@ export declare interface HvCarouselProps extends HvBaseProps<HTMLDivElement, "ti
     renderThumbnail?: (index: number) => React.ReactNode;
     /** The callback fired when the active slide changes. */
     onChange?: (index: number) => void;
+    /** The callback fired fullscreen is toggled. */
+    onFullscreen?: (event: React.MouseEvent<HTMLButtonElement>, isFullscreen: boolean) => void;
+    /** Labels used on the component. */
+    labels?: Partial<typeof DEFAULT_LABELS_2>;
 }
 
 /**
@@ -2591,7 +2600,7 @@ export declare interface HvColorPickerProps {
     /** If `true`, the labels are shown. If `false`, they are not shown. */
     showLabels?: boolean;
     /** An object containing all the labels. */
-    labels?: Partial<typeof DEFAULT_LABELS_3>;
+    labels?: Partial<typeof DEFAULT_LABELS_6>;
     /** Icon type for the input's end adornment. */
     dropdownIcon?: "arrow" | "colorPicker";
     /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */
@@ -2726,7 +2735,7 @@ export declare interface HvControlsProps extends HvBaseProps {
     classes?: HvControlsClasses;
 }
 
-export declare interface HvControlsViewConfiguration extends HvExtraProps {
+export declare interface HvControlsViewConfiguration extends Record<string, any> {
     id?: string;
     label?: string;
     icon?: React.ReactNode;
@@ -2798,7 +2807,7 @@ export declare interface HvDatePickerProps extends Omit<HvFormElementProps, "onC
     /**
      * An object containing all the labels for the datepicker.
      */
-    labels?: Partial<typeof DEFAULT_LABELS_5>;
+    labels?: Partial<typeof DEFAULT_LABELS_8>;
     /**
      * The initial value of the input when in single calendar mode.
      */
@@ -3058,7 +3067,7 @@ export declare interface HvDropdownColumnCellProp {
     dropdownProps?: HvDropdownProps;
 }
 
-export declare type HvDropdownLabels = Partial<typeof DEFAULT_LABELS_4>;
+export declare type HvDropdownLabels = Partial<typeof DEFAULT_LABELS_7>;
 
 /** @deprecated use `HvDropdownLabels` instead */
 export declare type HvDropdownLabelsProps = HvDropdownLabels;
@@ -3138,7 +3147,7 @@ declare interface HvDropdownListProps {
  */
 export declare const HvDropDownMenu: (props: HvDropDownMenuProps) => JSX_2.Element;
 
-export declare type HvDropDownMenuClasses = ExtractNames<typeof useClasses_34>;
+export declare type HvDropDownMenuClasses = ExtractNames<typeof useClasses_22>;
 
 export declare interface HvDropDownMenuProps extends HvBaseProps<HTMLDivElement, "onClick" | "onToggle"> {
     /** Icon. */
@@ -3180,6 +3189,8 @@ export declare interface HvDropDownMenuProps extends HvBaseProps<HTMLDivElement,
     size?: HvButtonSize;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvDropDownMenuClasses;
+    /** An object containing all the labels. */
+    labels?: Partial<typeof DEFAULT_LABELS>;
 }
 
 export declare interface HvDropdownProps extends Omit<HvFormElementProps, "value" | "onChange">, Pick<HvBaseDropdownProps, "placement" | "popperProps" | "disablePortal" | "variableWidth" | "expanded" | "defaultExpanded"> {
@@ -3354,10 +3365,10 @@ export declare interface HvEmptyStateProps extends HvBaseProps<HTMLDivElement, "
 
 export declare function hvExpandColumn<D extends object = Record<string, unknown>, H extends HvTableHeaderRenderer | undefined = HvTableHeaderRenderer>(col: HvTableColumnConfig<D, H>, expandRowButtonAriaLabel: string, collapseRowButtonAriaLabel: string, getCanRowExpand?: (row: HvRowInstance<D, H>) => boolean, ExpandedIcon?: React.ReactNode, CollapsedIcon?: React.ReactNode): HvTableColumnConfig<D, H>;
 
-/** This type combines the HvExtraProps and DeepPartial types */
+/** This type extends DeepPartial to allow any extra properties */
 export declare type HvExtraDeepPartialProps<T> = Partial<{
-    [P in keyof T]: DeepPartial<T[P]> & HvExtraProps;
-}> & HvExtraProps;
+    [P in keyof T]: DeepPartial<T[P]> & Record<string, any>;
+}> & Record<string, any>;
 
 export { HvExtraDeepProps }
 
@@ -3554,7 +3565,7 @@ export declare type HvFilterGroupFilters = {
 
 export declare type HvFilterGroupHorizontalPlacement = "left" | "right";
 
-export declare type HvFilterGroupLabels = Partial<typeof DEFAULT_LABELS_6>;
+export declare type HvFilterGroupLabels = Partial<typeof DEFAULT_LABELS_9>;
 
 export declare interface HvFilterGroupProps extends Omit<HvFormElementProps, "classes" | "onChange" | "defaultValue" | "statusMessage"> {
     /** The initial value of the input when in single calendar mode. */
@@ -4041,7 +4052,7 @@ export declare type HvHorizontalScrollListItemClasses = ExtractNames<typeof useC
  * As defined by Design System, a tooltip with the button’s label should always be displayed when hovering an icon only button.
  * This component provides this behavior out of the box.
  */
-export declare const HvIconButton: <C extends React.ElementType = "button">(props: Omit<HvButtonProps<C>, "icon" | "title" | "component" | "ref" | "children" | "startIcon" | "endIcon" | "focusableWhenDisabled"> & {
+export declare const HvIconButton: <C extends React.ElementType = "button">(props: Omit<HvButtonProps<C>, "icon" | "title" | "children" | "ref" | "component" | "startIcon" | "endIcon" | "focusableWhenDisabled"> & {
     /** Label to be displayed in the tooltip when hovered. This label will be used as the button's `aria-label`. */
     title: React.ReactNode;
     /** Number of milliseconds to wait before showing the tooltip. @default 500 */
@@ -4054,9 +4065,9 @@ export declare const HvIconButton: <C extends React.ElementType = "button">(prop
     component?: C | undefined;
 } & {
     children?: ReactNode | undefined;
-} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "overrideIconColors" | "placement" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never), "icon" | "title" | "component" | "ref" | "children" | "startIcon" | "endIcon" | "focusableWhenDisabled">> extends infer T_1 ? T_1 extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "overrideIconColors" | "placement" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never), "icon" | "title" | "component" | "ref" | "children" | "startIcon" | "endIcon" | "focusableWhenDisabled">> ? T_1 extends any ? T_1 : never : never : never) & {
+} & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "overrideIconColors" | "placement" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never), "icon" | "title" | "children" | "ref" | "component" | "startIcon" | "endIcon" | "focusableWhenDisabled">> extends infer T_1 ? T_1 extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "title" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "overrideIconColors" | "placement" | "enterDelay" | "tooltipProps" | Exclude<keyof (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "disabled" | "icon" | "selected" | "variant" | "size" | "component" | "className" | "radius" | "startIcon" | "endIcon" | "overrideIconColors" | "focusableWhenDisabled"> ? T extends any ? T : never : never : never), "icon" | "title" | "children" | "ref" | "component" | "startIcon" | "endIcon" | "focusableWhenDisabled">> ? T_1 extends any ? T_1 : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
-} & RefAttributes<unknown>) => React.ReactNode;
+} & RefAttributes<unknown>) => React.ReactElement | null;
 
 export declare type HvIconButtonProps<C extends React.ElementType = "button"> = PolymorphicComponentRef<C, Omit<HvButtonProps<C>, "icon" | "focusableWhenDisabled" | "title" | "startIcon" | "endIcon" | "children" | "ref" | "component"> & {
     /** Label to be displayed in the tooltip when hovered. This label will be used as the button's `aria-label`. */
@@ -4127,7 +4138,7 @@ export declare const HvInput: ForwardRefExoticComponent<HvInputProps & RefAttrib
 
 export declare type HvInputClasses = ExtractNames<typeof useClasses_45>;
 
-export declare type HvInputLabels = Partial<typeof DEFAULT_LABELS_2>;
+export declare type HvInputLabels = Partial<typeof DEFAULT_LABELS_4>;
 
 export declare interface HvInputProps extends HvBaseProps<HTMLElement, "onChange" | "onBlur" | "onFocus" | "onKeyDown" | "color"> {
     /** The form element name. */
@@ -4197,7 +4208,7 @@ export declare interface HvInputProps extends HvBaseProps<HTMLElement, "onChange
     /** An Object containing the various texts associated with the input. */
     validationMessages?: HvValidationMessages;
     /** Attributes applied to the input element. */
-    inputProps?: InputBaseComponentProps_2;
+    inputProps?: InputBaseComponentProps;
     /**
      * Allows passing a ref to the underlying input
      * @deprecated Use `ref` directly instead
@@ -4275,7 +4286,7 @@ export declare const HvKpi: (props: HvKpiProps) => JSX_2.Element;
 
 export declare type HvKpiClasses = ExtractNames<typeof useClasses_82>;
 
-export declare type HvKpiLabelProps = Partial<typeof DEFAULT_LABELS_7>;
+export declare type HvKpiLabelProps = Partial<typeof DEFAULT_LABELS_10>;
 
 export declare interface HvKpiProps extends HvBaseProps<HTMLDivElement, "children"> {
     /**
@@ -4496,7 +4507,7 @@ export declare interface HvListProps extends HvBaseProps<HTMLUListElement, "onCh
     classes?: HvListClasses;
 }
 
-export declare interface HvListValue extends HvExtraProps {
+export declare interface HvListValue extends Record<string, any> {
     id?: string | number;
     label: React.ReactNode;
     searchValue?: string;
@@ -4619,7 +4630,7 @@ export declare function hvNumberColumn<D extends object = Record<string, unknown
 
 export declare const hvNumberFallback: (value: any) => number | "—";
 
-export declare const HvOption: <OptionValue extends {}>(props: HvOptionProps<OptionValue> & RefAttributes<HTMLLIElement>) => React.ReactNode;
+export declare const HvOption: <OptionValue extends {}>(props: HvOptionProps<OptionValue> & RefAttributes<HTMLLIElement>) => React.ReactElement | null;
 
 /**
  * Optional
@@ -4683,7 +4694,7 @@ export declare const HvPagination: (props: HvPaginationProps) => JSX_2.Element;
 
 export declare type HvPaginationClasses = ExtractNames<typeof useClasses_46>;
 
-export declare type HvPaginationLabels = Partial<typeof DEFAULT_LABELS>;
+export declare type HvPaginationLabels = Partial<typeof DEFAULT_LABELS_3>;
 
 export declare type HvPaginationPropGetter<D extends object> = PropGetter<D, HvTablePaginationProps>;
 
@@ -5535,7 +5546,7 @@ export declare interface HvSectionProps extends Omit<HvBaseProps<HTMLDivElement>
  *   <HvOption value="cat">Cat</HvOption>
  * </HvSelect>
  * */
-export declare const HvSelect: <OptionValue extends {}, Multiple extends boolean = false>(props: HvSelectProps<OptionValue, Multiple> & RefAttributes<HTMLButtonElement>) => React.ReactNode;
+export declare const HvSelect: <OptionValue extends {}, Multiple extends boolean = false>(props: HvSelectProps<OptionValue, Multiple> & RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
 
 export declare type HvSelectClasses = ExtractNames<typeof useClasses_11>;
 
@@ -6527,7 +6538,7 @@ export declare interface HvTagsInputProps extends HvBaseProps<HTMLElement, "onCh
     /** The maximum allowed length of the characters, if this value is null no check will be performed. */
     maxTagsQuantity?: number;
     /** Attributes applied to the input element. */
-    inputProps?: InputBaseComponentProps_2;
+    inputProps?: InputBaseComponentProps;
     /** If `true` it should autofocus. */
     autoFocus?: boolean;
     /** If `true` the component is resizable. */
@@ -6742,7 +6753,7 @@ export declare const HvTimeAgo: <C extends React.ElementType = "p">(props: {
     children?: ReactNode | undefined;
 } & (Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "component" | "locale" | "emptyElement" | "showSeconds" | "timestamp" | "disableRefresh" | "justText"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "classes" | "component" | "locale" | "emptyElement" | "showSeconds" | "timestamp" | "disableRefresh" | "justText"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
-} & RefAttributes<unknown>) => React.ReactNode;
+} & RefAttributes<unknown>) => React.ReactElement | null;
 
 export declare type HvTimeAgoClasses = ExtractNames<typeof useClasses_115>;
 
@@ -6988,7 +6999,7 @@ export declare interface HvTreeItemProps extends React.HTMLAttributes<HTMLElemen
  * </HvTreeView>
  * ```
  */
-export declare const HvTreeView: <Multiple extends boolean | undefined>(props: HvTreeViewProps<Multiple> & RefAttributes<HTMLUListElement>) => React.ReactNode;
+export declare const HvTreeView: <Multiple extends boolean | undefined>(props: HvTreeViewProps<Multiple> & RefAttributes<HTMLUListElement>) => React.ReactElement | null;
 
 export declare type HvTreeViewClasses = ExtractNames<typeof useClasses_117>;
 
@@ -7029,7 +7040,7 @@ export declare const HvTypography: <C extends React.ElementType = "p">(props: {
     children?: ReactNode | undefined;
 } & (Omit<PropsWithoutRef<ComponentProps<C>>, "link" | "classes" | "disabled" | "variant" | "component" | "noWrap" | "paragraph"> extends infer T ? T extends Omit<PropsWithoutRef<ComponentProps<C>>, "link" | "classes" | "disabled" | "variant" | "component" | "noWrap" | "paragraph"> ? T extends any ? T : never : never : never) & {
     ref?: PolymorphicRef<C> | undefined;
-} & RefAttributes<unknown>) => React.ReactNode;
+} & RefAttributes<unknown>) => React.ReactElement | null;
 
 export declare type HvTypographyClasses = ExtractNames<typeof useClasses>;
 
@@ -7776,9 +7787,6 @@ export declare class Random {
 
 export declare function reducer(state: any, action: any, previousState: any, instance: any): any;
 
-/** Given a `stylesObj`, replaces its keys' `$myClass` with `.{name}-myClass`. */
-export declare const replace$: <T extends object>(stylesObj: T, name: string) => T;
-
 export declare const rightControlClasses: {
     root: "HvRightControl-root";
     sortDropdown: "HvRightControl-sortDropdown";
@@ -8256,6 +8264,8 @@ export declare const typographyClasses: {
 
 export declare const typographyVariants: readonly ["display", "title1", "title2", "title3", "title4", "body", "label", "captionLabel", "caption1", "caption2"];
 
+export declare const uniqueId: (prefix?: string) => string;
+
 export declare type UseBulkActionsProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {
     pluginName: string;
 };
@@ -9046,7 +9056,24 @@ declare const useClasses_21: (classesProp?: Partial<Record<"root" | "button" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_22: (classesProp?: Partial<Record<"root" | "title" | "single" | "actionsContainer" | "open" | "item" | "titleAnchor" | "itemSelected" | "itemDisabled" | "itemTrigger" | "itemIcon" | "itemTitle" | "itemInfoIcon" | "footerContainer" | "closed" | "dual" | "fluid", string>>, addStatic?: boolean) => {
+declare const useClasses_22: (classesProp?: Partial<Record<"container" | "root" | "icon" | "iconSelected" | "baseContainer" | "menuListRoot" | "menuList", string>>, addStatic?: boolean) => {
+    classes: {
+        container: string;
+        root: string;
+        icon: string;
+        iconSelected: string;
+        baseContainer: string;
+        menuListRoot: string;
+        menuList: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_23: (classesProp?: Partial<Record<"root" | "title" | "single" | "actionsContainer" | "open" | "item" | "titleAnchor" | "itemSelected" | "itemDisabled" | "itemTrigger" | "itemIcon" | "itemTitle" | "itemInfoIcon" | "footerContainer" | "closed" | "dual" | "fluid", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         title: string;
@@ -9073,7 +9100,7 @@ declare const useClasses_22: (classesProp?: Partial<Record<"root" | "title" | "s
     cx: (...args: any) => string;
 };
 
-declare const useClasses_23: (classesProp?: Partial<Record<"typography" | "root" | "disabled" | "icon" | "title" | "selected" | "iconUrl" | "iconInfo" | "titleAnchor", string>>, addStatic?: boolean) => {
+declare const useClasses_24: (classesProp?: Partial<Record<"typography" | "root" | "disabled" | "icon" | "title" | "selected" | "iconUrl" | "iconInfo" | "titleAnchor", string>>, addStatic?: boolean) => {
     classes: {
         typography: string;
         root: string;
@@ -9092,7 +9119,7 @@ declare const useClasses_23: (classesProp?: Partial<Record<"typography" | "root"
     cx: (...args: any) => string;
 };
 
-declare const useClasses_24: (classesProp?: Partial<Record<"container" | "xs" | "sm" | "md" | "lg" | "xl" | "root" | "square" | "img" | "status" | "fallback" | "avatar" | "badge" | "circular", string>>, addStatic?: boolean) => {
+declare const useClasses_25: (classesProp?: Partial<Record<"container" | "xs" | "sm" | "md" | "lg" | "xl" | "root" | "square" | "img" | "status" | "fallback" | "avatar" | "badge" | "circular", string>>, addStatic?: boolean) => {
     classes: {
         container: string;
         xs: string;
@@ -9116,7 +9143,7 @@ declare const useClasses_24: (classesProp?: Partial<Record<"container" | "xs" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_25: (classesProp?: Partial<Record<"root" | "row" | "column" | "highlight" | "toBack", string>>, addStatic?: boolean) => {
+declare const useClasses_26: (classesProp?: Partial<Record<"root" | "row" | "column" | "highlight" | "toBack", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         row: string;
@@ -9131,7 +9158,7 @@ declare const useClasses_25: (classesProp?: Partial<Record<"root" | "row" | "col
     cx: (...args: any) => string;
 };
 
-declare const useClasses_26: (classesProp?: Partial<Record<"root" | "badge" | "badgeContainer" | "badgePosition" | "showCount" | "showLabel" | "badgeIcon" | "badgeOneDigit", string>>, addStatic?: boolean) => {
+declare const useClasses_27: (classesProp?: Partial<Record<"root" | "badge" | "badgeContainer" | "badgePosition" | "showCount" | "showLabel" | "badgeIcon" | "badgeOneDigit", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         badge: string;
@@ -9149,7 +9176,7 @@ declare const useClasses_26: (classesProp?: Partial<Record<"root" | "badge" | "b
     cx: (...args: any) => string;
 };
 
-declare const useClasses_27: (classesProp?: Partial<Record<"root" | "rootClosed" | "anchorOriginTopCenter" | "anchorOriginBottomCenter", string>>, addStatic?: boolean) => {
+declare const useClasses_28: (classesProp?: Partial<Record<"root" | "rootClosed" | "anchorOriginTopCenter" | "anchorOriginBottomCenter", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         rootClosed: string;
@@ -9163,7 +9190,7 @@ declare const useClasses_27: (classesProp?: Partial<Record<"root" | "rootClosed"
     cx: (...args: any) => string;
 };
 
-declare const useClasses_28: (classesProp?: Partial<Record<"actionContainer" | "actionsInnerContainer" | "closeAction" | "iconContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_29: (classesProp?: Partial<Record<"actionContainer" | "actionsInnerContainer" | "closeAction" | "iconContainer", string>>, addStatic?: boolean) => {
     classes: {
         actionContainer: string;
         actionsInnerContainer: string;
@@ -9177,17 +9204,9 @@ declare const useClasses_28: (classesProp?: Partial<Record<"actionContainer" | "
     cx: (...args: any) => string;
 };
 
-declare const useClasses_29: (classesProp?: Partial<Record<"warning" | "root" | "action" | "default" | "error" | "message" | "success" | "baseVariant" | "outContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_3: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
     classes: {
-        warning: string;
         root: string;
-        action: string;
-        default: string;
-        error: string;
-        message: string;
-        success: string;
-        baseVariant: string;
-        outContainer: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -9196,9 +9215,17 @@ declare const useClasses_29: (classesProp?: Partial<Record<"warning" | "root" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_3: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
+declare const useClasses_30: (classesProp?: Partial<Record<"warning" | "root" | "action" | "default" | "error" | "message" | "success" | "baseVariant" | "outContainer", string>>, addStatic?: boolean) => {
     classes: {
+        warning: string;
         root: string;
+        action: string;
+        default: string;
+        error: string;
+        message: string;
+        success: string;
+        baseVariant: string;
+        outContainer: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -9207,7 +9234,7 @@ declare const useClasses_3: (classesProp?: Partial<Record<"root", string>>, addS
     cx: (...args: any) => string;
 };
 
-declare const useClasses_30: (classesProp?: Partial<Record<"root" | "disabled" | "semantic" | "icon" | "checked" | "focusVisible" | "indeterminate", string>>, addStatic?: boolean) => {
+declare const useClasses_31: (classesProp?: Partial<Record<"root" | "disabled" | "semantic" | "icon" | "checked" | "focusVisible" | "indeterminate", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         disabled: string;
@@ -9224,7 +9251,7 @@ declare const useClasses_30: (classesProp?: Partial<Record<"root" | "disabled" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_31: (classesProp?: Partial<Record<"root" | "disabled" | "semantic" | "icon" | "checked" | "focusVisible", string>>, addStatic?: boolean) => {
+declare const useClasses_32: (classesProp?: Partial<Record<"root" | "disabled" | "semantic" | "icon" | "checked" | "focusVisible", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         disabled: string;
@@ -9240,7 +9267,7 @@ declare const useClasses_31: (classesProp?: Partial<Record<"root" | "disabled" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_32: (classesProp?: Partial<Record<"root" | "disabled" | "readOnly" | "switch" | "switchBase" | "track" | "checked" | "thumb" | "focusVisible", string>>, addStatic?: boolean) => {
+declare const useClasses_33: (classesProp?: Partial<Record<"root" | "disabled" | "readOnly" | "switch" | "switchBase" | "track" | "checked" | "thumb" | "focusVisible", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         disabled: string;
@@ -9259,7 +9286,7 @@ declare const useClasses_32: (classesProp?: Partial<Record<"root" | "disabled" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_33: (classesProp?: Partial<Record<"link" | "root" | "a" | "orderedList" | "currentPage" | "centerContainer" | "separatorContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_34: (classesProp?: Partial<Record<"link" | "root" | "a" | "orderedList" | "currentPage" | "centerContainer" | "separatorContainer", string>>, addStatic?: boolean) => {
     classes: {
         link: string;
         root: string;
@@ -9276,23 +9303,6 @@ declare const useClasses_33: (classesProp?: Partial<Record<"link" | "root" | "a"
     cx: (...args: any) => string;
 };
 
-declare const useClasses_34: (classesProp?: Partial<Record<"container" | "root" | "icon" | "iconSelected" | "baseContainer" | "menuListRoot" | "menuList", string>>, addStatic?: boolean) => {
-    classes: {
-        container: string;
-        root: string;
-        icon: string;
-        iconSelected: string;
-        baseContainer: string;
-        menuListRoot: string;
-        menuList: string;
-    };
-    css: {
-        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
-        (...args: CSSInterpolation[]): string;
-    };
-    cx: (...args: any) => string;
-};
-
 declare const useClasses_35: (classesProp?: Partial<Record<"root" | "semantic" | "divider" | "selectAll" | "actions" | "selectAllContainer" | "selectAllPages", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
@@ -10573,13 +10583,7 @@ export declare const useComputation: (valueFn: Function, valueFallback?: Functio
 
 export declare const useControlled: <T>(controlledProp: T | undefined, initialState: T | (() => T)) => readonly [T, (newValue: React.SetStateAction<T>) => void];
 
-export declare function useCss(): {
-    css: {
-        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
-        (...args: CSSInterpolation[]): string;
-    };
-    cx: (...args: any) => string;
-};
+export { useCss }
 
 /** Injects into `props` the props defined in the theme `componentName`. */
 export declare function useDefaultProps<T extends Record<string, any>>(
@@ -10587,7 +10591,7 @@ export declare function useDefaultProps<T extends Record<string, any>>(
 componentName: string, // keyof HvThemeComponents,
 props: T): T;
 
-export declare const useEnhancedEffect: typeof useEffect;
+export declare const useEnhancedEffect: typeof useLayoutEffect;
 
 export declare type UseFiltersProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {
     pluginName: string;
@@ -10909,10 +10913,7 @@ export declare type UseTableStylesProps = (<D extends object = Record<string, un
     pluginName: string;
 };
 
-export declare const useTheme: () => HvThemeContextValue & {
-    /** Colors of the currently active theme and mode */
-    colors?: HvTheme["colors"]["modes"]["mode"];
-};
+export { useTheme }
 
 declare interface UseTreeViewContextValueBuilderParameters {
     /**