@stokr/components-library 2.3.58-beta.6 → 2.3.58-beta.8

package/dist/components/MenuNav/MenuNav.styles.js

@@ -6,15 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.MenuNav = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _theme = _interopRequireDefault(require("../../styles/theme"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var MenuNav = _styledComponents.default.nav.withConfig({
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const MenuNav = exports.MenuNav = _styledComponents.default.nav.withConfig({
   displayName: "MenuNavstyles__MenuNav",
   componentId: "sc-1v9gc1o-0"
-})(["display:inline-block;vertical-align:middle;ul{display:block;list-style:none;font-size:0;padding:0;margin:0;margin:0 -18px;}li{display:inline-block;padding:0;margin:0 18px;}button,a{position:relative;display:block;font-size:11px;line-height:16px;letter-spacing:2px;text-transform:uppercase;padding:2px 0;border:0;margin:0;cursor:pointer;font-weight:500;text-decoration:none;&:hover{opacity:0.68;}}", ""], function (props) {
-  return props.mobile && "\n    display: block;\n\n    ul {\n      margin: 0;\n      padding: 0;\n    }\n\n    li {\n      display: block;\n      text-align: center;\n      margin: 0;\n      padding: 18px 16px;\n    }\n\n    a {\n      display: inline-block;\n    }\n  ";
-});
-exports.MenuNav = MenuNav;
-var _default = MenuNav; // Merging using IIS & ID Version - from button section (fake style prop to show difference):
+})(["display:inline-block;vertical-align:middle;ul{display:block;list-style:none;font-size:0;padding:0;margin:0;margin:0 -18px;}li{display:inline-block;padding:0;margin:0 18px;}button,a{position:relative;display:block;font-size:11px;line-height:16px;letter-spacing:2px;text-transform:uppercase;padding:2px 0;border:0;margin:0;cursor:pointer;font-weight:500;text-decoration:none;&:hover{opacity:0.68;}}", ""], props => props.mobile && "\n    display: block;\n\n    ul {\n      margin: 0;\n      padding: 0;\n    }\n\n    li {\n      display: block;\n      text-align: center;\n      margin: 0;\n      padding: 18px 16px;\n    }\n\n    a {\n      display: inline-block;\n    }\n  ");
+var _default = exports.default = MenuNav; // Merging using IIS & ID Version - from button section (fake style prop to show difference):
 //  ${props =>
 //    props.styleIISandID
 //      ? `   &:hover {
@@ -38,5 +35,4 @@ var _default = MenuNav; // Merging using IIS & ID Version - from button section
 //      opacity: 1;
 //      transform: translateY(0);
 //    }
-//  }`}
-exports.default = _default;
+//  }`}

package/dist/components/Modal/Modal.js

@@ -1,49 +1,48 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Modal = void 0;
 Object.defineProperty(exports, "ModalBack", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Modal.ModalBack;
   }
 });
 Object.defineProperty(exports, "ModalClose", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Modal.ModalClose;
   }
 });
 Object.defineProperty(exports, "ModalInner", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Modal.ModalInner;
   }
 });
 Object.defineProperty(exports, "ModalInnerSmartContractAddress", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Modal.ModalInnerSmartContractAddress;
   }
 });
 Object.defineProperty(exports, "ModalInnerWithBorder", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Modal.ModalInnerWithBorder;
   }
 });
 Object.defineProperty(exports, "ModalLink", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Modal.ModalLink;
   }
 });
 Object.defineProperty(exports, "ModalLinkWrap", {
   enumerable: true,
-  get: function get() {
+  get: function () {
     return _Modal.ModalLinkWrap;
   }
 });
@@ -53,11 +52,10 @@ var _reactTransitionGroup = require("react-transition-group");
 var _reactPortal = require("react-portal");
 var _Modal = require("./Modal.styles");
 var _global = _interopRequireDefault(require("../../styles/global"));
-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; }
-var timeout = 300;
-var getTransitionStyles = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const timeout = 300;
+const getTransitionStyles = {
   entering: {
     opacity: 0
   },
@@ -70,24 +68,26 @@ var getTransitionStyles = {
     opacity: 0
   }
 };
