@hitachivantara/uikit-react-core 5.80.1 → 5.81.0

package/dist/cjs/BaseInput/BaseInput.cjs

@@ -4,6 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const react = require("@emotion/react");
 const MuiInput = require("@mui/material/Input");
+const utils = require("@mui/material/utils");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const BaseInput_styles = require("./BaseInput.styles.cjs");
@@ -34,7 +35,7 @@ const baseInputStyles = react.css({
     display: "none"
   }
 });
-const HvBaseInput = (props) => {
+const HvBaseInput = React.forwardRef(function HvBaseInput2(props, ref) {
   const {
     classes: classesProp,
     className = "",
@@ -64,6 +65,7 @@ const HvBaseInput = (props) => {
     required,
     formElementContext
   );
+  const forkedRef = utils.useForkRef(ref, inputRef);
   const localInvalid = invalid || formElementProps.status === "invalid";
   const formElementDescriptorsContext = React.useContext(
     FormElementDescriptorsContext.HvFormElementDescriptorsContext
@@ -122,7 +124,7 @@ const HvBaseInput = (props) => {
                 ...inputProps,
                 ...ariaProps
               },
-              inputRef,
+              inputRef: forkedRef,
               multiline,
               rows: 10,
               ...others
@@ -133,6 +135,6 @@ const HvBaseInput = (props) => {
       }
     )
   ] });
-};
+});
 exports.baseInputClasses = BaseInput_styles.staticClasses;
 exports.HvBaseInput = HvBaseInput;

package/dist/cjs/BaseRadio/BaseRadio.cjs

