@stokr/components-library 2.0.0-beta.2 → 2.0.0-beta.20

package/dist/components/CryptoAddress/CryptoAddress.js

@@ -43,7 +43,8 @@ var CryptoAddress = function CryptoAddress(_ref) {
     titleColor = _ref.titleColor,
     dataBoxStyle = _ref.dataBoxStyle,
     headStyle = _ref.headStyle,
-    infoBoxStyle = _ref.infoBoxStyle;
+    infoBoxStyle = _ref.infoBoxStyle,
+    wrapperStyle = _ref.wrapperStyle;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     copiedAddressToClipboard = _useState2[0],
@@ -56,7 +57,8 @@ var CryptoAddress = function CryptoAddress(_ref) {
     borderTop: borderTop,
     borderBottom: !noBorderBottom && borderBottom
   }, /*#__PURE__*/_react.default.createElement(_CryptoAddress.DataWrapper, {
-    withOptions: !!sideOptions
+    withOptions: !!sideOptions,
+    style: wrapperStyle
   }, radio && !radio.hide && /*#__PURE__*/_react.default.createElement(_CryptoAddress.CheckMark, null), /*#__PURE__*/_react.default.createElement(_CryptoAddress.Head, {
     noBody: noBody,
     noHead: noHead,
@@ -148,7 +150,8 @@ CryptoAddress.propTypes = {
   noHead: _propTypes.default.bool,
   dataBoxStyle: _propTypes.default.object,
   headStyle: _propTypes.default.object,
-  infoBoxStyle: _propTypes.default.object
+  infoBoxStyle: _propTypes.default.object,
+  wrapperStyle: _propTypes.default.object
 };
 //address not required in IIS, instead wrapping {address &&( .. now doing both which is redundant
 

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

@@ -40,4 +40,7 @@ var Template = function Template(args) {
 };
 var ForgotPasswordModalOverview = Template.bind({});
 exports.ForgotPasswordModalOverview = ForgotPasswordModalOverview;
-ForgotPasswordModalOverview.args = {};
+ForgotPasswordModalOverview.args = {
+  popupError: {},
+  popupSuccess: {}
+};

package/dist/components/Header/Header.styles.js

@@ -151,7 +151,7 @@ exports.UserAccount = UserAccount;
 var UserButton = _styledComponents.default.button.withConfig({
   displayName: "Headerstyles__UserButton",
   componentId: "sc-hifrdy-16"
-})(["display:inline-block;vertical-align:middle;width:48px;height:48px;border-radius:24px;overflow:hidden;background-color:", ";opacity:1;transition:opacity 0.2s;outline:none;cursor:pointer;box-shadow:none;border:none;background-color:buttonface;padding:0;"], _colors.default.grey2);
+})(["display:inline-block;vertical-align:middle;width:48px;height:48px;border-radius:24px;overflow:hidden;background-color:", ";opacity:1;transition:opacity 0.2s;outline:none;cursor:pointer;box-shadow:none;border:none;background-color:buttonface;background-color:transparent;padding:0;"], _colors.default.grey2);
 exports.UserButton = UserButton;
 var UserAvatar = _styledComponents.default.img.withConfig({
   displayName: "Headerstyles__UserAvatar",

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/MainMenu/MainMenu.js

@@ -83,12 +83,12 @@ var MainMenu = /*#__PURE__*/function (_PureComponent) {
   _createClass(MainMenu, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      window.addEventListener('scroll', this.onScroll, true);
+      // window.addEventListener('scroll', this.onScroll, true)
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      window.removeEventListener('scroll', this.onScroll, true);
+      // window.removeEventListener('scroll', this.onScroll, true)
     }
   }, {
     key: "render",

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/RegisterConfirmModal/RegisterConfirmModal.js

@@ -31,7 +31,8 @@ var RegisterConfirmModal = function RegisterConfirmModal(_ref) {
     onResend = _ref.onResend,
     popupError = _ref.popupError,
     popupSuccess = _ref.popupSuccess,
-    isActionLoading = _ref.isActionLoading;
+    isActionLoading = _ref.isActionLoading,
+    cooldown = _ref.cooldown;
   var userEmail = userInfo && userInfo.email;
   return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     isOpen: isModalOpen,
@@ -51,7 +52,8 @@ var RegisterConfirmModal = function RegisterConfirmModal(_ref) {
     isConfirm: true
   }, /*#__PURE__*/_react.default.createElement("h3", null, "GREAT! CHECK YOUR INBOX"), /*#__PURE__*/_react.default.createElement("p", null, "We sent an email to ", userEmail, " \u2014 tap the link to verify your address and activate your account.")), /*#__PURE__*/_react.default.createElement(_Text.default.Caption, null, "Email didn't arrive?", /*#__PURE__*/_react.default.createElement("br", null)), /*#__PURE__*/_react.default.createElement(_TextLink.default, {
     to: "",
-    onClick: onResend
+    onClick: onResend,
+    disabled: cooldown === null || cooldown === void 0 ? void 0 : cooldown.isDisabled
   }, isActionLoading === 'resend' ? 'Resending email' : 'Resend email'), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     noPaddingVertical: true,
     noPaddingHorizontal: true
@@ -63,7 +65,12 @@ var RegisterConfirmModal = function RegisterConfirmModal(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
     isSuccess: true,
     show: popupSuccess.popup === 'resend'
-  }, popupSuccess.message)))))), /*#__PURE__*/_react.default.createElement(RedBar, null));
+  }, popupSuccess.message)), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingBottom: true,
+    noPaddingHorizontal: true
+  }, (cooldown === null || cooldown === void 0 ? void 0 : cooldown.isDisabled) && /*#__PURE__*/_react.default.createElement(_Form.FormError, {
+    show: cooldown === null || cooldown === void 0 ? void 0 : cooldown.isDisabled
+  }, "You can resend email in ".concat(cooldown === null || cooldown === void 0 ? void 0 : cooldown.secondsRemaining, " seconds"))))))), /*#__PURE__*/_react.default.createElement(RedBar, null));
 };
 exports.RegisterConfirmModal = RegisterConfirmModal;
 RegisterConfirmModal.propTypes = {

package/dist/components/RegisterConfirmModal/RegisterConfirmModal.stories.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _RegisterConfirmModal = require("./RegisterConfirmModal");
 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/Register Confirm Modal',
@@ -31,11 +32,14 @@ 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(_RegisterConfirmModal.RegisterConfirmModal, 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(_RegisterConfirmModal.RegisterConfirmModal, args))));
 };
 var RegisterConfirmModalDefault = Template.bind({});
 exports.RegisterConfirmModalDefault = RegisterConfirmModalDefault;
 RegisterConfirmModalDefault.args = {
   popupError: {},
-  popupSuccess: {}
+  popupSuccess: {},
+  onResend: function onResend() {
+    console.log('clicked');
+  }
 };

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/Switch/Switch.js

