@hitachivantara/uikit-react-core 5.91.1 → 5.91.3

package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs

@@ -5,20 +5,13 @@ const React = require("react");
 const MuiCheckbox = require("@mui/material/Checkbox");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const BaseCheckBox_styles = require("./BaseCheckBox.styles.cjs");
-const icons$1 = require("./icons.cjs");
+const CheckBoxIcon = require("./CheckBoxIcon.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiCheckbox__default = /* @__PURE__ */ _interopDefault(MuiCheckbox);
-const icons = {
-  checkbox: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Box, {}),
-  checkboxPartial: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Partial, {}),
-  checkboxChecked: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Check, {})
-};
 const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
   const {
-    id,
     classes: classesProp,
     className,
-    name,
     inputProps,
     onChange,
     onFocusVisible,
@@ -58,27 +51,26 @@ const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
     },
     [onFocusVisible]
   );
+  const params = { indeterminate, disabled, semantic };
   return /* @__PURE__ */ jsxRuntime.jsx(
     MuiCheckbox__default.default,
     {
       ref,
-      id,
-      name,
       value,
       className: cx(
         classes.root,
         {
-          [classes.disabled]: disabled,
           [classes.focusVisible]: focusVisible,
           [classes.checked]: checked,
           [classes.indeterminate]: indeterminate,
-          [classes.semantic]: semantic
+          [classes.semantic]: semantic,
+          [classes.disabled]: disabled
         },
         className
       ),
-      icon: icons.checkbox,
-      indeterminateIcon: icons.checkboxPartial,
-      checkedIcon: icons.checkboxChecked,
+      icon: /* @__PURE__ */ jsxRuntime.jsx(CheckBoxIcon.HvCheckBoxIcon, { ...params }),
+      indeterminateIcon: /* @__PURE__ */ jsxRuntime.jsx(CheckBoxIcon.HvCheckBoxIcon, { variant: "indeterminate", ...params }),
+      checkedIcon: /* @__PURE__ */ jsxRuntime.jsx(CheckBoxIcon.HvCheckBoxIcon, { variant: "checked", ...params }),
       disabled,
       required,
       readOnly,

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

@@ -9,33 +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
-    },
-    "& svg": {
-      width: 16,
-      height: 16,
-      color: uikitStyles.theme.colors.bgContainer,
-      borderRadius: uikitStyles.theme.radii.base,
-      border: `1px solid ${uikitStyles.theme.colors.borderStrong}`
+    ":hover": {
+      backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
   disabled: {
-    "&$root": {
-      cursor: "not-allowed",
-      pointerEvents: "initial",
-      "& svg": {
-        color: uikitStyles.theme.colors.bgDisabled,
-        borderColor: uikitStyles.theme.colors.borderDisabled,
-        backgroundColor: uikitStyles.theme.colors.bgDisabled
-      },
-      "&:hover": {
-        backgroundColor: "transparent"
-      }
-    }
+    cursor: "not-allowed",
+    pointerEvents: "initial"
   },
   focusVisible: {
     "& svg": {
@@ -43,38 +25,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
     }
   },
   icon: {},
-  checked: {
-    "& svg": {
-      borderColor: "transparent",
-      backgroundColor: uikitStyles.theme.colors.primaryStrong,
-      color: uikitStyles.theme.colors.bgContainer
-    },
-    "&$disabled": {
-      "& svg": {
-        color: uikitStyles.theme.colors.textDisabled,
-        borderColor: "currentcolor"
-      }
-    }
-  },
-  indeterminate: {
-    "& svg": {
-      color: uikitStyles.theme.colors.textSubtle
-    },
-    "&$disabled": {
-      "& svg": {
-        color: uikitStyles.theme.colors.textDisabled,
-        borderColor: "currentcolor"
-      }
-    }
-  },
-  semantic: {
-    "&$indeterminate": {
-      "& svg": {
-        backgroundColor: uikitStyles.theme.colors.bgContainer,
-        border: `1px solid ${uikitStyles.theme.colors.borderStrong}`
-      }
-    }
-  }
+  checked: {},
+  indeterminate: {},
+  semantic: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/BaseCheckBox/CheckBoxIcon.cjs

@@ -0,0 +1,74 @@
+"use strict";
+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 uikitStyles = require("@hitachivantara/uikit-styles");
+const icons = require("../icons.cjs");
+const { useClasses } = uikitReactUtils.createClasses("HvCheckBoxIcon", {
+  root: {
+    color: uikitStyles.theme.colors.bgContainer,
+    borderRadius: uikitStyles.theme.radii.base,
+    border: `1px solid ${uikitStyles.theme.colors.borderStrong}`
+  },
+  checked: {
+    borderColor: "transparent",
+    backgroundColor: uikitStyles.theme.colors.primaryStrong,
+    color: uikitStyles.theme.colors.bgContainer
+  },
+  indeterminate: {
+    color: uikitStyles.theme.colors.textSubtle,
+    backgroundColor: uikitStyles.theme.colors.bgContainer
+  },
+  semantic: {
+    "&[data-variant=indeterminate]": {
+      backgroundColor: uikitStyles.theme.colors.bgContainer,
+      borderColor: uikitStyles.theme.colors.borderStrong
+    }
+  },
+  disabled: {
+    color: uikitStyles.theme.colors.bgDisabled,
+    borderColor: uikitStyles.theme.colors.borderDisabled,
+    backgroundColor: uikitStyles.theme.colors.bgDisabled,
+    "&[data-variant=checked],&[data-variant=indeterminate]": {
+      color: uikitStyles.theme.colors.textDisabled,
+      borderColor: "currentcolor"
+    }
+  }
+});
+const HvCheckBoxIcon = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    variant,
+    disabled,
+    semantic
+  } = uikitReactUtils.useDefaultProps("HvCheckBoxIcon", props);
+  const { classes, cx } = useClasses(classesProp, false);
+  const d = React.useMemo(() => {
+    switch (variant) {
+      case "checked":
+        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";
+      case "indeterminate":
+        return "m3,8l8,0l0,-2l-8,0l0,2z";
+      case "default":
+      default:
+        return "m0,0l16,0l0,16l-16,0l0,-16z";
+    }
+  }, [variant]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    icons.SvgBase,
+    {
+      viewBox: "0 0 14 14",
+      "data-variant": variant,
+      className: cx(classes.root, className, {
+        [classes.checked]: variant === "checked",
+        [classes.indeterminate]: variant === "indeterminate",
+        [classes.semantic]: semantic,
+        [classes.disabled]: disabled
+      }),
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d })
+    }
+  );
+};
+exports.HvCheckBoxIcon = HvCheckBoxIcon;

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

