@stokr/components-library 2.3.65-beta.1 → 2.3.65-beta.3

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

@@ -10,7 +10,6 @@ var _AuthContext = require("../../context/AuthContext");
 var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
 var _Switch = _interopRequireDefault(require("../Switch/Switch"));
 var _Text = _interopRequireDefault(require("../Text/Text.styles"));
-var _Button = _interopRequireDefault(require("../Button/Button.styles"));
 var _loginWithOtpFlow = _interopRequireDefault(require("./login-with-otp-flow"));
 var _enable2faFlow = _interopRequireDefault(require("./enable-2fa-flow"));
 var _disable2faFlow = _interopRequireDefault(require("./disable-2fa-flow"));
@@ -18,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"];
+const _excluded = ["onRequiresRecentLoginError", "open2faflow", "onLoginAgainClick", "openDisable2faflow", "title", "subtitle", "showSwitch", "customComponent"];
 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; }
@@ -33,7 +32,11 @@ const Main2FAFlow = _ref => {
       onRequiresRecentLoginError,
       open2faflow,
       onLoginAgainClick,
-      openDisable2faflow
+      openDisable2faflow,
+      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
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const {
@@ -58,6 +61,7 @@ const Main2FAFlow = _ref => {
       checkMfaEnrollment();
       generateTotp();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [user, userMfaEnrollment]);
 
   //remove succes message after 5 seconds
@@ -70,7 +74,7 @@ const Main2FAFlow = _ref => {
   }, [successMessage]);
   const generateTotp = async () => {
     try {
-      const response = await generateTotpSecret(user);
+      const response = await generateTotpSecret();
       settotpData(response);
     } catch (error) {
       if (error.code === 'auth/requires-recent-login' || error.code === 'auth/unsupported-first-factor') {
@@ -79,7 +83,7 @@ const Main2FAFlow = _ref => {
     }
   };
   const switchOpenFlow = (prevFlowId, nextFlowId) => {
-    setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, {
+    setIsFlowOpen(prev => _objectSpread(_objectSpread({}, prev), {}, {
       [prevFlowId]: false,
       [nextFlowId]: true
     }));
@@ -102,10 +106,25 @@ const Main2FAFlow = _ref => {
     });
     onRequiresRecentLoginError && onRequiresRecentLoginError();
   };
+
+  // Expose flow control functions for customComponent
+  const flowActions = {
+    openEnable2FA: () => switchOpenFlow('disable2fa', 'enable2fa'),
+    openDisable2FA: () => switchOpenFlow('enable2fa', 'disable2fa'),
+    closeFlows: () => {
+      setIsFlowOpen({
+        enable2fa: false,
+        disable2fa: false,
+        requiresRecentLogin: false
+      });
+    },
+    is2FAEnabled,
+    isFlowOpen: isFlowopen
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     alignVertically: true,
     noPaddingHorizontal: true
-  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h5", null, "SET UP YOUR LOG IN TWO FACTOR AUTHENTICATION"))), /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, "Protect your account with an additional layer of security to log in")), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h5", null, title))), /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("p", null, subtitle)), showSwitch && /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
     noPaddingHorizontal: true
   }, /*#__PURE__*/_react.default.createElement(_InfoIcon.default, {
     position: 'top',
@@ -146,7 +165,9 @@ const Main2FAFlow = _ref => {
       bottom: 0,
       left: 0
     }
-  }, /*#__PURE__*/_react.default.createElement("p", null, successMessage))), isFlowopen.enable2fa && /*#__PURE__*/_react.default.createElement(_enable2faFlow.default, {
+  }, /*#__PURE__*/_react.default.createElement("p", null, successMessage))), customComponent && (typeof customComponent === 'function' ? customComponent(flowActions) : /*#__PURE__*/_react.default.isValidElement(customComponent) ? /*#__PURE__*/_react.default.cloneElement(customComponent, {
+    flowActions
+  }) : customComponent), isFlowopen.enable2fa && /*#__PURE__*/_react.default.createElement(_enable2faFlow.default, {
     showFlow: isFlowopen.enable2fa,
     setShowFlow: value => setIsFlowOpen(_objectSpread(_objectSpread({}, isFlowopen), {}, {
       enable2fa: value

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

@@ -3,31 +3,160 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.MainFlow = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.default = exports.WithoutSwitch = exports.WithCustomComponentFunction = exports.WithCustomComponent = exports.PreOpenedEnableFlow = exports.PreOpenedDisableFlow = exports.Default = exports.CustomTitles = void 0;
+var _react = _interopRequireWildcard(require("react"));
 var _reactRouterDom = require("react-router-dom");
 var _global = _interopRequireDefault(require("../../styles/global"));
 var _mainFlow = _interopRequireDefault(require("./main-flow"));
 var _AuthContext = require("../../context/AuthContext");
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
 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); }
 var _default = exports.default = {
-  title: 'Components Library/2FA',
+  title: 'Components Library/2FA/Main2FAFlow',
   component: _mainFlow.default,
   argTypes: {
-    showFlow: {
-      type: 'boolean',
+    title: {
+      control: 'text',
+      description: 'Title text for the 2FA section'
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtitle text for the 2FA section'
+    },
+    showSwitch: {
+      control: 'boolean',
+      description: 'Show/hide the toggle switch',
       defaultValue: true
     },
-    setShowFlow: {},
-    setShowPending: {},
-    withSuccessPage: {
-      type: 'boolean',
-      defaultValue: false
+    open2faflow: {
+      control: 'boolean',
+      description: 'Open enable 2FA flow on mount'
+    },
+    openDisable2faflow: {
+      control: 'boolean',
+      description: 'Open disable 2FA flow on mount'
+    },
+    onRequiresRecentLoginError: {
+      action: 'requiresRecentLogin',
+      description: 'Callback when recent login is required'
+    },
+    onLoginAgainClick: {
+      action: 'loginAgain',
+      description: 'Callback when user clicks login again'
+    }
+  },
+  decorators: [Story => /*#__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(Story, null))))]
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_mainFlow.default, args));
+
+// Default example
+const Default = exports.Default = Template.bind({});
+Default.args = {};
+
+// With custom component as React element
+const WithCustomComponent = () => {
+  const CustomButtonGroup = _ref => {
+    var _flowActions$isFlowOp, _flowActions$isFlowOp2;
+    let {
+      flowActions
+    } = _ref;
+    if (!flowActions) return null;
+    return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, {
+      noPaddingHorizontal: true,
+      style: {
+        marginTop: '16px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: '12px',
+        flexWrap: 'wrap'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: flowActions.openEnable2FA,
+      disabled: flowActions.is2FAEnabled
+    }, "Enable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: flowActions.openDisable2FA,
+      disabled: !flowActions.is2FAEnabled,
+      secondary: true
+    }, "Disable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      onClick: flowActions.closeFlows,
+      outline: true
+    }, "Close All Flows")), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        marginTop: '12px',
+        fontSize: '12px',
+        color: '#666'
+      }
+    }, /*#__PURE__*/_react.default.createElement("p", null, "Status: ", flowActions.is2FAEnabled ? 'Enabled' : 'Disabled', /*#__PURE__*/_react.default.createElement("br", null), "Enable Flow Open: ", (_flowActions$isFlowOp = flowActions.isFlowOpen) !== null && _flowActions$isFlowOp !== void 0 && _flowActions$isFlowOp.enable2fa ? 'Yes' : 'No', /*#__PURE__*/_react.default.createElement("br", null), "Disable Flow Open:", ' ', (_flowActions$isFlowOp2 = flowActions.isFlowOpen) !== null && _flowActions$isFlowOp2 !== void 0 && _flowActions$isFlowOp2.disable2fa ? 'Yes' : 'No')));
+  };
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_mainFlow.default, {
+    customComponent: /*#__PURE__*/_react.default.createElement(CustomButtonGroup, null)
+  }));
+};
+
+// With custom component as render function
+exports.WithCustomComponent = WithCustomComponent;
+const WithCustomComponentFunction = () => {
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_mainFlow.default, {
+    customComponent: flowActions => {
+      if (!flowActions) return null;
+      return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, {
+        noPaddingHorizontal: true,
+        style: {
+          marginTop: '16px'
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          gap: '12px',
+          flexWrap: 'wrap'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: flowActions.openEnable2FA,
+        disabled: flowActions.is2FAEnabled
+      }, "Enable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: flowActions.openDisable2FA,
+        disabled: !flowActions.is2FAEnabled,
+        secondary: true
+      }, "Disable 2FA"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+        onClick: flowActions.closeFlows,
+        outline: true
+      }, "Close All Flows")), /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          marginTop: '12px',
+          fontSize: '12px',
+          color: '#666'
+        }
+      }, /*#__PURE__*/_react.default.createElement("p", null, "Status: ", flowActions.is2FAEnabled ? 'Enabled' : 'Disabled')));
     }
