@hitachivantara/uikit-react-core 5.60.0 → 5.61.0

package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs

@@ -3,19 +3,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const MuiCheckbox = require("@mui/material/Checkbox");
-const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
 const BaseCheckBox_styles = require("./BaseCheckBox.styles.cjs");
+const icons = require("./icons.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiCheckbox__default = /* @__PURE__ */ _interopDefault(MuiCheckbox);
-const getSelectorIcons = (options, classes) => {
-  const { disabled, semantic } = options;
-  const color = disabled && ["atmo3", "secondary_60"] || semantic && ["base_light", "base_dark"] || void 0;
-  const checkedColor = disabled && ["atmo3", "secondary_60"] || semantic && ["base_dark", "base_light"] || void 0;
+const getSelectorIcons = () => {
   return {
-    checkbox: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Checkbox, { color, className: classes.icon }),
-    checkboxPartial: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CheckboxPartial, { color, className: classes.icon }),
-    checkboxChecked: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CheckboxCheck, { color: checkedColor, className: classes.icon })
+    checkbox: /* @__PURE__ */ jsxRuntime.jsx(icons.Box, {}),
+    checkboxPartial: /* @__PURE__ */ jsxRuntime.jsx(icons.Partial, {}),
+    checkboxChecked: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {})
   };
 };
 const HvBaseCheckBox = React.forwardRef((props, ref) => {
@@ -40,7 +37,7 @@ const HvBaseCheckBox = React.forwardRef((props, ref) => {
   } = useDefaultProps.useDefaultProps("HvBaseCheckBox", props);
   const { classes, cx } = BaseCheckBox_styles.useClasses(classesProp);
   const [focusVisible, setFocusVisible] = React.useState(false);
-  const icons = getSelectorIcons({ disabled, semantic }, classes);
+  const icons2 = getSelectorIcons();
   const onChangeCallback = React.useCallback(
     (event) => {
       if (readOnly) {
@@ -73,12 +70,18 @@ const HvBaseCheckBox = React.forwardRef((props, ref) => {
       value,
       className: cx(
         classes.root,
-        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },
+        {
+          [classes.disabled]: disabled,
+          [classes.focusVisible]: focusVisible,
+          [classes.checked]: checked,
+          [classes.indeterminate]: indeterminate,
+          [classes.semantic]: semantic
+        },
         className
       ),
-      icon: icons.checkbox,
-      indeterminateIcon: icons.checkboxPartial,
-      checkedIcon: icons.checkboxChecked,
+      icon: icons2.checkbox,
+      indeterminateIcon: icons2.checkboxPartial,
+      checkedIcon: icons2.checkboxChecked,
       disabled,
       required,
       readOnly,

package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.cjs","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\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 getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes: HvBaseCheckBoxClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n    checkboxPartial: (\n      <CheckboxPartialIcon color={color} className={classes.icon} />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n    ),\n  };\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>((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 icons = getSelectorIcons({ disabled, semantic }, classes);\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        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\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      disableRipple\n      {...others}\n    />\n  );\n});\n"],"names":["jsx","CheckboxIcon","CheckboxPartialIcon","CheckboxCheckIcon","forwardRef","useDefaultProps","useClasses","useState","useCallback","MuiCheckbox"],"mappings":";;;;;;;;;;AA6FA,MAAM,mBAAmB,CACvB,SAIA,YACG;AACG,QAAA,EAAE,UAAU,SAAa,IAAA;AACzB,QAAA,QACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,cAAc,WAAW,KACvC;AACI,QAAA,eACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,aAAa,YAAY,KACvC;AAGK,SAAA;AAAA,IACL,UAAWA,2BAAA,IAAAC,0BAAA,EAAa,OAAc,WAAW,QAAQ,MAAM;AAAA,IAC/D,iBACGD,2BAAA,IAAAE,iCAAA,EAAoB,OAAc,WAAW,QAAQ,MAAM;AAAA,IAE9D,iBACGF,2BAAAA,IAAAG,gBAAAA,eAAA,EAAkB,OAAO,cAAc,WAAW,QAAQ,MAAM;AAAA,EAAA;AAGvE;AAQO,MAAM,iBAAiBC,MAAA,WAG5B,CAAC,OAAO,QAAQ;AACV,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,IACDC,gBAAgB,gBAAA,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAIC,+BAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAIC,eAAkB,KAAK;AAE/D,QAAM,QAAQ,iBAAiB,EAAE,UAAU,SAAA,GAAY,OAAO;AAE9D,QAAM,mBAAmBC,MAAA;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAAA;AAG5B,QAAM,iBAAiBA,MAAA;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,yBAAyBA,MAAA;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAIf,SAAAR,2BAAA;AAAA,IAACS,qBAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,YAAY,GAAG,aAAa;AAAA,QACrE;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,MACN,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;;;"}
+{"version":3,"file":"BaseCheckBox.cjs","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\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 getSelectorIcons = () => {\n  return {\n    checkbox: <Box />,\n    checkboxPartial: <Partial />,\n    checkboxChecked: <Check />,\n  };\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>((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 icons = getSelectorIcons();\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      disableRipple\n      {...others}\n    />\n  );\n});\n"],"names":["Box","Partial","Check","forwardRef","useDefaultProps","useClasses","useState","icons","useCallback","jsx","MuiCheckbox"],"mappings":";;;;;;;;;;AAyFA,MAAM,mBAAmB,MAAM;AACtB,SAAA;AAAA,IACL,yCAAWA,MAAI,KAAA,EAAA;AAAA,IACf,gDAAkBC,MAAQ,SAAA,EAAA;AAAA,IAC1B,gDAAkBC,MAAM,OAAA,EAAA;AAAA,EAAA;AAE5B;AAQO,MAAM,iBAAiBC,MAAA,WAG5B,CAAC,OAAO,QAAQ;AACV,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,IACDC,gBAAgB,gBAAA,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAIC,+BAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAIC,eAAkB,KAAK;AAE/D,QAAMC,SAAQ;AAEd,QAAM,mBAAmBC,MAAA;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAAA;AAG5B,QAAM,iBAAiBA,MAAA;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,yBAAyBA,MAAA;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAIf,SAAAC,2BAAA;AAAA,IAACC,qBAAA;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,MAAMH,OAAM;AAAA,MACZ,mBAAmBA,OAAM;AAAA,MACzB,aAAaA,OAAM;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,MACN,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;;;"}

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

@@ -6,20 +6,29 @@ const classes = require("../utils/classes.cjs");
 const { staticClasses, useClasses } = classes.createClasses("HvBaseCheckBox", {
   root: {
     padding: 0,
+    width: 32,
+    minWidth: 32,
+    height: 32,
     borderRadius: uikitStyles.theme.radii.base,
     cursor: "pointer",
     "&:hover": {
       backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
+    },
+    "& svg": {
+      width: 16,
+      height: 16,
+      color: uikitStyles.theme.colors.atmo1,
+      borderRadius: uikitStyles.theme.radii.none,
+      border: `1px solid ${uikitStyles.theme.colors.secondary}`
     }
   },
   disabled: {
     "&$root": {
       cursor: "not-allowed",
-      pointerEvents: "initial"
-    },
-    "& svg": {
-      "& path:nth-of-type(2)": {
-        fill: uikitStyles.theme.colors.secondary_60
+      pointerEvents: "initial",
+      "& svg": {
+        color: uikitStyles.theme.colors.atmo3,
+        borderColor: uikitStyles.theme.colors.secondary_60
       }
     }
   },
@@ -28,7 +37,46 @@ const { staticClasses, useClasses } = classes.createClasses("HvBaseCheckBox", {
       ...focusUtils.outlineStyles
     }
   },
-  icon: {}
+  icon: {},
+  checked: {
+    "& svg": {
+      border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+      backgroundColor: uikitStyles.theme.colors.secondary,
+      color: uikitStyles.theme.colors.atmo1
+    },
+    "&$disabled": {
+      "& svg": {
+        backgroundColor: uikitStyles.theme.colors.atmo3,
+        borderColor: uikitStyles.theme.colors.atmo3,
+        color: uikitStyles.theme.colors.secondary_60
+      }
+    }
+  },
+  indeterminate: {
+    "& svg": {
+      color: uikitStyles.theme.colors.secondary
+    },
+    "&$disabled": {
+      "& svg": {
+        backgroundColor: uikitStyles.theme.colors.atmo3,
+        borderColor: uikitStyles.theme.colors.secondary_60,
+        color: uikitStyles.theme.colors.secondary_60
+      }
+    }
+  },
+  semantic: {
+    "& svg": {
+      border: `1px solid ${uikitStyles.theme.colors.base_dark}`,
+      color: uikitStyles.theme.colors.base_light,
+      backgroundColor: uikitStyles.theme.colors.base_dark
+    },
+    "&$indeterminate": {
+      "& svg": {
+        color: uikitStyles.theme.colors.base_dark,
+        backgroundColor: uikitStyles.theme.colors.base_light
+      }
+    }
+  }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

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

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.styles.cjs","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    borderRadius: theme.radii.base,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n    },\n\n    \"& svg\": {\n      \"& path:nth-of-type(2)\": {\n        fill: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":";;;;;AAKO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,cAAcC,YAAAA,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,IACjB;AAAA,IAEA,SAAS;AAAA,MACP,yBAAyB;AAAA,QACvB,MAAMA,YAAAA,MAAM,OAAO;AAAA,MACrB;AAAA,IACF;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAGC,WAAA;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AACT,CAAC;;;"}
+{"version":3,"file":"BaseCheckBox.styles.cjs","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\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.containerBackgroundHover,\n    },\n\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      color: theme.colors.atmo1,\n      borderRadius: theme.radii.none,\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n      \"& svg\": {\n        color: theme.colors.atmo3,\n        borderColor: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: theme.colors.secondary,\n      color: theme.colors.atmo1,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        backgroundColor: theme.colors.atmo3,\n        borderColor: theme.colors.atmo3,\n        color: theme.colors.secondary_60,\n      },\n    },\n  },\n  indeterminate: {\n    \"& svg\": {\n      color: theme.colors.secondary,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        backgroundColor: theme.colors.atmo3,\n        borderColor: theme.colors.secondary_60,\n        color: theme.colors.secondary_60,\n      },\n    },\n  },\n  semantic: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.base_dark}`,\n      color: theme.colors.base_light,\n      backgroundColor: theme.colors.base_dark,\n    },\n    \"&$indeterminate\": {\n      \"& svg\": {\n        color: theme.colors.base_dark,\n        backgroundColor: theme.colors.base_light,\n      },\n    },\n  },\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":";;;;;AAKO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAcC,YAAAA,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAOA,YAAAA,MAAM,OAAO;AAAA,MACpB,cAAcA,YAAAA,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAaA,YAAM,MAAA,OAAO,SAAS;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,QACP,OAAOA,YAAAA,MAAM,OAAO;AAAA,QACpB,aAAaA,YAAAA,MAAM,OAAO;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAGC,WAAA;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,QAAQ,aAAaD,YAAM,MAAA,OAAO,SAAS;AAAA,MAC3C,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAC9B,OAAOA,YAAAA,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,QAC9B,aAAaA,YAAAA,MAAM,OAAO;AAAA,QAC1B,OAAOA,YAAAA,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAOA,YAAAA,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,QAC9B,aAAaA,YAAAA,MAAM,OAAO;AAAA,QAC1B,OAAOA,YAAAA,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ,aAAaA,YAAM,MAAA,OAAO,SAAS;AAAA,MAC3C,OAAOA,YAAAA,MAAM,OAAO;AAAA,MACpB,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS;AAAA,QACP,OAAOA,YAAAA,MAAM,OAAO;AAAA,QACpB,iBAAiBA,YAAAA,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/BaseCheckBox/icons.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const Box = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentcolor", d: "m0,0l16,0l0,16l-16,0l0,-16z" }) });
+};
+const Check = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "path",
+    {
+      d: "m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z",
+      fill: "currentcolor"
+    }
+  ) });
+};
+const Partial = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsxRuntime.jsx("path", { id: "svg_2", d: "m3,8l8,0l0,-2l-8,0l0,2z", fill: "currentcolor" }) });
+};
+exports.Box = Box;
+exports.Check = Check;
+exports.Partial = Partial;

