@occmundial/occ-atomic 2.0.0 → 3.0.0-beta.10

package/CHANGELOG.md

@@ -1,3 +1,112 @@
+# [3.0.0-beta.10](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.9...v3.0.0-beta.10) (2024-06-06)
+
+
+### Features
+
+* Checkbox redesigned and documentation created ([48fbc8d](https://github.com/occmundial/occ-atomic/commit/48fbc8d0a912c300324fe244e9692a49f3a152b5))
+* Remove updates to component ([ab71716](https://github.com/occmundial/occ-atomic/commit/ab71716991a7700134dbafe0d8eda63e18ff8eab))
+
+# [3.0.0-beta.9](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.8...v3.0.0-beta.9) (2024-06-06)
+
+
+### Bug Fixes
+
+* Move use memo before early return ([3d290c9](https://github.com/occmundial/occ-atomic/commit/3d290c9675fb24e20d131fdbaeef023920f3e439))
+
+# [3.0.0-beta.8](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.7...v3.0.0-beta.8) (2024-06-06)
+
+
+### Bug Fixes
+
+* Add border for promote alert ([5050f18](https://github.com/occmundial/occ-atomic/commit/5050f187b60f98118654ecbbe3e2cba7b29790ab))
+* Add min height to tip container ([579d263](https://github.com/occmundial/occ-atomic/commit/579d26306d59ce73b5084f9cd632dd12ed162fc5))
+* Resolve conflicts ([0a15dfa](https://github.com/occmundial/occ-atomic/commit/0a15dfa8d8da38a724d71622809f0e02c5bed0e9))
+
+
+### Features
+
+* Render tip in banner component ([239e2c8](https://github.com/occmundial/occ-atomic/commit/239e2c82c23d79698bd912931b314ceddf252fb4))
+* Update tip component with new design tokens ([b2367fc](https://github.com/occmundial/occ-atomic/commit/b2367fcaade288609df4c841c91fb308841ae4b0))
+
+
+### Performance Improvements
+
+* Memoize text replace in tip text component ([69180ce](https://github.com/occmundial/occ-atomic/commit/69180ce9cb1e812769e31a837257d8c8e6f24199))
+
+# [3.0.0-beta.7](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.6...v3.0.0-beta.7) (2024-06-06)
+
+
+### Bug Fixes
+
+* Fix radio styles and add a form nav behavior ([59f0320](https://github.com/occmundial/occ-atomic/commit/59f03207a45b1ec27e02970668cffe2cfd5931a9))
+* Ignore tab index if radio element is disabled ([e479098](https://github.com/occmundial/occ-atomic/commit/e4790982a127408a474f688a4647612ef8fbb446))
+
+# [3.0.0-beta.6](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.5...v3.0.0-beta.6) (2024-06-05)
+
+
+### Bug Fixes
+
+* Text new emphasis props ([bc3e934](https://github.com/occmundial/occ-atomic/commit/bc3e934299230cb0b3a0fddeb4c8fcd2b72a052f))
+
+# [3.0.0-beta.5](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.4...v3.0.0-beta.5) (2024-06-04)
+
+
+### Bug Fixes
+
+* Remove fixed size for right-side icon in button ([1228467](https://github.com/occmundial/occ-atomic/commit/1228467ba0d107bba0e70603c28a3ccffaec306b))
+
+# [3.0.0-beta.4](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.3...v3.0.0-beta.4) (2024-06-04)
+
+
+### Bug Fixes
+
+* Make toggle unshrinkable inside a flex box ([6067fba](https://github.com/occmundial/occ-atomic/commit/6067fbad2276824bcec0c35748beea0006b73300))
+
+# [3.0.0-beta.3](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.2...v3.0.0-beta.3) (2024-05-30)
+
+
+### Bug Fixes
+
+* Remove bg from group pill on focus ([6cdb2f1](https://github.com/occmundial/occ-atomic/commit/6cdb2f1573b6a297810d4e075c462ccc2b9140b1))
+* Remove repeated selectors and change usecallback dependencies ([4d23be0](https://github.com/occmundial/occ-atomic/commit/4d23be0f88672df2e3c39578e3a4638385c23594))
+* Resolve conflicts with beta ([0e51771](https://github.com/occmundial/occ-atomic/commit/0e5177122818b55d51a28d013c10164f18abaf97))
+
+
+### Features
+
+* Disabled all group items when pill disabled prop is true ([922cb8a](https://github.com/occmundial/occ-atomic/commit/922cb8a0146f21a0ad3a49da87321a3ebc6c6feb))
+* Update pill styles with design tokens ([a6caadc](https://github.com/occmundial/occ-atomic/commit/a6caadc0170b290865332278fa4b3850ee452faa))
+
+# [3.0.0-beta.2](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.1...v3.0.0-beta.2) (2024-05-28)
+
+
+### Features
+
+* Updated toogle component and documentation ([fad2eca](https://github.com/occmundial/occ-atomic/commit/fad2eca12daa8802b85b5f35bab564b90ce9bd10))
+
+# [3.0.0-beta.1](https://github.com/occmundial/occ-atomic/compare/v2.0.0...v3.0.0-beta.1) (2024-05-27)
+
+
+### Bug Fixes
+
+* Add events to Button ([cbac2b8](https://github.com/occmundial/occ-atomic/commit/cbac2b8a19cc93c76529a2aa4f91a685a5b7f9c7))
+* Change icon size ([2b6affe](https://github.com/occmundial/occ-atomic/commit/2b6affe0c6a40c080ebd9281dc8b4901aaffe4c4))
+* Change text component for html tags for text in droplist ([50f4972](https://github.com/occmundial/occ-atomic/commit/50f4972c306351416efe83700a6d4dcffa83f259))
+* Resolve merge conflicts ([b771fab](https://github.com/occmundial/occ-atomic/commit/b771fab5304a66febe94bc808eb383f7b1d47741))
+* Update snapshots ([6f32f65](https://github.com/occmundial/occ-atomic/commit/6f32f65188207312c1fa26ce2e4ffd4338ac99cf))
+
+
+### Features
+
+* Update Autocomplete styles ([fa449be](https://github.com/occmundial/occ-atomic/commit/fa449be2322c75857e6350ee9dee596cd441b033))
+* Update droplist styles with new design tokens ([27fdaf2](https://github.com/occmundial/occ-atomic/commit/27fdaf288e82a8493eb05d0315f4385585e71a04))
+* Update TextField styles ([0d0218e](https://github.com/occmundial/occ-atomic/commit/0d0218ea0df146da1b07482676eb99ad57d186b7))
+
+
+### BREAKING CHANGES
+
+* Remove the lockHeight and searchField properties
+
 # [2.0.0](https://github.com/occmundial/occ-atomic/compare/v1.39.1...v2.0.0) (2024-05-27)
 
 
@@ -55,6 +164,45 @@
 
 * The themes of the Button component have changed to match the styles of the button in the new design system. The current themes have slightly different names to the new ones but they all have a corresponding new theme that matches, except for the ghostPink theme.
 
+# [2.0.0-beta.19](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.18...v2.0.0-beta.19) (2024-05-27)
+
+
+### Features
+
+* Update Autocomplete styles ([fa449be](https://github.com/occmundial/occ-atomic/commit/fa449be2322c75857e6350ee9dee596cd441b033))
+
+# [2.0.0-beta.18](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.17...v2.0.0-beta.18) (2024-05-21)
+
+
+### Bug Fixes
+
+* Change icon size ([2b6affe](https://github.com/occmundial/occ-atomic/commit/2b6affe0c6a40c080ebd9281dc8b4901aaffe4c4))
+* Change text component for html tags for text in droplist ([50f4972](https://github.com/occmundial/occ-atomic/commit/50f4972c306351416efe83700a6d4dcffa83f259))
+* Resolve merge conflicts ([b771fab](https://github.com/occmundial/occ-atomic/commit/b771fab5304a66febe94bc808eb383f7b1d47741))
+* Update snapshots ([6f32f65](https://github.com/occmundial/occ-atomic/commit/6f32f65188207312c1fa26ce2e4ffd4338ac99cf))
+
+
+### Features
+
+* Update droplist styles with new design tokens ([27fdaf2](https://github.com/occmundial/occ-atomic/commit/27fdaf288e82a8493eb05d0315f4385585e71a04))
+
+# [2.0.0-beta.17](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.16...v2.0.0-beta.17) (2024-05-21)
+
+
+### Bug Fixes
+
+* Add events to Button ([cbac2b8](https://github.com/occmundial/occ-atomic/commit/cbac2b8a19cc93c76529a2aa4f91a685a5b7f9c7))
+
+
+### Features
+
+* Update TextField styles ([0d0218e](https://github.com/occmundial/occ-atomic/commit/0d0218ea0df146da1b07482676eb99ad57d186b7))
+
+
+### BREAKING CHANGES
+
+* Remove the lockHeight and searchField properties
+
 # [2.0.0-beta.16](https://github.com/occmundial/occ-atomic/compare/v2.0.0-beta.15...v2.0.0-beta.16) (2024-05-14)
 
 

package/build/Autocomplete/Autocomplete.js

@@ -243,7 +243,8 @@ Autocomplete.propTypes = {
     className: _propTypes["default"].string,
     inputClassName: _propTypes["default"].string,
     disabled: _propTypes["default"].bool,
-    testId: _propTypes["default"].string
+    testId: _propTypes["default"].string,
+    disableAutoComplete: _propTypes["default"].bool
   }).isRequired,
 
   /** Object with the props for the Droplist component. Check their descriptions in the Droplist docs. */
@@ -279,9 +280,6 @@ Autocomplete.propTypes = {
   /** Function to call on mouse down (Droplist item). */
   onMouseDown: _propTypes["default"].func,
   onRef: _propTypes["default"].func,
-
-  /**  Disables native autoComplete on browsers. */
-  disableAutoComplete: _propTypes["default"].bool,
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object,
@@ -292,7 +290,6 @@ Autocomplete.propTypes = {
 Autocomplete.defaultProps = {
   textfieldProps: {},
   droplistProps: {},
-  disableAutoComplete: false,
   showInitialData: false
 };
 var _default = Autocomplete;

package/build/Autocomplete/Autocomplete.test.js

@@ -36,7 +36,7 @@ var items = [{
   textRight: '(6)',
   id: 4
 }];
-describe("Autocomplete", function () {
+describe('Autocomplete', function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       droplistProps: {
@@ -64,7 +64,7 @@ describe("Autocomplete", function () {
     expect(wrapper.find('.input').at(0).length).toBe(1);
     expect(wrapper.find('.droplist').at(0).length).toBe(1);
   });
-  it('hides the droplist when there\'s no value or the input has no focus', function () {
+  it("hides the droplist when there's no value or the input has no focus", function () {
     var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react["default"].createElement(_Autocomplete["default"], {
       textfieldProps: {
         valueProp: 'a',
@@ -147,14 +147,17 @@ describe("Autocomplete", function () {
       },
       droplistProps: {
         items: items,
-        className: 'droplist'
+        className: 'droplist',
+        testId: 'test-component'
       },
       classes: classes
     }));
     wrapper.setState({
       focus: true
     });
-    wrapper.find('.Droplist-item-0-1-34').at(0).simulate('mousedown');
+    wrapper.find({
+      "data-testid": 'test-component__droplist-item-0'
+    }).simulate('mousedown');
     expect(onMouseDown.mock.calls[0][0]).toEqual({
       id: 1,
       text: 'Administrador',
@@ -164,7 +167,9 @@ describe("Autocomplete", function () {
       focus: true,
       value: 'a'
     });
-    wrapper.find('.Droplist-item-0-1-34').at(1).simulate('mousedown');
+    wrapper.find({
+      "data-testid": 'test-component__droplist-item-1'
+    }).simulate('mousedown');
     expect(onMouseDown.mock.calls[1][0]).toEqual({
       id: 2,
       text: 'Administrador Sr',
@@ -202,14 +207,17 @@ describe("Autocomplete", function () {
       },
       droplistProps: {
         items: items,
-        className: 'droplist'
+        className: 'droplist',
+        testId: "test-component"
       },
       classes: classes
     }));
     wrapper.setState({
       focus: true
     });
-    wrapper.find('.Droplist-item-0-1-34').at(0).simulate('mousedown');
+    wrapper.find({
+      "data-testid": 'test-component__droplist-item-0'
+    }).simulate('mousedown');
     expect(onMouseDown.mock.calls.length).toBe(1);
   });
   it('calls the onFocus function', function () {
@@ -247,7 +255,7 @@ describe("Autocomplete", function () {
     expect(onBlur.mock.calls.length).toBe(1);
   });
 });
-describe("AutocompleteJSS", function () {
+describe('AutocompleteJSS', function () {
   it('matches the snapshot', function () {
     var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react["default"].createElement(_index["default"], {
       droplistProps: {
@@ -258,7 +266,7 @@ describe("AutocompleteJSS", function () {
     expect(wrapper).toMatchSnapshot();
   });
 });
-describe("Autocomplete styles", function () {
+describe('Autocomplete styles', function () {
   it('matches the snapshot', function () {
     expect(_styles["default"]).toMatchSnapshot();
   });

package/build/Autocomplete/styles.js

@@ -7,8 +7,6 @@ exports["default"] = void 0;
 
 var _idx = _interopRequireDefault(require("idx"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var _default = {
@@ -20,10 +18,12 @@ var _default = {
     zIndex: 2,
     top: function top(props) {
       return (0, _idx["default"])(props, function (_) {
-        return _.textfieldProps.label;
+        return _.textfieldProps.assistiveText;
       }) || (0, _idx["default"])(props, function (_) {
-        return _.textfieldProps.lockHeight;
-      }) ? _spacing["default"].xLarge : 40;
+        return _.textfieldProps.counter;
+      }) && (0, _idx["default"])(props, function (_) {
+        return _.textfieldProps.maxLength;
+      }) ? 'calc(100% - 21px)' : 'calc(100% + 8px)';
     },
     left: 0,
     width: '100%'

package/build/Banner/Banner.js

@@ -9,17 +9,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Flexbox = _interopRequireDefault(require("../Flexbox"));
-
-var _WindowSize = _interopRequireDefault(require("../WindowSize"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _Icon = _interopRequireDefault(require("../Icon"));
-
 var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _Tip = _interopRequireDefault(require("../Tip"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -27,38 +19,27 @@ var Banner = function Banner(_ref) {
   var id = _ref.id,
       style = _ref.style,
       className = _ref.className,
-      classes = _ref.classes,
       children = _ref.children,
       onClose = _ref.onClose,
-      winWidth = _ref.winWidth;
-  var isMobile = winWidth < _grid["default"].xs;
-  return /*#__PURE__*/_react["default"].createElement("div", {
+      winWidth = _ref.winWidth,
+      cta = _ref.cta,
+      _ref$theme = _ref.theme,
+      theme = _ref$theme === void 0 ? 'promote' : _ref$theme;
+  return /*#__PURE__*/_react["default"].createElement(_Tip["default"], {
     id: id,
+    style: style,
     className: className,
-    style: style
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    display: "flex",
-    className: classes.container
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    flex: "1",
-    className: classes.textFlex
-  }, /*#__PURE__*/_react["default"].createElement(_Text["default"], {
-    white: true,
-    small: isMobile,
-    tag: "div",
-    className: classes.textBanner
-  }, children)), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
-    className: classes.iconFlex
-  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
-    iconName: "close",
-    colors: [_colors["default"].bgWhite],
-    onClick: onClose,
-    className: classes.icon
-  }))));
+    onClose: onClose,
+    size: winWidth < _grid["default"].xs ? 'small' : 'large',
+    center: true,
+    type: "banner",
+    cta: cta,
+    theme: theme,
+    icon: true
+  }, children);
 };
 
 Banner.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
   winWidth: _propTypes["default"].number,
 
   /** Text of the tip. If you put text between two * characters that text will be displayed as bold. */
@@ -68,9 +49,14 @@ Banner.propTypes = {
   id: _propTypes["default"].string,
   className: _propTypes["default"].string,
   style: _propTypes["default"].object,
-  onClose: _propTypes["default"].func
+  onClose: _propTypes["default"].func,
+  cta: _propTypes["default"].shape({
+    text: _propTypes["default"].string,
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].string,
+    onClick: _propTypes["default"].func
+  }),
+  theme: _propTypes["default"].oneOf(['info', 'warning', 'success', 'error', 'promote'])
 };
-
-var _default = (0, _WindowSize["default"])(Banner);
-
+var _default = Banner;
 exports["default"] = _default;

package/build/Button/Button.js

@@ -17,6 +17,8 @@ var _Icon = _interopRequireDefault(require("../Icon"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -66,6 +68,9 @@ var Button = /*#__PURE__*/function (_React$Component) {
           target = _this$props.target,
           rel = _this$props.rel,
           onClick = _this$props.onClick,
+          onMouseDown = _this$props.onMouseDown,
+          onMouseUp = _this$props.onMouseUp,
+          onMouseOut = _this$props.onMouseOut,
           theme = _this$props.theme,
           size = _this$props.size,
           block = _this$props.block,
@@ -112,26 +117,33 @@ var Button = /*#__PURE__*/function (_React$Component) {
         width: iconSize,
         height: iconSize
       })) : null;
+      var eventProps = !disabled ? {
+        onClick: onClick,
+        onMouseDown: onMouseDown,
+        onMouseUp: onMouseUp,
+        onMouseOut: onMouseOut
+      } : {};
 
       if (href) {
-        return /*#__PURE__*/_react["default"].createElement("a", {
+        return /*#__PURE__*/_react["default"].createElement("a", _extends({
           className: classNames,
           href: !disabled ? href : '',
           target: target,
-          rel: rel,
-          onClick: !disabled ? onClick : null,
+          rel: rel
+        }, eventProps, {
           id: id,
           style: style,
           "data-testid": testId
-        }, content, loadingLayer);
+        }), content, loadingLayer);
       } else {
-        return /*#__PURE__*/_react["default"].createElement("button", {
+        return /*#__PURE__*/_react["default"].createElement("button", _extends({
           className: classNames,
-          onClick: !disabled ? onClick : null,
+          disabled: disabled
+        }, eventProps, {
           id: id,
           style: style,
           "data-testid": testId
-        }, content, loadingLayer);
+        }), content, loadingLayer);
       }
     }
   }]);
@@ -176,6 +188,15 @@ Button.propTypes = {
   /** The function to call when the button is clicked. */
   onClick: _propTypes["default"].func,
 
+  /** The function to call when the mouse is down on the button. */
+  onMouseDown: _propTypes["default"].func,
+
+  /** The function to call when the mouse is up on the button. */
+  onMouseUp: _propTypes["default"].func,
+
+  /** The function to call when the mouse moves out of the button. */
+  onMouseOut: _propTypes["default"].func,
+
   /** Optionally, you can set the href property and use it like a link. */
   href: _propTypes["default"].string,
 

package/build/Button/__snapshots__/Button.test.js.snap

@@ -145,10 +145,8 @@ Object {
   },
   "iconRight": Object {
     "display": "inline-block",
-    "height": 16,
     "marginLeft": "8px",
     "transition": "0.3s all",
-    "width": 16,
   },
   "lg": Object {
     "&$iconOnly": Object {

package/build/Button/styles.js

@@ -346,8 +346,6 @@ var _default = {
     transition: '0.3s all'
   },
   iconRight: {
-    width: 16,
-    height: 16,
     marginLeft: _spacing["default"]['size-2'],
     display: 'inline-block',
     transition: '0.3s all'

package/build/Checkbox/Checkbox.js

@@ -101,6 +101,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
       var iconClass = undetermined ? " ".concat(classes.undetermined) : value ? " ".concat(classes.active) : '';
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         id: id,
+        tabIndex: -1,
         className: "".concat(classes.cont).concat(iconClass).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
         onClick: this.toggle,
         style: style,

package/build/Checkbox/__snapshots__/Checkbox.test.js.snap

@@ -6,67 +6,101 @@ exports[`Checkbox styles matches the snapshot 1`] = `
 Object {
   "active": Object {
     "& $check:after": Object {
-      "background": Array [
-        "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwODNjYWUiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
-        "!important",
-      ],
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
+    },
+    "& $check:before": Object {
+      "background": "#0059CD",
+      "borderColor": "rgba(255,255,255,0.2)",
     },
   },
   "check": Object {
     "&:after": Object {
       "background": "transparent",
+      "boxSizing": "border-box",
       "content": "\\"\\"",
-      "height": 18,
+      "height": 20,
       "left": "50%",
       "marginTop": -1,
       "position": "absolute",
       "top": "50%",
       "transform": "translate(-50%, -50%)",
       "transition": "0.3s all",
-      "width": 18,
+      "width": 20,
     },
     "&:before": Object {
-      "background": "#ffffff",
-      "border": "1px solid #dddddd",
-      "borderRadius": 4,
+      "background": "#fff",
+      "border": "1px solid #D3D4DC",
+      "borderRadius": "4px",
+      "boxSizing": "border-box",
       "content": "\\"\\"",
-      "height": 16,
+      "height": 20,
       "left": "50%",
       "position": "absolute",
       "top": "50%",
       "transform": "translate(-50%, -50%)",
-      "width": 16,
+      "width": 20,
     },
-    "height": 24,
+    "height": "24px",
     "position": "relative",
-    "width": 24,
+    "width": "24px",
   },
   "cont": Object {
+    "&$active, &$undetermined": Object {
+      "&:hover $check:before, &:active $check:before": Object {
+        "background": "#083CAE",
+      },
+    },
     "&:after": Object {
       "clear": "both",
       "content": "\\"\\"",
       "display": "table",
     },
-    "&:hover $check:after": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiNkZGRkZGQiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
+    "&:focus $check:before": Object {
+      "borderWidth": 1,
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    },
+    "&:not($active), &:not($undetermined)": Object {
+      "&:active $check:before": Object {
+        "borderWidth": 2,
+      },
+      "&:hover $check:before, &:active $check:before": Object {
+        "borderColor": "#6C6F89",
+      },
     },
     "alignItems": "start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": "0",
-    "paddingBottom": 8,
-    "paddingTop": 8,
+    "paddingBottom": "8px",
+    "paddingTop": "8px",
   },
   "disabled": Object {
-    "opacity": 0.4,
+    "&$active $check:after": Object {
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiM4REE1REEiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
+    },
+    "&$active, &$undetermined": Object {
+      "& $check:before": Object {
+        "background": "hsl(221 91.2% 35.7% / 0.1)",
+        "borderColor": "rgba(255,255,255,0.2)",
+      },
+    },
+    "&$undetermined $check:after": Object {
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSI1LjMsMTMuMyA1LjMsMTAuNyAxOC43LDEwLjcgMTguNywxMy4zICIgZmlsbD0iIzhEQTVEQSIgLz4KICAgICAgICA8L3N2Zz4=)",
+    },
+    "&:not($active), &:not($undetermined)": Object {
+      "& $check:before": Object {
+        "background": "#EDEDF1",
+        "borderColor": "#D3D4DC",
+      },
+    },
     "pointerEvents": "none",
   },
   "label": Object {
     "cursor": "pointer",
     "flex": "1",
     "float": "left",
-    "marginLeft": 8,
+    "marginLeft": "8px",
   },
   "overflow": Object {
     "overflow": "hidden",
@@ -75,16 +109,17 @@ Object {
   },
   "right": Object {
     "float": "right",
-    "marginLeft": 8,
+    "marginLeft": "8px",
   },
   "undetermined": Object {
     "& $check:after": Object {
-      "background": Array [
-        "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSI1LjMsMTMuMyA1LjMsMTAuNyAxOC43LDEwLjcgMTguNywxMy4zICIgZmlsbD0iIzA4M2NhZSIgLz4KICAgICAgICA8L3N2Zz4=)",
-        "!important",
-      ],
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSI1LjMsMTMuMyA1LjMsMTAuNyAxOC43LDEwLjcgMTguNywxMy4zICIgZmlsbD0iI2ZmZiIgLz4KICAgICAgICA8L3N2Zz4=)",
       "marginTop": 0,
     },
+    "& $check:before": Object {
+      "background": "#0059CD",
+      "borderColor": "rgba(255,255,255,0.2)",
+    },
   },
 }
 `;