-  }
+  }));
 };
-const Template = args => /*#__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"))));
-const MainFlow = exports.MainFlow = Template.bind({});
-MainFlow.args = {
-  //open2faflow: true,
+
+// Without switch
+exports.WithCustomComponentFunction = WithCustomComponentFunction;
+const WithoutSwitch = exports.WithoutSwitch = Template.bind({});
+WithoutSwitch.args = {
+  showSwitch: false
+};
+
+// Custom titles
+const CustomTitles = exports.CustomTitles = Template.bind({});
+CustomTitles.args = {
+  title: 'Two-Factor Authentication',
+  subtitle: 'Add an extra layer of security to your account'
+};
+
+// Pre-opened enable flow
+const PreOpenedEnableFlow = exports.PreOpenedEnableFlow = Template.bind({});
+PreOpenedEnableFlow.args = {
+  open2faflow: true
+};
+
+// Pre-opened disable flow
+const PreOpenedDisableFlow = exports.PreOpenedDisableFlow = Template.bind({});
+PreOpenedDisableFlow.args = {
+  openDisable2faflow: true
 };

package/dist/components/Input/SearchInput.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SearchInput = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SearchInput = require("./SearchInput.styles");
+var _searchIcon = require("../../static/images/search-icon.svg");
+const _excluded = ["value", "onChange", "placeholder", "icon", "showIcon", "disabled", "onFocus", "onBlur", "className", "containerStyle", "inputStyle", "iconStyle", "id", "name", "aria-label", "aria-describedby"];
+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; }
+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 SearchInput = _ref => {
+  let {
+      value = '',
+      onChange,
+      placeholder = 'Search',
+      icon,
+      showIcon = true,
+      disabled = false,
+      onFocus,
+      onBlur,
+      className,
+      containerStyle,
+      inputStyle,
+      iconStyle,
+      id,
+      name,
+      'aria-label': ariaLabel,
+      'aria-describedby': ariaDescribedBy
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const handleChange = e => {
+    if (onChange) {
+      onChange(e.target.value, e);
+    }
+  };
+  const handleFocus = e => {
+    if (onFocus) {
+      onFocus(e);
+    }
+  };
+  const handleBlur = e => {
+    if (onBlur) {
+      onBlur(e);
+    }
+  };
+  const inputId = id || "search-input-".concat(Math.random().toString(36).substr(2, 9));
+  const inputName = name || inputId;
+  return /*#__PURE__*/_react.default.createElement(_SearchInput.SearchInputContainer, {
+    className: className,
+    style: containerStyle
+  }, /*#__PURE__*/_react.default.createElement(_SearchInput.SearchInputWrapper, {
+    disabled: disabled
+  }, showIcon && /*#__PURE__*/_react.default.createElement(_SearchInput.SearchIconWrapper, {
+    style: iconStyle
+  }, icon || /*#__PURE__*/_react.default.createElement(_searchIcon.ReactComponent, null)), /*#__PURE__*/_react.default.createElement(_SearchInput.SearchInputField, _extends({
+    id: inputId,
+    name: inputName,
+    type: "search",
+    value: value,
+    onChange: handleChange,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    placeholder: placeholder,
+    disabled: disabled,
+    "aria-label": ariaLabel || placeholder,
+    "aria-describedby": ariaDescribedBy,
+    style: inputStyle
+  }, props))));
+};
+exports.SearchInput = SearchInput;
+var _default = exports.default = SearchInput;

