@hitachivantara/uikit-react-core 5.91.3 → 5.93.0

package/dist/esm/Button/Button.styles.js

@@ -28,20 +28,21 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
     border: "1px solid transparent",
     borderRadius: `var(--radius, ${theme.radii.base})`,
     padding: theme.spacing(0, "sm"),
+    // remove icon container spacing
+    "--icsize": "auto",
     "& $startIcon, & $endIcon": {
       flexShrink: 0,
       lineHeight: 0,
-      marginTop: -1,
-      marginBottom: -1
+      minWidth: 16
     }
   },
   /** applied to the _left_ icon container */
   startIcon: {
-    marginLeft: theme.spacing(-1)
+    marginRight: 8
   },
   /** applied to the _right_ icon container */
   endIcon: {
-    marginRight: theme.spacing(-1)
+    marginLeft: 8
   },
   focusVisible: {},
   /** applied to the root element when disabled */
@@ -59,6 +60,7 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
   icon: {
     margin: 0,
     padding: 0,
+    flexShrink: 0,
     width: "var(--HvButton-height, fit-content)"
   },
   /** applied to the root element when using the `contained` variant */

package/dist/esm/ButtonBase/ButtonBase.styles.js

@@ -23,10 +23,7 @@ const { staticClasses, useClasses } = createClasses("HvButtonBase", {
   },
   disabled: {
     cursor: "not-allowed",
-    color: theme.colors.textDisabled,
-    "&:hover, &:focus-visible": {
-      backgroundColor: "transparent"
-    }
+    color: theme.colors.textDisabled
   }
 });
 export {

package/dist/esm/Calendar/CalendarHeader/CalendarHeader.js

@@ -35,9 +35,8 @@ const HvCalendarHeader = (props) => {
   const [isValidValue, setIsValidValue] = useState(
     inputValue.length === 0 || inputValue && isDate(new Date(inputValue))
   );
-  const validateInput = (incomingValid) => incomingValid === void 0 || isDate(new Date(incomingValid));
   useEffect(() => {
-    const valid = validateInput(localValue);
+    const valid = !localValue || isDate(new Date(localValue));
     setIsValidValue(valid);
     if (valid) {
       if (!localValue) {

package/dist/esm/Calendar/CalendarNavigation/Navigation/Navigation.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { DropLeftXS, DropRightXS } from "@hitachivantara/uikit-react-icons";
+import { HvIcon } from "../../../icons.js";
 import { setId } from "../../../utils/setId.js";
 import { useClasses } from "./Navigation.styles.js";
 import { staticClasses } from "./Navigation.styles.js";
@@ -27,7 +27,7 @@ const Navigation = ({
           [classes.disabled]: !isPreviousEnabled
         }),
         onClick: onNavigatePrevious,
-        children: /* @__PURE__ */ jsx(DropLeftXS, {})
+        children: /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", size: "xs", rotate: true })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -54,7 +54,7 @@ const Navigation = ({
           [classes.disabled]: !isNextEnabled
         }),
         onClick: onNavigateNext,
-        children: /* @__PURE__ */ jsx(DropRightXS, {})
+        children: /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", size: "xs" })
       }
     )
   ] });

package/dist/esm/Card/Card.js

