@stokr/components-library 0.6.7 → 0.6.8

package/dist/components/ForgotPasswordModal/ForgotPasswordModal.js

@@ -0,0 +1,127 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ForgotPasswordModal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _formik = require("formik");
+var Yup = _interopRequireWildcard(require("yup"));
+var _Modal = require("../Modal/Modal");
+var _Form = _interopRequireWildcard(require("../Form/Form"));
+var _Text = _interopRequireDefault(require("../Text/Text.styles"));
+var _Input = _interopRequireDefault(require("../Input/Input"));
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var _Grid = require("../Grid/Grid.styles");
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var ForgotPasswordModal = /*#__PURE__*/function (_PureComponent) {
+  _inherits(ForgotPasswordModal, _PureComponent);
+  var _super = _createSuper(ForgotPasswordModal);
+  function ForgotPasswordModal() {
+    var _this;
+    _classCallCheck(this, ForgotPasswordModal);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "initialValues", {
+      email: ''
+    });
+    _defineProperty(_assertThisInitialized(_this), "validationSchema", Yup.object().shape({
+      email: Yup.string().email('Email is not valid').required('Email is required')
+    }));
+    return _this;
+  }
+  _createClass(ForgotPasswordModal, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        isModalOpen = _this$props.isModalOpen,
+        onModalClose = _this$props.onModalClose,
+        onFormSend = _this$props.onFormSend,
+        onModalSwitch = _this$props.onModalSwitch;
+      return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+        isOpen: isModalOpen,
+        onClose: onModalClose
+      }, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+        modalTop: true
+      }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Forgot password"), /*#__PURE__*/_react.default.createElement("p", null, 'Please log in to engage in our community & invest in exciting opportunities.'))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+        modalBot: true
+      }, /*#__PURE__*/_react.default.createElement(_Modal.ModalLinkWrap, null, 'Remember your password? ', /*#__PURE__*/_react.default.createElement(_Modal.ModalLink, {
+        as: "button",
+        onClick: onModalSwitch
+      }, "Sign up")))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+        part: 8
+      }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+        initialValues: this.initialValues,
+        validationSchema: this.validationSchema,
+        onSubmit: onFormSend
+      }, function (_ref) {
+        var values = _ref.values,
+          errors = _ref.errors,
+          touched = _ref.touched,
+          handleBlur = _ref.handleBlur,
+          setFieldValue = _ref.setFieldValue,
+          setFieldTouched = _ref.setFieldTouched;
+        var onChangeWithTouch = function onChangeWithTouch(e) {
+          var field = e.target;
+          setFieldValue(field.name, field.value, false);
+          setFieldTouched(field.name);
+        };
+        var submitDisabled = !touched.email || !!errors.email;
+        return /*#__PURE__*/_react.default.createElement(_Form.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+          noPadding: true
+        }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+          id: "forgot-email",
+          name: "email",
+          type: "email",
+          label: "Your email",
+          value: values.email,
+          onChange: onChangeWithTouch,
+          onBlur: handleBlur,
+          error: !!errors.email,
+          touched: !!touched.email
+        }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
+          show: errors.email && touched.email
+        }, errors.email))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+          noPaddingBottom: true,
+          noPaddingHorizontal: true
+        }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+          type: "submit",
+          fluid: true,
+          disabled: submitDisabled
+        }, "Remind")));
+      })))));
+    }
+  }]);
+  return ForgotPasswordModal;
+}(_react.PureComponent);
+exports.ForgotPasswordModal = ForgotPasswordModal;
+ForgotPasswordModal.propTypes = {
+  isModalOpen: _propTypes.default.bool.isRequired,
+  onModalClose: _propTypes.default.func.isRequired,
+  onFormSend: _propTypes.default.func.isRequired,
+  onModalSwitch: _propTypes.default.func.isRequired
+};
+var _default = ForgotPasswordModal;
+exports.default = _default;

