@hitachivantara/uikit-react-core 5.80.1 → 5.81.0

package/dist/cjs/Header/Header.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 Header_styles = require("./Header.styles.cjs");
-const HvHeader = (props) => {
+const HvHeader = React.forwardRef(function HvHeader2(props, ref) {
   const {
     className,
     classes: classesProp,
@@ -15,6 +16,7 @@ const HvHeader = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "header",
     {
+      ref,
       style: { position },
       className: cx(
         classes.root,
@@ -26,6 +28,6 @@ const HvHeader = (props) => {
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.header, children })
     }
   );
-};
+});
 exports.headerClasses = Header_styles.staticClasses;
 exports.HvHeader = HvHeader;

package/dist/cjs/Header/Navigation/Navigation.cjs

@@ -8,7 +8,7 @@ const useSelectionPath = require("./useSelectionPath.cjs");
 const FocusContext = require("./utils/FocusContext.cjs");
 const SelectionContext = require("./utils/SelectionContext.cjs");
 const MenuBar = require("./MenuBar/MenuBar.cjs");
-const HvHeaderNavigation = React.forwardRef((props, ref) => {
+const HvHeaderNavigation = React.forwardRef(function HvHeaderNavigation2(props, ref) {
   const {
     data,
     selected,

package/dist/cjs/Input/Input.cjs

@@ -46,7 +46,7 @@ const changeInputValue = (input, value = "") => {
   setInputValue?.call(input, value);
   input?.dispatchEvent(event);
 };
-const HvInput = React.forwardRef((props, ref) => {
+const HvInput = React.forwardRef(function HvInput2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/cjs/ListContainer/ListContainer.cjs

@@ -6,7 +6,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useForkRef = require("../hooks/useForkRef.cjs");
 const ListContainer_styles = require("./ListContainer.styles.cjs");
 const ListContext = require("./ListContext/ListContext.cjs");
-const HvListContainer = React.forwardRef((props, ref) => {
+const HvListContainer = React.forwardRef(function HvListContainer2(props, ref) {
   const {
     id,
     classes: classesProp,

package/dist/cjs/ListContainer/ListItem/ListItem.cjs

@@ -21,7 +21,7 @@ const applyClassNameToElement = (element, className) => {
     className
   });
 };
-const HvListItem = React.forwardRef((props, ref) => {
+const HvListItem = React.forwardRef(function HvListItem2(props, ref) {
   const {
     classes: classesProp,
     className,

package/dist/cjs/Loading/Loading.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 uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const helpers = require("../utils/helpers.cjs");
 const Loading_styles = require("./Loading.styles.cjs");
 const Typography = require("../Typography/Typography.cjs");
-const HvLoading = (props) => {
+const HvLoading = React.forwardRef(function HvLoading2(props, ref) {
   const {
     color,
     hidden,
@@ -23,6 +24,7 @@ const HvLoading = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      ref,
       hidden: !!hidden,
       style: uikitReactUtils.mergeStyles(style, {
         color: uikitStyles.getColor(color, small ? "secondary" : "brand"),
@@ -53,6 +55,6 @@ const HvLoading = (props) => {
       ]
     }
   );
-};
+});
 exports.loadingClasses = Loading_styles.staticClasses;
 exports.HvLoading = HvLoading;

package/dist/cjs/LoadingContainer/LoadingContainer.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 LoadingContainer_styles = require("./LoadingContainer.styles.cjs");
 const Loading = require("../Loading/Loading.cjs");
-const HvLoadingContainer = (props) => {
+const HvLoadingContainer = React.forwardRef(function HvLoadingContainer2(props, ref) {
   const {
     children,
     className,
@@ -18,7 +19,7 @@ const HvLoadingContainer = (props) => {
   } = uikitReactUtils.useDefaultProps("HvLoadingContainer", props);
   const { classes, cx } = LoadingContainer_styles.useClasses(classesProp);
   const ariaLabel = ariaLabelProp || typeof label === "string" && label || "Loading";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Loading.HvLoading,
       {
@@ -35,6 +36,6 @@ const HvLoadingContainer = (props) => {
     ),
     children
   ] });
-};
+});
 exports.loadingContainerClasses = LoadingContainer_styles.staticClasses;
 exports.HvLoadingContainer = HvLoadingContainer;

package/dist/cjs/Login/Login.cjs

@@ -1,11 +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 Login_styles = require("./Login.styles.cjs");
-const HvLogin = (props) => {
+const HvLogin = React.forwardRef(function HvLogin2(props, ref) {
   const {
-    id,
     className,
     classes: classesProp,
     children,
@@ -16,7 +16,7 @@ const HvLogin = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      id,
+      ref,
       className: cx(classes.root, className),
       style: {
         backgroundImage: background && `url(${background})`
@@ -25,6 +25,6 @@ const HvLogin = (props) => {
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.formContainer, children })
     }
   );
-};
+});
 exports.loginClasses = Login_styles.staticClasses;
 exports.HvLogin = HvLogin;

package/dist/cjs/MultiButton/MultiButton.cjs

@@ -33,7 +33,7 @@ const HvMultiButton = (props) => {
         classes.root,
         {
           [classes.multiple]: !split,
-          [classes.vertical]: vertical,
+          [classes.vertical]: !split && vertical,
           [classes[variant]]: variant,
           // TODO - remove in v6
           [classes.splitGroup]: split,
@@ -43,16 +43,15 @@ const HvMultiButton = (props) => {
       ),
       ...others,
       children: buttons.map((child, index) => {
-        const childIsSelected = !!child.props.selected;
         return React.cloneElement(child, {
           key: index,
           variant,
           disabled: disabled || child.props.disabled,
           size,
-          className: cx(child.props.className, classes.button, {
+          className: cx(classes.button, child.props.className, {
             [classes.firstButton]: index === 0,
             [classes.lastButton]: index === buttons.length - 1,
-            [classes.selected]: childIsSelected
+            [classes.selected]: child.props.selected
           })
         });
       })

package/dist/cjs/MultiButton/MultiButton.styles.cjs

@@ -8,105 +8,75 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
   root: {
     display: "flex",
     alignItems: "center",
-    transition: "none",
-    position: "relative",
-    zIndex: 0
+    position: "relative"
   },
   multiple: {
-    background: uikitStyles.theme.colors.atmo2,
-    // prevent the focus ring to be hidden by sibling hover background
-    "&>.HvIsFocusVisible": {
-      zIndex: 5
-    },
-    "& button$button": {
-      minWidth: "unset",
+    backgroundColor: uikitStyles.theme.colors.atmo2,
+    borderWidth: 0,
+    borderColor: `${uikitStyles.theme.colors.atmo4} transparent`,
+    borderRadius: uikitStyles.theme.radii.base,
+    "& $button": {
+      minWidth: 32,
+      minHeight: 32,
       width: "100%",
       maxWidth: 200,
       padding: 0,
-      transition: "none",
-      flex: "1 0 0px",
-      borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-      borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-      borderLeft: "solid 1px transparent",
-      borderRight: "solid 1px transparent",
+      flex: 1,
+      borderColor: "inherit",
       borderRadius: 0,
       fontWeight: uikitStyles.theme.typography.body.fontWeight,
-      fontSize: uikitStyles.theme.typography.body.fontSize,
       "&:disabled": {
         color: uikitStyles.theme.colors.secondary_60,
-        borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        "&:hover": {
-          borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-          borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-          borderLeft: "solid 1px transparent",
-          borderRight: "solid 1px transparent"
-        }
+        borderColor: "inherit"
+      },
+      "&:hover": {
+        borderColor: "inherit"
       },
       "&$firstButton": {
-        borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderTopLeftRadius: uikitStyles.theme.radii.base,
-        borderBottomLeftRadius: uikitStyles.theme.radii.base,
+        borderLeftColor: uikitStyles.theme.colors.atmo4,
+        borderTopLeftRadius: "inherit",
+        borderBottomLeftRadius: "inherit",
         "&:disabled": {
-          borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+          borderLeftColor: uikitStyles.theme.colors.atmo4
         }
       },
       "&$lastButton": {
-        borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderTopRightRadius: uikitStyles.theme.radii.base,
-        borderBottomRightRadius: uikitStyles.theme.radii.base,
+        borderRightColor: uikitStyles.theme.colors.atmo4,
+        borderTopRightRadius: "inherit",
+        borderBottomRightRadius: "inherit",
         "&:disabled": {
-          borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
-        },
-        "&:disabled:hover": {
-          borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+          borderRightColor: uikitStyles.theme.colors.atmo4
         }
       },
       "&:not($firstButton)": {
         marginLeft: "-1px"
       },
       "&$selected": {
-        background: uikitStyles.theme.colors.atmo1,
-        ...uikitStyles.theme.typography.label,
-        borderRadius: uikitStyles.theme.radii.base,
-        border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
+        backgroundColor: uikitStyles.theme.colors.atmo1,
+        fontWeight: uikitStyles.theme.typography.label.fontWeight,
+        borderRadius: "inherit",
+        borderColor: uikitStyles.theme.colors.secondary,
         zIndex: 2,
-        "&:hover": {
-          background: uikitStyles.theme.colors.atmo3,
-          "&:not(:disabled)": {
-            border: `solid 1px ${uikitStyles.theme.colors.secondary}`
-          },
-          "&:disabled": {
-            border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
-          }
-        },
-        // prevent the focus ring to be hidden by sibling hover background
-        // even when selected
-        "&.HvIsFocusVisible": {
-          zIndex: 5
+        "&:hover:not(:disabled),&:focus-visible": {
+          backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
         },
         "&:disabled": {
           zIndex: 1,
-          color: uikitStyles.theme.colors.secondary_60,
-          background: uikitStyles.theme.colors.atmo1,
-          border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+          borderColor: uikitStyles.theme.colors.atmo4
         }
       }
     }
   },
   splitGroup: {
     width: "fit-content",
-    background: uikitStyles.theme.colors.atmo1,
-    // HvButton, HvDropDownMenu
-    "& button$button:not($firstButton), & $button:not($firstButton) button": {
+    "& $button:not($firstButton)": {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0,
       "&:not([aria-controls])": {
         borderLeftWidth: 0
       }
     },
-    // HvButton, HvDropDownMenu
-    "& button$button:not($lastButton), & $button:not($lastButton) button": {
+    "& $button:not($lastButton)": {
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0,
       "&:not([aria-controls])": {
@@ -121,52 +91,33 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
         height: "auto",
         backgroundColor: "currentcolor"
       }
-    },
-    // HvDropDownMenu
-    [`& .${DropDownMenu_styles.staticClasses.iconSelected}`]: {
-      zIndex: 2
     }
   },
-  splitGroupDisabled: { background: uikitStyles.theme.colors.atmo3 },
+  splitGroupDisabled: {},
   button: {
-    position: "relative"
+    position: "relative",
+    // prevent the focus ring to be hidden by sibling hover background
+    [`&:focus-visible, &.${DropDownMenu_styles.staticClasses.iconSelected}`]: {
+      zIndex: 5
+    }
   },
   selected: {},
   vertical: {
     flexDirection: "column",
     height: "auto",
-    "& button$button": {
+    borderColor: `transparent ${uikitStyles.theme.colors.atmo4}`,
+    "& $button": {
       minWidth: 32,
       width: "100%",
-      borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-      borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-      borderTop: "solid 1px transparent",
-      borderBottom: "solid 1px transparent",
-      "&:disabled": {
-        color: uikitStyles.theme.colors.secondary_60,
-        borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderTop: "solid 1px transparent",
-        borderBottom: "solid 1px transparent",
-        "&:hover": {
-          borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-          borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-          borderTop: "solid 1px transparent",
-          borderBottom: "solid 1px transparent"
-        }
-      },
       "&$firstButton": {
-        borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderTopLeftRadius: uikitStyles.theme.radii.base,
-        borderTopRightRadius: uikitStyles.theme.radii.base
+        borderTopColor: uikitStyles.theme.colors.atmo4,
+        borderTopLeftRadius: "inherit",
+        borderTopRightRadius: "inherit"
       },
       "&$lastButton": {
-        borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
-        borderBottomLeftRadius: uikitStyles.theme.radii.base,
-        borderBottomRightRadius: uikitStyles.theme.radii.base,
-        "&:disabled:hover": {
-          borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`
-        }
+        borderBottomColor: uikitStyles.theme.colors.atmo4,
+        borderBottomLeftRadius: "inherit",
+        borderBottomRightRadius: "inherit"
       },
       "&:not($firstButton)": {
         marginLeft: 0,
@@ -174,24 +125,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvMultiButt
       },
       "&$selected": {
         height: 32,
-        width: `calc(100% + 2px) !important`,
-        background: uikitStyles.theme.colors.atmo1,
-        ...uikitStyles.theme.typography.label,
-        borderRadius: uikitStyles.theme.radii.base,
-        border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
-        zIndex: 2,
-        "&:hover, &:focus": {
-          background: uikitStyles.theme.colors.atmo3
-        },
-        "&:disabled": {
-          zIndex: 1,
-          color: uikitStyles.theme.colors.secondary_60,
-          background: uikitStyles.theme.colors.atmo1,
-          border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
-        }
+        width: "calc(100% + 2px)",
+        borderColor: uikitStyles.theme.colors.secondary
       }
     }
   },
+  // TODO - review the need for these classes in v6 (use :first-child and :last-child instead)
   firstButton: {},
   lastButton: {},
   // TODO - review the need for these classes in v6

package/dist/cjs/Pagination/Pagination.cjs

@@ -41,7 +41,7 @@ const DEFAULT_LABELS = {
   /** Label of the last page button */
   lastPage: "Last Page"
 };
-const HvPagination = (props) => {
+const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
   const {
     classes: classesProp,
     className,
@@ -107,7 +107,7 @@ const HvPagination = (props) => {
       ...currentPageInputProps
     }
   ) });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       !isXsDown && /* @__PURE__ */ jsxRuntime.jsx(
         Typography.HvTypography,
@@ -202,6 +202,6 @@ const HvPagination = (props) => {
       )
     ] })
   ] });
-};
+});
 exports.paginationClasses = Pagination_styles.staticClasses;
 exports.HvPagination = HvPagination;

package/dist/cjs/Pagination/Pagination.styles.cjs

@@ -39,6 +39,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPaginatio
   pageSizeOptions: {
     display: "flex",
     position: "absolute",
+    gap: uikitStyles.theme.space.xs,
     height: 24,
     top: "50%",
     transform: "translateY(-50%)",
@@ -70,7 +71,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvPaginatio
   /** Styles applied to the page size selector dropdown element. */
   pageSizeOptionsSelect: {
     display: "inline-block",
-    margin: `0px ${uikitStyles.theme.space.xs}`,
     width: "auto",
     ...uikitStyles.theme.typography.caption2
   },

package/dist/cjs/Panel/Panel.cjs

@@ -5,7 +5,7 @@ const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const Panel_styles = require("./Panel.styles.cjs");
 const HvPanel = React.forwardRef(
-  (props, ref) => {
+  function HvPanel2(props, ref) {
     const {
       className,
       classes: classesProp,

package/dist/cjs/Panel/Panel.styles.cjs

@@ -7,7 +7,8 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvPanel", {
     position: "relative",
     padding: uikitStyles.theme.space.sm,
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    overflow: "auto"
+    overflow: "auto",
+    borderRadius: "inherit"
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Radio/Radio.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 HvRadio = React.forwardRef(
-  (props, ref) => {
+  function HvRadio2(props, ref) {
     const {
       classes: classesProp,
       className,

package/dist/cjs/RadioGroup/RadioGroup.cjs

@@ -25,7 +25,7 @@ const getValueFromSelectedChildren = (children) => {
   return null;
 };
 const HvRadioGroup = React.forwardRef(
-  (props, ref) => {
+  function HvRadioGroup2(props, ref) {
     const {
       id,
       classes: classesProp,

package/dist/cjs/Section/Section.cjs

@@ -8,7 +8,7 @@ const useExpandable = require("../hooks/useExpandable.cjs");
 const Section_styles = require("./Section.styles.cjs");
 const Button = require("../Button/Button.cjs");
 const HvSection = React.forwardRef(
-  (props, ref) => {
+  function HvSection2(props, ref) {
     const {
       id,
       classes: classesProp,
@@ -31,49 +31,44 @@ const HvSection = React.forwardRef(
       expanded,
       defaultExpanded
     });
-    const showContent = expandable ? !!isOpen : true;
+    const hasHeader = title || actions || expandable;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         id,
-        className: cx(classes.root, className),
+        className: cx(classes.root, className, {
+          [classes.raisedHeader]: raisedHeader && isOpen
+        }),
         ...others,
         children: [
-          (title || actions || expandable) && /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cx(classes.header, {
-                [classes.raisedHeader]: raisedHeader && isOpen
-              }),
-              children: [
-                expandable && /* @__PURE__ */ jsxRuntime.jsx(
-                  Button.HvButton,
-                  {
-                    icon: true,
-                    onClick: (event) => {
-                      toggleOpen();
-                      onToggle?.(event, !isOpen);
-                    },
-                    "aria-label": isOpen ? "Collapse" : "Expand",
-                    ...buttonProps,
-                    ...expandButtonProps,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { style: { rotate: isOpen ? "180deg" : void 0 } })
-                  }
-                ),
-                title,
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: actions })
-              ]
-            }
-          ),
+          hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.header, children: [
+            expandable && /* @__PURE__ */ jsxRuntime.jsx(
+              Button.HvButton,
+              {
+                icon: true,
+                onClick: (event) => {
+                  toggleOpen();
+                  onToggle?.(event, !isOpen);
+                },
+                "aria-label": isOpen ? "Collapse" : "Expand",
+                ...buttonProps,
+                ...expandButtonProps,
+                children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { style: { rotate: isOpen ? "180deg" : void 0 } })
+              }
+            ),
+            title,
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.actions, children: actions })
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               ref: contentRef,
               hidden: !isOpen,
               className: cx(classes.content, {
-                [classes.hidden]: !showContent,
-                [classes.spaceTop]: !(title || actions || expandable)
+                [classes.hidden]: expandable && !isOpen,
+                [classes.spaceTop]: !hasHeader,
+                [classes.hasHeader]: hasHeader
               }),
               ...expandable && regionProps,
               children

package/dist/cjs/Section/Section.styles.cjs

@@ -20,21 +20,25 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSection",
     padding: uikitStyles.theme.space.sm
   },
   content: {
-    padding: uikitStyles.theme.spacing(0, "sm", "sm", "sm")
+    padding: uikitStyles.theme.space.sm,
+    borderRadius: "inherit"
   },
-  spaceTop: {
-    paddingTop: uikitStyles.theme.space.sm
+  hasHeader: {
+    paddingTop: 0
   },
+  /** @deprecated use `hasHeader` instead */
+  spaceTop: {},
   actions: {
     display: "flex",
     gap: uikitStyles.theme.space.xs,
-    position: "absolute",
-    right: 0
+    marginLeft: "auto"
   },
   raisedHeader: {
-    zIndex: 1,
-    boxShadow: uikitStyles.theme.colors.shadow,
-    "+ div": {
+    "& $header": {
+      zIndex: 1,
+      boxShadow: uikitStyles.theme.colors.shadow
+    },
+    "& $content": {
       paddingTop: uikitStyles.theme.space.sm
     }
   }

package/dist/cjs/Select/OptionGroup.cjs

@@ -12,7 +12,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvOptionGro
   }
 });
 const HvOptionGroup = React.forwardRef(
-  (props, ref) => {
+  function HvOptionGroup2(props, ref) {
     const {
       className,
       classes: classesProp,

package/dist/cjs/SelectionList/SelectionList.cjs

@@ -23,7 +23,7 @@ const getValueFromSelectedChildren = (children, multiple) => {
   }).filter((v) => v !== void 0);
   return multiple ? selectedValues : selectedValues?.[0];
 };
-const HvSelectionList = React.forwardRef((props, ref) => {
+const HvSelectionList = React.forwardRef(function HvSelectionList2(props, ref) {
   const {
     id,
     classes: classesProp,