@hitachivantara/uikit-react-core 5.91.2 → 5.91.3

package/dist/cjs/BaseCheckBox/BaseCheckBox.styles.cjs

@@ -9,19 +9,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
     width: 32,
     minWidth: 32,
     height: 32,
-    borderRadius: uikitStyles.theme.radii.base,
+    borderRadius: uikitStyles.theme.radii.round,
     cursor: "pointer",
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.bgHover,
-      borderRadius: uikitStyles.theme.radii.round
+    ":hover": {
+      backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
   disabled: {
     cursor: "not-allowed",
-    pointerEvents: "initial",
-    "&:hover": {
-      backgroundColor: "transparent"
-    }
+    pointerEvents: "initial"
   },
   focusVisible: {
     "& svg": {

package/dist/cjs/BaseCheckBox/CheckBoxIcon.cjs

@@ -4,14 +4,9 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const icons = require("../icons.cjs");
 const { useClasses } = uikitReactUtils.createClasses("HvCheckBoxIcon", {
   root: {
-    display: "inline-flex",
-    fill: "currentcolor",
-    width: "1em",
-    height: "1em",
-    flexShrink: 0,
-    fontSize: 16,
     color: uikitStyles.theme.colors.bgContainer,
     borderRadius: uikitStyles.theme.radii.base,
     border: `1px solid ${uikitStyles.theme.colors.borderStrong}`
@@ -22,7 +17,8 @@ const { useClasses } = uikitReactUtils.createClasses("HvCheckBoxIcon", {
     color: uikitStyles.theme.colors.bgContainer
   },
   indeterminate: {
-    color: uikitStyles.theme.colors.textSubtle
+    color: uikitStyles.theme.colors.textSubtle,
+    backgroundColor: uikitStyles.theme.colors.bgContainer
   },
   semantic: {
     "&[data-variant=indeterminate]": {
@@ -61,7 +57,7 @@ const HvCheckBoxIcon = (props) => {
     }
   }, [variant]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
+    icons.SvgBase,
     {
       viewBox: "0 0 14 14",
       "data-variant": variant,

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

@@ -26,6 +26,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
     display: "inline-flex",
     width: "100%",
     position: "relative",
+    overflow: "hidden",
     margin: 0,
     borderRadius: uikitStyles.theme.radii.base,
     height: "32px",
@@ -34,6 +35,8 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput
     boxSizing: "border-box",
     backgroundColor: uikitStyles.theme.colors.bgContainer,
     fontFamily: uikitStyles.theme.fontFamily.body,
+    alignItems: "stretch",
+    ...uikitStyles.theme.typography.body,
     ":hover:not($disabled,$invalid,$readOnly)": {
       borderColor: uikitStyles.theme.colors.primary
     },

package/dist/cjs/BaseRadio/RadioIcon.cjs

@@ -3,14 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const icons = require("../icons.cjs");
 const { useClasses } = uikitReactUtils.createClasses("HvRadioIcon", {
   root: {
-    display: "inline-flex",
-    fill: "currentcolor",
-    width: "1em",
-    height: "1em",
-    flexShrink: 0,
-    fontSize: 16,
     borderRadius: uikitStyles.theme.radii.full,
     border: `1px solid ${uikitStyles.theme.colors.borderStrong}`,
     backgroundColor: uikitStyles.theme.colors.bgContainer
@@ -39,7 +34,7 @@ const HvRadioIcon = (props) => {
   } = uikitReactUtils.useDefaultProps("HvRadioIcon", props);
   const { classes, cx } = useClasses(classesProp, false);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
+    icons.SvgBase,
     {
       viewBox: "0 0 16 16",
       className: cx(classes.root, className, {

package/dist/cjs/CheckBox/CheckBox.cjs

@@ -154,6 +154,7 @@ const HvCheckBox = React.forwardRef(
                 /* @__PURE__ */ jsxRuntime.jsx(
                   Label.HvLabel,
                   {
+                    noWrap: true,
                     id: setId.setId(elementId, "label"),
                     htmlFor: setId.setId(elementId, "input"),
                     label,
@@ -170,7 +171,6 @@ const HvCheckBox = React.forwardRef(
               id: setId.setId(elementId, "error"),
               disableAdornment: !hasLabel,
               hideText: !hasLabel,
-              disableBorder: true,
               children: validationMessage
             }
           )

package/dist/cjs/CheckBox/CheckBox.styles.cjs

@@ -8,58 +8,32 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvCheckBox"
   container: {
     cursor: "pointer",
     display: "flex",
-    height: "32px",
+    alignItems: "center",
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.bgHover,
-      borderRadius: uikitStyles.theme.radii.base
+    borderRadius: uikitStyles.theme.radii.base,
+    "&:hover:not($disabled)": {
+      backgroundColor: uikitStyles.theme.colors.bgHover
+    },
+    ":where(:has($label)) $checkbox": {
+      borderRadius: "inherit"
     }
   },
+  invalidContainer: {},
   disabled: {
     cursor: "not-allowed",
-    "& $label": { color: uikitStyles.theme.colors.textDisabled, cursor: "not-allowed" },
-    "&:hover": {
-      backgroundColor: "transparent"
-    }
+    "& $label": { color: uikitStyles.theme.colors.textDisabled, cursor: "not-allowed" }
   },
   focusVisible: {
-    ...focusUtils.outlineStyles,
-    "& div": {
-      backgroundColor: uikitStyles.theme.colors.bgPageSecondary
-    },
-    [`& $checkbox div > svg`]: {
-      outline: "none",
-      boxShadow: "none"
-    }
-  },
-  invalidContainer: {
-    borderBottom: `1px solid ${uikitStyles.theme.form.errorColor}`,
-    "&:hover": {
-      borderBottomLeftRadius: "0px",
-      borderBottomRightRadius: "0px"
-    }
-  },
-  checkbox: { height: "32px" },
-  invalidCheckbox: {
-    "::after": {
-      content: '""',
-      position: "absolute",
-      bottom: 0,
-      left: 0,
-      width: "100%",
-      height: 1,
-      backgroundColor: uikitStyles.theme.form.errorColor
-    }
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+    ...focusUtils.outlineStyles
   },
+  checkbox: {},
+  invalidCheckbox: {},
   label: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
     verticalAlign: "middle",
     paddingRight: uikitStyles.theme.space.xs,
-    whiteSpace: "nowrap",
     ...uikitStyles.theme.typography.body,
     cursor: "pointer",
-    height: "32px",
     lineHeight: "32px",
     width: "100%"
   },

package/dist/cjs/Dropdown/List/List.cjs

@@ -5,6 +5,7 @@ const React = require("react");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const context = require("../../BaseDropdown/context.cjs");
+const CounterLabel = require("../../utils/CounterLabel.cjs");
 const setId = require("../../utils/setId.cjs");
 const utils = require("../utils.cjs");
 const List_styles = require("./List.styles.cjs");
@@ -12,7 +13,6 @@ const ActionBar = require("../../ActionBar/ActionBar.cjs");
 const Button = require("../../Button/Button.cjs");
 const List = require("../../List/List.cjs");
 const Input = require("../../Input/Input.cjs");
-const Typography = require("../../Typography/Typography.cjs");
 const CheckBox = require("../../CheckBox/CheckBox.cjs");
 const clone = (values) => values.map((value) => ({ ...value }));
 const cleanHidden = (lst) => lst.map((item) => ({ ...item, isHidden: false }));
@@ -111,30 +111,24 @@ const HvDropdownList = (props) => {
     updateSelectAll(newList);
   };
   const renderSelectAll = () => {
-    const selectAll = labels?.selectAll;
-    const multiSelectionConjunction = labels?.multiSelectionConjunction;
-    const nbrSelected = utils.getSelected(list).length;
-    const defaultLabel = /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: nbrSelected > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: nbrSelected }),
-      ` ${multiSelectionConjunction} ${list.length}`
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("b", { children: selectAll }),
-      ` (${list.length})`
-    ] }) });
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.selectAllContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       CheckBox.HvCheckBox,
       {
         id: setId.setId(id, "select-all"),
-        label: defaultLabel,
-        onChange: () => handleSelectAll(),
-        classes: {
-          container: classes.selection
-        },
+        label: /* @__PURE__ */ jsxRuntime.jsx(
+          CounterLabel.CounterLabel,
+          {
+            selected: utils.getSelected(list).length,
+            total: list.length,
+            conjunctionLabel: labels?.multiSelectionConjunction
+          }
+        ),
+        onChange: handleSelectAll,
         className: classes.selectAll,
         indeterminate: anySelected && !allSelected,
         checked: allSelected
       }
-    ) });
+    );
   };
   const onSelection = (listValues) => {
     if (!multiSelect) {

package/dist/cjs/Dropdown/List/List.styles.cjs

@@ -20,8 +20,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropdownL
   searchContainer: { marginBottom: uikitStyles.theme.space.xs },
   listBorderDown: {},
   listContainer: { padding: uikitStyles.theme.space.sm },
-  selectAllContainer: {},
-  selection: {},
   selectAll: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Input/Input.cjs

@@ -14,6 +14,7 @@ const useUniqueId = require("../hooks/useUniqueId.cjs");
 const generic = require("../types/generic.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const setId = require("../utils/setId.cjs");
+const icons = require("./icons.cjs");
 const Input_styles = require("./Input.styles.cjs");
 const Adornment = require("../FormElement/Adornment/Adornment.cjs");
 const utils$1 = require("../FormElement/utils.cjs");
@@ -319,7 +320,7 @@ const HvInput = generic.fixedForwardRef(function HvInput2(props, ref) {
             onClick: () => setRevealPassword((s) => !s),
             "aria-label": labels?.revealPasswordButtonLabel,
             "aria-controls": setId.setId(elementId, "input"),
-            icon: revealPassword ? /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.PreviewOff, {}) : /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Preview, {}),
+            icon: /* @__PURE__ */ jsxRuntime.jsx(icons.EyeIcon, { selected: revealPassword }),
             tabIndex: 0,
             ...{ selected: revealPassword }
           }

package/dist/cjs/Input/Input.styles.cjs

@@ -17,7 +17,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvInput", {
     justifyContent: "center",
     marginRight: 1
   },
-  icon: { width: "30px", height: "30px" },
+  icon: {
+    // TODO: review in v6 - don't assume/force size
+    ":has(svg)": {
+      width: "30px",
+      height: "30px"
+    }
+  },
   adornmentButton: {
     ":focus-visible,:hover": {
       backgroundColor: "transparent"

package/dist/cjs/Input/icons.cjs

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const icons = require("../icons.cjs");
+const EyeIcon = ({ selected }) => /* @__PURE__ */ jsxRuntime.jsxs(icons.SvgBase, { viewBox: "0 0 16 16", style: { margin: 8 }, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 8a3 3 0 1 1-3-3 3 3 0 0 1 3 3m5 0s-3.58 6-8 6-8-6-8-6 4-6 8-6 8 6 8 6m-1.2.03a22 22 0 0 0-2-2.32C11.01 3.94 9.35 3 8 3s-3 .93-4.77 2.68a22 22 0 0 0-2.02 2.35 18 18 0 0 0 1.85 2.28C4.25 11.53 6.08 13 8 13s3.73-1.45 4.91-2.67a18 18 0 0 0 1.88-2.3z" }),
+  /* @__PURE__ */ jsxRuntime.jsx(
+    "rect",
+    {
+      style: { transition: "width 0.2s ease" },
+      width: selected ? 20 : 0,
+      height: 1,
+      x: -2,
+      y: 8,
+      transform: "translate(-4 8) rotate(-45)"
+    }
+  )
+] });
+exports.EyeIcon = EyeIcon;

package/dist/cjs/Radio/Radio.styles.cjs

@@ -11,8 +11,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
     alignItems: "center",
     transition: "background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
     borderRadius: uikitStyles.theme.radii.base,
-    ":hover:not($disabled)": {
+    "&:hover:not($disabled)": {
       backgroundColor: uikitStyles.theme.colors.bgHover
+    },
+    ":where(:has($label)) $radio": {
+      borderRadius: "inherit"
     }
   },
   invalidContainer: {},
@@ -20,6 +23,10 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
     cursor: "not-allowed",
     "& $label": { color: uikitStyles.theme.colors.textDisabled, cursor: "not-allowed" }
   },
+  focusVisible: {
+    backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+    ...focusUtils.outlineStyles
+  },
   radio: {},
   invalidRadio: {},
   label: {
@@ -30,10 +37,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvRadio", {
     lineHeight: "32px",
     width: "100%"
   },
-  focusVisible: {
-    backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
-    ...focusUtils.outlineStyles
-  },
   checked: {},
   semantic: {}
 });

package/dist/cjs/TimePicker/Unit/Unit.cjs

@@ -31,8 +31,7 @@ const Unit = ({
         },
         classes: {
           input: classes.input,
-          root: classes.inputContainer,
-          inputRoot: classes.inputRoot
+          root: classes.inputRoot
         },
         onKeyDown: (event) => {
           if ("key" in event && event.key === "Enter") {

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

@@ -29,8 +29,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTimePicke
     ...uikitStyles.theme.typography.title3,
     fontWeight: 600,
     textAlign: "center",
-    height: 40,
-    width: 40,
     padding: 0,
     margin: 0,
     "&::placeholder": {
@@ -44,10 +42,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTimePicke
   },
   subtractIcon: {
     marginTop: uikitStyles.theme.space.xs
-  },
-  inputContainer: {
-    minWidth: 40,
-    maxWidth: 40
   }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/VerticalNavigation/VerticalNavigation.styles.cjs

@@ -26,10 +26,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses(
       }
     },
     collapsed: {
-      width: "56px",
-      "&$childData": {
-        width: "66px"
-      },
+      width: "fit-content",
       "& > :first-of-type:not(:last-child)": {
         padding: uikitStyles.theme.spacing("sm", "xs", "xs", "xs")
       },

package/dist/cjs/icons.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("@emotion/styled");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const SvgBase = styled__default.default("svg")({
+  display: "inline-block",
+  fill: "currentcolor",
+  width: "1em",
+  height: "1em",
+  fontSize: 16,
+  flexShrink: 0,
+  transition: "rotate 0.2s ease"
+});
+exports.SvgBase = SvgBase;

package/dist/esm/BaseCheckBox/BaseCheckBox.styles.js

@@ -7,19 +7,15 @@ const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
     width: 32,
     minWidth: 32,
     height: 32,
-    borderRadius: theme.radii.base,
+    borderRadius: theme.radii.round,
     cursor: "pointer",
-    "&:hover": {
-      backgroundColor: theme.colors.bgHover,
-      borderRadius: theme.radii.round
+    ":hover": {
+      backgroundColor: theme.colors.bgHover
     }
   },
   disabled: {
     cursor: "not-allowed",
-    pointerEvents: "initial",
-    "&:hover": {
-      backgroundColor: "transparent"
-    }
+    pointerEvents: "initial"
   },
   focusVisible: {
     "& svg": {

package/dist/esm/BaseCheckBox/BaseCheckBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.styles.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    borderRadius: theme.radii.base,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.bgHover,\n      borderRadius: theme.radii.round,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {},\n  indeterminate: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,MACT,iBAAiB;AAAA,IAAA;AAAA,EAErB;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,UAAU,CAAA;AACZ,CAAC;"}
+{"version":3,"file":"BaseCheckBox.styles.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    borderRadius: theme.radii.round,\n    cursor: \"pointer\",\n    \":hover\": {\n      backgroundColor: theme.colors.bgHover,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {},\n  indeterminate: {},\n  semantic: {},\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,UAAU;AAAA,MACR,iBAAiB,MAAM,OAAO;AAAA,IAAA;AAAA,EAElC;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,EACjB;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,UAAU,CAAA;AACZ,CAAC;"}

package/dist/esm/BaseCheckBox/CheckBoxIcon.js

@@ -2,14 +2,9 @@ import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
+import { SvgBase } from "../icons.js";
 const { useClasses } = createClasses("HvCheckBoxIcon", {
   root: {
-    display: "inline-flex",
-    fill: "currentcolor",
-    width: "1em",
-    height: "1em",
-    flexShrink: 0,
-    fontSize: 16,
     color: theme.colors.bgContainer,
     borderRadius: theme.radii.base,
     border: `1px solid ${theme.colors.borderStrong}`
@@ -20,7 +15,8 @@ const { useClasses } = createClasses("HvCheckBoxIcon", {
     color: theme.colors.bgContainer
   },
   indeterminate: {
-    color: theme.colors.textSubtle
+    color: theme.colors.textSubtle,
+    backgroundColor: theme.colors.bgContainer
   },
   semantic: {
     "&[data-variant=indeterminate]": {
@@ -59,7 +55,7 @@ const HvCheckBoxIcon = (props) => {
     }
   }, [variant]);
   return /* @__PURE__ */ jsx(
-    "svg",
+    SvgBase,
     {
       viewBox: "0 0 14 14",
       "data-variant": variant,

package/dist/esm/BaseCheckBox/CheckBoxIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxIcon.js","sources":["../../../src/BaseCheckBox/CheckBoxIcon.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  createClasses,\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { HvBaseCheckBoxProps } from \"./BaseCheckBox\";\n\nconst { useClasses } = createClasses(\"HvCheckBoxIcon\", {\n  root: {\n    display: \"inline-flex\",\n    fill: \"currentcolor\",\n    width: \"1em\",\n    height: \"1em\",\n    flexShrink: 0,\n\n    fontSize: 16,\n    color: theme.colors.bgContainer,\n    borderRadius: theme.radii.base,\n    border: `1px solid ${theme.colors.borderStrong}`,\n  },\n  checked: {\n    borderColor: \"transparent\",\n    backgroundColor: theme.colors.primaryStrong,\n    color: theme.colors.bgContainer,\n  },\n  indeterminate: {\n    color: theme.colors.textSubtle,\n  },\n  semantic: {\n    \"&[data-variant=indeterminate]\": {\n      backgroundColor: theme.colors.bgContainer,\n      borderColor: theme.colors.borderStrong,\n    },\n  },\n  disabled: {\n    color: theme.colors.bgDisabled,\n    borderColor: theme.colors.borderDisabled,\n    backgroundColor: theme.colors.bgDisabled,\n    \"&[data-variant=checked],&[data-variant=indeterminate]\": {\n      color: theme.colors.textDisabled,\n      borderColor: \"currentcolor\",\n    },\n  },\n});\n\nexport type HvCheckBoxIconClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxIconProps\n  extends Pick<HvBaseCheckBoxProps, \"className\" | \"disabled\" | \"semantic\"> {\n  variant?: \"default\" | \"checked\" | \"indeterminate\";\n  classes?: HvCheckBoxIconClasses;\n}\n\nexport const HvCheckBoxIcon = (props: HvCheckBoxIconProps) => {\n  const {\n    className,\n    classes: classesProp,\n    variant,\n    disabled,\n    semantic,\n  } = useDefaultProps(\"HvCheckBoxIcon\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const d = useMemo(() => {\n    switch (variant) {\n      case \"checked\":\n        return \"m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z\";\n      case \"indeterminate\":\n        return \"m3,8l8,0l0,-2l-8,0l0,2z\";\n      case \"default\":\n      default:\n        return \"m0,0l16,0l0,16l-16,0l0,-16z\";\n    }\n  }, [variant]);\n\n  return (\n    <svg\n      viewBox=\"0 0 14 14\"\n      data-variant={variant}\n      className={cx(classes.root, className, {\n        [classes.checked]: variant === \"checked\",\n        [classes.indeterminate]: variant === \"indeterminate\",\n        [classes.semantic]: semantic,\n        [classes.disabled]: disabled,\n      })}\n    >\n      <path d={d} />\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,EAAE,WAAA,IAAe,cAAc,kBAAkB;AAAA,EACrD,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,UAAU;AAAA,IACV,OAAO,MAAM,OAAO;AAAA,IACpB,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,EAChD;AAAA,EACA,SAAS;AAAA,IACP,aAAa;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,iCAAiC;AAAA,MAC/B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,aAAa,MAAM,OAAO;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,yDAAyD;AAAA,MACvD,OAAO,MAAM,OAAO;AAAA,MACpB,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,CAAC;AAUY,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,kBAAkB,KAAK;AAC3C,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAE/C,QAAA,IAAI,QAAQ,MAAM;AACtB,YAAQ,SAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AAAA,MACL;AACS,eAAA;AAAA,IAAA;AAAA,EACX,GACC,CAAC,OAAO,CAAC;AAGV,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAc;AAAA,MACd,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QAC/B,CAAC,QAAQ,aAAa,GAAG,YAAY;AAAA,QACrC,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,MAAA,CACrB;AAAA,MAED,UAAA,oBAAC,UAAK,EAAM,CAAA;AAAA,IAAA;AAAA,EACd;AAEJ;"}
+{"version":3,"file":"CheckBoxIcon.js","sources":["../../../src/BaseCheckBox/CheckBoxIcon.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport {\n  createClasses,\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { SvgBase } from \"../icons\";\nimport type { HvBaseCheckBoxProps } from \"./BaseCheckBox\";\n\nconst { useClasses } = createClasses(\"HvCheckBoxIcon\", {\n  root: {\n    color: theme.colors.bgContainer,\n    borderRadius: theme.radii.base,\n    border: `1px solid ${theme.colors.borderStrong}`,\n  },\n  checked: {\n    borderColor: \"transparent\",\n    backgroundColor: theme.colors.primaryStrong,\n    color: theme.colors.bgContainer,\n  },\n  indeterminate: {\n    color: theme.colors.textSubtle,\n    backgroundColor: theme.colors.bgContainer,\n  },\n  semantic: {\n    \"&[data-variant=indeterminate]\": {\n      backgroundColor: theme.colors.bgContainer,\n      borderColor: theme.colors.borderStrong,\n    },\n  },\n  disabled: {\n    color: theme.colors.bgDisabled,\n    borderColor: theme.colors.borderDisabled,\n    backgroundColor: theme.colors.bgDisabled,\n    \"&[data-variant=checked],&[data-variant=indeterminate]\": {\n      color: theme.colors.textDisabled,\n      borderColor: \"currentcolor\",\n    },\n  },\n});\n\nexport type HvCheckBoxIconClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxIconProps\n  extends Pick<HvBaseCheckBoxProps, \"className\" | \"disabled\" | \"semantic\"> {\n  variant?: \"default\" | \"checked\" | \"indeterminate\";\n  classes?: HvCheckBoxIconClasses;\n}\n\nexport const HvCheckBoxIcon = (props: HvCheckBoxIconProps) => {\n  const {\n    className,\n    classes: classesProp,\n    variant,\n    disabled,\n    semantic,\n  } = useDefaultProps(\"HvCheckBoxIcon\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const d = useMemo(() => {\n    switch (variant) {\n      case \"checked\":\n        return \"m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z\";\n      case \"indeterminate\":\n        return \"m3,8l8,0l0,-2l-8,0l0,2z\";\n      case \"default\":\n      default:\n        return \"m0,0l16,0l0,16l-16,0l0,-16z\";\n    }\n  }, [variant]);\n\n  return (\n    <SvgBase\n      viewBox=\"0 0 14 14\"\n      data-variant={variant}\n      className={cx(classes.root, className, {\n        [classes.checked]: variant === \"checked\",\n        [classes.indeterminate]: variant === \"indeterminate\",\n        [classes.semantic]: semantic,\n        [classes.disabled]: disabled,\n      })}\n    >\n      <path d={d} />\n    </SvgBase>\n  );\n};\n"],"names":[],"mappings":";;;;;AAWA,MAAM,EAAE,WAAA,IAAe,cAAc,kBAAkB;AAAA,EACrD,MAAM;AAAA,IACJ,OAAO,MAAM,OAAO;AAAA,IACpB,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,EAChD;AAAA,EACA,SAAS;AAAA,IACP,aAAa;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,UAAU;AAAA,IACR,iCAAiC;AAAA,MAC/B,iBAAiB,MAAM,OAAO;AAAA,MAC9B,aAAa,MAAM,OAAO;AAAA,IAAA;AAAA,EAE9B;AAAA,EACA,UAAU;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,IAC9B,yDAAyD;AAAA,MACvD,OAAO,MAAM,OAAO;AAAA,MACpB,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,CAAC;AAUY,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,kBAAkB,KAAK;AAC3C,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAE/C,QAAA,IAAI,QAAQ,MAAM;AACtB,YAAQ,SAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AAAA,MACL;AACS,eAAA;AAAA,IAAA;AAAA,EACX,GACC,CAAC,OAAO,CAAC;AAGV,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAc;AAAA,MACd,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,OAAO,GAAG,YAAY;AAAA,QAC/B,CAAC,QAAQ,aAAa,GAAG,YAAY;AAAA,QACrC,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,MAAA,CACrB;AAAA,MAED,UAAA,oBAAC,UAAK,EAAM,CAAA;AAAA,IAAA;AAAA,EACd;AAEJ;"}

package/dist/esm/BaseInput/BaseInput.styles.js

@@ -24,6 +24,7 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     display: "inline-flex",
     width: "100%",
     position: "relative",
+    overflow: "hidden",
     margin: 0,
     borderRadius: theme.radii.base,
     height: "32px",
@@ -32,6 +33,8 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     boxSizing: "border-box",
     backgroundColor: theme.colors.bgContainer,
     fontFamily: theme.fontFamily.body,
+    alignItems: "stretch",
+    ...theme.typography.body,
     ":hover:not($disabled,$invalid,$readOnly)": {
       borderColor: theme.colors.primary
     },

package/dist/esm/BaseInput/BaseInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInput.styles.js","sources":["../../../src/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    // #region `input` style reset\n    // Clears number input up/down arrows in Chrome and Firefox\n    \"input[type=number]\": {\n      MozAppearance: \"textfield\",\n      \"&::-webkit-outer-spin-button,&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0,\n      },\n    },\n\n    // Clears time input clock in Chrome\n    \"input::-webkit-calendar-picker-indicator\": {\n      display: \"none\",\n    },\n\n    // Clears search input clear button in Chrome\n    \"input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration\":\n      {\n        display: \"none\",\n      },\n    // #endregion\n\n    display: \"inline-flex\",\n    width: \"100%\",\n    position: \"relative\",\n    margin: 0,\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    borderWidth: 1,\n    borderColor: theme.colors.text,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.bgContainer,\n    fontFamily: theme.fontFamily.body,\n\n    \":hover:not($disabled,$invalid,$readOnly)\": {\n      borderColor: theme.colors.primary,\n    },\n    \":focus-within:not($disabled)\": {\n      ...outlineStyles,\n    },\n  },\n  disabled: {\n    backgroundColor: theme.colors.bgPage,\n    borderColor: theme.colors.textDisabled,\n\n    cursor: \"not-allowed\",\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  invalid: {\n    borderColor: theme.form.errorColor,\n  },\n  multiline: {\n    padding: 0,\n    overflow: \"auto\",\n    height: \"auto\",\n\n    \"& $input\": {\n      borderRadius: theme.radii.base,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      margin: 0,\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    borderColor: theme.colors.textDisabled,\n    backgroundColor: theme.colors.bgPage,\n  },\n  focused: {},\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  /** @deprecated use `classes.invalid` instead */\n  inputRootInvalid: {},\n  /** @deprecated use `classes.readOnly` instead */\n  inputRootReadOnly: {},\n  /** @deprecated use `classes.root` instead */\n  inputRoot: {},\n  /** @deprecated unused */\n  inputRootFocused: {},\n  /** @deprecated use `classes.disabled` instead */\n  inputRootDisabled: {},\n  /** @deprecated use `classes.multiline` instead */\n  inputRootMultiline: {},\n  input: {\n    height: \"100%\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...theme.typography.body,\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.textSubtle,\n    },\n  },\n  inputDisabled: {\n    color: theme.colors.textDisabled,\n    WebkitTextFillColor: theme.colors.textDisabled,\n  },\n  inputReadOnly: {\n    color: theme.colors.textSubtle,\n  },\n  inputResizable: {\n    resize: \"both\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA;AAAA;AAAA,IAGJ,sBAAsB;AAAA,MACpB,eAAe;AAAA,MACf,6DAA6D;AAAA,QAC3D,kBAAkB;AAAA,QAClB,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA;AAAA,IAGA,4CAA4C;AAAA,MAC1C,SAAS;AAAA,IACX;AAAA;AAAA,IAGA,0MACE;AAAA,MACE,SAAS;AAAA,IACX;AAAA;AAAA,IAGF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY,MAAM,WAAW;AAAA,IAE7B,4CAA4C;AAAA,MAC1C,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,IACA,gCAAgC;AAAA,MAC9B,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAE1B,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,mBAAmB;AAAA,IAAA;AAAA,EAEvB;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,KAAK;AAAA,EAC1B;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,YAAY;AAAA,MACV,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,WAAW,EAAE,OAAO,OAAO;AAAA,EAC3B,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS,CAAC;AAAA;AAAA,EAEV,sBAAsB,CAAC;AAAA;AAAA,EAEvB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,WAAW,CAAC;AAAA;AAAA,EAEZ,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,oBAAoB,CAAC;AAAA,EACrB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,IACxB,aAAa,MAAM,MAAM;AAAA,IACzB,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG,MAAM,WAAW;AAAA,IAEpB,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,IACpB,qBAAqB,MAAM,OAAO;AAAA,EACpC;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX,CAAC;"}
+{"version":3,"file":"BaseInput.styles.js","sources":["../../../src/BaseInput/BaseInput.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseInput\", {\n  root: {\n    // #region `input` style reset\n    // Clears number input up/down arrows in Chrome and Firefox\n    \"input[type=number]\": {\n      MozAppearance: \"textfield\",\n      \"&::-webkit-outer-spin-button,&::-webkit-inner-spin-button\": {\n        WebkitAppearance: \"none\",\n        margin: 0,\n      },\n    },\n\n    // Clears time input clock in Chrome\n    \"input::-webkit-calendar-picker-indicator\": {\n      display: \"none\",\n    },\n\n    // Clears search input clear button in Chrome\n    \"input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration\":\n      {\n        display: \"none\",\n      },\n    // #endregion\n\n    display: \"inline-flex\",\n    width: \"100%\",\n    position: \"relative\",\n    overflow: \"hidden\",\n    margin: 0,\n    borderRadius: theme.radii.base,\n    height: \"32px\",\n    borderWidth: 1,\n    borderColor: theme.colors.text,\n    boxSizing: \"border-box\",\n    backgroundColor: theme.colors.bgContainer,\n    fontFamily: theme.fontFamily.body,\n    alignItems: \"stretch\",\n    ...theme.typography.body,\n\n    \":hover:not($disabled,$invalid,$readOnly)\": {\n      borderColor: theme.colors.primary,\n    },\n    \":focus-within:not($disabled)\": {\n      ...outlineStyles,\n    },\n  },\n  disabled: {\n    backgroundColor: theme.colors.bgPage,\n    borderColor: theme.colors.textDisabled,\n\n    cursor: \"not-allowed\",\n\n    \"&&::before\": {\n      borderBottomStyle: \"none\",\n    },\n  },\n  invalid: {\n    borderColor: theme.form.errorColor,\n  },\n  multiline: {\n    padding: 0,\n    overflow: \"auto\",\n    height: \"auto\",\n\n    \"& $input\": {\n      borderRadius: theme.radii.base,\n      height: \"auto\",\n      minHeight: \"21px\",\n      padding: \"5px 10px\",\n      overflow: \"auto\",\n      margin: 0,\n    },\n  },\n  resizable: { width: \"auto\" },\n  readOnly: {\n    borderColor: theme.colors.textDisabled,\n    backgroundColor: theme.colors.bgPage,\n  },\n  focused: {},\n  /** @deprecated unused. use `::after` instead */\n  inputBorderContainer: {},\n  /** @deprecated use `classes.invalid` instead */\n  inputRootInvalid: {},\n  /** @deprecated use `classes.readOnly` instead */\n  inputRootReadOnly: {},\n  /** @deprecated use `classes.root` instead */\n  inputRoot: {},\n  /** @deprecated unused */\n  inputRootFocused: {},\n  /** @deprecated use `classes.disabled` instead */\n  inputRootDisabled: {},\n  /** @deprecated use `classes.multiline` instead */\n  inputRootMultiline: {},\n  input: {\n    height: \"100%\",\n    marginLeft: theme.space.xs,\n    marginRight: theme.space.xs,\n    padding: 0,\n    backgroundColor: \"transparent\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    outline: \"none\",\n    width: \"initial\",\n    flexGrow: 1,\n    ...theme.typography.body,\n\n    \"&::placeholder\": {\n      opacity: 1,\n      color: theme.colors.textSubtle,\n    },\n  },\n  inputDisabled: {\n    color: theme.colors.textDisabled,\n    WebkitTextFillColor: theme.colors.textDisabled,\n  },\n  inputReadOnly: {\n    color: theme.colors.textSubtle,\n  },\n  inputResizable: {\n    resize: \"both\",\n    width: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA;AAAA;AAAA,IAGJ,sBAAsB;AAAA,MACpB,eAAe;AAAA,MACf,6DAA6D;AAAA,QAC3D,kBAAkB;AAAA,QAClB,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA;AAAA,IAGA,4CAA4C;AAAA,MAC1C,SAAS;AAAA,IACX;AAAA;AAAA,IAGA,0MACE;AAAA,MACE,SAAS;AAAA,IACX;AAAA;AAAA,IAGF,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,aAAa,MAAM,OAAO;AAAA,IAC1B,WAAW;AAAA,IACX,iBAAiB,MAAM,OAAO;AAAA,IAC9B,YAAY,MAAM,WAAW;AAAA,IAC7B,YAAY;AAAA,IACZ,GAAG,MAAM,WAAW;AAAA,IAEpB,4CAA4C;AAAA,MAC1C,aAAa,MAAM,OAAO;AAAA,IAC5B;AAAA,IACA,gCAAgC;AAAA,MAC9B,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,IAC9B,aAAa,MAAM,OAAO;AAAA,IAE1B,QAAQ;AAAA,IAER,cAAc;AAAA,MACZ,mBAAmB;AAAA,IAAA;AAAA,EAEvB;AAAA,EACA,SAAS;AAAA,IACP,aAAa,MAAM,KAAK;AAAA,EAC1B;AAAA,EACA,WAAW;AAAA,IACT,SAAS;AAAA,IACT,UAAU;AAAA,IACV,QAAQ;AAAA,IAER,YAAY;AAAA,MACV,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ;AAAA,IAAA;AAAA,EAEZ;AAAA,EACA,WAAW,EAAE,OAAO,OAAO;AAAA,EAC3B,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS,CAAC;AAAA;AAAA,EAEV,sBAAsB,CAAC;AAAA;AAAA,EAEvB,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,WAAW,CAAC;AAAA;AAAA,EAEZ,kBAAkB,CAAC;AAAA;AAAA,EAEnB,mBAAmB,CAAC;AAAA;AAAA,EAEpB,oBAAoB,CAAC;AAAA,EACrB,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,YAAY,MAAM,MAAM;AAAA,IACxB,aAAa,MAAM,MAAM;AAAA,IACzB,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,UAAU;AAAA,IACV,cAAc;AAAA,IACd,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG,MAAM,WAAW;AAAA,IAEpB,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,OAAO,MAAM,OAAO;AAAA,IAAA;AAAA,EAExB;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,IACpB,qBAAqB,MAAM,OAAO;AAAA,EACpC;AAAA,EACA,eAAe;AAAA,IACb,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ;AAAA,IACR,OAAO;AAAA,EAAA;AAEX,CAAC;"}

package/dist/esm/BaseRadio/RadioIcon.js

@@ -1,14 +1,9 @@
 import { jsx } from "react/jsx-runtime";
 import { useDefaultProps, createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
+import { SvgBase } from "../icons.js";
 const { useClasses } = createClasses("HvRadioIcon", {
   root: {
-    display: "inline-flex",
-    fill: "currentcolor",
-    width: "1em",
-    height: "1em",
-    flexShrink: 0,
-    fontSize: 16,
     borderRadius: theme.radii.full,
     border: `1px solid ${theme.colors.borderStrong}`,
     backgroundColor: theme.colors.bgContainer
@@ -37,7 +32,7 @@ const HvRadioIcon = (props) => {
   } = useDefaultProps("HvRadioIcon", props);
   const { classes, cx } = useClasses(classesProp, false);
   return /* @__PURE__ */ jsx(
-    "svg",
+    SvgBase,
     {
       viewBox: "0 0 16 16",
       className: cx(classes.root, className, {

package/dist/esm/BaseRadio/RadioIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioIcon.js","sources":["../../../src/BaseRadio/RadioIcon.tsx"],"sourcesContent":["import {\n  createClasses,\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport type { HvBaseRadioProps } from \"./BaseRadio\";\n\nconst { useClasses } = createClasses(\"HvRadioIcon\", {\n  root: {\n    display: \"inline-flex\",\n    fill: \"currentcolor\",\n    width: \"1em\",\n    height: \"1em\",\n    flexShrink: 0,\n\n    fontSize: 16,\n    borderRadius: theme.radii.full,\n    border: `1px solid ${theme.colors.borderStrong}`,\n    backgroundColor: theme.colors.bgContainer,\n  },\n  checked: {\n    borderColor: \"transparent\",\n    backgroundColor: theme.colors.primaryStrong,\n    color: theme.colors.bgContainer,\n  },\n  disabled: {\n    borderColor: theme.colors.textDisabled,\n    backgroundColor: theme.colors.bgDisabled,\n  },\n  checkedDisabled: {\n    borderColor: \"transparent\",\n    backgroundColor: theme.colors.borderDisabled,\n    color: theme.colors.bgDisabled,\n  },\n});\n\nexport type HvRadioIconClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioIconProps\n  extends Pick<HvBaseRadioProps, \"checked\" | \"disabled\" | \"className\"> {\n  classes?: HvRadioIconClasses;\n}\n\nexport const HvRadioIcon = (props: HvRadioIconProps) => {\n  const {\n    className,\n    classes: classesProp,\n    checked,\n    disabled,\n  } = useDefaultProps(\"HvRadioIcon\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      className={cx(classes.root, className, {\n        [classes.checked]: checked,\n        [classes.disabled]: disabled,\n        [classes.checkedDisabled]: checked && disabled,\n      })}\n    >\n      {checked && <circle cx=\"8\" cy=\"8\" r=\"4.5\" />}\n    </svg>\n  );\n};\n"],"names":[],"mappings":";;;AASA,MAAM,EAAE,WAAA,IAAe,cAAc,eAAe;AAAA,EAClD,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,UAAU;AAAA,IACV,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAC9C,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,aAAa;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EAAA;AAExB,CAAC;AASY,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,OAAO,GAAG;AAAA,QACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACpB,CAAC,QAAQ,eAAe,GAAG,WAAW;AAAA,MAAA,CACvC;AAAA,MAEA,UAAA,+BAAY,UAAO,EAAA,IAAG,KAAI,IAAG,KAAI,GAAE,MAAM,CAAA;AAAA,IAAA;AAAA,EAC5C;AAEJ;"}
+{"version":3,"file":"RadioIcon.js","sources":["../../../src/BaseRadio/RadioIcon.tsx"],"sourcesContent":["import {\n  createClasses,\n  ExtractNames,\n  useDefaultProps,\n} from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { SvgBase } from \"../icons\";\nimport type { HvBaseRadioProps } from \"./BaseRadio\";\n\nconst { useClasses } = createClasses(\"HvRadioIcon\", {\n  root: {\n    borderRadius: theme.radii.full,\n    border: `1px solid ${theme.colors.borderStrong}`,\n    backgroundColor: theme.colors.bgContainer,\n  },\n  checked: {\n    borderColor: \"transparent\",\n    backgroundColor: theme.colors.primaryStrong,\n    color: theme.colors.bgContainer,\n  },\n  disabled: {\n    borderColor: theme.colors.textDisabled,\n    backgroundColor: theme.colors.bgDisabled,\n  },\n  checkedDisabled: {\n    borderColor: \"transparent\",\n    backgroundColor: theme.colors.borderDisabled,\n    color: theme.colors.bgDisabled,\n  },\n});\n\nexport type HvRadioIconClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvRadioIconProps\n  extends Pick<HvBaseRadioProps, \"checked\" | \"disabled\" | \"className\"> {\n  classes?: HvRadioIconClasses;\n}\n\nexport const HvRadioIcon = (props: HvRadioIconProps) => {\n  const {\n    className,\n    classes: classesProp,\n    checked,\n    disabled,\n  } = useDefaultProps(\"HvRadioIcon\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n\n  return (\n    <SvgBase\n      viewBox=\"0 0 16 16\"\n      className={cx(classes.root, className, {\n        [classes.checked]: checked,\n        [classes.disabled]: disabled,\n        [classes.checkedDisabled]: checked && disabled,\n      })}\n    >\n      {checked && <circle cx=\"8\" cy=\"8\" r=\"4.5\" />}\n    </SvgBase>\n  );\n};\n"],"names":[],"mappings":";;;;AAUA,MAAM,EAAE,WAAA,IAAe,cAAc,eAAe;AAAA,EAClD,MAAM;AAAA,IACJ,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAC9C,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,aAAa;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EACtB;AAAA,EACA,UAAU;AAAA,IACR,aAAa,MAAM,OAAO;AAAA,IAC1B,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,iBAAiB;AAAA,IACf,aAAa;AAAA,IACb,iBAAiB,MAAM,OAAO;AAAA,IAC9B,OAAO,MAAM,OAAO;AAAA,EAAA;AAExB,CAAC;AASY,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAGnD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAW,GAAG,QAAQ,MAAM,WAAW;AAAA,QACrC,CAAC,QAAQ,OAAO,GAAG;AAAA,QACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACpB,CAAC,QAAQ,eAAe,GAAG,WAAW;AAAA,MAAA,CACvC;AAAA,MAEA,UAAA,+BAAY,UAAO,EAAA,IAAG,KAAI,IAAG,KAAI,GAAE,MAAM,CAAA;AAAA,IAAA;AAAA,EAC5C;AAEJ;"}

package/dist/esm/CheckBox/CheckBox.js

@@ -153,6 +153,7 @@ const HvCheckBox = forwardRef(
                 /* @__PURE__ */ jsx(
                   HvLabel,
                   {
+                    noWrap: true,
                     id: setId(elementId, "label"),
                     htmlFor: setId(elementId, "input"),
                     label,
@@ -169,7 +170,6 @@ const HvCheckBox = forwardRef(
               id: setId(elementId, "error"),
               disableAdornment: !hasLabel,
               hideText: !hasLabel,
-              disableBorder: true,
               children: validationMessage
             }
           )