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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/components/2FA/Connect2FA.js +58 -16
  2. package/dist/components/2FA/EnterCode.js +2 -1
  3. package/dist/components/2FA/InstallAuthApp.js +41 -11
  4. package/dist/components/2FA/Sucess2FA.js +15 -6
  5. package/dist/components/2FA/disable-2fa-flow.js +10 -133
  6. package/dist/components/2FA/enable-2fa-flow.js +2 -2
  7. package/dist/components/2FA/main-flow.js +8 -4
  8. package/dist/components/2FA/main-flow.stories.js +1 -1
  9. package/dist/components/ComponentScroll/ComponentScroll.js +4 -2
  10. package/dist/components/ComponentScroll/ComponentScroll.styles.js +7 -5
  11. package/dist/components/ComponentWrapper/ComponentWrapper.styles.js +9 -7
  12. package/dist/components/CryptoAddress/CryptoAddress.js +6 -3
  13. package/dist/components/ForgotPasswordModal/ForgotPasswordModal.stories.js +4 -1
  14. package/dist/components/Header/Header.styles.js +1 -1
  15. package/dist/components/Input/OtpInput.js +54 -8
  16. package/dist/components/MainMenu/MainMenu.js +2 -2
  17. package/dist/components/Modal/Modal.styles.js +5 -2
  18. package/dist/components/RegisterConfirmModal/RegisterConfirmModal.js +10 -3
  19. package/dist/components/RegisterConfirmModal/RegisterConfirmModal.stories.js +6 -2
  20. package/dist/components/RegisterModal/RegisterModal.js +1 -22
  21. package/dist/components/Switch/Switch.js +13 -6
  22. package/dist/components/Switch/Switch.styles.js +3 -3
  23. package/dist/components/TermsModal/TermsModal.js +1 -1
  24. package/dist/components/TextLink/TextLink.styles.js +4 -2
  25. package/dist/components/VerifyEmailModal/VerifyEmailModal.js +163 -0
  26. package/dist/components/VerifyEmailModal/VerifyEmailModal.stories.js +64 -0
  27. package/dist/components/headerHo/HeaderHo.js +162 -104
  28. package/dist/components/headerHo/HeaderHo.stories.js +5 -1
  29. package/dist/context/Auth.js +41 -22
  30. package/dist/context/AuthContext.js +305 -218
  31. package/dist/static/images/avatar-placeholder.png +0 -0
  32. package/dist/static/images/google_auth.png +0 -0
  33. package/dist/utils/customHooks.js +60 -2
  34. package/package.json +1 -1
package/dist/components/2FA/Connect2FA.js CHANGED
@@ -7,39 +7,81 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
- var _RegisterEthereum = require("../RegisterEthereum");
11
10
  var _Text = _interopRequireDefault(require("../Text/Text.styles"));
12
11
  var _Button = _interopRequireDefault(require("../Button/Button.styles"));
13
- var _FAQ = _interopRequireDefault(require("../FAQ/FAQ"));
14
- var _SectionTitle = _interopRequireDefault(require("../SectionTitle/SectionTitle.styles"));
15
12
  var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
16
- var _ComponentScroll = _interopRequireDefault(require("../ComponentScroll/ComponentScroll"));
17
13
  var _Modal = require("../Modal/Modal.styles");
18
- var _StyledText = _interopRequireDefault(require("../Text/StyledText"));
19
14
  var _reactQrCode = _interopRequireDefault(require("react-qr-code"));
15
+ var _Grid = require("../Grid/Grid.styles");
16
+ var _CryptoAddress = _interopRequireDefault(require("../CryptoAddress/CryptoAddress"));
17
+ var _reactDeviceDetect = require("react-device-detect");
18
+ var _TextLink = _interopRequireDefault(require("../TextLink/TextLink.styles"));
20
19
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
20
  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); }
22
21
  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; }
