@hitachivantara/uikit-react-core 5.90.0 → 5.91.0

package/dist/cjs/Accordion/Accordion.cjs

@@ -56,7 +56,7 @@ const HvAccordion = React.forwardRef(function HvAccordion2(props, ref) {
         onClick: handleClick,
         variant: labelVariant,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, { color: "inherit", rotate: !isOpen }),
+          /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropUpXS, { rotate: !isOpen }),
           label
         ]
       }

package/dist/cjs/Accordion/Accordion.styles.cjs

@@ -2,11 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAccordion", {
-  root: {
-    "& + root": {
-      paddingTop: 8
-    }
-  },
+  root: {},
   hidden: { height: 0, display: "none" },
   container: { paddingTop: 8, height: "auto" },
   label: {

package/dist/cjs/Avatar/Avatar.cjs

@@ -8,10 +8,16 @@ 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 sizes = require("../utils/sizes.cjs");
 const Avatar_styles = require("./Avatar.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiAvatar__default = /* @__PURE__ */ _interopDefault(MuiAvatar);
+const decreaseSizeMap = {
+  xl: "lg",
+  lg: "md",
+  md: "sm",
+  sm: "xs",
+  xs: "xs"
+};
 const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
   const {
     className,
@@ -24,7 +30,7 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
     color = "bgContainer",
     src,
     srcSet,
-    sizes: sizes$1,
+    sizes,
     alt,
     imgProps,
     status,
@@ -47,7 +53,7 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
         alt,
         src,
         srcSet,
-        sizes: sizes$1,
+        sizes,
         className: classes.img,
         ...imgProps
       }
@@ -61,7 +67,7 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
       uikitReactIcons.User,
       {
         color,
-        iconSize: sizes.decreaseSize(size),
+        size: decreaseSizeMap[size],
         className: classes.fallback
       }
     );
@@ -81,18 +87,19 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
     const statusColor = uikitStyles.getColor(status, "positive");
     statusInlineStyle.boxShadow = `inset 0px 0px 0px 2px ${statusColor}`;
   }
-  const badgeColor = uikitStyles.getColor(badge || "", "positive");
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: classes.container, ...others, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: cx(classes.status, classes[variant], classes[size]),
+      ref,
+      className: cx(classes.container, classes.status, classes[variant]),
       style: statusInlineStyle,
+      ...others,
       children: [
         badge && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: classes.badge,
-            style: { backgroundColor: badgeColor }
+            style: { backgroundColor: uikitStyles.getColor(badge, "positive") }
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -109,7 +116,7 @@ const HvAvatar = React.forwardRef(function HvAvatar2(props, ref) {
         )
       ]
     }
-  ) });
+  );
 });
 exports.avatarClasses = Avatar_styles.staticClasses;
 exports.HvAvatar = HvAvatar;

package/dist/cjs/Avatar/Avatar.styles.cjs

@@ -3,21 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const focusUtils = require("../utils/focusUtils.cjs");
-const EXTRA_SMALL = { container: "32px", avatar: "24px" };
-const SMALL = { container: "40px", avatar: "32px" };
-const MEDIUM = { container: "48px", avatar: "40px" };
-const LARGE = { container: "60px", avatar: "52px" };
-const EXTRA_LARGE = { container: "96px", avatar: "88px" };
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatar", {
   root: {
     fontSize: "1rem"
   },
-  container: {
-    "&:focus-visible": {
-      ...focusUtils.outlineStyles,
-      borderRadius: 0
-    }
-  },
   img: {
     width: "100%",
     height: "100%",
@@ -30,32 +19,24 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatar",
     textIndent: 1e4
   },
   fallback: {},