-var Modal = function Modal(_ref) {
-  var children = _ref.children,
-    fullscreen = _ref.fullscreen,
-    kyc = _ref.kyc,
-    thin = _ref.thin,
-    isOpen = _ref.isOpen,
-    onClose = _ref.onClose,
-    className = _ref.className,
-    isRegisterEntity = _ref.isRegisterEntity,
-    background = _ref.background,
-    maxHeight = _ref.maxHeight,
-    boxStyles = _ref.boxStyles;
-  (0, _react.useEffect)(function () {
+const Modal = _ref => {
+  let {
+    children,
+    fullscreen,
+    kyc,
+    thin,
+    isOpen,
+    onClose,
+    className,
+    isRegisterEntity,
+    background,
+    maxHeight,
+    boxStyles
+  } = _ref;
+  (0, _react.useEffect)(() => {
     //if modal open, disable scroll on the background
     if (isOpen) {
       document.body.style.overflow = 'hidden';
     }
-    return function () {
+    return () => {
       document.body.style.overflow = 'unset';
     };
   }, [isOpen]);
@@ -102,27 +102,25 @@ var Modal = function Modal(_ref) {
       enter: timeout,
       exit: timeout
     }
-  }, function (status) {
-    return /*#__PURE__*/_react.default.createElement(_Modal.ModalRoot, {
-      className: className,
-      style: getTransitionStyles[status]
-    }, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_Modal.Dimmer, {
-      background: background,
-      open: isOpen,
-      kyc: kyc,
-      closeOnDimmerClick: false,
-      onClose: onClose
-    }, /*#__PURE__*/_react.default.createElement(_Modal.Box, {
-      kyc: kyc,
-      fullscreen: fullscreen,
-      thin: thin,
-      isRegisterEntity: isRegisterEntity,
-      style: boxStyles,
-      maxHeight: maxHeight
-    }, /*#__PURE__*/_react.default.createElement(_Modal.ModalClose, {
-      onClick: onClose
-    }), children)));
-  }));
+  }, status => /*#__PURE__*/_react.default.createElement(_Modal.ModalRoot, {
+    className: className,
+    style: getTransitionStyles[status]
+  }, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_Modal.Dimmer, {
+    background: background,
+    open: isOpen,
+    kyc: kyc,
+    closeOnDimmerClick: false,
+    onClose: onClose
+  }, /*#__PURE__*/_react.default.createElement(_Modal.Box, {
+    kyc: kyc,
+    fullscreen: fullscreen,
+    thin: thin,
+    isRegisterEntity: isRegisterEntity,
+    style: boxStyles,
+    maxHeight: maxHeight
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalClose, {
+    onClick: onClose
+  }), children)))));
 };
 exports.Modal = Modal;
 Modal.propTypes = {

package/dist/components/Modal/Modal.stories.js

@@ -9,8 +9,8 @@ var _Modal = require("./Modal");
 var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
 var _SvgIcons = require("../SvgIcons");
 var _global = _interopRequireDefault(require("../../styles/global"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
   title: 'Components Library/Modal',
   component: _Modal.Modal,
   argTypes: {
@@ -44,38 +44,30 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-var Template = function Template(args) {
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Modal.Modal, args)));
-};
-var ModalOpen = Template.bind({});
-exports.ModalOpen = ModalOpen;
+const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Modal.Modal, args)));
+const ModalOpen = exports.ModalOpen = Template.bind({});
 ModalOpen.args = {
   children: 'I am the Child Element',
   isOpen: true
 };
-var ModalFullscreen = Template.bind({});
-exports.ModalFullscreen = ModalFullscreen;
+const ModalFullscreen = exports.ModalFullscreen = Template.bind({});
 ModalFullscreen.args = {
   children: 'I am the Child Element and I am Fullscreen',
   isOpen: true,
   fullscreen: true
 };
