@hitachivantara/uikit-react-core 5.91.3 → 5.93.0

package/dist/esm/Section/Section.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useExpandable } from "../hooks/useExpandable.js";
+import { HvIcon } from "../icons.js";
 import { useClasses } from "./Section.styles.js";
 import { staticClasses } from "./Section.styles.js";
 import { HvButton } from "../Button/Button.js";
@@ -53,7 +53,7 @@ const HvSection = forwardRef(
                 "aria-label": isOpen ? "Collapse" : "Expand",
                 ...buttonProps,
                 ...expandButtonProps,
-                children: /* @__PURE__ */ jsx(DropDownXS, { rotate: isOpen })
+                children: /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", rotate: isOpen })
               }
             ),
             title,

package/dist/esm/Select/Select.js

@@ -5,6 +5,7 @@ import { useSelect, SelectProvider } from "@mui/base/useSelect";
 import { useForkRef, useControlled } from "@mui/material/utils";
 import { clsx } from "clsx";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { fixedForwardRef } from "../types/generic.js";
 import { getContainerElement } from "../utils/document.js";
@@ -13,8 +14,6 @@ import { HvOption } from "./Option.js";
 import { useClasses } from "./Select.styles.js";
 import { staticClasses } from "./Select.styles.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
-import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 import { HvDropdownButton } from "../DropdownButton/DropdownButton.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
@@ -136,19 +135,21 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
       }),
       ...others,
       children: [
-        (label || description) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-          label && /* @__PURE__ */ jsx(
-            HvLabel,
-            {
-              showGutter: true,
-              id: labelId,
-              htmlFor: id,
-              label,
-              className: classes.label
+        /* @__PURE__ */ jsx(
+          HvLabelContainer,
+          {
+            label,
+            description,
+            inputId: id,
+            labelId,
+            descriptionId,
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.description
             }
-          ),
-          description && /* @__PURE__ */ jsx(HvInfoMessage, { id: descriptionId, className: classes.description, children: description })
-        ] }),
+          }
+        ),
         /* @__PURE__ */ jsx(
           HvDropdownButton,
           {

package/dist/esm/Select/Select.styles.js

@@ -12,10 +12,7 @@ const { staticClasses, useClasses } = createClasses("HvSelect", {
   invalid: {
     borderColor: theme.form.errorColor
   },
-  labelContainer: {
-    display: "flex",
-    alignItems: "flex-start"
-  },
+  labelContainer: {},
   label: {},
   description: {},
   select: {},

package/dist/esm/SelectionList/SelectionList.js

@@ -9,9 +9,9 @@ import { multiSelectionEventHandler } from "../utils/multiSelectionEventHandler.
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./SelectionList.styles.js";
 import { staticClasses } from "./SelectionList.styles.js";
-import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
+import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const getValueFromSelectedChildren = (children, multiple) => {

package/dist/esm/Slider/Slider.js

@@ -3,6 +3,7 @@ import { forwardRef, useRef, useMemo, useState, useCallback, useEffect } from "r
 import Slider from "rc-slider";
 import Tooltip from "rc-tooltip";
 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 { getElementById } from "../utils/document.js";
@@ -11,9 +12,7 @@ import { useClasses, sliderStyles } from "./Slider.styles.js";
 import { staticClasses } from "./Slider.styles.js";
 import { HvSliderInput } from "./SliderInput/SliderInput.js";
 import { calculateStepValue, createMark, isSingleSlider, knobsValuesToKnobsPositions, convertStatusToArray, generateDefaultKnobProperties, createTrackStyles, createKnobStyles, knobsPositionToScaledValue, knobsPositionsToKnobsValues, statusArrayToFormStatus, ensureValuesConsistency, scaledValueToKnobsPositionValue } from "./utils.js";
-import { validationStates } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const HvSlider = forwardRef(function HvSlider2(props, ref) {
   const {
@@ -92,14 +91,9 @@ const HvSlider = forwardRef(function HvSlider2(props, ref) {
     () => isSingleSlider(valuesProp, defaultValues),
     [defaultValues, valuesProp]
   );
-  const value = useMemo(
-    () => valuesProp?.length > 0 ? knobsValuesToKnobsPositions(
-      valuesProp,
-      inverseStepValue,
-      minPointValue
-    ) : void 0,
-    [inverseStepValue, minPointValue, valuesProp]
-  );
+  const value = useMemo(() => {
+    return valuesProp?.length > 0 ? knobsValuesToKnobsPositions(valuesProp, inverseStepValue, minPointValue) : void 0;
+  }, [inverseStepValue, minPointValue, valuesProp]);
   const defaultKnobsPositions = useMemo(
     () => knobsValuesToKnobsPositions(
       defaultValues,
@@ -175,13 +169,13 @@ const HvSlider = forwardRef(function HvSlider2(props, ref) {
       if (required && (knobValue == null || Number.isNaN(knobValue))) {
         invalid = true;
         requiredMsg = true;
-        return validationStates.invalid;
+        return "invalid";
       }
       if (knobValue < minPointValue || knobValue > maxPointValue) {
         invalid = true;
-        return validationStates.invalid;
+        return "invalid";
       }
-      return validationStates.valid;
+      return "valid";
     });
     setValidationState([...newValidationState]);
     if (invalid) {
@@ -364,38 +358,34 @@ const HvSlider = forwardRef(function HvSlider2(props, ref) {
       onBlur: onBlurHandler,
       ...others,
       children: [
-        (hasLabel || !hideInput) && /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx(
+          HvLabelContainer,
           {
-            className: cx(classes.labelContainer, {
-              [classes.labelIncluded]: hasLabel,
-              [classes.onlyInput]: !hasLabel
-            }),
-            children: [
-              hasLabel && /* @__PURE__ */ jsx(
-                HvLabel,
-                {
-                  id: setId(elementId, "label"),
-                  className: classes.label,
-                  htmlFor: sliderInputId,
-                  label
-                }
-              ),
-              !hideInput && /* @__PURE__ */ jsx(
-                HvSliderInput,
-                {
-                  id: sliderInputId,
-                  label,
-                  values: knobsValues,
-                  onChange: onInputChangeHandler,
-                  status: validationStatus,
-                  disabled,
-                  readOnly,
-                  markDigits,
-                  inputProps
-                }
-              )
-            ]
+            label,
+            inputId: sliderInputId,
+            labelId: setId(elementId, "label"),
+            descriptionId: setId(elementId, "description"),
+            classes: {
+              root: cx(classes.labelContainer, {
+                [classes.labelIncluded]: hasLabel,
+                [classes.onlyInput]: !hasLabel
+              }),
+              label: classes.label
+            },
+            children: !hideInput && /* @__PURE__ */ jsx(
+              HvSliderInput,
+              {
+                id: sliderInputId,
+                label,
+                values: knobsValues,
+                onChange: onInputChangeHandler,
+                status: validationStatus,
+                disabled,
+                readOnly,
+                markDigits,
+                inputProps
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx("div", { className: cx(classes.sliderBase, classes.sliderContainer), children: /* @__PURE__ */ jsx(

package/dist/esm/Slider/SliderInput/SliderInput.js

@@ -39,7 +39,6 @@ const HvSliderInput = ({
         "aria-label": `${label}-${index}`,
         className: classes.input,
         disabled,
-        type: "number",
         value: Number.isNaN(value) || value == null ? "" : value.toString(),
         onEnter: () => handleChange(index),
         onBlur: () => handleChange(index),

package/dist/esm/Slider/utils.js

@@ -1,6 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { sliderStyles } from "./Slider.styles.js";
-import { validationStates } from "../FormElement/utils.js";
 const knobsPositionToScaledValue = (sliderValue, minPointValue, stepValue) => minPointValue + stepValue * sliderValue;
 const scaledValueToKnobsPositionValue = (scaledValue, minPointValue, inverseStepValue) => typeof scaledValue === "number" ? Math.floor((scaledValue - minPointValue) * inverseStepValue) : NaN;
 const knobsValuesToKnobsPositions = (values, inverseStepValue, minPointValue) => {
@@ -204,7 +203,7 @@ const ensureValuesConsistency = (knobPositions, inputIndex) => {
 };
 const convertStatusToArray = (length, status) => {
   const result = {
-    arrayDefaultStatus: Array.from({ length }, () => validationStates.standBy)
+    arrayDefaultStatus: Array.from({ length }, () => "standBy")
   };
   if (status == null) {
     return result;
@@ -217,13 +216,11 @@ const convertStatusToArray = (length, status) => {
   return result;
 };
 const statusArrayToFormStatus = (arrayStatus) => {
-  const invalid = arrayStatus.some(
-    (status) => status === validationStates.invalid
-  );
-  if (invalid) return validationStates.invalid;
-  const valid = arrayStatus.some((status) => status === validationStates.valid);
-  if (valid) return validationStates.valid;
-  return validationStates.standBy;
+  const invalid = arrayStatus.some((status) => status === "invalid");
+  if (invalid) return "invalid";
+  const valid = arrayStatus.some((status) => status === "valid");
+  if (valid) return "valid";
+  return "standBy";
 };
 const knobsValuesToString = (knobsValues, markDigits) => knobsValues.map(
   (knobValue) => Number.isNaN(knobValue) ? "" : knobValue.toFixed(markDigits)

package/dist/esm/SnackbarProvider/SnackbarProvider.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, forwardRef, useMemo } from "react";
 import { useSnackbar, SnackbarProvider, SnackbarContent } from "notistack";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./SnackbarProvider.styles.js";
 import { staticClasses } from "./SnackbarProvider.styles.js";
 import { HvSnackbarContent } from "../Snackbar/SnackbarContent/SnackbarContent.js";
@@ -56,20 +57,21 @@ const useHvSnackbar = () => {
     [enqueueSnackbar, closeSnackbar]
   );
 };
-const HvSnackbarProvider = ({
-  children,
-  notistackClassesOverride,
-  maxSnack = 5,
-  autoHideDuration = 5e3,
-  anchorOrigin = {
-    vertical: "top",
-    horizontal: "right"
-  },
-  classes: classesProp,
-  className,
-  container,
-  ...others
-}) => {
+const HvSnackbarProvider = (props) => {
+  const {
+    children,
+    notistackClassesOverride,
+    maxSnack = 5,
+    autoHideDuration = 5e3,
+    anchorOrigin = {
+      vertical: "top",
+      horizontal: "right"
+    },
+    classes: classesProp,
+    className,
+    container,
+    ...others
+  } = useDefaultProps("HvSnackbarProvider", props);
   const { classes, css, cx } = useClasses(classesProp);
   const { containerRoot, ...otherNotistackClasses } = notistackClassesOverride || {};
   const notistackClasses = {

package/dist/esm/SnackbarProvider/SnackbarProvider.styles.js

@@ -14,7 +14,7 @@ const { useClasses, staticClasses } = createClasses(
         fontFamily: "inherit",
         fontWeight: "inherit",
         lineHeight: "inherit",
-        borderRadius: "0",
+        borderRadius: 0,
         letterSpacing: "inherit",
         backgroundColor: "inherit"
       }

package/dist/esm/Switch/Switch.js

@@ -8,9 +8,9 @@ import { setId } from "../utils/setId.js";
 import { useClasses } from "./Switch.styles.js";
 import { staticClasses } from "./Switch.styles.js";
 import { HvBaseSwitch } from "../BaseSwitch/BaseSwitch.js";
-import { isInvalid } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
+import { isInvalid } from "../FormElement/utils.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
 const HvSwitch = forwardRef(

package/dist/esm/Table/TableHeader/TableHeader.js

@@ -1,12 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useContext, useMemo } from "react";
+import { forwardRef, useContext } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvIcon } from "../../icons.js";
 import { capitalize } from "../../utils/helpers.js";
 import TableContext from "../TableContext.js";
 import { TableSectionContext } from "../TableSectionContext.js";
 import { useClasses } from "./TableHeader.styles.js";
 import { staticClasses } from "./TableHeader.styles.js";
-import { getSortIcon, isParagraph } from "./utils.js";
+import { getSortIconName, isParagraph } from "./utils.js";
 import { HvButton } from "../../Button/Button.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const defaultComponent = "th";
@@ -43,10 +44,6 @@ const HvTableHeader = forwardRef(
     const type = typeProp || tableSectionContext?.type || "body";
     const isHeadCell = type === "head";
     const scope = scopeProp ?? (isHeadCell ? "col" : "row");
-    const Sort = useMemo(
-      () => getSortIcon(sorted && sortDirection),
-      [sorted, sortDirection]
-    );
     const Component = component || tableContext?.components?.Th || defaultComponent;
     const role = Component === defaultComponent ? null : isHeadCell ? "columnheader" : "rowheader";
     const paragraph = isParagraph(children);
@@ -95,7 +92,13 @@ const HvTableHeader = forwardRef(
                     icon: true,
                     "aria-label": "Sort",
                     ...sortButtonProps,
-                    children: /* @__PURE__ */ jsx(Sort, { className: classes.sortIcon })
+                    children: /* @__PURE__ */ jsx(
+                      HvIcon,
+                      {
+                        name: getSortIconName(sorted && sortDirection),
+                        className: classes.sortIcon
+                      }
+                    )
                   }
                 ),
                 /* @__PURE__ */ jsx(

package/dist/esm/Table/TableHeader/utils.js

@@ -1,18 +1,17 @@
-import { SortXS, SortDescendingXS, SortAscendingXS } from "@hitachivantara/uikit-react-icons";
-const getSortIcon = (dir) => {
+const getSortIconName = (dir) => {
   switch (dir) {
     case "ascending":
-      return SortAscendingXS;
+      return "SortAsc";
     case "descending":
-      return SortDescendingXS;
+      return "SortDesc";
     default:
-      return SortXS;
+      return "Sort";
   }
 };
 const isParagraph = (children) => {
   return typeof children === "string" && /\s/.test(children);
 };
 export {
-  getSortIcon,
+  getSortIconName,
   isParagraph
 };

package/dist/esm/Table/hooks/useHvRowExpand.js

@@ -1,6 +1,6 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { DropDownXS } from "@hitachivantara/uikit-react-icons";
 import { useLabels } from "../../hooks/useLabels.js";
+import { HvIcon } from "../../icons.js";
 import { HvButton } from "../../Button/Button.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const DEFAULT_LABELS = {
@@ -22,7 +22,7 @@ const CellWithExpandButton = ({
         "aria-label": row.isExpanded ? labels.collapseRowButtonAriaLabel : labels.expandRowButtonAriaLabel,
         "aria-expanded": row.isExpanded,
         onClick: rowProps?.onClick,
-        children: /* @__PURE__ */ jsx(DropDownXS, { rotate: row.isExpanded })
+        children: /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", rotate: row.isExpanded })
       }
     ),
     cell?.value && /* @__PURE__ */ jsx(HvTypography, { variant: "label", component: "span", children: cell.value })

package/dist/esm/Table/renderers/renderers.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { ClassNames } from "@emotion/react";
-import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
+import { HvIcon } from "../../icons.js";
 import { setId } from "../../utils/setId.js";
 import { HvDateColumnCell } from "./DateColumnCell.js";
 import { HvDropdownColumnCell } from "./DropdownColumnCell.js";
@@ -50,7 +50,7 @@ function hvDateColumn(col, dateFormat) {
     ...col
   };
 }
-function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabel, getCanRowExpand, ExpandedIcon = /* @__PURE__ */ jsx(DropUpXS, {}), CollapsedIcon = /* @__PURE__ */ jsx(DropDownXS, {})) {
+function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabel, getCanRowExpand, ExpandedIcon = /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs", rotate: true }), CollapsedIcon = /* @__PURE__ */ jsx(HvIcon, { name: "CaretDown", size: "xs" })) {
   return {
     Cell: (cellProps) => {
       const { value, row } = cellProps;

package/dist/esm/Tag/Tag.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, isValidElement, cloneElement } from "react";
-import { CloseXS } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { theme, getColor } from "@hitachivantara/uikit-styles";
 import { HvCheckBoxIcon } from "../BaseCheckBox/CheckBoxIcon.js";
 import { useControlled } from "../hooks/useControlled.js";
+import { HvIcon } from "../icons.js";
 import { isDeleteKey } from "../utils/keyboardUtils.js";
 import { useClasses } from "./Tag.styles.js";
 import { staticClasses } from "./Tag.styles.js";
@@ -56,15 +56,16 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
       [classes.disabledDeleteIcon]: disabled
     }),
     onClick: handleDeleteClick
-  }) : /* @__PURE__ */ jsx(
-    CloseXS,
+  }) : /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+    HvIcon,
     {
-      size: "XS",
+      compact: true,
+      name: "Close",
       onClick: handleDeleteClick,
       className: cx(classes.deleteIcon, classes.button, classes.tagButton),
       ...deleteButtonProps
     }
-  );
+  ) });
   return /* @__PURE__ */ jsxs(
     HvButtonBase,
     {

package/dist/esm/Tag/Tag.styles.js

@@ -14,6 +14,11 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
     transition: "background-color 0.3s ease",
     "&,:hover,:focus-visible": {
       backgroundColor: "var(--tagColor)"
+    },
+    "& div:has($deleteIcon)": {
+      // ensure icon container doesn't grow into $label
+      width: "max-content",
+      lineHeight: 0
     }
   },
   hasIcon: {
@@ -63,9 +68,9 @@ const { staticClasses, useClasses } = createClasses("HvTag", {
     color: "inherit"
   },
   deleteIcon: {
-    width: 16,
-    height: 16,
-    "&:hover": {
+    margin: 0,
+    padding: 2,
+    ":hover": {
       backgroundColor: theme.colors.bgHover
     }
   },

package/dist/esm/TagsInput/TagsInput.js

@@ -3,6 +3,7 @@ import { forwardRef, useState, useRef, useMemo, useCallback, useEffect } from "r
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { DEFAULT_ERROR_MESSAGES } from "../BaseInput/validations.js";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
 import { HvSuggestions } from "../FormElement/Suggestions/Suggestions.js";
 import { useControlled } from "../hooks/useControlled.js";
 import { useFocus } from "../hooks/useFocus.js";
@@ -13,10 +14,7 @@ import { setId } from "../utils/setId.js";
 import { useClasses } from "./TagsInput.styles.js";
 import { staticClasses } from "./TagsInput.styles.js";
 import { HvCharCounter } from "../FormElement/CharCounter/CharCounter.js";
-import { validationStates } 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 { HvTag } from "../Tag/Tag.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const HvTagsInput = forwardRef(
@@ -31,7 +29,7 @@ const HvTagsInput = forwardRef(
       readOnly,
       disabled,
       required,
-      label: textAreaLabel,
+      label,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       description,
@@ -62,8 +60,6 @@ const HvTagsInput = forwardRef(
     } = useDefaultProps("HvTagsInput", props);
     const { classes, cx } = useClasses(classesProp);
     const elementId = useUniqueId(id);
-    const hasLabel = textAreaLabel != null;
-    const hasDescription = description != null;
     const [value, setValue] = useControlled(valueProp, defaultValue);
     const [validationState, setValidationState] = useControlled(
       status,
@@ -94,11 +90,11 @@ const HvTagsInput = forwardRef(
     const performValidation = useCallback(
       (currValue) => {
         if (maxTagsQuantity !== null && maxTagsQuantity !== void 0 && currValue.length > maxTagsQuantity) {
-          setValidationState(validationStates.invalid);
+          setValidationState("invalid");
           setValidationMessage(errorMessages.maxCharError);
           setStateValid(false);
         } else {
-          setValidationState(validationStates.valid);
+          setValidationState("valid");
           setValidationMessage("");
           setStateValid(true);
         }
@@ -264,7 +260,7 @@ const HvTagsInput = forwardRef(
     const onDeleteTagHandler = useCallback(
       (event, i) => {
         deleteTag(i, event, true);
-        setValidationState(validationStates.standBy);
+        setValidationState("standBy");
       },
       [deleteTag, setValidationState]
     );
@@ -304,35 +300,30 @@ const HvTagsInput = forwardRef(
           className
         ),
         children: [
-          (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
-            hasLabel && /* @__PURE__ */ jsx(
-              HvLabel,
-              {
-                showGutter: true,
-                className: classes.label,
-                id: setId(id, "label"),
-                htmlFor: setId(elementId, "input"),
-                label: textAreaLabel
-              }
-            ),
-            hasDescription && /* @__PURE__ */ jsx(
-              HvInfoMessage,
-              {
-                className: classes.description,
-                id: setId(elementId, "description"),
-                children: description
-              }
-            )
-          ] }),
-          hasCounter && /* @__PURE__ */ jsx(
-            HvCharCounter,
+          /* @__PURE__ */ jsx(
+            HvLabelContainer,
             {
-              id: setId(elementId, "charCounter"),
-              className: classes.characterCounter,
-              separator: middleCountLabel,
-              currentCharQuantity: value.length,
-              maxCharQuantity: maxTagsQuantity,
-              ...countCharProps
+              label,
+              description,
+              inputId: setId(elementId, "input"),
+              labelId: setId(elementId, "label"),
+              descriptionId: setId(elementId, "description"),
+              classes: {
+                root: classes.labelContainer,
+                label: classes.label,
+                description: classes.description
+              },
+              children: hasCounter && /* @__PURE__ */ jsx(
+                HvCharCounter,
+                {
+                  id: setId(elementId, "charCounter"),
+                  className: classes.characterCounter,
+                  separator: middleCountLabel,
+                  currentCharQuantity: value.length,
+                  maxCharQuantity: maxTagsQuantity,
+                  ...countCharProps
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsxs(
@@ -350,12 +341,12 @@ const HvTagsInput = forwardRef(
               children: [
                 value?.map((t, i) => {
                   const tag = typeof t === "string" ? { label: t, type: "semantic" } : t;
-                  const { label, type, ...otherProps } = tag;
+                  const { label: label2, type, ...otherProps } = tag;
                   return /* @__PURE__ */ jsx(
                     HvTag,
                     {
                       type,
-                      label,
+                      label: label2,
                       disabled,
                       tabIndex: -1,
                       className: cx(classes.chipRoot, classes.listItemRoot),
@@ -364,7 +355,7 @@ const HvTagsInput = forwardRef(
                       },
                       ...otherProps
                     },
-                    `${label}-${i}`
+                    `${label2}-${i}`
                   );
                 }),
                 !disabled && !readOnly && /* @__PURE__ */ jsx(

package/dist/esm/TagsInput/TagsInput.styles.js

@@ -29,9 +29,9 @@ const { staticClasses, useClasses } = createClasses("HvTagsInput", {
   },
   resizable: { width: "auto", resize: "both", clear: "both", overflow: "auto" },
   invalid: {},
-  labelContainer: { float: "left", display: "flex", alignItems: "flex-start" },
+  labelContainer: {},
   label: {},
-  description: { display: "block", float: "left" },
+  description: {},
   characterCounter: {
     display: "block",
     float: "right",
@@ -42,7 +42,7 @@ const { staticClasses, useClasses } = createClasses("HvTagsInput", {
     display: "flex",
     alignItems: "center",
     alignContent: "flex-start",
-    gap: theme.spacing("xxs", "xs"),
+    gap: theme.space.xxs,
     cursor: "text",
     width: "100%",
     minHeight: 32,