@@ -23,7 +23,10 @@ var Switch = function Switch(props) {
     handleChange = props.handleChange,
     mobile = props.mobile,
     dark = props.dark,
-    revertToPrevious = props.revertToPrevious;
+    revertToPrevious = props.revertToPrevious,
+    value1Color = props.value1Color,
+    value2Color = props.value2Color,
+    hideValues = props.hideValues;
   var _useState = (0, _react.useState)(),
     _useState2 = _slicedToArray(_useState, 2),
     value = _useState2[0],
@@ -44,7 +47,7 @@ var Switch = function Switch(props) {
   };
   return /*#__PURE__*/_react.default.createElement(_Switch.Container, {
     mobile: mobile
-  }, /*#__PURE__*/_react.default.createElement(_Switch.Value, {
+  }, !hideValues && /*#__PURE__*/_react.default.createElement(_Switch.Value, {
     active: value === value1,
     onClick: function onClick() {
       return setValue(value1);
@@ -54,8 +57,10 @@ var Switch = function Switch(props) {
     value1: value === value1,
     value2: value === value2,
     onClick: onIndicatorClick,
-    dark: dark
-  }), /*#__PURE__*/_react.default.createElement(_Switch.Value, {
+    dark: dark,
+    value1Color: value1Color,
+    value2Color: value2Color
+  }), !hideValues && /*#__PURE__*/_react.default.createElement(_Switch.Value, {
     active: value === value2,
     onClick: function onClick() {
       return setValue(value2);
@@ -70,11 +75,13 @@ Switch.propTypes = {
   value2: _propTypes.default.string.isRequired,
   handleChange: _propTypes.default.func.isRequired,
   mobile: _propTypes.default.bool,
-  dark: _propTypes.default.bool
+  dark: _propTypes.default.bool,
+  hideValues: _propTypes.default.bool
 };
 Switch.defaultProps = {
   mobile: false,
-  dark: false
+  dark: false,
+  hideValues: false
 };
 var _default = Switch;
 exports.default = _default;

package/dist/components/Switch/Switch.styles.js

@@ -31,7 +31,7 @@ exports.Value = Value;
 var Indicator = _styledComponents.default.button.withConfig({
   displayName: "Switchstyles__Indicator",
   componentId: "sc-1tkcx5j-2"
-})(["display:inline-block;vertical-align:middle;width:", "px;height:16px;border-radius:8px;background-color:", ";margin:0 16px;position:relative;outline:0;cursor:pointer;&:before{content:'';display:block;width:18px;height:18px;position:absolute;top:50%;left:50%;margin-top:-9px;margin-left:-9px;border-radius:9px;background-color:", ";transform:translateX(0);transition:transform .2s,background-color .2s;}&:hover{&:before{background-color:", ";}}", " ", " ", ""], switchWidth, function (props) {
+})(["display:inline-block;vertical-align:middle;width:", "px;height:16px;border-radius:8px;background-color:", ";margin:0 16px;position:relative;outline:0;cursor:pointer;&:before{content:'';display:block;width:18px;height:18px;position:absolute;top:50%;left:50%;margin-top:-9px;margin-left:-9px;border-radius:9px;background-color:", ";transform:translateX(0);transition:transform 0.2s,background-color 0.2s;}&:hover{&:before{background-color:", ";}}", " ", " ", ""], switchWidth, function (props) {
   return _theme.default.cGrey;
 }, function (props) {
   return _theme.default.cBlack;
@@ -40,8 +40,8 @@ var Indicator = _styledComponents.default.button.withConfig({
 }, function (props) {
   return props.dark && "\n    background-color: ".concat(_theme.default.cGrey2, ";\n\n    &:before {\n      background-color: ").concat(_theme.default.cPrimary, ";\n    }\n\n    &:hover {\n      &:before {\n        background-color: ").concat(_theme.default.cBlack, ";\n      }\n    }\n  ");
 }, function (props) {
-  return props.value1 && "\n    &:before {\n      transform: translateX(-".concat(switchWidth / 2 - 8, "px);\n    }\n  ");
+  return props.value1 && "\n    &:before {\n      transform: translateX(-".concat(switchWidth / 2 - 8, "px);\n    }\n    ").concat(props.value1Color && "\n       background-color: ".concat(props.value1Color, ";\n    "), "\n  ");
 }, function (props) {
-  return props.value2 && "\n    &:before {\n      transform: translateX(".concat(switchWidth / 2 - 8, "px);\n    }\n  ");
+  return props.value2 && "\n    &:before {\n      transform: translateX(".concat(switchWidth / 2 - 8, "px);\n    }\n    ").concat(props.value2Color && "\n       background-color: ".concat(props.value2Color, ";\n    "), "\n  ");
 });
 exports.Indicator = Indicator;

package/dist/components/TermsModal/TermsModal.js

@@ -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/TextLink/TextLink.styles.js

@@ -8,13 +8,15 @@ exports.default = exports.TextLink = exports.TextButton = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _reactRouterDom = require("react-router-dom");
 var _theme = _interopRequireDefault(require("../../styles/theme"));
-var _templateObject;
+var _templateObject, _templateObject2;
 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 styles = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: #fff;\n  border: none;\n  cursor: pointer;\n  position: relative;\n  font-family: 'Open Sans';\n  font-weight: bold;\n  font-size: 11px;\n  line-height: 14px;\n  text-transform: uppercase;\n  display: inline-block;\n  padding-left: 18px;\n  padding-right: 6px;\n  transition: padding 0.2s;\n\n  &:before {\n    content: '\\f3d1';\n    font-family: 'Ionicons';\n    speak: none;\n    font-style: normal;\n    font-weight: normal;\n    font-variant: normal;\n    text-transform: none;\n    text-rendering: auto;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-size: 12px;\n    line-height: 8px;\n    display: block;\n    width: 8px;\n    height: 8px;\n    position: absolute;\n    top: 50%;\n    left: 0;\n    margin-top: -4px;\n    color: ", ";\n  }\n\n  &:hover {\n    padding-left: 24px;\n    padding-right: 0;\n  }\n"], ["\n  background: #fff;\n  border: none;\n  cursor: pointer;\n  position: relative;\n  font-family: 'Open Sans';\n  font-weight: bold;\n  font-size: 11px;\n  line-height: 14px;\n  text-transform: uppercase;\n  display: inline-block;\n  padding-left: 18px;\n  padding-right: 6px;\n  transition: padding 0.2s;\n\n  &:before {\n    content: '\\\\f3d1';\n    font-family: 'Ionicons';\n    speak: none;\n    font-style: normal;\n    font-weight: normal;\n    font-variant: normal;\n    text-transform: none;\n    text-rendering: auto;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-size: 12px;\n    line-height: 8px;\n    display: block;\n    width: 8px;\n    height: 8px;\n    position: absolute;\n    top: 50%;\n    left: 0;\n    margin-top: -4px;\n    color: ", ";\n  }\n\n  &:hover {\n    padding-left: 24px;\n    padding-right: 0;\n  }\n"])), function (props) {
+var styles = (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: #fff;\n  border: none;\n  cursor: pointer;\n  position: relative;\n  font-family: 'Open Sans';\n  font-weight: bold;\n  font-size: 11px;\n  line-height: 14px;\n  text-transform: uppercase;\n  display: inline-block;\n  padding-left: 18px;\n  padding-right: 6px;\n  transition: padding 0.2s;\n\n  &:before {\n    content: '\\f3d1';\n    font-family: 'Ionicons';\n    speak: none;\n    font-style: normal;\n    font-weight: normal;\n    font-variant: normal;\n    text-transform: none;\n    text-rendering: auto;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-size: 12px;\n    line-height: 8px;\n    display: block;\n    width: 8px;\n    height: 8px;\n    position: absolute;\n    top: 50%;\n    left: 0;\n    margin-top: -4px;\n    color: ", ";\n  }\n\n  &:hover {\n    padding-left: 24px;\n    padding-right: 0;\n  }\n\n  ", "\n"], ["\n  background: #fff;\n  border: none;\n  cursor: pointer;\n  position: relative;\n  font-family: 'Open Sans';\n  font-weight: bold;\n  font-size: 11px;\n  line-height: 14px;\n  text-transform: uppercase;\n  display: inline-block;\n  padding-left: 18px;\n  padding-right: 6px;\n  transition: padding 0.2s;\n\n  &:before {\n    content: '\\\\f3d1';\n    font-family: 'Ionicons';\n    speak: none;\n    font-style: normal;\n    font-weight: normal;\n    font-variant: normal;\n    text-transform: none;\n    text-rendering: auto;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-size: 12px;\n    line-height: 8px;\n    display: block;\n    width: 8px;\n    height: 8px;\n    position: absolute;\n    top: 50%;\n    left: 0;\n    margin-top: -4px;\n    color: ", ";\n  }\n\n  &:hover {\n    padding-left: 24px;\n    padding-right: 0;\n  }\n\n  ", "\n"])), function (props) {
   return _theme.default.cWarning;
+}, function (props) {
+  return props.disabled && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      opacity: 0.5;\n      pointer-events: none;\n    "])));
 });
 var TextLink = (0, _styledComponents.default)(_reactRouterDom.Link).withConfig({
   displayName: "TextLinkstyles__TextLink",

package/dist/components/VerifyEmailModal/VerifyEmailModal.js

@@ -0,0 +1,163 @@
+"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 _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"));
+var _formik = require("formik");
+var Yup = _interopRequireWildcard(require("yup"));
+var _Form2 = _interopRequireDefault(require("../Form/Form"));
+var _Input = _interopRequireDefault(require("../Input/Input"));
+var _customHooks = require("../../utils/customHooks");
+var _excluded = ["id", "isModalOpen", "onModalClose", "continueUrl", "isSuccess"];
+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 }; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var 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,
+    continueUrl = _ref.continueUrl,
+    isSuccess = _ref.isSuccess,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    isOpen: isModalOpen,
+    onClose: onModalClose
+    //closeIsFullHeight
+    ,
+    id: id
+  }, isSuccess ? renderSuccessModal(continueUrl) : RenderErrorModal(props));
+};
+exports.VerifyEmailModal = VerifyEmailModal;
+var renderSuccessModal = function renderSuccessModal(continueUrl) {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    relative: true,
+    part: 10
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_RegisterConfirmModal.ContainerWithLine, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+    withBorder: true,
+    isConfirm: true
+  }, /*#__PURE__*/_react.default.createElement("h3", null, "GREAT! You're verified"), /*#__PURE__*/_react.default.createElement("p", null, "You can now complete your sign up proccess by clicking the button below.")), continueUrl && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: function onClick() {
+      window.open(continueUrl, '_self');
+    }
+  }, "Continue")))))), /*#__PURE__*/_react.default.createElement(RedBar, null));
+};
+var RenderErrorModal = function RenderErrorModal(props) {
+  var error = props.error,
+    isActionLoading = props.isActionLoading,
+    popupError = props.popupError,
+    popupSuccess = props.popupSuccess,
+    onResend = props.onResend,
+    onModalSwitch = props.onModalSwitch;
+  var _useCooldown = (0, _customHooks.useCooldown)(60),
+    isDisabled = _useCooldown.isDisabled,
+    secondsRemaining = _useCooldown.secondsRemaining,
+    startCooldown = _useCooldown.startCooldown;
+  var userEmail = error && error.email;
+
+  //send activation email automatically if link is expired
+  _react.default.useEffect(function () {
+    if ((error === null || error === void 0 ? void 0 : error.code) === 'auth/invalid-action-code') {
+      onModalSwitch && onModalSwitch();
+    }
+    if (error !== null && error !== void 0 && error.email && !isDisabled) {
+      startCooldown();
+      onResend({
+        email: error.email
+      });
+    }
+  }, [error]);
+  var validationSchema = Yup.object().shape({
+    email: Yup.string().email("Oops, that's not a valid address").required('Oops, this can‘t be blank')
+  });
+  return /*#__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, "Oops..."), /*#__PURE__*/_react.default.createElement("p", null, (error === null || error === void 0 ? void 0 : error.message) || 'Something went wrong.'))), /*#__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(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: {
+      email: userEmail || ''
+    },
+    validationSchema: validationSchema,
+    onSubmit: function onSubmit(values) {
+      startCooldown();
+      onResend(values);
+    }
+  }, function (_ref2) {
+    var values = _ref2.values,
+      errors = _ref2.errors,
+      touched = _ref2.touched,
+      handleBlur = _ref2.handleBlur,
+      setFieldValue = _ref2.setFieldValue,
+      setFieldTouched = _ref2.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 || isDisabled || isActionLoading === 'resend';
+    return /*#__PURE__*/_react.default.createElement(_Form2.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      noPadding: true
+    }, /*#__PURE__*/_react.default.createElement(_Form.FormField, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
+      id: "verify-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
+      ,
+      disabled: submitDisabled
+    }, isActionLoading === 'resend' ? 'Resending email' : 'Resend email')), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      paddingVeticalHalf: true,
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
+      show: popupError.popup === 'resend'
+    }, popupError.message)), isDisabled && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+      noPaddingVertical: true,
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/_react.default.createElement(_Form.FormError, {
+      show: isDisabled
+    }, "You can try again in ".concat(secondsRemaining, " seconds"))));
+  })))));
+};
+VerifyEmailModal.propTypes = {
+  isModalOpen: _propTypes.default.bool.isRequired,
+  onModalClose: _propTypes.default.func.isRequired
+};
+var _default = VerifyEmailModal;
+exports.default = _default;