@occmundial/occ-atomic 3.0.0-beta.1 → 3.0.0-beta.11

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

@@ -9,52 +9,42 @@ exports[`Pill matches the stack snapshot 1`] = `ShallowWrapper {}`;
 exports[`Pill styles matches the snapshot 1`] = `
 Object {
   "assistiveText": Object {
-    "color": "#aaaaaa",
+    "font": "400 14px/1.5 'OccText', sans-serif",
+    "transition": "0.3s all",
   },
   "bottom": Object {
-    "height": 20,
-    "marginTop": 4,
+    "height": 21,
   },
   "choiceGroup": Object {
     "display": "flex",
     "flexWrap": "wrap",
   },
   "container": Object {
-    "marginBottom": 8,
+    "display": "flex",
+    "flexDirection": "column",
+    "marginBottom": "8px",
     "position": "relative",
   },
-  "disabled": Object {
-    "& $label": Object {
-      "color": "#dddddd",
-    },
-  },
   "errorAssistiveText": Object {
-    "color": "#db3737",
+    "color": "#8b1313",
   },
   "errorIcon": Object {
     "marginBottom": -2,
   },
   "label": Object {
-    "& a": Object {
-      "color": "#1476fb",
-      "outline": "none",
-      "textDecoration": "none",
-    },
-    "color": "#222222",
-    "fontFamily": "'OccText', sans-serif",
-    "fontSize": 14,
-    "lineHeight": 1.5,
+    "color": "#080D39",
+    "font": "400 14px/1.5 'OccText', sans-serif",
     "transition": "0.3s all",
   },
   "left": Object {
     "float": "left",
   },
   "top": Object {
-    "&:after": Object {
-      "clear": "both",
-      "content": "\\"\\"",
-    },
-    "height": 24,
+    "height": 21,
+    "marginBottom": "8px",
+  },
+  "validAssistiveText": Object {
+    "color": "#5A5D7B",
   },
 }
 `;

package/build/Pill/styles.js

@@ -5,53 +5,48 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
-var _fonts = _interopRequireDefault(require("../subatomic/fonts"));
+var _fonts = _interopRequireDefault(require("../tokens/fonts.json"));
+
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
+
+var _styles = require("../Text/styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+// import colors from '../subatomic/colors';
 var _default = {
   container: {
     position: 'relative',
-    marginBottom: 8
+    display: 'flex',
+    flexDirection: 'column',
+    marginBottom: _spacing["default"]['size-2']
   },
   top: {
-    height: 24,
-    '&:after': {
-      content: '""',
-      clear: 'both'
-    }
+    height: 21,
+    marginBottom: _spacing["default"]['size-2']
   },
   label: {
-    fontFamily: _fonts["default"].body,
-    fontSize: 14,
-    lineHeight: 1.5,
-    color: _colors["default"].ink,
-    transition: '0.3s all',
-    '& a': {
-      color: _colors["default"].blue,
-      textDecoration: 'none',
-      outline: 'none'
-    }
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-label']),
+    color: _colors["default"].text.corp.primary,
+    transition: '0.3s all'
   },
   left: {
     "float": 'left'
   },
-  disabled: {
-    '& $label': {
-      color: _colors["default"].inkLightest
-    }
-  },
   bottom: {
-    height: 20,
-    marginTop: 4
+    height: 21
   },
   assistiveText: {
-    color: _colors["default"].inkLighter
+    font: (0, _styles.parseFontValue)(_fonts["default"]['text-field-assistive-text']),
+    transition: '0.3s all'
+  },
+  validAssistiveText: {
+    color: _colors["default"].text.corp.secondary
   },
   errorAssistiveText: {
-    color: _colors["default"].errorText
+    color: _colors["default"].text.error
   },
   errorIcon: {
     marginBottom: -2

package/build/Radio/Radio.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _Tag = _interopRequireDefault(require("../Tag"));
+
 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); }
@@ -75,6 +77,14 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         if (onChange) onChange(option.value);
       }
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e, option) {
+      if (e.keyCode == 13 || e.keyCode == 32) {
+        e.preventDefault();
+        this.onChange(option);
+      }
+    }
   }, {
     key: "render",
     value: function render() {
@@ -87,6 +97,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           id = _this$props.id,
           textOverflow = _this$props.textOverflow,
           className = _this$props.className,
+          alignLeft = _this$props.alignLeft,
           style = _this$props.style;
       return /*#__PURE__*/_react["default"].createElement("div", {
         id: id
@@ -94,7 +105,10 @@ var Radio = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/_react["default"].createElement("div", _extends({
           id: option.trk,
           key: option.value,
-          tabIndex: -1,
+          tabIndex: option.disabled ? -1 : 0,
+          onKeyDown: function onKeyDown(e) {
+            return _this2.handleKeyDown(e, option);
+          },
           "data-testid": option.testId
         }, option.testId && {
           'data-value': selected == option.value ? 1 : 0
@@ -109,12 +123,15 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           id: option.trk
         }), option.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) : '')
         }, option.label), option.right && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
           tag: "label",
           corpSecondary: true,
           className: classes.right
-        }, option.right));
+        }, option.right), option.tag && /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          theme: "link",
+          className: classes.tag
+        }, option.tag));
       }));
     }
   }]);
