@occmundial/occ-atomic 3.0.0-beta.15 → 3.0.0-beta.16

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+# [3.0.0-beta.16](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.15...v3.0.0-beta.16) (2024-06-19)
+
+
+### Bug Fixes
+
+* Change focus behavior in form components ([a3b6c9b](https://github.com/occmundial/occ-atomic/commit/a3b6c9b5194b1d8302a6f73bb5522df9e6a756fc))
+* Changes to structure and styles of Checkbox ([6ed54c0](https://github.com/occmundial/occ-atomic/commit/6ed54c0a5ebae0542431b8305d0da8a052c2d3fb))
+* Changes to structure and styles of Radio ([694c995](https://github.com/occmundial/occ-atomic/commit/694c9950a4c6c43a5bd7987536a293835860421e))
+* Changes to structure and styles of SlideToggle ([5ec340f](https://github.com/occmundial/occ-atomic/commit/5ec340f0cc09b04d032ebb888034a92cf71f2f8a))
+* Fix focus styles in form components ([e69d45b](https://github.com/occmundial/occ-atomic/commit/e69d45b84c3e35a433f37feb7c9b0012137bc2bb))
+* Fix spacing and sizing of radio, checkbox and toggle ([b3a71c2](https://github.com/occmundial/occ-atomic/commit/b3a71c2e30e2b810036104a4ee57b6b805d2780c))
+* Fix styles and icon color on Checkbox ([1c4e360](https://github.com/occmundial/occ-atomic/commit/1c4e360ec0d3291048d14f4ccd3859d0bdbc2817))
+* Fix transition value in SlideToggle ([8423fc6](https://github.com/occmundial/occ-atomic/commit/8423fc6b9eea3219ed052add95f27ef4d181f5b5))
+* Update componentData ([ff7c0bd](https://github.com/occmundial/occ-atomic/commit/ff7c0bd47ed55d652b01ace7526867d751a6e1c7))
+
 # [3.0.0-beta.15](https://github.com/occmundial/occ-atomic/compare/v3.0.0-beta.14...v3.0.0-beta.15) (2024-06-18)
 
 

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

@@ -64,12 +64,12 @@ Object {
     "&:active": Object {
       "background": "hsl(234 75.4% 12.7% / 0.1)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
+    },
     "&:hover": Object {
       "background": "hsl(234 75.4% 12.7% / 0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(234 75.4% 12.7% / 0.1)",
-    },
     "background": "transparent",
     "color": "#5A5D7B",
   },
@@ -120,12 +120,12 @@ Object {
     "&:active": Object {
       "background": "rgba(255,255,255,0.1)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
+    },
     "&:hover": Object {
       "background": "rgba(255,255,255,0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
-    },
     "background": "transparent",
     "color": "#fff",
   },
@@ -214,12 +214,12 @@ Object {
     "&:focus": Object {
       "outline": "2px solid rgba(255,255,255,0.2)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
+    },
     "&:hover": Object {
       "background": "#A32444",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(344 87.1% 57.5% / 0.3)",
-    },
     "background": "#D32E58",
     "color": "#fff",
     "outline": "2px solid rgba(255,255,255,0.2)",
@@ -245,12 +245,12 @@ Object {
     "&:active": Object {
       "background": "hsl(221 91.2% 35.7% / 0.2)",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    },
     "&:hover": Object {
       "background": "hsl(221 91.2% 35.7% / 0.1)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
-    },
     "background": "hsl(221 91.2% 35.7% / 0.05)",
     "color": "#083CAE",
   },
@@ -275,12 +275,12 @@ Object {
     "&:focus": Object {
       "outline": "2px solid #083CAE",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    },
     "&:hover": Object {
       "background": "hsl(221 91.2% 35.7% / 0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
-    },
     "background": "transparent",
     "color": "#083CAE",
     "outline": "2px solid #083CAE",
@@ -303,12 +303,12 @@ Object {
     "&:focus": Object {
       "outline": "2px solid #fff",
     },
+    "&:focus-visible": Object {
+      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
+    },
     "&:hover": Object {
       "background": "rgba(255,255,255,0.05)",
     },
-    "&:not(:active):focus-visible": Object {
-      "boxShadow": "0 0 0 8px rgba(255,255,255,0.2)",
-    },
     "background": "transparent",
     "color": "#fff",
     "outline": "2px solid #fff",

package/build/Button/styles.js

@@ -102,7 +102,7 @@ var _default = {
     '&:focus': {
       outline: "2px solid ".concat(_colors2["default"].button.primary.border["default"])
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-pink']
     },
     '&$disabled': {
@@ -130,7 +130,7 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.secondary.bg.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-indigo']
     },
     '&$disabled': {
@@ -165,7 +165,7 @@ 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': {
@@ -201,7 +201,7 @@ 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': {
@@ -261,7 +261,7 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.ghost.bg.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-corp']
     },
     '& span span': {
@@ -291,7 +291,7 @@ var _default = {
     '&:active': {
       background: _colors2["default"].button.ghost.bg.inverse.active
     },
-    '&:not(:active):focus-visible': {
+    '&:focus-visible': {
       boxShadow: _shadows["default"]['focus-white']
     },
     '& span span': {

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); }
@@ -110,6 +114,7 @@ var Checkbox = /*#__PURE__*/function (_React$Component) {
           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,
@@ -123,16 +128,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) : '').concat(alignLeft ? " ".concat(classes.alignLeft) : '')
       }, label), right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
         tag: "label",
         mid: true,
         className: classes.right
-      }, right));
+      }, right)));
     }
   }]);
 

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

@@ -5,106 +5,103 @@ exports[`Checkbox matches the snapshot 1`] = `ShallowWrapper {}`;
 exports[`Checkbox styles matches the snapshot 1`] = `
 Object {
   "active": Object {
-    "& $check:after": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
-    },
-    "& $check:before": Object {
+    "& $check $box": Object {
       "background": "#0059CD",
-      "borderColor": "rgba(255,255,255,0.2)",
+      "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",
-      "boxSizing": "border-box",
-      "content": "\\"\\"",
-      "height": 20,
-      "left": "50%",
-      "marginTop": -1,
-      "position": "absolute",
-      "top": "50%",
-      "transform": "translate(-50%, -50%)",
-      "transition": "0.3s all",
-      "width": 20,
-    },
-    "&:before": Object {
-      "background": "#fff",
-      "border": "1px solid #D3D4DC",
-      "borderRadius": "4px",
-      "boxSizing": "border-box",
-      "content": "\\"\\"",
-      "height": 20,
-      "left": "50%",
-      "position": "absolute",
-      "top": "50%",
-      "transform": "translate(-50%, -50%)",
-      "transition": "0.3s all",
-      "width": 20,
-    },
-    "height": "24px",
-    "position": "relative",
-    "width": "24px",
+    "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 {
-      "&:hover $check:before, &:active $check:before": 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",
     },
-    "&:focus $check:before": Object {
-      "borderWidth": 1,
+    "&:focus-visible $check": Object {
       "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",
-      },
+    "&: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": "8px",
-    "paddingTop": "8px",
   },
   "disabled": Object {
-    "&$active $check:after": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiM4REE1REEiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
+    "& $check $box": Object {
+      "background": "#EDEDF1",
+      "boxShadow": "inset 0 0 0 1px #D3D4DC",
     },
     "&$active, &$undetermined": Object {
-      "& $check:before": Object {
+      "& $check $box": 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",
+        "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": "8px",
+    "flex": 1,
+    "marginLeft": "12px",
+  },
+  "labelWrap": Object {
+    "alignItems": "center",
+    "display": "flex",
+    "flex": 1,
+    "minHeight": 48,
+    "overflow": "hidden",
+    "paddingBottom": "4px",
+    "paddingTop": "4px",
   },
   "overflow": Object {
     "overflow": "hidden",
@@ -112,18 +109,13 @@ Object {
     "whiteSpace": "nowrap",
   },
   "right": Object {
-    "float": "right",
     "marginLeft": "8px",
     "pointerEvents": "none",
   },
   "undetermined": Object {
-    "& $check:after": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgICAgICB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI0IDI0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CiAgICAgICAgPHBvbHlnb24gcG9pbnRzPSI1LjMsMTMuMyA1LjMsMTAuNyAxOC43LDEwLjcgMTguNywxMy4zICIgZmlsbD0iI2ZmZiIgLz4KICAgICAgICA8L3N2Zz4=)",
-      "marginTop": 0,
-    },
-    "& $check:before": Object {
+    "& $check $box": Object {
       "background": "#0059CD",
-      "borderColor": "rgba(255,255,255,0.2)",
+      "boxShadow": "inset 0 0 0 1px rgba(255,255,255,0.2)",
     },
   },
 }

package/build/Checkbox/styles.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _icons = _interopRequireDefault(require("../subatomic/icons"));
-
 var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
@@ -17,15 +15,16 @@ var _borderRadius = _interopRequireDefault(require("../tokens/borderRadius.json"
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var checkbox = _colors["default"].checkbox,
-    icon = _colors["default"].icon;
+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"]['size-2'],
-    paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
-    alignItems: 'start',
+    alignItems: 'flex-start',
     cursor: 'pointer',
     outline: '0',
     '&:after': {
@@ -33,105 +32,99 @@ var _default = {
       display: 'table',
       clear: 'both'
     },
-    '&:focus $check:before': {
-      boxShadow: _shadows["default"]['focus-bright-blue'],
-      borderWidth: 1
+    '&:focus-visible $check': {
+      boxShadow: _shadows["default"]['focus-bright-blue']
     },
-    '&$active, &$undetermined': {
-      '&:hover $check:before, &:active $check:before': {
-        background: checkbox['selected']['bg']['hover']
-      }
+    '&: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)
     },
-    '&:not($active), &:not($undetermined)': {
-      '&:hover $check:before, &:active $check:before': {
-        borderColor: 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:before': {
-        borderWidth: 2
+      '&: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"]['size-5'],
-    height: _spacing["default"]['size-5'],
-    position: 'relative',
-    '&:before': {
-      content: '""',
-      boxSizing: 'border-box',
-      width: 20,
-      height: 20,
-      borderRadius: _borderRadius["default"]['br-xs'],
-      position: 'absolute',
-      top: '50%',
-      left: '50%',
-      transform: 'translate(-50%, -50%)',
-      border: "1px solid ".concat(checkbox['unselected']['border']['default']),
-      background: checkbox['unselected']['bg']['default'],
-      transition: '0.3s all'
-    },
-    '&:after': {
-      content: '""',
-      boxSizing: 'border-box',
-      width: 20,
-      height: 20,
-      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([icon['inverse']['default']]))
-    },
-    '& $check:before': {
-      borderColor: checkbox['selected']['border']['default'],
-      background: checkbox['selected']['bg']['default']
+    '& $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+      background: checkbox.selected.bg["default"]
     }
   },
   undetermined: {
-    '& $check:before': {
-      borderColor: checkbox['selected']['border']['default'],
-      background: checkbox['selected']['bg']['default']
-    },
-    '& $check:after': {
-      background: _icons["default"].base(_icons["default"].minus.icon([icon['inverse']['default']])),
-      marginTop: 0
+    '& $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.selected.border["default"]),
+      background: checkbox.selected.bg["default"]
     }
   },
   disabled: {
     pointerEvents: 'none',
-    '&$active, &$undetermined': {
-      '& $check:before': {
-        borderColor: checkbox['selected']['border']['default'],
-        background: checkbox['selected']['bg']['disabled']
-      }
-    },
-    '&$undetermined $check:after': {
-      background: _icons["default"].base(_icons["default"].minus.icon([icon['brand']['disabled']]))
+    '& $check $box': {
+      boxShadow: "inset 0 0 0 1px ".concat(checkbox.unselected.border["default"]),
+      background: checkbox.unselected.bg.disabled
     },
-    '&$active $check:after': {
-      background: _icons["default"].base(_icons["default"].check.icon([icon['brand']['disabled']]))
-    },
-    '&:not($active), &:not($undetermined)': {
-      '& $check:before': {
-        borderColor: 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"]['size-2'],
+    marginLeft: _spacing["default"]['size-3'],
     cursor: 'pointer',
-    "float": 'left',
-    flex: '1'
+    flex: 1
   },
   right: {
     marginLeft: _spacing["default"]['size-2'],
-    "float": 'right',
     pointerEvents: 'none'
   },
   overflow: {

package/build/Radio/Radio.js

@@ -119,9 +119,16 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           },
           style: style
         }), /*#__PURE__*/_react["default"].createElement("div", {
-          className: classes.radio,
-          id: option.trk
-        }), option.label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+          className: classes.radioWrap
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.radio
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.radioOuter
+        }), /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.radioInner
+        }))), !!(option.label || option.right || option.tag) && /*#__PURE__*/_react["default"].createElement("div", {
+          className: classes.labelWrap
+        }, option.label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           tag: "label",
           className: "".concat(classes.label).concat(textOverflow ? " ".concat(classes.overflow) : '').concat(alignLeft ? " ".concat(classes.alignLeft) : '')
         }, option.label), option.right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
@@ -131,7 +138,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         }, option.right), option.tag && /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
           theme: "link",
           className: classes.tag
-        }, option.tag));
+        }, option.tag)));
       }));
     }
   }]);