@stokr/components-library 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/components/2FA/Connect2FA.js

@@ -17,29 +17,48 @@ var _ComponentScroll = _interopRequireDefault(require("../ComponentScroll/Compon
 var _Modal = require("../Modal/Modal.styles");
 var _StyledText = _interopRequireDefault(require("../Text/StyledText"));
 var _reactQrCode = _interopRequireDefault(require("react-qr-code"));
+var _Grid = require("../Grid/Grid.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; }
 var Connect2FA = function Connect2FA(props) {
+  var _totpData$totpSecret;
   var changeStep = props.changeStep,
     totpData = props.totpData;
-  return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "connect 2 factor app")), /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-    noPaddingVertical: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "connect 2 factor app"), /*#__PURE__*/_react.default.createElement("p", null, "scan the qr code"))), totpData && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+  return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__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, "Connect two factor with stokr"), /*#__PURE__*/_react.default.createElement("p", null, "Scan the QR code on the right or enter secret key manually on your app to connect your account"))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+    modalBot: true
+  })), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 8
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingTop: true,
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    small: true
+  }, /*#__PURE__*/_react.default.createElement("p", null, "1. Start Google Authenticator or a similar app on your phone"), /*#__PURE__*/_react.default.createElement("p", null, "2. In the app, add a new account and scan the QR code below"), /*#__PURE__*/_react.default.createElement("p", null, "3. Click Continue when you are done"))), totpData && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     center: true
   }, /*#__PURE__*/_react.default.createElement(_reactQrCode.default, {
-    size: 256
+    size: 180
     //style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
     ,
     value: totpData === null || totpData === void 0 ? void 0 : totpData.totpUri,
     viewBox: "0 0 256 256"
-  })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+  }), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      fontSize: 11
+    }
+  }, (_totpData$totpSecret = totpData.totpSecret) === null || _totpData$totpSecret === void 0 ? void 0 : _totpData$totpSecret.secretKey)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     noPaddingTop: true,
-    center: true
+    center: true,
+    noPaddingHorizontal: true
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    minWidth: "300px",
-    onClick: changeStep
-  }, "Continue"))));
+    minWidth: "150px",
+    onClick: changeStep,
+    fluid: true
+  }, "Continue"))))));
 };
 var _default = Connect2FA;
 exports.default = _default;

package/dist/components/2FA/EnterCode.js

@@ -71,7 +71,8 @@ var EnterCode = function EnterCode(props) {
       onChange: function onChange(e) {
         setFieldValue('otpInput', e);
         setFieldTouched('otpInput');
-      }
+      },
+      label: "authentication code"
     }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
       show: errors.otpInput && touched.otpInput
     }, errors.otpInput))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {

package/dist/components/2FA/InstallAuthApp.js

@@ -16,28 +16,58 @@ var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/Comp
 var _ComponentScroll = _interopRequireDefault(require("../ComponentScroll/ComponentScroll"));
 var _Modal = require("../Modal/Modal.styles");
 var _StyledText = _interopRequireDefault(require("../Text/StyledText"));
+var _Grid = require("../Grid/Grid.styles");
+var _google_auth = _interopRequireDefault(require("../../static/images/google_auth.png"));
 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 InstallAuthApp = function InstallAuthApp(props) {
   var changeStep = props.changeStep;
-  return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "install 2 factor app")), /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-    noPaddingVertical: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "install 2 factor app"), /*#__PURE__*/_react.default.createElement("p", null, "We recommend using google authenticator"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-    noPaddingBottom: true
-  }, /*#__PURE__*/_react.default.createElement(_RegisterEthereum.EthInfo, {
-    center: true
-  }, "I use different app")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+  return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__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, "Install two factor app"), /*#__PURE__*/_react.default.createElement("p", null, ' ', "In order to set up two-factor authentication you need to install one of the authenticator apps on your phone."))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+    modalBot: true
+  })), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 8
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingTop: true,
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    small: true
+  }, /*#__PURE__*/_react.default.createElement("p", null, "Click below to download Google Authenticator app. If you already have Google Authenticator installed or use a different Authenticator App, click Continue.", ' '))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true,
     center: true
-  }), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    minWidth: "150px",
+    fluid: true,
+    onClick: function onClick() {
+      window.open('https://onelink.to/ev63j9', '_blank');
+    },
+    secondary: true
+  }, "Get the app", ' ', /*#__PURE__*/_react.default.createElement("img", {
+    src: _google_auth.default,
+    width: 20,
+    style: {
+      verticalAlign: 'middle',
+      marginLeft: '6px',
+      marginTop: '-3px'
+    }
+    //height={20}
+    ,
+    alt: "google auth logo"
+  }))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true,
     noPaddingTop: true,
     center: true
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    minWidth: "300px"
+    minWidth: "150px"
     //onClick={onRegisterClick}
     ,
