@stokr/components-library 2.3.65-beta.9 → 2.3.65

package/dist/components/2FA/login-with-otp-flow.js

@@ -86,7 +86,7 @@ const LoginWithOTP = _ref => {
       message: undefined
     });
   };
-  const backgroundProp = "url(".concat(_background.default, ") left center no-repeat");
+  const backgroundProp = "url(".concat(_background.default, ") left top no-repeat");
   return /*#__PURE__*/_react.default.createElement(_Layout.Layout, {
     noHeader: true,
     noFooter: true

package/dist/components/2FA/main-flow.js

@@ -17,7 +17,7 @@ var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _InfoIcon = _interopRequireDefault(require("../InfoIcon/InfoIcon"));
 var _Modal = require("../Modal/Modal");
 var _Sucess2FA = _interopRequireDefault(require("./Sucess2FA"));
-const _excluded = ["onRequiresRecentLoginError", "open2faflow", "onLoginAgainClick", "openDisable2faflow", "title", "subtitle", "showSwitch", "customComponent"];
+const _excluded = ["onRequiresRecentLoginError", "open2faflow", "onLoginAgainClick", "openDisable2faflow", "title", "subtitle", "showSwitch", "customComponent", "onFlowClose"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -36,7 +36,8 @@ const Main2FAFlow = _ref => {
       title = 'SET UP YOUR LOG IN TWO FACTOR AUTHENTICATION',
       subtitle = 'Protect your account with an additional layer of security to log in',
       showSwitch = true,
-      customComponent
+      customComponent,
+      onFlowClose
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -79,6 +80,9 @@ const Main2FAFlow = _ref => {
     } catch (error) {
       if (error.code === 'auth/requires-recent-login' || error.code === 'auth/unsupported-first-factor') {
         setisLoginRequired(true);
+        if (isFlowopen.enable2fa && !isFlowopen.requiresRecentLogin) {
+          onRequiresRecentLoginErrorHandler();
+        }
       }
     }
   };
@@ -88,6 +92,14 @@ const Main2FAFlow = _ref => {
       [nextFlowId]: true
     }));
   };
+
+  // Helper to close a flow and call the custom onFlowClose handler
+  const handleFlowClose = flowId => {
+    setIsFlowOpen(prev => _objectSpread(_objectSpread({}, prev), {}, {
+      [flowId]: false
+    }));
+    onFlowClose && onFlowClose(flowId);
+  };
   const onEnable2FASuccess = async () => {
     setis2FAEnabled(true);
     checkMfaEnrollment();
@@ -112,11 +124,15 @@ const Main2FAFlow = _ref => {
     openEnable2FA: () => switchOpenFlow('disable2fa', 'enable2fa'),
     openDisable2FA: () => switchOpenFlow('enable2fa', 'disable2fa'),
     closeFlows: () => {
+      const wasOpen = Object.keys(isFlowopen).find(key => isFlowopen[key]);
       setIsFlowOpen({
         enable2fa: false,
         disable2fa: false,
         requiresRecentLogin: false
       });
+      if (wasOpen) {
+        onFlowClose && onFlowClose(wasOpen);
+      }
     },
     is2FAEnabled,
     isFlowOpen: isFlowopen
@@ -169,24 +185,34 @@ const Main2FAFlow = _ref => {
     flowActions
   }) : customComponent), isFlowopen.enable2fa && /*#__PURE__*/_react.default.createElement(_enable2faFlow.default, {
     showFlow: isFlowopen.enable2fa,
-    setShowFlow: value => setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, {
-      enable2fa: value
-    })),
+    setShowFlow: value => {
+      if (!value) {
+        handleFlowClose('enable2fa');
+      } else {
+        setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, {
+          enable2fa: value
+        }));
+      }
+    },
     totpData: totpData,
     onRequiresRecentLoginError: onRequiresRecentLoginErrorHandler,
     onSuccess: onEnable2FASuccess
   }), isFlowopen.disable2fa && /*#__PURE__*/_react.default.createElement(_disable2faFlow.default, {
     showFlow: isFlowopen.disable2fa,
-    setShowFlow: value => setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, {
-      disable2fa: value
-    })),
+    setShowFlow: value => {
+      if (!value) {
+        handleFlowClose('disable2fa');
+      } else {
+        setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, {
+          disable2fa: value
+        }));
+      }
+    },
     onRequiresRecentLoginError: onRequiresRecentLoginErrorHandler,
     onSuccess: onDisable2FASuccess
   }), isFlowopen.requiresRecentLogin && /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
     isOpen: isFlowopen.requiresRecentLogin,