@@ -139,6 +156,7 @@ Radio.propTypes = {
     value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     label: _propTypes["default"].string,
     right: _propTypes["default"].string,
+    tag: _propTypes["default"].string,
     trk: _propTypes["default"].string,
 
     /** The testId property adds the data attribute data-testid to
@@ -146,6 +164,9 @@ Radio.propTypes = {
     testId: _propTypes["default"].string
   })),
 
+  /** Align the content to the left */
+  alignLeft: _propTypes["default"].bool,
+
   /** Use this prop to overflow the text of the label, adding '...' and the end. */
   textOverflow: _propTypes["default"].bool,
 

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

@@ -15,29 +15,30 @@ Object {
       },
     },
   },
+  "alignLeft": Object {
+    "flex": "none",
+  },
   "cont": Object {
     "&$active": Object {
       "&:active": Object {
         "& $radio:after": Object {
-          "background": "#0047A5",
+          "background": "#083CAE",
         },
         "& $radio:before": Object {
           "borderColor": "#0047A5",
           "borderWidth": "3px",
-          "boxShadow": "initial",
         },
       },
       "&:focus $radio:before": Object {
         "borderColor": "#0059CD",
-        "boxShadow": undefined,
+        "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
       },
       "&:hover": Object {
         "& $radio:after": Object {
-          "background": "#0047A5",
+          "background": "#083CAE",
         },
         "& $radio:before": Object {
           "borderColor": "#0047A5",
-          "boxShadow": "initial",
         },
       },
     },
@@ -49,14 +50,14 @@ Object {
       },
       "&:focus $radio:before": Object {
         "borderColor": "#D3D4DC",
-        "boxShadow": undefined,
+        "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
       },
       "&:hover $radio:before": Object {
         "borderColor": "#6C6F89",
         "boxShadow": "initial",
       },
     },
-    "alignItems": "start",
+    "alignItems": "center",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
@@ -122,8 +123,11 @@ Object {
       "position": "absolute",
       "top": "50%",
       "transform": "translate(-50%, -50%)",
+      "transition": "0.3s all",
       "width": 20,
     },
+    "alignItems": "center",
+    "display": "flex",
     "height": "24px",
     "position": "relative",
     "width": "24px",