@@ -11,23 +11,24 @@ const HvCard = forwardRef(function HvCard2(props, ref) {
     className,
     children,
     icon,
-    selectable = false,
-    selected = false,
+    selectable,
+    selected,
     statusColor = "sema0",
     bgcolor,
     ...others
   } = useDefaultProps("HvCard", props);
   const { classes, cx } = useClasses(classesProp);
-  const barColor = statusColor !== "sema0" && statusColor || selected && "text" || "border";
+  const barColor = statusColor !== "sema0" && statusColor || selected && "text" || void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref,
       style: mergeStyles(style, {
         "--bg-color": getColor(bgcolor),
-        "--bar-height": `${selected ? 4 : 2}px`,
+        "--bar-height": selected && "4px",
         "--bar-color": getColor(barColor)
       }),
+      "data-color": statusColor,
       className: cx(
         "HvIsCardGridElement",
         classes.root,

package/dist/esm/Card/Card.styles.js

@@ -6,7 +6,9 @@ const { staticClasses, useClasses } = createClasses("HvCard", {
     overflow: "visible",
     position: "relative",
     outline: `1px solid ${theme.colors.border}`,
-    borderRadius: `0px 0px ${theme.radii.round} ${theme.radii.round}`,
+    "--rt": 0,
+    "--rb": theme.radii.round,
+    borderRadius: `var(--rt) var(--rt) var(--rb) var(--rb)`,
     backgroundColor: "var(--bg-color)",
     "&:focus-visible": {
       ...outlineStyles
@@ -37,8 +39,8 @@ const { staticClasses, useClasses } = createClasses("HvCard", {
     right: theme.space.xs
   },
   semanticBar: {
-    backgroundColor: "var(--bar-color)",
-    height: "var(--bar-height)",
+    backgroundColor: `var(--bar-color, ${theme.colors.border})`,
+    height: "var(--bar-height, 2px)",
     width: "100%",
     top: -1,
     right: 0

package/dist/esm/Card/Header/Header.styles.js

@@ -3,7 +3,8 @@ import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvCardHeader", {
   root: {
     position: "relative",
-    padding: theme.spacing("12px", "xs", "sm", "sm")
+    padding: theme.spacing("12px", "xs", "sm", "sm"),
+    gap: theme.space.xs
   },
   titleShort: {
     ...theme.typography.label,
@@ -19,8 +20,7 @@ const { staticClasses, useClasses } = createClasses("HvCardHeader", {
   },
   content: {},
   action: {
-    margin: 0,
-    paddingLeft: theme.space.xs
+    margin: 0
   }
 });
 export {

package/dist/esm/Carousel/Carousel.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useState, Children, useCallback, useEffect } from "react";
 import useCarousel from "embla-carousel-react";
-import { Close, Fullscreen, Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps, useTheme, clamp } from "@hitachivantara/uikit-react-utils";
 import { useLabels } from "../hooks/useLabels.js";
+import { HvIcon } from "../icons.js";
 import { useClasses } from "./Carousel.styles.js";
 import { staticClasses } from "./Carousel.styles.js";
 import { HvCarouselControls } from "./CarouselControls.js";
@@ -119,7 +119,7 @@ const HvCarousel = forwardRef(function HvCarousel2(props, ref) {
             title: isFullscreen ? labels.close : labels.fullscreen,
             onClick: handleFullscreen,
             className: classes.closeButton,
-            children: isFullscreen ? /* @__PURE__ */ jsx(Close, {}) : /* @__PURE__ */ jsx(Fullscreen, {})
+            children: /* @__PURE__ */ jsx(HvIcon, { name: isFullscreen ? "Close" : "Fullscreen" })
           }
         )
       ]
@@ -187,7 +187,7 @@ const HvCarousel = forwardRef(function HvCarousel2(props, ref) {
                     variant: "secondarySubtle",
                     "aria-label": labels.backwards,
                     onClick: handlePrevious,
-                    children: /* @__PURE__ */ jsx(Backwards, { iconSize: "XS" })
+                    children: /* @__PURE__ */ jsx(HvIcon, { name: "Backwards", size: "xs" })
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -198,7 +198,7 @@ const HvCarousel = forwardRef(function HvCarousel2(props, ref) {
                     variant: "secondarySubtle",
                     "aria-label": labels.forwards,
                     onClick: handleNext,
-                    children: /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" })
+                    children: /* @__PURE__ */ jsx(HvIcon, { name: "Forwards", size: "xs" })
                   }
                 )
               ] }),

package/dist/esm/Carousel/CarouselControls.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useLabels } from "../hooks/useLabels.js";
+import { HvIcon } from "../icons.js";
 import { useClasses } from "./Carousel.styles.js";
 import { HvButton } from "../Button/Button.js";
 const DEFAULT_LABELS = {
@@ -43,7 +43,7 @@ const HvCarouselControls = (props) => {
           disabled: !canPrevious,
           "aria-label": labels.backwards,
           onClick: onPreviousClick,
-          children: /* @__PURE__ */ jsx(Backwards, { iconSize: "XS" })
+          children: /* @__PURE__ */ jsx(HvIcon, { name: "Backwards", size: "xs" })
         }
       ),
       /* @__PURE__ */ jsx("div", { className: classes.pageCounter, children: `${selectedIndex + 1} / ${numSlides}` }),
@@ -54,7 +54,7 @@ const HvCarouselControls = (props) => {
           disabled: !canNext,
           "aria-label": labels.forwards,
           onClick: onNextClick,
-          children: /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" })
+          children: /* @__PURE__ */ jsx(HvIcon, { name: "Forwards", size: "xs" })
         }
       )
     ] }),