-    onClose: () => setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, {
-      requiresRecentLogin: false
-    }))
+    onClose: () => handleFlowClose('requiresRecentLogin')
   }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, {
     noPadding: true
   }, /*#__PURE__*/_react.default.createElement(_Sucess2FA.default, {
@@ -200,6 +226,8 @@ const Main2FAFlow = _ref => {
 };
 exports.Main2FAFlow = Main2FAFlow;
 Main2FAFlow.propTypes = {
-  onRequiresRecentLoginError: _propTypes.default.func
+  onRequiresRecentLoginError: _propTypes.default.func,
+  /** Called when any flow/modal is closed. Receives the flowId: 'enable2fa' | 'disable2fa' | 'requiresRecentLogin' */
+  onFlowClose: _propTypes.default.func
 };
 var _default = exports.default = Main2FAFlow;

package/dist/components/Chips/Chip.js

@@ -28,10 +28,9 @@ const Chip = _ref => {
   }, props), /*#__PURE__*/_react.default.createElement(_ChipStyles.ChipText, null, children), tooltip && /*#__PURE__*/_react.default.createElement(_InfoIcon.default, _extends({
     title: tooltip,
     position: "top",
-    noIcon: true,
     noMarginLeft: true,
     noMarginRight: true
-  }, tooltipProps), /*#__PURE__*/_react.default.createElement(_ChipStyles.TooltipChipIcon, null)));
+  }, tooltipProps)));
 };
 exports.Chip = Chip;
 Chip.propTypes = {

package/dist/components/Chips/Chip.styles.js

@@ -6,15 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.Wrapper = exports.TooltipChipIcon = exports.StyledChip = exports.ChipText = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _theme = _interopRequireDefault(require("../../styles/theme"));
+var _InfoIcon = require("../InfoIcon/InfoIcon.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const StyledChip = exports.StyledChip = _styledComponents.default.div.withConfig({
   displayName: "Chipstyles__StyledChip",
   componentId: "sc-pcmyil-0"
-})(["display:inline-flex;gap:4px;align-items:center;padding:8px 16px;border-radius:20px;background-color:transparent;color:black;cursor:pointer;transition:background-color 0.3s;font-size:11px;font-weight:400;line-height:20px;letter-spacing:3px;font-weight:600;min-height:40px;&:hover,&:active{background-color:red;color:white;}", ""], _ref => {
+})(["display:inline-flex;gap:4px;align-items:center;padding:8px 16px;border-radius:20px;background-color:transparent;color:black;cursor:pointer;transition:background-color 0.3s;font-size:11px;font-weight:400;line-height:20px;letter-spacing:3px;font-weight:600;min-height:40px;&:hover,&:active{background-color:red;color:white;", "{color:", ";}}", ""], _InfoIcon.Icon, _theme.default.cWhite, _ref => {
   let {
     isActive
   } = _ref;
-  return isActive && "\n      background-color: red;\n      color: white;\n      font-weight: 800;\n\n      ".concat(TooltipChipIcon, " {\n        color: ").concat(_theme.default.cWhite, ";\n      }\n    ");
+  return isActive && "\n      background-color: red;\n      color: white;\n      font-weight: 800;\n\n      ".concat(_InfoIcon.Icon, " {\n        color: ").concat(_theme.default.cWhite, " ;\n      }\n    ");
 });
 const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
   displayName: "Chipstyles__Wrapper",

package/dist/components/ConfirmModal/ConfirmModal.js

