@stokr/components-library 2.3.61 → 2.3.63-beta.1

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

@@ -214,7 +214,15 @@ const LoginWithOTP = _ref => {
         handleSetPopupSuccess('forgot', "We sent a message to ".concat(email, " (you might need to check your junk or spam folder) \u2014 tap the link inside to create a new password."));
         setIsActionLoading(undefined);
       } catch (error) {
-        handleSetPopupError('forgot', 'This email is not registered.');
+        var _error$response;
+        console.log(error);
+        let errorMessage = "Too many requests. Please try again later.";
+        console.log(error === null || error === void 0 ? void 0 : error.response);
+        if ((error === null || error === void 0 || (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status) === 429) {
+          var _error$response$data;
+          errorMessage = (_error$response$data = error.response.data) === null || _error$response$data === void 0 ? void 0 : _error$response$data.message;
+        }
+        handleSetPopupError('forgot', errorMessage);
         setIsActionLoading(undefined);
       }
     }

package/dist/components/Chips/Chip.js

@@ -8,7 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ChipStyles = require("./Chip.styles.js");
 var _InfoIcon = _interopRequireDefault(require("../InfoIcon/InfoIcon.js"));
-const _excluded = ["children", "isActive", "onClick", "tooltip"];
+const _excluded = ["children", "isActive", "onClick", "tooltip", "tooltipProps"];
 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; }
@@ -18,19 +18,20 @@ const Chip = _ref => {
       children,
       isActive,
       onClick,
-      tooltip
+      tooltip,
+      tooltipProps
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_ChipStyles.StyledChip, _extends({
     onClick: onClick,
     isActive: isActive
-  }, props), /*#__PURE__*/_react.default.createElement(_ChipStyles.ChipText, null, children), tooltip && /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
+  }, 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
-  }, /*#__PURE__*/_react.default.createElement(_ChipStyles.TooltipChipIcon, null)));
+  }, tooltipProps), /*#__PURE__*/_react.default.createElement(_ChipStyles.TooltipChipIcon, null)));
 };
 exports.Chip = Chip;
 Chip.propTypes = {

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.WithTooltip = exports.Default = exports.Active = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Chip = _interopRequireDefault(require("./Chip"));
+var _global = _interopRequireDefault(require("../../styles/global"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -16,7 +17,7 @@ var _default = exports.default = {
   title: 'Components/Chip',
   component: _Chip.default
 };
-const Template = args => /*#__PURE__*/_react.default.createElement(_Chip.default, args);
+const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_Chip.default, args));
 const Default = exports.Default = Template.bind({});
 Default.args = {
   children: 'Default Chip',

package/dist/components/Chips/ChipWrapper.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Chip = _interopRequireDefault(require("./Chip"));
 var _Chip2 = require("./Chip.styles");
 var _TabsNav = require("../TabsNav/TabsNav.styles");
-const _excluded = ["chips", "onActiveChipChange", "customWrapperStyle"];
+const _excluded = ["chips", "onActiveChipChange", "customWrapperStyle", "tooltipProps", "scrollStyles"];
 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 _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); }
