@hitachivantara/uikit-react-core 5.80.1 → 5.81.0

package/dist/cjs/Snackbar/Snackbar.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const Slide = require("@mui/material/Slide");
 const Snackbar = require("@mui/material/Snackbar");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const helpers = require("../utils/helpers.cjs");
 const setId = require("../utils/setId.cjs");
 const Snackbar_styles = require("./Snackbar.styles.cjs");
@@ -11,29 +12,30 @@ const SnackbarContent = require("./SnackbarContent/SnackbarContent.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Slide__default = /* @__PURE__ */ _interopDefault(Slide);
 const Snackbar__default = /* @__PURE__ */ _interopDefault(Snackbar);
-const HvSnackbar = ({
-  classes: classesProp,
-  className,
-  id,
-  open = false,
-  onClose,
-  label = "",
-  anchorOrigin = { vertical: "top", horizontal: "right" },
-  autoHideDuration = 5e3,
-  variant = "default",
-  showIcon = false,
-  customIcon = null,
-  action = null,
-  actionCallback,
-  // TODO - remove in v6
-  onAction,
-  transitionDuration = 300,
-  transitionDirection = "left",
-  container,
-  offset = 60,
-  snackbarContentProps,
-  ...others
-}) => {
+const HvSnackbar = React.forwardRef(function HvSnackbar2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    id,
+    open = false,
+    onClose,
+    label = "",
+    anchorOrigin = { vertical: "top", horizontal: "right" },
+    autoHideDuration = 5e3,
+    variant = "default",
+    showIcon = false,
+    customIcon = null,
+    action = null,
+    actionCallback,
+    // TODO - remove in v6
+    onAction,
+    transitionDuration = 300,
+    transitionDirection = "left",
+    container,
+    offset = 60,
+    snackbarContentProps,
+    ...others
+  } = uikitReactUtils.useDefaultProps("HvSnackbar", props);
   const { classes } = Snackbar_styles.useClasses(classesProp);
   const anchorOriginOffset = {
     anchorOriginTop: {
@@ -57,6 +59,7 @@ const HvSnackbar = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Snackbar__default.default,
     {
+      ref,
       style: anchorOriginOffset[`anchorOrigin${helpers.capitalize(anchorOrigin.vertical)}`],
       classes,
       className,
@@ -84,6 +87,6 @@ const HvSnackbar = ({
       )
     }
   );
-};
+});
 exports.snackbarClasses = Snackbar_styles.staticClasses;
 exports.HvSnackbar = HvSnackbar;

package/dist/cjs/Switch/Switch.cjs

@@ -15,7 +15,7 @@ const Label = require("../Forms/Label/Label.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
 const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
 const HvSwitch = React.forwardRef(
-  (props, ref) => {
+  function HvSwitch2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/cjs/Tab/Tab.cjs

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const Tab = require("@mui/material/Tab");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Tab_styles = require("./Tab.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Tab__default = /* @__PURE__ */ _interopDefault(Tab);
-const HvTab = (props) => {
+const HvTab = React.forwardRef(function HvTab2(props, ref) {
   const {
     classes: classesProp,
     iconPosition = "top",
@@ -17,6 +18,7 @@ const HvTab = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tab__default.default,
     {
+      ref,
       classes: {
         root: classes.root,
         selected: classes.selected,
@@ -28,6 +30,6 @@ const HvTab = (props) => {
       ...others
     }
   );
-};
+});
 exports.tabClasses = Tab_styles.staticClasses;
 exports.HvTab = HvTab;

package/dist/cjs/Table/Table.cjs

@@ -26,7 +26,7 @@ const computeTablePartComponents = (rootComponent) => {
     Td: rootComponent
   };
 };
-const HvTable = React.forwardRef((props, ref) => {
+const HvTable = React.forwardRef(function HvTable2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/cjs/Table/TableCell/TableCell.cjs

@@ -43,11 +43,11 @@ const HvTableCell = React.forwardRef(
         className: cx(
           classes.root,
           classes[type],
+          align !== "inherit" && classes[`align${helpers.capitalize(align)}`],
+          variant !== "default" && classes[`variant${helpers.capitalize(variant)}`],
           {
-            [classes[`align${helpers.capitalize(align)}`]]: align !== "inherit",
             [classes.variantList]: tableContext.variant === "listrow",
             [classes.variantListHead]: tableContext.variant === "listrow" && type !== "body",
-            [classes[`variant${helpers.capitalize(variant)}`]]: variant !== "default",
             [classes.sorted]: sorted,
             [classes.stickyColumn]: stickyColumn,
             [classes.stickyColumnMostLeft]: stickyColumnMostLeft,

package/dist/cjs/Table/TableCell/TableCell.styles.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const sortedColor = uikitStyles.theme.alpha("primary", 0.1);
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell", {
   /** Styles applied to the component root class. */
   root: {
@@ -29,10 +28,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
       height: 32
     },
     backgroundColor: "inherit",
-    ...uikitStyles.theme.typography.body,
-    fontFamily: uikitStyles.theme.fontFamily.body,
     "&$sorted": {
-      backgroundImage: `linear-gradient(to right, ${sortedColor}, ${sortedColor})`
+      backgroundColor: uikitStyles.theme.alpha("primary", 0.1)
     }
   },
   /** Styles applied to the cell when it's in the table footer. */
@@ -160,7 +157,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableCell
   },
   /** Styles applied to the cell when it's part of a resizing column. */
   resizing: {
-    borderRight: `solid 2px ${uikitStyles.theme.colors.secondary}`
+    borderRight: `solid 2px ${uikitStyles.theme.colors.primary_80}`
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Table/TableHeader/TableHeader.cjs

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const styles = require("@mui/material/styles");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const helpers = require("../../utils/helpers.cjs");
 const TableContext = require("../TableContext.cjs");
 const TableSectionContext = require("../TableSectionContext.cjs");
@@ -40,8 +38,7 @@ const HvTableHeader = React.forwardRef(
       sortButtonProps,
       ...others
     } = uikitReactUtils.useDefaultProps("HvTableHeader", props);
-    const { classes, cx, css } = TableHeader_styles.useClasses(classesProp);
-    const { colors } = uikitReactUtils.useTheme();
+    const { classes, cx } = TableHeader_styles.useClasses(classesProp);
     const tableContext = React.useContext(TableContext.default);
     const tableSectionContext = React.useContext(TableSectionContext.TableSectionContext);
     const type = typeProp || tableSectionContext?.type || "body";
@@ -55,7 +52,7 @@ const HvTableHeader = React.forwardRef(
     const role = Component === defaultComponent ? null : isHeadCell ? "columnheader" : "rowheader";
     const paragraph = utils.isParagraph(children);
     const style = stickyColumn ? { ...styleProp, position: "sticky" } : styleProp;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       Component,
       {
         ref: externalRef,
@@ -65,14 +62,8 @@ const HvTableHeader = React.forwardRef(
         className: cx(
           classes.root,
           classes[type],
-          type === "body" && css({
-            [`&.${TableHeader_styles.staticClasses.sorted}`]: {
-              backgroundColor: styles.alpha(
-                styles.hexToRgb(colors?.atmo1 || uikitStyles.theme.colors.atmo1),
-                0.4
-              )
-            }
-          }),
+          align !== "inherit" && classes[`align${helpers.capitalize(align)}`],
+          variant !== "default" && classes[`variant${helpers.capitalize(variant)}`],
           {
             [classes.groupColumnMostLeft]: groupColumnMostLeft,
             [classes.groupColumnMostRight]: groupColumnMostRight,
@@ -83,50 +74,51 @@ const HvTableHeader = React.forwardRef(
             [classes.stickyColumn]: stickyColumn,
             [classes.stickyColumnMostLeft]: stickyColumnMostLeft,
             [classes.stickyColumnLeastRight]: stickyColumnLeastRight,
-            [classes.variantList]: tableContext.variant === "listrow",
-            [classes[`align${helpers.capitalize(align)}`]]: align !== "inherit",
-            [classes[`variant${helpers.capitalize(variant)}`]]: variant !== "default"
+            [classes.variantList]: tableContext.variant === "listrow"
           },
           className
         ),
         "aria-sort": sortable ? sortDirection : void 0,
         ...others,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: cx(classes.headerContent, {
-              [classes[`alignFlex${helpers.capitalize(align)}`]]: align !== "inherit"
-            }),
-            children: [
-              isHeadCell && sortable && /* @__PURE__ */ jsxRuntime.jsx(
-                Button.HvButton,
-                {
-                  className: classes.sortButton,
-                  icon: true,
-                  overrideIconColors: false,
-                  "aria-label": "Sort",
-                  ...sortButtonProps,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Sort, { className: classes.sortIcon })
-                }
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cx(
+                classes.headerContent,
+                align !== "inherit" && classes[`alignFlex${helpers.capitalize(align)}`]
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Typography.HvTypography,
-                {
-                  component: "div",
-                  className: cx({
-                    [classes.headerText]: !paragraph,
-                    [classes.headerParagraph]: paragraph,
-                    [classes.sortableHeaderText]: sortable
-                  }),
-                  variant: "label",
-                  ...headerTextProps,
-                  children
-                }
-              ),
-              resizable && /* @__PURE__ */ jsxRuntime.jsx("div", { ...resizerProps, className: classes.resizer })
-            ]
-          }
-        )
+              children: [
+                isHeadCell && sortable && /* @__PURE__ */ jsxRuntime.jsx(
+                  Button.HvButton,
+                  {
+                    className: classes.sortButton,
+                    icon: true,
+                    overrideIconColors: false,
+                    "aria-label": "Sort",
+                    ...sortButtonProps,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Sort, { className: classes.sortIcon })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Typography.HvTypography,
+                  {
+                    component: "div",
+                    className: cx({
+                      [classes.headerText]: !paragraph,
+                      [classes.headerParagraph]: paragraph,
+                      [classes.sortableHeaderText]: sortable
+                    }),
+                    variant: "label",
+                    ...headerTextProps,
+                    children
+                  }
+                )
+              ]
+            }
+          ),
+          resizable && /* @__PURE__ */ jsxRuntime.jsx("div", { ...resizerProps, className: classes.resizer })
+        ]
       }
     );
   }

package/dist/cjs/Table/TableHeader/TableHeader.styles.cjs

@@ -18,7 +18,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
     verticalAlign: "top",
     alignContent: "start",
     ...uikitStyles.theme.typography.label,
-    transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     backgroundColor: uikitStyles.theme.colors.atmo1,
     borderBottom: `1px solid ${uikitStyles.theme.colors.atmo4}`,
     "*:first-of-type > &": {
@@ -38,16 +37,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
       paddingTop: 0,
       paddingLeft: 0,
       cursor: "pointer",
-      "&:hover": {
-        backgroundColor: "transparent",
+      ":hover, :focus-within": {
+        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover,
         "& $sortIcon": {
-          visibility: "visible"
-        }
-      },
-      "&:focus-within": {
-        backgroundColor: "transparent",
-        "& $sortIcon": {
-          visibility: "visible"
+          opacity: 1
         }
       }
     }
@@ -55,6 +48,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
   body: {
     backgroundColor: "inherit",
     ...uikitStyles.theme.typography.body,
+    ":where($sorted)": {
+      backgroundColor: uikitStyles.theme.alpha("atmo1", 0.4)
+    },
     "&$sortable:not($variantNone)": {
       paddingLeft: 32
     }
@@ -89,20 +85,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
   sortableHeaderText: { paddingTop: "8px" },
   sorted: {
     "& $sortIcon": {
-      visibility: "visible"
+      opacity: 1
     }
   },
   sortable: {},
   sortButton: {
-    "$root$sortable &": {
+    ":focus-visible": {
       boxShadow: "none",
-      backgroundColor: "transparent",
-      "&:hover": {
-        backgroundColor: uikitStyles.theme.colors.primary_20
-      }
+      backgroundColor: "transparent"
     }
   },
-  sortIcon: { display: "inline-flex", visibility: "hidden" },
+  sortIcon: { opacity: 0 },
   alignLeft: { textAlign: "left" },
   alignRight: { textAlign: "right", flexDirection: "row-reverse" },
   alignCenter: { textAlign: "center" },
@@ -134,11 +127,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableHead
       height: 16
     }
   },
-  resizable: { borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}` },
-  resizing: { borderRight: `solid 2px ${uikitStyles.theme.colors.secondary}` },
+  resizable: {
+    borderRight: `1px solid ${uikitStyles.theme.colors.atmo4}`,
+    ":has($resizer:hover)": {
+      borderRight: `2px solid ${uikitStyles.theme.colors.primary_80}`
+    }
+  },
+  resizing: { borderRight: `2px solid ${uikitStyles.theme.colors.primary_80}` },
   resizer: {
     display: "inline-block",
-    width: 10,
+    width: 16,
     height: "100%",
     position: "absolute",
     right: 0,

package/dist/cjs/Table/TableRow/TableRow.styles.cjs

@@ -10,7 +10,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableRow"
     backgroundColor: uikitStyles.theme.colors.atmo1,
     verticalAlign: "middle",
     alignContent: "center",
-    outline: 0
+    outline: 0,
+    ":is($hover,$striped):hover": {
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    }
   },
   /** Styles applied to the component root when inside a `HvTableHead`. */
   head: {},
@@ -32,25 +35,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableRow"
   /** Styles applied to the component root when striped. */
   striped: {
     "&:nth-of-type(even)": {
-      backgroundColor: uikitStyles.theme.alpha("atmo1", 0.6),
-      "&:hover": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
-      }
+      backgroundColor: uikitStyles.theme.alpha("atmo1", 0.6)
     },
     "&:nth-of-type(odd)": {
-      backgroundColor: "transparent",
-      "&:hover": {
-        backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
-      }
+      backgroundColor: "transparent"
     }
   },
   /** Styles applied to the component root on hover. */
-  hover: {
-    transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
-    }
-  },
+  hover: {},
   /** Styles applied to the component root when its table variant is list. */
   variantList: {
     // only applied on custom `display`

package/dist/cjs/TableSection/TableSection.cjs

@@ -7,7 +7,7 @@ const useUniqueId = require("../hooks/useUniqueId.cjs");
 const TableSection_styles = require("./TableSection.styles.cjs");
 const Section = require("../Section/Section.cjs");
 const HvTableSection = React.forwardRef(
-  (props, ref) => {
+  function HvTableSection2(props, ref) {
     const {
       id,
       classes: classesProp,

package/dist/cjs/TableSection/TableSection.styles.cjs

@@ -11,33 +11,33 @@ require("../Table/TableRow/TableRow.cjs");
 const TableCell_styles = require("../Table/TableCell/TableCell.styles.cjs");
 require("../Table/TableCell/TableCell.cjs");
 const BulkActions_styles = require("../BulkActions/BulkActions.styles.cjs");
-require("react/jsx-runtime");
+require("../BulkActions/BulkActions.cjs");
 const Pagination_styles = require("../Pagination/Pagination.styles.cjs");
-require("react");
-require("@mui/material");
-require("@hitachivantara/uikit-react-icons");
+require("../Pagination/Pagination.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableSection", {
   root: {},
   header: {
     // Only apply the border to divide the header and content when both are displayed
-    "+ div": { borderTop: `1px solid ${uikitStyles.theme.colors.atmo3}` }
-  },
-  actions: {
-    right: uikitStyles.theme.space.sm
+    "+ div": {
+      borderTop: `1px solid ${uikitStyles.theme.colors.atmo3}`,
+      borderTopLeftRadius: 0,
+      borderTopRightRadius: 0
+    }
   },
+  actions: {},
   content: {
     marginTop: 0,
     padding: 0,
     // Apply border radius to the first child if there's not an header
     "&:first-of-type": {
       "& > :first-of-type": {
-        borderTopLeftRadius: uikitStyles.theme.radii.round,
-        borderTopRightRadius: uikitStyles.theme.radii.round
+        borderTopLeftRadius: "inherit",
+        borderTopRightRadius: "inherit"
       }
     },
     "& > :last-child": {
-      borderBottomLeftRadius: uikitStyles.theme.radii.round,
-      borderBottomRightRadius: uikitStyles.theme.radii.round
+      borderBottomLeftRadius: "inherit",
+      borderBottomRightRadius: "inherit"
     },
     [`& .${TableContainer_styles.staticClasses.root}`]: {
       paddingBottom: 0
@@ -91,11 +91,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableSect
   },
   hidden: {},
   raisedHeader: {
-    "+ div": {
+    "& $content": {
       paddingTop: 0
     }
   },
-  spaceTop: { paddingTop: 0 }
+  hasHeader: {},
+  /** @deprecated use `hasHeader` instead */
+  spaceTop: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Tabs/Tabs.cjs

@@ -1,21 +1,23 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const Tabs = require("@mui/material/Tabs");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Tabs_styles = require("./Tabs.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Tabs__default = /* @__PURE__ */ _interopDefault(Tabs);
-const HvTabs = (props) => {
+const HvTabs = React.forwardRef(function HvTabs2(props, ref) {
   const {
     classes: classesProp,
-    floating = false,
+    floating,
     ...others
   } = uikitReactUtils.useDefaultProps("HvTabs", props);
   const { classes, cx } = Tabs_styles.useClasses(classesProp);
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tabs__default.default,
     {
+      ref,
       classes: {
         root: cx(classes.root, { [classes.floating]: floating }),
         flexContainer: classes.flexContainer,
@@ -25,6 +27,6 @@ const HvTabs = (props) => {
       ...others
     }
   );
-};
+});
 exports.tabsClasses = Tabs_styles.staticClasses;
 exports.HvTabs = HvTabs;

package/dist/cjs/Tag/Tag.cjs

@@ -13,7 +13,7 @@ const Chip__default = /* @__PURE__ */ _interopDefault(Chip);
 const getCategoricalColor = (customColor, colors) => {
   return customColor && colors?.[customColor] || customColor || colors?.cat1;
 };
-const HvTag = React.forwardRef((props, ref) => {
+const HvTag = React.forwardRef(function HvTag2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -25,7 +25,7 @@ const Input = require("../Input/Input.cjs");
 const Suggestions = require("../Forms/Suggestions/Suggestions.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
 const HvTagsInput = React.forwardRef(
-  (props, ref) => {
+  function HvTagsInput2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/cjs/TextArea/TextArea.cjs

@@ -16,7 +16,7 @@ const InfoMessage = require("../Forms/InfoMessage/InfoMessage.cjs");
 const CharCounter = require("../Forms/CharCounter/CharCounter.cjs");
 const BaseInput = require("../BaseInput/BaseInput.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
-const HvTextArea = React.forwardRef((props, ref) => {
+const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const {
     id,
     className,

package/dist/cjs/TimePicker/Placeholder.cjs

@@ -22,7 +22,7 @@ const PlaceholderSegment = ({
   })() });
 };
 const Placeholder = React.forwardRef(
-  (props, ref) => {
+  function Placeholder2(props, ref) {
     const { name, state, placeholders, onKeyDown, ...others } = props;
     const { value, segments } = state;
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -25,7 +25,7 @@ const toTime = (value) => {
   return new date.Time(hours, minutes, seconds);
 };
 const HvTimePicker = React.forwardRef(
-  (props, ref) => {
+  function HvTimePicker2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/cjs/ToggleButton/ToggleButton.cjs

@@ -5,7 +5,7 @@ const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useControlled = require("../hooks/useControlled.cjs");
 const Button = require("../Button/Button.cjs");
-const HvToggleButton = React.forwardRef((props, ref) => {
+const HvToggleButton = React.forwardRef(function HvToggleButton2(props, ref) {
   const {
     defaultSelected,
     selected,

package/dist/cjs/Tooltip/Tooltip.cjs

@@ -10,7 +10,7 @@ const Tooltip_styles = require("./Tooltip.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Fade__default = /* @__PURE__ */ _interopDefault(Fade);
 const Tooltip__default = /* @__PURE__ */ _interopDefault(Tooltip);
-const HvTooltip = React.forwardRef((props, ref) => {
+const HvTooltip = React.forwardRef(function HvTooltip2(props, ref) {
   const {
     className,
     classes: classesProp,

package/dist/cjs/TreeView/TreeItem/DefaultContent.cjs

@@ -14,7 +14,7 @@ const { useClasses } = uikitReactUtils.createClasses("HvTreeContent", {
   label: {}
 });
 const DefaultContent = React.forwardRef(
-  (props, ref) => {
+  function DefaultContent2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/cjs/TreeView/TreeItem/TreeItem.cjs

@@ -12,7 +12,7 @@ const TreeItem_styles = require("./TreeItem.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Collapse__default = /* @__PURE__ */ _interopDefault(Collapse);
 const HvTreeItem = React.forwardRef(
-  (props, ref) => {
+  function HvTreeItem2(props, ref) {
     const {
       id: idProp,
       nodeId,

package/dist/cjs/VerticalNavigation/TreeView/TreeView.cjs

@@ -18,7 +18,7 @@ function findNextFirstChar(firstChars, startIndex, char) {
 function noopSelection() {
   return false;
 }
-const HvVerticalNavigationTreeView = React.forwardRef((props, ref) => {
+const HvVerticalNavigationTreeView = React.forwardRef(function HvVerticalNavigationTreeView2(props, ref) {
   const {
     id: idProp,
     className,

package/dist/cjs/VerticalNavigation/VerticalNavigation.cjs

@@ -7,7 +7,7 @@ const utils = require("./NavigationSlider/utils.cjs");
 const VerticalNavigation_utils = require("./utils/VerticalNavigation.utils.cjs");
 const VerticalNavigation_styles = require("./VerticalNavigation.styles.cjs");
 const VerticalNavigationContext = require("./VerticalNavigationContext.cjs");
-const HvVerticalNavigation = React.forwardRef((props, ref) => {
+const HvVerticalNavigation = React.forwardRef(function HvVerticalNavigation2(props, ref) {
   const {
     id,
     className,