@hitachivantara/uikit-react-core 5.91.1 → 5.91.3

package/dist/cjs/Tag/Tag.cjs

@@ -5,6 +5,7 @@ const React = require("react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
+const CheckBoxIcon = require("../BaseCheckBox/CheckBoxIcon.cjs");
 const useControlled = require("../hooks/useControlled.cjs");
 const keyboardUtils = require("../utils/keyboardUtils.cjs");
 const Tag_styles = require("./Tag.styles.cjs");
@@ -51,7 +52,6 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
     uikitStyles.theme.palette[color]?.[600] || uikitStyles.getColor(color)
   );
   const isClickable = !!(onClick || onDelete || selectable);
-  const CheckboxIcon = isSelected ? uikitReactIcons.CheckboxCheck : uikitReactIcons.Checkbox;
   const deleteIcon = deleteIconProp && React.isValidElement(deleteIconProp) ? React.cloneElement(deleteIconProp, {
     className: cx(classes.deleteIcon, {
       [classes.disabledDeleteIcon]: disabled
@@ -102,11 +102,11 @@ const HvTag = React.forwardRef(function HvTag2(props, ref) {
       children: [
         iconProp,
         selectable && showSelectIcon && /* @__PURE__ */ jsxRuntime.jsx(
-          CheckboxIcon,
+          CheckBoxIcon.HvCheckBoxIcon,
           {
             className: classes.icon,
-            color: disabled && ["bgPageSecondary", "textDisabled"] || void 0,
-            size: "XS"
+            variant: isSelected ? "checked" : "default",
+            disabled
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -77,8 +77,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTag", {
   },
   // TODO: remove in favour of `hasIcon` once it's no longer needed
   icon: {
-    width: 12,
-    height: 12
+    fontSize: 12
   },
   /** @deprecated use `root` instead */
   chipRoot: {},

package/dist/cjs/TagsInput/TagsInput.cjs

@@ -78,7 +78,7 @@ const HvTagsInput = React.forwardRef(
     const inputRef = React.useRef(null);
     const containerRef = React.useRef(null);
     const skipReset = React.useRef(false);
-    const blurTimeout = React.useRef();
+    const blurTimeout = React.useRef(null);
     const focusUtils = useFocus.useFocus({ containerRef });
     const forkedContainerRef = utils.useForkRef(ref, containerRef);
     const hasCounter = maxTagsQuantity != null && !hideCounter;

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/TreeView/internals/hooks/useInstanceEventHandler.cjs

@@ -33,7 +33,7 @@ function createUseInstanceEventHandler(registryContainer2) {
       new ObjectToBeRetainedByReact()
     );
     const subscription = React__namespace.useRef(null);
-    const handlerRef = React__namespace.useRef();
+    const handlerRef = React__namespace.useRef(void 0);
     handlerRef.current = handler;
     const cleanupTokenRef = React__namespace.useRef(null);
     if (!subscription.current && handlerRef.current) {

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/AppSwitcher/Action/Action.js.map

@@ -1 +1 @@
-{"version":3,"file":"Action.js","sources":["../../../../src/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = getColor(\n    disabled ? \"textDisabled\" : application?.color,\n    \"text\",\n  );\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback],\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id);\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className,\n      )}\n    >\n      <HvTypography\n        component=\"button\"\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n        aria-label={name}\n        {...(description && { \"aria-describedby\": descriptionElementId })}\n        {...(isLink && { component: \"a\", href: url, target: target || \"_top\" })}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <HvOverflowTooltip\n          paragraphOverflow\n          className={classes.title}\n          placement=\"top-start\"\n          data={name}\n          classes={{\n            tooltipAnchorParagraph: classes.titleAnchor,\n          }}\n        />\n\n        {description && (\n          <HvTooltip title={description}>\n            <Info className={classes.iconInfo} id={descriptionElementId} />\n          </HvTooltip>\n        )}\n      </HvTypography>\n    </HvListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAuDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,qBAAqB,MAAM;AAC7B,MAAgC;AAC9B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,MAAM,aAAa,UAAU,aAAa,SAAS,KAAK,WAC9D;AAEF,QAAM,QAAQ;AAAA,IACZ,WAAW,iBAAiB,aAAa;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,QAAM,wBAAwB,MAAM;AAClC,QAAI,aAAa;AACR,aAAA;AAAA,IAAA;AAGT,QAAI,WAAW,cAAc;AAEzB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,KAAK;AAAA,UACL,SAAS,MAAM;AACb,4BAAgB,KAAK;AAAA,UACvB;AAAA,UACA,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIE,UAAA,cAAc,KAAK,MAAM,GAAG;AAClC,UAAM,WACJ,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,KAC5B,YAAY,CAAC,IAAI,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,IAAI;AAGnD,WAAA,oBAAC,UAAS,EAAA,MAAK,MAAK,iBAAiB,OAAO,SAAQ,UAAS,eAAW,MACrE,UACH,SAAA,CAAA;AAAA,EAEJ;AAEM,QAAA,aAAa,mBAAmB,WAAW;AAKjD,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA4B;AAC3B,UAAI,UAAU;AACZ,cAAM,eAAe;AACrB;AAAA,MAAA;AAGF,wBAAkB,OAAO,EAAE,GAAG,aAAa,YAAY;AAAA,IACzD;AAAA,IACA,CAAC,aAAa,UAAU,YAAY,eAAe;AAAA,EACrD;AAEA,QAAM,SAAS,OAAO;AAChB,QAAA,uBAAuB,YAAY,EAAE;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QAC/D;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,QAAQ;AAAA,UACnB,SAAS;AAAA,UACT,OAAO,EAAE,aAAa,MAAM;AAAA,UAC5B,cAAY;AAAA,UACX,GAAI,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,UAC9D,GAAI,UAAU,EAAE,WAAW,KAAK,MAAM,KAAK,QAAQ,UAAU,OAAO;AAAA,UAErE,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MAAO,mCAAwB;AAAA,YAEvD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,mBAAiB;AAAA,gBACjB,WAAW,QAAQ;AAAA,gBACnB,WAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,kBACP,wBAAwB,QAAQ;AAAA,gBAAA;AAAA,cAClC;AAAA,YACF;AAAA,YAEC,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAA,oBAAC,MAAK,EAAA,WAAW,QAAQ,UAAU,IAAI,qBAAA,CAAsB,EAC/D,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"Action.js","sources":["../../../../src/AppSwitcher/Action/Action.tsx"],"sourcesContent":["import { useCallback, useState } from \"react\";\nimport { Info } from \"@hitachivantara/uikit-react-icons\";\nimport { type ExtractNames } from \"@hitachivantara/uikit-react-utils\";\nimport { getColor, HvColorAny } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../../Avatar\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvTooltip } from \"../../Tooltip\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { HvTypography } from \"../../Typography\";\nimport { staticClasses, useClasses } from \"./Action.styles\";\n\nexport { staticClasses as appSwitcherActionClasses };\n\nexport type HvAppSwitcherActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAppSwitcherActionApplication {\n  /** Id of the application. */\n  id?: string;\n  /** Name of the application, this is the value that will be displayed on the component. */\n  name: string;\n  /** URL with the icon location to be used to represent the application. iconUrl will only be used if no iconElement is provided. */\n  iconUrl?: string;\n  /** Element to be added as the icon representing the application. The iconElement will be the primary option to be displayed. */\n  iconElement?: React.ReactElement<any>;\n  /** Small description of the application. */\n  description?: string;\n  /**  URL where the application is accessible. */\n  url?: string;\n  /** Defines if the application should be opened in the same tab or in a new one. */\n  target?: \"_top\" | \"_blank\";\n  /** If true, the item will be disabled. */\n  disabled?: boolean;\n  /** True when the application is selected, false otherwise. */\n  isSelected?: boolean;\n  /** The color of the application. */\n  color?: HvColorAny;\n}\n\nexport interface HvAppSwitcherActionProps extends HvBaseProps {\n  /** The application data to be used to render the Action object. */\n  application: HvAppSwitcherActionApplication;\n  /** Callback triggered when the action is clicked. */\n  onClickCallback?: (\n    event: React.MouseEvent,\n    application: HvAppSwitcherActionApplication,\n  ) => void;\n  /** Must return a boolean stating if the action element is selected or not. */\n  isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAppSwitcherActionClasses;\n}\n\nexport const HvAppSwitcherAction = ({\n  id,\n  className,\n  classes: classesProp,\n  application,\n  onClickCallback = () => {},\n  isSelectedCallback = () => false,\n}: HvAppSwitcherActionProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { name, description, disabled, iconElement, iconUrl, url, target } =\n    application;\n\n  const color = getColor(\n    disabled ? \"textDisabled\" : application?.color,\n    \"text\",\n  );\n\n  const [validIconUrl, setValidIconUrl] = useState<boolean>(true);\n\n  const renderApplicationIcon = () => {\n    if (iconElement) {\n      return iconElement;\n    }\n\n    if (iconUrl && validIconUrl) {\n      return (\n        <img\n          className={classes.iconUrl}\n          src={iconUrl}\n          onError={() => {\n            setValidIconUrl(false);\n          }}\n          alt={description}\n        />\n      );\n    }\n\n    const brokenTitle = name.split(\" \");\n    const initials =\n      brokenTitle[0].substring(0, 1) +\n      (brokenTitle[1] ? brokenTitle[1].substring(0, 1) : \"\");\n\n    return (\n      <HvAvatar size=\"sm\" backgroundColor={color} variant=\"square\" aria-hidden>\n        {initials}\n      </HvAvatar>\n    );\n  };\n\n  const isSelected = isSelectedCallback(application);\n\n  /**\n   * Handles the onClick event and triggers the appropriate callback if it exists.\n   */\n  const handleOnClick = useCallback(\n    (event: React.MouseEvent) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClickCallback?.(event, { ...application, isSelected });\n    },\n    [application, disabled, isSelected, onClickCallback],\n  );\n\n  const isLink = url != null;\n  const descriptionElementId = useUniqueId(id);\n\n  return (\n    <HvListItem\n      id={id}\n      interactive\n      tabIndex={0}\n      selected={isSelected}\n      disabled={disabled}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.selected]: isSelected },\n        className,\n      )}\n    >\n      <HvTypography\n        component=\"button\"\n        className={classes.typography}\n        onClick={handleOnClick}\n        style={{ borderColor: color }}\n        aria-label={name}\n        {...(description && { \"aria-describedby\": descriptionElementId })}\n        {...(isLink && { component: \"a\", href: url, target: target || \"_top\" })}\n      >\n        <div className={classes.icon}>{renderApplicationIcon()}</div>\n\n        <HvOverflowTooltip\n          paragraphOverflow\n          className={classes.title}\n          placement=\"top-start\"\n          data={name}\n          classes={{\n            tooltipAnchorParagraph: classes.titleAnchor,\n          }}\n        />\n\n        {description && (\n          <HvTooltip title={description}>\n            <Info className={classes.iconInfo} id={descriptionElementId} />\n          </HvTooltip>\n        )}\n      </HvTypography>\n    </HvListItem>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAuDO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,kBAAkB,MAAM;AAAA,EAAC;AAAA,EACzB,qBAAqB,MAAM;AAC7B,MAAgC;AAC9B,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAExC,QAAA,EAAE,MAAM,aAAa,UAAU,aAAa,SAAS,KAAK,WAC9D;AAEF,QAAM,QAAQ;AAAA,IACZ,WAAW,iBAAiB,aAAa;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,IAAI;AAE9D,QAAM,wBAAwB,MAAM;AAClC,QAAI,aAAa;AACR,aAAA;AAAA,IAAA;AAGT,QAAI,WAAW,cAAc;AAEzB,aAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,KAAK;AAAA,UACL,SAAS,MAAM;AACb,4BAAgB,KAAK;AAAA,UACvB;AAAA,UACA,KAAK;AAAA,QAAA;AAAA,MACP;AAAA,IAAA;AAIE,UAAA,cAAc,KAAK,MAAM,GAAG;AAClC,UAAM,WACJ,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,KAC5B,YAAY,CAAC,IAAI,YAAY,CAAC,EAAE,UAAU,GAAG,CAAC,IAAI;AAGnD,WAAA,oBAAC,UAAS,EAAA,MAAK,MAAK,iBAAiB,OAAO,SAAQ,UAAS,eAAW,MACrE,UACH,SAAA,CAAA;AAAA,EAEJ;AAEM,QAAA,aAAa,mBAAmB,WAAW;AAKjD,QAAM,gBAAgB;AAAA,IACpB,CAAC,UAA4B;AAC3B,UAAI,UAAU;AACZ,cAAM,eAAe;AACrB;AAAA,MAAA;AAGF,wBAAkB,OAAO,EAAE,GAAG,aAAa,YAAY;AAAA,IACzD;AAAA,IACA,CAAC,aAAa,UAAU,YAAY,eAAe;AAAA,EACrD;AAEA,QAAM,SAAS,OAAO;AAChB,QAAA,uBAAuB,YAAY,EAAE;AAGzC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX,UAAU;AAAA,MACV,UAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,QAAQ,GAAG,WAAW;AAAA,QAC/D;AAAA,MACF;AAAA,MAEA,UAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,WAAW,QAAQ;AAAA,UACnB,SAAS;AAAA,UACT,OAAO,EAAE,aAAa,MAAM;AAAA,UAC5B,cAAY;AAAA,UACX,GAAI,eAAe,EAAE,oBAAoB,qBAAqB;AAAA,UAC9D,GAAI,UAAU,EAAE,WAAW,KAAK,MAAM,KAAK,QAAQ,UAAU,OAAO;AAAA,UAErE,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,MAAO,mCAAwB;AAAA,YAEvD;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,mBAAiB;AAAA,gBACjB,WAAW,QAAQ;AAAA,gBACnB,WAAU;AAAA,gBACV,MAAM;AAAA,gBACN,SAAS;AAAA,kBACP,wBAAwB,QAAQ;AAAA,gBAAA;AAAA,cAClC;AAAA,YACF;AAAA,YAEC,eACC,oBAAC,WAAU,EAAA,OAAO,aAChB,UAAA,oBAAC,MAAK,EAAA,WAAW,QAAQ,UAAU,IAAI,qBAAA,CAAsB,EAC/D,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF;AAEJ;"}

package/dist/esm/BaseCheckBox/BaseCheckBox.js

@@ -4,18 +4,11 @@ import MuiCheckbox from "@mui/material/Checkbox";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BaseCheckBox.styles.js";
 import { staticClasses } from "./BaseCheckBox.styles.js";
-import { Check, Partial, Box } from "./icons.js";
-const icons = {
-  checkbox: /* @__PURE__ */ jsx(Box, {}),
-  checkboxPartial: /* @__PURE__ */ jsx(Partial, {}),
-  checkboxChecked: /* @__PURE__ */ jsx(Check, {})
-};
+import { HvCheckBoxIcon } from "./CheckBoxIcon.js";
 const HvBaseCheckBox = forwardRef(function HvBaseCheckBox2(props, ref) {
   const {
-    id,
     classes: classesProp,
     className,
-    name,
     inputProps,
     onChange,
     onFocusVisible,
@@ -55,27 +48,26 @@ const HvBaseCheckBox = forwardRef(function HvBaseCheckBox2(props, ref) {
     },
     [onFocusVisible]
   );
+  const params = { indeterminate, disabled, semantic };
   return /* @__PURE__ */ jsx(
     MuiCheckbox,
     {
       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__ */ jsx(HvCheckBoxIcon, { ...params }),
+      indeterminateIcon: /* @__PURE__ */ jsx(HvCheckBoxIcon, { variant: "indeterminate", ...params }),
+      checkedIcon: /* @__PURE__ */ jsx(HvCheckBoxIcon, { variant: "checked", ...params }),
       disabled,
       required,
       readOnly,

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

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\nimport { Box, Check, Partial } from \"./icons\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\"> {\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst icons = {\n  checkbox: <Box />,\n  checkboxPartial: <Partial />,\n  checkboxChecked: <Check />,\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = forwardRef<\n  HTMLButtonElement,\n  HvBaseCheckBoxProps\n>(function HvBaseCheckBox(props, ref) {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value],\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur],\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible],\n  );\n\n  return (\n    <MuiCheckbox\n      ref={ref}\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n          [classes.focusVisible]: focusVisible,\n          [classes.checked]: checked,\n          [classes.indeterminate]: indeterminate,\n          [classes.semantic]: semantic,\n        },\n        className,\n      )}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      {...others}\n    />\n  );\n});\n"],"names":["HvBaseCheckBox"],"mappings":";;;;;;;AAwFA,MAAM,QAAQ;AAAA,EACZ,8BAAW,KAAI,EAAA;AAAA,EACf,qCAAkB,SAAQ,EAAA;AAAA,EAC1B,qCAAkB,OAAM,CAAA,CAAA;AAC1B;AAQO,MAAM,iBAAiB,WAG5B,SAASA,gBAAe,OAAO,KAAK;AAC9B,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MAAA;AAGF,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAC5B;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,UACnB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MACzB,aAAa,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,OAAM;AAAA,MACL,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}
+{"version":3,"file":"BaseCheckBox.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\nimport { HvCheckBoxIcon } from \"./CheckBoxIcon\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\"> {\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = forwardRef<\n  HTMLButtonElement,\n  HvBaseCheckBoxProps\n>(function HvBaseCheckBox(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value],\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur],\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible],\n  );\n\n  const params = { indeterminate, disabled, semantic };\n\n  return (\n    <MuiCheckbox\n      ref={ref}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.focusVisible]: focusVisible,\n          [classes.checked]: checked,\n          [classes.indeterminate]: indeterminate,\n          [classes.semantic]: semantic,\n          [classes.disabled]: disabled,\n        },\n        className,\n      )}\n      icon={<HvCheckBoxIcon {...params} />}\n      indeterminateIcon={<HvCheckBoxIcon variant=\"indeterminate\" {...params} />}\n      checkedIcon={<HvCheckBoxIcon variant=\"checked\" {...params} />}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      {...others}\n    />\n  );\n});\n"],"names":["HvBaseCheckBox"],"mappings":";;;;;;;AA8FO,MAAM,iBAAiB,WAG5B,SAASA,gBAAe,OAAO,KAAK;AAC9B,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MAAA;AAGF,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAC5B;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,SAAS,EAAE,eAAe,UAAU,SAAS;AAGjD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,UACnB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,MAAM,oBAAC,gBAAgB,EAAA,GAAG,OAAQ,CAAA;AAAA,MAClC,mBAAoB,oBAAA,gBAAA,EAAe,SAAQ,iBAAiB,GAAG,QAAQ;AAAA,MACvE,aAAc,oBAAA,gBAAA,EAAe,SAAQ,WAAW,GAAG,QAAQ;AAAA,MAC3D;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,OAAM;AAAA,MACL,GAAG;AAAA,IAAA;AAAA,EACN;AAEJ,CAAC;"}

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

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

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    \"& svg\": {\n      width: 16,\n      height: 16,\n      color: theme.colors.bgContainer,\n      borderRadius: theme.radii.base,\n      border: `1px solid ${theme.colors.borderStrong}`,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n      \"& svg\": {\n        color: theme.colors.bgDisabled,\n        borderColor: theme.colors.borderDisabled,\n        backgroundColor: theme.colors.bgDisabled,\n      },\n      \"&:hover\": {\n        backgroundColor: \"transparent\",\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      borderColor: \"transparent\",\n      backgroundColor: theme.colors.primaryStrong,\n      color: theme.colors.bgContainer,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        color: theme.colors.textDisabled,\n        borderColor: \"currentcolor\",\n      },\n    },\n  },\n  indeterminate: {\n    \"& svg\": {\n      color: theme.colors.textSubtle,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        color: theme.colors.textDisabled,\n        borderColor: \"currentcolor\",\n      },\n    },\n  },\n  semantic: {\n    \"&$indeterminate\": {\n      \"& svg\": {\n        backgroundColor: theme.colors.bgContainer,\n        border: `1px solid ${theme.colors.borderStrong}`,\n      },\n    },\n  },\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,IAC5B;AAAA,IAEA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO,MAAM,OAAO;AAAA,MACpB,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,IAAA;AAAA,EAElD;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,aAAa,MAAM,OAAO;AAAA,QAC1B,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,MACA,WAAW;AAAA,QACT,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAAA,EAEJ;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAG;AAAA,IAAA;AAAA,EAEP;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,aAAa;AAAA,MACb,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,aAAa;AAAA,MAAA;AAAA,IACf;AAAA,EAEJ;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,aAAa;AAAA,MAAA;AAAA,IACf;AAAA,EAEJ;AAAA,EACA,UAAU;AAAA,IACR,mBAAmB;AAAA,MACjB,SAAS;AAAA,QACP,iBAAiB,MAAM,OAAO;AAAA,QAC9B,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAAA;AAAA,IAChD;AAAA,EACF;AAEJ,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

@@ -0,0 +1,74 @@
+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: {
+    color: theme.colors.bgContainer,
+    borderRadius: theme.radii.base,
+    border: `1px solid ${theme.colors.borderStrong}`
+  },
+  checked: {
+    borderColor: "transparent",
+    backgroundColor: theme.colors.primaryStrong,
+    color: theme.colors.bgContainer
+  },
+  indeterminate: {
+    color: theme.colors.textSubtle,
+    backgroundColor: theme.colors.bgContainer
+  },
+  semantic: {
+    "&[data-variant=indeterminate]": {
+      backgroundColor: theme.colors.bgContainer,
+      borderColor: theme.colors.borderStrong
+    }
+  },
+  disabled: {
+    color: theme.colors.bgDisabled,
+    borderColor: theme.colors.borderDisabled,
+    backgroundColor: theme.colors.bgDisabled,
+    "&[data-variant=checked],&[data-variant=indeterminate]": {
+      color: theme.colors.textDisabled,
+      borderColor: "currentcolor"
+    }
+  }
+});
+const HvCheckBoxIcon = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    variant,
+    disabled,
+    semantic
+  } = useDefaultProps("HvCheckBoxIcon", props);
+  const { classes, cx } = useClasses(classesProp, false);
+  const d = 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__ */ jsx(
+    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__ */ jsx("path", { d })
+    }
+  );
+};
+export {
+  HvCheckBoxIcon
+};

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

@@ -0,0 +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 { 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

@@ -4,10 +4,6 @@ import { outlineStyles } from "../utils/focusUtils.js";
 const { staticClasses, useClasses } = createClasses("HvBaseInput", {
   root: {
     // #region `input` style reset
-    "input:-webkit-autofill": {
-      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.textDimmed} inset`,
-      WebkitTextFillColor: theme.colors.text
-    },
     // Clears number input up/down arrows in Chrome and Firefox
     "input[type=number]": {
       MozAppearance: "textfield",
@@ -28,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",
@@ -36,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    \"input:-webkit-autofill\": {\n      WebkitBoxShadow: `0 0 0px 1000px ${theme.colors.textDimmed} inset`,\n      WebkitTextFillColor: theme.colors.text,\n    },\n\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,IAEJ,0BAA0B;AAAA,MACxB,iBAAiB,kBAAkB,MAAM,OAAO,UAAU;AAAA,MAC1D,qBAAqB,MAAM,OAAO;AAAA,IACpC;AAAA;AAAA,IAGA,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/BaseRadio.js

@@ -4,31 +4,23 @@ import MuiRadio from "@mui/material/Radio";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./BaseRadio.styles.js";
 import { staticClasses } from "./BaseRadio.styles.js";
-import { Selected, Unselected } from "./icons.js";
-const icons = {
-  radio: /* @__PURE__ */ jsx(Unselected, {}),
-  radioChecked: /* @__PURE__ */ jsx(Selected, {})
-};
+import { HvRadioIcon } from "./RadioIcon.js";
 const HvBaseRadio = 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
     } = useDefaultProps("HvBaseRadio", props);
     const { classes, cx } = useClasses(classesProp);
@@ -60,8 +52,6 @@ const HvBaseRadio = forwardRef(
       MuiRadio,
       {
         ref,
-        id,
-        name,
         className: cx(
           classes.root,
           {
@@ -72,8 +62,8 @@ const HvBaseRadio = forwardRef(
           },
           className
         ),
-        icon: icon || icons.radio,
-        checkedIcon: checkedIcon || icons.radioChecked,
+        icon: /* @__PURE__ */ jsx(HvRadioIcon, { disabled }),
+        checkedIcon: /* @__PURE__ */ jsx(HvRadioIcon, { checked: true, disabled }),
         color: "default",
         disabled,
         required,

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

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.js","sources":["../../../src/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\nimport { Selected, Unselected } from \"./icons\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvBaseRadioClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nconst icons = {\n  radio: <Unselected />,\n  radioChecked: <Selected />,\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n  function HvBaseRadio(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      checked,\n      defaultChecked,\n      onChange,\n      semantic = false,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      icon,\n      checkedIcon,\n      ...others\n    } = useDefaultProps(\"HvBaseRadio\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible],\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur],\n    );\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        if (readOnly) {\n          return;\n        }\n\n        onChange?.(evt, evt.target.checked, value);\n      },\n      [onChange, readOnly, value],\n    );\n\n    return (\n      <MuiRadio\n        ref={ref}\n        id={id}\n        name={name}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.focusVisible]: focusVisible,\n            [classes.checked]: checked,\n            [classes.semantic]: semantic,\n          },\n          className,\n        )}\n        icon={icon || icons.radio}\n        checkedIcon={checkedIcon || icons.radioChecked}\n        color=\"default\"\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        onChange={onLocalChange}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        inputProps={inputProps}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":["HvBaseRadio"],"mappings":";;;;;;;AAuFA,MAAM,QAAQ;AAAA,EACZ,2BAAQ,YAAW,EAAA;AAAA,EACnB,kCAAe,UAAS,CAAA,CAAA;AAC1B;AAQO,MAAM,cAAc;AAAA,EACzB,SAASA,aAAY,OAAO,KAAK;AACzB,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAA+B;AAC9B,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IACjB;AAEA,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAA+B;AAC9B,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IACT;AAEA,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QAAA;AAGF,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAC5B;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAM,QAAQ,MAAM;AAAA,QACpB,aAAa,eAAe,MAAM;AAAA,QAClC,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"BaseRadio.js","sources":["../../../src/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\nimport { HvRadioIcon } from \"./RadioIcon\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvBaseRadioClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any,\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n  function HvBaseRadio(props, ref) {\n    const {\n      classes: classesProp,\n      className,\n      value = \"on\",\n      required,\n      readOnly,\n      disabled,\n      checked,\n      defaultChecked,\n      onChange,\n      semantic,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvBaseRadio\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible],\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur],\n    );\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        if (readOnly) {\n          return;\n        }\n\n        onChange?.(evt, evt.target.checked, value);\n      },\n      [onChange, readOnly, value],\n    );\n\n    return (\n      <MuiRadio\n        ref={ref}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.focusVisible]: focusVisible,\n            [classes.checked]: checked,\n            [classes.semantic]: semantic,\n          },\n          className,\n        )}\n        icon={<HvRadioIcon disabled={disabled} />}\n        checkedIcon={<HvRadioIcon checked disabled={disabled} />}\n        color=\"default\"\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        onChange={onLocalChange}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        inputProps={inputProps}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n  },\n);\n"],"names":["HvBaseRadio"],"mappings":";;;;;;;AA6FO,MAAM,cAAc;AAAA,EACzB,SAASA,aAAY,OAAO,KAAK;AACzB,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,eAAe,KAAK;AAExC,UAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAA+B;AAC9B,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IACjB;AAEA,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAA+B;AAC9B,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IACT;AAEA,UAAM,gBAAgB;AAAA,MACpB,CAAC,QAA6C;AAC5C,YAAI,UAAU;AACZ;AAAA,QAAA;AAGF,mBAAW,KAAK,IAAI,OAAO,SAAS,KAAK;AAAA,MAC3C;AAAA,MACA,CAAC,UAAU,UAAU,KAAK;AAAA,IAC5B;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR;AAAA,YACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,YACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACtB;AAAA,UACA;AAAA,QACF;AAAA,QACA,MAAO,oBAAA,aAAA,EAAY,SAAoB,CAAA;AAAA,QACvC,aAAa,oBAAC,aAAY,EAAA,SAAO,MAAC,UAAoB;AAAA,QACtD,OAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGN;"}

package/dist/esm/BaseRadio/BaseRadio.styles.js

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