package/dist/cjs/BaseCheckBox/icons.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.cjs","sources":["../../../src/BaseCheckBox/icons.tsx"],"sourcesContent":["export const Box = () => {\n  return (\n    <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path fill=\"currentcolor\" d=\"m0,0l16,0l0,16l-16,0l0,-16z\" />\n    </svg>\n  );\n};\n\nexport const Check = () => {\n  return (\n    <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path\n        d=\"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        fill=\"currentcolor\"\n      />\n    </svg>\n  );\n};\n\nexport const Partial = () => {\n  return (\n    <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path id=\"svg_2\" d=\"m3,8l8,0l0,-2l-8,0l0,2z\" fill=\"currentcolor\" />\n    </svg>\n  );\n};\n"],"names":["jsx"],"mappings":";;;AAAO,MAAM,MAAM,MAAM;AACvB,SACGA,2BAAA,IAAA,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,OAAM,8BAChC,UAAAA,+BAAC,QAAK,EAAA,MAAK,gBAAe,GAAE,+BAA8B,EAC5D,CAAA;AAEJ;AAEO,MAAM,QAAQ,MAAM;AACzB,wCACG,OAAI,EAAA,OAAM,MAAK,QAAO,MAAK,OAAM,8BAChC,UAAAA,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ;AAEO,MAAM,UAAU,MAAM;AAC3B,wCACG,OAAI,EAAA,OAAM,MAAK,QAAO,MAAK,OAAM,8BAChC,UAACA,2BAAA,IAAA,QAAA,EAAK,IAAG,SAAQ,GAAE,2BAA0B,MAAK,gBAAe,EACnE,CAAA;AAEJ;;;;"}

