@stokr/components-library 2.3.64 → 2.3.65-beta.10

package/dist/components/StepsProgress/StepIndicator.stories.js

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutLabels = exports.SecondStep = exports.ManySteps = exports.LastStep = exports.Interactive = exports.Default = exports.CustomMargin = exports.AllCompleted = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _StepIndicator = _interopRequireDefault(require("./StepIndicator"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+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/StepIndicator',
+  component: _StepIndicator.default,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))],
+  argTypes: {
+    currentStep: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 3
+      },
+      description: 'Current active step (0-indexed)'
+    },
+    showLabels: {
+      control: 'boolean',
+      description: 'Show or hide step labels'
+    },
+    marginBottom: {
+      control: 'text',
+      description: 'Bottom margin of the component'
+    }
+  }
+};
+const sampleSteps = [{
+  id: 'step1',
+  label: 'Details'
+}, {
+  id: 'step2',
+  label: 'Review'
+}, {
+  id: 'step3',
+  label: 'Confirm'
+}];
+
+// Default - first step active
+const Default = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+  steps: sampleSteps,
+  currentStep: 0
+}));
+
+// Second step active (first completed)
+exports.Default = Default;
+const SecondStep = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+  steps: sampleSteps,
+  currentStep: 1
+}));
+
+// Last step active (all previous completed)
+exports.SecondStep = SecondStep;
+const LastStep = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+  steps: sampleSteps,
+  currentStep: 2
+}));
+
+// All steps completed
+exports.LastStep = LastStep;
+const AllCompleted = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+  steps: sampleSteps,
+  currentStep: 3
+}));
+
+// Interactive example
+exports.AllCompleted = AllCompleted;
+const Interactive = () => {
+  const [currentStep, setCurrentStep] = (0, _react.useState)(0);
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+    steps: sampleSteps,
+    currentStep: currentStep,
+    onStepClick: index => setCurrentStep(index)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCurrentStep(prev => Math.max(0, prev - 1)),
+    disabled: currentStep === 0,
+    style: {
+      marginRight: '8px',
+      padding: '8px 16px'
+    }
+  }, "Previous"), /*#__PURE__*/_react.default.createElement("button", {
+    onClick: () => setCurrentStep(prev => Math.min(sampleSteps.length, prev + 1)),
+    disabled: currentStep >= sampleSteps.length,
+    style: {
+      padding: '8px 16px'
+    }
+  }, "Next")), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginTop: '16px',
+      fontSize: '14px',
+      color: '#666'
+    }
+  }, "Current step: ", currentStep, " (click on steps to navigate)"));
+};
+
+// Without labels
+exports.Interactive = Interactive;
+const WithoutLabels = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+  steps: sampleSteps,
+  currentStep: 1,
+  showLabels: false
+}));
+
+// More steps
+exports.WithoutLabels = WithoutLabels;
+const ManySteps = () => {
+  const manySteps = [{
+    id: 'step1',
+    label: 'Account'
+  }, {
+    id: 'step2',
+    label: 'Personal'
+  }, {
+    id: 'step3',
+    label: 'Documents'
+  }, {
+    id: 'step4',
+    label: 'Review'
+  }, {
+    id: 'step5',
+    label: 'Complete'
+  }];
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+    steps: manySteps,
+    currentStep: 2
+  }));
+};
+
+// Custom margin
+exports.ManySteps = ManySteps;
+const CustomMargin = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StepIndicator.default, {
+  steps: sampleSteps,
+  currentStep: 1,
+  marginBottom: "0"
+}), /*#__PURE__*/_react.default.createElement("p", {
+  style: {
+    margin: 0,
+    fontSize: '14px'
+  }
+}, "Content immediately below (no margin)"));
+exports.CustomMargin = CustomMargin;