-    onClick: changeStep
-  }, "Continue"))));
+    onClick: changeStep,
+    fluid: true
+  }, "Continue"))))));
 };
 var _default = InstallAuthApp;
 exports.default = _default;

package/dist/components/2FA/enable-2fa-flow.js

@@ -115,7 +115,6 @@ var Enable2FAFlow = function Enable2FAFlow(_ref) {
     stepController.changeStep(stepsNames[prevStepIndex], prevStepIndex);
   };
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
-    fullscreen: true,
     isOpen: showFlow,
     onClose: function onClose() {
       return setShowFlow(false);

package/dist/components/ComponentScroll/ComponentScroll.js

@@ -22,7 +22,8 @@ var ComponentScroll = function ComponentScroll(props) {
     barPadding = props.barPadding,
     topPadding = props.topPadding,
     className = props.className,
-    handleScroll = props.handleScroll;
+    handleScroll = props.handleScroll,
+    fullHeight = props.fullHeight;
   var scrollRef = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
     if (scrollRef.current) {
@@ -40,7 +41,8 @@ var ComponentScroll = function ComponentScroll(props) {
   return /*#__PURE__*/_react.default.createElement(_ComponentScroll.Container, {
     className: className,
     noMobileScroll: noMobileScroll,
-    isMobile: true
+    isMobile: true,
+    fullHeight: fullHeight
   }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.Outer, {
     offset: offset,
     barPadding: barPadding,

package/dist/components/ComponentScroll/ComponentScroll.styles.js

@@ -8,7 +8,7 @@ exports.TrackV = exports.TrackH = exports.ThumbV = exports.ThumbH = exports.Oute
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _rwd = _interopRequireDefault(require("../../styles/rwd"));
 var _theme = _interopRequireDefault(require("../../styles/theme"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 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; }
@@ -16,11 +16,13 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var Container = _styledComponents.default.div.withConfig({
   displayName: "ComponentScrollstyles__Container",
   componentId: "sc-12avd6v-0"
-})(["position:relative;height:364px;width:100%;display:flex;@media screen and (max-width:767px){height:", ";}", ""], function (_ref) {
+})(["position:relative;height:364px;width:100%;display:flex;@media screen and (max-width:767px){height:", ";}", " ", ""], function (_ref) {
   var isMobile = _ref.isMobile;
   return isMobile ? '100%' : '364px';
 }, function (props) {
-  return props.noMobileScroll && (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      & > div > div {\n        overflow: visible !important;\n\n        > div:first-child {\n          overflow: visible !important;\n        }\n      }\n\n      ", "\n    "])), _rwd.default.Medium(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      & > div > div {\n        overflow: hidden !important;\n\n        > div:first-child {\n          overflow: scroll !important;  \n        }\n      }\n    "]))));
+  return props.fullHeight && (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      height: 100%;\n    "])));
+}, function (props) {
+  return props.noMobileScroll && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      & > div > div {\n        overflow: visible !important;\n\n        > div:first-child {\n          overflow: visible !important;\n        }\n      }\n\n      ", "\n    "])), _rwd.default.Medium(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      & > div > div {\n        overflow: hidden !important;\n\n        > div:first-child {\n          overflow: scroll !important;  \n        }\n      }\n    "]))));
 });
 exports.Container = Container;
 var TrackH = _styledComponents.default.div.withConfig({
@@ -28,7 +30,7 @@ var TrackH = _styledComponents.default.div.withConfig({
   componentId: "sc-12avd6v-1"
 })(["background-color:", ";left:16px;right:16px;bottom:14px;height:4px;border-radius:4px;", ""], function (props) {
   return _theme.default.cGrey;
-}, _rwd.default.Large(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    left: 32px;\n    right: 32px;\n    bottom: 30px;\n  "]))));
+}, _rwd.default.Large(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    left: 32px;\n    right: 32px;\n    bottom: 30px;\n  "]))));
 exports.TrackH = TrackH;
 var ThumbH = _styledComponents.default.div.withConfig({
   displayName: "ComponentScrollstyles__ThumbH",
@@ -42,7 +44,7 @@ var TrackV = _styledComponents.default.div.withConfig({
   componentId: "sc-12avd6v-3"
 })(["background-color:", ";top:16px;bottom:16px;right:14px;width:4px;border-radius:4px;", ""], function (props) {
   return _theme.default.cGrey;
-}, _rwd.default.Large(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    top: 32px;\n    bottom: 32px;\n    right: 30px;\n  "]))));
+}, _rwd.default.Large(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    top: 32px;\n    bottom: 32px;\n    right: 30px;\n  "]))));
 exports.TrackV = TrackV;
 var ThumbV = _styledComponents.default.div.withConfig({
   displayName: "ComponentScrollstyles__ThumbV",

package/dist/components/ComponentWrapper/ComponentWrapper.styles.js

@@ -8,7 +8,7 @@ exports.default = exports.ComponentWrapper = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _rwd = _interopRequireDefault(require("../../styles/rwd"));
 var _theme = _interopRequireDefault(require("../../styles/theme"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
 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; }
@@ -16,7 +16,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var ComponentWrapper = _styledComponents.default.div.withConfig({
   displayName: "ComponentWrapperstyles__ComponentWrapper",
   componentId: "sc-1w1v084-0"
-})(["position:relative;padding:32px;text-align:left !important;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " h4{width:50%;@media screen and (max-width:767px){width:100%;}}@media screen and (max-width:767px){padding:32px;", "}", " ", " ", ""], _rwd.default.Large(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 32px 64px;\n  "]))), function (props) {
+})(["position:relative;padding:32px;text-align:left !important;", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " @media screen and (max-width:767px){padding:32px;", "}", " ", " ", ""], _rwd.default.Large(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 32px 64px;\n  "]))), function (props) {
   return props.borderLeft && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      border-left: 1px solid ", ";\n    "])), _theme.default.cLightGrey);
 }, function (props) {
   return props.borderRight && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-right: 1px solid ", ";\n    "])), _theme.default.cLightGrey);
@@ -53,15 +53,17 @@ var ComponentWrapper = _styledComponents.default.div.withConfig({
 }, function (props) {
   return props.fluid && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n      width: 100%;\n    "])));
 }, function (props) {
-  return props.fluidcenter && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n          width: 100% !important;\n          text-align: center !important;\n        "])));
+  return props.fluidcenter && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n      width: 100% !important;\n      text-align: center !important;\n    "])));
 }, function (props) {
-  return props.investmentNotifications && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n        padding: 0;\n      "])));
+  return props.titleHalf && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n      h4 {\n        width: 50%;\n\n        @media screen and (max-width: 767px) {\n          width: 100%;\n        }\n      }\n    "])));
 }, function (props) {
-  return props.alignVertically && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n    "])));
+  return props.investmentNotifications && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n        padding: 0;\n      "])));
 }, function (props) {
-  return props.marginTop && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n      margin-top: ", ";\n    "])), props.marginTop);
+  return props.alignVertically && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n    "])));
 }, function (props) {
-  return props.isAddMember && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n        @media screen and (min-width: 768px) {\n          padding-left: 10px !important;\n          padding-right: 10px !important;\n        }\n      "])));
+  return props.marginTop && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n      margin-top: ", ";\n    "])), props.marginTop);
+}, function (props) {
+  return props.isAddMember && (0, _styledComponents.css)(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["\n      @media screen and (min-width: 768px) {\n        padding-left: 10px !important;\n        padding-right: 10px !important;\n      }\n    "])));
 });
 exports.ComponentWrapper = ComponentWrapper;
 var _default = ComponentWrapper;

package/dist/components/Input/OtpInput.js

@@ -1,30 +1,45 @@
 "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.default = exports.OtpInput = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactOtpInput = _interopRequireDefault(require("react-otp-input"));
 var _styledComponents = require("styled-components");
+var _Input = require("./Input.styles");
+var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _templateObject;
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var inputStyle = {
   outline: 'none',
   border: 'none',
-  borderBottom: '2px solid #000',
+  borderBottom: "1px solid ".concat(_theme.default.cBlack),
   padding: '10px',
+  paddingBottom: '2px',
   minWidth: 30,
   fontSize: 16,
-  fontWeight: 'bold'
+  // fontWeight: 'bold',
+  marginTop: 4
 };
 var Separator = _styledComponents.styled.span.withConfig({
   displayName: "OtpInput__Separator",
   componentId: "sc-1n9hk3k-0"
-})(["padding:10px;"]);
+})(["padding:5px;", ""], _rwd.default.Mobile(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 10px;\n  "]))));
 var OtpInput = function OtpInput(props) {
   var value = props.value,
-    onChange = props.onChange,
     _props$numInputs = props.numInputs,
     numInputs = _props$numInputs === void 0 ? 4 : _props$numInputs,
     _props$RenderSeparato = props.RenderSeparator,
@@ -32,8 +47,39 @@ var OtpInput = function OtpInput(props) {
     _props$inputType = props.inputType,
     inputType = _props$inputType === void 0 ? 'text' : _props$inputType,
     _props$shouldAutoFocu = props.shouldAutoFocus,
-    shouldAutoFocus = _props$shouldAutoFocu === void 0 ? true : _props$shouldAutoFocu;
-  return /*#__PURE__*/_react.default.createElement(_reactOtpInput.default, _extends({
+    shouldAutoFocus = _props$shouldAutoFocu === void 0 ? true : _props$shouldAutoFocu,
+    label = props.label;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    labelUp = _useState2[0],
+    setLabelUp = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hasFocus = _useState4[0],
+    setHasFocus = _useState4[1];
+  (0, _react.useEffect)(function () {
+    checkLabel(false);
+  }, []);
+  (0, _react.useEffect)(function () {
+    checkLabel(false);
+  }, [hasFocus, value]);
+  (0, _react.useEffect)(function () {
+    if (value && !labelUp) setLabelUp(true);
+  }, [value, labelUp]);
+  var onChange = function onChange(e, field) {
+    var onChange = props.onChange;
+    onChange && onChange(e, field);
+  };
+  var checkLabel = function checkLabel(focus) {
+    setHasFocus(focus);
+    setLabelUp(focus || !!value);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Input.Wrapper, null, label && /*#__PURE__*/_react.default.createElement(_Input.Label, {
+    isUp: true,
+    style: {
+      lineHeight: 'inherit'
+    }
+  }, label), /*#__PURE__*/_react.default.createElement(_Input.InputWrap, null, /*#__PURE__*/_react.default.createElement(_reactOtpInput.default, _extends({
     value: value,
     onChange: onChange,
     numInputs: numInputs,
@@ -46,7 +92,7 @@ var OtpInput = function OtpInput(props) {
     renderInput: function renderInput(props) {
       return /*#__PURE__*/_react.default.createElement("input", props);
     }
-  }, props));
+  }, props))));
 };
 exports.OtpInput = OtpInput;
 var _default = OtpInput;

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

@@ -32,7 +32,7 @@ exports.Dimmer = Dimmer;
 var 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);", " ", " ", " ", " ", ""], _colors.default.white, function (props) {
+})(["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);", " ", " ", " ", " @media screen and (max-width:767px){min-height:100vh;}@media screen and (max-width:490px){min-height:100vh;}", ""], _colors.default.white, 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  ";
@@ -70,7 +70,10 @@ exports.ModalInnerWithBorder = ModalInnerWithBorder;
 var ModalInner = _styledComponents.default.div.withConfig({
   displayName: "Modalstyles__ModalInner",
   componentId: "sc-9hc271-5"
-})(["width:100%;height:100%;padding:40px ", ";display:flex;flex-direction:column;", " ", " ", " ", " ", " ", " ", " ", " ", ""], (0, _grid.default)(1), function (props) {
+})(["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;
+  return isMobile && '100vh';
+}, function (props) {
   return props.center && "\n    text-align: center;\n  ";
 }, function (props) {
   return props.background && "\n    background-color: ".concat(_colors.default.grey, ";\n  ");

package/dist/components/RegisterModal/RegisterModal.js

@@ -133,7 +133,6 @@ var RegisterModal = function RegisterModal(props) {
   }();
   var validationSchema = Yup.object().shape({
     email: Yup.string().email("Oops, that's not a valid address").required('Oops, this can‘t be blank'),
-    username: Yup.string(),
     password: Yup.string().required('Oops, this can‘t be blank'),
     terms: Yup.bool().oneOf([true], 'Please agree to continue'),
     newsletter: Yup.bool() // .oneOf([true], 'Newsletter accept is required'),
@@ -168,7 +167,6 @@ var RegisterModal = function RegisterModal(props) {
   }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
     initialValues: {
       email: '',
-      username: '',
       password: '',
       newsletter: false,
       terms: false
@@ -186,7 +184,7 @@ var RegisterModal = function RegisterModal(props) {
       setFieldValue = _ref2.setFieldValue,
       setFieldTouched = _ref2.setFieldTouched;
     if (popupError.popup === 'register' && !popupErrorWithValue.value) {
-      var value = popupError.field === 'username' ? values.username : popupError.field === 'email' ? values.email : values.password;
+      var value = popupError.field === 'email' ? values.email : values.password;
       setpopupErrorWithValue(_objectSpread(_objectSpread({}, popupErrorWithValue), {}, {
         value: value
       }));
@@ -234,25 +232,6 @@ var RegisterModal = function RegisterModal(props) {
     }, errors.email))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
       noPaddingBottom: true,
       noPaddingHorizontal: true
-      // paddingTop="47"
-    }, /*#__PURE__*/_react.default.createElement(_formikPersist.Persist, {
-      name: "signup-username",
-      isSessionStorage: true
-    }), /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_InputUsername.default, {
-      id: "sign-up-username",
-      name: "username",
-      type: "text",
-      label: "Your username",
-      value: values.username,
-      onChange: handleChangeCustom,
-      onBlur: handleBlur,
-      error: !!errors.username,
-      touched: !!touched.username
-    }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
-      show: errors.username && touched.username
-    }, errors.username))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
-      noPaddingBottom: true,
-      noPaddingHorizontal: true
     }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
       id: "sign-up-password",
       name: "password",

package/dist/components/TermsModal/TermsModal.js

@@ -14,7 +14,7 @@ var _Grid = require("../Grid/Grid.styles");
 var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
 var _styles = require("./_styles");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _theme = _interopRequireDefault(require("styles/theme"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
 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 }; }
@@ -35,7 +35,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 var StyledPrivacyText = _styledComponents.default.div.withConfig({
   displayName: "TermsModal__StyledPrivacyText",
   componentId: "sc-1x5p4y6-0"
-})(["width:100%;p{color:", ";font-size:16px;line-height:1.5;font-weight:300;margin:0;padding-bottom:10px;font-style:normal;font-stretch:normal;letter-spacing:0.6px;}a{text-decoration:none;color:", ";font-weight:300;}}h4{font-size:17.2px;font-weight:700;line-height:1.28571em;letter-spacing:normal;position:relative;margin-top:29px;margin-bottom:16px;}table{border-collapse:collapse;margin:32px 0;font-size:16px;tr{td:first-child{width:", ";text-align:center;}td:last-child{width:", ";}}td,th{border:1px solid #2e2e2e;padding:10px;li{margin-bottom:0;}}}ul{list-style-type:disclosure-closed;list-style:none;margin:0;padding:0;}li{padding:0 0 0 2rem;color:", ";font-size:0.75rem;letter-spacing:normal;line-height:1.31rem;font-weight:200;margin-bottom:1rem;position:relative;font-size:16px !important;font-weight:300;font-style:normal;font-stretch:normal;line-height:1.5 !important;letter-spacing:0.6px;a{word-break:break-all !important;}&:before{content:'';position:absolute;width:10px;height:10px;background:#0050ca;border-radius:100px;left:0;top:0px;margin-top:0.4rem;@media screen and (min-width:1440px){top:-1px;}}}"], _theme.default.cBlack, _theme.default.cBlack, function (props) {
+})(["&&{width:100%;p{color:", ";font-size:16px;line-height:1.5;font-weight:300;margin:0;padding-bottom:10px;font-style:normal;font-stretch:normal;letter-spacing:0.6px;}a{text-decoration:none;color:", ";font-weight:300;word-break:break-all !important;}h4{font-size:17.2px !important;font-weight:700 !important;line-height:1.28571em;letter-spacing:normal;position:relative;margin-top:29px;margin-bottom:16px;}table{border-collapse:collapse;margin:32px 0;font-size:16px;tr{td:first-child{width:", ";text-align:center;}td:last-child{width:", ";}}td,th{border:1px solid #2e2e2e;padding:10px;li{margin-bottom:0;}}}ul{list-style-type:disclosure-closed;list-style:none;margin:0;padding:0;}li{padding:0 0 0 32px;color:", ";font-size:0.75rem;letter-spacing:normal;line-height:1.31rem;font-weight:200;margin-bottom:16px;position:relative;font-size:16px !important;font-weight:300;font-style:normal;font-stretch:normal;line-height:1.5 !important;letter-spacing:0.6px;a{word-break:break-all !important;}&:before{content:'';position:absolute;width:10px;height:10px;background:#0050ca;border-radius:100px;left:0;top:3px;margin-top:0.4rem;}}}"], _theme.default.cBlack, _theme.default.cBlack, function (props) {
   return props.thirdParties ? '30%' : '40%';
 }, function (props) {
   return props.thirdParties ? '70%' : '60%';

package/dist/components/VerifyEmailModal/VerifyEmailModal.js

@@ -0,0 +1,84 @@
+"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.default = exports.VerifyEmailModal = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var sc = _interopRequireWildcard(require("../../constants/style"));
+var _Modal = require("../Modal/Modal");
+var _Text = _interopRequireDefault(require("../Text/Text.styles"));
+var _TextLink = _interopRequireDefault(require("../TextLink/TextLink.styles"));
+var _Grid = require("../Grid/Grid.styles");
+var _RegisterConfirmModal = require("../RegisterConfirmModal/RegisterConfirmModal.styles");
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _Form = require("../Form/Form.styles");
+var _Button = _interopRequireDefault(require("../Button/Button.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 RedBar = _styledComponents.default.div.withConfig({
+  displayName: "VerifyEmailModal__RedBar",
+  componentId: "sc-13smx1f-0"
+})(["background:", ";bottom:0;height:30%;position:absolute;right:0;width:50%;"], sc.RED_BASE_HEX);
+var VerifyEmailModal = function VerifyEmailModal(_ref) {
+  var id = _ref.id,
+    isModalOpen = _ref.isModalOpen,
+    onModalClose = _ref.onModalClose,
+    onResend = _ref.onResend,
+    popupError = _ref.popupError,
+    popupSuccess = _ref.popupSuccess,
+    isActionLoading = _ref.isActionLoading,
+    continueUrl = _ref.continueUrl,
+    isSuccess = _ref.isSuccess,
+    error = _ref.error;
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    isOpen: isModalOpen,
+    onClose: onModalClose,
+    closeIsFullHeight: true,
+    id: id
+  }, /*#__PURE__*/_react.default.createElement(_Grid.Row, {
+    isConfirmModal: true
+  }, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    relative: true,
+    part: 10,
+    isConfirmModal: true
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
+    isConfirmModal: true
+  }, /*#__PURE__*/_react.default.createElement(_RegisterConfirmModal.ContainerWithLine, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    withBorder: true,
+    isConfirm: true
+  }, /*#__PURE__*/_react.default.createElement("h3", null, isSuccess ? "GREAT! You're verified" : error ? "Oops. Something went wrong" : ''), /*#__PURE__*/_react.default.createElement("p", null, ' ', isSuccess ? "You can now complete your sign up proccess by clicking the\n                button below.\n                " : error ? error === null || error === void 0 ? void 0 : error.message : '')), continueUrl && isSuccess && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: function onClick() {
+      window.open(continueUrl);
+    }
+  }, "Continue")), error && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_TextLink.default, {
+    to: "",
+    onClick: onResend
+  }, isActionLoading === 'resend' ? 'Resending email' : 'Resend activation email'))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingVertical: true,
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
+    show: popupError.popup === 'resend'
+  }, popupError.message)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingVertical: true,
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
+    isSuccess: true,
+    show: popupSuccess.popup === 'resend'
+  }, popupSuccess.message)))))), /*#__PURE__*/_react.default.createElement(RedBar, null));
+};
+exports.VerifyEmailModal = VerifyEmailModal;
+VerifyEmailModal.propTypes = {
+  isModalOpen: _propTypes.default.bool.isRequired,
+  onModalClose: _propTypes.default.func.isRequired
+};
+var _default = VerifyEmailModal;
+exports.default = _default;

package/dist/components/VerifyEmailModal/VerifyEmailModal.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.VerifyEmailModalDefault = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _VerifyEmailModal = require("./VerifyEmailModal");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _reactRouterDom = require("react-router-dom");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components Library/Verify Email Modal',
+  component: _VerifyEmailModal.VerifyEmailModal,
+  argTypes: {
+    isModalOpen: {
+      type: 'boolean',
+      defaultValue: true,
+      required: true
+    },
+    onModalClose: {
+      type: 'function',
+      action: 'onModalClose',
+      required: true
+    },
+    popupError: {
+      type: 'object',
+      defaultValue: {}
+    },
+    isSuccess: {
+      type: 'boolean',
+      defaultValue: true,
+      required: true
+    }
+  }
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_VerifyEmailModal.VerifyEmailModal, args))));
+};
+var VerifyEmailModalDefault = Template.bind({});
+exports.VerifyEmailModalDefault = VerifyEmailModalDefault;
+VerifyEmailModalDefault.args = {
+  popupError: {},
+  popupSuccess: {}
+};