@@ -131,6 +135,11 @@ Object {
   "right": Object {
     "float": "right",
     "marginLeft": "8px",
+    "pointerEvents": "none",
+  },
+  "tag": Object {
+    "marginLeft": "8px",
+    "pointerEvents": "none",
   },
 }
 `;

package/build/Radio/styles.js

@@ -9,6 +9,8 @@ var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 var _colors = _interopRequireDefault(require("../tokens/colors.json"));
 
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var radio = _colors["default"].radio;
@@ -18,18 +20,17 @@ var _default = {
     paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
-    alignItems: 'start',
+    alignItems: 'center',
     cursor: 'pointer',
     outline: '0',
     '&$active': {
       '&:focus $radio:before': {
         borderColor: radio['selected']['border']['default'],
-        boxShadow: _colors["default"]['focus-bright-blue']
+        boxShadow: _shadows["default"]['focus-bright-blue']
       },
       '&:hover': {
         '& $radio:before': {
-          borderColor: radio['selected']['border']['hover'],
-          boxShadow: 'initial'
+          borderColor: radio['selected']['border']['hover']
         },
         '& $radio:after': {
           background: radio['selected']['bg']['hover']
@@ -38,8 +39,7 @@ var _default = {
       '&:active': {
         '& $radio:before': {
           borderColor: radio['selected']['border']['hover'],
-          borderWidth: '3px',
-          boxShadow: 'initial'
+          borderWidth: '3px'
         },
         '& $radio:after': {
           background: radio['selected']['bg']['hover']
@@ -47,10 +47,6 @@ var _default = {
       }
     },
     '&:not($active)': {
-      '&:focus $radio:before': {
-        borderColor: radio['unselected']['border']['default'],
-        boxShadow: _colors["default"]['focus-bright-blue']
-      },
       '&:hover $radio:before': {
         borderColor: radio['unselected']['border']['hover'],
         boxShadow: 'initial'
@@ -59,6 +55,10 @@ var _default = {
         borderColor: radio['unselected']['border']['hover'],
         borderWidth: '2px',
         boxShadow: 'initial'
+      },
+      '&:focus $radio:before': {
+        borderColor: radio['unselected']['border']['default'],
+        boxShadow: _shadows["default"]['focus-bright-blue']
       }
     }
   },
@@ -66,6 +66,8 @@ var _default = {
     width: _spacing["default"]['size-5'],
     height: _spacing["default"]['size-5'],
     position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
     '&:before': {
       content: '""',
       boxSizing: 'border-box',
@@ -77,7 +79,8 @@ var _default = {
       left: '50%',
       transform: 'translate(-50%, -50%)',
       border: "1px solid ".concat(radio['unselected']['border']['default']),
-      background: radio['bg']['default']
+      background: radio['bg']['default'],
+      transition: '0.3s all'
     },
     '&:after': {
       content: '""',
@@ -134,12 +137,20 @@ var _default = {
   },
   right: {
     marginLeft: _spacing["default"]['size-2'],
-    "float": 'right'
+    "float": 'right',
+    pointerEvents: 'none'
   },
   overflow: {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap'
+  },
+  tag: {
+    marginLeft: _spacing["default"]['size-2'],
+    pointerEvents: 'none'
+  },
+  alignLeft: {
+    flex: 'none'
   }
 };
 exports["default"] = _default;

package/build/SlideToggle/SlideToggle.js

@@ -95,6 +95,7 @@ var SlideToggle = /*#__PURE__*/function (_React$Component) {
           testId = _this$props2.testId;
       return /*#__PURE__*/_react["default"].createElement("div", {
         id: id,
+        tabIndex: -1,
         className: "".concat(classes.cont).concat(disabled ? " ".concat(classes.disabled) : '').concat(className ? " ".concat(className) : ''),
         style: style
       }, /*#__PURE__*/_react["default"].createElement("div", _extends({

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

@@ -6,38 +6,57 @@ exports[`SlideToggle styles matches the snapshot 1`] = `
 Object {
   "checked": Object {
     "& $icon": Object {
-      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwODNjYWUiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJCQkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgoJCTxwYXRoIGZpbGw9IiMwMDZFRkYiIGQ9Ik0xOC4zLDcuM2wxLjQsMS40bC04LjcsOWMtMC40LDAuNC0xLDAuNC0xLjQsMC4xbC00LjMtMy42bDEuMy0xLjVsMy42LDNDMTAuMiwxNS42LDE4LjMsNy4zLDE4LjMsNy4zeiIvPgoJCTwvc3ZnPg==)",
     },
     "& $slider": Object {
       "left": 16,
     },
-    "background": "#083cae",
+    "background": "#0059CD",
   },
   "cont": Object {
+    "&:focus $switch$checked": Object {
+      "background": "#0059CD",
+      "boxShadow": "0 0 0 8px rgba(0,110,255,0.3)",
+    },
+    "&:focus $switch:not($checked)": Object {
+      "background": "#E9EEF8",
+      "boxShadow": "0 0 0 8px hsl(221 91.2% 35.7% / 0.3)",
+    },
+    "&:hover $switch$checked, &:active $switch$checked": Object {
+      "background": "#083CAE",
+    },
+    "&:hover $switch:not($checked), &:active $switch:not($checked)": Object {
+      "background": "#CAD5EE",
+    },
     "alignItems": "start",
     "boxSizing": "border-box",
     "cursor": "pointer",
     "display": "flex",
     "outline": 0,
-    "paddingBottom": 8,
-    "paddingTop": 8,
+    "paddingBottom": "8px",
+    "paddingTop": "8px",
   },
   "disabled": Object {
-    "opacity": 0.4,
+    "& $icon": Object {
+      "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiNEM0Q0REMiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
+    },
+    "& $switch": Object {
+      "background": "#EDEDF1",
+    },
     "pointerEvents": "none",
   },
   "icon": Object {
-    "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiNhYWFhYWEiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
+    "background": "url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgogICAgICAgIAkgdmlld0JveD0iMCAwIDI0IDI0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNCAyNDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgogICAgICAgIDxwYXRoIGZpbGw9IiM4REE1REEiIGQ9Ik0xMi4xLDEwLjhsNC42LTQuNkwxOCw3LjRMMTMuNCwxMmw0LjYsNC42TDE2LjcsMThsLTQuNi00LjZMNy40LDE4bC0xLjMtMS4zbDQuNi00LjZMNi4yLDcuNGwxLjMtMS4zTDEyLjEsMTAuOHoiLz4KICAgICAgICA8L3N2Zz4=)",
     "display": "block",
     "height": "100%",
     "transition": "0.3s all",
     "width": "100%",
   },
   "label": Object {
-    "marginLeft": 8,
+    "marginLeft": "8px",
   },
   "slider": Object {
-    "background": "#ffffff",
+    "background": "#fff",
     "borderRadius": "50%",
     "cursor": "pointer",
     "height": 20,
@@ -48,10 +67,11 @@ Object {
     "width": 20,
   },
   "switch": Object {
-    "background": "#dddddd",
+    "background": "#E9EEF8",
     "borderRadius": 34,
     "display": "inline-block",
-    "height": 24,
+    "flexShrink": 0,
+    "height": "24px",
     "position": "relative",
     "transition": "0.3s all",
     "width": 38,

package/build/SlideToggle/styles.js

@@ -5,40 +5,59 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _colors = _interopRequireDefault(require("../subatomic/colors"));
+var _icons = _interopRequireDefault(require("../subatomic/icons"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
-var _icons = _interopRequireDefault(require("../subatomic/icons"));
+var _colors = _interopRequireDefault(require("../tokens/colors.json"));
+
+var _shadows = _interopRequireDefault(require("../tokens/shadows.json"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var toggle = _colors["default"]["switch"],
+    icon = _colors["default"].icon;
 var _default = {
   cont: {
-    paddingTop: _spacing["default"].tiny,
-    paddingBottom: _spacing["default"].tiny,
+    paddingTop: _spacing["default"]['size-2'],
+    paddingBottom: _spacing["default"]['size-2'],
     boxSizing: 'border-box',
     display: 'flex',
     alignItems: 'start',
     cursor: 'pointer',
-    outline: 0
+    outline: 0,
+    '&:hover $switch$checked, &:active $switch$checked': {
+      background: toggle['selected']['bg']['hover']
+    },
+    '&:focus $switch$checked': {
+      boxShadow: _shadows["default"]['focus-bright-blue'],
+      background: toggle['selected']['bg']['default']
+    },
+    '&:hover $switch:not($checked), &:active $switch:not($checked)': {
+      background: toggle['unselected']['bg']['hover']
+    },
+    '&:focus $switch:not($checked)': {
+      background: toggle['unselected']['bg']['default'],
+      boxShadow: _shadows["default"]['focus-indigo']
+    }
   },
   "switch": {
     position: 'relative',
     display: 'inline-block',
     width: 38,
-    height: _spacing["default"].base,
-    background: _colors["default"].grey200,
+    flexShrink: 0,
+    height: _spacing["default"]['size-5'],
+    background: toggle['unselected']['bg']['default'],
     borderRadius: 34,
     transition: '0.3s all'
   },
   checked: {
-    background: _colors["default"].prim,
+    background: toggle['selected']['bg']['default'],
     '& $slider': {
       left: 16
     },
     '& $icon': {
-      background: _icons["default"].base(_icons["default"].check.icon([_colors["default"].prim]))
+      background: _icons["default"].base(_icons["default"].check.icon([icon.brand.bold]))
     }
   },
   slider: {
@@ -49,22 +68,27 @@ var _default = {
     width: 20,
     height: 20,
     borderRadius: '50%',
-    background: _colors["default"].bgWhite,
+    background: toggle['bg']['default'],
     transition: '0.3s all'
   },
   icon: {
     width: '100%',
     height: '100%',
     display: 'block',
-    background: _icons["default"].base(_icons["default"].cross.icon([_colors["default"].grey400])),
+    background: _icons["default"].base(_icons["default"].cross.icon([icon.brand.disabled])),
     transition: '0.3s all'
   },
   disabled: {
-    opacity: 0.4,
+    '& $switch': {
+      background: toggle['bg']['disabled']
+    },
+    '& $icon': {
+      background: _icons["default"].base(_icons["default"].cross.icon([icon["default"].disabled]))
+    },
     pointerEvents: 'none'
   },
   label: {
-    marginLeft: _spacing["default"].tiny
+    marginLeft: _spacing["default"]['size-2']
   }
 };
 exports["default"] = _default;

package/build/Text/Text.js

@@ -194,8 +194,10 @@ var Text = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
           classes = _this$props2.classes,
           mid = _this$props2.mid,
-          low = _this$props2.low;
-      if (low) return classes.corpDisabled;else if (mid) return classes.corpSecondary;else return classes.corpPrimary;
+          low = _this$props2.low,
+          corpDisabled = _this$props2.corpDisabled,
+          corpSecondary = _this$props2.corpSecondary;
+      if (low || corpDisabled) return classes.corpDisabled;else if (mid | corpSecondary) return classes.corpSecondary;else return classes.corpPrimary;
     }
   }, {
     key: "getColor",