23
22
  var Connect2FA = function Connect2FA(props) {
23
+ var _totpData$totpSecret, _totpData$totpSecret2;
24
24
  var changeStep = props.changeStep,
25
- totpData = props.totpData;
26
- 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, {
27
- noPaddingVertical: true
28
- }, /*#__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, {
29
- center: true
30
- }, /*#__PURE__*/_react.default.createElement(_reactQrCode.default, {
31
- size: 256
25
+ totpData = props.totpData,
26
+ user = props.user;
27
+ // otpauth://totp/dev@it.com?secret=123abc&issuer=StackOverflow
28
+ return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
29
+ part: 8
30
+ }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
31
+ modalTop: true
32
+ }, /*#__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, {
33
+ modalBot: true
34
+ })), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
35
+ part: 8
36
+ }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
37
+ noPaddingTop: true,
38
+ noPaddingHorizontal: true
39
+ }, /*#__PURE__*/_react.default.createElement(_Text.default, {
40
+ small: true
41
+ }, /*#__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, {
42
+ center: true,
43
+ noPaddingHorizontal: true
44
+ }, _reactDeviceDetect.isMobile ? /*#__PURE__*/_react.default.createElement(_TextLink.default, {
45
+ to: "otpauth://totp/".concat(user.email, "?secret=").concat((_totpData$totpSecret = totpData.totpSecret) === null || _totpData$totpSecret === void 0 ? void 0 : _totpData$totpSecret.secretKey, "&issuer=STOKR")
46
+ // onClick={() => {
47
+ // console.log(
48
+ // `otpauth://totp/${user.email}?secret=${totpData.totpSecret?.secretKey}&issuer=STOKR`,
49
+ // )
50
+ // }}
51
+ }, ' ', "Open authenticator app with this secret key") : /*#__PURE__*/_react.default.createElement(_reactQrCode.default, {
52
+ size: 180
32
53
  //style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
33
54
  ,
34
55
  value: totpData === null || totpData === void 0 ? void 0 : totpData.totpUri,
35
56
  viewBox: "0 0 256 256"
57
+ }), /*#__PURE__*/_react.default.createElement(_CryptoAddress.default
58
+ //title={index === 0 ? 'Liquid Addresses' : ''}
59
+ //address={address.address}
60
+ , {
61
+ data: {
62
+ value: (_totpData$totpSecret2 = totpData.totpSecret) === null || _totpData$totpSecret2 === void 0 ? void 0 : _totpData$totpSecret2.secretKey,
63
+ tooltip: true
64
+ },
65
+ fontSize: 11
66
+ // info={totpData.totpSecret?.secretKey}
67
+ //noHead
68
+ ,
69
+ wrapperStyle: {
70
+ paddingRight: 0
71
+ },
72
+ dataBoxStyle: {
73
+ width: '100%',
74
+ whiteSpace: 'nowrap'
75
+ }
36
76
  })), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
37
77
  noPaddingTop: true,
38
- center: true
78
+ center: true,
79
+ noPaddingHorizontal: true
39
80
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
40
- minWidth: "300px",
41
- onClick: changeStep
42
- }, "Continue"))));
81
+ minWidth: "150px",
82
+ onClick: changeStep,
83
+ fluid: true
84
+ }, "Continue"))))));
43
85
  };
44
86
  var _default = Connect2FA;
45
87
  exports.default = _default;
package/dist/components/2FA/EnterCode.js CHANGED
@@ -71,7 +71,8 @@ var EnterCode = function EnterCode(props) {
71
71
  onChange: function onChange(e) {
72
72
  setFieldValue('otpInput', e);
73
73
  setFieldTouched('otpInput');
74
- }
74
+ },
75
+ label: "authentication code"
75
76
  }), /*#__PURE__*/_react.default.createElement(_Form.FormError, {
76
77
  show: errors.otpInput && touched.otpInput
77
78
  }, errors.otpInput))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
package/dist/components/2FA/InstallAuthApp.js CHANGED
@@ -16,28 +16,58 @@ var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/Comp
16
16
  var _ComponentScroll = _interopRequireDefault(require("../ComponentScroll/ComponentScroll"));
17
17
  var _Modal = require("../Modal/Modal.styles");
18
18
  var _StyledText = _interopRequireDefault(require("../Text/StyledText"));
19
+ var _Grid = require("../Grid/Grid.styles");
20
+ var _google_auth = _interopRequireDefault(require("../../static/images/google_auth.png"));
19
21
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20
22
  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); }
21
23
  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; }