@@ -0,0 +1,240 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.confirm = exports.ConfirmModal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _client = require("react-dom/client");
+var _Modal = require("../Modal/Modal");
+var _Grid = require("../Grid/Grid.styles");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _Button = require("../Button/Button.styles");
+var _Text = require("../Text/Text.styles");
+var _ConfirmModal = require("./ConfirmModal.styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+// Container for the modal - created once
+let confirmContainer = null;
+let confirmRoot = null;
+
+/**
+ * Internal ConfirmModal component
+ */
+const ConfirmModalComponent = _ref => {
+  let {
+    isOpen,
+    onClose,
+    onConfirm,
+    onCancel,
+    title,
+    message,
+    content,
+    confirmText,
+    cancelText,
+    showCancel,
+    showRedBar,
+    lineColor,
+    barColor,
+    renderFooter,
+    modalProps,
+    buttonProps,
+    cancelButtonProps,
+    contentFullWidth,
+    barStyle
+  } = _ref;
+  const [titleHeight, setTitleHeight] = (0, _react.useState)(0);
+  const observerRef = (0, _react.useRef)(null);
+
+  // Callback ref - guaranteed to run when element is attached to DOM
+  const titleRef = (0, _react.useCallback)(node => {
+    // Cleanup previous observer
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    if (node) {
+      // Set initial height immediately
+      setTitleHeight(node.offsetHeight);
+
+      // Watch for size changes
+      observerRef.current = new ResizeObserver(() => {
+        setTitleHeight(node.offsetHeight);
+      });
+      observerRef.current.observe(node);
+    }
+  }, []);
+  const handleConfirm = (0, _react.useCallback)(function () {
+    let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
+    onConfirm === null || onConfirm === void 0 || onConfirm(value);
+    onClose === null || onClose === void 0 || onClose();
+  }, [onConfirm, onClose]);
+  const handleCancel = (0, _react.useCallback)(() => {
+    onCancel === null || onCancel === void 0 || onCancel();
+    onClose === null || onClose === void 0 || onClose();
+  }, [onCancel, onClose]);
+
+  // Handle Escape key
+  (0, _react.useEffect)(() => {
+    if (!isOpen) return;
+    const handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        handleCancel();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, handleCancel]);
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({
+    isOpen: isOpen,
+    onClose: handleCancel,
+    maxHeight: "90vh",
+    boxStyles: {
+      minHeight: 'unset'
+    }
+    // maxWidth="1500px"
+  }, modalProps), /*#__PURE__*/_react.default.createElement(_Grid.Row, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    relative: true,
+    part: contentFullWidth ? null : 14
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_ConfirmModal.ContainerWithLine, {
+    height: titleHeight,
+    lineColor: lineColor
+  }, /*#__PURE__*/_react.default.createElement(_Text.Text, null, /*#__PURE__*/_react.default.createElement("div", null, title && /*#__PURE__*/_react.default.createElement("h3", {
+    ref: titleRef,
+    style: {
+      margin: 0
+    }
+  }, title), message && /*#__PURE__*/_react.default.createElement("p", null, message)), content && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '16px'
+    }
+  }, content)), renderFooter ? /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, renderFooter({
+    onConfirm: handleConfirm,
+    onCancel: handleCancel
+  })) : /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, {
+    noPaddingHorizontal: true,
+    flex: true,
+    style: {
+      gap: 16
+    }
+  }, showCancel && /*#__PURE__*/_react.default.createElement(_Button.Button, _extends({
+    outlineBlack: true,
+    minWidth: "120px",
+    onClick: handleCancel
+  }, cancelButtonProps), cancelText), /*#__PURE__*/_react.default.createElement(_Button.Button, _extends({
+    minWidth: "120px",
+    onClick: () => handleConfirm(true)
+  }, buttonProps), confirmText))))), showRedBar && /*#__PURE__*/_react.default.createElement(_ConfirmModal.RedBar, {
+    barColor: barColor,
+    style: barStyle
+  })));
+};
+
+/**
+ * Imperative confirm function
+ *
+ * @param {Object} options - Confirm options
+ * @param {string} options.title - Modal title
+ * @param {string} options.message - Modal message text
+ * @param {React.ReactNode} options.content - Custom content (React components)
+ * @param {string} options.confirmText - Confirm button text (default: 'Confirm')
+ * @param {string} options.cancelText - Cancel button text (default: 'Cancel')
+ * @param {boolean} options.showCancel - Show cancel button (default: true)
+ * @param {boolean} options.showRedBar - Show red bar decoration (default: true)
+ * @param {string} options.lineColor - Color of the left line (default: blue)
+ * @param {string} options.barColor - Color of the bottom bar (default: orangishRed)
+ * @param {Function} options.renderFooter - Custom footer renderer: ({ onConfirm, onCancel }) => React.ReactNode
+ * @param {Object} options.modalProps - Additional props to pass to Modal component
+ * @param {Object} options.buttonProps - Props for the confirm button
+ * @param {Object} options.cancelButtonProps - Props for the cancel button
+ * @returns {Promise<boolean|any>} - Resolves with true/false or custom value from renderFooter
+ */
+exports.ConfirmModal = ConfirmModalComponent;
+const confirm = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    title = 'Confirm',
+    message = '',
+    content = null,
+    confirmText = 'Confirm',
+    cancelText = 'Cancel',
+    showCancel = true,
+    showRedBar = true,
+    lineColor,
+    barColor,
+    renderFooter = null,
+    modalProps = {},
+    buttonProps = {},
+    cancelButtonProps = {}
+  } = options;
+  return new Promise(resolve => {
+    // Create container if it doesn't exist
+    if (!confirmContainer) {
+      confirmContainer = document.createElement('div');
+      confirmContainer.id = 'confirm-modal-root';
+      document.body.appendChild(confirmContainer);
+      confirmRoot = (0, _client.createRoot)(confirmContainer);
+    }
+    let isResolved = false;
+    const handleConfirm = value => {
+      if (!isResolved) {
+        isResolved = true;
+        resolve(value);
+        // Render closed state to trigger animation
+        renderModal(false);
+        // Cleanup after animation
+        setTimeout(() => {
+          renderModal(null);
+        }, 350);
+      }
+    };
+    const handleCancel = () => {
+      if (!isResolved) {
+        isResolved = true;
+        resolve(false);
+        renderModal(false);
+        setTimeout(() => {
+          renderModal(null);
+        }, 350);
+      }
+    };
+    const handleClose = () => {
+      if (!isResolved) {
+        handleCancel();
+      }
+    };
+    const renderModal = isOpen => {
+      if (isOpen === null) {
+        // Cleanup
+        confirmRoot.render(null);
+        return;
+      }
+      confirmRoot.render(/*#__PURE__*/_react.default.createElement(ConfirmModalComponent, {
+        isOpen: isOpen,
+        onClose: handleClose,
+        onConfirm: handleConfirm,
+        onCancel: handleCancel,
+        title: title,
+        message: message,
+        content: content,
+        confirmText: confirmText,
+        cancelText: cancelText,
+        showCancel: showCancel,
+        showRedBar: showRedBar,
+        lineColor: lineColor,
+        barColor: barColor,
+        renderFooter: renderFooter,
+        modalProps: modalProps,
+        buttonProps: buttonProps,
+        cancelButtonProps: cancelButtonProps
+      }));
+    };
+
+    // Render open modal
+    renderModal(true);
+  });
+};
+
+// Also export the component for controlled usage if needed
+exports.confirm = confirm;
+var _default = exports.default = confirm;

