@hitachivantara/uikit-react-core 5.91.3 → 5.93.0

package/dist/cjs/Accordion/Accordion.cjs

@@ -2,9 +2,9 @@
 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 useExpandable = require("../hooks/useExpandable.cjs");
+const icons = require("../icons.cjs");
 const Accordion_styles = require("./Accordion.styles.cjs");
 const Typography = require("../Typography/Typography.cjs");
 const ButtonBase = require("../ButtonBase/ButtonBase.cjs");
@@ -56,7 +56,7 @@ const HvAccordion = React.forwardRef(function HvAccordion2(props, ref) {
         onClick: handleClick,
         variant: labelVariant,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, { rotate: !isOpen }),
+          /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", rotate: isOpen, size: "xs" }),
           label
         ]
       }

package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs

@@ -2,8 +2,8 @@
 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 icons = require("../icons.cjs");
 const setId = require("../utils/setId.cjs");
 const ActionsGeneric_styles = require("./ActionsGeneric.styles.cjs");
 const DropDownMenu = require("../DropDownMenu/DropDownMenu.cjs");
@@ -78,7 +78,7 @@ const HvActionsGeneric = React.forwardRef(function HvActionsGeneric2(props, ref)
             icon: classes.dropDownMenuButton,
             iconSelected: classes.dropDownMenuButtonSelected
           },
-          icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, { color: iconColor }),
+          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "DotsVertical", color: iconColor }),
           placement: "left",
           onClick: (event, action) => {
             handleCallback(event, idProp || "", action);

package/dist/cjs/AppSwitcher/Action/Action.cjs

@@ -2,9 +2,9 @@
 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 uikitStyles = require("@hitachivantara/uikit-styles");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
+const icons = require("../../icons.cjs");
 const Action_styles = require("./Action.styles.cjs");
 const Avatar = require("../../Avatar/Avatar.cjs");
 const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
@@ -98,7 +98,15 @@ const HvAppSwitcherAction = ({
                 }
               }
             ),
-            description && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { title: description, children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Info, { className: classes.iconInfo, id: descriptionElementId }) })
+            description && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.HvTooltip, { title: description, children: /* @__PURE__ */ jsxRuntime.jsx(
+              icons.HvIcon,
+              {
+                name: "Info",
+                compact: true,
+                className: classes.iconInfo,
+                id: descriptionElementId
+              }
+            ) })
           ]
         }
       )

package/dist/cjs/Avatar/Avatar.cjs

@@ -3,11 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const MuiAvatar = require("@mui/material/Avatar");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const AvatarGroupContext = require("../AvatarGroup/AvatarGroupContext.cjs");
 const useImageLoaded = require("../hooks/useImageLoaded.cjs");