22
24
  var InstallAuthApp = function InstallAuthApp(props) {
23
25
  var changeStep = props.changeStep;
24
- 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, {
25
- noPaddingVertical: true
26
- }, /*#__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, {
27
- noPaddingBottom: true
28
- }, /*#__PURE__*/_react.default.createElement(_RegisterEthereum.EthInfo, {
29
- center: true
30
- }, "I use different app")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
26
+ return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
27
+ part: 8
28
+ }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
29
+ modalTop: true
30
+ }, /*#__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, {
31
+ modalBot: true
32
+ })), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
33
+ part: 8
34
+ }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
35
+ noPaddingTop: true,
36
+ noPaddingHorizontal: true
37
+ }, /*#__PURE__*/_react.default.createElement(_Text.default, {
38
+ small: true
39
+ }, /*#__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, {
40
+ noPaddingHorizontal: true,
31
41
  center: true
32
- }), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
42
+ }, /*#__PURE__*/_react.default.createElement(_Button.default, {
43
+ minWidth: "150px",
44
+ fluid: true,
45
+ onClick: function onClick() {
46
+ window.open('https://onelink.to/ev63j9', '_blank');
47
+ },
48
+ secondary: true
49
+ }, "Get the app", ' ', /*#__PURE__*/_react.default.createElement("img", {
50
+ src: _google_auth.default,
51
+ width: 20,
52
+ style: {
53
+ verticalAlign: 'middle',
54
+ marginLeft: '6px',
55
+ marginTop: '-3px'
56
+ }
57
+ //height={20}
58
+ ,
59
+ alt: "google auth logo"
60
+ }))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
61
+ noPaddingHorizontal: true,
33
62
  noPaddingTop: true,
34
63
  center: true
35
64
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
36
- minWidth: "300px"
65
+ minWidth: "150px"
37
66
  //onClick={onRegisterClick}
38
67
  ,
39
- onClick: changeStep
40
- }, "Continue"))));
68
+ onClick: changeStep,
69
+ fluid: true
70
+ }, "Continue"))))));
41
71
  };
42
72
  var _default = InstallAuthApp;
43
73
  exports.default = _default;
package/dist/components/2FA/Sucess2FA.js CHANGED
@@ -12,24 +12,33 @@ var _Button = _interopRequireDefault(require("../Button/Button.styles"));
12
12
  var _SectionTitle = _interopRequireDefault(require("../SectionTitle/SectionTitle.styles"));
13
13
  var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
14
14
  var _ComponentScroll = _interopRequireDefault(require("../ComponentScroll/ComponentScroll"));
15
+ var _Grid = require("../Grid/Grid.styles");
15
16
  var _Modal = require("../Modal/Modal.styles");
16
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
18
  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); }
18
19
  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; }
19
20
  var Sucess2FA = function Sucess2FA(_ref) {
20
21
  var _onClick = _ref.onClick;
21
- return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, null, /*#__PURE__*/_react.default.createElement(_SectionTitle.default, null, "two factor authentication")), /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
22
- noPaddingVertical: true
23
- }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "YOU successfully added 2FA"), /*#__PURE__*/_react.default.createElement("p", null, "Next time you login you will be asked to enter the code from your connected device"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
24
- noPaddingHorizontal: true,
25
- center: true
22
+ return /*#__PURE__*/_react.default.createElement(_Modal.ModalWrapper, null, /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
23
+ part: 8
24
+ }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
25
+ modalTop: true
26
+ }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "Success"), /*#__PURE__*/_react.default.createElement("p", null, "One step ahead to more secure account"))), /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
27
+ modalBot: true
28
+ })), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
29
+ part: 8
30
+ }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
31
+ noPaddingVertical: true,
32
+ noPaddingHorizontal: true
33
+ }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Congratulations! You have successfully enabled two factor authentication for your account"))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
34
+ noPaddingHorizontal: true
26
35
  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
27
36
  minWidth: "240px",
28
37
  onClick: function onClick() {
29
38
  // deleteRedirectCookieAndNavigate()
30
39
  _onClick();
31
40
  }
32
- }, "Continue"))));
41
+ }, "Continue"))))));
33
42
  };
34
43
  exports.Sucess2FA = Sucess2FA;
35
44
  Sucess2FA.propTypes = {
package/dist/components/2FA/disable-2fa-flow.js CHANGED
@@ -12,7 +12,7 @@ var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/Comp
12
12
  var _Modal = require("../Modal/Modal");
13
13
  var _Text = _interopRequireDefault(require("../Text/Text.styles"));
14
14
  var _Button = _interopRequireDefault(require("../Button/Button.styles"));
15
- var _excluded = ["showFlow", "setShowFlow", "onSuccess"];
15
+ var _excluded = ["showFlow", "setShowFlow", "onSuccess", "onRequiresRecentLoginError"];
16
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
17
  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); }
18
18
  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; }
