@occmundial/occ-atomic 3.0.0-beta.7 → 3.0.0-beta.71

package/build/Button/styles.js

@@ -27,7 +27,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var sec = _colors["default"].sec,
     secDark = _colors["default"].secDark,
-    grey500 = _colors["default"].grey500,
     secLight = _colors["default"].secLight;
 var sm = _fonts2["default"]['button-small'];
 var md = _fonts2["default"]['button-medium'];
@@ -102,22 +101,18 @@ var _default = {
     '&:focus': {
       outline: "2px solid ".concat(_colors2["default"].button.primary.border["default"])
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-pink']
     },
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.inverse["default"]
+    },
     '&$disabled': {
       background: _colors2["default"].button.primary.bg.disabled,
       color: _colors2["default"].text.white.secondary,
-      cursor: 'not-allowed'
-    },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
-      }
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
+      cursor: 'not-allowed',
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.inverse.disabled
       }
     }
   },
@@ -130,21 +125,17 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.secondary.bg.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-indigo']
     },
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.brand["default"]
+    },
     '&$disabled': {
       background: _colors2["default"].button.secondary.bg.disabled,
-      color: _colors2["default"].text.indigo.secondary
-    },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.brand["default"]]);
-      }
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.brand.disabled]);
+      color: _colors2["default"].text.indigo.secondary,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.brand.disabled
       }
     },
     '& $loadIcon': {
@@ -165,22 +156,18 @@ var _default = {
     '&:focus': {
       outline: "2px solid ".concat(_colors2["default"].button.tertiary.border["default"])
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-indigo']
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.brand["default"]]);
-      }
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.brand["default"]
     },
     '&$disabled': {
       background: 'transparent',
       color: _colors2["default"].text.indigo.secondary,
-      outline: "2px solid ".concat(_colors2["default"].button.tertiary.border.disabled)
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.brand.disabled]);
+      outlineColor: _colors2["default"].button.tertiary.border.disabled,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.brand.disabled
       }
     },
     '& $loadIcon': {
@@ -201,21 +188,18 @@ var _default = {
     '&:focus': {
       outline: "2px solid ".concat(_colors2["default"].button.tertiary.border.inverse["default"])
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-white']
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
-      }
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.inverse["default"]
     },
     '&$disabled': {
       background: 'transparent',
-      color: _colors2["default"].text.white.secondary
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
+      color: _colors2["default"].text.white.secondary,
+      outlineColor: _colors2["default"].button.tertiary.border.inverse.disabled,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.inverse.disabled
       }
     }
   },
@@ -233,20 +217,10 @@ var _default = {
         }
       }
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [sec]);
-      }
-    },
     '&$disabled': {
       background: "transparent !important",
       color: "".concat(secLight, " !important"),
-      border: "none !important",
-      '& span span': {
-        background: function background(props) {
-          return renderIcon(props, [grey500]);
-        }
-      }
+      border: "none !important"
     },
     '& $loadIcon': {
       fill: sec
@@ -261,21 +235,17 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.ghost.bg.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-corp']
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon["default"]["default"]]);
-      }
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon["default"]["default"]
     },
     '&$disabled': {
       background: 'transparent',
-      color: _colors2["default"].text.corp.disabled
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon["default"].disabled]);
+      color: _colors2["default"].text.corp.disabled,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon["default"].disabled
       }
     },
     '& $loadIcon': {
@@ -291,21 +261,17 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.ghost.bg.inverse.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-white']
     },
-    '& span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse["default"]]);
-      }
+    '& $icon, & $iconRight': {
+      fill: _colors2["default"].icon.inverse["default"]
     },
     '&$disabled': {
       background: 'transparent',
-      color: _colors2["default"].text.white.secondary
-    },
-    '&$disabled span span': {
-      background: function background(props) {
-        return renderIcon(props, [_colors2["default"].icon.inverse.disabled]);
+      color: _colors2["default"].text.white.secondary,
+      '& $icon, & $iconRight': {
+        fill: _colors2["default"].icon.inverse.disabled
       }
     }
   },