@@ -19,7 +19,9 @@ const ChipsWrapper = _ref => {
   let {
       chips,
       onActiveChipChange = () => {},
-      customWrapperStyle
+      customWrapperStyle,
+      tooltipProps,
+      scrollStyles
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const [activeChip, setActiveChip] = (0, _react.useState)(null);
@@ -34,13 +36,16 @@ const ChipsWrapper = _ref => {
     setActiveChip(index);
     onActiveChipChange(index); // Optionally notify parent about the change
   };
-  return /*#__PURE__*/_react.default.createElement(_TabsNav.Scroll, null, /*#__PURE__*/_react.default.createElement(_Chip2.Wrapper, {
+  return /*#__PURE__*/_react.default.createElement(_TabsNav.Scroll, {
+    style: scrollStyles
+  }, /*#__PURE__*/_react.default.createElement(_Chip2.Wrapper, {
     customWrapperStyle: customWrapperStyle
   }, chips.map((chip, index) => /*#__PURE__*/_react.default.createElement(_Chip.default, _extends({
     key: index,
     isActive: activeChip === index,
     onClick: () => handleChipClick(index),
-    tooltip: chip.tooltip
+    tooltip: chip.tooltip,
+    tooltipProps: tooltipProps
   }, props), chip.label))));
 };
 exports.ChipsWrapper = ChipsWrapper;

package/dist/components/Chips/ChipsWrapper.stories.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Default = exports.CustomStyle = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ChipWrapper = _interopRequireDefault(require("./ChipWrapper"));
+var _global = _interopRequireDefault(require("../../styles/global"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -16,7 +17,7 @@ var _default = exports.default = {
   title: 'Components/ChipsWrapper',
   component: _ChipWrapper.default
 };
-const Template = args => /*#__PURE__*/_react.default.createElement(_ChipWrapper.default, args);
+const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ChipWrapper.default, args));
 const Default = exports.Default = Template.bind({});
 Default.args = {
   chips: [{
@@ -31,13 +32,16 @@ Default.args = {
     label: 'Chip 3',
     tooltip: 'Tooltip 3',
     isActive: false
-  }],
-  onActiveChipChange: index => alert("Active chip changed to: ".concat(index))
+  }]
+  // onActiveChipChange: (index) => alert(`Active chip changed to: ${index}`),
 };
 const CustomStyle = exports.CustomStyle = Template.bind({});
 CustomStyle.args = _objectSpread(_objectSpread({}, Default.args), {}, {
   customWrapperStyle: {
     backgroundColor: '#f0f0f0',
     padding: '10px'
+  },
+  tooltipProps: {
+    followCursor: true
   }
 });

package/dist/components/InfoIcon/InfoIcon.js

@@ -4,12 +4,20 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.InfoIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactTippy = require("react-tippy");
+var _reactTooltip = require("react-tooltip");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _InfoIcon = require("./InfoIcon.styles");
-const _excluded = ["title", "html", "position", "noMargin", "noMarginLeft", "noMarginRight", "noIcon", "disabled", "fullWidth", "containerStyle"];
+const _excluded = ["title", "html", "position", "noMargin", "noMarginLeft", "noMarginRight", "noIcon", "disabled", "fullWidth", "containerStyle", "customStyles", "arrowColor"];
 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 _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 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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 const InfoIcon = _ref => {
@@ -23,26 +31,50 @@ const InfoIcon = _ref => {
       noIcon,
       disabled,
       fullWidth,
-      containerStyle
+      containerStyle,
+      customStyles,
+      arrowColor
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_InfoIcon.Container, {
+  // Generate stable ID for tooltip (once per component instance)
+  const tooltipIdRef = (0, _react.useRef)("info-icon-".concat(Math.random().toString(36).substr(2, 9)));
+  const tooltipId = tooltipIdRef.current;
+  const content = html || title;
+  const styles = _objectSpread({
+    borderRadius: '10px',
+    fontSize: '13px',
+    lineHeight: '20px',
+    letterSpacing: '0.4px',
+    padding: '20px',
+    wordBreak: 'break-word',
+    boxShadow: ['0 0 12px 8px rgba(0, 0, 0, 0.03)', '0 0 6px 3px rgba(0, 0, 0, 0.02)'],
+    fontWeight: 'normal',
+    width: 'auto'
+  }, customStyles);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.Container, {
     noMargin: noMargin,
     noMarginLeft: noMarginLeft,
     noMarginRight: noMarginRight,
     fullWidth: fullWidth,
     style: containerStyle
-  }, /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
-    position: position,
-    title: title,
-    html: html,
-    theme: "light",
-    arrow: true,
-    duration: 200
-    //  onRequestClose={() => console.log('request to close tooltip')}
-    ,
-    disabled: disabled
-  }, noIcon ? props.children : /*#__PURE__*/_react.default.createElement(_InfoIcon.Icon, null)));
+  }, /*#__PURE__*/_react.default.createElement("span", _extends({
+    "data-tooltip-id": tooltipId
+  }, html ? {
+    'data-tooltip-html': html
+  } : {
+    'data-tooltip-content': title
+  }), noIcon ? props.children : /*#__PURE__*/_react.default.createElement(_InfoIcon.Icon, null))), !disabled && content && /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, _extends({
+    id: tooltipId,
+    place: position,
+    variant: "light",
+    arrowColor: arrowColor || _colors.default.blue,
+    delayShow: 100,
+    delayHide: 100,
+    offset: 15,
+    opacity: 1,
+    arrowSize: 10,
+    style: styles
+  }, props)));
 };
 exports.InfoIcon = InfoIcon;
 InfoIcon.propTypes = {
@@ -51,7 +83,8 @@ InfoIcon.propTypes = {
   position: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),
   noMargin: _propTypes.default.bool,
   noMarginLeft: _propTypes.default.bool,
-  noMarginRight: _propTypes.default.bool
+  noMarginRight: _propTypes.default.bool,
+  arrowColor: _propTypes.default.string
 };
 InfoIcon.defaultProps = {
   title: null,

package/dist/components/InfoIcon/InfoIcon.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.InfoIconTop = exports.InfoIconBottom = void 0;
+exports.default = exports.WithHTML = exports.RedArrow = exports.Positions = exports.NoMargins = exports.MultipleTooltips = exports.LongText = exports.InContext = exports.Disabled = exports.Default = exports.CustomChildren = exports.ArrowColorComparison = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _InfoIcon = require("./InfoIcon");
 var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
@@ -15,34 +15,285 @@ var _default = exports.default = {
   argTypes: {
     title: {
       type: 'string',
-      defaultValue: 'default is null/ add some title'
+      description: 'Text content to display in the tooltip',
+      control: 'text'
     },
     html: {
-      type: 'node',
-      defaultValue: 'default is null/ add some html'
+      type: 'string',
+      description: 'HTML content to display in the tooltip (takes precedence over title)',
+      control: 'text'
     },
     position: {
-      type: 'string',
-      defaultValue: 'bottom'
+      type: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+      description: 'Position of the tooltip relative to the icon',
+      control: 'select'
     },
     noMargin: {
       type: 'boolean',
-      defaultValue: false
+      description: 'Remove all margins from the container',
+      control: 'boolean'
     },
     noMarginLeft: {
       type: 'boolean',
-      defaultValue: false
+      description: 'Remove left margin from the container',
+      control: 'boolean'
     },
     noMarginRight: {
       type: 'boolean',
-      defaultValue: false
+      description: 'Remove right margin from the container',
+      control: 'boolean'
+    },
+    noIcon: {
+      type: 'boolean',
+      description: 'Hide the info icon and show children instead',
+      control: 'boolean'
+    },
+    disabled: {
+      type: 'boolean',
+      description: 'Disable the tooltip',
+      control: 'boolean'
+    },
+    fullWidth: {
+      type: 'boolean',
+      description: 'Make the container full width',
+      control: 'boolean'
     }
+  },
+  decorators: [Story => /*#__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(Story, null)))]
+}; // Default example
+const Default = exports.Default = {
+  args: {
+    title: 'This is a helpful tooltip with some information',
+    position: 'bottom'
   }
 };
-const Template = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, args)));
-const InfoIconBottom = exports.InfoIconBottom = Template.bind({});
-InfoIconBottom.args = {};
-const InfoIconTop = exports.InfoIconTop = Template.bind({});
-InfoIconTop.args = {
-  position: 'top'
-};
+
+// All positions
+const Positions = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    gap: '40px',
+    flexWrap: 'wrap',
+    padding: '60px'
+  }
+}, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    textAlign: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  position: "top",
+  title: "Tooltip on top"
+}), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginTop: '10px',
+    fontSize: '12px'
+  }
+}, "Top")), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    textAlign: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  position: "bottom",
+  title: "Tooltip on bottom"
+}), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginTop: '10px',
+    fontSize: '12px'
+  }
+}, "Bottom")), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    textAlign: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  position: "left",
+  title: "Tooltip on left"
+}), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginTop: '10px',
+    fontSize: '12px'
+  }
+}, "Left")), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    textAlign: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  position: "right",
+  title: "Tooltip on right"
+}), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginTop: '10px',
+    fontSize: '12px'
+  }
+}, "Right")));
+
+// With HTML content
+exports.Positions = Positions;
+const WithHTML = exports.WithHTML = {
+  args: {
+    html: '<strong>Bold text</strong> and <em>italic text</em><br/>With a line break',
+    position: 'bottom'
+  }
+};
+
+// With long text
+const LongText = exports.LongText = {
+  args: {
+    title: 'This is a very long tooltip text that demonstrates how the tooltip handles longer content. It should wrap nicely and maintain good readability.',
+    position: 'bottom'
+  }
+};
+
+// No margins
+const NoMargins = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    gap: '20px',
+    alignItems: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement("span", null, "Text before"), /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "No margin",
+  noMargin: true
+}), /*#__PURE__*/_react.default.createElement("span", null, "Text after"));
+
+// Custom children (no icon)
+exports.NoMargins = NoMargins;
+const CustomChildren = exports.CustomChildren = {
+  args: {
+    title: 'Custom content instead of icon',
+    noIcon: true,
+    children: /*#__PURE__*/_react.default.createElement("span", {
+      style: {
+        textDecoration: 'underline'
+      }
+    }, "Hover me")
+  }
+};
+
+// Disabled
+const Disabled = exports.Disabled = {
+  args: {
+    title: 'This tooltip is disabled',
+    disabled: true
+  }
+};
+
+// In context example
+const InContext = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '40px',
+    maxWidth: '500px'
+  }
+}, /*#__PURE__*/_react.default.createElement("h3", {
+  style: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '8px'
+  }
+}, "Investment Amount", /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "Enter the amount you wish to invest in this project. Minimum investment is \u20AC1,000.",
+  position: "top"
+})), /*#__PURE__*/_react.default.createElement("input", {
+  type: "number",
+  placeholder: "Enter amount",
+  style: {
+    marginTop: '10px',
+    padding: '8px',
+    width: '100%',
+    border: '1px solid #ccc',
+    borderRadius: '4px'
+  }
+}), /*#__PURE__*/_react.default.createElement("p", {
+  style: {
+    marginTop: '20px',
+    fontSize: '14px',
+    color: '#666'
+  }
+}, "Need help?", ' ', /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "Contact our support team for assistance",
+  noMarginLeft: true,
+  noMarginRight: true
+})));
+
+// Multiple tooltips
+exports.InContext = InContext;
+const MultipleTooltips = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '40px'
+  }
+}, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginBottom: '20px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "First tooltip",
+  position: "top"
+}), /*#__PURE__*/_react.default.createElement("span", {
+  style: {
+    marginLeft: '10px'
+  }
+}, "First example")), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginBottom: '20px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "Second tooltip",
+  position: "bottom"
+}), /*#__PURE__*/_react.default.createElement("span", {
+  style: {
+    marginLeft: '10px'
+  }
+}, "Second example")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  html: "<strong>HTML</strong> tooltip with <em>formatting</em>",
+  position: "right"
+}), /*#__PURE__*/_react.default.createElement("span", {
+  style: {
+    marginLeft: '10px'
+  }
+}, "Third example with HTML")));
+
+// Custom arrow color (red)
+exports.MultipleTooltips = MultipleTooltips;
+const RedArrow = exports.RedArrow = {
+  args: {
+    title: 'This tooltip has a red arrow instead of the default blue',
+    position: 'bottom',
+    arrowColor: '#ee220d' // Using red from colors
+  }
+};
+
+// Comparison: Blue vs Red arrow
+const ArrowColorComparison = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '40px',
+    display: 'flex',
+    gap: '40px',
+    alignItems: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    textAlign: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "Default blue arrow",
+  position: "bottom"
+}), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginTop: '10px',
+    fontSize: '12px'
+  }
+}, "Blue (default)")), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    textAlign: 'center'
+  }
+}, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+  title: "Custom red arrow",
+  position: "bottom",
+  arrowColor: "#ee220d"
+}), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    marginTop: '10px',
+    fontSize: '12px'
+  }
+}, "Red (custom)")));
+exports.ArrowColorComparison = ArrowColorComparison;

