@hitachivantara/uikit-react-core 5.91.3 → 5.93.0

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/Table/TableHeader/TableHeader.cjs

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
+const icons = require("../../icons.cjs");
 const helpers = require("../../utils/helpers.cjs");
 const TableContext = require("../TableContext.cjs");
 const TableSectionContext = require("../TableSectionContext.cjs");
@@ -44,10 +45,6 @@ const HvTableHeader = React.forwardRef(
     const type = typeProp || tableSectionContext?.type || "body";
     const isHeadCell = type === "head";
     const scope = scopeProp ?? (isHeadCell ? "col" : "row");
-    const Sort = React.useMemo(
-      () => utils.getSortIcon(sorted && sortDirection),
-      [sorted, sortDirection]
-    );
     const Component = component || tableContext?.components?.Th || defaultComponent;
     const role = Component === defaultComponent ? null : isHeadCell ? "columnheader" : "rowheader";
     const paragraph = utils.isParagraph(children);
@@ -96,7 +93,13 @@ const HvTableHeader = React.forwardRef(
                     icon: true,
                     "aria-label": "Sort",
                     ...sortButtonProps,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(Sort, { className: classes.sortIcon })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      icons.HvIcon,
+                      {
+                        name: utils.getSortIconName(sorted && sortDirection),
+                        className: classes.sortIcon
+                      }
+                    )
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/Table/TableHeader/utils.cjs

@@ -1,18 +1,17 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const getSortIcon = (dir) => {
+const getSortIconName = (dir) => {
   switch (dir) {
     case "ascending":
-      return uikitReactIcons.SortAscendingXS;
+      return "SortAsc";
     case "descending":
-      return uikitReactIcons.SortDescendingXS;
+      return "SortDesc";
     default:
-      return uikitReactIcons.SortXS;
+      return "Sort";
   }
 };
 const isParagraph = (children) => {
   return typeof children === "string" && /\s/.test(children);
 };
-exports.getSortIcon = getSortIcon;
+exports.getSortIconName = getSortIconName;
 exports.isParagraph = isParagraph;

package/dist/cjs/Table/hooks/useHvRowExpand.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useLabels = require("../../hooks/useLabels.cjs");
+const icons = require("../../icons.cjs");
 const Button = require("../../Button/Button.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const DEFAULT_LABELS = {
@@ -24,7 +24,7 @@ const CellWithExpandButton = ({
         "aria-label": row.isExpanded ? labels.collapseRowButtonAriaLabel : labels.expandRowButtonAriaLabel,
         "aria-expanded": row.isExpanded,
         onClick: rowProps?.onClick,
-        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { rotate: row.isExpanded })
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: row.isExpanded })
       }
     ),
     cell?.value && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "label", component: "span", children: cell.value })

package/dist/cjs/Table/renderers/renderers.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("@emotion/react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const icons = require("../../icons.cjs");
 const setId = require("../../utils/setId.cjs");
 const DateColumnCell = require("./DateColumnCell.cjs");
 const DropdownColumnCell = require("./DropdownColumnCell.cjs");
@@ -52,7 +52,7 @@ function hvDateColumn(col, dateFormat) {
     ...col
   };
 }
-function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabel, getCanRowExpand, ExpandedIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, {}), CollapsedIcon = /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, {})) {
+function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabel, getCanRowExpand, ExpandedIcon = /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: true }), CollapsedIcon = /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs" })) {
   return {
     Cell: (cellProps) => {
       const { value, row } = cellProps;

package/dist/cjs/Tag/Tag.cjs

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const CheckBoxIcon = require("../BaseCheckBox/CheckBoxIcon.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
+const icons = require("../icons.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const Tag_styles = require("./Tag.styles.cjs");
 const ButtonBase = require("../ButtonBase/ButtonBase.cjs");
@@ -57,15 +57,16 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
       [classes.disabledDeleteIcon]: disabled
     }),
     onClick: handleDeleteClick
-  }) : /* @__PURE__ */ jsxRuntime.jsx(
-    uikitReactIcons.CloseXS,
+  }) : /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    icons.HvIcon,
     {
-      size: "XS",
+      compact: true,
+      name: "Close",
       onClick: handleDeleteClick,
       className: cx(classes.deleteIcon, classes.button, classes.tagButton),
       ...deleteButtonProps
     }
-  );
+  ) });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ButtonBase.HvButtonBase,
     {

package/dist/cjs/Tag/Tag.styles.cjs

@@ -16,6 +16,11 @@ const { staticClasses, useClasses } = uikitReactUtils.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: {
@@ -65,9 +70,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
     color: "inherit"
   },
   deleteIcon: {
-    width: 16,
-    height: 16,
-    "&:hover": {
+    margin: 0,
+    padding: 2,
+    ":hover": {
       backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },

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

package/dist/cjs/TimePicker/TimePicker.cjs

@@ -6,18 +6,17 @@ const date = require("@internationalized/date");
 const utils$1 = require("@mui/material/utils");
 const datepicker$1 = require("@react-aria/datepicker");
 const datepicker = require("@react-stately/datepicker");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 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");
 const setId = require("../utils/setId.cjs");
 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,
             {
@@ -166,13 +160,7 @@ const HvTimePicker = React.forwardRef(
                 headerOpen: classes.dropdownHeaderOpen
               },
               placement: "right",
-              adornment: /* @__PURE__ */ jsxRuntime.jsx(
-                uikitReactIcons.Time,
-                {
-                  color: disabled ? "textDisabled" : void 0,
-                  className: classes.icon
-                }
-              ),
+              adornment: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Time", className: classes.icon }),
               expanded: open,
               onToggle: (evt, newOpen) => {
                 if (disableExpand) return;

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/TimePicker/Unit/Unit.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const icons = require("../../icons.cjs");
 const Unit_styles = require("./Unit.styles.cjs");
 const Button = require("../../Button/Button.cjs");
 const BaseInput = require("../../BaseInput/BaseInput.cjs");
@@ -19,7 +19,7 @@ const Unit = ({
   const { type, text } = segment;
   const placeholder = placeholderProp ?? segment.placeholder;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.root, children: [
-    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, { onClick: onAdd }),
+    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", rotate: true, onClick: onAdd }),
     type === "literal" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.separator, children: text }),
     type === "dayPeriod" && /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, className: classes.periodToggle, onClick: onAdd, children: text }),
     ["hour", "minute", "second"].includes(type) && /* @__PURE__ */ jsxRuntime.jsx(
@@ -47,7 +47,7 @@ const Unit = ({
         inputProps: { autoComplete: "off", type: "number" }
       }
     ),
-    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { onClick: onSub })
+    type !== "literal" && /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", size: "xs", onClick: onSub })
   ] });
 };
 exports.Unit = Unit;