+const icons = require("../icons.cjs");
 const Avatar_styles = require("./Avatar.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiAvatar__default = /* @__PURE__ */ _interopDefault(MuiAvatar);
@@ -64,8 +64,9 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
     [children] = alt;
   } else {
     children = /* @__PURE__ */ jsxRuntime.jsx(
-      uikitReactIcons.User,
+      icons.HvIcon,
       {
+        name: "User",
         color,
         size: decreaseSizeMap[size],
         className: classes.fallback

package/dist/cjs/Badge/Badge.styles.cjs

@@ -3,7 +3,19 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.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/cjs/Banner/BannerContent/BannerContent.styles.cjs

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

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -5,10 +5,10 @@ const React = require("react");
 const reactPopper = require("react-popper");
 const utils = require("@mui/material/utils");
 const core = require("@popperjs/core");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
+const icons = require("../icons.cjs");
 const focusableElementFinder = require("../utils/focusableElementFinder.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
@@ -91,7 +91,6 @@ const BaseDropdown = React.forwardRef(function BaseDropdown2(props, ref) {
     },
     [isOpen, disabled, setIsOpen, onToggle, referenceElement]
   );
-  const ExpanderComponent = isOpen ? uikitReactIcons.DropUpXS : uikitReactIcons.DropDownXS;
   const defaultHeaderElement = /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -121,10 +120,11 @@ const BaseDropdown = React.forwardRef(function BaseDropdown2(props, ref) {
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsxRuntime.jsx(
-          ExpanderComponent,
+          icons.HvIcon,
           {
-            iconSize: "XS",
-            color: disabled ? "textDisabled" : void 0,
+            name: "CaretDown",
+            size: "xs",
+            rotate: isOpen,
             className: classes.arrow
           }
         ) })
@@ -189,6 +189,7 @@ const BaseDropdown = React.forwardRef(function BaseDropdown2(props, ref) {
         classes,
         containerId,
         onClickAway: handleOutside,
+        disablePortal,
         onContainerKeyDown: handleContainerKeyDown,
         children
       }

package/dist/cjs/BaseInput/BaseInput.styles.cjs

@@ -37,7 +37,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
     fontFamily: uikitStyles.theme.fontFamily.body,
     alignItems: "stretch",
     ...uikitStyles.theme.typography.body,
-    ":hover:not($disabled,$invalid,$readOnly)": {
+    ":hover:not($disabled,$readOnly)": {
       borderColor: uikitStyles.theme.colors.primary
     },
     ":focus-within:not($disabled)": {

package/dist/cjs/BaseInput/validations.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const utils = require("../FormElement/utils.cjs");
 const isNumeric = (num) => (
   // to prevent Number( <spaces> ) = 0
   num.trim().length > 0 && !Number.isNaN(Number(num))
@@ -9,27 +8,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 utils.validationStates.standBy;
+    return "standBy";
   }
-  return inputValidity.valid ? utils.validationStates.valid : utils.validationStates.invalid;
+  return inputValidity.valid ? "valid" : "invalid";
 };
 const computeValidationMessage = (inputValidity, errorMessages) => {
   if (inputValidity.valid) {
@@ -79,13 +73,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;
@@ -112,4 +106,3 @@ exports.computeValidationState = computeValidationState;
 exports.computeValidationType = computeValidationType;
 exports.hasBuiltInValidations = hasBuiltInValidations;
 exports.validateInput = validateInput;
-exports.validationTypes = validationTypes;

package/dist/cjs/BaseSwitch/BaseSwitch.styles.cjs

@@ -91,7 +91,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseSwitc
   },
   readOnly: {},
   focusVisible: {
-    borderRadius: "8px",
+    borderRadius: uikitStyles.theme.radii.round,
     ...focusUtils.outlineStyles
   }
 });

package/dist/cjs/BreadCrumb/PathElement/PathElement.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const icons = require("../../icons.cjs");
 const PathElement_styles = require("./PathElement.styles.cjs");
 const HvPathElement = ({
   classes: classesProp,
@@ -12,8 +12,10 @@ const HvPathElement = ({
   return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: classes.centerContainer, children: [
     children,
     !last && /* @__PURE__ */ jsxRuntime.jsx(
-      uikitReactIcons.DropRightXS,
+      icons.HvIcon,
       {
+        name: "CaretRight",
+        size: "xs",
         className: classes.separatorContainer,
         color: "textDisabled"
       }

package/dist/cjs/BreadCrumb/utils.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const icons = require("../icons.cjs");
 const setId = require("../utils/setId.cjs");
 const DropDownMenu = require("../DropDownMenu/DropDownMenu.cjs");
 const removeExtension = (label) => label.includes(".") ? label.substring(0, label.lastIndexOf(".")) : label;
@@ -19,7 +19,7 @@ const pathWithSubMenu = (id, listRoute, maxVisible, onClick, dropDownMenuProps)
       DropDownMenu.HvDropDownMenu,
       {
         id: setId.setId(id, "submenu"),
-        icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsHorizontal, { iconSize: "S", color: "text" }),
+        icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "DotsHorizontal" }),
         dataList: subMenuList,
         ...dropDownMenuProps,
         onClick: onClick != null ? handleClick : void 0

package/dist/cjs/Button/Button.styles.cjs

@@ -30,20 +30,21 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvButton",
     border: "1px solid transparent",
     borderRadius: `var(--radius, ${uikitStyles.theme.radii.base})`,
     padding: uikitStyles.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: uikitStyles.theme.spacing(-1)
+    marginRight: 8
   },
   /** applied to the _right_ icon container */
   endIcon: {
-    marginRight: uikitStyles.theme.spacing(-1)
+    marginLeft: 8
   },
   focusVisible: {},
   /** applied to the root element when disabled */
@@ -61,6 +62,7 @@ const { staticClasses, useClasses } = uikitReactUtils.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/cjs/ButtonBase/ButtonBase.styles.cjs

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

package/dist/cjs/Calendar/CalendarHeader/CalendarHeader.cjs

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

package/dist/cjs/Calendar/CalendarNavigation/Navigation/Navigation.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const icons = require("../../../icons.cjs");
 const setId = require("../../../utils/setId.cjs");
 const Navigation_styles = require("./Navigation.styles.cjs");
 const Button = require("../../../Button/Button.cjs");
@@ -28,7 +28,7 @@ const Navigation = ({
           [classes.disabled]: !isPreviousEnabled
         }),
         onClick: onNavigatePrevious,
-        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropLeftXS, {})
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretRight", size: "xs", rotate: true })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -55,7 +55,7 @@ const Navigation = ({
           [classes.disabled]: !isNextEnabled
         }),
         onClick: onNavigateNext,
-        children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropRightXS, {})
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretRight", size: "xs" })
       }
     )
   ] });

package/dist/cjs/Card/Card.cjs

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

package/dist/cjs/Card/Card.styles.cjs

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

package/dist/cjs/Card/Header/Header.styles.cjs