package/dist/components/ConfirmModal/ConfirmModal.styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RedBar = exports.ContainerWithLine = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _Text = _interopRequireDefault(require("../Text/Text.styles"));
+var _templateObject;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+const ContainerWithLine = exports.ContainerWithLine = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "ConfirmModalstyles__ContainerWithLine",
+  componentId: "sc-u85j89-0"
+})(["position:relative;padding-left:48px;&::before{content:'';width:11px;height:", "px;background:", ";position:absolute;left:0;top:6px;}"], _ref => {
+  let {
+    height
+  } = _ref;
+  return height ? height - 15 : 50;
+}, props => props.lineColor || _colors.default.blue);
+const RedBar = exports.RedBar = _styledComponents.default.div.withConfig({
+  displayName: "ConfirmModalstyles__RedBar",
+  componentId: "sc-u85j89-1"
+})(["background:", ";bottom:0;height:20%;position:absolute;right:0;width:50%;max-height:85px;max-width:400px;", " @media (max-width:767px){display:none;}"], props => props.barColor || _colors.default.orangishRed, _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: block;\n  "]))));

package/dist/components/CryptoAddress/CryptoAddress.js

@@ -43,7 +43,8 @@ const CryptoAddress = _ref => {
     wrapperStyle,
     bodyStyle,
     containerStyle,
-    dataValueStyle
+    dataValueStyle,
+    valueChildMarginLeft
   } = _ref;
   const [copiedAddressToClipboard, setCopiedAddressToClipboard] = (0, _react.useState)(false);
   return /*#__PURE__*/_react.default.createElement(_CryptoAddress.Container, {
@@ -88,7 +89,8 @@ const CryptoAddress = _ref => {
     style: dataBoxStyle
   }, data.value && /*#__PURE__*/_react.default.createElement(_CryptoAddress.Value, {
     fontSize: fontSize,
-    style: dataValueStyle
+    style: dataValueStyle,
+    childMarginLeft: valueChildMarginLeft
   }, data.unit && "".concat(data.unit, " "), data.shortAddress ? /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
     position: "top",
     title: data.value,
@@ -105,7 +107,9 @@ const CryptoAddress = _ref => {
     }
   }, '= ', data.eqUnit && "".concat(data.eqUnit, " "), data.eqValue)), /*#__PURE__*/_react.default.createElement(_CryptoAddress.InfoBox, {
     style: infoBoxStyle
-  }, /*#__PURE__*/_react.default.createElement(_CryptoAddress.Value, null, info.unit && /*#__PURE__*/_react.default.createElement("strong", null, info.unit), info.value), info.eqValue && /*#__PURE__*/_react.default.createElement(_CryptoAddress.Equal, {
+  }, /*#__PURE__*/_react.default.createElement(_CryptoAddress.Value, {
+    childMarginLeft: valueChildMarginLeft
+  }, info.unit && /*#__PURE__*/_react.default.createElement("strong", null, info.unit), info.value), info.eqValue && /*#__PURE__*/_react.default.createElement(_CryptoAddress.Equal, {
     fontSize: eqValueFontSize,
     style: eqValueStyle
   }, info.noEqualsToSign ? ' ' : '= ', info.eqUnit && /*#__PURE__*/_react.default.createElement("strong", null, info.eqUnit), " ".concat(info.eqValue)))), sideOptions && /*#__PURE__*/_react.default.createElement(_CryptoAddress.OptionsWrapper, null, sideOptions)))));