package/dist/components/ForgotPasswordModal/ForgotPasswordModal.stories.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ForgotPasswordModalOverview = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ForgotPasswordModal = _interopRequireDefault(require("./ForgotPasswordModal"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Forgot Password Modal',
+  component: _ForgotPasswordModal.default,
+  argTypes: {
+    isModalOpen: {
+      type: 'boolean',
+      defaultValue: true
+    },
+    onModalClose: {
+      type: 'function',
+      action: 'onModalClose',
+      required: true
+    },
+    onFormSend: {
+      type: 'function',
+      action: 'onFormSend',
+      required: true
+    },
+    onModalSwitch: {
+      type: 'function',
+      action: 'onModalSwitch',
+      required: true
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_ForgotPasswordModal.default, args));
+};
+var ForgotPasswordModalOverview = Template.bind({});
+exports.ForgotPasswordModalOverview = ForgotPasswordModalOverview;
+ForgotPasswordModalOverview.args = {};

package/dist/components/Form/Form.js

@@ -0,0 +1,68 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Form = void 0;
+Object.defineProperty(exports, "FormError", {
+  enumerable: true,
+  get: function get() {
+    return _Form.FormError;
+  }
+});
+Object.defineProperty(exports, "FormField", {
+  enumerable: true,
+  get: function get() {
+    return _Form.FormField;
+  }
+});
+Object.defineProperty(exports, "FormInfo", {
+  enumerable: true,
+  get: function get() {
+    return _Form.FormInfo;
+  }
+});
+exports.default = void 0;
+exports.validate = validate;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var Yup = _interopRequireWildcard(require("yup"));
+var _Form = require("./Form.styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var Form = function Form(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_Form.FormContainer, {
+    autoComplete: "off",
+    noValidate: true
+  }, children);
+};
+
+/**
+ * @function validate
+ * @description Generic function to perform field-level validation
+ * @param {string} fieldName
+ * @param {Object} formik
+ *
+ * @returns {(undefined|string)} returns error message if error exists, else return undefined
+ */
+exports.Form = Form;
+function validate(fieldName, formik) {
+  var values = formik.values,
+    validationSchema = formik.validationSchema;
+  try {
+    Yup.reach(validationSchema, fieldName).validateSync(values[fieldName], {
+      abortEarly: false
+    });
+    return undefined;
+  } catch (validateError) {
+    return validateError.inner[0].errors[0];
+  }
+}
+Form.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+var _default = Form;
+exports.default = _default;

package/dist/components/Form/Form.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FormOverview = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Form = _interopRequireDefault(require("./Form"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _formik = require("formik");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+// import { FormField, FormInfo, FormError } from './Form'
+var _default = {
+  title: 'Components Library/Form',
+  component: _Form.default,
+  argTypes: {
+    children: {
+      type: 'node',
+      defaultValue: [],
+      required: true
+    }
+  }
+};
+exports.default = _default;
+_Form.default.decorators = [_formik.withFormik];
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Form.default, args));
+};
+var FormOverview = Template.bind({});
+exports.FormOverview = FormOverview;
+FormOverview.args = {};
+
+//doublecheck:
+//not working - formik..
+//_useFormikContext is undefined

package/dist/components/Form/Form.styles.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormInfo = exports.FormField = exports.FormError = exports.FormContainer = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _formik = require("formik");
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var FormContainer = (0, _styledComponents.default)(_formik.Form).withConfig({
+  displayName: "Formstyles__FormContainer",
+  componentId: "sc-rsw01z-0"
+})(["display:flex;flex-direction:column;flex-grow:1;"]);
+exports.FormContainer = FormContainer;
+var FormField = _styledComponents.default.div.withConfig({
+  displayName: "Formstyles__FormField",
+  componentId: "sc-rsw01z-1"
+})(["position:relative;"]);
+exports.FormField = FormField;
+var FormInfo = _styledComponents.default.div.withConfig({
+  displayName: "Formstyles__FormInfo",
+  componentId: "sc-rsw01z-2"
+})(["font-family:'Open Sans';font-weight:", ";font-size:9px;line-height:1.78em;letter-spacing:0.4px;color:", ";opacity:", ";", " ", " ", " ", " a{text-decoration:underline;transition:color .2s;&:hover{color:", ";}}"], function (props) {
+  return props.styleID ? "400" : "300";
+}, function (props) {
+  return _theme.default.cBlack;
+}, function (props) {
+  return props.styleID ? "1" : "0.5";
+}, function (props) {
+  return props.center && 'text-align: center;';
+}, function (props) {
+  return props.marginTop && 'margin-top: 18px;';
+}, function (props) {
+  return props.marginBottom && 'margin-bottom: 18px;';
+}, _rwd.default.Large(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    font-size: 12px;\n  "]))), function (props) {
+  return _theme.default.cPrimary;
+});
+exports.FormInfo = FormInfo;
+var FormError = _styledComponents.default.div.withConfig({
+  displayName: "Formstyles__FormError",
+  componentId: "sc-rsw01z-3"
+})(["display:none;font-family:'Open Sans';font-weight:300;font-size:11px;line-height:12px;margin:0;position:relative;left:0;top:", ";margin-bottom:-12px;letter-spacing:0.4px;color:", ";", " ", " ", ""], function (props) {
+  return props.styleSUF ? "10px" : "2px";
+}, function (props) {
+  return _theme.default.cWarning;
+}, function (props) {
+  return props.show && 'display: block;';
+}, function (_ref) {
+  var withMarginLeft = _ref.withMarginLeft;
+  return withMarginLeft && 'margin-left: 28px;';
+}, function (_ref2) {
+  var withTopSpacing = _ref2.withTopSpacing;
+  return withTopSpacing && 'top: 10px;';
+});
+exports.FormError = FormError;