-  status: {
+  /** @deprecated use `classes.container` instead */
+  status: {},
+  container: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
     position: "relative",
-    "&$xs": { width: EXTRA_SMALL.container, height: EXTRA_SMALL.container },
-    "&$sm": { width: SMALL.container, height: SMALL.container },
-    "&$md": { width: MEDIUM.container, height: MEDIUM.container },
-    "&$lg": { width: LARGE.container, height: LARGE.container },
-    "&$xl": { width: EXTRA_LARGE.container, height: EXTRA_LARGE.container }
-  },
-  avatar: {
-    "&$xs": {
-      width: EXTRA_SMALL.avatar,
-      height: EXTRA_SMALL.avatar,
-      fontSize: "0.5rem"
-    },
-    "&$sm": { width: SMALL.avatar, height: SMALL.avatar, fontSize: "0.625rem" },
-    "&$md": { width: MEDIUM.avatar, height: MEDIUM.avatar, fontSize: "1rem" },
-    "&$lg": { width: LARGE.avatar, height: LARGE.avatar, fontSize: "1.5rem" },
-    "&$xl": {
-      width: EXTRA_LARGE.avatar,
-      height: EXTRA_LARGE.avatar,
-      fontSize: "2rem"
+    padding: uikitStyles.theme.space.xxs,
+    ":focus-visible": {
+      ...focusUtils.outlineStyles,
+      borderRadius: 0
     }
   },
+  xs: { width: 24, height: 24, fontSize: "0.5rem" },
+  sm: { width: 32, height: 32, fontSize: "0.625rem" },
+  md: { width: 40, height: 40, fontSize: "1rem" },
+  lg: { width: 52, height: 52, fontSize: "1.5rem" },
+  xl: { width: 88, height: 88, fontSize: "2rem" },
+  avatar: {},
   badge: {
     width: 8,
     height: 8,
@@ -65,11 +46,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatar",
     borderRadius: uikitStyles.theme.radii.full,
     zIndex: 1
   },
-  xs: {},
-  sm: {},
-  md: {},
-  lg: {},
-  xl: {},
   circular: { borderRadius: uikitStyles.theme.radii.full },
   square: {}
 });

package/dist/cjs/AvatarGroup/AvatarGroup.styles.cjs

@@ -11,62 +11,55 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAvatarGro
       border: `2px solid ${uikitStyles.theme.colors.bgPage}`,
       boxSizing: "content-box"
     },
-    "&$row": {
-      flexDirection: "row",
-      justifyContent: "flex-start",
+    [`& .${Avatar_styles.staticClasses.container}`]: {
+      padding: 2
+    }
+  },
+  row: {
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    [`& .${Avatar_styles.staticClasses.container}`]: {
+      "&:not(:first-of-type)": {
+        marginLeft: "var(--spacing)"
+      }
+    },
+    "&$toBack": {
+      flexDirection: "row-reverse",
+      justifyContent: "flex-end",
       [`& .${Avatar_styles.staticClasses.container}`]: {
-        "&:not(:first-of-type)": {
+        "&:last-of-type": {
+          marginLeft: 0
+        },
+        "&:not(:last-of-type)": {
           marginLeft: "var(--spacing)"
         }
-      },
-      "&$toBack": {
-        flexDirection: "row-reverse",
-        justifyContent: "flex-end",
-        [`& .${Avatar_styles.staticClasses.container}`]: {
-          "&:last-of-type": {
-            marginLeft: 0
-          },
-          "&:not(:last-of-type)": {
-            marginLeft: "var(--spacing)"
-          }
-        }
+      }
+    }
+  },
+  column: {
+    flexDirection: "column",
+    [`& .${Avatar_styles.staticClasses.container}`]: {
+      "&:not(:first-of-type)": {
+        marginTop: "var(--spacing)"
       }
     },
-    "&$column": {
-      flexDirection: "column",
+    "&$toBack": {
+      flexDirection: "column-reverse",
       [`& .${Avatar_styles.staticClasses.container}`]: {
-        "&:not(:first-of-type)": {
+        "&:last-of-type": {
+          marginTop: 0
+        },
+        "&:not(:last-of-type)": {
           marginTop: "var(--spacing)"
         }
-      },
-      "&$toBack": {
-        flexDirection: "column-reverse",
-        [`& .${Avatar_styles.staticClasses.container}`]: {
-          "&:last-of-type": {
-            marginTop: 0
-          },
-          "&:not(:last-of-type)": {
-            marginTop: "var(--spacing)"
-          }
-        }
-      }
-    },
-    [`&$highlight`]: {
-      [`& .${Avatar_styles.staticClasses.status}:hover`]: {
-        zIndex: uikitStyles.theme.zIndices.popover
       }
     }
   },
-  row: {
-    flexDirection: "row",
-    justifyContent: "flex-start",
-    "&$toBack": {
-      flexDirection: "row-reverse",
-      justifyContent: "flex-end"
+  highlight: {
+    [`& .${Avatar_styles.staticClasses.container}:hover`]: {
+      zIndex: uikitStyles.theme.zIndices.popover
     }
   },
-  column: {},
-  highlight: {},
   toBack: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/Badge/Badge.cjs

@@ -27,10 +27,11 @@ const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
   const children = childrenProp || icon || text && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: textVariant, children: text });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
     children,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx({ [classes.badgeContainer]: children }), children: /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         className: cx(classes.badgePosition, {
+          [classes.badgeContainer]: children,
           [classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),
           // TODO: remove unnecessary classes in v6 (hoist+rename `badge` to `badgePosition`)
           [classes.badge]: !!(count > 0 || renderedCountOrLabel),
@@ -41,7 +42,7 @@ const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
         }),
         children: renderedCountOrLabel
       }
-    ) })
+    )
   ] });
 });
 exports.badgeClasses = Badge_styles.staticClasses;

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