@@ -149,7 +153,9 @@ CryptoAddress.propTypes = {
   headStyle: _propTypes.default.object,
   infoBoxStyle: _propTypes.default.object,
   wrapperStyle: _propTypes.default.object,
-  dataValueStyle: _propTypes.default.object
+  dataValueStyle: _propTypes.default.object,
+  /** Margin-left for child divs inside Value (default: '30px') */
+  valueChildMarginLeft: _propTypes.default.string
 };
 //address not required in IIS, instead wrapping {address &&( .. now doing both which is redundant
 

package/dist/components/CryptoAddress/CryptoAddress.styles.js

@@ -89,7 +89,7 @@ const InfoBox = exports.InfoBox = _styledComponents.default.div.withConfig({
 const Value = exports.Value = _styledComponents.default.div.withConfig({
   displayName: "CryptoAddressstyles__Value",
   componentId: "sc-1wjvdgu-12"
-})(["position:relative;font-weight:300;font-size:22px;font-size:", "px;line-height:28px;letter-spacing:0.4px;strong{font-weight:normal;&:after{content:' ';}}& > div{display:inline-block;margin-left:30px;& svg{max-width:16px;max-height:16px;}}"], props => props.fontSize);
+})(["position:relative;font-weight:300;font-size:22px;font-size:", "px;line-height:28px;letter-spacing:0.4px;strong{font-weight:normal;&:after{content:' ';}}& > div{display:inline-block;margin-left:", ";& svg{max-width:16px;max-height:16px;}}"], props => props.fontSize, props => props.childMarginLeft !== undefined ? props.childMarginLeft : '30px');
 const Equal = exports.Equal = _styledComponents.default.div.withConfig({
   displayName: "CryptoAddressstyles__Equal",
   componentId: "sc-1wjvdgu-13"

package/dist/components/Footer/FooterLayout.js

@@ -10,7 +10,7 @@ var _FooterMenu = _interopRequireDefault(require("./FooterMenu"));
 var _Newsletter = _interopRequireDefault(require("../Newsletter/Newsletter"));
 var _Footer = _interopRequireDefault(require("./Footer"));
 var _globalVariables = require("../../constants/globalVariables");
-const _excluded = ["withNewsLetter", "withFooterMenu", "color", "jobOpeningsNumber", "lemonWayLogo", "dropdownCollapsed"];
+const _excluded = ["withNewsLetter", "withFooterMenu", "color", "jobOpeningsNumber", "lemonWayLogo", "dropdownCollapsed", "footnotes", "footnotesTitle"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -22,13 +22,17 @@ function FooterLayout(_ref) {
       color = 'red',
       jobOpeningsNumber = 0,
       lemonWayLogo,
-      dropdownCollapsed
+      dropdownCollapsed,
+      footnotes,
+      footnotesTitle
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, withFooterMenu && /*#__PURE__*/_react.default.createElement(_FooterMenu.default, {
     groups: footerGroups,
     jobOpeningsNumber: jobOpeningsNumber,
-    dropdownCollapsed: dropdownCollapsed
+    dropdownCollapsed: dropdownCollapsed,
+    footnotes: footnotes,
+    footnotesTitle: footnotesTitle
   }), withNewsLetter && /*#__PURE__*/_react.default.createElement(_Newsletter.default, null), /*#__PURE__*/_react.default.createElement(_Footer.default, _extends({
     color: color,
     lemonwayLogo: lemonWayLogo
@@ -40,7 +44,12 @@ FooterLayout.propTypes = {
   color: _propTypes.default.oneOf(['primary', 'red']),
   jobOpeningsNumber: _propTypes.default.number,
   lemonwayLogo: _propTypes.default.string,
-  dropdownCollapsed: _propTypes.default.bool
+  dropdownCollapsed: _propTypes.default.bool,
+  footnotesTitle: _propTypes.default.string,
+  footnotes: _propTypes.default.arrayOf(_propTypes.default.shape({
+    number: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    description: _propTypes.default.string
+  }))
 };
 var _default = exports.default = FooterLayout;
 const footerGroups = exports.footerGroups = [{

package/dist/components/Footer/FooterMenu.js

@@ -78,9 +78,12 @@ const FooterMenu = _ref2 => {
   let {
     groups,
     jobOpeningsNumber = 0,
-    dropdownCollapsed
+    dropdownCollapsed,
+    footnotes,
+    footnotesTitle = 'Disclosures'
   } = _ref2;
   const isMobile = (0, _customHooks.useMobileView)(_rwd.sizes.MLarge);
+  const hasFootnotes = Array.isArray(footnotes) && footnotes.length > 0;
 
   // "New to STOKR" needs to be open by default
   const [activeGroups, setactiveGroups] = _react.default.useState(() => {
@@ -137,10 +140,23 @@ const FooterMenu = _ref2 => {
     style: {
       marginLeft: '4px'
     }
-  }, jobOpeningsNumber))))))))));
+  }, jobOpeningsNumber))))))))), hasFootnotes && /*#__PURE__*/_react.default.createElement(_FooterMenu.Footnotes, null, /*#__PURE__*/_react.default.createElement(_FooterMenu.FootnotesText, null, footnotesTitle), footnotes.map((note, index) => {
+    var _note$number;
+    return /*#__PURE__*/_react.default.createElement(_FooterMenu.FootnotesItem, {
+      key: "".concat(note.number || index, "-").concat(note.description || 'note')
+    }, /*#__PURE__*/_react.default.createElement(_FooterMenu.FootnotesText, {
+      isNumber: true
+    }, (_note$number = note.number) !== null && _note$number !== void 0 ? _note$number : index + 1), /*#__PURE__*/_react.default.createElement(_FooterMenu.FootnotesText, null, note.description));
+  })));
 };
 FooterMenu.propTypes = {
   groups: _propTypes.default.arrayOf(Object).isRequired,
-  jobOpeningsNumber: _propTypes.default.number
+  jobOpeningsNumber: _propTypes.default.number,
+  dropdownCollapsed: _propTypes.default.bool,
+  footnotesTitle: _propTypes.default.string,
+  footnotes: _propTypes.default.arrayOf(_propTypes.default.shape({
+    number: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    description: _propTypes.default.string
+  }))
 };
 var _default = exports.default = FooterMenu;