@@ -6,10 +6,6 @@ const focusUtils = require("../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseInput", {
   root: {
     // #region `input` style reset
-    "input:-webkit-autofill": {
-      WebkitBoxShadow: `0 0 0px 1000px ${uikitStyles.theme.colors.textDimmed} inset`,
-      WebkitTextFillColor: uikitStyles.theme.colors.text
-    },
     // Clears number input up/down arrows in Chrome and Firefox
     "input[type=number]": {
       MozAppearance: "textfield",
@@ -30,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",
@@ -38,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/BaseRadio.cjs

@@ -5,33 +5,25 @@ const React = require("react");
 const MuiRadio = require("@mui/material/Radio");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const BaseRadio_styles = require("./BaseRadio.styles.cjs");
-const icons$1 = require("./icons.cjs");
+const RadioIcon = require("./RadioIcon.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiRadio__default = /* @__PURE__ */ _interopDefault(MuiRadio);
-const icons = {
-  radio: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Unselected, {}),
-  radioChecked: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Selected, {})
-};
 const HvBaseRadio = React.forwardRef(
   function HvBaseRadio2(props, ref) {
     const {
       classes: classesProp,
       className,
-      id,
-      name,
       value = "on",
-      required = false,
-      readOnly = false,
-      disabled = false,
+      required,
+      readOnly,
+      disabled,
       checked,
       defaultChecked,
       onChange,
-      semantic = false,
+      semantic,
       inputProps,
       onFocusVisible,
       onBlur,
-      icon,
-      checkedIcon,
       ...others
     } = uikitReactUtils.useDefaultProps("HvBaseRadio", props);
     const { classes, cx } = BaseRadio_styles.useClasses(classesProp);
@@ -63,8 +55,6 @@ const HvBaseRadio = React.forwardRef(
       MuiRadio__default.default,
       {
         ref,
-        id,
-        name,
         className: cx(
           classes.root,
           {
@@ -75,8 +65,8 @@ const HvBaseRadio = React.forwardRef(
           },
           className
         ),
-        icon: icon || icons.radio,
-        checkedIcon: checkedIcon || icons.radioChecked,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon.HvRadioIcon, { disabled }),
+        checkedIcon: /* @__PURE__ */ jsxRuntime.jsx(RadioIcon.HvRadioIcon, { checked: true, disabled }),
         color: "default",
         disabled,
         required,

package/dist/cjs/BaseRadio/BaseRadio.styles.cjs

@@ -11,24 +11,13 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
     height: 32,
     cursor: "pointer",
     borderRadius: "inherit",
-    "& svg": {
-      width: 16,
-      height: 16,
-      borderRadius: uikitStyles.theme.radii.full,
-      border: `1px solid ${uikitStyles.theme.colors.borderStrong}`,
-      backgroundColor: uikitStyles.theme.colors.bgContainer
-    },
     ":hover": {
       backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
   disabled: {
     cursor: "not-allowed",
-    pointerEvents: "initial",
-    "& svg": {
-      borderColor: uikitStyles.theme.colors.textDisabled,
-      backgroundColor: uikitStyles.theme.colors.bgDisabled
-    }
+    pointerEvents: "initial"
   },
   focusVisible: {
     "& svg": {
@@ -37,20 +26,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
     }
   },
   icon: {},
-  checked: {
-    "& svg": {
-      borderColor: "transparent",
-      backgroundColor: uikitStyles.theme.colors.primaryStrong,
-      color: uikitStyles.theme.colors.bgContainer
-    },
-    "&$disabled": {
-      "& svg": {
-        borderColor: "transparent",
-        backgroundColor: uikitStyles.theme.colors.borderDisabled,
-        color: uikitStyles.theme.colors.bgDisabled
-      }
-    }
-  },
+  checked: {},
   semantic: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/BaseRadio/RadioIcon.cjs

@@ -0,0 +1,49 @@
+"use strict";
+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: {
+    borderRadius: uikitStyles.theme.radii.full,
+    border: `1px solid ${uikitStyles.theme.colors.borderStrong}`,
+    backgroundColor: uikitStyles.theme.colors.bgContainer
+  },
+  checked: {
+    borderColor: "transparent",
+    backgroundColor: uikitStyles.theme.colors.primaryStrong,
+    color: uikitStyles.theme.colors.bgContainer
+  },
+  disabled: {
+    borderColor: uikitStyles.theme.colors.textDisabled,
+    backgroundColor: uikitStyles.theme.colors.bgDisabled
+  },
+  checkedDisabled: {
+    borderColor: "transparent",
+    backgroundColor: uikitStyles.theme.colors.borderDisabled,
+    color: uikitStyles.theme.colors.bgDisabled
+  }
+});
+const HvRadioIcon = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    checked,
+    disabled
+  } = uikitReactUtils.useDefaultProps("HvRadioIcon", props);
+  const { classes, cx } = useClasses(classesProp, false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    icons.SvgBase,
+    {
+      viewBox: "0 0 16 16",
+      className: cx(classes.root, className, {
+        [classes.checked]: checked,
+        [classes.disabled]: disabled,
+        [classes.checkedDisabled]: checked && disabled
+      }),
+      children: checked && /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "4.5" })
+    }
+  );
+};
+exports.HvRadioIcon = HvRadioIcon;

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/Dropdown.cjs

@@ -101,7 +101,7 @@ const HvDropdown = generic.fixedForwardRef(function HvDropdown2(props, ref) {
       utils.getSelectionLabel(labels, placeholder, multiSelect, values)
     );
   }, [labels, multiSelect, placeholder, values]);
-  const dropdownHeaderRef = React.useRef();
+  const dropdownHeaderRef = React.useRef(void 0);
   const {
     ref: refProp,
     dropdownHeaderRef: dropdownHeaderRefProp,

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/InlineEditor/InlineEditor.cjs

@@ -35,7 +35,7 @@ const HvInlineEditor = generic.fixedForwardRef(function HvInlineEditor2(props, r
   const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
   const [editMode, setEditMode] = React.useState(false);
   const [cachedValue, setCachedValue] = React.useState(value);
-  const inputRef = React.useRef();
+  const inputRef = React.useRef(void 0);
   const { activeTheme } = uikitReactUtils.useTheme();
   const [isOverflowing, setIsOverflowing] = React.useState(false);
   const typographyStyles = activeTheme?.typography[variant] || {};

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: {}
 });