-var ModalWithImg = Template.bind({});
-exports.ModalWithImg = ModalWithImg;
+const ModalWithImg = exports.ModalWithImg = Template.bind({});
 ModalWithImg.args = {
   children: /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null),
   isOpen: true
 };
-var ModalWithImgThin = Template.bind({});
-exports.ModalWithImgThin = ModalWithImgThin;
+const ModalWithImgThin = exports.ModalWithImgThin = Template.bind({});
 ModalWithImgThin.args = {
   children: /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null),
   isOpen: true,
   thin: true
 };
-var ModalWithImgKYC = Template.bind({});
-exports.ModalWithImgKYC = ModalWithImgKYC;
+const ModalWithImgKYC = exports.ModalWithImgKYC = Template.bind({});
 ModalWithImgKYC.args = {
   children: /*#__PURE__*/_react.default.createElement(_SvgIcons.TwoSvg, null),
   isOpen: true,

package/dist/components/Modal/Modal.styles.js

@@ -1,6 +1,5 @@
 "use strict";
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,138 +9,77 @@ var _reactRouterDom = require("react-router-dom");
 var _grid = _interopRequireDefault(require("../../styles/grid"));
 var _rwd = _interopRequireDefault(require("../../styles/rwd"));
 var _colors = _interopRequireDefault(require("../../styles/colors"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
-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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var ModalRoot = _styledComponents.default.div.withConfig({
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const ModalRoot = exports.ModalRoot = _styledComponents.default.div.withConfig({
   displayName: "Modalstyles__ModalRoot",
   componentId: "sc-9hc271-0"
 })(["z-index:1000;position:fixed;top:0;left:0;width:100%;height:100%;"]);
-exports.ModalRoot = ModalRoot;
-var Dimmer = _styledComponents.default.div.withConfig({
+const Dimmer = exports.Dimmer = _styledComponents.default.div.withConfig({
   displayName: "Modalstyles__Dimmer",
   componentId: "sc-9hc271-1"
-})(["position:relative;top:0;left:0;display:block;width:100%;height:100%;background:", ";background-size:cover;font-size:0;text-align:center;overflow-y:auto;", " &:after{content:'';display:inline-block;vertical-align:middle;height:100%;width:0;}"], function (props) {
-  return props.background ? props.background : 'rgba(0, 0, 0, 0.7)';
-}, function (props) {
-  return props.kyc && 'overflow: visible;';
-});
-exports.Dimmer = Dimmer;
-var Box = _styledComponents.default.div.withConfig({
+})(["position:relative;top:0;left:0;display:block;width:100%;height:100%;background:", ";background-size:cover;font-size:0;text-align:center;overflow-y:auto;", " &:after{content:'';display:inline-block;vertical-align:middle;height:100%;width:0;}"], props => props.background ? props.background : 'rgba(0, 0, 0, 0.7)', props => props.kyc && 'overflow: visible;');
+const Box = exports.Box = _styledComponents.default.div.withConfig({
   displayName: "Modalstyles__Box",
   componentId: "sc-9hc271-2"
-})(["display:inline-block;vertical-align:middle;position:relative;left:0;top:0;width:100%;background-color:", ";font-size:10px;text-align:left;box-shadow:0 2px 20px 0 rgba(0,0,0,0.1);max-height:", ";", " ", " ", " ", " @media screen and (max-width:767px){min-height:100vh;}", ""], _colors.default.white, function (props) {
-  return props.maxHeight || 'unset';
-}, function (props) {
-  return props.fullscreen && "\n    height: 90vh;\n  ";
-}, function (props) {
-  return props.kyc && "\n    width: 100vw;\n    height: 100vh;\n    max-width: 1024px!important;\n    max-height: 768px!important;\n  ";
-}, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: ", ";\n\n    ", "\n  "])), (0, _grid.default)(12), function (props) {
-  return props.thin && "\n      max-width: ".concat((0, _grid.default)(8), ";\n    ");
-}), _rwd.default.XLarge(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    //max-width: ", ";\n\n    ", "\n  "])), (0, _grid.default)(11), function (props) {
-  return props.thin && "\n      max-width: ".concat((0, _grid.default)(8), ";\n    ");
-}), function (_ref) {
-  var isRegisterEntity = _ref.isRegisterEntity;
-  return isRegisterEntity && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      max-width: 55% !important;\n      height: 65vh;\n    "])));
+})(["display:inline-block;vertical-align:middle;position:relative;left:0;top:0;width:100%;background-color:", ";font-size:10px;text-align:left;box-shadow:0 2px 20px 0 rgba(0,0,0,0.1);max-height:", ";", " ", " ", " ", " @media screen and (max-width:767px){min-height:100vh;}", ""], _colors.default.white, props => props.maxHeight || 'unset', props => props.fullscreen && "\n    height: 90vh;\n  ", props => props.kyc && "\n    width: 100vw;\n    height: 100vh;\n    max-width: 1024px!important;\n    max-height: 768px!important;\n  ", _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: ", ";\n\n    ", "\n  "])), (0, _grid.default)(12), props => props.thin && "\n      max-width: ".concat((0, _grid.default)(8), ";\n    ")), _rwd.default.XLarge(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    //max-width: ", ";\n\n    ", "\n  "])), (0, _grid.default)(11), props => props.thin && "\n      max-width: ".concat((0, _grid.default)(8), ";\n    ")), _ref => {
+  let {
+    isRegisterEntity
+  } = _ref;
+  return isRegisterEntity && (0, _styledComponents.css)(["max-width:55% !important;height:65vh;"]);
 });