@@ -353,7 +319,8 @@ var _default = {
   iconOnly: {
     padding: [_spacing["default"]['size-2'], _spacing["default"]['size-2']],
     '& span span, & svg': {
-      marginRight: 0
+      marginRight: 0,
+      marginLeft: 0
     }
   },
   loadIcon: {

package/build/Checkbox/Checkbox.js

@@ -13,6 +13,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
 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); }
@@ -53,6 +57,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
       undetermined: props.undetermined
     };
     _this.toggle = _this.toggle.bind(_assertThisInitialized(_this));
+    _this.handleKeyUp = _this.handleKeyUp.bind(_assertThisInitialized(_this));
     return _this;
   }
 
@@ -81,6 +86,20 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
         if (onChange) onChange(value, id);
       }
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        e.preventDefault();
+      }
+    }
+  }, {
+    key: "handleKeyUp",
+    value: function handleKeyUp(e) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        this.toggle();
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -96,11 +115,16 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
           id = _this$props2.id,
           className = _this$props2.className,
           style = _this$props2.style,
+          alignLeft = _this$props2.alignLeft,
           trk = _this$props2.trk,
           testId = _this$props2.testId;
       var iconClass = undetermined ? " ".concat(classes.undetermined) : value ? " ".concat(classes.active) : '';
+      var iconColor = disabled ? _colors["default"].icon.brand.disabled : _colors["default"].icon.inverse["default"];
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         id: id,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: this.handleKeyDown,
+        onKeyUp: this.handleKeyUp,
         className: "".concat(classes.cont).concat(iconClass).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
         onClick: this.toggle,
         style: style,
@@ -108,16 +132,34 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
       }, testId && {
         'data-value': value ? 1 : 0
       }), /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.checkWrap
+      }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.check,
         id: trk
-      }), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.box
+      }), undetermined && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "minus",
+        width: 16,
+        height: 16,
+        colors: [iconColor],
+        className: classes.icon
+      }), !undetermined && value && /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+        iconName: "check",
+        width: 16,
+        height: 16,
+        colors: [iconColor],
+        className: classes.icon
+      }))), !!(label || right) && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.labelWrap
+      }, label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "label",
-        className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '')
+        className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '').concat(alignLeft ? " ".concat(classes.alignLeft) : '')
       }, label), right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "label",
         mid: true,
         className: classes.right
-      }, right));
+      }, right)));
     }
   }]);
 
