@storybook/components 6.4.0-beta.24 → 6.4.0-beta.28

package/dist/cjs/ActionBar/ActionBar.js

@@ -0,0 +1,104 @@
+"use strict";
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActionBar = exports.ActionButton = void 0;
+
+require("core-js/modules/es.string.bold.js");
+
+require("core-js/modules/es.array.map.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _theming = require("@storybook/theming");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Container = _theming.styled.div(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    position: 'absolute',
+    bottom: 0,
+    right: 0,
+    maxWidth: '100%',
+    display: 'flex',
+    background: theme.background.content,
+    zIndex: 1
+  };
+});
+
+var ActionButton = _theming.styled.button(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    margin: 0,
+    border: '0 none',
+    padding: '4px 10px',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    color: theme.color.defaultText,
+    background: theme.background.content,
+    fontSize: 12,
+    lineHeight: '16px',
+    fontFamily: theme.typography.fonts.base,
+    fontWeight: theme.typography.weight.bold,
+    borderTop: "1px solid ".concat(theme.appBorderColor),
+    borderLeft: "1px solid ".concat(theme.appBorderColor),
+    marginLeft: -1,
+    borderRadius: "4px 0 0 0",
+    '&:not(:last-child)': {
+      borderRight: "1px solid ".concat(theme.appBorderColor)
+    },
+    '& + *': {
+      borderLeft: "1px solid ".concat(theme.appBorderColor),
+      borderRadius: 0
+    },
+    '&:focus': {
+      boxShadow: "".concat(theme.color.secondary, " 0 -3px 0 0 inset"),
+      outline: '0 none'
+    }
+  };
+}, function (_ref3) {
+  var disabled = _ref3.disabled;
+  return disabled && {
+    cursor: 'not-allowed',
+    opacity: 0.5
+  };
+});
+
+exports.ActionButton = ActionButton;
+ActionButton.displayName = 'ActionButton';
+
+var ActionBar = function ActionBar(_ref4) {
+  var actionItems = _ref4.actionItems,
+      props = _objectWithoutProperties(_ref4, ["actionItems"]);
+
+  return /*#__PURE__*/_react.default.createElement(Container, props, actionItems.map(function (_ref5, index) {
+    var title = _ref5.title,
+        className = _ref5.className,
+        onClick = _ref5.onClick,
+        disabled = _ref5.disabled;
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      _react.default.createElement(ActionButton, {
+        key: index,
+        className: className,
+        onClick: onClick,
+        disabled: disabled
+      }, title)
+    );
+  }));
+};
+
+exports.ActionBar = ActionBar;
+ActionBar.displayName = "ActionBar";

package/dist/cjs/ActionBar/ActionBar.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.manyItems = exports.singleItem = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _ActionBar = require("./ActionBar");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var action1 = (0, _addonActions.action)('action1');
+var action2 = (0, _addonActions.action)('action2');
+var action3 = (0, _addonActions.action)('action3');
+var _default = {
+  component: _ActionBar.ActionBar,
+  title: 'Basics/ActionBar',
+  decorators: [function (storyFn) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        position: 'relative',
+        width: '300px',
+        height: '64px',
+        margin: '1rem',
+        background: 'papayawhip',
+        border: '1px solid rgba(0,0,0,.05)'
+      }
+    }, storyFn());
+  }]
+};
+exports.default = _default;
+
+var singleItem = function singleItem() {
+  return /*#__PURE__*/_react.default.createElement(_ActionBar.ActionBar, {
+    actionItems: [{
+      title: 'Clear',
+      onClick: action1
+    }]
+  });
+};
+
+exports.singleItem = singleItem;
+singleItem.displayName = "singleItem";
+
+var manyItems = function manyItems() {
+  return /*#__PURE__*/_react.default.createElement(_ActionBar.ActionBar, {
+    actionItems: [{
+      title: 'Action string',
+      onClick: action1
+    }, {
+      title: /*#__PURE__*/_react.default.createElement("div", null, "Action node"),
+      onClick: action2
+    }, {
+      title: 'Long action string',
+      className: 'long-action-button',
+      onClick: action3
+    }]
+  });
+};
+
+exports.manyItems = manyItems;
+manyItems.displayName = "manyItems";