package/dist/components/FullscreenCard/FullscreenCard.styles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FullscreenCardContent = exports.FullscreenCardContainer = exports.FullscreenCard = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _semanticUiReact = require("semantic-ui-react");
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var FullscreenCardContainer = _styledComponents.default.div.withConfig({
+  displayName: "FullscreenCardstyles__FullscreenCardContainer",
+  componentId: "sc-cdmqth-0"
+})(["display:flex;min-height:100vh;padding:0;background:", ";", ""], function (props) {
+  return _theme.default.cGrey;
+}, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 120px 0;\n  "]))));
+exports.FullscreenCardContainer = FullscreenCardContainer;
+var FullscreenCard = (0, _styledComponents.default)(_semanticUiReact.Card).withConfig({
+  displayName: "FullscreenCardstyles__FullscreenCard",
+  componentId: "sc-cdmqth-1"
+})(["&&&{box-shadow:0 2px 20px 0 rgba(0,0,0,0.1);width:100%;", "}"], _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      width: 480px;\n      padding: 0;\n      margin: auto;\n    "]))));
+exports.FullscreenCard = FullscreenCard;
+var FullscreenCardContent = (0, _styledComponents.default)(_semanticUiReact.Card.Content).withConfig({
+  displayName: "FullscreenCardstyles__FullscreenCardContent",
+  componentId: "sc-cdmqth-2"
+})(["&&&{padding:48px 32px 55px;", "}"], _rwd.default.Medium(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      padding: 66px 60px 56px;\n    "]))));
+
+// unused component
+exports.FullscreenCardContent = FullscreenCardContent;

package/dist/components/Grid/Grid.styles.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.Row = exports.PageWrapper = exports.Column = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _grid = _interopRequireDefault(require("../../styles/grid"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _spacing = _interopRequireDefault(require("../../styles/spacing"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "Gridstyles__Wrapper",
+  componentId: "sc-1jreazl-0"
+})(["height:100%;", ""], function (props) {
+  return props.flex && "\n    display:flex;\n  ";
+});
+exports.Wrapper = Wrapper;
+var Row = _styledComponents.default.div.withConfig({
+  displayName: "Gridstyles__Row",
+  componentId: "sc-1jreazl-1"
+})(["display:flex;flex-wrap:wrap;text-align:left;", " ", " ", " ", " ", " ", " ", ""], function (props) {
+  return props.center && "\n    justify-content: center;\n  ";
+}, function (props) {
+  return props.right && "\n    justify-content: right;\n  ";
+}, function (props) {
+  return props.spaceBetween && "\n    justify-content: space-between;\n  ";
+}, function (props) {
+  return props.stretch && "\n    height: 100%;\n    align-items: stretch;\n  ";
+}, function (props) {
+  return props.dashboard && "\n    margin: -16px;\n  ";
+}, function (props) {
+  return props.nowrap && "\n    flex-wrap: nowrap;\n  ";
+}, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n  "])), function (props) {
+  return props.main && "\n      z-index: 0;\n      min-height: calc(100vh - ".concat(_spacing.default.footerHeight, "px);\n      padding-top: ").concat(_spacing.default.headerHeight, "px;\n    ");
+})); // ID has padding-top as 85px instead of headerHeight (which is set to 96px)
+exports.Row = Row;
+var Column = _styledComponents.default.div.withConfig({
+  displayName: "Gridstyles__Column",
+  componentId: "sc-1jreazl-2"
+})(["display:flex;flex-direction:column;width:100%;", " ", " ", " ", " ", " ", ""], function (props) {
+  return props.center && "\n    justify-content: center;\n  ";
+}, function (props) {
+  return props.alignCenter && "\n    align-items: center;\n  ";
+}, function (props) {
+  return props.spaceBetween && "\n    justify-content: space-between;\n  ";
+}, function (props) {
+  return props.flexEnd && "\n    justify-content: flex-end;\n  ";
+}, function (props) {
+  return props.mainRelative && "\n    padding: 18px 0 28px;\n  ";
+}, _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), function (props) {
+  return props.part && "\n      width: ".concat((0, _grid.default)(props.part, props.full), ";\n    ");
+}, function (props) {
+  return props.mainFixed && "\n      position: fixed;\n      top: ".concat(_spacing.default.headerHeight, "px;\n      left: 0;\n      height: calc(100% - ").concat(_spacing.default.headerHeight, "px);\n    ");
+}, function (props) {
+  return props.mainRelative && "\n      position: relative;\n      margin-left: ".concat((0, _grid.default)((props.full || 16) - props.part, props.full), ";\n      border-left: 1px solid ").concat(_theme.default.cLightGrey, ";\n      padding: 54px 0 42px;\n    ");
+}, function (props) {
+  return props.withBorder && "\n      border-left: 1px solid ".concat(_theme.default.cLightGrey, ";\n    ");
+}));
+exports.Column = Column;
+var PageWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Gridstyles__PageWrapper",
+  componentId: "sc-1jreazl-3"
+})(["min-height:100vh;display:flex;flex-direction:column;", "{flex-grow:1;}"], Row);
+exports.PageWrapper = PageWrapper;