@hitachivantara/uikit-react-core 5.92.0 → 5.93.1

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -8,6 +8,7 @@ const datepicker$1 = require("@react-aria/datepicker");
 const datepicker = require("@react-stately/datepicker");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const utils = require("../Calendar/utils.cjs");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const icons = require("../icons.cjs");
@@ -16,8 +17,6 @@ const Placeholder = require("./Placeholder.cjs");
 const TimePicker_styles = require("./TimePicker.styles.cjs");
 const Unit = require("./Unit/Unit.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
-const Label = require("../FormElement/Label/Label.cjs");
-const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const toTime = (value) => {
@@ -118,25 +117,20 @@ const HvTimePicker = React.forwardRef(
         className: cx(classes.root, className),
         ...others,
         children: [
-          (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
-            label && /* @__PURE__ */ jsxRuntime.jsx(
-              Label.HvLabel,
-              {
-                showGutter: true,
-                label,
-                className: classes.label,
-                ...labelProps
-              }
-            ),
-            description && /* @__PURE__ */ jsxRuntime.jsx(
-              InfoMessage.HvInfoMessage,
-              {
-                className: classes.description,
-                ...descriptionProps,
-                children: description
-              }
-            )
-          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LabelContainer.HvLabelContainer,
+            {
+              label,
+              description,
+              classes: {
+                root: classes.labelContainer,
+                label: classes.label,
+                description: classes.description
+              },
+              labelProps,
+              descriptionProps
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsx(
             BaseDropdown.HvBaseDropdown,
             {

package/dist/cjs/TimePicker/TimePicker.styles.cjs

@@ -6,10 +6,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvTimePicke
   root: {
     position: "relative"
   },
-  labelContainer: {
-    display: "flex",
-    alignItems: "flex-start"
-  },
+  labelContainer: {},
   label: {},
   description: {},
   placeholder: {

package/dist/cjs/VerticalNavigation/Actions/Action.cjs

@@ -24,6 +24,7 @@ const HvVerticalNavigationAction = (props) => {
       id: setId.setId(id, "button"),
       variant: "secondaryGhost",
       icon: !isOpen,
+      startIcon: isOpen && icon,
       className: cx(
         classes.action,
         {
@@ -35,7 +36,7 @@ const HvVerticalNavigationAction = (props) => {
       ...!isOpen && { "aria-label": label },
       ...others,
       children: [
-        icon,
+        !isOpen && icon,
         isOpen && label
       ]
     }

package/dist/cjs/VerticalNavigation/Actions/Action.styles.cjs

@@ -11,19 +11,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       height: "32px",
       color: "inherit",
       fontWeight: "inherit",
-      padding: 0,
+      padding: uikitStyles.theme.spacing(0, "xs"),
       border: "none",
       // cursor
       "& *": {
         cursor: "pointer"
       }
     },
-    noIcon: {
-      paddingLeft: uikitStyles.theme.space.xs
-    },
+    noIcon: {},
     minimized: {
       justifyContent: "center",
-      paddingRight: 0
+      padding: 0
     }
   }
 );

package/dist/cjs/icons.cjs

@@ -63,7 +63,8 @@ const defaultIconPathMap = {
   Menu: "M1 2v1.6l6 6.1V14h2V9.7l6-6.1V2zM0 1h16v3l-6 6v5H6v-4.9L0 4z",
   OtherStep: "M12 8a4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4 4 4 0 0 1 4 4",
   Time: "M8 15a7.02 7.02 0 1 0-4.94-2.06A7 7 0 0 0 8 15m0 1a8 8 0 1 1 8-8 8 8 0 0 1-8 8m2.65-4.65L7.5 8.21V3h1v4.8l2.85 2.85z",
-  User: "M9.6 8.7A4.5 4.5 0 0 0 8.04 0H8a4.5 4.5 0 0 0-4.5 4.46v.04a4.6 4.6 0 0 0 2.9 4.2A7.7 7.7 0 0 0 .5 16h1a6.5 6.5 0 0 1 6.47-6.5H8a6.5 6.5 0 0 1 6.5 6.47V16h1a7.5 7.5 0 0 0-5.9-7.3M4.5 4.5A3.54 3.54 0 0 1 8 1a3.54 3.54 0 0 1 3.5 3.5A3.54 3.54 0 0 1 8 8a3.54 3.54 0 0 1-3.5-3.5"
+  User: "M9.6 8.7A4.5 4.5 0 0 0 8.04 0H8a4.5 4.5 0 0 0-4.5 4.46v.04a4.6 4.6 0 0 0 2.9 4.2A7.7 7.7 0 0 0 .5 16h1a6.5 6.5 0 0 1 6.47-6.5H8a6.5 6.5 0 0 1 6.5 6.47V16h1a7.5 7.5 0 0 0-5.9-7.3M4.5 4.5A3.54 3.54 0 0 1 8 1a3.54 3.54 0 0 1 3.5 3.5A3.54 3.54 0 0 1 8 8a3.54 3.54 0 0 1-3.5-3.5",
+  Remove: "M0 7.5h16v1H0z"
 };
 function HvIconInternal(props, ref) {
   const { name, title, "aria-label": ariaLabel, children, ...others } = props;

package/dist/cjs/index.cjs

@@ -190,6 +190,7 @@ const Login_styles = require("./Login/Login.styles.cjs");
 const Login = require("./Login/Login.cjs");
 const MultiButton_styles = require("./MultiButton/MultiButton.styles.cjs");
 const MultiButton = require("./MultiButton/MultiButton.cjs");
+const NumberInput = require("./NumberInput/NumberInput.cjs");
 const OverflowTooltip_styles = require("./OverflowTooltip/OverflowTooltip.styles.cjs");
 const OverflowTooltip = require("./OverflowTooltip/OverflowTooltip.cjs");
 const Pagination_styles = require("./Pagination/Pagination.styles.cjs");
@@ -211,6 +212,7 @@ const ScrollToHorizontal = require("./ScrollToHorizontal/ScrollToHorizontal.cjs"
 const VerticalScrollListItem_styles = require("./ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.cjs");
 const ScrollToVertical_styles = require("./ScrollToVertical/ScrollToVertical.styles.cjs");
 const ScrollToVertical = require("./ScrollToVertical/ScrollToVertical.cjs");
+const SearchInput = require("./SearchInput/SearchInput.cjs");
 const Section_styles = require("./Section/Section.styles.cjs");
 const Section = require("./Section/Section.cjs");
 const SimpleGrid_styles = require("./SimpleGrid/SimpleGrid.styles.cjs");
@@ -540,6 +542,7 @@ exports.loginClasses = Login_styles.staticClasses;
 exports.HvLogin = Login.HvLogin;
 exports.multiButtonClasses = MultiButton_styles.staticClasses;
 exports.HvMultiButton = MultiButton.HvMultiButton;
+exports.HvNumberInput = NumberInput.HvNumberInput;
 exports.overflowTooltipClasses = OverflowTooltip_styles.staticClasses;
 exports.HvOverflowTooltip = OverflowTooltip.HvOverflowTooltip;
 exports.paginationClasses = Pagination_styles.staticClasses;
@@ -564,6 +567,7 @@ exports.HvScrollToHorizontal = ScrollToHorizontal.HvScrollToHorizontal;
 exports.verticalScrollListItemClasses = VerticalScrollListItem_styles.staticClasses;
 exports.scrollToVerticalClasses = ScrollToVertical_styles.staticClasses;
 exports.HvScrollToVertical = ScrollToVertical.HvScrollToVertical;
+exports.HvSearchInput = SearchInput.HvSearchInput;
 exports.sectionClasses = Section_styles.staticClasses;
 exports.HvSection = Section.HvSection;
 exports.simpleGridClasses = SimpleGrid_styles.staticClasses;

package/dist/esm/Badge/Badge.styles.js

@@ -1,7 +1,19 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvBadge", {
-  root: { position: "relative", "&>*": { float: "left" } },
+  root: {
+    position: "relative",
+    "&>*": { float: "left" },
+    ":has($badgeIcon)": {
+      width: "fit-content",
+      height: "fit-content",
+      "&>div:first-child": {
+        minWidth: 32,
+        minHeight: 32,
+        "--icsize": "100%"
+      }
+    }
+  },
   /** class applied to the badge container when it has content */
   badgeContainer: {},
   /** class applied to the badge */

package/dist/esm/Banner/BannerContent/BannerContent.styles.js

@@ -6,7 +6,7 @@ const { useClasses, staticClasses } = createClasses("HvBannerContent", {
     width: "100%",
     position: "relative",
     gap: theme.space.xs,
-    borderRadius: theme.radii.none
+    borderRadius: 0
   },
   success: {},
   warning: {},

package/dist/esm/BaseDropdown/BaseDropdown.js

@@ -188,6 +188,7 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
         classes,
         containerId,
         onClickAway: handleOutside,
+        disablePortal,
         onContainerKeyDown: handleContainerKeyDown,
         children
       }

package/dist/esm/BaseInput/validations.js

@@ -1,4 +1,3 @@
-import { validationStates } from "../FormElement/utils.js";
 const isNumeric = (num) => (
   // to prevent Number( <spaces> ) = 0
   num.trim().length > 0 && !Number.isNaN(Number(num))
@@ -7,27 +6,22 @@ const isEmail = (email) => {
   const regexp = /^[^\\s]+[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?[.])+[a-z0-9](?:[a-z0-9-]*[a-z0-9])$/i;
   return regexp.test(email);
 };
-const validationTypes = Object.freeze({
-  none: "none",
-  number: "number",
-  email: "email"
-});
 const computeValidationType = (type) => {
   switch (type) {
     case "number":
-      return validationTypes.number;
+      return "number";
     case "email":
-      return validationTypes.email;
+      return "email";
     default:
-      return validationTypes.none;
+      return "none";
   }
 };
-const hasBuiltInValidations = (required, validationType, minCharQuantity, maxCharQuantity, validation, inputProps) => required || validationType !== validationTypes.none || minCharQuantity != null || maxCharQuantity != null || validation != null || inputProps?.required != null || inputProps?.minLength != null || inputProps?.maxLength != null || inputProps?.min != null || inputProps?.max != null || inputProps?.type != null && inputProps?.type !== "text" && inputProps?.type !== "password" || inputProps?.pattern != null;
+const hasBuiltInValidations = (required, validationType, minCharQuantity, maxCharQuantity, validation, inputProps) => required || validationType !== "none" || minCharQuantity != null || maxCharQuantity != null || validation != null || inputProps?.required != null || inputProps?.minLength != null || inputProps?.maxLength != null || inputProps?.min != null || inputProps?.max != null || inputProps?.type != null && inputProps?.type !== "text" && inputProps?.type !== "password" || inputProps?.pattern != null;
 const computeValidationState = (inputValidity, isEmptyValue) => {
   if (inputValidity.valid && isEmptyValue) {
-    return validationStates.standBy;
+    return "standBy";
   }
-  return inputValidity.valid ? validationStates.valid : validationStates.invalid;
+  return inputValidity.valid ? "valid" : "invalid";
 };
 const computeValidationMessage = (inputValidity, errorMessages) => {
   if (inputValidity.valid) {
@@ -77,13 +71,13 @@ const validateInput = (input, required, minCharQuantity, maxCharQuantity, valida
       inputValidity.valid = false;
     }
     switch (validationType) {
-      case validationTypes.number:
+      case "number":
         if (!isNumeric(value)) {
           inputValidity.typeMismatch = true;
           inputValidity.valid = false;
         }
         break;
-      case validationTypes.email:
+      case "email":
         if (!isEmail(value)) {
           inputValidity.typeMismatch = true;
           inputValidity.valid = false;
@@ -110,6 +104,5 @@ export {
   computeValidationState,
   computeValidationType,
   hasBuiltInValidations,
-  validateInput,
-  validationTypes
+  validateInput
 };

package/dist/esm/BaseSwitch/BaseSwitch.styles.js

@@ -89,7 +89,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseSwitch", {
   },
   readOnly: {},
   focusVisible: {
-    borderRadius: "8px",
+    borderRadius: theme.radii.round,
     ...outlineStyles
   }
 });

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/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/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/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,6 +1,7 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
 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";
@@ -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,
             {

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: {

package/dist/esm/DatePicker/DatePicker.js

@@ -3,6 +3,7 @@ import { forwardRef, useRef, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
 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";
@@ -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,
             {

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/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
     }
   }
 });