package/dist/cjs/CheckBox/CheckBox.cjs

@@ -101,7 +101,10 @@ const HvCheckBox = React.forwardRef(
         id: hasLabel ? setId.setId(elementId, "input") : setId.setId(id, "input"),
         name,
         className: cx(classes.checkbox, {
-          [classes.invalidCheckbox]: isStateInvalid
+          [classes.invalidCheckbox]: isStateInvalid,
+          [classes.checked]: isChecked,
+          [classes.indeterminate]: isIndeterminate,
+          [classes.semantic]: semantic
         }),
         disabled,
         readOnly,

package/dist/cjs/CheckBox/CheckBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.cjs","sources":["../../../src/CheckBox/CheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport { HvBaseCheckBox, HvBaseCheckBoxProps } from \"../BaseCheckBox\";\nimport {\n  HvLabelProps,\n  HvFormStatus,\n  HvWarningText,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBox.styles\";\n\nexport { staticClasses as checkBoxClasses };\n\nexport type HvCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, \"classes\"> {\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvCheckBoxClasses;\n}\n\n/**\n * A Checkbox is a mechanism that allows the user to select one or more options.\n *\n * Usually used in a Checkbox Group to present the user with a range of options from\n * which the user <b>may select any number of options</b> to complete their task.\n *\n * It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      name,\n      checked,\n      status,\n      indeterminate,\n      statusMessage,\n      label,\n      labelProps,\n      inputProps,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      semantic = false,\n      defaultChecked = false,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvCheckBox\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const [isIndeterminate, setIsIndeterminate] = useControlled(\n      checked !== undefined ? indeterminate : undefined,\n      Boolean(indeterminate)\n    );\n\n    const isStateInvalid = isInvalid(validationState);\n\n    const onChangeCallback = useCallback<\n      NonNullable<HvBaseCheckBoxProps[\"onChange\"]>\n    >(\n      (event, newChecked) => {\n        setIsChecked(() => {\n          // This will only run if uncontrolled\n          setIsIndeterminate(false);\n\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(event, newChecked, value);\n      },\n      [\n        onChange,\n        required,\n        setIsChecked,\n        setIsIndeterminate,\n        setValidationState,\n        value,\n      ]\n    );\n\n    const onFocusVisibleCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    };\n\n    const onBlurCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    };\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const hasLabel = label != null;\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const checkbox = (\n      <HvBaseCheckBox\n        ref={ref}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.checkbox, {\n          [classes.invalidCheckbox]: isStateInvalid,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        onChange={onChangeCallback}\n        value={value}\n        checked={isChecked}\n        indeterminate={isIndeterminate}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(\n          classes.root,\n          { [classes.focusVisible]: !!(focusVisible && label) },\n          className\n        )}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.invalidContainer]: isStateInvalid,\n            })}\n          >\n            {checkbox}\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          checkbox\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableAdornment={!hasLabel}\n            hideText={!hasLabel}\n            disableBorder\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useUniqueId","useState","useControlled","isInvalid","useCallback","setId","jsx","HvBaseCheckBox","jsxs","HvFormElement","HvLabel","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"CheckBox.cjs","sources":["../../../src/CheckBox/CheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport { HvBaseCheckBox, HvBaseCheckBoxProps } from \"../BaseCheckBox\";\nimport {\n  HvLabelProps,\n  HvFormStatus,\n  HvWarningText,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBox.styles\";\n\nexport { staticClasses as checkBoxClasses };\n\nexport type HvCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCheckBoxProps extends Omit<HvBaseCheckBoxProps, \"classes\"> {\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvCheckBoxClasses;\n}\n\n/**\n * A Checkbox is a mechanism that allows the user to select one or more options.\n *\n * Usually used in a Checkbox Group to present the user with a range of options from\n * which the user <b>may select any number of options</b> to complete their task.\n *\n * It can also be used individually to represent the toggle of a single option, when\n * the Toggle Switch and Toggle Button aren't more appropriate.\n */\nexport const HvCheckBox = forwardRef<HTMLButtonElement, HvCheckBoxProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\n      className,\n      name,\n      checked,\n      status,\n      indeterminate,\n      statusMessage,\n      label,\n      labelProps,\n      inputProps,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      semantic = false,\n      defaultChecked = false,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      \"aria-errormessage\": ariaErrorMessage,\n      onChange,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvCheckBox\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\n\n    const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const [isIndeterminate, setIsIndeterminate] = useControlled(\n      checked !== undefined ? indeterminate : undefined,\n      Boolean(indeterminate)\n    );\n\n    const isStateInvalid = isInvalid(validationState);\n\n    const onChangeCallback = useCallback<\n      NonNullable<HvBaseCheckBoxProps[\"onChange\"]>\n    >(\n      (event, newChecked) => {\n        setIsChecked(() => {\n          // This will only run if uncontrolled\n          setIsIndeterminate(false);\n\n          if (required && !newChecked) {\n            setValidationState(\"invalid\");\n          } else {\n            setValidationState(\"valid\");\n          }\n\n          return newChecked;\n        });\n\n        onChange?.(event, newChecked, value);\n      },\n      [\n        onChange,\n        required,\n        setIsChecked,\n        setIsIndeterminate,\n        setValidationState,\n        value,\n      ]\n    );\n\n    const onFocusVisibleCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    };\n\n    const onBlurCallback: HvBaseCheckBoxProps[\"onBlur\"] = (event) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    };\n\n    // The error message area will only be created if:\n    //   - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const hasLabel = label != null;\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const checkbox = (\n      <HvBaseCheckBox\n        ref={ref}\n        id={hasLabel ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.checkbox, {\n          [classes.invalidCheckbox]: isStateInvalid,\n          [classes.checked]: isChecked,\n          [classes.indeterminate]: isIndeterminate,\n          [classes.semantic]: semantic,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        onChange={onChangeCallback}\n        value={value}\n        checked={isChecked}\n        indeterminate={isIndeterminate}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(\n          classes.root,\n          { [classes.focusVisible]: !!(focusVisible && label) },\n          className\n        )}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.invalidContainer]: isStateInvalid,\n            })}\n          >\n            {checkbox}\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          checkbox\n        )}\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableAdornment={!hasLabel}\n            hideText={!hasLabel}\n            disableBorder\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useUniqueId","useState","useControlled","isInvalid","useCallback","setId","jsx","HvBaseCheckBox","jsxs","HvFormElement","HvLabel","HvWarningText"],"mappings":";;;;;;;;;;;;;;AAiEO,MAAM,aAAaA,MAAA;AAAA,EACxB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX,iBAAiB;AAAA,MACjB,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB,qBAAqB;AAAA,MACrB;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACDC,gBAAgB,gBAAA,cAAc,KAAK;AAEvC,UAAM,EAAE,SAAS,GAAG,IAAIC,2BAAW,WAAW;AAExC,UAAA,YAAYC,wBAAY,EAAE;AAEhC,UAAM,CAAC,cAAc,eAAe,IAAIC,eAAkB,KAAK;AAEzD,UAAA,CAAC,iBAAiB,kBAAkB,IAAIC,cAAA;AAAA,MAC5C;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,CAAC,iBAAiB,IAAIA,cAAA,cAAc,eAAe,UAAU;AAE7D,UAAA,CAAC,WAAW,YAAY,IAAIA,cAAA;AAAA,MAChC;AAAA,MACA,QAAQ,cAAc;AAAA,IAAA;AAGlB,UAAA,CAAC,iBAAiB,kBAAkB,IAAIA,cAAA;AAAA,MAC5C,YAAY,SAAY,gBAAgB;AAAA,MACxC,QAAQ,aAAa;AAAA,IAAA;AAGjB,UAAA,iBAAiBC,2BAAU,eAAe;AAEhD,UAAM,mBAAmBC,MAAA;AAAA,MAGvB,CAAC,OAAO,eAAe;AACrB,qBAAa,MAAM;AAEjB,6BAAmB,KAAK;AAEpB,cAAA,YAAY,CAAC,YAAY;AAC3B,+BAAmB,SAAS;AAAA,UAAA,OACvB;AACL,+BAAmB,OAAO;AAAA,UAC5B;AAEO,iBAAA;AAAA,QAAA,CACR;AAEU,mBAAA,OAAO,YAAY,KAAK;AAAA,MACrC;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IAAA;AAGI,UAAA,yBAAwD,CAAC,UAAU;AACvE,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IAAA;AAGlB,UAAA,iBAAgD,CAAC,UAAU;AAC/D,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAAA;AAOV,UAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UAAa;AAE7B,UAAM,WAAW,SAAS;AAEtB,QAAA;AACJ,QAAI,gBAAgB;AAClB,uBAAiB,eACbC,MAAA,MAAM,WAAW,OAAO,IACxB;AAAA,IACN;AAEA,UAAM,WACJC,2BAAA;AAAA,MAACC,aAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI,WAAWF,MAAAA,MAAM,WAAW,OAAO,IAAIA,MAAA,MAAM,IAAI,OAAO;AAAA,QAC5D;AAAA,QACA,WAAW,GAAG,QAAQ,UAAU;AAAA,UAC9B,CAAC,QAAQ,eAAe,GAAG;AAAA,UAC3B,CAAC,QAAQ,OAAO,GAAG;AAAA,UACnB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QAAA,CACrB;AAAA,QACD;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT,eAAe;AAAA,QACf;AAAA,QACA,YAAY;AAAA,UACV,gBAAgB,iBAAiB,OAAO;AAAA,UACxC,qBAAqB;AAAA,UACrB,cAAc;AAAA,UACd,mBAAmB;AAAA,UACnB,oBAAoB;AAAA,UACpB,GAAG;AAAA,QACL;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAKN,WAAAG,2BAAA;AAAA,MAACC,YAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,EAAE,CAAC,QAAQ,YAAY,GAAG,CAAC,EAAE,gBAAgB,OAAO;AAAA,UACpD;AAAA,QACF;AAAA,QAEC,UAAA;AAAA,UACC,WAAAD,2BAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,WAAW;AAAA,gBAC/B,CAAC,QAAQ,QAAQ,GAAG;AAAA,gBACpB,CAAC,QAAQ,gBAAgB,GAAG;AAAA,cAAA,CAC7B;AAAA,cAEA,UAAA;AAAA,gBAAA;AAAA,gBACDF,2BAAA;AAAA,kBAACI,MAAA;AAAA,kBAAA;AAAA,oBACC,IAAIL,MAAAA,MAAM,WAAW,OAAO;AAAA,oBAC5B,SAASA,MAAAA,MAAM,WAAW,OAAO;AAAA,oBACjC;AAAA,oBACA,WAAW,QAAQ;AAAA,oBAClB,GAAG;AAAA,kBAAA;AAAA,gBACN;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,IAGF;AAAA,UAED,gBACCC,2BAAA;AAAA,YAACK,YAAA;AAAA,YAAA;AAAA,cACC,IAAIN,MAAAA,MAAM,WAAW,OAAO;AAAA,cAC5B,kBAAkB,CAAC;AAAA,cACnB,UAAU,CAAC;AAAA,cACX,eAAa;AAAA,cAEZ,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;;;"}

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