package/dist/components/Input/SearchInput.stories.js

@@ -0,0 +1,304 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutIcon = exports.WithInitialValue = exports.WithCustomIcon = exports.LongText = exports.Disabled = exports.DifferentWidths = exports.Default = exports.CustomStyling = exports.CustomPlaceholder = exports.AllStates = exports.AccessibilityExample = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SearchInput = _interopRequireDefault(require("./SearchInput"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+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); }
+var _default = exports.default = {
+  title: 'Components Library/Inputs/SearchInput',
+  component: _SearchInput.default,
+  argTypes: {
+    value: {
+      control: 'text',
+      description: 'The search input value (controlled)'
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback fired when the value changes'
+    },
+    placeholder: {
+      control: 'text',
+      description: 'Placeholder text',
+      defaultValue: 'Search'
+    },
+    showIcon: {
+      control: 'boolean',
+      description: 'Show/hide the search icon',
+      defaultValue: true
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the input',
+      defaultValue: false
+    },
+    icon: {
+      control: false,
+      description: 'Custom icon component (React node)'
+    },
+    onFocus: {
+      action: 'focused',
+      description: 'Callback fired when input receives focus'
+    },
+    onBlur: {
+      action: 'blurred',
+      description: 'Callback fired when input loses focus'
+    }
+  }
+}; // Controlled component wrapper for stories
+const ControlledSearchInput = args => {
+  const [value, setValue] = (0, _react.useState)(args.value || '');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, _extends({}, args, {
+    value: value,
+    onChange: (newValue, e) => {
+      var _args$onChange;
+      setValue(newValue);
+      (_args$onChange = args.onChange) === null || _args$onChange === void 0 || _args$onChange.call(args, newValue, e);
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: _colors.default.grey2
+    }
+  }, "Current value: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(empty)')));
+};
+
+// Default example
+const Default = exports.Default = ControlledSearchInput.bind({});
+Default.args = {
+  placeholder: 'Search'
+};
+
+// Without icon
+const WithoutIcon = exports.WithoutIcon = ControlledSearchInput.bind({});
+WithoutIcon.args = {
+  placeholder: 'Search',
+  showIcon: false
+};
+
+// With custom placeholder
+const CustomPlaceholder = exports.CustomPlaceholder = ControlledSearchInput.bind({});
+CustomPlaceholder.args = {
+  placeholder: 'Search users, projects, or tags...'
+};
+
+// Disabled state
+const Disabled = exports.Disabled = ControlledSearchInput.bind({});
+Disabled.args = {
+  placeholder: 'Search',
+  value: 'Sample search text',
+  disabled: true
+};
+
+// With initial value
+const WithInitialValue = exports.WithInitialValue = ControlledSearchInput.bind({});
+WithInitialValue.args = {
+  placeholder: 'Search',
+  value: 'Initial search term'
+};
+
+// Custom icon example
+const WithCustomIcon = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  const CustomIcon = () => /*#__PURE__*/_react.default.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "9",
+    cy: "9",
+    r: "6",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M15 15L12 12",
+    stroke: "currentColor",
+    strokeWidth: "2"
+  }));
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value,
+    onChange: setValue,
+    placeholder: "Search with custom icon",
+    icon: /*#__PURE__*/_react.default.createElement(CustomIcon, null)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: _colors.default.grey2
+    }
+  }, "Current value: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(empty)')));
+};
+
+// Different widths
+exports.WithCustomIcon = WithCustomIcon;
+const DifferentWidths = () => {
+  const [value1, setValue1] = (0, _react.useState)('');
+  const [value2, setValue2] = (0, _react.useState)('');
+  const [value3, setValue3] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Full width"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value1,
+    onChange: setValue1,
+    placeholder: "Search (full width)"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px',
+      maxWidth: '400px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Max width 400px"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value2,
+    onChange: setValue2,
+    placeholder: "Search (400px max)"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px',
+      maxWidth: '200px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Max width 200px"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value3,
+    onChange: setValue3,
+    placeholder: "Search (200px max)"
+  })));
+};
+
+// Long text example
+exports.DifferentWidths = DifferentWidths;
+const LongText = exports.LongText = ControlledSearchInput.bind({});
+LongText.args = {
+  placeholder: 'Search',
+  value: 'This is a very long search query that might overflow the input field'
+};
+
+// All states
+const AllStates = () => {
+  const [value1, setValue1] = (0, _react.useState)('');
+  const [value2, setValue2] = (0, _react.useState)('');
+  const [value3, setValue3] = (0, _react.useState)('Sample text');
+  const [value4, setValue4] = (0, _react.useState)('Disabled with text');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Empty (default)"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value1,
+    onChange: setValue1,
+    placeholder: "Search"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Without icon"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value2,
+    onChange: setValue2,
+    placeholder: "Search",
+    showIcon: false
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "With value"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value3,
+    onChange: setValue3,
+    placeholder: "Search"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h4", {
+    style: {
+      marginBottom: '8px',
+      fontSize: '14px'
+    }
+  }, "Disabled"), /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value4,
+    onChange: setValue4,
+    placeholder: "Search",
+    disabled: true
+  })));
+};
+
+// Accessibility example
+exports.AllStates = AllStates;
+const AccessibilityExample = exports.AccessibilityExample = ControlledSearchInput.bind({});
+AccessibilityExample.args = {
+  placeholder: 'Search',
+  'aria-label': 'Search for products',
+  'aria-describedby': 'search-help-text'
+};
+AccessibilityExample.decorators = [Story => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(Story, null), /*#__PURE__*/_react.default.createElement("div", {
+  id: "search-help-text",
+  style: {
+    marginTop: '8px',
+    fontSize: '12px',
+    color: _colors.default.grey2
+  }
+}, "Use this search to find products by name, category, or description."))];
+
+// Custom styling
+const CustomStyling = () => {
+  const [value, setValue] = (0, _react.useState)('');
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    value: value,
+    onChange: setValue,
+    placeholder: "Search with custom styling",
+    containerStyle: {
+      maxWidth: '500px',
+      margin: '0 auto'
+    },
+    inputStyle: {
+      fontSize: '16px'
+    },
+    iconStyle: {
+      color: _colors.default.blue
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '12px',
+      fontSize: '12px',
+      color: _colors.default.grey2
+    }
+  }, "Current value: ", /*#__PURE__*/_react.default.createElement("strong", null, value || '(empty)')));
+};
+exports.CustomStyling = CustomStyling;