package/dist/components/Footer/FooterMenu.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleContainer = exports.Title = exports.SocialLink = exports.Link = exports.Items = exports.Item = exports.HiringTotalNumber = exports.Groups = exports.Group = exports.Container = exports.ArrowDown = void 0;
+exports.TitleContainer = exports.Title = exports.SocialLink = exports.Link = exports.Items = exports.Item = exports.HiringTotalNumber = exports.Groups = exports.Group = exports.FootnotesText = exports.FootnotesItem = exports.Footnotes = exports.Container = exports.ArrowDown = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _rwd = _interopRequireDefault(require("../../styles/rwd"));
@@ -54,4 +54,16 @@ const ArrowDown = exports.ArrowDown = _styledComponents.default.i.attrs({
 }).withConfig({
   displayName: "FooterMenustyles__ArrowDown",
   componentId: "sc-40ddqf-10"
-})(["&&&{top:50%;right:0;transition:0.3s transform;transform:rotate(0);text-align:center;font-size:16px;line-height:16px;height:16px;margin-top:-8px;", "}", ""], props => props.isOpened && "\n      transform: rotate(180deg);\n    ", props => !props.displayAlways && "\n  @media screen and (min-width: 992px) {\n    display: none;\n  }\n  ");
+})(["&&&{top:50%;right:0;transition:0.3s transform;transform:rotate(0);text-align:center;font-size:16px;line-height:16px;height:16px;margin-top:-8px;", "}", ""], props => props.isOpened && "\n      transform: rotate(180deg);\n    ", props => !props.displayAlways && "\n  @media screen and (min-width: 992px) {\n    display: none;\n  }\n  ");
+const Footnotes = exports.Footnotes = _styledComponents.default.div.withConfig({
+  displayName: "FooterMenustyles__Footnotes",
+  componentId: "sc-40ddqf-11"
+})(["padding:0px 48px 40px;display:flex;flex-direction:column;gap:6px;@media screen and (min-width:992px){padding:0px 65px 48px;}"]);
+const FootnotesText = exports.FootnotesText = _styledComponents.default.div.withConfig({
+  displayName: "FooterMenustyles__FootnotesText",
+  componentId: "sc-40ddqf-12"
+})(["font-family:'Open Sans';font-weight:300;font-size:11px;line-height:16px;letter-spacing:0.4px;color:", ";", ""], _theme.default.cBlack, props => props.isNumber && "\n      font-size: 9px;\n\n  ");
+const FootnotesItem = exports.FootnotesItem = _styledComponents.default.div.withConfig({
+  displayName: "FooterMenustyles__FootnotesItem",
+  componentId: "sc-40ddqf-13"
+})(["display:flex;gap:6px;"]);

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