package/dist/components/headerHo/HeaderHo.js

@@ -240,7 +240,6 @@ class HeaderHoClass extends _react.Component {
     } = this.context;
     if (!mobileMenuOpen) {
       if (isOpenCurrent) {
-        console.log('🚀 ~ componentDidUpdate ~ isOpenCurrent:', isOpenCurrent);
         document.body.style.overflow = 'hidden';
       } else if (isOpenPrev) {
         document.body.style.overflow = 'unset';
@@ -575,7 +574,6 @@ class HeaderHoClass extends _react.Component {
           console.log('isResettingExpiredToken: ', isResettingExpiredToken);
           payload.ventureInvite = true;
         }
-        console.log('payload obj: ', payload);
         try {
           await (0, _auth.default)('forgotPass', payload);
           this.setPopupSuccess('forgot', "We sent a message to ".concat(email, " (you might need to check your junk or spam folder) \u2014 tap the link inside to create a new password."));
@@ -584,7 +582,8 @@ class HeaderHoClass extends _react.Component {
           var _error$response2;
           console.log(error);
           let errorMessage = "Too many requests. Please try again later.";
-          if ((error === null || error === void 0 || (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.status) === 429) {
+          console.log(error === null || error === void 0 ? void 0 : error.response);
+          if ((error === null || error === void 0 || (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.status) === 429 || error !== null && error !== void 0 && error.includes('429')) {
             var _error$response$data2;
             errorMessage = (_error$response$data2 = error.response.data) === null || _error$response$data2 === void 0 ? void 0 : _error$response$data2.message;
           }

package/dist/utils/check-todo-status.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.checkTodoStatus = void 0;
 var _checklistGenerator = require("./checklistGenerator");
 const checkTodoStatus = user => {
-  if (user.user_type === 'investor' || user.user_type === 'investor-entity') {
+  if ((user === null || user === void 0 ? void 0 : user.user_type) === 'investor' || (user === null || user === void 0 ? void 0 : user.user_type) === 'investor-entity') {
     const coreTasks = (0, _checklistGenerator.generateCoreChecklistTasks)(user);
     return coreTasks.remainingCount;
   } else return 0;

package/package.json

@@ -1,134 +1,135 @@
-{
-  "name": "@stokr/components-library",
-  "version": "2.3.61",
-  "description": "STOKR - Components Library",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "files": [
-    "dist",
-    "README.md"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "http://46.101.229.186:3000/stokr/components-library"
-  },
-  "author": "Bilal Hodzic <bilal@stokr.io>",
-  "license": "MIT",
-  "scripts": {
-    "build": "react-scripts build",
-    "build-storybook": "storybook build",
-    "build-storybook-docs": "storybook build -s public --docs",
-    "build:dist": "cross-env BABEL_ENV=production babel src -d dist",
-    "test": "react-scripts test",
-    "prepare": "npm run build",
-    "storybook": "storybook dev -p 6006",
-    "start": "npm run storybook",
-    "chromatic": "CHROMATIC_APP_CODE=7kzdke5umep chromatic",
-    "release": "auto shipit",
-    "pub": "rm -rf ./dist && npm publish --access public",
-    "start:script": "react-scripts start",
-    "serve": "npx http-server ./storybook-static -p 9009"
-  },
-  "dependencies": {
-    "ajv": "^8.17.1",
-    "axios": "^0.30.2",
-    "bignumber.js": "^9.1.1",
-    "cross-env": "^10.1.0",
-    "d3": "^7.8.3",
-    "date-fns": "^4.1.0",
-    "firebase": "^12.4.0",
-    "formik": "^2.2.9",
-    "formik-persist": "^1.1.0",
-    "html-react-parser": "^5.0.6",
-    "http-server": "^14.1.1",
-    "js-cookie": "^3.0.5",
-    "mobile-detect": "^1.4.5",
-    "moment": "^2.30.1",
-    "moment-timezone": "^0.6.0",
-    "prop-types": "^15.8.1",
-    "qrcode.react": "^4.2.0",
-    "react": "^18.3.1",
-    "react-collapse": "^5.1.1",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-countup": "^6.4.1",
-    "react-custom-scrollbars-2": "^4.5.0",
-    "react-day-picker": "^9.11.1",
-    "react-device-detect": "^2.2.3",
-    "react-dom": "^18.3.1",
-    "react-ga4": "^2.1.0",
-    "react-helmet": "^6.1.0",
-    "react-otp-input": "^3.1.0",
-    "react-portal": "^4.2.2",
-    "react-qr-code": "^2.0.12",
-    "react-range": "^1.8.14",
-    "react-router-dom": "^6.8.1",
-    "react-scripts": "5.0.1",
-    "react-select": "^5.7.0",
-    "react-slick": "^0.31.0",
-    "react-table": "^7.8.0",
-    "react-tippy": "^1.4.0",
-    "react-transition-group": "^4.4.5",
-    "react-visibility-sensor": "^5.1.1",
-    "scroll-to-element": "^2.0.3",
-    "semantic-ui-react": "^2.1.4",
-    "slick-carousel": "^1.8.1",
-    "styled-components": "^6.0.7",
-    "yup": "^1.0.0"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.12",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@chromatic-com/storybook": "^4.1.1",
-    "@storybook/addon-docs": "^9.1.15",
-    "@storybook/addon-links": "^9.1.15",
-    "@storybook/preset-create-react-app": "^9.1.15",
-    "@storybook/react-webpack5": "^9.1.15",
-    "babel-plugin-styled-components": "^2.1.4",
-    "prettier": "^3.0.3",
-    "storybook": "^9.1.15",
-    "styled-components.macro": "^1.0.0"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "browser": {
-    "[module-name]": false
-  },
-  "bugs": {
-    "url": "https://github.com/stokr-io/components-library/issues"
-  },
-  "homepage": "https://github.com/stokr-io/components-library#readme",
-  "keywords": [
-    "stokr",
-    "components-library",
-    "story-book"
-  ]
-}
+{
+  "name": "@stokr/components-library",
+  "version": "2.3.63-beta.1",
+  "description": "STOKR - Components Library",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "http://46.101.229.186:3000/stokr/components-library"
+  },
+  "author": "Bilal Hodzic <bilal@stokr.io>",
+  "license": "MIT",
+  "scripts": {
+    "build": "react-scripts build",
+    "build-storybook": "storybook build",
+    "build-storybook-docs": "storybook build -s public --docs",
+    "build:dist": "cross-env BABEL_ENV=production babel src -d dist",
+    "test": "react-scripts test",
+    "prepare": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "start": "npm run storybook",
+    "chromatic": "CHROMATIC_APP_CODE=7kzdke5umep chromatic",
+    "release": "auto shipit",
+    "pub": "rm -rf ./dist && npm publish --access public",
+    "start:script": "react-scripts start",
+    "serve": "npx http-server ./storybook-static -p 9009"
+  },
+  "dependencies": {
+    "ajv": "^8.17.1",
+    "axios": "^0.30.2",
+    "bignumber.js": "^9.1.1",
+    "cross-env": "^10.1.0",
+    "d3": "^7.8.3",
+    "date-fns": "^4.1.0",
+    "firebase": "^12.4.0",
+    "formik": "^2.2.9",
+    "formik-persist": "^1.1.0",
+    "html-react-parser": "^5.0.6",
+    "http-server": "^14.1.1",
+    "js-cookie": "^3.0.5",
+    "mobile-detect": "^1.4.5",
+    "moment": "^2.30.1",
+    "moment-timezone": "^0.6.0",
+    "prop-types": "^15.8.1",
+    "qrcode.react": "^4.2.0",
+    "react": "^18.3.1",
+    "react-collapse": "^5.1.1",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-countup": "^6.4.1",
+    "react-custom-scrollbars-2": "^4.5.0",
+    "react-day-picker": "^9.11.1",
+    "react-device-detect": "^2.2.3",
+    "react-dom": "^18.3.1",
+    "react-ga4": "^2.1.0",
+    "react-helmet": "^6.1.0",
+    "react-otp-input": "^3.1.0",
+    "react-portal": "^4.2.2",
+    "react-qr-code": "^2.0.12",
+    "react-range": "^1.8.14",
+    "react-router-dom": "^6.8.1",
+    "react-scripts": "5.0.1",
+    "react-select": "^5.7.0",
+    "react-slick": "^0.31.0",
+    "react-table": "^7.8.0",
+    "react-tippy": "^1.4.0",
+    "react-tooltip": "^5.30.0",
+    "react-transition-group": "^4.4.5",
+    "react-visibility-sensor": "^5.1.1",
+    "scroll-to-element": "^2.0.3",
+    "semantic-ui-react": "^2.1.4",
+    "slick-carousel": "^1.8.1",
+    "styled-components": "^6.0.7",
+    "yup": "^1.0.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.12",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-docs": "^9.1.15",
+    "@storybook/addon-links": "^9.1.15",
+    "@storybook/preset-create-react-app": "^9.1.15",
+    "@storybook/react-webpack5": "^9.1.15",
+    "babel-plugin-styled-components": "^2.1.4",
+    "prettier": "^3.0.3",
+    "storybook": "^9.1.15",
+    "styled-components.macro": "^1.0.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "browser": {
+    "[module-name]": false
+  },
+  "bugs": {
+    "url": "https://github.com/stokr-io/components-library/issues"
+  },
+  "homepage": "https://github.com/stokr-io/components-library#readme",
+  "keywords": [
+    "stokr",
+    "components-library",
+    "story-book"
+  ]
+}