@@ -53,7 +53,10 @@ const { staticClasses, useClasses } = classes.createClasses("HvCheckBox", {
     height: "32px",
     lineHeight: "32px",
     width: "100%"
-  }
+  },
+  checked: {},
+  indeterminate: {},
+  semantic: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.styles.cjs","sources":["../../../src/CheckBox/CheckBox.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBox\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  focusVisible: {\n    ...outlineStyles,\n\n    \"& div\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n\n    [`& $checkbox div > svg`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  checkbox: { height: \"32px\" },\n  invalidCheckbox: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n    borderBottomLeftRadius: \"0px\",\n    borderBottomRightRadius: \"0px\",\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":";;;;;AAKO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,cAAc;AAAA,EACvE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,WAAW;AAAA,MACT,iBAAiBC,YAAAA,MAAM,OAAO;AAAA,MAC9B,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,EAAE,OAAOA,kBAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,cAAc;AAAA,IACZ,GAAGC,WAAA;AAAA,IAEH,SAAS;AAAA,MACP,iBAAiBD,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,CAAC,uBAAuB,GAAG;AAAA,MACzB,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAaA,YAAM,MAAA,OAAO,QAAQ;AAAA,IAEhD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,UAAU,EAAE,QAAQ,OAAO;AAAA,EAC3B,iBAAiB;AAAA,IACf,cAAc,aAAaA,YAAM,MAAA,OAAO,QAAQ;AAAA,IAChD,wBAAwB;AAAA,IACxB,yBAAyB;AAAA,EAC3B;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAGA,YAAAA,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AACF,CAAC;;;"}
+{"version":3,"file":"CheckBox.styles.cjs","sources":["../../../src/CheckBox/CheckBox.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBox\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transition: \"background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  focusVisible: {\n    ...outlineStyles,\n\n    \"& div\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n\n    [`& $checkbox div > svg`]: {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  checkbox: { height: \"32px\" },\n  invalidCheckbox: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n    borderBottomLeftRadius: \"0px\",\n    borderBottomRightRadius: \"0px\",\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  checked: {},\n  indeterminate: {},\n  semantic: {},\n});\n"],"names":["createClasses","theme","outlineStyles"],"mappings":";;;;;AAKO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,cAAc;AAAA,EACvE,MAAM,EAAE,SAAS,eAAe;AAAA,EAChC,WAAW;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IAEZ,WAAW;AAAA,MACT,iBAAiBC,YAAAA,MAAM,OAAO;AAAA,MAC9B,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAC5B;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,YAAY,EAAE,OAAOA,kBAAM,OAAO,cAAc,QAAQ,cAAc;AAAA,EACxE;AAAA,EACA,cAAc;AAAA,IACZ,GAAGC,WAAA;AAAA,IAEH,SAAS;AAAA,MACP,iBAAiBD,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,CAAC,uBAAuB,GAAG;AAAA,MACzB,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,cAAc,aAAaA,YAAM,MAAA,OAAO,QAAQ;AAAA,IAEhD,WAAW;AAAA,MACT,wBAAwB;AAAA,MACxB,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACA,UAAU,EAAE,QAAQ,OAAO;AAAA,EAC3B,iBAAiB;AAAA,IACf,cAAc,aAAaA,YAAM,MAAA,OAAO,QAAQ;AAAA,IAChD,wBAAwB;AAAA,IACxB,yBAAyB;AAAA,EAC3B;AAAA,EACA,OAAO;AAAA,IACL,UAAU;AAAA,IACV,cAAc;AAAA,IACd,eAAe;AAAA,IACf,cAAcA,YAAAA,MAAM,MAAM;AAAA,IAC1B,YAAY;AAAA,IACZ,GAAGA,YAAAA,MAAM,WAAW;AAAA,IACpB,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,OAAO;AAAA,EACT;AAAA,EACA,SAAS,CAAC;AAAA,EACV,eAAe,CAAC;AAAA,EAChB,UAAU,CAAC;AACb,CAAC;;;"}

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