@@ -23,7 +23,7 @@ const StyledSubMenu = exports.StyledSubMenu = _styledComponents.default.div.with
 const StyledHeader = exports.StyledHeader = _styledComponents.default.header.withConfig({
   displayName: "Headerstyles__StyledHeader",
   componentId: "sc-hifrdy-1"
-})(["z-index:1000;position:relative;color:", ";border-bottom:1px solid rgb(237,237,237);", ""], _colors.default.black, _rwd.default.MLarge(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: ", "px;\n    background-color: ", ";\n    box-shadow: inset 0 -1px 0 0 ", ";\n\n    ", "\n  "])), _spacing.default.headerHeight, _colors.default.white, _colors.default.lightGrey, props => props.noFixedPosition && "\n      position:initial;\n    "));
+})(["z-index:1000;position:relative;color:", ";border-bottom:1px solid rgb(237,237,237);", ""], _colors.default.black, _rwd.default.MLarge(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: ", "px;\n    background-color: ", ";\n    box-shadow: inset 0 -1px 0 0 ", ";\n\n    /* Compensate for scrollbar when modal is open */\n    padding-right: var(--scrollbar-compensation, 0px);\n\n    ", "\n  "])), _spacing.default.headerHeight, _colors.default.white, _colors.default.lightGrey, props => props.noFixedPosition && "\n      position:initial;\n    "));
 const HeaderInner = exports.HeaderInner = _styledComponents.default.div.withConfig({
   displayName: "Headerstyles__HeaderInner",
   componentId: "sc-hifrdy-2"