package/dist/components/StepsProgress/StepIndicator.styles.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepLabel = exports.StepItem = exports.StepIndicatorContainer = exports.StepConnector = exports.StepCircle = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+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); }
+const StepIndicatorContainer = exports.StepIndicatorContainer = _styledComponents.default.div.withConfig({
+  displayName: "StepIndicatorstyles__StepIndicatorContainer",
+  componentId: "sc-ywoddn-0"
+})(["display:flex;align-items:center;gap:16px;margin-bottom:", ";"], props => props.marginBottom || '32px');
+const StepItem = exports.StepItem = _styledComponents.default.div.withConfig({
+  displayName: "StepIndicatorstyles__StepItem",
+  componentId: "sc-ywoddn-1"
+})(["display:flex;align-items:center;gap:12px;"]);
+const StepCircle = exports.StepCircle = _styledComponents.default.div.withConfig({
+  displayName: "StepIndicatorstyles__StepCircle",
+  componentId: "sc-ywoddn-2"
+})(["width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;transition:all 0.2s ease;", " ", " ", ""], props => props.isCompleted && (0, _styledComponents.css)(["background-color:", ";color:", ";svg path{stroke:", ";}"], _colors.default.progressGreen, _colors.default.white, _colors.default.white), props => props.isActive && !props.isCompleted && (0, _styledComponents.css)(["background-color:", ";color:", ";"], _colors.default.black, _colors.default.white), props => !props.isActive && !props.isCompleted && (0, _styledComponents.css)(["background-color:", ";color:", ";"], _colors.default.grey, _colors.default.black));
+const StepLabel = exports.StepLabel = _styledComponents.default.span.withConfig({
+  displayName: "StepIndicatorstyles__StepLabel",
+  componentId: "sc-ywoddn-3"
+})(["font-size:16px;font-weight:600;line-height:24px;letter-spacing:0.6px;word-wrap:break-word;"]);
+const StepConnector = exports.StepConnector = _styledComponents.default.div.withConfig({
+  displayName: "StepIndicatorstyles__StepConnector",
+  componentId: "sc-ywoddn-4"
+})(["flex:1;height:2px;max-width:80px;background-color:", ";"], props => props.isCompleted ? _colors.default.progressGreen : _colors.default.grey);

package/dist/components/TextLink/TextLink.stories.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IconReversed = exports.Default = exports.ButtonIconReversed = exports.AsButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _TextLink = require("./TextLink.styles");
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Components Library/TextLink',
+  component: _TextLink.TextLink,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, null, /*#__PURE__*/_react.default.createElement(Story, null)))]
+};
+const Default = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_TextLink.TextLink, {
+  to: "/example"
+}, "View Details"));
+exports.Default = Default;
+const AsButton = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_TextLink.TextButton, {
+  onClick: () => alert('Clicked!')
+}, "Click Me"));
+exports.AsButton = AsButton;
+const IconReversed = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_TextLink.TextLink, {
+  to: "/example",
+  reverse: true
+}, "Go Back"));
+exports.IconReversed = IconReversed;
+const ButtonIconReversed = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_TextLink.TextButton, {
+  onClick: () => alert('Clicked!'),
+  reverse: true
+}, "Previous"));
+exports.ButtonIconReversed = ButtonIconReversed;

package/dist/components/TextLink/TextLink.styles.js

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

package/dist/components/Timeline/Timeline.js

@@ -12,7 +12,6 @@ const Timeline = _ref => {
   let {
     steps = [],
     maxWidth,
-    dateFormat,
     showInfoIcons = true,
     infoIconPosition = 'right',
     // Style props
@@ -41,7 +40,6 @@ const Timeline = _ref => {
       customIcon: step.customIcon,
       showInfoIcon: showInfoIcons,
       infoIconPosition: infoIconPosition,
-      dateFormat: dateFormat,
       stepStyle: step.stepStyle || stepStyle,
       iconStyle: step.iconStyle || iconStyle,
       contentStyle: step.contentStyle || contentStyle,

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'
+};