@hitachivantara/uikit-react-core 5.92.0 → 5.93.0

package/dist/cjs/Select/Select.cjs

@@ -7,6 +7,7 @@ const useSelect = require("@mui/base/useSelect");
 const utils = require("@mui/material/utils");
 const clsx = require("clsx");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const generic = require("../types/generic.cjs");
 const document = require("../utils/document.cjs");
@@ -14,8 +15,6 @@ const setId = require("../utils/setId.cjs");
 const Option = require("./Option.cjs");
 const Select_styles = require("./Select.styles.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
-const Label = require("../FormElement/Label/Label.cjs");
-const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const DropdownButton = require("../DropdownButton/DropdownButton.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
@@ -137,19 +136,21 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
       }),
       ...others,
       children: [
-        (label || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
-          label && /* @__PURE__ */ jsxRuntime.jsx(
-            Label.HvLabel,
-            {
-              showGutter: true,
-              id: labelId,
-              htmlFor: id,
-              label,
-              className: classes.label
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LabelContainer.HvLabelContainer,
+          {
+            label,
+            description,
+            inputId: id,
+            labelId,
+            descriptionId,
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.description
             }
-          ),
-          description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: descriptionId, className: classes.description, children: description })
-        ] }),
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           DropdownButton.HvDropdownButton,
           {

package/dist/cjs/Select/Select.styles.cjs

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

package/dist/cjs/SelectionList/SelectionList.cjs

@@ -10,9 +10,9 @@ const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const multiSelectionEventHandler = require("../utils/multiSelectionEventHandler.cjs");
 const setId = require("../utils/setId.cjs");
 const SelectionList_styles = require("./SelectionList.styles.cjs");
-const FormElement = require("../FormElement/FormElement.cjs");
 const Label = require("../FormElement/Label/Label.cjs");
 const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
+const FormElement = require("../FormElement/FormElement.cjs");
 const ListContainer = require("../ListContainer/ListContainer.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const getValueFromSelectedChildren = (children, multiple) => {

package/dist/cjs/Slider/Slider.cjs

@@ -5,6 +5,7 @@ const React = require("react");
 const Slider = require("rc-slider");
 const Tooltip = require("rc-tooltip");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const document = require("../utils/document.cjs");
@@ -12,9 +13,7 @@ const setId = require("../utils/setId.cjs");
 const Slider_styles = require("./Slider.styles.cjs");
 const SliderInput = require("./SliderInput/SliderInput.cjs");
 const utils = require("./utils.cjs");
-const utils$1 = require("../FormElement/utils.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
-const Label = require("../FormElement/Label/Label.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const Slider__default = /* @__PURE__ */ _interopDefault(Slider);
@@ -96,14 +95,9 @@ const HvSlider = React.forwardRef(function HvSlider2(props, ref) {
     () => utils.isSingleSlider(valuesProp, defaultValues),
     [defaultValues, valuesProp]
   );
-  const value = React.useMemo(
-    () => valuesProp?.length > 0 ? utils.knobsValuesToKnobsPositions(
-      valuesProp,
-      inverseStepValue,
-      minPointValue
-    ) : void 0,
-    [inverseStepValue, minPointValue, valuesProp]
-  );
+  const value = React.useMemo(() => {
+    return valuesProp?.length > 0 ? utils.knobsValuesToKnobsPositions(valuesProp, inverseStepValue, minPointValue) : void 0;
+  }, [inverseStepValue, minPointValue, valuesProp]);
   const defaultKnobsPositions = React.useMemo(
     () => utils.knobsValuesToKnobsPositions(
       defaultValues,
@@ -179,13 +173,13 @@ const HvSlider = React.forwardRef(function HvSlider2(props, ref) {
       if (required && (knobValue == null || Number.isNaN(knobValue))) {
         invalid = true;
         requiredMsg = true;
-        return utils$1.validationStates.invalid;
+        return "invalid";
       }
       if (knobValue < minPointValue || knobValue > maxPointValue) {
         invalid = true;
-        return utils$1.validationStates.invalid;
+        return "invalid";
       }
-      return utils$1.validationStates.valid;
+      return "valid";
     });
     setValidationState([...newValidationState]);
     if (invalid) {
@@ -368,38 +362,34 @@ const HvSlider = React.forwardRef(function HvSlider2(props, ref) {
       onBlur: onBlurHandler,
       ...others,
       children: [
-        (hasLabel || !hideInput) && /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LabelContainer.HvLabelContainer,
           {
-            className: cx(classes.labelContainer, {
-              [classes.labelIncluded]: hasLabel,
-              [classes.onlyInput]: !hasLabel
-            }),
-            children: [
-              hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
-                Label.HvLabel,
-                {
-                  id: setId.setId(elementId, "label"),
-                  className: classes.label,
-                  htmlFor: sliderInputId,
-                  label
-                }
-              ),
-              !hideInput && /* @__PURE__ */ jsxRuntime.jsx(
-                SliderInput.HvSliderInput,
-                {
-                  id: sliderInputId,
-                  label,
-                  values: knobsValues,
-                  onChange: onInputChangeHandler,
-                  status: validationStatus,
-                  disabled,
-                  readOnly,
-                  markDigits,
-                  inputProps
-                }
-              )
-            ]
+            label,
+            inputId: sliderInputId,
+            labelId: setId.setId(elementId, "label"),
+            descriptionId: setId.setId(elementId, "description"),
+            classes: {
+              root: cx(classes.labelContainer, {
+                [classes.labelIncluded]: hasLabel,
+                [classes.onlyInput]: !hasLabel
+              }),
+              label: classes.label
+            },
+            children: !hideInput && /* @__PURE__ */ jsxRuntime.jsx(
+              SliderInput.HvSliderInput,
+              {
+                id: sliderInputId,
+                label,
+                values: knobsValues,
+                onChange: onInputChangeHandler,
+                status: validationStatus,
+                disabled,
+                readOnly,
+                markDigits,
+                inputProps
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx(classes.sliderBase, classes.sliderContainer), children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/Slider/SliderInput/SliderInput.cjs

@@ -40,7 +40,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/cjs/Slider/utils.cjs

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const Slider_styles = require("./Slider.styles.cjs");
-const utils = require("../FormElement/utils.cjs");
 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) => {
@@ -206,7 +205,7 @@ const ensureValuesConsistency = (knobPositions, inputIndex) => {
 };
 const convertStatusToArray = (length, status) => {
   const result = {
-    arrayDefaultStatus: Array.from({ length }, () => utils.validationStates.standBy)
+    arrayDefaultStatus: Array.from({ length }, () => "standBy")
   };
   if (status == null) {
     return result;
@@ -219,13 +218,11 @@ const convertStatusToArray = (length, status) => {
   return result;
 };
 const statusArrayToFormStatus = (arrayStatus) => {
-  const invalid = arrayStatus.some(
-    (status) => status === utils.validationStates.invalid
-  );
-  if (invalid) return utils.validationStates.invalid;
-  const valid = arrayStatus.some((status) => status === utils.validationStates.valid);
-  if (valid) return utils.validationStates.valid;
-  return utils.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/cjs/SnackbarProvider/SnackbarProvider.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const notistack = require("notistack");
+const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const SnackbarProvider_styles = require("./SnackbarProvider.styles.cjs");
 const SnackbarContent = require("../Snackbar/SnackbarContent/SnackbarContent.cjs");
 const HvNotistackSnackMessage = React.forwardRef(function HvNotistackSnackMessage2(props, ref) {
@@ -57,20 +58,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
+  } = uikitReactUtils.useDefaultProps("HvSnackbarProvider", props);
   const { classes, css, cx } = SnackbarProvider_styles.useClasses(classesProp);
   const { containerRoot, ...otherNotistackClasses } = notistackClassesOverride || {};
   const notistackClasses = {

package/dist/cjs/SnackbarProvider/SnackbarProvider.styles.cjs

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

package/dist/cjs/Switch/Switch.cjs

@@ -9,9 +9,9 @@ const useUniqueId = require("../hooks/useUniqueId.cjs");
 const setId = require("../utils/setId.cjs");
 const Switch_styles = require("./Switch.styles.cjs");
 const BaseSwitch = require("../BaseSwitch/BaseSwitch.cjs");
-const utils = require("../FormElement/utils.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
 const Label = require("../FormElement/Label/Label.cjs");
+const utils = require("../FormElement/utils.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
 const HvSwitch = React.forwardRef(

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -5,6 +5,7 @@ const React = require("react");
 const utils = require("@mui/material/utils");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const validations = require("../BaseInput/validations.cjs");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
 const Suggestions = require("../FormElement/Suggestions/Suggestions.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useFocus = require("../hooks/useFocus.cjs");
@@ -14,10 +15,7 @@ const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
 const TagsInput_styles = require("./TagsInput.styles.cjs");
 const CharCounter = require("../FormElement/CharCounter/CharCounter.cjs");
-const utils$1 = require("../FormElement/utils.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
-const Label = require("../FormElement/Label/Label.cjs");
-const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const Tag = require("../Tag/Tag.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const HvTagsInput = React.forwardRef(
@@ -32,7 +30,7 @@ const HvTagsInput = React.forwardRef(
       readOnly,
       disabled,
       required,
-      label: textAreaLabel,
+      label,
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       description,
@@ -63,8 +61,6 @@ const HvTagsInput = React.forwardRef(
     } = uikitReactUtils.useDefaultProps("HvTagsInput", props);
     const { classes, cx } = TagsInput_styles.useClasses(classesProp);
     const elementId = useUniqueId.useUniqueId(id);
-    const hasLabel = textAreaLabel != null;
-    const hasDescription = description != null;
     const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
     const [validationState, setValidationState] = useControlled.useControlled(
       status,
@@ -95,11 +91,11 @@ const HvTagsInput = React.forwardRef(
     const performValidation = React.useCallback(
       (currValue) => {
         if (maxTagsQuantity !== null && maxTagsQuantity !== void 0 && currValue.length > maxTagsQuantity) {
-          setValidationState(utils$1.validationStates.invalid);
+          setValidationState("invalid");
           setValidationMessage(errorMessages.maxCharError);
           setStateValid(false);
         } else {
-          setValidationState(utils$1.validationStates.valid);
+          setValidationState("valid");
           setValidationMessage("");
           setStateValid(true);
         }
@@ -265,7 +261,7 @@ const HvTagsInput = React.forwardRef(
     const onDeleteTagHandler = React.useCallback(
       (event, i) => {
         deleteTag(i, event, true);
-        setValidationState(utils$1.validationStates.standBy);
+        setValidationState("standBy");
       },
       [deleteTag, setValidationState]
     );
@@ -305,35 +301,30 @@ const HvTagsInput = React.forwardRef(
           className
         ),
         children: [
-          (hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
-            hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
-              Label.HvLabel,
-              {
-                showGutter: true,
-                className: classes.label,
-                id: setId.setId(id, "label"),
-                htmlFor: setId.setId(elementId, "input"),
-                label: textAreaLabel
-              }
-            ),
-            hasDescription && /* @__PURE__ */ jsxRuntime.jsx(
-              InfoMessage.HvInfoMessage,
-              {
-                className: classes.description,
-                id: setId.setId(elementId, "description"),
-                children: description
-              }
-            )
-          ] }),
-          hasCounter && /* @__PURE__ */ jsxRuntime.jsx(
-            CharCounter.HvCharCounter,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LabelContainer.HvLabelContainer,
             {
-              id: setId.setId(elementId, "charCounter"),
-              className: classes.characterCounter,
-              separator: middleCountLabel,
-              currentCharQuantity: value.length,
-              maxCharQuantity: maxTagsQuantity,
-              ...countCharProps
+              label,
+              description,
+              inputId: setId.setId(elementId, "input"),
+              labelId: setId.setId(elementId, "label"),
+              descriptionId: setId.setId(elementId, "description"),
+              classes: {
+                root: classes.labelContainer,
+                label: classes.label,
+                description: classes.description
+              },
+              children: hasCounter && /* @__PURE__ */ jsxRuntime.jsx(
+                CharCounter.HvCharCounter,
+                {
+                  id: setId.setId(elementId, "charCounter"),
+                  className: classes.characterCounter,
+                  separator: middleCountLabel,
+                  currentCharQuantity: value.length,
+                  maxCharQuantity: maxTagsQuantity,
+                  ...countCharProps
+                }
+              )
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(
@@ -351,12 +342,12 @@ const HvTagsInput = React.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__ */ jsxRuntime.jsx(
                     Tag.HvTag,
                     {
                       type,
-                      label,
+                      label: label2,
                       disabled,
                       tabIndex: -1,
                       className: cx(classes.chipRoot, classes.listItemRoot),
@@ -365,7 +356,7 @@ const HvTagsInput = React.forwardRef(
                       },
                       ...otherProps
                     },
-                    `${label}-${i}`
+                    `${label2}-${i}`
                   );
                 }),
                 !disabled && !readOnly && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/TagsInput/TagsInput.styles.cjs

@@ -31,9 +31,9 @@ const { staticClasses, useClasses } = uikitReactUtils.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",
@@ -44,7 +44,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTagsInput
     display: "flex",
     alignItems: "center",
     alignContent: "flex-start",
-    gap: uikitStyles.theme.spacing("xxs", "xs"),
+    gap: uikitStyles.theme.space.xxs,
     cursor: "text",
     width: "100%",
     minHeight: 32,

package/dist/cjs/TextArea/TextArea.cjs

@@ -5,17 +5,17 @@ const React = require("react");
 const utils = require("@mui/material/utils");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const validations = require("../BaseInput/validations.cjs");
+const LabelContainer = require("../FormElement/LabelContainer.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const setId = require("../utils/setId.cjs");
 const TextArea_styles = require("./TextArea.styles.cjs");
-const utils$1 = require("../FormElement/utils.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
-const Label = require("../FormElement/Label/Label.cjs");
-const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const CharCounter = require("../FormElement/CharCounter/CharCounter.cjs");
 const BaseInput = require("../BaseInput/BaseInput.cjs");
+const utils$1 = require("../FormElement/utils.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
+const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const {
     id,
@@ -23,10 +23,11 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
     classes: classesProp,
     name,
     label,
-    description,
+    description: descriptionProp,
     placeholder,
     status,
     statusMessage,
+    infoMessage: infoMessageProp,
     validationMessages,
     maxCharQuantity,
     minCharQuantity,
@@ -35,8 +36,8 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
     rows = 1,
     defaultValue = "",
     middleCountLabel = "/",
-    countCharProps = {},
-    inputProps = {},
+    countCharProps,
+    inputProps,
     required,
     readOnly,
     disabled,
@@ -57,14 +58,16 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   } = uikitReactUtils.useDefaultProps("HvTextArea", props);
   const { classes, cx } = TextArea_styles.useClasses(classesProp);
   const elementId = useUniqueId.useUniqueId(id);
+  const { activeTheme } = uikitReactUtils.useTheme();
   const isDirty = React.useRef(false);
   const inputRef = React.useRef(null);
   const forkedRef = utils.useForkRef(ref, inputRefProp, inputRef);
+  const [description, infoMessage] = activeTheme?.name === "pentahoPlus" ? [infoMessageProp, descriptionProp] : [descriptionProp, infoMessageProp];
   const [focused, setFocused] = React.useState(false);
   const [autoScrolling, setAutoScrolling] = React.useState(autoScroll);
   const [validationState, setValidationState] = useControlled.useControlled(
     status,
-    utils$1.validationStates.standBy
+    "standBy"
   );
   const [validationMessage, setValidationMessage] = useControlled.useControlled(
     statusMessage,
@@ -74,7 +77,6 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   const isStateInvalid = utils$1.isInvalid(validationState);
   const isEmptyValue = value == null || value === "";
   const hasLabel = label != null;
-  const hasDescription = description != null;
   const hasCounter = maxCharQuantity != null && !hideCounter;
   const errorMessages = React.useMemo(
     () => ({ ...validations.DEFAULT_ERROR_MESSAGES, ...validationMessages }),
@@ -86,7 +88,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
       required,
       minCharQuantity,
       maxCharQuantity,
-      validations.validationTypes.none,
+      "none",
       validation
     );
     setValidationState(validations.computeValidationState(inputValidity, isEmptyValue));
@@ -123,7 +125,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   };
   const onFocusHandler = (event) => {
     setFocused(true);
-    setValidationState(utils$1.validationStates.standBy);
+    setValidationState("standBy");
     onFocus?.(event, String(value));
   };
   const isScrolledDown = React.useCallback(() => {
@@ -162,7 +164,7 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
   }, [focused, isEmptyValue, performValidation]);
   const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && validations.hasBuiltInValidations(
     required,
-    validations.validationTypes.none,
+    "none",
     minCharQuantity,
     // If blockMax is true maxCharQuantity will never produce an error
     // unless the value is controlled, so we can't prevent it to overflow maxCharQuantity
@@ -170,6 +172,8 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
     validation,
     inputProps
   ));
+  const willShowError = canShowError && isStateInvalid;
+  const canShowInfo = !!infoMessage && !willShowError;
   let errorMessageId;
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
@@ -194,35 +198,30 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
       ),
       onBlur: onContainerBlurHandler,
       children: [
-        (hasLabel || hasDescription) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.labelContainer, children: [
-          hasLabel && /* @__PURE__ */ jsxRuntime.jsx(
-            Label.HvLabel,
-            {
-              showGutter: true,
-              className: classes.label,
-              id: setId.setId(id, "label"),
-              htmlFor: setId.setId(elementId, "input"),
-              label
-            }
-          ),
-          hasDescription && /* @__PURE__ */ jsxRuntime.jsx(
-            InfoMessage.HvInfoMessage,
-            {
-              className: classes.description,
-              id: setId.setId(elementId, "description"),
-              children: description
-            }
-          )
-        ] }),
-        hasCounter && /* @__PURE__ */ jsxRuntime.jsx(
-          CharCounter.HvCharCounter,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          LabelContainer.HvLabelContainer,
           {
-            id: setId.setId(elementId, "charCounter"),
-            className: classes.characterCounter,
-            separator: middleCountLabel,
-            currentCharQuantity: String(value).length,
-            maxCharQuantity,
-            ...countCharProps
+            label,
+            description,
+            inputId: setId.setId(elementId, "input"),
+            labelId: setId.setId(elementId, "label"),
+            descriptionId: setId.setId(elementId, "description"),
+            classes: {
+              root: classes.labelContainer,
+              label: classes.label,
+              description: classes.description
+            },
+            children: hasCounter && /* @__PURE__ */ jsxRuntime.jsx(
+              CharCounter.HvCharCounter,
+              {
+                id: setId.setId(elementId, "charCounter"),
+                className: classes.characterCounter,
+                separator: middleCountLabel,
+                currentCharQuantity: String(value).length,
+                maxCharQuantity,
+                ...countCharProps
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -268,7 +267,8 @@ const HvTextArea = React.forwardRef(function HvTextArea2(props, ref) {
             disableBorder: true,
             children: validationMessage
           }
-        )
+        ),
+        canShowInfo && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { disableGutter: true, variant: "caption1", children: infoMessage })
       ]
     }
   );

package/dist/cjs/TextArea/TextArea.styles.cjs

@@ -9,14 +9,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTextArea"
   baseInput: { clear: "both", float: "left" },
   input: {},
   inputResizable: {},
-  labelContainer: { float: "left", display: "flex", alignItems: "flex-start" },
+  labelContainer: {},
   label: {},
-  description: { display: "block", float: "left" },
+  description: {},
   characterCounter: {
-    display: "block",
-    float: "right",
     textAlign: "right",
-    marginBottom: "6px"
+    marginLeft: "auto"
   },
   error: { float: "left" }
 });