package/dist/components/Input/SearchInput.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SearchInputWrapper = exports.SearchInputField = exports.SearchInputContainer = exports.SearchIconWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const SearchInputContainer = exports.SearchInputContainer = _styledComponents.default.div.withConfig({
+  displayName: "SearchInputstyles__SearchInputContainer",
+  componentId: "sc-dcxztv-0"
+})(["width:100%;display:flex;"]);
+const SearchInputWrapper = exports.SearchInputWrapper = _styledComponents.default.div.withConfig({
+  displayName: "SearchInputstyles__SearchInputWrapper",
+  componentId: "sc-dcxztv-1"
+})(["position:relative;display:flex;align-items:center;width:100%;background-color:", ";border-radius:8px;padding:0 16px;min-height:40px;transition:background-color 0.2s ease;", " &:focus-within{background-color:", ";box-shadow:0 0 0 2px ", ";}"], _colors.default.grey3, props => props.disabled && "\n    opacity: 0.6;\n    cursor: not-allowed;\n  ", _colors.default.white, _colors.default.lightGrey);
+const SearchIconWrapper = exports.SearchIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "SearchInputstyles__SearchIconWrapper",
+  componentId: "sc-dcxztv-2"
+})(["display:flex;align-items:center;justify-content:center;margin-right:12px;color:", ";flex-shrink:0;width:16px;height:16px;svg{width:100%;height:100%;}", ":focus-within &{color:", ";}"], _colors.default.grey2, SearchInputWrapper, _colors.default.black);
+const SearchInputField = exports.SearchInputField = _styledComponents.default.input.withConfig({
+  displayName: "SearchInputstyles__SearchInputField",
+  componentId: "sc-dcxztv-3"
+})(["flex:1;border:none;outline:none;background:transparent;font-size:14px;font-weight:400;line-height:18px;color:", ";width:100%;min-width:0;letter-spacing:0.6px;&::placeholder{color:", ";opacity:1;}&:disabled{cursor:not-allowed;opacity:0.6;}&::-webkit-search-decoration,&::-webkit-search-cancel-button,&::-webkit-search-results-button,&::-webkit-search-results-decoration{-webkit-appearance:none;}"], _colors.default.black, _colors.default.grey2);