@@ -26,7 +26,7 @@ const { staticClasses, useClasses } = classes.createClasses("HvList", {
   item: {},
   itemSelector: {
     "&:not(:hover):not(.HvIsFocused):not(:focus-within)": {
-      backgroundColor: uikitStyles.theme.colors.primary_20
+      backgroundColor: uikitStyles.theme.colors.containerBackgroundHover
     }
   },
   link: {

package/dist/cjs/List/List.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"List.styles.cjs","sources":["../../../src/List/List.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.colors.primary_20,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,iBAAiB,EAAE,cAAc,EAAE;AAAA,EACnC,cAAc,EAAE,OAAO,QAAQ,QAAQ,EAAE;AAAA,EACzC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,KAAK,EAAE,OAAO,QAAQ,QAAQ,QAAQ,YAAY,OAAO;AAAA,EACzD,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpD,iBAAiBC,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,GAAGA,YAAAA,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,UAAU;AAAA,IACV,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;;;"}
+{"version":3,"file":"List.styles.cjs","sources":["../../../src/List/List.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":["createClasses","theme"],"mappings":";;;;AAIO,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,iBAAiB,EAAE,cAAc,EAAE;AAAA,EACnC,cAAc,EAAE,OAAO,QAAQ,QAAQ,EAAE;AAAA,EACzC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,KAAK,EAAE,OAAO,QAAQ,QAAQ,QAAQ,YAAY,OAAO;AAAA,EACzD,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpD,iBAAiBC,YAAAA,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,GAAGA,YAAAA,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,UAAU;AAAA,IACV,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;;;"}

package/dist/cjs/LoadingContainer/LoadingContainer.cjs

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const LoadingContainer_styles = require("./LoadingContainer.styles.cjs");
+const Loading = require("../Loading/Loading.cjs");
+const HvLoadingContainer = (props) => {
+  const {
+    children,
+    className,
+    classes: classesProp,
+    hidden,
+    small,
+    label,
+    "aria-label": ariaLabel = label || "Loading",
+    opacity,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvLoadingContainer", props);
+  const { classes, cx } = LoadingContainer_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(classes.root, className), ...others, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Loading.HvLoading,
+      {
+        className: classes.loading,
+        role: "progressbar",
+        small,
+        label,
+        hidden,
+        "aria-label": ariaLabel,
+        style: opacity ? { ["--opacity"]: opacity } : void 0
+      }
+    ),
+    children
+  ] });
+};
+exports.loadingContainerClasses = LoadingContainer_styles.staticClasses;
+exports.HvLoadingContainer = HvLoadingContainer;

package/dist/cjs/LoadingContainer/LoadingContainer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingContainer.cjs","sources":["../../../src/LoadingContainer/LoadingContainer.tsx"],"sourcesContent":["import { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvLoading, HvLoadingProps } from \"../Loading\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { staticClasses, useClasses } from \"./LoadingContainer.styles\";\n\nexport { staticClasses as loadingContainerClasses };\n\nexport type HvLoadingContainerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoadingContainerProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvLoadingProps, \"label\" | \"small\" | \"hidden\"> {\n  opacity?: number;\n  classes?: HvLoadingContainerClasses;\n}\n\n/**\n * A component that wraps `children` with an `HvLoading` component and\n * and an overlay background with opacity.\n *\n * @example\n * <HvLoadingContainer label=\"Loading...\" hidden={!isLoading}>\n *  <MyComponent>\n * </HvLoadingContainer>\n * */\nexport const HvLoadingContainer = (props: HvLoadingContainerProps) => {\n  const {\n    children,\n    className,\n    classes: classesProp,\n    hidden,\n    small,\n    label,\n    \"aria-label\": ariaLabel = label || \"Loading\",\n    opacity,\n    ...others\n  } = useDefaultProps(\"HvLoadingContainer\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <HvLoading\n        className={classes.loading}\n        role=\"progressbar\"\n        small={small}\n        label={label}\n        hidden={hidden}\n        aria-label={ariaLabel}\n        style={opacity ? { [\"--opacity\" as string]: opacity } : undefined}\n      />\n      {children}\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useClasses","jsxs","jsx","HvLoading"],"mappings":";;;;;;AA0Ba,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc,YAAY,SAAS;AAAA,IACnC;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,GAAG,IAAIC,mCAAW,WAAW;AAG5C,SAAAC,gCAAC,SAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,QAAA;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,MAAK;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,QACA,cAAY;AAAA,QACZ,OAAO,UAAU,EAAE,CAAC,WAAqB,GAAG,YAAY;AAAA,MAAA;AAAA,IAC1D;AAAA,IACC;AAAA,EACH,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/LoadingContainer/LoadingContainer.styles.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const classes = require("../utils/classes.cjs");
+const { staticClasses, useClasses } = classes.createClasses("HvLoadingContainer", {
+  root: {
+    position: "relative",
+    height: "inherit",
+    userSelect: "none"
+  },
+  loading: {
+    position: "absolute",
+    inset: 0,
+    zIndex: uikitStyles.theme.zIndices.overlay,
+    transition: "background-color .2s ease",
+    backgroundColor: uikitStyles.theme.alpha("atmo1", "var(--opacity, 0.8)")
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;

package/dist/cjs/LoadingContainer/LoadingContainer.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingContainer.styles.cjs","sources":["../../../src/LoadingContainer/LoadingContainer.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvLoadingContainer\", {\n  root: {\n    position: \"relative\",\n    height: \"inherit\",\n    userSelect: \"none\",\n  },\n  loading: {\n    position: \"absolute\",\n    inset: 0,\n    zIndex: theme.zIndices.overlay,\n    transition: \"background-color .2s ease\",\n    backgroundColor: theme.alpha(\"atmo1\", \"var(--opacity, 0.8)\"),\n  },\n});\n\nexport { staticClasses, useClasses };\n"],"names":["createClasses","theme"],"mappings":";;;;AAIA,MAAM,EAAE,eAAe,eAAeA,QAAAA,cAAc,sBAAsB;AAAA,EACxE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQC,YAAAA,MAAM,SAAS;AAAA,IACvB,YAAY;AAAA,IACZ,iBAAiBA,YAAA,MAAM,MAAM,SAAS,qBAAqB;AAAA,EAC7D;AACF,CAAC;;;"}

package/dist/cjs/index.cjs

@@ -194,6 +194,8 @@ const List_styles = require("./List/List.styles.cjs");
 const List = require("./List/List.cjs");
 const Loading_styles = require("./Loading/Loading.styles.cjs");
 const Loading = require("./Loading/Loading.cjs");
+const LoadingContainer_styles = require("./LoadingContainer/LoadingContainer.styles.cjs");
+const LoadingContainer = require("./LoadingContainer/LoadingContainer.cjs");
 const Login_styles = require("./Login/Login.styles.cjs");
 const Login = require("./Login/Login.cjs");
 const MultiButton_styles = require("./MultiButton/MultiButton.styles.cjs");
@@ -554,6 +556,8 @@ exports.listClasses = List_styles.staticClasses;
 exports.HvList = List.HvList;
 exports.loadingClasses = Loading_styles.staticClasses;
 exports.HvLoading = Loading.HvLoading;
+exports.loadingContainerClasses = LoadingContainer_styles.staticClasses;
+exports.HvLoadingContainer = LoadingContainer.HvLoadingContainer;
 exports.loginClasses = Login_styles.staticClasses;
 exports.HvLogin = Login.HvLogin;
 exports.multiButtonClasses = MultiButton_styles.staticClasses;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/BaseCheckBox/BaseCheckBox.js

@@ -1,18 +1,15 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { forwardRef, useState, useCallback } from "react";
 import MuiCheckbox from "@mui/material/Checkbox";
-import { Checkbox, CheckboxPartial, CheckboxCheck } from "@hitachivantara/uikit-react-icons";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses } from "./BaseCheckBox.styles.js";
 import { staticClasses } from "./BaseCheckBox.styles.js";