package/dist/esm/CheckBox/CheckBox.js

@@ -6,8 +6,8 @@ import { useUniqueId } from "../hooks/useUniqueId.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./CheckBox.styles.js";
 import { staticClasses } from "./CheckBox.styles.js";
-import { isInvalid } from "../FormElement/utils.js";
 import { HvBaseCheckBox } from "../BaseCheckBox/BaseCheckBox.js";
+import { isInvalid } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";

package/dist/esm/CheckBoxGroup/CheckBoxGroup.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useMemo, Children, useCallback, cloneElement } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { CounterLabel } from "../utils/CounterLabel.js";
@@ -9,8 +10,6 @@ import { setId } from "../utils/setId.js";
 import { useClasses } from "./CheckBoxGroup.styles.js";
 import { staticClasses } from "./CheckBoxGroup.styles.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvCheckBox } from "../CheckBox/CheckBox.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const computeSelectAllState = (selected, total) => {
@@ -178,16 +177,18 @@ const HvCheckBoxGroup = forwardRef(
         readOnly,
         className: cx(classes.root, className),
         children: [
-          label && /* @__PURE__ */ jsx(
-            HvLabel,
+          /* @__PURE__ */ jsx(
+            HvLabelContainer,
             {
-              showGutter: true,
-              id: setId(elementId, "label"),
               label,
-              className: classes.label
+              description,
+              labelId: setId(elementId, "label"),
+              descriptionId: setId(elementId, "description"),
+              classes: {
+                label: classes.label
+              }
             }
           ),
-          description && /* @__PURE__ */ jsx(HvInfoMessage, { id: setId(elementId, "description"), children: description }),
           /* @__PURE__ */ jsxs(
             "div",
             {

package/dist/esm/ColorPicker/ColorPicker.js

@@ -1,10 +1,11 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { ColorPicker } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvIcon } from "../icons.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./ColorPicker.styles.js";
 import { staticClasses } from "./ColorPicker.styles.js";
@@ -12,8 +13,6 @@ import { PresetColors } from "./PresetColors/PresetColors.js";
 import { Picker } from "./Picker/Picker.js";
 import { SavedColors } from "./SavedColors/SavedColors.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvPanel } from "../Panel/Panel.js";
 import { HvTypography } from "../Typography/Typography.js";
@@ -79,8 +78,6 @@ const HvColorPicker = forwardRef(
       defaultSavedColorsValue
     );
     const elementId = useUniqueId(id);
-    const hasLabel = label != null;
-    const hasDescription = description != null;
     const handleToggle = (_, open) => {
       setIsOpen(open);
     };
@@ -125,25 +122,20 @@ const HvColorPicker = forwardRef(
         required,
         className: cx(classes.root, className),
         children: [
-          (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-            hasLabel && /* @__PURE__ */ jsx(
-              HvLabel,
-              {
-                showGutter: true,
-                id: setId(elementId, "label"),
-                label,
-                className: classes.label
-              }
-            ),
-            hasDescription && /* @__PURE__ */ jsx(
-              HvInfoMessage,
-              {
-                id: setId(elementId, "description"),
-                className: classes.description,
-                children: description
+          /* @__PURE__ */ jsx(
+            HvLabelContainer,
+            {
+              label,
+              description,
+              labelId: setId(elementId, "label"),
+              descriptionId: setId(elementId, "description"),
+              classes: {
+                root: classes.labelContainer,
+                label: classes.label,
+                description: classes.description
               }
-            )
-          ] }),
+            }
+          ),
           /* @__PURE__ */ jsx(
             HvBaseDropdown,
             {
@@ -165,7 +157,7 @@ const HvColorPicker = forwardRef(
                     classes.headerColorIconOnly
                   )
                 }
-              ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(ColorPicker, { className: classes.colorPickerIcon }) : void 0,
+              ) : dropdownIcon === "colorPicker" ? /* @__PURE__ */ jsx(HvIcon, { name: "ColorPicker", className: classes.colorPickerIcon }) : void 0,
               placeholder: iconOnly ? void 0 : color ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(
                   "div",

package/dist/esm/ColorPicker/ColorPicker.styles.js

@@ -1,10 +1,7 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 const { staticClasses, useClasses } = createClasses("HvColorPicker", {
   root: {},
-  labelContainer: {
-    display: "flex",
-    alignItems: "flex-start"
-  },
+  labelContainer: {},
   label: {},
   description: {},
   headerColorValue: {
@@ -36,8 +33,10 @@ const { staticClasses, useClasses } = createClasses("HvColorPicker", {
     }
   },
   dropdownRootIconOnly: {
-    width: 32,
-    height: 32,
+    "&,& .HvBaseDropdown-arrowContainer": {
+      width: 32,
+      height: 32
+    },
     "& .HvBaseDropdown-selection": {
       padding: 0
     }

package/dist/esm/ColorPicker/SavedColors/SavedColors.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { Swatch } from "react-color/lib/components/common";
-import { Add, CloseXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../../icons.js";
 import { useClasses } from "./SavedColors.styles.js";
 import { staticClasses } from "./SavedColors.styles.js";
 import { HvIconButton } from "../../IconButton/IconButton.js";
@@ -30,7 +30,7 @@ const SavedColors = (props) => {
         variant: "secondarySubtle",
         onClick: onAddColor,
         title: addButtonAriaLabel,
-        children: /* @__PURE__ */ jsx(Add, { "aria-hidden": true })
+        children: /* @__PURE__ */ jsx(HvIcon, { name: "Add", compact: true })
       }
     ),
     colors.map((color, index) => /* @__PURE__ */ jsxs(
@@ -55,7 +55,7 @@ const SavedColors = (props) => {
               variant: "secondarySubtle",
               onClick: () => onRemoveColor(color, index),
               title: deleteButtonAriaLabel,
-              children: /* @__PURE__ */ jsx(CloseXS, { "aria-hidden": true, iconSize: "XS" })
+              children: /* @__PURE__ */ jsx(HvIcon, { name: "Close", compact: true, size: "xs" })
             }
           ) })
         ]

package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js

@@ -39,16 +39,7 @@ const { staticClasses, useClasses } = createClasses(name, {
   },
   removeButton: {
     height: 16,
-    width: 16,
-    minWidth: 16,
-    minHeight: 16,
-    padding: 0,
-    margin: 0,
-    "& div > span": {
-      height: 16,
-      width: 16,
-      "& > div": { height: 16, width: 16 }
-    }
+    width: 16
   }
 });
 export {

package/dist/esm/DatePicker/DatePicker.js

@@ -1,12 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
-import { Calendar } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { DEFAULT_LOCALE, isDate } from "../Calendar/utils.js";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvIcon } from "../icons.js";
 import { setId } from "../utils/setId.js";
 import { useSavedState } from "../utils/useSavedState.js";
 import { useClasses } from "./DatePicker.styles.js";
@@ -15,11 +16,9 @@ import useVisibleDate from "./useVisibleDate.js";
 import { getDateLabel } from "./utils.js";
 import { HvCalendar } from "../Calendar/Calendar.js";
 import { HvButton } from "../Button/Button.js";
-import { isInvalid } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
+import { isInvalid } from "../FormElement/utils.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 import { HvActionBar } from "../ActionBar/ActionBar.js";
 const DEFAULT_LABELS = {
@@ -232,8 +231,6 @@ const HvDatePicker = forwardRef(
     ] });
     const dateValue = rangeMode ? { startDate, endDate } : startDate;
     const dateString = getDateLabel(dateValue, rangeMode, locale);
-    const hasLabel = label != null;
-    const hasDescription = description != null;
     const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
     const isStateInvalid = isInvalid(validationState);
     let errorMessageId;
@@ -253,25 +250,20 @@ const HvDatePicker = forwardRef(
         readOnly,
         ...others,
         children: [
-          (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-            hasLabel && /* @__PURE__ */ jsx(
-              HvLabel,
-              {
-                showGutter: true,
-                id: setId(elementId, "label"),
-                label,
-                className: classes.label
-              }
-            ),
-            hasDescription && /* @__PURE__ */ jsx(
-              HvInfoMessage,
-              {
-                id: setId(elementId, "description"),
-                className: classes.description,
-                children: description
+          /* @__PURE__ */ jsx(
+            HvLabelContainer,
+            {
+              label,
+              description,
+              labelId: setId(elementId, "label"),
+              descriptionId: setId(elementId, "description"),
+              classes: {
+                root: classes.labelContainer,
+                label: classes.label,
+                description: classes.description
               }
-            )
-          ] }),
+            }
+          ),
           /* @__PURE__ */ jsxs(
             HvBaseDropdown,
             {
@@ -297,7 +289,7 @@ const HvDatePicker = forwardRef(
               onClickOutside: handleCalendarClose,
               onContainerCreation: focusOnContainer,
               placeholder: dateString || placeholder || "",
-              adornment: /* @__PURE__ */ jsx(Calendar, { className: classes.icon }),
+              adornment: /* @__PURE__ */ jsx(HvIcon, { name: "Calendar", className: classes.icon }),
               popperProps: {
                 modifiers: [
                   { name: "preventOverflow", enabled: escapeWithReference }

package/dist/esm/DatePicker/DatePicker.styles.js

@@ -9,10 +9,7 @@ const { staticClasses, useClasses } = createClasses("HvDatePicker", {
   },
   leftContainer: {},
   rightContainer: {},
-  labelContainer: {
-    display: "flex",
-    alignItems: "flex-start"
-  },
+  labelContainer: {},
   label: {},
   description: {},
   error: {},

package/dist/esm/Dialog/Dialog.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useCallback, useMemo } from "react";
 import MuiDialog from "@mui/material/Dialog";
-import { Close } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
 import { getElementById } from "../utils/document.js";
 import { setId } from "../utils/setId.js";
 import { DialogContext } from "./context.js";
@@ -71,7 +71,7 @@ const HvDialog = (props) => {
             id: setId(id, "close"),
             className: classes.closeButton,
             onClick: (event) => onClose?.(event, void 0),
-            children: /* @__PURE__ */ jsx(Close, {})
+            children: /* @__PURE__ */ jsx(HvIcon, { name: "Close", compact: true })
           }
         ),
         /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children })

package/dist/esm/DotPagination/DotPagination.styles.js

@@ -41,7 +41,7 @@ const { useClasses, staticClasses } = createClasses("HvDotPagination", {
       backgroundColor: "currentcolor",
       width: "1em",
       height: "1em",
-      borderRadius: "50%"
+      borderRadius: theme.radii.full
     }
   }
 });

package/dist/esm/Drawer/Drawer.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import MuiDrawer from "@mui/material/Drawer";
-import { Close } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../icons.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./Drawer.styles.js";
 import { staticClasses } from "./Drawer.styles.js";
@@ -59,7 +59,7 @@ const HvDrawer = forwardRef(function HvDrawer2(props, ref) {
             className: classes.closeButton,
             onClick: onClose,
             title: buttonTitle,
-            children: /* @__PURE__ */ jsx(Close, {})
+            children: /* @__PURE__ */ jsx(HvIcon, { name: "Close" })
           }
         ),
         children

package/dist/esm/DropDownMenu/DropDownMenu.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
-import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useBaseDropdownContext } from "../BaseDropdown/context.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
+import { HvIcon } from "../icons.js";
 import { getPrevNextFocus } from "../utils/focusableElementFinder.js";
 import { isKey } from "../utils/keyboardUtils.js";
 import { setId } from "../utils/setId.js";
@@ -32,7 +32,7 @@ const HeaderComponent = forwardRef(
         "aria-haspopup": "menu",
         placement: popperPlacement,
         ...others,
-        children: icon || /* @__PURE__ */ jsx(MoreOptionsVertical, { role: "presentation" })
+        children: icon || /* @__PURE__ */ jsx(HvIcon, { name: "DotsVertical" })
       }
     );
   }

package/dist/esm/DropDownMenu/DropDownMenu.styles.js

@@ -1,7 +1,12 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvDropDownMenu", {
-  root: {},
+  root: {
+    flexShrink: 0,
+    "& > div": {
+      height: "inherit"
+    }
+  },
   /** @deprecated use `classes.root` instead */
   container: {},
   baseContainer: {