package/dist/components/Timeline/TimelineStep.js

@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _Icon = require("../Icon/Icon.style");
 var _InfoIcon = require("../InfoIcon/InfoIcon");
 var _Timeline = require("./Timeline.styles");
-var _crossIcon = require("static/images/cross-icon.svg");
-var _checkIcon = require("static/images/check-icon.svg");
+var _crossIcon = require("../../static/images/cross-icon.svg");
+var _checkIcon = require("../../static/images/check-icon.svg");
 var _moment = _interopRequireDefault(require("moment"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TimelineStep = _ref => {

package/dist/components/logo/Logo.stories.js

@@ -0,0 +1,260 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SvgFile = exports.Small = exports.OnDifferentBackgrounds = exports.Medium = exports.LogoSvgComponent = exports.Large = exports.Default = exports.AllVersions = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Logo = require("./Logo");
+var _LogoSvg = _interopRequireDefault(require("../SvgIcons/LogoSvg"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _logo = _interopRequireDefault(require("../../static/images/logo.svg"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Import the SVG file as an image
+
+const ComparisonContainer = _styledComponents.default.div.withConfig({
+  displayName: "Logostories__ComparisonContainer",
+  componentId: "sc-e8wyjz-0"
+})(["display:flex;flex-direction:column;gap:32px;padding:24px;"]);
+const LogoSection = _styledComponents.default.div.withConfig({
+  displayName: "Logostories__LogoSection",
+  componentId: "sc-e8wyjz-1"
+})(["display:flex;flex-direction:column;gap:16px;padding:20px;border:1px solid #e1e1e1;border-radius:8px;background-color:#f8f8f8;"]);
+const LogoTitle = _styledComponents.default.h3.withConfig({
+  displayName: "Logostories__LogoTitle",
+  componentId: "sc-e8wyjz-2"
+})(["font-size:18px;font-weight:600;margin:0 0 8px 0;color:#202020;"]);
+const LogoDescription = _styledComponents.default.p.withConfig({
+  displayName: "Logostories__LogoDescription",
+  componentId: "sc-e8wyjz-3"
+})(["font-size:14px;color:#666;margin:0 0 16px 0;"]);
+const LogoDisplay = _styledComponents.default.div.withConfig({
+  displayName: "Logostories__LogoDisplay",
+  componentId: "sc-e8wyjz-4"
+})(["display:flex;align-items:center;gap:24px;padding:16px;background-color:white;border-radius:4px;min-height:60px;"]);
+const SizeLabel = _styledComponents.default.span.withConfig({
+  displayName: "Logostories__SizeLabel",
+  componentId: "sc-e8wyjz-5"
+})(["font-size:12px;color:#999;min-width:100px;"]);
+var _default = exports.default = {
+  title: 'Components Library/Logo',
+  component: _Logo.Logo,
+  argTypes: {
+    width: {
+      control: 'number',
+      description: 'Width of the logo in pixels'
+    },
+    height: {
+      control: 'number',
+      description: 'Height of the logo in pixels'
+    }
+  },
+  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)))]
+}; // Logo.jsx component template
+const LogoTemplate = args => /*#__PURE__*/_react.default.createElement(_Logo.Logo, args);
+
+// Comparison view showing all versions
+const AllVersions = () => /*#__PURE__*/_react.default.createElement(ComparisonContainer, null, /*#__PURE__*/_react.default.createElement(LogoSection, null, /*#__PURE__*/_react.default.createElement(LogoTitle, null, "Logo.jsx (Class Component)"), /*#__PURE__*/_react.default.createElement(LogoDescription, null, "Class component with customizable width and height props. Default: 70x17"), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Default (70x17):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, null)), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Custom (100x24):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
+  width: 100,
+  height: 24
+})), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Small (50x12):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
+  width: 50,
+  height: 12
+})), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Large (140x34):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
+  width: 140,
+  height: 34
+}))), /*#__PURE__*/_react.default.createElement(LogoSection, null, /*#__PURE__*/_react.default.createElement(LogoTitle, null, "LogoSvg.js (Functional Component)"), /*#__PURE__*/_react.default.createElement(LogoDescription, null, "Functional component with fixed size: 66px x 16px"), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Fixed Size:"), /*#__PURE__*/_react.default.createElement(_LogoSvg.default, null))), /*#__PURE__*/_react.default.createElement(LogoSection, null, /*#__PURE__*/_react.default.createElement(LogoTitle, null, "logo.svg (Image File)"), /*#__PURE__*/_react.default.createElement(LogoDescription, null, "SVG file imported as an image. Can be used with img tag or as background"), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "As img tag:"), /*#__PURE__*/_react.default.createElement("img", {
+  src: _logo.default,
+  alt: "STOKR Logo",
+  style: {
+    height: '17px'
+  }
+})), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Larger size:"), /*#__PURE__*/_react.default.createElement("img", {
+  src: _logo.default,
+  alt: "STOKR Logo",
+  style: {
+    height: '34px'
+  }
+})), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "As background:"), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    width: '70px',
+    height: '17px',
+    backgroundImage: "url(".concat(_logo.default, ")"),
+    backgroundSize: 'contain',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center'
+  }
+}))), /*#__PURE__*/_react.default.createElement(LogoSection, null, /*#__PURE__*/_react.default.createElement(LogoTitle, null, "Side by Side Comparison"), /*#__PURE__*/_react.default.createElement(LogoDescription, null, "All three versions at similar sizes for direct comparison"), /*#__PURE__*/_react.default.createElement(LogoDisplay, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "Logo.jsx:"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
+  width: 70,
+  height: 17
+})), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "LogoSvg.js:"), /*#__PURE__*/_react.default.createElement(_LogoSvg.default, null)), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(SizeLabel, null, "logo.svg:"), /*#__PURE__*/_react.default.createElement("img", {
+  src: _logo.default,
+  alt: "STOKR Logo",
+  style: {
+    height: '17px'
+  }
+}))))));
+
+// Default Logo.jsx
+exports.AllVersions = AllVersions;
+const Default = exports.Default = LogoTemplate.bind({});
+Default.args = {
+  width: 70,
+  height: 17
+};
+
+// Small size
+const Small = exports.Small = LogoTemplate.bind({});
+Small.args = {
+  width: 50,
+  height: 12
+};
+
+// Medium size
+const Medium = exports.Medium = LogoTemplate.bind({});
+Medium.args = {
+  width: 100,
+  height: 24
+};
+
+// Large size
+const Large = exports.Large = LogoTemplate.bind({});
+Large.args = {
+  width: 140,
+  height: 34
+};
+
+// LogoSvg component
+const LogoSvgComponent = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '20px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_LogoSvg.default, null));
+
+// SVG file as image
+exports.LogoSvgComponent = LogoSvgComponent;
+const SvgFile = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '20px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+  style: {
+    marginBottom: '8px',
+    fontSize: '14px',
+    color: '#666'
+  }
+}, "Default size:"), /*#__PURE__*/_react.default.createElement("img", {
+  src: _logo.default,
+  alt: "STOKR Logo"
+})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+  style: {
+    marginBottom: '8px',
+    fontSize: '14px',
+    color: '#666'
+  }
+}, "Custom height (34px):"), /*#__PURE__*/_react.default.createElement("img", {
+  src: _logo.default,
+  alt: "STOKR Logo",
+  style: {
+    height: '34px'
+  }
+})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", {
+  style: {
+    marginBottom: '8px',
+    fontSize: '14px',
+    color: '#666'
+  }
+}, "Custom height (50px):"), /*#__PURE__*/_react.default.createElement("img", {
+  src: _logo.default,
+  alt: "STOKR Logo",
+  style: {
+    height: '50px'
+  }
+})));
+
+// Different backgrounds for testing visibility
+exports.SvgFile = SvgFile;
+const OnDifferentBackgrounds = () => /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '24px',
+    padding: '20px'
+  }
+}, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '20px',
+    backgroundColor: '#ffffff',
+    borderRadius: '8px'
+  }
+}, /*#__PURE__*/_react.default.createElement("p", {
+  style: {
+    marginBottom: '12px',
+    fontSize: '14px',
+    fontWeight: '600'
+  }
+}, "White Background:"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
+  width: 70,
+  height: 17
+})), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '20px',
+    backgroundColor: '#f8f8f8',
+    borderRadius: '8px'
+  }
+}, /*#__PURE__*/_react.default.createElement("p", {
+  style: {
+    marginBottom: '12px',
+    fontSize: '14px',
+    fontWeight: '600'
+  }
+}, "Light Grey Background:"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
+  width: 70,
+  height: 17
+})), /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    padding: '20px',
+    backgroundColor: '#202020',
+    borderRadius: '8px'
+  }
+}, /*#__PURE__*/_react.default.createElement("p", {
+  style: {
+    marginBottom: '12px',
+    fontSize: '14px',
+    fontWeight: '600',
+    color: 'white'
+  }
+}, "Dark Background (Logo should be visible):"), /*#__PURE__*/_react.default.createElement(_Logo.Logo, {
+  width: 70,
+  height: 17
+})));
+exports.OnDifferentBackgrounds = OnDifferentBackgrounds;