@@ -15,7 +15,7 @@ const getSelectorIcons = () => {
   };
 };
 const HvBaseRadio = React.forwardRef(
-  (props, ref) => {
+  function HvBaseRadio2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/cjs/BaseSwitch/BaseSwitch.cjs

@@ -8,7 +8,7 @@ const BaseSwitch_styles = require("./BaseSwitch.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiSwitch__default = /* @__PURE__ */ _interopDefault(MuiSwitch);
 const HvBaseSwitch = React.forwardRef(
-  (props, ref) => {
+  function HvBaseSwitch2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/cjs/BreadCrumb/BreadCrumb.cjs

@@ -8,7 +8,7 @@ const utils = require("./utils.cjs");
 const PathElement = require("./PathElement/PathElement.cjs");
 const Page = require("./Page/Page.cjs");
 const Typography = require("../Typography/Typography.cjs");
-const HvBreadCrumb = (props) => {
+const HvBreadCrumb = React.forwardRef(function HvBreadCrumb2(props, ref) {
   const {
     classes: classesProp,
     className,
@@ -39,7 +39,7 @@ const HvBreadCrumb = (props) => {
     onClick,
     dropDownMenuProps
   ) : listPath;
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { id, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: classes.orderedList, children: listPath.map((elem, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, id, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: classes.orderedList, children: listPath.map((elem, index) => {
     const key = `key_${index}`;
     const isLast = index === breadcrumbPath.length - 1;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -66,6 +66,6 @@ const HvBreadCrumb = (props) => {
       key
     );
   }) }) });
-};
+});
 exports.breadCrumbClasses = BreadCrumb_styles.staticClasses;
 exports.HvBreadCrumb = HvBreadCrumb;

package/dist/cjs/BulkActions/BulkActions.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const setId = require("../utils/setId.cjs");
 const BulkActions_styles = require("./BulkActions.styles.cjs");
@@ -8,7 +9,7 @@ const Button = require("../Button/Button.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const CheckBox = require("../CheckBox/CheckBox.cjs");
 const ActionsGeneric = require("../ActionsGeneric/ActionsGeneric.cjs");
-const HvBulkActions = (props) => {
+const HvBulkActions = React.forwardRef(function HvBulkActions2(props, ref) {
   const {
     id,
     className,
@@ -53,6 +54,7 @@ const HvBulkActions = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      ref,
       id,
       className: cx(
         classes.root,
@@ -105,6 +107,6 @@ const HvBulkActions = (props) => {
       ]
     }
   );
-};
+});
 exports.bulkActionsClasses = BulkActions_styles.staticClasses;
 exports.HvBulkActions = HvBulkActions;

package/dist/cjs/BulkActions/BulkActions.styles.cjs

@@ -3,9 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const ActionsGeneric_styles = require("../ActionsGeneric/ActionsGeneric.styles.cjs");
-require("react/jsx-runtime");
-require("react");
-require("@hitachivantara/uikit-react-icons");
+require("../ActionsGeneric/ActionsGeneric.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBulkActions", {
   root: {
     display: "flex",

package/dist/cjs/Button/Button.styles.cjs

@@ -34,10 +34,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
     padding: uikitStyles.theme.spacing(0, "sm")
   },
   startIcon: {
-    marginLeft: `calc(-1 * ${uikitStyles.theme.space.xs})`
+    marginLeft: uikitStyles.theme.spacing(-1),
+    marginTop: -1,
+    marginBottom: -1
   },
   endIcon: {
-    marginRight: `calc(-1 * ${uikitStyles.theme.space.xs})`
+    marginRight: uikitStyles.theme.spacing(-1),
+    marginTop: -1,
+    marginBottom: -1
   },
   focusVisible: {},
   disabled: {

package/dist/cjs/Card/Card.cjs

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Card_styles = require("./Card.styles.cjs");
-const HvCard = (props) => {
+const HvCard = React.forwardRef((props) => {
   const {
     classes: classesProp,
     style,
@@ -46,6 +47,6 @@ const HvCard = (props) => {
       ]
     }
   );
-};
+});
 exports.cardClasses = Card_styles.staticClasses;
 exports.HvCard = HvCard;

package/dist/cjs/Carousel/Carousel.cjs

@@ -21,7 +21,7 @@ const DEFAULT_LABELS = {
   backwards: "Backwards",
   forwards: "Forwards"
 };
-const HvCarousel = (props) => {
+const HvCarousel = React.forwardRef(function HvCarousel2(props, ref) {
   const {
     className,
     classes: classesProp,
@@ -161,6 +161,7 @@ const HvCarousel = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Container.HvContainer,
     {
+      ref,
       className: cx(classes.root, className, {
         [classes.xs]: xs,
         [classes.fullscreen]: isFullscreen
@@ -221,6 +222,6 @@ const HvCarousel = (props) => {
       ]
     }
   );
-};
+});
 exports.carouselClasses = Carousel_styles.staticClasses;
 exports.HvCarousel = HvCarousel;

package/dist/cjs/Carousel/CarouselThumbnails.cjs

@@ -5,7 +5,7 @@ const React = require("react");
 const Carousel_styles = require("./Carousel.styles.cjs");
 const Stack = require("../Stack/Stack.cjs");
 const Button = require("../Button/Button.cjs");
-const HvCarouselThumbnails = React.forwardRef((props, ref) => {
+const HvCarouselThumbnails = React.forwardRef(function HvCarouselThumbnails2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/cjs/CheckBox/CheckBox.cjs

@@ -13,7 +13,7 @@ const FormElement = require("../Forms/FormElement/FormElement.cjs");
 const Label = require("../Forms/Label/Label.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
 const HvCheckBox = React.forwardRef(
-  (props, ref) => {
+  function HvCheckBox2(props, ref) {
     const {
       id,
       classes: classesProp,

package/dist/cjs/CheckBoxGroup/CheckBoxGroup.cjs

@@ -31,7 +31,7 @@ const getValueFromSelectedChildren = (children) => {
   return selectedValues;
 };
 const HvCheckBoxGroup = React.forwardRef(
-  (props, ref) => {
+  function HvCheckBoxGroup2(props, ref) {
     const {
       id,
       classes: classesProp,

package/dist/cjs/ColorPicker/ColorPicker.cjs

@@ -23,7 +23,7 @@ const DEFAULT_LABELS = {
   customColorsLabel: "Custom colors:"
 };
 const HvColorPicker = React.forwardRef(
-  (props, ref) => {
+  function HvColorPicker2(props, ref) {
     const {
       id,
       name,

package/dist/cjs/Container/Container.cjs

@@ -12,7 +12,7 @@ const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiContainer__default = /* @__PURE__ */ _interopDefault(MuiContainer);
 const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
 const HvContainer = React.forwardRef(
-  (props, ref) => {
+  function HvContainer2(props, ref) {
     const {
       maxWidth = false,
       classes: classesProp,

package/dist/cjs/DatePicker/DatePicker.cjs

@@ -34,7 +34,7 @@ const DEFAULT_LABELS = {
   invalidDateLabel: "Invalid date"
 };
 const HvDatePicker = React.forwardRef(
-  (props, ref) => {
+  function HvDatePicker2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/cjs/Drawer/Drawer.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const MuiDrawer = require("@mui/material/Drawer");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
@@ -9,7 +10,7 @@ const Drawer_styles = require("./Drawer.styles.cjs");
 const IconButton = require("../IconButton/IconButton.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiDrawer__default = /* @__PURE__ */ _interopDefault(MuiDrawer);
-const HvDrawer = (props) => {
+const HvDrawer = React.forwardRef(function HvDrawer2(props, ref) {
   const {
     className,
     classes: classesProp,
@@ -33,6 +34,7 @@ const HvDrawer = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     MuiDrawer__default.default,
     {
+      ref,
       className: cx(classes.root, className),
       id,
       anchor,
@@ -67,6 +69,6 @@ const HvDrawer = (props) => {
       ]
     }
   );
-};
+});
 exports.drawerClasses = Drawer_styles.staticClasses;
 exports.HvDrawer = HvDrawer;

package/dist/cjs/DropDownMenu/DropDownMenu.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const BaseDropdownContext = require("../BaseDropdown/BaseDropdownContext/BaseDropdownContext.cjs");
+const context = require("../BaseDropdown/context.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useLabels = require("../hooks/useLabels.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
@@ -15,30 +15,30 @@ const DropDownMenu_styles = require("./DropDownMenu.styles.cjs");
 const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
 const List = require("../List/List.cjs");
 const DropdownButton = require("../DropdownButton/DropdownButton.cjs");
-const Panel = require("../Panel/Panel.cjs");
 const DEFAULT_LABELS = {
   dropdownMenu: "Dropdown menu"
 };
 const HeaderComponent = React.forwardRef(
   (props, ref) => {
-    const { open, children, ...others } = props;
-    const { popperPlacement } = BaseDropdownContext.useBaseDropdownContext();
+    const { open, icon, disabled, ...others } = props;
+    const { popperPlacement } = context.useBaseDropdownContext();
     return /* @__PURE__ */ jsxRuntime.jsx(
       DropdownButton.HvDropdownButton,
       {
         icon: true,
         ref,
         open,
+        disabled,
         "aria-expanded": open,
         "aria-haspopup": "menu",
         placement: popperPlacement,
         ...others,
-        children
+        children: icon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, { role: "presentation" })
       }
     );
   }
 );
-const HvDropDownMenu = (props) => {
+const HvDropDownMenu = React.forwardRef(function HvDropDownMenu2(props, ref) {
   const {
     id: idProp,
     classes: classesProp,
@@ -78,35 +78,27 @@ const HvDropDownMenu = (props) => {
     }
     event.preventDefault();
   };
-  const setFocusToContent = (containerRef) => {
-    containerRef?.getElementsByTagName("li")[0]?.focus();
-  };
   const condensed = React.useMemo(() => dataList.every((el) => !el.icon), [dataList]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseDropdown.HvBaseDropdown,
     {
+      ref,
       id,
-      className: cx(classes.container, className),
+      className: cx(classes.container, classes.icon, className, {
+        [classes.iconSelected]: open
+      }),
       classes: {
         root: classes.root,
-        container: classes.baseContainer
+        container: classes.baseContainer,
+        panel: classes.menuListRoot
       },
       expanded: open && !disabled,
-      component: /* @__PURE__ */ jsxRuntime.jsx(
-        HeaderComponent,
-        {
-          id: setId.setId(id, "icon-button"),
-          disabled,
-          className: cx(classes.icon, {
-            [classes.iconSelected]: open
-          }),
-          size,
-          variant: variant ?? category,
-          open,
-          "aria-label": labels.dropdownMenu,
-          children: icon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, { role: "presentation" })
-        }
-      ),
+      headerComponent: HeaderComponent,
+      size,
+      variant: variant ?? category,
+      open,
+      "aria-label": labels.dropdownMenu,
+      icon,
       placement,
       variableWidth: true,
       disablePortal,
@@ -115,9 +107,11 @@ const HvDropDownMenu = (props) => {
         onToggle?.(e, s);
       },
       disabled,
-      onContainerCreation: setFocusToContent,
+      onContainerCreation: (containerEl) => {
+        containerEl?.getElementsByTagName("li")[0]?.focus();
+      },
       ...others,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, { className: classes.menuListRoot, children: /* @__PURE__ */ jsxRuntime.jsx(
+      children: /* @__PURE__ */ jsxRuntime.jsx(
         List.HvList,
         {
           id: listId,
@@ -133,9 +127,9 @@ const HvDropDownMenu = (props) => {
             root: classes.menuList
           }
         }
-      ) })
+      )
     }
   );
-};
+});
 exports.dropDownMenuClasses = DropDownMenu_styles.staticClasses;
 exports.HvDropDownMenu = HvDropDownMenu;

package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs

@@ -4,7 +4,20 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropDownMenu", {
   container: {},
-  baseContainer: {},
+  baseContainer: {
+    "&[data-popper-placement=bottom-end] .HvBaseDropdown-panel": {
+      borderRadius: `${uikitStyles.theme.radii.base} 0 ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
+    },
+    "&[data-popper-placement=bottom-start] .HvBaseDropdown-panel": {
+      borderRadius: `0 ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
+    },
+    "&[data-popper-placement=top-start] .HvBaseDropdown-panel": {
+      borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0`
+    },
+    "&[data-popper-placement=top-end] .HvBaseDropdown-panel": {
+      borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 ${uikitStyles.theme.radii.base}`
+    }
+  },
   root: {
     display: "inline-block",
     width: "auto"
@@ -14,7 +27,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropDownM
     boxShadow: uikitStyles.theme.colors.shadow
   },
   menuListRoot: {
-    backgroundColor: "transparent"
+    padding: uikitStyles.theme.space.sm
   },
   menuList: {}
 });

package/dist/cjs/Dropdown/List/List.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const BaseDropdownContext = require("../../BaseDropdown/BaseDropdownContext/BaseDropdownContext.cjs");
+const context = require("../../BaseDropdown/context.cjs");
 const setId = require("../../utils/setId.cjs");
 const utils = require("../utils.cjs");
 const List_styles = require("./List.styles.cjs");
@@ -32,7 +32,7 @@ const HvDropdownList = (props) => {
     hasTooltips = false,
     singleSelectionToggle,
     height: heightProp,
-    maxHeight,
+    maxHeight: maxHeightProp,
     virtualized = false,
     ...others
   } = uikitReactUtils.useDefaultProps("HvDropdownList", props);
@@ -41,7 +41,8 @@ const HvDropdownList = (props) => {
   const [list, setList] = React.useState(clone(values));
   const [allSelected, setAllSelected] = React.useState(false);
   const [anySelected, setAnySelected] = React.useState(false);
-  const { width, height } = BaseDropdownContext.useBaseDropdownContext();
+  const { popper } = context.useBaseDropdownContext();
+  const { maxWidth, maxHeight } = popper?.styles.popper || {};
   const hasChanges = React.useMemo(() => {
     return String(getSelectedIds(values)) !== String(getSelectedIds(list));
   }, [list, values]);
@@ -183,8 +184,8 @@ const HvDropdownList = (props) => {
           id: setId.setId(id, "list"),
           style: uikitReactUtils.mergeStyles(void 0, {
             height: heightProp,
-            "--maxW": width,
-            "--maxH": maxHeight ?? `calc(${height}px - ${elementsSize})`
+            "--maxW": maxWidth,
+            "--maxH": maxHeightProp ?? `calc(${maxHeight} - ${elementsSize})`
           }),
           classes: {
             root: cx(classes.dropdownListContainer, {

package/dist/cjs/DropdownButton/DropdownButton.cjs

@@ -6,7 +6,7 @@ const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const DropdownButton_styles = require("./DropdownButton.styles.cjs");
 const Button = require("../Button/Button.cjs");
-const HvDropdownButton = React.forwardRef((props, ref) => {
+const HvDropdownButton = React.forwardRef(function HvDropdownButton2(props, ref) {
   const {
     className,
     classes: classesProp,

package/dist/cjs/EmptyState/EmptyState.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const styles = require("@mui/material/styles");
 const useMediaQuery = require("@mui/material/useMediaQuery");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
@@ -9,7 +10,7 @@ const EmptyState_styles = require("./EmptyState.styles.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
-const HvEmptyState = (props) => {
+const HvEmptyState = React.forwardRef(function HvEmptyState2(props, ref) {
   const {
     action,
     icon,
@@ -25,7 +26,7 @@ const HvEmptyState = (props) => {
   const upSm = useMediaQuery__default.default(muiTheme.breakpoints.up("sm"));
   const messageOnly = !!(message && !(title || action));
   const renderNode = (variant, node, style) => node && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "div", variant, className: style, children: node });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.root, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cx(
@@ -59,6 +60,6 @@ const HvEmptyState = (props) => {
       ]
     }
   ) });
-};
+});
 exports.emptyStateClasses = EmptyState_styles.staticClasses;
 exports.HvEmptyState = HvEmptyState;

package/dist/cjs/FilterGroup/FilterContent/FilterContent.cjs

@@ -14,7 +14,7 @@ const Typography = require("../../Typography/Typography.cjs");
 const BaseDropdown = require("../../BaseDropdown/BaseDropdown.cjs");
 const Counter = require("../Counter/Counter.cjs");
 const ActionBar = require("../../ActionBar/ActionBar.cjs");
-const HvFilterGroupContent = React.forwardRef((props, ref) => {
+const HvFilterGroupContent = React.forwardRef(function HvFilterGroupContent2(props, ref) {
   const {
     id,
     status,

package/dist/cjs/FilterGroup/FilterGroup.cjs

@@ -31,7 +31,7 @@ const DEFAULT_LABELS = {
   multiSelectionConjunction: "/"
 };
 const HvFilterGroup = React.forwardRef(
-  (props, ref) => {
+  function HvFilterGroup2(props, ref) {
     const {
       className,
       id,

package/dist/cjs/Footer/Footer.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const styles = require("@mui/material/styles");
 const useMediaQuery = require("@mui/material/useMediaQuery");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
@@ -8,7 +9,7 @@ const Footer_styles = require("./Footer.styles.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
-const HvFooter = (props) => {
+const HvFooter = React.forwardRef(function HvFooter2(props, ref) {
   const {
     name = "Hitachi Vantara",
     copyright = `© Hitachi Vantara LLC ${(/* @__PURE__ */ new Date()).getFullYear()}. All Rights Reserved.`,
@@ -23,6 +24,7 @@ const HvFooter = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "footer",
     {
+      ref,
       className: cx(classes.root, { [classes.small]: isSmDown }, className),
       ...others,
       children: [
@@ -35,6 +37,6 @@ const HvFooter = (props) => {
       ]
     }
   );
-};
+});
 exports.footerClasses = Footer_styles.staticClasses;
 exports.HvFooter = HvFooter;

package/dist/cjs/GlobalActions/GlobalActions.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
 const styles = require("@mui/material/styles");
 const useMediaQuery = require("@mui/material/useMediaQuery");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
@@ -8,7 +9,7 @@ const GlobalActions_styles = require("./GlobalActions.styles.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const useMediaQuery__default = /* @__PURE__ */ _interopDefault(useMediaQuery);
-const HvGlobalActions = (props) => {
+const HvGlobalActions = React.forwardRef(function HvGlobalActions2(props, ref) {
   const {
     children,
     classes: classesProp,
@@ -29,6 +30,7 @@ const HvGlobalActions = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref,
       className: cx(
         classes.root,
         {
@@ -67,6 +69,6 @@ const HvGlobalActions = (props) => {
       )
     }
   );
-};
+});
 exports.globalActionsClasses = GlobalActions_styles.staticClasses;
 exports.HvGlobalActions = HvGlobalActions;

package/dist/cjs/Grid/Grid.cjs

@@ -81,7 +81,7 @@ const WidthGrid = React.forwardRef((props, ref) => {
   ) : {};
   return /* @__PURE__ */ jsxRuntime.jsx(MuiGrid__default.default, { ref, ...containerProps, ...others });
 });
-const HvGrid = React.forwardRef((props, ref) => {
+const HvGrid = React.forwardRef(function HvGrid2(props, ref) {
   const {
     item,
     container,

package/dist/cjs/Header/Actions/Actions.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Actions_styles = require("./Actions.styles.cjs");
-const HvHeaderActions = React.forwardRef((props, ref) => {
+const HvHeaderActions = React.forwardRef(function HvHeaderActions2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/cjs/Header/Brand/Brand.cjs

@@ -5,7 +5,7 @@ const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Brand_styles = require("./Brand.styles.cjs");
 const Typography = require("../../Typography/Typography.cjs");
-const HvHeaderBrand = React.forwardRef((props, ref) => {
+const HvHeaderBrand = React.forwardRef(function HvHeaderBrand2(props, ref) {
   const {
     classes: classesProp,
     logo,