-const getSelectorIcons = (options, classes) => {
-  const { disabled, semantic } = options;
-  const color = disabled && ["atmo3", "secondary_60"] || semantic && ["base_light", "base_dark"] || void 0;
-  const checkedColor = disabled && ["atmo3", "secondary_60"] || semantic && ["base_dark", "base_light"] || void 0;
+import { Box, Partial, Check } from "./icons.js";
+const getSelectorIcons = () => {
   return {
-    checkbox: /* @__PURE__ */ jsx(Checkbox, { color, className: classes.icon }),
-    checkboxPartial: /* @__PURE__ */ jsx(CheckboxPartial, { color, className: classes.icon }),
-    checkboxChecked: /* @__PURE__ */ jsx(CheckboxCheck, { color: checkedColor, className: classes.icon })
+    checkbox: /* @__PURE__ */ jsx(Box, {}),
+    checkboxPartial: /* @__PURE__ */ jsx(Partial, {}),
+    checkboxChecked: /* @__PURE__ */ jsx(Check, {})
   };
 };
 const HvBaseCheckBox = forwardRef((props, ref) => {
@@ -37,7 +34,7 @@ const HvBaseCheckBox = forwardRef((props, ref) => {
   } = useDefaultProps("HvBaseCheckBox", props);
   const { classes, cx } = useClasses(classesProp);
   const [focusVisible, setFocusVisible] = useState(false);
-  const icons = getSelectorIcons({ disabled, semantic }, classes);
+  const icons = getSelectorIcons();
   const onChangeCallback = useCallback(
     (event) => {
       if (readOnly) {
@@ -70,7 +67,13 @@ const HvBaseCheckBox = forwardRef((props, ref) => {
       value,
       className: cx(
         classes.root,
-        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },
+        {
+          [classes.disabled]: disabled,
+          [classes.focusVisible]: focusVisible,
+          [classes.checked]: checked,
+          [classes.indeterminate]: indeterminate,
+          [classes.semantic]: semantic
+        },
         className
       ),
       icon: icons.checkbox,

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\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\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 getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes: HvBaseCheckBoxClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n    checkboxPartial: (\n      <CheckboxPartialIcon color={color} className={classes.icon} />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n    ),\n  };\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>((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 icons = getSelectorIcons({ disabled, semantic }, classes);\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        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\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      disableRipple\n      {...others}\n    />\n  );\n});\n"],"names":["CheckboxIcon","CheckboxPartialIcon","CheckboxCheckIcon"],"mappings":";;;;;;;AA6FA,MAAM,mBAAmB,CACvB,SAIA,YACG;AACG,QAAA,EAAE,UAAU,SAAa,IAAA;AACzB,QAAA,QACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,cAAc,WAAW,KACvC;AACI,QAAA,eACH,YAAY,CAAC,SAAS,cAAc,KACpC,YAAY,CAAC,aAAa,YAAY,KACvC;AAGK,SAAA;AAAA,IACL,UAAW,oBAAAA,UAAA,EAAa,OAAc,WAAW,QAAQ,MAAM;AAAA,IAC/D,iBACG,oBAAAC,iBAAA,EAAoB,OAAc,WAAW,QAAQ,MAAM;AAAA,IAE9D,iBACG,oBAAAC,eAAA,EAAkB,OAAO,cAAc,WAAW,QAAQ,MAAM;AAAA,EAAA;AAGvE;AAQO,MAAM,iBAAiB,WAG5B,CAAC,OAAO,QAAQ;AACV,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,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,QAAQ,iBAAiB,EAAE,UAAU,SAAA,GAAY,OAAO;AAE9D,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAAA;AAG5B,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAIf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,YAAY,GAAG,aAAa;AAAA,QACrE;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,MACN,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
+{"version":3,"file":"BaseCheckBox.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\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 getSelectorIcons = () => {\n  return {\n    checkbox: <Box />,\n    checkboxPartial: <Partial />,\n    checkboxChecked: <Check />,\n  };\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>((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 icons = getSelectorIcons();\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      disableRipple\n      {...others}\n    />\n  );\n});\n"],"names":[],"mappings":";;;;;;;AAyFA,MAAM,mBAAmB,MAAM;AACtB,SAAA;AAAA,IACL,8BAAW,KAAI,EAAA;AAAA,IACf,qCAAkB,SAAQ,EAAA;AAAA,IAC1B,qCAAkB,OAAM,EAAA;AAAA,EAAA;AAE5B;AAQO,MAAM,iBAAiB,WAG5B,CAAC,OAAO,QAAQ;AACV,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,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,QAAQ;AAEd,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAAA;AAG5B,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAIf,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,MACN,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}

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

@@ -4,20 +4,29 @@ import { createClasses } from "../utils/classes.js";
 const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
   root: {
     padding: 0,
+    width: 32,
+    minWidth: 32,
+    height: 32,
     borderRadius: theme.radii.base,
     cursor: "pointer",
     "&:hover": {
       backgroundColor: theme.colors.containerBackgroundHover
+    },
+    "& svg": {
+      width: 16,
+      height: 16,
+      color: theme.colors.atmo1,
+      borderRadius: theme.radii.none,
+      border: `1px solid ${theme.colors.secondary}`
     }
   },
   disabled: {
     "&$root": {
       cursor: "not-allowed",
-      pointerEvents: "initial"
-    },
-    "& svg": {
-      "& path:nth-of-type(2)": {
-        fill: theme.colors.secondary_60
+      pointerEvents: "initial",
+      "& svg": {
+        color: theme.colors.atmo3,
+        borderColor: theme.colors.secondary_60
       }
     }
   },
@@ -26,7 +35,46 @@ const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
       ...outlineStyles
     }
   },
-  icon: {}
+  icon: {},
+  checked: {
+    "& svg": {
+      border: `1px solid ${theme.colors.secondary}`,
+      backgroundColor: theme.colors.secondary,
+      color: theme.colors.atmo1
+    },
+    "&$disabled": {
+      "& svg": {
+        backgroundColor: theme.colors.atmo3,
+        borderColor: theme.colors.atmo3,
+        color: theme.colors.secondary_60
+      }
+    }
+  },
+  indeterminate: {
+    "& svg": {
+      color: theme.colors.secondary
+    },
+    "&$disabled": {
+      "& svg": {
+        backgroundColor: theme.colors.atmo3,
+        borderColor: theme.colors.secondary_60,
+        color: theme.colors.secondary_60
+      }
+    }
+  },
+  semantic: {
+    "& svg": {
+      border: `1px solid ${theme.colors.base_dark}`,
+      color: theme.colors.base_light,
+      backgroundColor: theme.colors.base_dark
+    },
+    "&$indeterminate": {
+      "& svg": {
+        color: theme.colors.base_dark,
+        backgroundColor: theme.colors.base_light
+      }
+    }
+  }
 });
 export {
   staticClasses,