@@ -36,30 +36,16 @@ var Disable2FA = function Disable2FA(_ref) {
36
36
  var showFlow = _ref.showFlow,
37
37
  setShowFlow = _ref.setShowFlow,
38
38
  onSuccess = _ref.onSuccess,
39
+ onRequiresRecentLoginError = _ref.onRequiresRecentLoginError,
39
40
  props = _objectWithoutProperties(_ref, _excluded);
40
41
  var _useContext = (0, _react.useContext)(_AuthContext.AuthContext),
41
- loginUser = _useContext.loginUser,
42
- user = _useContext.user,
43
42
  unenrollUser2FA = _useContext.unenrollUser2FA;
44
43
  var _useState = (0, _react.useState)({
45
- confirmDisable: false,
46
- login: false,
47
- enter2fa: false
44
+ confirmDisable: false
48
45
  }),
49
46
  _useState2 = _slicedToArray(_useState, 2),
50
47
  isModalOpen = _useState2[0],
51
48
  setIsModalOpen = _useState2[1];
52
- var _useState3 = (0, _react.useState)(),
53
- _useState4 = _slicedToArray(_useState3, 2),
54
- isActionLoading = _useState4[0],
55
- setIsActionLoading = _useState4[1];
56
- var _useState5 = (0, _react.useState)({
57
- popup: undefined,
58
- message: undefined
59
- }),
60
- _useState6 = _slicedToArray(_useState5, 2),
61
- popupError = _useState6[0],
62
- setPopupError = _useState6[1];
63
49
  (0, _react.useEffect)(function () {
64
50
  if (showFlow) {
65
51
  setIsModalOpen(_objectSpread(_objectSpread({}, isModalOpen), {}, {
@@ -67,22 +53,6 @@ var Disable2FA = function Disable2FA(_ref) {
67
53
  }));
68
54
  }
69
55
  }, [props.showFlow]);
70
- var switchOpenModal = function switchOpenModal(prevModalId, nextModalId) {
71
- var _objectSpread2;
72
- setIsModalOpen(_objectSpread(_objectSpread({}, isModalOpen), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, prevModalId, false), _defineProperty(_objectSpread2, nextModalId, true), _objectSpread2)));
73
- };
74
- var handleSetPopupError = function handleSetPopupError(popup, message) {
75
- setPopupError({
76
- popup: popup,
77
- message: message
78
- });
79
- };
80
- var clearPopupError = function clearPopupError() {
81
- setPopupError({
82
- popup: undefined,
83
- message: undefined
84
- });
85
- };
86
56
  var handleDisableClick = /*#__PURE__*/function () {
87
57
  var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
88
58
  return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -94,13 +64,16 @@ var Disable2FA = function Disable2FA(_ref) {
94
64
  case 3:
95
65
  setShowFlow(false);
96
66
  onSuccess && onSuccess();
97
- _context.next = 10;
67
+ _context.next = 11;
98
68
  break;
99
69
  case 7:
100
70
  _context.prev = 7;
101
71
  _context.t0 = _context["catch"](0);
102
- console.log('🚀 ~ file: disable-2fa-flow.js:54 ~ error:', _context.t0);
103
- case 10:
72
+ console.log('🚀 ~ file: disable-2fa-flow.js ~ error:', _context.t0);
73
+ if (_context.t0.code === 'auth/requires-recent-login') {
74
+ onRequiresRecentLoginError && onRequiresRecentLoginError();
75
+ }
76
+ case 11:
104
77
  case "end":
105
78
  return _context.stop();
106
79
  }
@@ -129,103 +102,7 @@ var Disable2FA = function Disable2FA(_ref) {
129
102
  }
130
103
  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
131
104
  onClick: handleDisableClick
132
- }, "Yes")))), /*#__PURE__*/_react.default.createElement(_LoginModal.default, {
133
- isActionLoading: isActionLoading,
134
- popupError: popupError
135
- //background={backgroundProp}
136
- ,
137
- isModalOpen: isModalOpen.login,
138
- onModalClose: function onModalClose() {
139
- window.location.href = 'https://stokr.info/';
140
- },
141
- onModalSwitch: function onModalSwitch() {
142
- window.location.href = 'https://stokr.info/signup';
143
- },
144
- onForgotPassword: function onForgotPassword() {
145
- switchOpenModal('login', 'forgot');
146
- clearPopupError();
147
- setIsActionLoading(undefined);
148
- },
149
- onFormSend: /*#__PURE__*/function () {
150
- var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_ref3) {
151
- var email, password;
152
- return _regeneratorRuntime().wrap(function _callee2$(_context2) {
153
- while (1) switch (_context2.prev = _context2.next) {
154
- case 0:
155
- email = _ref3.email, password = _ref3.password;
156
- clearPopupError();
157
- setIsActionLoading('login');
158
- _context2.prev = 3;
159
- if (!(password.length > 128)) {
160
- _context2.next = 8;
161
- break;
162
- }
163
- handleSetPopupError('login', 'Your password cannot exceed 128 characters');
164
- setIsActionLoading(undefined);
165
- return _context2.abrupt("return");
166
- case 8:
167
- _context2.next = 10;
168
- return loginUser(email, password);
169
- case 10:
170
- _context2.next = 22;
171
- break;
172
- case 12:
173
- _context2.prev = 12;
174
- _context2.t0 = _context2["catch"](3);
175
- _context2.t1 = _context2.t0.code;
176
- _context2.next = _context2.t1 === 'auth/multi-factor-auth-required' ? 17 : 19;
177
- break;
178
- case 17:
179
- // Initiate your second factor sign-in flow. (See next step.)
180
- // ...
181
- switchOpenModal('login', 'enter2fa');
182
- return _context2.abrupt("break", 21);
183
- case 19:
184
- console.log({
185
- error: _context2.t0
186
- }); // Handle other errors, such as wrong passwords.
187
- return _context2.abrupt("break", 21);
188
- case 21:
189
- // const errorMessage =
190
- // error &&
191
- // error.response &&
192
- // error.response.data === 'E_AUTH_OBJECTNOTFOUND::User'
193
- // ? error.response.data
194
- // : error.response.data.error_description
195
-
196
- // if (errorMessage === 'E_AUTH_USERNOTACTIVATED') {
197
- // handleSetPopupError(
198
- // 'login',
199
- // "You're not activated. We're sending you an activation email right now.",
200
- // )
201
- // } else if (errorMessage === 'E_AUTH_PASSWORDINCORRECT') {
202
- // handleSetPopupError(
203
- // 'login',
204
- // 'The password is not correct. Try again?',
205
- // )
206
- // } else if (errorMessage === 'E_AUTH_OBJECTNOTFOUND::User') {
207
- // handleSetPopupError(
208
- // 'login',
209
- // "This email is not registered. Are you sure that's the right one?",
210
- // )
211
- // } else {
212
- // handleSetPopupError(
213
- // 'login',
214
- // "Oops. Something's not right there. Try again?",
215
- // )
216
- // }
217
- setIsActionLoading(undefined);
218
- case 22:
219
- case "end":
220
- return _context2.stop();
221
- }
222
- }, _callee2, null, [[3, 12]]);
223
- }));
224
- return function (_x) {
225
- return _ref4.apply(this, arguments);
226
- };
227
- }()
228
- }));
105
+ }, "Yes")))));
229
106
  };
