@commercetools-uikit/checkbox-input 15.12.0 → 15.13.0

package/dist/commercetools-uikit-checkbox-input.cjs.prod.js

@@ -2,21 +2,20 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
+var _styled = require('@emotion/styled/base');
+require('prop-types');
+var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
-var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
 var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
 var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
-var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var _styled = require('@emotion/styled/base');
-require('prop-types');
 var react = require('@emotion/react');
 var designSystem = require('@commercetools-uikit/design-system');
 var utils = require('@commercetools-uikit/utils');
-var Text = require('@commercetools-uikit/text');
 var react$1 = require('react');
 var inputUtils = require('@commercetools-uikit/input-utils');
 var jsxRuntime = require('@emotion/react/jsx-runtime');
@@ -24,168 +23,17 @@ var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/ins
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
-var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
 var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
 var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
 var _Object$defineProperty__default = /*#__PURE__*/_interopDefault(_Object$defineProperty);
-var _styled__default = /*#__PURE__*/_interopDefault(_styled);
-var Text__default = /*#__PURE__*/_interopDefault(Text);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 
-function ownKeys$4(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$4(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$4(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
-var iconSizes$2 = {
-  small: 12,
-  medium: 16,
-  big: 24
-};
-
-var getSizeDimensions$2 = function getSizeDimensions(size) {
-  switch (size) {
-    case 'scale':
-      return {
-        width: '100%',
-        height: 'auto'
-      };
-
-    case 'small':
-    case 'medium':
-    case 'big':
-      return {
-        width: "".concat(iconSizes$2[size], "px"),
-        height: "".concat(iconSizes$2[size], "px")
-      };
-
-    default:
-      return {
-        width: "".concat(iconSizes$2.big, "px"),
-        height: "".concat(iconSizes$2.big, "px")
-      };
-  }
-};
-
-var getSizeStyle$2 = function getSizeStyle(size) {
-  var _context, _context2;
-
-  var dimensions = getSizeDimensions$2(size);
-
-  switch (size) {
-    case 'scale':
-      return _concatInstanceProperty__default["default"](_context = "\n        &:not(:root) {\n          width: ".concat(dimensions.width, ";\n          height: ")).call(_context, dimensions.height, ";\n        }\n      ");
-
-    default:
-      return _concatInstanceProperty__default["default"](_context2 = "\n        width: ".concat(dimensions.width, ";\n        height: ")).call(_context2, dimensions.height, ";\n      ");
-  }
-};
-
-var getColor$2 = function getColor(color) {
-  if (!color) return 'inherit';
-  var iconColor;
-
-  switch (color) {
-    case 'solid':
-      iconColor = designSystem.designTokens.colorSolid;
-      break;
-
-    case 'neutral60':
-      iconColor = designSystem.designTokens.colorNeutral60;
-      break;
-
-    case 'surface':
-      iconColor = designSystem.designTokens.colorSurface;
-      break;
-
-    case 'info':
-      iconColor = designSystem.designTokens.colorInfo;
-      break;
-
-    case 'primary':
-      iconColor = designSystem.designTokens.colorPrimary;
-      break;
-
-    case 'primary40':
-      iconColor = designSystem.designTokens.colorPrimary40;
-      break;
-
-    case 'warning':
-      iconColor = designSystem.designTokens.colorWarning;
-      break;
-
-    case 'error':
-      iconColor = designSystem.designTokens.colorError;
-      break;
-  }
-
-  if (!iconColor) {
-    return 'inherit';
-  }
-
-  return iconColor;
-};
-
-var getIconStyles$2 = function getIconStyles(props) {
-  return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$2(props.color), ";}&,image{", getSizeStyle$2(props.size), ";}flex-shrink:0;" + ("" ), "" );
-};
-
-var SvgChecked = function SvgChecked(props) {
-  return jsxRuntime.jsx("svg", _objectSpread$4(_objectSpread$4({
-    width: 16,
-    height: 16,
-    viewBox: "0 0 16 16",
-    xmlns: "http://www.w3.org/2000/svg",
-    role: "img"
-  }, props), {}, {
-    children: jsxRuntime.jsxs("g", {
-      transform: "translate(0 -1)",
-      fillRule: "evenodd",
-      children: [jsxRuntime.jsx("rect", {
-        fill: "#FFF",
-        y: 1,
-        width: 16,
-        height: 16,
-        rx: 4
-      }), jsxRuntime.jsxs("g", {
-        transform: "translate(0 .5)",
-        children: [jsxRuntime.jsx("rect", {
-          "data-style": "checkbox__border",
-          stroke: "#AFAFAF",
-          x: 0.5,
-          y: 1,
-          width: 15,
-          height: 15,
-          rx: 4
-        }), jsxRuntime.jsx("path", {
-          "data-style": "checkbox__content",
-          d: "M12.918 3.759a.497.497 0 0 0-.7 0L6.011 9.966a.497.497 0 0 1-.7 0L3.78 8.438a.497.497 0 0 0-.699 0l-.938.938a.497.497 0 0 0 0 .7l3.167 3.165a.497.497 0 0 0 .7 0l7.845-7.845a.496.496 0 0 0 0-.7l-.938-.937z",
-          fill: "#20AD92",
-          fillRule: "nonzero"
-        })]
-      })]
-    })
-  }));
-};
-
-SvgChecked.displayName = 'SvgChecked';
-
-var CheckedIcon = function CheckedIcon(props) {
-  return jsxRuntime.jsx(react.ClassNames, {
-    children: function children(_ref) {
-      var createClass = _ref.css;
-      return jsxRuntime.jsx(SvgChecked, _objectSpread$4(_objectSpread$4({}, props), {}, {
-        className: createClass(getIconStyles$2(props))
-      }));
-    }
-  });
-};
-
-CheckedIcon.displayName = 'CheckedIcon';
-var CheckedIcon$1 = CheckedIcon;
-
 function ownKeys$3(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$3(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$3(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
@@ -282,58 +130,44 @@ var getIconStyles$1 = function getIconStyles(props) {
   return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor$1(props.color), ";}&,image{", getSizeStyle$1(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
-var SvgIndeterminate = function SvgIndeterminate(props) {
-  return jsxRuntime.jsx("svg", _objectSpread$3(_objectSpread$3({
-    width: 16,
-    height: 16,
-    viewBox: "0 0 16 16",
+var SvgChecked = function SvgChecked(props) {
+  return jsxRuntime.jsxs("svg", _objectSpread$3(_objectSpread$3({
+    width: 12,
+    height: 9,
+    viewBox: "0 0 12 9",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     role: "img"
   }, props), {}, {
-    children: jsxRuntime.jsxs("g", {
-      transform: "translate(0 -1)",
+    children: [jsxRuntime.jsx("path", {
       fillRule: "evenodd",
-      children: [jsxRuntime.jsx("rect", {
-        fill: "#FFF",
-        y: 1,
-        width: 16,
-        height: 16,
-        rx: 4
-      }), jsxRuntime.jsxs("g", {
-        transform: "translate(0 .5)",
-        children: [jsxRuntime.jsx("rect", {
-          "data-style": "checkbox__border",
-          stroke: "#AFAFAF",
-          x: 0.5,
-          y: 1,
-          width: 15,
-          height: 15,
-          rx: 4
-        }), jsxRuntime.jsx("path", {
-          "data-style": "checkbox__content",
-          fill: "#00B6A1",
-          d: "M3 7.5h10v2H3z"
-        })]
-      })]
-    })
+      clipRule: "evenodd",
+      d: "M.293 4.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414Z",
+      fill: "#000"
+    }), jsxRuntime.jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M11.707.293a1 1 0 0 1 0 1.414l-7 7a1 1 0 0 1-1.414-1.414l7-7a1 1 0 0 1 1.414 0Z",
+      fill: "#000"
+    })]
   }));
 };
 
-SvgIndeterminate.displayName = 'SvgIndeterminate';
+SvgChecked.displayName = 'SvgChecked';
 
-var IndeterminateIcon = function IndeterminateIcon(props) {
+var CheckedIcon = function CheckedIcon(props) {
   return jsxRuntime.jsx(react.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
-      return jsxRuntime.jsx(SvgIndeterminate, _objectSpread$3(_objectSpread$3({}, props), {}, {
+      return jsxRuntime.jsx(SvgChecked, _objectSpread$3(_objectSpread$3({}, props), {}, {
         className: createClass(getIconStyles$1(props))
       }));
     }
   });
 };
 
-IndeterminateIcon.displayName = 'IndeterminateIcon';
-var IndeterminateIcon$1 = IndeterminateIcon;
+CheckedIcon.displayName = 'CheckedIcon';
+var CheckedIcon$1 = CheckedIcon;
 
 function ownKeys$2(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -431,102 +265,44 @@ var getIconStyles = function getIconStyles(props) {
   return /*#__PURE__*/react.css("*:not([fill='none']){fill:", getColor(props.color), ";}&,image{", getSizeStyle(props.size), ";}flex-shrink:0;" + ("" ), "" );
 };
 
-var SvgUnchecked = function SvgUnchecked(props) {
+var SvgIndeterminate = function SvgIndeterminate(props) {
   return jsxRuntime.jsx("svg", _objectSpread$2(_objectSpread$2({
-    width: 16,
-    height: 16,
-    viewBox: "0 0 16 16",
+    width: 12,
+    height: 2,
+    viewBox: "0 0 12 2",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     role: "img"
   }, props), {}, {
-    children: jsxRuntime.jsxs("g", {
-      transform: "translate(0 -1)",
-      fillRule: "evenodd",
-      children: [jsxRuntime.jsx("rect", {
-        fill: "#FFF",
-        y: 1,
-        width: 16,
-        height: 16,
-        rx: 4
-      }), jsxRuntime.jsx("rect", {
-        "data-style": "checkbox__border",
-        x: 0.5,
-        y: 1,
-        width: 15,
-        height: 15,
-        rx: 4,
-        transform: "translate(0 .5)",
-        stroke: "#AFAFAF"
-      })]
+    children: jsxRuntime.jsx("path", {
+      stroke: "#000",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      d: "M11 1H1"
     })
   }));
 };
 
-SvgUnchecked.displayName = 'SvgUnchecked';
+SvgIndeterminate.displayName = 'SvgIndeterminate';
 
-var UncheckedIcon = function UncheckedIcon(props) {
+var IndeterminateIcon = function IndeterminateIcon(props) {
   return jsxRuntime.jsx(react.ClassNames, {
     children: function children(_ref) {
       var createClass = _ref.css;
-      return jsxRuntime.jsx(SvgUnchecked, _objectSpread$2(_objectSpread$2({}, props), {}, {
+      return jsxRuntime.jsx(SvgIndeterminate, _objectSpread$2(_objectSpread$2({}, props), {}, {
         className: createClass(getIconStyles(props))
       }));
     }
   });
 };
 
-UncheckedIcon.displayName = 'UncheckedIcon';
-var UncheckedIcon$1 = UncheckedIcon;
-
-var getSvgBorderStroke = function getSvgBorderStroke(props) {
-  if (props.isDisabled) {
-    return designSystem.designTokens.borderColorForInputWhenDisabled;
-  }
-
-  if (props.hasError) {
-    return designSystem.designTokens.borderColorForInputWhenError;
-  }
-
-  if (props.isReadOnly) {
-    return designSystem.designTokens.borderColorForInputWhenReadonly;
-  }
-
-  if (props.isHovered && !props.isReadOnly && !props.isDisabled && !props.hasError) {
-    return designSystem.designTokens.borderColorForInputWhenFocused;
-  }
-
-  return designSystem.designTokens.borderColorForInput;
-};
-
-var getSvgContentFill = function getSvgContentFill(props) {
-  if (props.isDisabled) {
-    return designSystem.designTokens.fontColorForInputWhenDisabled;
-  }
-
-  if (props.hasError) {
-    return designSystem.designTokens.fontColorForInputWhenError;
-  }
-
-  if (props.isReadOnly) {
-    return designSystem.designTokens.fontColorForInputWhenReadonly;
-  }
-
-  return designSystem.designTokens.borderColorForInputWhenFocused;
-};
-
-var getCheckboxWrapperStyles = function getCheckboxWrapperStyles(props) {
-  /* resets from createStyledIcon styles */
-  return /*#__PURE__*/react.css("*{fill:none;}display:flex;align-items:center;svg *[data-style='checkbox__border']{stroke:", getSvgBorderStroke(props), ";fill:", designSystem.designTokens.backgroundColorForInput, ";}svg *[data-style='checkbox__content']{fill:", getSvgContentFill(props), ";}" + ("" ), "" );
-}; // eslint-disable-next-line import/prefer-default-export
+IndeterminateIcon.displayName = 'IndeterminateIcon';
+var IndeterminateIcon$1 = IndeterminateIcon;
 
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 
-var Input = /*#__PURE__*/_styled__default["default"]("input", {
-  target: "e1ccch1p0"
-} )("&:focus+div>svg *[data-style='checkbox__border']{stroke:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ));
-
 var Checkbox = function Checkbox(props) {
   var ref = react$1.useRef({
     indeterminate: false
@@ -536,12 +312,9 @@ var Checkbox = function Checkbox(props) {
       ref.current.indeterminate = true;
     }
   }, [props.isIndeterminate]);
-  var onChange = props.onChange;
-  var handleChange = react$1.useCallback(function (event) {
-    return !props.isReadOnly && onChange && onChange(event);
-  }, [props.isReadOnly, onChange]);
-  return jsxRuntime.jsx(Input // @ts-ignore
-  , _objectSpread$1(_objectSpread$1(_objectSpread$1(_objectSpread$1({
+  return jsxRuntime.jsx("input", _objectSpread$1(_objectSpread$1(_objectSpread$1({
+    type: "checkbox" // @ts-ignore
+    ,
     ref: ref
   }, utils.filterDataAttributes(props)), utils.filterAriaAttributes(props)), {}, {
     /* ARIA */
@@ -553,19 +326,17 @@ var Checkbox = function Checkbox(props) {
     value: props.value,
     disabled: props.isDisabled || props.isReadOnly,
     readOnly: props.isReadOnly,
-    checked: props.isChecked && !props.isIndeterminate
-  }, props), {}, {
-    onChange: handleChange
+    checked: props.isChecked && !props.isIndeterminate,
+    onChange: !props.isReadOnly ? props.onChange : undefined
   }));
 };
 
-Checkbox.propTypes = {};
 Checkbox.displayName = 'Checkbox';
 var Checkbox$1 = Checkbox;
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 var sequentialId = utils.createSequentialId('checkbox-input-');
 var defaultProps = {
   isChecked: false,
@@ -573,25 +344,114 @@ var defaultProps = {
   hasError: false
 };
 
-var hoverStyles = function hoverStyles(props) {
-  if (!props.hasError && !props.readOnly && !props.disabled) {
-    return /*#__PURE__*/react.css("&:hover svg *[data-style='checkbox__border']{stroke:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" );
+var getBorderColor = function getBorderColor(props) {
+  if (props.hasError) {
+    return designSystem.designTokens.borderColorForCheckboxInputIconWhenError;
+  }
+
+  if (props.isDisabled) {
+    return designSystem.designTokens.borderColorForCheckboxInputIconWhenDisabled;
+  }
+
+  if (props.isReadOnly) {
+    return designSystem.designTokens.borderColorForCheckboxInputIconWhenReadonly;
   }
 
-  return /*#__PURE__*/react.css("" , "" );
+  return designSystem.designTokens.borderColorForCheckboxInputIcon;
+};
+
+var getBackgroundColor = function getBackgroundColor(props) {
+  if (props.isChecked || props.isIndeterminate) {
+    if (props.hasError) {
+      return designSystem.designTokens.backgroundColorForCheckboxInputIconWhenError;
+    }
+
+    if (props.isDisabled) {
+      return designSystem.designTokens.backgroundColorForCheckboxInputIconWhenDisabled;
+    }
+
+    if (props.isReadOnly) {
+      return designSystem.designTokens.backgroundColorForCheckboxInputIconWhenReadonly;
+    }
+
+    return designSystem.designTokens.backgroundColorForCheckboxInputIcon;
+  }
+
+  return designSystem.designTokens.colorSurface;
+};
+
+var getTextColor = function getTextColor(props) {
+  if (props.hasError) {
+    return designSystem.designTokens.fontColorForCheckboxInputLabelWhenError;
+  }
+
+  if (props.isDisabled) {
+    return designSystem.designTokens.fontColorForCheckboxInputLabelWhenDisabled;
+  }
+
+  if (props.isReadOnly) {
+    return designSystem.designTokens.fontColorForCheckboxInputLabelWhenReadonly;
+  }
+
+  return designSystem.designTokens.fontColorForCheckboxInputLabel;
 };
 
 var LabelTextWrapper = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e6nn4mw2"
+} )("margin-left:calc(\n    ", designSystem.designTokens.spacing20, " - ", designSystem.designTokens.borderWidthForCheckboxInputIcon, "\n  );outline:none;border-radius:", designSystem.designTokens.borderRadiusForTag, ";font-size:", designSystem.designTokens.fontSizeForTextAsBody, ";line-height:", designSystem.designTokens.lineHeightForTextAsBody, ";font-weight:", designSystem.designTokens.fontWeightForTextAsBody, ";color:", function (props) {
+  return getTextColor(props);
+}, ";" + ("" ));
+
+var CheckboxIconWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e6nn4mw1"
-} )("margin-left:", designSystem.designTokens.spacing20, ";outline:none;border-radius:", designSystem.designTokens.borderRadiusForTag, ";" + ("" ));
+} )("width:", function (props) {
+  return props.width;
+}, ";height:", function (props) {
+  return props.height;
+}, ";display:flex;align-items:center;justify-content:center;border-radius:", designSystem.designTokens.borderRadius6, ";", function (props) {
+  return props.isHovered ? /*#__PURE__*/react.css("background-color:", designSystem.designTokens.backgroundColorForCheckboxInputIconWhenHovered, ";" + ("" ), "" ) : '';
+}, ";" + ("" ));
+
+var CheckboxIcon = function CheckboxIcon(props) {
+  var _context;
+
+  var _useTheme = designSystem.useTheme(),
+      isNewTheme = _useTheme.isNewTheme,
+      themedValue = _useTheme.themedValue;
+
+  var isDisabledOrReadOnlyState = props.isDisabled || props.isReadOnly;
+  var isDefaultState = !(props.hasError || isDisabledOrReadOnlyState);
+  var canForcedHoverEffect = Boolean(props.isHovered && !isDisabledOrReadOnlyState);
+  return jsxRuntime.jsx(CheckboxIconWrapper, {
+    width: themedValue('auto', '26px'),
+    height: themedValue('auto', '26px'),
+    isHovered: canForcedHoverEffect,
+    children: jsxRuntime.jsx("div", {
+      css: _filterInstanceProperty__default["default"](_context = [/*#__PURE__*/react.css("border-width:", designSystem.designTokens.borderWidthForCheckboxInputIcon, ";border-radius:", designSystem.designTokens.borderRadius2, ";border-color:", getBorderColor(props), ";border-style:solid;background-color:", getBackgroundColor(props), ";padding:1px;width:", themedValue('16px', '18px'), ";height:", themedValue('16px', '18px'), ";display:flex;align-items:center;justify-content:center;svg>path[stroke]{stroke:", themedValue(designSystem.designTokens.colorPrimary, designSystem.designTokens.colorSurface), ";}" + ("" ), "" ), !isNewTheme && /*#__PURE__*/react.css("svg>path[fill]{fill:", getTextColor(props), ";}svg>path[stroke]{stroke:", getTextColor(props), ";}" + ("" ), "" ), !isNewTheme && isDefaultState && /*#__PURE__*/react.css("svg>path[fill]{fill:", designSystem.designTokens.colorPrimary, ";}svg>path[stroke]{stroke:", designSystem.designTokens.colorPrimary, ";}&:hover{border-color:", isDisabledOrReadOnlyState ? 'unset' : designSystem.designTokens.colorPrimary, ";}" + ("" ), "" ), !isNewTheme && canForcedHoverEffect && /*#__PURE__*/react.css("border-color:", designSystem.designTokens.colorPrimary, ";" + ("" ), "" )]).call(_context, Boolean),
+      children: function () {
+        if (props.isIndeterminate) return jsxRuntime.jsx(IndeterminateIcon$1, {
+          color: themedValue('primary', 'surface'),
+          size: "scale"
+        });
+        if (props.isChecked) return jsxRuntime.jsx(CheckedIcon$1, {
+          color: themedValue('primary', 'surface'),
+          size: "scale"
+        });
+        return null;
+      }()
+    })
+  });
+};
 
 var Label = /*#__PURE__*/_styled__default["default"]("label", {
   target: "e6nn4mw0"
 } )("display:flex;align-items:center;cursor:", function (props) {
-  if (props.disabled) return 'not-allowed';
-  if (props.readOnly) return 'default';
+  if (props.isDisabled) return 'not-allowed';
+  if (props.isReadOnly) return 'default';
   return 'pointer';
-}, ";position:relative;", hoverStyles, " &:focus-within div{box-shadow:0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ));
+}, ";position:relative;&:focus-within ", LabelTextWrapper, "{box-shadow:0 0 0 2px ", designSystem.designTokens.borderColorForInputWhenFocused, ";}&:hover ", CheckboxIconWrapper, "{background-color:", function (props) {
+  return props.isDisabled || props.isReadOnly ? 'unset' : designSystem.designTokens.backgroundColorForCheckboxInputIconWhenHovered;
+}, ";}" + ("" ));
 
 var CheckboxInput = function CheckboxInput(props) {
   // We generate an id in case no id is provided by the parent to attach the
@@ -600,40 +460,30 @@ var CheckboxInput = function CheckboxInput(props) {
   return jsxRuntime.jsxs(Label, {
     htmlFor: id,
     hasError: props.hasError,
-    disabled: props.isDisabled,
-    readOnly: props.isReadOnly,
-    children: [jsxRuntime.jsx(Checkbox$1, _objectSpread(_objectSpread({
-      type: "checkbox",
-      id: id,
-      name: props.name,
-      value: props.value,
-      onChange: props.onChange,
+    isDisabled: props.isDisabled,
+    isReadOnly: props.isReadOnly,
+    isChecked: props.isChecked,
+    isHovered: props.isHovered,
+    isIndeterminate: props.isIndeterminate,
+    children: [jsxRuntime.jsx(Checkbox$1, _objectSpread(_objectSpread({}, props), {}, {
+      id: id
+    })), jsxRuntime.jsx(CheckboxIcon, {
+      hasError: props.hasError,
       isDisabled: props.isDisabled,
       isReadOnly: props.isReadOnly,
       isChecked: props.isChecked,
+      isHovered: props.isHovered,
       isIndeterminate: props.isIndeterminate
-    }, utils.filterDataAttributes(props)), utils.filterAriaAttributes(props))), jsxRuntime.jsx("div", {
-      css: getCheckboxWrapperStyles(props),
-      children: function () {
-        if (props.isIndeterminate) return jsxRuntime.jsx(IndeterminateIcon$1, {
-          size: "medium"
-        });
-        if (props.isChecked) return jsxRuntime.jsx(CheckedIcon$1, {
-          size: "medium"
-        });
-        return jsxRuntime.jsx(UncheckedIcon$1, {
-          size: "medium"
-        });
-      }()
-    }), props.children && jsxRuntime.jsx(LabelTextWrapper // To allow focusing the Label in readOnly mode, because the checkbox gets disabled and therefore unfocusable
-    , {
+    }), props.children && jsxRuntime.jsx(LabelTextWrapper, {
+      hasError: props.hasError,
+      isDisabled: props.isDisabled,
+      isReadOnly: props.isReadOnly,
+      isChecked: props.isChecked,
+      isHovered: props.isHovered,
+      isIndeterminate: props.isIndeterminate // To allow focusing the Label in readOnly mode, because the checkbox gets disabled and therefore unfocusable
+      ,
       tabIndex: props.isReadOnly ? 0 : -1,
-      children: jsxRuntime.jsx(Text__default["default"].Body, {
-        as: "span" // FIXME: add proper tones when we have disabled/primary in tones
-        ,
-        tone: props.isDisabled ? 'secondary' : undefined,
-        children: props.children
-      })
+      children: props.children
     })]
   });
 };
@@ -644,7 +494,7 @@ CheckboxInput.defaultProps = defaultProps;
 var CheckboxInput$1 = CheckboxInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "15.12.0";
+var version = "15.13.0";
 
 exports["default"] = CheckboxInput$1;
 exports.version = version;