@@ -5,7 +5,8 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCardHeader", {
   root: {
     position: "relative",
-    padding: uikitStyles.theme.spacing("12px", "xs", "sm", "sm")
+    padding: uikitStyles.theme.spacing("12px", "xs", "sm", "sm"),
+    gap: uikitStyles.theme.space.xs
   },
   titleShort: {
     ...uikitStyles.theme.typography.label,
@@ -21,8 +22,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCardHeade
   },
   content: {},
   action: {
-    margin: 0,
-    paddingLeft: uikitStyles.theme.space.xs
+    margin: 0
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Carousel/Carousel.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const useCarousel = require("embla-carousel-react");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useLabels = require("../hooks/useLabels.cjs");
+const icons = require("../icons.cjs");
 const Carousel_styles = require("./Carousel.styles.cjs");
 const CarouselControls = require("./CarouselControls.cjs");
 const CarouselThumbnails = require("./CarouselThumbnails.cjs");
@@ -122,7 +122,7 @@ const HvCarousel = React.forwardRef(function HvCarousel2(props, ref) {
             title: isFullscreen ? labels.close : labels.fullscreen,
             onClick: handleFullscreen,
             className: classes.closeButton,
-            children: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Fullscreen, {})
+            children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: isFullscreen ? "Close" : "Fullscreen" })
           }
         )
       ]
@@ -190,7 +190,7 @@ const HvCarousel = React.forwardRef(function HvCarousel2(props, ref) {
                     variant: "secondarySubtle",
                     "aria-label": labels.backwards,
                     onClick: handlePrevious,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, { iconSize: "XS" })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards", size: "xs" })
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -201,7 +201,7 @@ const HvCarousel = React.forwardRef(function HvCarousel2(props, ref) {
                     variant: "secondarySubtle",
                     "aria-label": labels.forwards,
                     onClick: handleNext,
-                    children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, { iconSize: "XS" })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Forwards", size: "xs" })
                   }
                 )
               ] }),

package/dist/cjs/Carousel/CarouselControls.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const useLabels = require("../hooks/useLabels.cjs");
+const icons = require("../icons.cjs");
 const Carousel_styles = require("./Carousel.styles.cjs");
 const Button = require("../Button/Button.cjs");
 const DEFAULT_LABELS = {
@@ -45,7 +45,7 @@ const HvCarouselControls = (props) => {
           disabled: !canPrevious,
           "aria-label": labels.backwards,
           onClick: onPreviousClick,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Backwards, { iconSize: "XS" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards", size: "xs" })
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageCounter, children: `${selectedIndex + 1} / ${numSlides}` }),
@@ -56,7 +56,7 @@ const HvCarouselControls = (props) => {
           disabled: !canNext,
           "aria-label": labels.forwards,
           onClick: onNextClick,
-          children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Forwards, { iconSize: "XS" })
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Forwards", size: "xs" })
         }
       )
     ] }),

package/dist/cjs/CheckBox/CheckBox.cjs

@@ -7,8 +7,8 @@ const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const setId = require("../utils/setId.cjs");
 const CheckBox_styles = require("./CheckBox.styles.cjs");
-const utils = require("../FormElement/utils.cjs");
 const BaseCheckBox = require("../BaseCheckBox/BaseCheckBox.cjs");
+const utils = require("../FormElement/utils.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
 const Label = require("../FormElement/Label/Label.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");

package/dist/cjs/CheckBoxGroup/CheckBoxGroup.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 LabelContainer = require("../FormElement/LabelContainer.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const CounterLabel = require("../utils/CounterLabel.cjs");
@@ -10,8 +11,6 @@ const multiSelectionEventHandler = require("../utils/multiSelectionEventHandler.
 const setId = require("../utils/setId.cjs");
 const CheckBoxGroup_styles = require("./CheckBoxGroup.styles.cjs");
 const FormElement = require("../FormElement/FormElement.cjs");
-const Label = require("../FormElement/Label/Label.cjs");
-const InfoMessage = require("../FormElement/InfoMessage/InfoMessage.cjs");
 const CheckBox = require("../CheckBox/CheckBox.cjs");
 const WarningText = require("../FormElement/WarningText/WarningText.cjs");
 const computeSelectAllState = (selected, total) => {
@@ -179,16 +178,18 @@ const HvCheckBoxGroup = React.forwardRef(
         readOnly,
         className: cx(classes.root, className),
         children: [
-          label && /* @__PURE__ */ jsxRuntime.jsx(
-            Label.HvLabel,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            LabelContainer.HvLabelContainer,
             {
-              showGutter: true,
-              id: setId.setId(elementId, "label"),
               label,
-              className: classes.label
+              description,
+              labelId: setId.setId(elementId, "label"),
+              descriptionId: setId.setId(elementId, "description"),
+              classes: {
+                label: classes.label
+              }
             }
           ),
-          description && /* @__PURE__ */ jsxRuntime.jsx(InfoMessage.HvInfoMessage, { id: setId.setId(elementId, "description"), children: description }),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {