@occmundial/occ-atomic 3.0.0-beta.4 → 3.0.0-beta.40

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": "hsl(221 91.2% 35.7% / 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;

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

@@ -2,11 +2,11 @@
 
 exports[`FAB matches the snapshot 1`] = `
 <button
-  className="Button-btn-0-1-28 Button-btn-0-1-1 Button-tertiary-0-1-23 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-38 Button-iconOnly-0-1-18 Button-round-0-1-40 Button-round-0-1-20"
+  className="Button-btn-0-1-22 Button-btn-0-1-1 Button-tertiary-0-1-27 Button-tertiary-0-1-6 fab Button-iconOnly-0-1-38 Button-iconOnly-0-1-18 Button-round-0-1-40 Button-round-0-1-20"
   disabled={false}
 >
   <span
-    className="Button-cont-0-1-29 Button-cont-0-1-2"
+    className="Button-cont-0-1-23 Button-cont-0-1-2"
   >
     <span
       className="Icon-oldIcon-0-1-45 Icon-oldIcon-0-1-43 Button-icon-0-1-36 Button-icon-0-1-16"

package/build/Footer/Footer.js

@@ -31,7 +31,7 @@ var itemTypes = {
   custom: 'custom'
 };
 /** Customisable footer component. This component can receive an array of columns. Those columns can contain an array of lists, and those lists can contain a title and and array of items. The items are objects that must define a type (one of 'link,', 'icon' or 'cursom').
-	It can also receive a copy string, to show the copyright data, and an array of links to show above it.
+  It can also receive a copy string, to show the copyright data, and an array of links to show above it.
 */
 
 var Footer = function Footer(_ref) {
@@ -54,7 +54,7 @@ var Footer = function Footer(_ref) {
     className: columns.length > 0 ? classes.footer : classes.footerWithoutColumns
   }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
     fluid: winWidth < _grid["default"].xl
-  }, /*#__PURE__*/_react["default"].createElement(_Grid["default"].Row, null, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
     direction: isMobile ? 'col' : 'row',
     className: classes.column
@@ -71,9 +71,7 @@ var Footer = function Footer(_ref) {
         listClassName: listClassName
       });
     }));
-  })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.footerBottom
-  }, /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
+  })), /*#__PURE__*/_react["default"].createElement(_Flexbox["default"], {
     display: "flex",
     alignItems: "start",
     className: classes.bottomWrap,
@@ -112,7 +110,7 @@ var Footer = function Footer(_ref) {
   })), copyText && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
     small: true,
     mid: true
-  }, copyText)), bottomItem)))));
+  }, copyText)), bottomItem)));
 };
 
 var columnPropTypes = _propTypes["default"].arrayOf(_propTypes["default"].arrayOf(_propTypes["default"].shape({

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

@@ -13,8 +13,6 @@ Object {
   },
   "column": Object {
     "paddingBottom": 16,
-    "paddingLeft": 12,
-    "paddingRight": 12,
   },
   "footer": Object {
     "@media (min-width: 992px)": Object {
@@ -31,10 +29,6 @@ Object {
       32,
     ],
   },
-  "footerBottom": Object {
-    "paddingLeft": 12,
-    "paddingRight": 12,
-  },
   "footerWithoutColumns": Object {
     "@media (min-width: 992px)": Object {
       "padding": Array [

package/build/Footer/styles.js

@@ -29,8 +29,6 @@ var _default = {
     padding: [0, 0, _spacing["default"].medium]
   }),
   column: {
-    paddingLeft: _spacing["default"].gutter,
-    paddingRight: _spacing["default"].gutter,
     paddingBottom: _spacing["default"].small
   },
   list: {
@@ -67,10 +65,6 @@ var _default = {
     display: 'block',
     paddingBottom: _spacing["default"].tiny
   },
-  footerBottom: {
-    paddingLeft: _spacing["default"].gutter,
-    paddingRight: _spacing["default"].gutter
-  },
   bottomWrap: {
     paddingTop: _spacing["default"].base,
     borderTop: "1px solid ".concat(_colors["default"].grey200)

package/build/Grid/Col/__snapshots__/Col.test.js.snap

@@ -795,10 +795,24 @@ Object {
     },
   },
   "col": Object {
+    "@media (min-width: 576px)": Object {
+      "padding": Array [
+        0,
+        "8px",
+      ],
+    },
+    "@media (min-width: 768px)": Object {
+      "padding": Array [
+        0,
+        "12px",
+      ],
+    },
     "boxSizing": "border-box",
     "minHeight": "1px",
-    "paddingLeft": 12,
-    "paddingRight": 12,
+    "padding": Array [
+      0,
+      6,
+    ],
     "position": "relative",
   },
   "offset-xxs1": Object {

package/build/Grid/Col/styles.js

@@ -7,18 +7,25 @@ exports["default"] = void 0;
 
 var _grid = _interopRequireDefault(require("../../subatomic/grid"));
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _col;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var styles = {
-  col: {
+  col: (_col = {
     boxSizing: 'border-box',
     position: 'relative',
     minHeight: '1px',
-    paddingRight: _spacing["default"].gutter,
-    paddingLeft: _spacing["default"].gutter
-  }
+    padding: [0, 6]
+  }, _defineProperty(_col, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    padding: [0, _spacing["default"]['size-2']]
+  }), _defineProperty(_col, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    padding: [0, _spacing["default"]['size-3']]
+  }), _col)
 };
 
 var pushGrid = function pushGrid() {
@@ -44,7 +51,6 @@ var pushGrid = function pushGrid() {
     };
   }
 
-  ;
   styles[xs] = {};
   styles[sm] = {};
   styles[md] = {};

package/build/Grid/Row/__snapshots__/Row.test.js.snap

@@ -12,9 +12,25 @@ Object {
       "content": "\\"\\"",
       "display": "table",
     },
+    "@media (min-width: 0px)": Object {
+      "margin": Array [
+        0,
+        "-6px",
+      ],
+    },
+    "@media (min-width: 576px)": Object {
+      "margin": Array [
+        0,
+        "-8px",
+      ],
+    },
+    "@media (min-width: 768px)": Object {
+      "margin": Array [
+        0,
+        "-12px",
+      ],
+    },
     "boxSizing": "border-box",
-    "marginLeft": -12,
-    "marginRight": -12,
   },
 }
 `;

package/build/Grid/Row/styles.js

@@ -5,15 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _spacing = _interopRequireDefault(require("../../subatomic/spacing"));
+var _grid = _interopRequireDefault(require("../../subatomic/grid"));
+
+var _spacing = _interopRequireDefault(require("../../tokens/spacing.json"));
+
+var _row;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var _default = {
-  row: {
+  row: (_row = {
     boxSizing: 'border-box',
-    marginRight: -_spacing["default"].gutter,
-    marginLeft: -_spacing["default"].gutter,
     '&:before, &:after': {
       display: 'table',
       content: '""'
@@ -21,6 +25,12 @@ var _default = {
     '&:after': {
       clear: 'both'
     }
-  }
+  }, _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].xxs, "px)"), {
+    margin: [0, '-6px']
+  }), _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
+    margin: [0, "-".concat(_spacing["default"]["size-2"])]
+  }), _defineProperty(_row, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
+    margin: [0, "-".concat(_spacing["default"]["size-3"])]
+  }), _row)
 };
 exports["default"] = _default;

package/build/Grid/styles.js

@@ -7,7 +7,7 @@ exports["default"] = void 0;
 
 var _grid = _interopRequireDefault(require("../subatomic/grid"));
 
-var _spacing = _interopRequireDefault(require("../subatomic/spacing"));
+var _spacing = _interopRequireDefault(require("../tokens/spacing.json"));
 
 var _conFluid$con$Media;
 
@@ -18,8 +18,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var _default = (_conFluid$con$Media = {
   conFluid: {
     boxSizing: 'border-box',
-    paddingRight: _spacing["default"].gutter,
-    paddingLeft: _spacing["default"].gutter,
+    paddingRight: _spacing["default"]['size-3'],
+    paddingLeft: _spacing["default"]['size-3'],
     marginRight: 'auto',
     marginLeft: 'auto',
     '&:before, &:after': {
@@ -31,24 +31,41 @@ var _default = (_conFluid$con$Media = {
     }
   },
   con: {
-    extend: 'conFluid',
-    margin: '0 auto'
+    width: _grid["default"].full,
+    margin: 'auto',
+    padding: [0, _spacing["default"]['size-3']]
   }
 }, _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].xs, "px)"), {
   con: {
-    width: _grid["default"].xsGrid
+    width: _grid["default"].full,
+    padding: [0, _spacing["default"]['size-4']]
+  },
+  conFluid: {
+    width: _grid["default"].full,
+    padding: [0, _spacing["default"]['size-4']]
   }
 }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].sm, "px)"), {
   con: {
-    width: _grid["default"].smGrid
+    width: _grid["default"].full,
+    padding: [0, _spacing["default"]['size-5']]
+  },
+  conFluid: {
+    width: _grid["default"].full,
+    padding: [0, _spacing["default"]['size-5']]
   }
 }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].md, "px)"), {
   con: {
-    width: _grid["default"].mdGrid
+    width: _grid["default"].full,
+    padding: [0, _spacing["default"]['size-7']]
+  },
+  conFluid: {
+    width: _grid["default"].full,
+    padding: [0, _spacing["default"]['size-7']]
   }
 }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].lg, "px)"), {
   con: {
-    width: _grid["default"].lgGrid
+    width: _grid["default"].lgGrid,
+    padding: 0
   }
 }), _defineProperty(_conFluid$con$Media, "@media (min-width: ".concat(_grid["default"].xl, "px)"), {
   con: {