@@ -148,6 +190,9 @@ Checkbox.propTypes = {
   /** Use this prop to overflow the text of the label, adding '...' and the end. */
   textOverflow: _propTypes["default"].bool,
 
+  /** Align the content to the left */
+  alignLeft: _propTypes["default"].bool,
+
   /** Id for catching selected element for tracking. */
   trk: _propTypes["default"].string,
   id: _propTypes["default"].string,

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

@@ -5,68 +5,103 @@ exports[`Checkbox matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`Checkbox styles matches the snapshot 1`] = `
 Object {
   "active": Object {
-    "& $check:after": Object {
-      "background": Array [
-        "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwODNjYWUiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
-        "!important",
-      ],
+    "& $check $box": Object {
+      "background": "#0059CD",
+      "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
     },
   },
+  "alignLeft": Object {
+    "flex": "none",
+  },
+  "box": Object {
+    "background": "#fff",
+    "borderRadius": "4px",
+    "boxShadow": "inset 0 0 0 1px #D3D4DC",
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "height": 20,
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 20,
+  },
   "check": Object {
-    "&:after": Object {
-      "background": "transparent",
-      "content": "\\"\\"",
-      "height": 18,
-      "left": "50%",
-      "marginTop": -1,
-      "position": "absolute",
-      "top": "50%",
-      "transform": "translate(-50%, -50%)",
-      "transition": "0.3s all",
-      "width": 18,
-    },
-    "&:before": Object {
-      "background": "#ffffff",
-      "border": "1px solid #dddddd",
-      "borderRadius": 4,
-      "content": "\\"\\"",
-      "height": 16,
-      "left": "50%",
-      "position": "absolute",
-      "top": "50%",
-      "transform": "translate(-50%, -50%)",
-      "width": 16,
-    },
-    "height": 24,
-    "position": "relative",
-    "width": 24,
+    "alignItems": "center",
+    "borderRadius": "4px",
+    "display": "grid",
+    "height": 20,
+    "justifyContent": "center",
+    "transition": "all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s",
+    "width": 20,
+  },
+  "checkWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "flexShrink": 0,
+    "height": 48,
+    "justifyContent": "center",
+    "width": 52,
   },
   "cont": Object {
+    "&$active, &$undetermined": Object {
+      "&:active $check $box": Object {
+        "background": "#083CAE",
+        "boxShadow": "inset 0 0 0 2px rgba(255,255,255,0.2)",
+      },
+      "&:hover $check $box": Object {
+        "background": "#083CAE",
+        "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
+      },
+    },
+    "&:active $check $box": Object {
+      "boxShadow": "inset 0 0 0 2px #6C6F89",
+    },
     "&:after": Object {
       "clear": "both",
       "content": "\\"\\"",
       "display": "table",
     },
-    "&:hover $check:after": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiNkZGRkZGQiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
+    "&:focus-visible $check": Object {
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    },
+    "&:hover $check $box": Object {
+      "boxShadow": "inset 0 0 0 1px #6C6F89",
     },
-    "alignItems": "start",
+    "alignItems": "flex-start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": "0",
-    "paddingBottom": 8,
-    "paddingTop": 8,
   },
   "disabled": Object {
-    "opacity": 0.4,
+    "& $check $box": Object {
+      "background": "#EDEDF1",
+      "boxShadow": "inset 0 0 0 1px #D3D4DC",
+    },
+    "&$active, &$undetermined": Object {
+      "& $check $box": Object {
+        "background": "rgba(8, 60, 174, 0.1)",
+        "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
+      },
+    },
     "pointerEvents": "none",
   },
+  "icon": Object {
+    "gridColumnStart": 1,
+    "gridRowStart": 1,
+    "margin": 2,
+  },
   "label": Object {
     "cursor": "pointer",
-    "flex": "1",
-    "float": "left",
-    "marginLeft": 8,
+    "flex": 1,
+    "marginLeft": "12px",
+  },
+  "labelWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "flex": 1,
+    "minHeight": 48,
+    "overflow": "hidden",
+    "paddingBottom": "4px",
+    "paddingTop": "4px",
   },
   "overflow": Object {
     "overflow": "hidden",
@@ -74,16 +109,13 @@ Object {
     "whiteSpace": "nowrap",
   },
   "right": Object {
-    "float": "right",
-    "marginLeft": 8,
+    "marginLeft": "8px",
+    "pointerEvents": "none",
   },
   "undetermined": Object {
-    "& $check:after": Object {
-      "background": Array [
-        "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSI1LjMsMTMuMyA1LjMsMTAuNyAxOC43LDEwLjcgMTguNywxMy4zICIgZmlsbD0iIzA4M2NhZSIgLz4KICAgICAgICA8L3N2Zz4=)",
-        "!important",
-      ],
-      "marginTop": 0,
+    "& $check $box": Object {
+      "background": "#0059CD",
+      "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
     },
   },
 }

package/build/Checkbox/styles.js

@@ -5,23 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
-var _icons = _interopRequireDefault(require("../subatomic/icons"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _iconSizes = _interopRequireDefault(require("../subatomic/iconSizes"));
+var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var checkbox = _colors["default"].checkbox;
+var transition = 'all cubic-bezier(0.25,0.46,0.45,0.94) 0.2s';
+var contentHeight = 48;
+var checkboxWidth = 52;
+var checkSize = 20;
 var _default = {
   cont: {
-    paddingTop: _spacing["default"].tiny,
-    paddingBottom: _spacing["default"].tiny,
     boxSizing: 'border-box',
     display: 'flex',
-    alignItems: 'start',
+    alignItems: 'flex-start',
     cursor: 'pointer',
     outline: '0',
     '&:after': {
@@ -29,68 +32,108 @@ var _default = {
       display: 'table',
       clear: 'both'
     },
-    '&:hover $check:after': {
-      background: _icons["default"].base(_icons["default"].check.icon([_colors["default"].grey200]))
+    '&:focus-visible $check': {
+      boxShadow: _shadows["default"]['focus-bright-blue']
+    },
+    '&:hover $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.unselected.border.hover)
+    },
+    '&:active $check $box': {
+      boxShadow: "inset 0 0 0 2px ".concat(checkbox.unselected.border.hover)
+    },
+    '&$active, &$undetermined': {
+      '&:hover $check $box': {
+        boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+        background: checkbox.selected.bg.hover
+      },
+      '&:active $check $box': {
+        boxShadow: "inset 0 0 0 2px ".concat(checkbox.selected.border["default"]),
+        background: checkbox.selected.bg.hover
+      }
     }
   },
+  checkWrap: {
+    width: checkboxWidth,
+    height: contentHeight,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0
+  },
   check: {
-    width: _spacing["default"].base,
-    height: _spacing["default"].base,
-    position: 'relative',
-    '&:before': {
-      content: '""',
-      width: _spacing["default"].small,
-      height: _spacing["default"].small,
-      borderRadius: 4,
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      border: "1px solid ".concat(_colors["default"].grey200),
-      background: _colors["default"].bgWhite
-    },
-    '&:after': {
-      content: '""',
-      width: _iconSizes["default"].small,
-      height: _iconSizes["default"].small,
-      marginTop: -1,
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      transition: '0.3s all',
-      background: 'transparent'
-    }
+    width: checkSize,
+    height: checkSize,
+    borderRadius: _borderRadius["default"]['br-xs'],
+    transition: transition,
+    display: 'grid',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  box: {
+    width: checkSize,
+    height: checkSize,
+    borderRadius: _borderRadius["default"]['br-xs'],
+    boxShadow: "inset 0 0 0 1px ".concat(checkbox.unselected.border["default"]),
+    background: checkbox['unselected']['bg']['default'],
+    transition: transition,
+    gridRowStart: 1,
+    gridColumnStart: 1
+  },
+  icon: {
+    gridRowStart: 1,
+    gridColumnStart: 1,
+    margin: 2
   },
   active: {
-    '& $check:after': {
-      background: [_icons["default"].base(_icons["default"].check.icon([_colors["default"].prim])), '!important']
+    '& $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+      background: checkbox.selected.bg["default"]
     }
   },
   undetermined: {
-    '& $check:after': {
-      background: [_icons["default"].base(_icons["default"].minus.icon([_colors["default"].prim])), '!important'],
-      marginTop: 0
+    '& $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+      background: checkbox.selected.bg["default"]
     }
   },
   disabled: {
-    opacity: 0.4,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
+    '& $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.unselected.border["default"]),
+      background: checkbox.unselected.bg.disabled
+    },
+    '&$active, &$undetermined': {
+      '& $check $box': {
+        boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+        background: checkbox.selected.bg.disabled
+      }
+    }
+  },
+  labelWrap: {
+    minHeight: contentHeight,
+    display: 'flex',
+    alignItems: 'center',
+    paddingTop: _spacing["default"]['size-1'],
+    paddingBottom: _spacing["default"]['size-1'],
+    overflow: 'hidden',
+    flex: 1
   },
   label: {
-    marginLeft: _spacing["default"].tiny,
+    marginLeft: _spacing["default"]['size-3'],
     cursor: 'pointer',
-    "float": 'left',
-    flex: '1'
+    flex: 1
   },
   right: {
-    marginLeft: _spacing["default"].tiny,
-    "float": 'right'
+    marginLeft: _spacing["default"]['size-2'],
+    pointerEvents: 'none'
   },
   overflow: {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
+  },
+  alignLeft: {
+    flex: 'none'
   }
 };
 exports["default"] = _default;