230
107
  exports.Disable2FA = Disable2FA;
231
108
  var _default = Disable2FA;
package/dist/components/2FA/enable-2fa-flow.js CHANGED
@@ -115,7 +115,6 @@ var Enable2FAFlow = function Enable2FAFlow(_ref) {
115
115
  stepController.changeStep(stepsNames[prevStepIndex], prevStepIndex);
116
116
  };
117
117
  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
118
- fullscreen: true,
119
118
  isOpen: showFlow,
120
119
  onClose: function onClose() {
121
120
  return setShowFlow(false);
@@ -162,7 +161,8 @@ var Enable2FAFlow = function Enable2FAFlow(_ref) {
162
161
  changeStep: function changeStep() {
163
162
  return stepController.changeStep('enter-code', 2, 1);
164
163
  },
165
- totpData: totpData
164
+ totpData: totpData,
165
+ user: user
166
166
  }), /*#__PURE__*/_react.default.createElement(_EnterCode.default, {
167
167
  id: "enter-code",
168
168
  changeStep: function changeStep() {
package/dist/components/2FA/main-flow.js CHANGED
@@ -15,6 +15,7 @@ var _Button = _interopRequireDefault(require("../Button/Button.styles"));
15
15
  var _loginWithOtpFlow = _interopRequireDefault(require("./login-with-otp-flow"));
16
16
  var _enable2faFlow = _interopRequireDefault(require("./enable-2fa-flow"));
17
17
  var _disable2faFlow = _interopRequireDefault(require("./disable-2fa-flow"));
18
+ var _colors = _interopRequireDefault(require("../../styles/colors"));
18
19
  var _excluded = ["onRequiresRecentLoginError"];
19
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20
21
  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); }
@@ -83,8 +84,11 @@ var Main2FAFlow = function Main2FAFlow(_ref) {
83
84
  }, /*#__PURE__*/_react.default.createElement(_Switch.default, {
84
85
  value1: "enabled",
85
86
  value2: "disabled",
87
+ value2Color: _colors.default.orangishRed,
88
+ value1Color: _colors.default.freshGreen,
86
89
  value: is2FAEnabled ? 'enabled' : 'disabled',
87
90
  revertToPrevious: true,
91
+ hideValues: true,
88
92
  handleChange: function handleChange(value) {
89
93
  if (value === 'enabled') {
90
94
  switchOpenFlow('disable2fa', 'enable2fa');
@@ -92,11 +96,10 @@ var Main2FAFlow = function Main2FAFlow(_ref) {
92
96
  switchOpenFlow('enable2fa', 'disable2fa');
93
97
  }
94
98
  }
95
- })), is2FAEnabled && /*#__PURE__*/_react.default.createElement(_Button.default, {
96
- minWidth: "150px"
97
- }, "change settings"), successMessage && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
99
+ })), successMessage && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
98
100
  alignVertically: true,