@@ -5,9 +5,12 @@ const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBadge", {
   root: { position: "relative", "&>*": { float: "left" } },
   /** class applied to the badge container when it has content */
-  badgeContainer: { width: 0 },
+  badgeContainer: {},
   /** class applied to the badge */
   badgePosition: {
+    // TODO: change to relative so that badges don't overflow into the siblings
+    position: "absolute",
+    left: "100%",
     ...uikitStyles.theme.typography.caption2,
     color: uikitStyles.theme.colors.textDimmed,
     borderRadius: uikitStyles.theme.radii.full,
@@ -32,7 +35,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBadge", {
   },
   showCount: {},
   showLabel: {},
-  badgeIcon: { position: "relative", top: "1px", left: "-7px" },
+  badgeIcon: { top: "1px", left: "calc(100% - 7px)" },
   badgeOneDigit: { padding: 0, width: "16px" }
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs

@@ -5,15 +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 = require("./icons.cjs");
+const icons$1 = require("./icons.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiCheckbox__default = /* @__PURE__ */ _interopDefault(MuiCheckbox);
-const getSelectorIcons = () => {
-  return {
-    checkbox: /* @__PURE__ */ jsxRuntime.jsx(icons.Box, {}),
-    checkboxPartial: /* @__PURE__ */ jsxRuntime.jsx(icons.Partial, {}),
-    checkboxChecked: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {})
-  };
+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 {
@@ -37,7 +35,6 @@ const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
   } = uikitReactUtils.useDefaultProps("HvBaseCheckBox", props);
   const { classes, cx } = BaseCheckBox_styles.useClasses(classesProp);
   const [focusVisible, setFocusVisible] = React.useState(false);
-  const icons2 = getSelectorIcons();
   const onChangeCallback = React.useCallback(
     (event) => {
       if (readOnly) {
@@ -79,9 +76,9 @@ const HvBaseCheckBox = React.forwardRef(function HvBaseCheckBox2(props, ref) {
         },
         className
       ),
-      icon: icons2.checkbox,
-      indeterminateIcon: icons2.checkboxPartial,
-      checkedIcon: icons2.checkboxChecked,
+      icon: icons.checkbox,
+      indeterminateIcon: icons.checkboxPartial,
+      checkedIcon: icons.checkboxChecked,
       disabled,
       required,
       readOnly,

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

@@ -12,14 +12,15 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
     borderRadius: uikitStyles.theme.radii.base,
     cursor: "pointer",
     "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.bgHover
+      backgroundColor: uikitStyles.theme.colors.bgHover,
+      borderRadius: uikitStyles.theme.radii.round
     },
     "& svg": {
       width: 16,
       height: 16,
       color: uikitStyles.theme.colors.bgContainer,
-      borderRadius: uikitStyles.theme.radii.none,
-      border: `1px solid ${uikitStyles.theme.colors.text}`
+      borderRadius: uikitStyles.theme.radii.base,
+      border: `1px solid ${uikitStyles.theme.colors.borderStrong}`
     }
   },
   disabled: {
@@ -28,8 +29,11 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
       pointerEvents: "initial",
       "& svg": {
         color: uikitStyles.theme.colors.bgDisabled,
-        borderColor: uikitStyles.theme.colors.textDisabled,
+        borderColor: uikitStyles.theme.colors.borderDisabled,
         backgroundColor: uikitStyles.theme.colors.bgDisabled
+      },
+      "&:hover": {
+        backgroundColor: "transparent"
       }
     }
   },
@@ -41,36 +45,33 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseCheck
   icon: {},
   checked: {
     "& svg": {
-      border: `1px solid ${uikitStyles.theme.colors.text}`,
-      backgroundColor: uikitStyles.theme.colors.text,
+      borderColor: "transparent",
+      backgroundColor: uikitStyles.theme.colors.primaryStrong,
       color: uikitStyles.theme.colors.bgContainer
     },
     "&$disabled": {
       "& svg": {
-        color: uikitStyles.theme.colors.textDisabled
+        color: uikitStyles.theme.colors.textDisabled,
+        borderColor: "currentcolor"
       }
     }
   },
   indeterminate: {
     "& svg": {
-      color: uikitStyles.theme.colors.text
+      color: uikitStyles.theme.colors.textSubtle
     },
     "&$disabled": {
       "& svg": {
-        color: uikitStyles.theme.colors.textDisabled
+        color: uikitStyles.theme.colors.textDisabled,
+        borderColor: "currentcolor"
       }
     }
   },
   semantic: {
-    "& svg": {
-      border: `1px solid ${uikitStyles.theme.colors.textDark}`,
-      color: uikitStyles.theme.colors.textLight,
-      backgroundColor: uikitStyles.theme.colors.textDark
-    },
     "&$indeterminate": {
       "& svg": {
-        color: uikitStyles.theme.colors.textDark,
-        backgroundColor: uikitStyles.theme.colors.textLight
+        backgroundColor: uikitStyles.theme.colors.bgContainer,
+        border: `1px solid ${uikitStyles.theme.colors.borderStrong}`
       }
     }
   }

package/dist/cjs/BaseDropdown/BaseDropdown.cjs

@@ -96,12 +96,13 @@ const BaseDropdown = React.forwardRef(function BaseDropdown2(props, ref) {
     "div",
     {
       id: setId.setId(id, "header"),
+      "data-popper-placement": popperPlacement,
       className: cx(classes.header, {
-        [classes.headerDisabled]: disabled,
-        [classes.headerReadOnly]: readOnly,
         [classes.headerOpen]: isOpen,
         [classes.headerOpenUp]: isOpen && popperPlacement?.includes("top"),
-        [classes.headerOpenDown]: isOpen && popperPlacement?.includes("bottom")
+        [classes.headerOpenDown]: isOpen && popperPlacement?.includes("bottom"),
+        [classes.headerReadOnly]: readOnly,
+        [classes.headerDisabled]: disabled
       }),
       role: ariaRole === "combobox" ? "textbox" : void 0,
       ...headerAriaLabels,

package/dist/cjs/BaseDropdown/BaseDropdown.styles.cjs

@@ -17,53 +17,54 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
     cursor: "pointer",
     userSelect: "none",
     position: "relative",
-    background: uikitStyles.theme.colors.bgContainer,
+    backgroundColor: uikitStyles.theme.colors.bgContainer,
     boxSizing: "border-box",
     border: `1px solid ${uikitStyles.theme.colors.text}`,
     borderRadius: uikitStyles.theme.radii.base,
-    "&:hover": {
-      border: `1px solid ${uikitStyles.theme.colors.primary}`
+    ":hover,:focus-visible": {
+      borderColor: uikitStyles.theme.colors.primary
     },
-    "&:focus": {
+    ":focus": {
       outline: "none"
     },
-    "&:focus-visible": {
-      ...focusUtils.outlineStyles,
-      border: `1px solid ${uikitStyles.theme.colors.primary}`
+    ":focus-visible": {
+      ...focusUtils.outlineStyles
     }
   },
   headerOpen: {
-    border: `1px solid ${uikitStyles.theme.colors.text}`,
-    "&:hover": {
-      border: `1px solid ${uikitStyles.theme.colors.text}`
+    "&,:hover": {
+      borderColor: uikitStyles.theme.colors.text
+    },
+    "&[data-popper-placement*='top']": {
+      borderRadius: `0px 0px ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
+    },
+    "&[data-popper-placement*='bottom']": {
+      borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`
     }
   },
-  headerOpenUp: {
-    borderRadius: `0px 0px ${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base}`
-  },
-  headerOpenDown: {
-    borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`
-  },
+  /** @deprecated use `[data-popper-placement*='top']` selector instead */
+  headerOpenUp: {},
+  /** @deprecated use `[data-popper-placement*='bottom']` selector instead */
+  headerOpenDown: {},
   headerDisabled: {
     cursor: "not-allowed",
     pointerEvents: "none",
     color: uikitStyles.theme.colors.textDisabled,
-    border: `1px solid currentcolor`,
-    background: uikitStyles.theme.colors.bgPage,
-    "&:hover": {
-      border: `1px solid currentcolor`
+    backgroundColor: uikitStyles.theme.colors.bgPage,
+    "&,:hover": {
+      borderColor: "currentcolor"
     }
   },
   headerReadOnly: {
     cursor: "not-allowed",
     pointerEvents: "none",
     color: uikitStyles.theme.colors.textSubtle,
-    border: `1px solid currentcolor`,
-    background: uikitStyles.theme.colors.bgPage,
+    borderColor: "currentcolor",
+    backgroundColor: uikitStyles.theme.colors.bgPage,
     userSelect: "text",
-    "&:focus-visible": {
+    ":focus-visible": {
       outline: "none",
-      border: `1px solid currentcolor`
+      borderColor: "currentcolor"
     }
   },
   arrowContainer: {
@@ -91,6 +92,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvBaseDropd
     padding: 0,
     border: `1px solid ${uikitStyles.theme.colors.text}`
   },
+  // TODO: change from classes to [data-popper-placement] selectors
   panelOpenedUp: {
     top: 1,
     borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0 0`

package/dist/cjs/BaseRadio/BaseRadio.cjs

@@ -5,14 +5,12 @@ 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 = require("./icons.cjs");
+const icons$1 = require("./icons.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiRadio__default = /* @__PURE__ */ _interopDefault(MuiRadio);
-const getSelectorIcons = () => {
-  return {
-    radio: /* @__PURE__ */ jsxRuntime.jsx(icons.Unselected, {}),
-    radioChecked: /* @__PURE__ */ jsxRuntime.jsx(icons.Selected, {})
-  };
+const icons = {
+  radio: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Unselected, {}),
+  radioChecked: /* @__PURE__ */ jsxRuntime.jsx(icons$1.Selected, {})
 };
 const HvBaseRadio = React.forwardRef(
   function HvBaseRadio2(props, ref) {
@@ -52,7 +50,6 @@ const HvBaseRadio = React.forwardRef(
       },
       [onBlur]
     );
-    const icons2 = getSelectorIcons();
     const onLocalChange = React.useCallback(
       (evt) => {
         if (readOnly) {
@@ -78,8 +75,8 @@ const HvBaseRadio = React.forwardRef(
           },
           className
         ),
-        icon: icon || icons2.radio,
-        checkedIcon: checkedIcon || icons2.radioChecked,
+        icon: icon || icons.radio,
+        checkedIcon: checkedIcon || icons.radioChecked,
         color: "default",
         disabled,
         required,
@@ -98,4 +95,3 @@ const HvBaseRadio = React.forwardRef(
 );
 exports.baseRadioClasses = BaseRadio_styles.staticClasses;
 exports.HvBaseRadio = HvBaseRadio;
-exports.getSelectorIcons = getSelectorIcons;

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

@@ -10,19 +10,17 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
     minWidth: 32,
     height: 32,
     cursor: "pointer",
-    "&:hover": {
-      backgroundColor: uikitStyles.theme.colors.bgHover,
-      borderRadius: uikitStyles.theme.radii.base
-    },
     "& svg": {
       width: 16,
       height: 16,
       borderRadius: uikitStyles.theme.radii.full,
-      borderWidth: 1,
-      borderColor: uikitStyles.theme.colors.text,
+      border: `1px solid ${uikitStyles.theme.colors.borderStrong}`,
       backgroundColor: uikitStyles.theme.colors.bgContainer
     },
-    borderRadius: 0
+    "&:hover": {
+      backgroundColor: uikitStyles.theme.colors.bgHover,
+      borderRadius: uikitStyles.theme.radii.round
+    }
   },
   disabled: {
     cursor: "not-allowed",
@@ -34,38 +32,26 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvBaseRadio
   },
   focusVisible: {
     "& svg": {
-      borderRadius: "8px",
+      borderRadius: uikitStyles.theme.radii.full,
       ...focusUtils.outlineStyles
     }
   },
   icon: {},
   checked: {
     "& svg": {
-      borderColor: uikitStyles.theme.colors.text,
-      backgroundColor: uikitStyles.theme.colors.text,
-      color: uikitStyles.theme.colors.bgPage
-    },
-    "&$semantic": {
-      "& svg": {
-        borderColor: uikitStyles.theme.colors.textDark,
-        backgroundColor: uikitStyles.theme.colors.textLight,
-        color: uikitStyles.theme.colors.textDark
-      }
+      borderColor: "transparent",
+      backgroundColor: uikitStyles.theme.colors.primaryStrong,
+      color: uikitStyles.theme.colors.bgContainer
     },
     "&$disabled": {
       "& svg": {
-        borderColor: uikitStyles.theme.colors.textDisabled,
-        backgroundColor: uikitStyles.theme.colors.textDisabled,
+        borderColor: "transparent",
+        backgroundColor: uikitStyles.theme.colors.borderDisabled,
         color: uikitStyles.theme.colors.bgDisabled
       }
     }
   },
-  semantic: {
-    "& svg": {
-      borderColor: uikitStyles.theme.colors.textDark,
-      backgroundColor: uikitStyles.theme.colors.textLight
-    }
-  }
+  semantic: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;