package/dist/cjs/Badge/Badge.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Badge = void 0;
+
+require("core-js/modules/es.string.bold.js");
+
+require("core-js/modules/es.object.assign.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _theming = require("@storybook/theming");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var BadgeWrapper = _theming.styled.div(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    display: 'inline-block',
+    fontSize: 11,
+    lineHeight: '12px',
+    alignSelf: 'center',
+    padding: '4px 12px',
+    borderRadius: '3em',
+    fontWeight: theme.typography.weight.bold
+  };
+}, {
+  svg: {
+    height: 12,
+    width: 12,
+    marginRight: 4,
+    marginTop: -2,
+    path: {
+      fill: 'currentColor'
+    }
+  }
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      status = _ref2.status;
+
+  switch (status) {
+    case 'critical':
+      {
+        return {
+          color: theme.color.critical,
+          background: theme.background.critical
+        };
+      }
+
+    case 'negative':
+      {
+        return {
+          color: theme.color.negative,
+          background: theme.background.negative
+        };
+      }
+
+    case 'warning':
+      {
+        return {
+          color: theme.color.warning,
+          background: theme.background.warning
+        };
+      }
+
+    case 'neutral':
+      {
+        return {
+          color: theme.color.dark,
+          background: theme.color.mediumlight
+        };
+      }
+
+    case 'positive':
+      {
+        return {
+          color: theme.color.positive,
+          background: theme.background.positive
+        };
+      }
+
+    default:
+      {
+        return {};
+      }
+  }
+});
+
+var Badge = function Badge(_ref3) {
+  var props = Object.assign({}, _ref3);
+  return /*#__PURE__*/_react.default.createElement(BadgeWrapper, props);
+};
+
+exports.Badge = Badge;
+Badge.displayName = "Badge";

package/dist/cjs/Badge/Badge.stories.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Badge = require("./Badge");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+(0, _react2.storiesOf)('Basics/Badge', module).add('all badges', function () {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Badge.Badge, {
+    status: "positive"
+  }, "Positive"), /*#__PURE__*/_react.default.createElement(_Badge.Badge, {
+    status: "negative"
+  }, "Negative"), /*#__PURE__*/_react.default.createElement(_Badge.Badge, {
+    status: "neutral"
+  }, "Neutral"));
+});

package/dist/cjs/Button/Button.js