99
- noPaddingHorizontal: true
101
+ noPaddingHorizontal: true,
102
+ noPaddingTop: true
100
103
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
101
104
  small: true,
102
105
  success: true
@@ -119,6 +122,7 @@ var Main2FAFlow = function Main2FAFlow(_ref) {
119
122
  disable2fa: value
120
123
  }));
121
124
  },
125
+ onRequiresRecentLoginError: onRequiresRecentLoginError,
122
126
  onSuccess: function onSuccess() {
123
127
  setis2FAEnabled(false);
124
128
  setsuccessMessage('You successfully disabled two factor authentication');
package/dist/components/2FA/main-flow.stories.js CHANGED
@@ -28,7 +28,7 @@ var _default = {
28
28
  };
29
29
  exports.default = _default;
30
30
  var Template = function Template(args) {
31
- return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_mainFlow.default, args))));
31
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(_AuthContext.AuthProvider, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_mainFlow.default, args), /*#__PURE__*/_react.default.createElement("p", null, "some text"))));
32
32
  };
33
33
  var MainFlow = Template.bind({});
34
34
  exports.MainFlow = MainFlow;
package/dist/components/ComponentScroll/ComponentScroll.js CHANGED
@@ -22,7 +22,8 @@ var ComponentScroll = function ComponentScroll(props) {
22
22
  barPadding = props.barPadding,
23
23
  topPadding = props.topPadding,
24
24
  className = props.className,
25
- handleScroll = props.handleScroll;
25
+ handleScroll = props.handleScroll,
26
+ fullHeight = props.fullHeight;
26
27
  var scrollRef = (0, _react.useRef)();
27
28
  (0, _react.useEffect)(function () {
28
29
  if (scrollRef.current) {
@@ -40,7 +41,8 @@ var ComponentScroll = function ComponentScroll(props) {
40
41
  return /*#__PURE__*/_react.default.createElement(_ComponentScroll.Container, {
41
42
  className: className,
42
43
  noMobileScroll: noMobileScroll,
43
- isMobile: true
44
+ isMobile: true,
45
+ fullHeight: fullHeight
44
46
  }, /*#__PURE__*/_react.default.createElement(_ComponentScroll.Outer, {
45
47
  offset: offset,
46
48
  barPadding: barPadding,
package/dist/components/ComponentScroll/ComponentScroll.styles.js CHANGED
@@ -8,7 +8,7 @@ exports.TrackV = exports.TrackH = exports.ThumbV = exports.ThumbH = exports.Oute
8
8
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
  var _rwd = _interopRequireDefault(require("../../styles/rwd"));
10
10
  var _theme = _interopRequireDefault(require("../../styles/theme"));
11
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
11
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
  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); }
14
14
  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(
16
16
  var Container = _styledComponents.default.div.withConfig({
17
17
  displayName: "ComponentScrollstyles__Container",
18
18
  componentId: "sc-12avd6v-0"
19
- })(["position:relative;height:364px;width:100%;display:flex;@media screen and (max-width:767px){height:", ";}", ""], function (_ref) {
19
+ })(["position:relative;height:364px;width:100%;display:flex;@media screen and (max-width:767px){height:", ";}", " ", ""], function (_ref) {
20
20
  var isMobile = _ref.isMobile;
21
21
  return isMobile ? '100%' : '364px';
22
22
  }, function (props) {
23
- 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 "]))));
23
+ return props.fullHeight && (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n height: 100%;\n "])));
24
+ }, function (props) {
25
+ 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 "]))));
24
26
  });
25
27
  exports.Container = Container;
26
28
  var TrackH = _styledComponents.default.div.withConfig({
@@ -28,7 +30,7 @@ var TrackH = _styledComponents.default.div.withConfig({
28
30
  componentId: "sc-12avd6v-1"
29
31
  })(["background-color:", ";left:16px;right:16px;bottom:14px;height:4px;border-radius:4px;", ""], function (props) {
30
32
  return _theme.default.cGrey;
31
- }, _rwd.default.Large(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n left: 32px;\n right: 32px;\n bottom: 30px;\n "]))));
33
+ }, _rwd.default.Large(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n left: 32px;\n right: 32px;\n bottom: 30px;\n "]))));
32
34
  exports.TrackH = TrackH;
33
35
  var ThumbH = _styledComponents.default.div.withConfig({
34
36
  displayName: "ComponentScrollstyles__ThumbH",
@@ -42,7 +44,7 @@ var TrackV = _styledComponents.default.div.withConfig({
42
44
  componentId: "sc-12avd6v-3"
43
45
  })(["background-color:", ";top:16px;bottom:16px;right:14px;width:4px;border-radius:4px;", ""], function (props) {
44
46
  return _theme.default.cGrey;
45
- }, _rwd.default.Large(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n top: 32px;\n bottom: 32px;\n right: 30px;\n "]))));
47
+ }, _rwd.default.Large(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n top: 32px;\n bottom: 32px;\n right: 30px;\n "]))));
46
48
  exports.TrackV = TrackV;
47
49
  var ThumbV = _styledComponents.default.div.withConfig({
48
50
  displayName: "ComponentScrollstyles__ThumbV",
package/dist/components/ComponentWrapper/ComponentWrapper.styles.js CHANGED
@@ -8,7 +8,7 @@ exports.default = exports.ComponentWrapper = void 0;
8
8
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
9
9
  var _rwd = _interopRequireDefault(require("../../styles/rwd"));
10
10
  var _theme = _interopRequireDefault(require("../../styles/theme"));
11
- 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;
11
+ 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;
12
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
13
13
  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); }
14
14
  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(
16
16
  var ComponentWrapper = _styledComponents.default.div.withConfig({
17
17
  displayName: "ComponentWrapperstyles__ComponentWrapper",
18
18
  componentId: "sc-1w1v084-0"
19
- })(["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) {
19
+ })(["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) {
20
20
  return props.borderLeft && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-left: 1px solid ", ";\n "])), _theme.default.cLightGrey);
21
21
  }, function (props) {
22
22
  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({
53
53
  }, function (props) {
54
54
  return props.fluid && (0, _styledComponents.css)(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n width: 100%;\n "])));
55
55
  }, function (props) {
56
- return props.fluidcenter && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n width: 100% !important;\n text-align: center !important;\n "])));
56
+ return props.fluidcenter && (0, _styledComponents.css)(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n width: 100% !important;\n text-align: center !important;\n "])));
57
57
  }, function (props) {
58
- return props.investmentNotifications && (0, _styledComponents.css)(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n padding: 0;\n "])));
58
+ 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 "])));
59
59
  }, function (props) {
60
- return props.alignVertically && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n "])));
60
+ return props.investmentNotifications && (0, _styledComponents.css)(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n padding: 0;\n "])));
61
61
  }, function (props) {
62
- return props.marginTop && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n margin-top: ", ";\n "])), props.marginTop);
62
+ return props.alignVertically && (0, _styledComponents.css)(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n "])));
63
63
  }, function (props) {
64
- 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 "])));
64
+ return props.marginTop && (0, _styledComponents.css)(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n margin-top: ", ";\n "])), props.marginTop);
65
+ }, function (props) {
66
+ 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 "])));
65
67
  });
66
68
  exports.ComponentWrapper = ComponentWrapper;
67
69
  var _default = ComponentWrapper;