package/dist/constants/globalVariables.js

@@ -3,7 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.walletTypes = exports.platformURL = exports.platformDomain = exports.emailRegex = exports.UserTypes = exports.USInvestorAcreditationStatuses = exports.ProjectTypes = exports.ProjectStatus = exports.ProjectStates = exports.ProfessionalInvestorStatuses = void 0;
+exports.walletTypes = exports.transactionTypeDisplayNames = exports.platformURL = exports.platformDomain = exports.emailRegex = exports.UserTypes = exports.USInvestorAcreditationStatuses = exports.TransactionTypes = exports.ProjectTypes = exports.ProjectStatus = exports.ProjectStates = exports.ProfessionalInvestorStatuses = exports.LoanActivityTypes = void 0;
+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); }
 const platformDomain = exports.platformDomain = process.env.REACT_APP_WEBSITE_DOMAIN;
 const platformURL = exports.platformURL = 'https://' + platformDomain;
 const walletTypes = exports.walletTypes = {
@@ -44,4 +49,38 @@ const USInvestorAcreditationStatuses = exports.USInvestorAcreditationStatuses =
 };
 
 // should be used for all email form validation globally
-const emailRegex = exports.emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
+const emailRegex = exports.emailRegex = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
+const LoanActivityTypes = exports.LoanActivityTypes = {
+  PRINCIPAL_DEPOSIT: 'principal_deposit',
+  PRINCIPAL_RELEASE: 'principal_release',
+  INTEREST_PAYMENT: 'interest_payment',
+  COLLATERAL_DEPOSIT: 'collateral_deposit',
+  COLLATERAL_RELEASE: 'collateral_release',
+  COLLATERAL_PARTIAL_DEPOSIT: 'collateral_partial_deposit',
+  COLLATERAL_PARTIAL_RELEASE: 'collateral_partial_release',
+  LIQUIDATION: 'liquidation'
+};
+const TransactionTypes = exports.TransactionTypes = _objectSpread({
+  SUBSCRIPTION: 'subscription',
+  REFUND: 'refund',
+  REDEMPTION: 'redemption',
+  VENTURE_PAYOUT: 'issuer_payout',
+  AGGREGATION: 'aggregation'
+}, LoanActivityTypes);
+
+// Display names for transaction types (matching the spreadsheet)
+const transactionTypeDisplayNames = exports.transactionTypeDisplayNames = {
+  [TransactionTypes.INTEREST_PAYMENT]: 'Interest',
+  [TransactionTypes.COLLATERAL_DEPOSIT]: 'Collateral Deposit',
+  [TransactionTypes.COLLATERAL_RELEASE]: 'Collateral Release',
+  [TransactionTypes.COLLATERAL_PARTIAL_DEPOSIT]: 'Collateral Shift (Deposit)',
+  [TransactionTypes.COLLATERAL_PARTIAL_RELEASE]: 'Collateral Shift (Release)',
+  [TransactionTypes.PRINCIPAL_DEPOSIT]: 'Principal Increase',
+  [TransactionTypes.PRINCIPAL_RELEASE]: 'Principal Decrease',
+  [TransactionTypes.LIQUIDATION]: 'Liquidation',
+  [TransactionTypes.REDEMPTION]: 'Redemption',
+  [TransactionTypes.REFUND]: 'Refund',
+  [TransactionTypes.AGGREGATION]: 'Aggregation',
+  [TransactionTypes.VENTURE_PAYOUT]: 'Issuer Payout',
+  [TransactionTypes.SUBSCRIPTION]: 'Issuance'
+};

package/dist/context/Checkbox/CheckboxContext.js

@@ -181,7 +181,6 @@ const useCheckboxActions = () => {
   }
   return {
     checkCheckbox: context.checkCheckbox,
-    uncheckCheckbox: context.uncheckCheckbox,
     clearCheckboxes: context.clearCheckboxes
   };
 };

package/dist/static/images/search-icon.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.33333 4C9.17427 4 10.6667 5.49239 10.6667 7.33333M11.1059 11.1033L14 14M12.6667 7.33333C12.6667 10.2789 10.2789 12.6667 7.33333 12.6667C4.38781 12.6667 2 10.2789 2 7.33333C2 4.38781 4.38781 2 7.33333 2C10.2789 2 12.6667 4.38781 12.6667 7.33333Z" stroke="#9B9B9B" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "2.3.65-beta.1",
+  "version": "2.3.65-beta.3",
   "description": "STOKR - Components Library",
   "main": "dist/index.js",
   "module": "dist/index.js",