@@ -0,0 +1,279 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+require("core-js/modules/es.object.keys.js");
+
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.weak-map.js");
+
+require("core-js/modules/es.object.to-string.js");
+
+require("core-js/modules/es.string.iterator.js");
+
+require("core-js/modules/es.array.iterator.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Button = void 0;
+
+require("core-js/modules/es.string.small.js");
+
+require("core-js/modules/es.string.bold.js");
+
+require("core-js/modules/es.object.assign.js");
+
+require("core-js/modules/es.array.concat.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _theming = require("@storybook/theming");
+
+var _polished = require("polished");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var ButtonWrapper = _theming.styled.button(function (_ref) {
+  var small = _ref.small,
+      theme = _ref.theme;
+  return {
+    border: 0,
+    borderRadius: '3em',
+    cursor: 'pointer',
+    display: 'inline-block',
+    overflow: 'hidden',
+    padding: small ? '8px 16px' : '13px 20px',
+    position: 'relative',
+    textAlign: 'center',
+    textDecoration: 'none',
+    transition: 'all 150ms ease-out',
+    transform: 'translate3d(0,0,0)',
+    verticalAlign: 'top',
+    whiteSpace: 'nowrap',
+    userSelect: 'none',
+    opacity: 1,
+    margin: 0,
+    background: 'transparent',
+    fontSize: "".concat(small ? theme.typography.size.s1 : theme.typography.size.s2 - 1, "px"),
+    fontWeight: theme.typography.weight.bold,
+    lineHeight: '1',
+    svg: {
+      display: 'inline-block',
+      height: small ? 14 : 16,
+      width: small ? 14 : 16,
+      verticalAlign: 'top',
+      marginRight: small ? 4 : 6,
+      marginTop: small ? -1 : -2,
+      marginBottom: small ? -1 : -2,
+
+      /* Necessary for js mouse events to not glitch out when hovering on svgs */
+      pointerEvents: 'none',
+      path: {
+        fill: 'currentColor'
+      }
+    }
+  };
+}, function (_ref2) {
+  var disabled = _ref2.disabled;
+  return disabled ? {
+    cursor: 'not-allowed !important',
+    opacity: 0.5,
+    '&:hover': {
+      transform: 'none'
+    }
+  } : {};
+}, function (_ref3) {
+  var containsIcon = _ref3.containsIcon,
+      small = _ref3.small;
+  return containsIcon ? Object.assign({
+    svg: {
+      display: 'block',
+      margin: 0
+    }
+  }, small ? {
+    padding: 9
+  } : {
+    padding: 12
+  }) : {};
+}, function (_ref4) {
+  var theme = _ref4.theme,
+      primary = _ref4.primary,
+      secondary = _ref4.secondary,
+      gray = _ref4.gray;
+  var color;
+
+  if (gray) {
+    color = theme.color.medium;
+  } else if (secondary) {
+    color = theme.color.secondary;
+  } else if (primary) {
+    color = theme.color.primary;
+  }
+
+  return color ? {
+    background: color,
+    color: gray ? theme.color.darkest : theme.color.lightest,
+    '&:hover': {
+      background: (0, _polished.darken)(0.05, color)
+    },
+    '&:active': {
+      boxShadow: 'rgba(0, 0, 0, 0.1) 0 0 0 3em inset'
+    },
+    '&:focus': {
+      boxShadow: "".concat((0, _polished.rgba)(color, 1), " 0 1px 9px 2px"),
+      outline: 'none'
+    },
+    '&:focus:hover': {
+      boxShadow: "".concat((0, _polished.rgba)(color, 0.2), " 0 8px 18px 0px")
+    }
+  } : {};
+}, function (_ref5) {
+  var theme = _ref5.theme,
+      tertiary = _ref5.tertiary,
+      inForm = _ref5.inForm,
+      small = _ref5.small;
+  return tertiary ? Object.assign({
+    background: theme.base === 'light' ? (0, _polished.darken)(0.02, theme.input.background) : (0, _polished.lighten)(0.02, theme.input.background),
+    color: theme.input.color,
+    boxShadow: "".concat(theme.input.border, " 0 0 0 1px inset"),
+    borderRadius: theme.input.borderRadius
+  }, inForm && small ? {
+    padding: '10px 16px'
+  } : {}, {
+    '&:hover': Object.assign({
+      background: theme.base === 'light' ? (0, _polished.darken)(0.05, theme.input.background) : (0, _polished.lighten)(0.05, theme.input.background)
+    }, inForm ? {} : {
+      boxShadow: 'rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset'
+    }),
+    '&:active': {
+      background: theme.input.background
+    },
+    '&:focus': {
+      boxShadow: "".concat((0, _polished.rgba)(theme.color.secondary, 1), " 0 0 0 1px inset"),
+      outline: 'none'
+    }
+  }) : {};
+}, function (_ref6) {
+  var theme = _ref6.theme,
+      outline = _ref6.outline;
+  return outline ? {
+    boxShadow: "".concat((0, _polished.transparentize)(0.8, theme.color.defaultText), " 0 0 0 1px inset"),
+    color: (0, _polished.transparentize)(0.3, theme.color.defaultText),
+    background: 'transparent',
+    '&:hover, &:focus': {
+      boxShadow: "".concat((0, _polished.transparentize)(0.5, theme.color.defaultText), " 0 0 0 1px inset"),
+      outline: 'none'
+    },
+    '&:active': {
+      boxShadow: "".concat((0, _polished.transparentize)(0.5, theme.color.defaultText), " 0 0 0 2px inset"),
+      color: (0, _polished.transparentize)(0, theme.color.defaultText)
+    }
+  } : {};
+}, function (_ref7) {
+  var theme = _ref7.theme,
+      outline = _ref7.outline,
+      primary = _ref7.primary;
+  var color = theme.color.primary;
+  return outline && primary ? {
+    boxShadow: "".concat(color, " 0 0 0 1px inset"),
+    color: color,
+    'svg path': {
+      fill: color
+    },
+    '&:hover': {
+      boxShadow: "".concat(color, " 0 0 0 1px inset"),
+      background: 'transparent'
+    },
+    '&:active': {
+      background: color,
+      boxShadow: "".concat(color, " 0 0 0 1px inset"),
+      color: theme.color.tertiary
+    },
+    '&:focus': {
+      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat((0, _polished.rgba)(color, 0.4), " 0 1px 9px 2px"),
+      outline: 'none'
+    },
+    '&:focus:hover': {
+      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat((0, _polished.rgba)(color, 0.2), " 0 8px 18px 0px")
+    }
+  } : {};
+}, function (_ref8) {
+  var theme = _ref8.theme,
+      outline = _ref8.outline,
+      primary = _ref8.primary,
+      secondary = _ref8.secondary;
+  var color;
+
+  if (secondary) {
+    color = theme.color.secondary;
+  } else if (primary) {
+    color = theme.color.primary;
+  }
+
+  return outline && color ? {
+    boxShadow: "".concat(color, " 0 0 0 1px inset"),
+    color: color,
+    'svg path': {
+      fill: color
+    },
+    '&:hover': {
+      boxShadow: "".concat(color, " 0 0 0 1px inset"),
+      background: 'transparent'
+    },
+    '&:active': {
+      background: color,
+      boxShadow: "".concat(color, " 0 0 0 1px inset"),
+      color: theme.color.tertiary
+    },
+    '&:focus': {
+      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat((0, _polished.rgba)(color, 0.4), " 0 1px 9px 2px"),
+      outline: 'none'
+    },
+    '&:focus:hover': {
+      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat((0, _polished.rgba)(color, 0.2), " 0 8px 18px 0px")
+    }
+  } : {};
+});
+
+var ButtonLink = ButtonWrapper.withComponent('a', {
+  target: "ex9hp6v0",
+  label: "ButtonLink"
+});
+var Button = Object.assign( /*#__PURE__*/(0, _react.forwardRef)(function (_ref9, ref) {
+  var isLink = _ref9.isLink,
+      children = _ref9.children,
+      props = _objectWithoutProperties(_ref9, ["isLink", "children"]);
+
+  if (isLink) {
+    return /*#__PURE__*/_react.default.createElement(ButtonLink, _extends({}, props, {
+      ref: ref
+    }), children);
+  }
+
+  return /*#__PURE__*/_react.default.createElement(ButtonWrapper, _extends({}, props, {
+    ref: ref
+  }), children);
+}), {
+  defaultProps: {
+    isLink: false
+  }
+});
+exports.Button = Button;

package/dist/cjs/Button/Button.stories.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@storybook/react");
+
+var _Button = require("./Button");
+
+var _icon = require("../icon/icon");
+
+var _index = require("../form/index");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FormButton = _index.Form.Button;
+(0, _react2.storiesOf)('Basics/Button', module).add('all buttons', function () {
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Button that is used for forms"), /*#__PURE__*/_react.default.createElement(FormButton, null, "Form.Button"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("p", null, "Buttons that are used for everything else"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    primary: true
+  }, "Primary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true
+  }, "Secondary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    outline: true,
+    containsIcon: true,
+    title: "link"
+  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "link"
+  })), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    outline: true
+  }, "Outline"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    outline: true,
+    primary: true
+  }, "Outline primary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    outline: true,
+    secondary: true
+  }, "Outline secondary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    primary: true,
+    disabled: true
+  }, "Disabled"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    primary: true,
+    small: true
+  }, "Primary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    secondary: true,
+    small: true
+  }, "Secondary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    gray: true,
+    small: true
+  }, "Secondary"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    outline: true,
+    small: true
+  }, "Outline"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    primary: true,
+    disabled: true,
+    small: true
+  }, "Disabled"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    outline: true,
+    small: true,
+    containsIcon: true,
+    title: "link"
+  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "link"
+  })), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    outline: true,
+    small: true
+  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "link"
+  }), "Link"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    primary: true,
+    small: true,
+    isLink: true,
+    href: "#"
+  }, /*#__PURE__*/_react.default.createElement(_icon.Icons, {
+    icon: "link"
+  }), " Link"));
+});

package/dist/cjs/Colors/SideBySide.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideBySide = void 0;
+
+var _theming = require("@storybook/theming");
+
+var SideBySide = _theming.styled.div({
+  display: 'grid',
+  gridColumnGap: 30,
+  gridTemplateColumns: '1fr 1fr',
+  position: 'absolute',
+  width: '100vw',
+  height: '100vh',
+  overflow: 'auto',
+  top: 0,
+  left: 0,
+  '& > *': {
+    padding: 20
+  }
+});
+
+exports.SideBySide = SideBySide;