-exports.Box = Box;
-var ModalInnerSmartContractAddress = _styledComponents.default.input.withConfig({
+const ModalInnerSmartContractAddress = exports.ModalInnerSmartContractAddress = _styledComponents.default.input.withConfig({
   displayName: "Modalstyles__ModalInnerSmartContractAddress",
   componentId: "sc-9hc271-3"
 })(["color:", ";font-family:'Open Sans';font-size:14px;font-weight:400;text-align:left;margin-top:24px;width:100%;apperance:none;resize:none;border:none;outline:0;"], _colors.default.black);
-exports.ModalInnerSmartContractAddress = ModalInnerSmartContractAddress;
-var ModalInnerWithBorder = _styledComponents.default.div.withConfig({
+const ModalInnerWithBorder = exports.ModalInnerWithBorder = _styledComponents.default.div.withConfig({
   displayName: "Modalstyles__ModalInnerWithBorder",
   componentId: "sc-9hc271-4"
-})(["border-radius:10px;border:1px solid ", ";padding:25px 35px;margin-top:39px;", " ", " ", " ", " ", " ", " p{color:", ";font-size:14px;font-weight:300;letter-spacing:0.53px;line-height:22px;text-align:left;margin:0;}"], _colors.default.lightGrey, function (props) {
-  return props.bottomRadius0 && "\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  ";
-}, function (props) {
-  return props.topRadius0 && "\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  ";
-}, function (props) {
-  return props.marginTop0 && "\n    margin-top: 0;\n  ";
-}, function (props) {
-  return props.bordderTopNone && "\n    border-top: 0;\n  ";
-}, function (props) {
-  return props.textAlignRight && "\n    text-align: right;\n  ";
-}, function (props) {
-  return props.paddingSmall && "\n    padding: 21px 25px;\n  ";
-}, _colors.default.black);
-exports.ModalInnerWithBorder = ModalInnerWithBorder;
-var ModalInner = _styledComponents.default.div.withConfig({
+})(["border-radius:10px;border:1px solid ", ";padding:25px 35px;margin-top:39px;", " ", " ", " ", " ", " ", " p{color:", ";font-size:14px;font-weight:300;letter-spacing:0.53px;line-height:22px;text-align:left;margin:0;}"], _colors.default.lightGrey, props => props.bottomRadius0 && "\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  ", props => props.topRadius0 && "\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  ", props => props.marginTop0 && "\n    margin-top: 0;\n  ", props => props.bordderTopNone && "\n    border-top: 0;\n  ", props => props.textAlignRight && "\n    text-align: right;\n  ", props => props.paddingSmall && "\n    padding: 21px 25px;\n  ", _colors.default.black);
+const ModalInner = exports.ModalInner = _styledComponents.default.div.withConfig({
   displayName: "Modalstyles__ModalInner",
   componentId: "sc-9hc271-5"
-})(["width:100%;height:100%;padding:40px ", ";display:flex;flex-direction:column;@media screen and (max-width:767px){height:", ";}", " ", " ", " ", " ", " ", " ", " ", " ", ""], (0, _grid.default)(1), function (_ref2) {
-  var isMobile = _ref2.isMobile;
+})(["width:100%;height:100%;padding:40px ", ";display:flex;flex-direction:column;@media screen and (max-width:767px){height:", ";}", " ", " ", " ", " ", " ", " ", " ", " ", ""], (0, _grid.default)(1), _ref2 => {
+  let {
+    isMobile
+  } = _ref2;
   return isMobile && '100vh';
-}, function (props) {
-  return props.center && "\n    text-align: center;\n  ";
-}, function (props) {
-  return props.background && "\n    background-color: ".concat(_colors.default.lightGrey, ";\n  ");
-}, function (props) {
-  return props.modalBot && "\n    background-color: ".concat(_colors.default.orangishRed, ";\n    color: ").concat(_colors.default.white, ";\n    flex-grow: 0 !important;\n    height: auto;\n  ");
-}, function (props) {
-  return props.modalTop && "\n    padding-bottom: 30px;\n  ";
-}, function (props) {
-  return props.center && "\n    justify-content: center;\n    align-items: center;\n  ";
-}, _rwd.default.Medium(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 53px ", ";\n\n    ", "\n\n    ", "\n\n    /* missing tiny */\n  "])), (0, _grid.default)(1, 12), function (props) {
-  return props.left && "\n      padding: 88px ".concat((0, _grid.default)(1, 12), ";\n    ");
-}, function (props) {
-  return props.modalTop && "\n      padding-bottom: 43px;\n      border-right: 1px solid ".concat(_colors.default.lightGrey, ";\n    ");
-}), _rwd.default.XLarge(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding: 53px ", ";\n\n    ", "\n\n    ", "\n\n    /* missing tiny */\n  "])), (0, _grid.default)(1, 10), function (props) {
-  return props.left && "\n      padding: 88px ".concat((0, _grid.default)(1, 10), ";\n    ");
-}, function (props) {
-  return props.modalTop && "\n      padding-bottom: 53px;\n    ";
-}), function (props) {
-  return props.noPadding && "\n    padding: 0!important;\n  ";
-}, function (props) {
-  return props.noPaddingHorizontal && "\n    padding-left: 0!important;\n    padding-right: 0!important;\n  ";
-});
-exports.ModalInner = ModalInner;
-var ModalClose = _styledComponents.default.i.attrs({
+}, props => props.center && "\n    text-align: center;\n  ", props => props.background && "\n    background-color: ".concat(_colors.default.lightGrey, ";\n  "), props => props.modalBot && "\n    background-color: ".concat(_colors.default.orangishRed, ";\n    color: ").concat(_colors.default.white, ";\n    flex-grow: 0 !important;\n    height: auto;\n  "), props => props.modalTop && "\n    padding-bottom: 30px;\n  ", props => props.center && "\n    justify-content: center;\n    align-items: center;\n  ", _rwd.default.Medium(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    padding: 53px ", ";\n\n    ", "\n\n    ", "\n\n    /* missing tiny */\n  "])), (0, _grid.default)(1, 12), props => props.left && "\n      padding: 88px ".concat((0, _grid.default)(1, 12), ";\n    "), props => props.modalTop && "\n      padding-bottom: 43px;\n      border-right: 1px solid ".concat(_colors.default.lightGrey, ";\n    ")), _rwd.default.XLarge(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    padding: 53px ", ";\n\n    ", "\n\n    ", "\n\n    /* missing tiny */\n  "])), (0, _grid.default)(1, 10), props => props.left && "\n      padding: 88px ".concat((0, _grid.default)(1, 10), ";\n    "), props => props.modalTop && "\n      padding-bottom: 53px;\n    "), props => props.noPadding && "\n    padding: 0!important;\n  ", props => props.noPaddingHorizontal && "\n    padding-left: 0!important;\n    padding-right: 0!important;\n  ");
+const ModalClose = exports.ModalClose = _styledComponents.default.i.attrs({
   className: 'ion ion-md-close'
 }).withConfig({
   displayName: "Modalstyles__ModalClose",
   componentId: "sc-9hc271-6"
-})(["z-index:4;position:absolute;top:0;right:0;width:40px;height:40px;text-align:center;cursor:pointer;color:", ";background-color:", ";transition:background-color 0.2s,color 0.2s;&:before{transition:transform 0.2s;font-size:24px;line-height:24px !important;width:24px;height:24px;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px;}&:hover{color:", ";background-color:", ";&:before{transform:rotate(-180deg);}}", ""], _colors.default.white, _colors.default.blue, _colors.default.black, _colors.default.white, _rwd.default.Medium(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 56px;\n    height: 56px;\n\n    &:before {\n      font-size: 27px;\n    }\n  "]))));
-exports.ModalClose = ModalClose;
-var ModalBack = _styledComponents.default.i.attrs({
+})(["z-index:4;position:absolute;top:0;right:0;width:40px;height:40px;text-align:center;cursor:pointer;color:", ";background-color:", ";transition:background-color 0.2s,color 0.2s;&:before{transition:transform 0.2s;font-size:24px;line-height:24px !important;width:24px;height:24px;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px;}&:hover{color:", ";background-color:", ";&:before{transform:rotate(-180deg);}}", ""], _colors.default.white, _colors.default.blue, _colors.default.black, _colors.default.white, _rwd.default.Medium(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: 56px;\n    height: 56px;\n\n    &:before {\n      font-size: 27px;\n    }\n  "]))));
+const ModalBack = exports.ModalBack = _styledComponents.default.i.attrs({
   className: 'ion ion-ios-arrow-back'
 }).withConfig({
   displayName: "Modalstyles__ModalBack",
   componentId: "sc-9hc271-7"
-})(["z-index:4;position:absolute;top:0;left:0;width:40px;height:40px;text-align:center;cursor:pointer;color:", ";background-color:transparent;transition:color 0.2s,opacity 0.2s,visibility 0.2s;", " &:before{transition:transform 0.2s;font-size:24px;line-height:24px !important;width:24px;height:24px;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px;}&:hover{color:", ";&:before{transform:translateX(-20%);}}", ""], _colors.default.black, function (props) {
-  return props.hide && "\n    opacity: 0;\n    visibility: hidden;\n  ";
-}, _colors.default.blue, _rwd.default.Medium(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 56px;\n    height: 56px;\n\n    &:before {\n      font-size: 27px;\n    }\n  "]))));
-exports.ModalBack = ModalBack;
-var ModalLinkWrap = _styledComponents.default.div.withConfig({
+})(["z-index:4;position:absolute;top:0;left:0;width:40px;height:40px;text-align:center;cursor:pointer;color:", ";background-color:transparent;transition:color 0.2s,opacity 0.2s,visibility 0.2s;", " &:before{transition:transform 0.2s;font-size:24px;line-height:24px !important;width:24px;height:24px;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px;}&:hover{color:", ";&:before{transform:translateX(-20%);}}", ""], _colors.default.black, props => props.hide && "\n    opacity: 0;\n    visibility: hidden;\n  ", _colors.default.blue, _rwd.default.Medium(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    width: 56px;\n    height: 56px;\n\n    &:before {\n      font-size: 27px;\n    }\n  "]))));
+const ModalLinkWrap = exports.ModalLinkWrap = _styledComponents.default.div.withConfig({
   displayName: "Modalstyles__ModalLinkWrap",
   componentId: "sc-9hc271-8"
 })(["position:relative;font-family:'Open Sans';font-weight:300;font-size:11px;line-height:14px;text-transform:uppercase;padding-left:18px;&:before{content:'\\f3d1';font-family:'Ionicons';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:12px;line-height:8px;display:block;width:8px;height:8px;position:absolute;top:50%;left:0;margin-top:-4px;color:", ";}"], _colors.default.lighterGreen);
-exports.ModalLinkWrap = ModalLinkWrap;
-var ModalLink = (0, _styledComponents.default)(_reactRouterDom.Link).withConfig({
+const ModalLink = exports.ModalLink = (0, _styledComponents.default)(_reactRouterDom.Link).withConfig({
   displayName: "Modalstyles__ModalLink",
   componentId: "sc-9hc271-9"
 })(["background:transparent;border:none;display:inline-block;position:relative;cursor:pointer;color:inherit;&:before{content:'';display:block;width:0%;height:1px;position:absolute;top:100%;left:0;background-color:", ";transition:width 0.2s;}&:hover{&:before{width:100%;}}"], _colors.default.lighterGreen);
-exports.ModalLink = ModalLink;
-var ModalWrapper = _styledComponents.default.div.withConfig({
+const ModalWrapper = exports.ModalWrapper = _styledComponents.default.div.withConfig({
   displayName: "Modalstyles__ModalWrapper",
   componentId: "sc-9hc271-10"
 })(["display:flex;flex-direction:column;height:100%;"]);
-exports.ModalWrapper = ModalWrapper;
-var ModalTitle = _styledComponents.default.div.withConfig({
+const ModalTitle = exports.ModalTitle = _styledComponents.default.div.withConfig({
   displayName: "Modalstyles__ModalTitle",
   componentId: "sc-9hc271-11"
 })(["font-family:'Open Sans';font-weight:800;font-size:22px;line-height:1.27em;letter-spacing:0.8px;text-transform:uppercase;"]);
-exports.ModalTitle = ModalTitle;
-var ModalScroll = _styledComponents.default.div.withConfig({
+const ModalScroll = exports.ModalScroll = _styledComponents.default.div.withConfig({
   displayName: "Modalstyles__ModalScroll",
   componentId: "sc-9hc271-12"
-})(["height:100%;overflow-y:auto;padding:0 12px;margin:0 -12px;", " &::-webkit-scrollbar{width:4px;}&::-webkit-scrollbar-track{background-color:", ";}&::-webkit-scrollbar-thumb{background-color:", ";}&::-webkit-scrollbar-thumb:window-inactive{background-color:", ";}"], _rwd.default.Large(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    padding: 0 32px;\n    margin: 0 -32px;\n  "]))), _colors.default.lightGrey, _colors.default.orangishRed, _colors.default.orangishRedDark);
-exports.ModalScroll = ModalScroll;
-var ModalSection = _styledComponents.default.div.withConfig({
+})(["height:100%;overflow-y:auto;padding:0 12px;margin:0 -12px;", " &::-webkit-scrollbar{width:4px;}&::-webkit-scrollbar-track{background-color:", ";}&::-webkit-scrollbar-thumb{background-color:", ";}&::-webkit-scrollbar-thumb:window-inactive{background-color:", ";}"], _rwd.default.Large(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    padding: 0 32px;\n    margin: 0 -32px;\n  "]))), _colors.default.lightGrey, _colors.default.orangishRed, _colors.default.orangishRedDark);
+const ModalSection = exports.ModalSection = _styledComponents.default.div.withConfig({
   displayName: "Modalstyles__ModalSection",
   componentId: "sc-9hc271-13"
-})(["& + &{padding-top:40px;", "}"], _rwd.default.Medium(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      padding-top: 53px;\n    "]))));
-exports.ModalSection = ModalSection;
+})(["& + &{padding-top:40px;", "}"], _rwd.default.Medium(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      padding-top: 53px;\n    "]))));