@hitachivantara/uikit-react-core 5.80.1 → 5.80.2

package/dist/cjs/Accordion/Accordion.cjs

@@ -8,9 +8,9 @@ const useExpandable = require("../hooks/useExpandable.cjs");
 const Accordion_styles = require("./Accordion.styles.cjs");
 const ButtonBase = require("../ButtonBase/ButtonBase.cjs");
 const Typography = require("../Typography/Typography.cjs");
-const HvAccordion = (props) => {
+const HvAccordion = React.forwardRef(function HvAccordion2(props, ref) {
   const {
-    id: idProp,
+    id,
     className,
     classes: classesProp,
     disabled = false,
@@ -27,7 +27,7 @@ const HvAccordion = (props) => {
   } = uikitReactUtils.useDefaultProps("HvAccordion", props);
   const { classes, cx } = Accordion_styles.useClasses(classesProp);
   const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable.useExpandable({
-    id: idProp,
+    id,
     expanded,
     disabled,
     defaultExpanded
@@ -79,7 +79,7 @@ const HvAccordion = (props) => {
     isOpen,
     labelVariant
   ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id: idProp, className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
     accordionHeader,
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -92,6 +92,6 @@ const HvAccordion = (props) => {
       }
     )
   ] });
-};
+});
 exports.accordionClasses = Accordion_styles.staticClasses;
 exports.HvAccordion = HvAccordion;

package/dist/cjs/ActionBar/ActionBar.cjs

@@ -1,9 +1,10 @@
 "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 ActionBar_styles = require("./ActionBar.styles.cjs");
-const HvActionBar = (props) => {
+const HvActionBar = React.forwardRef(function HvActionBar2(props, ref) {
   const {
     classes: classesProp,
     className,
@@ -11,7 +12,7 @@ const HvActionBar = (props) => {
     ...others
   } = uikitReactUtils.useDefaultProps("HvActionBar", props);
   const { classes, cx } = ActionBar_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.root, className), ...others, children });
-};
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.root, className), ...others, children });
+});
 exports.actionBarClasses = ActionBar_styles.staticClasses;
 exports.HvActionBar = HvActionBar;

package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs

@@ -9,7 +9,7 @@ const ActionsGeneric_styles = require("./ActionsGeneric.styles.cjs");
 const IconButton = require("../IconButton/IconButton.cjs");
 const Button = require("../Button/Button.cjs");
 const DropDownMenu = require("../DropDownMenu/DropDownMenu.cjs");
-const HvActionsGeneric = (props) => {
+const HvActionsGeneric = React.forwardRef(function HvActionsGeneric2(props, ref) {
   const {
     id: idProp,
     classes: classesProp,
@@ -97,6 +97,7 @@ const HvActionsGeneric = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      ref,
       className: cx(
         classes.root,
         { [classes.actionContainer]: actionOverflow },
@@ -106,6 +107,6 @@ const HvActionsGeneric = (props) => {
       children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx))
     }
   );
-};
+});
 exports.actionsGenericClasses = ActionsGeneric_styles.staticClasses;
 exports.HvActionsGeneric = HvActionsGeneric;

package/dist/cjs/AppSwitcher/AppSwitcher.cjs

@@ -9,7 +9,7 @@ const Panel = require("../Panel/Panel.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const OverflowTooltip = require("../OverflowTooltip/OverflowTooltip.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
-const HvAppSwitcher = (props) => {
+const HvAppSwitcher = React.forwardRef(function HvAppSwitcher2(props, ref) {
   const {
     className,
     classes: classesProp,
@@ -54,6 +54,7 @@ const HvAppSwitcher = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Panel.HvPanel,
     {
+      ref,
       className: cx(
         classes.root,
         classes[layout],
@@ -94,6 +95,6 @@ const HvAppSwitcher = (props) => {
       ]
     }
   );
-};
+});
 exports.appSwitcherClasses = AppSwitcher_styles.staticClasses;
 exports.HvAppSwitcher = HvAppSwitcher;

package/dist/cjs/Avatar/Avatar.cjs

@@ -12,7 +12,7 @@ const sizes = require("../utils/sizes.cjs");
 const Avatar_styles = require("./Avatar.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiAvatar__default = /* @__PURE__ */ _interopDefault(MuiAvatar);
-const HvAvatar = React.forwardRef((props, ref) => {
+const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
   const {
     className,
     style,

package/dist/cjs/AvatarGroup/AvatarGroup.cjs

@@ -79,7 +79,7 @@ const Overflow = ({
   );
 };
 const HvAvatarGroup = React.forwardRef(
-  (props, ref) => {
+  function HvAvatarGroup2(props, ref) {
     const {
       className,
       style,

package/dist/cjs/Badge/Badge.cjs

@@ -5,7 +5,7 @@ const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Badge_styles = require("./Badge.styles.cjs");
 const Typography = require("../Typography/Typography.cjs");
-const HvBadge = React.forwardRef((props, ref) => {
+const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/cjs/Banner/Banner.cjs

@@ -11,7 +11,7 @@ const BannerContent = require("./BannerContent/BannerContent.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Slide__default = /* @__PURE__ */ _interopDefault(Slide);
 const Snackbar__default = /* @__PURE__ */ _interopDefault(Snackbar);
-const HvBanner = (props) => {
+const HvBanner = React.forwardRef(function HvBanner2(props, ref) {
   const {
     id,
     classes: classesProp,
@@ -54,6 +54,7 @@ const HvBanner = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Snackbar__default.default,
     {
+      ref,
       id,
       open,
       className,
@@ -85,6 +86,6 @@ const HvBanner = (props) => {
       )
     }
   );
-};
+});
 exports.bannerClasses = Banner_styles.staticClasses;
 exports.HvBanner = HvBanner;

package/dist/cjs/Banner/BannerContent/BannerContent.cjs

@@ -10,7 +10,7 @@ const ActionContainer = require("./ActionContainer/ActionContainer.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const SnackbarContent__default = /* @__PURE__ */ _interopDefault(SnackbarContent);
 const HvBannerContent = React.forwardRef(
-  (props, ref) => {
+  function HvBannerContent2(props, ref) {
     const {
       id,
       classes: classesProp,

package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs

@@ -15,7 +15,7 @@ const getSelectorIcons = () => {
     checkboxChecked: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {})
   };
 };
-const HvBaseCheckBox = React.forwardRef((props, ref) => {
+const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
   const {
     id,
     classes: classesProp,

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -247,7 +247,7 @@ const BaseDropdown = React.forwardRef((props, ref) => {
   ] });
 });
 const HvBaseDropdown = React.forwardRef(
-  (props, ref) => {
+  function HvBaseDropdown2(props, ref) {
     const {
       popperProps = {},
       variableWidth,

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/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

@@ -38,7 +38,7 @@ const HeaderComponent = React.forwardRef(
     );
   }
 );
-const HvDropDownMenu = (props) => {
+const HvDropDownMenu = React.forwardRef(function HvDropDownMenu2(props, ref) {
   const {
     id: idProp,
     classes: classesProp,
@@ -85,6 +85,7 @@ const HvDropDownMenu = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     BaseDropdown.HvBaseDropdown,
     {
+      ref,
       id,
       className: cx(classes.container, className),
       classes: {
@@ -136,6 +137,6 @@ const HvDropDownMenu = (props) => {
       ) })
     }
   );
-};
+});
 exports.dropDownMenuClasses = DropDownMenu_styles.staticClasses;
 exports.HvDropDownMenu = HvDropDownMenu;

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,