@stokr/components-library 2.3.65-beta.4 → 2.3.65-beta.6

package/dist/components/Payment/PaymentDetailsCard.js

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PaymentDetailsCard = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _InfoIcon = require("../InfoIcon/InfoIcon");
+var _formatCurrencyValue = require("../../utils/formatCurrencyValue");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CardContainer = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__CardContainer",
+  componentId: "sc-e830fo-0"
+})(["background:", ";border-radius:15px;border:1px solid ", ";padding:20px 32px;"], _colors.default.white, _colors.default.lightGrey);
+const CardTitle = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__CardTitle",
+  componentId: "sc-e830fo-1"
+})(["font-size:16px;font-weight:600;margin-bottom:20px;color:", ";"], _colors.default.black);
+const AmountSection = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__AmountSection",
+  componentId: "sc-e830fo-2"
+})([""]);
+const AmountLabel = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__AmountLabel",
+  componentId: "sc-e830fo-3"
+})(["font-size:14px;font-weight:300;line-height:20px;letter-spacing:0.08px;margin-bottom:12px;color:", ";"], _colors.default.grey2);
+const AmountDisplay = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__AmountDisplay",
+  componentId: "sc-e830fo-4"
+})(["display:flex;align-items:center;gap:16px;"]);
+const CurrencyLogo = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__CurrencyLogo",
+  componentId: "sc-e830fo-5"
+})(["width:32px;height:32px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;color:", ";font-size:14px;font-weight:600;overflow:hidden;"], props => props.color || _colors.default.black, _colors.default.white);
+const CurrencyIcon = _styledComponents.default.img.withConfig({
+  displayName: "PaymentDetailsCard__CurrencyIcon",
+  componentId: "sc-e830fo-6"
+})(["width:100%;height:100%;object-fit:contain;"]);
+const AmountValue = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__AmountValue",
+  componentId: "sc-e830fo-7"
+})(["font-size:34px;font-weight:800;text-transform:uppercase;line-height:40px;letter-spacing:1.5px;word-wrap:break-word;"]);
+const Separator = _styledComponents.default.hr.withConfig({
+  displayName: "PaymentDetailsCard__Separator",
+  componentId: "sc-e830fo-8"
+})(["border:none;border-top:1px solid ", ";margin:20px -32px;"], _colors.default.lightGrey);
+const DetailsSection = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__DetailsSection",
+  componentId: "sc-e830fo-9"
+})(["margin-bottom:", ";"], props => props.noMargin ? '0' : '24px');
+const DetailRow = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__DetailRow",
+  componentId: "sc-e830fo-10"
+})(["display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;&:last-child{margin-bottom:0;}"]);
+const DetailLabel = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__DetailLabel",
+  componentId: "sc-e830fo-11"
+})(["display:flex;align-items:center;gap:10px;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0.1px;"]);
+const DetailValue = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__DetailValue",
+  componentId: "sc-e830fo-12"
+})(["font-size:16px;font-weight:700;line-height:24px;letter-spacing:0.1px;word-wrap:break-word;text-align:right;max-width:60%;color:", ";"], _colors.default.black);
+const PlaceholderValue = _styledComponents.default.span.withConfig({
+  displayName: "PaymentDetailsCard__PlaceholderValue",
+  componentId: "sc-e830fo-13"
+})(["color:", ";font-weight:400;"], _colors.default.grey2);
+const InfoSectionContainer = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__InfoSectionContainer",
+  componentId: "sc-e830fo-14"
+})(["margin-top:24px;"]);
+
+/**
+ * Renders a single detail row
+ */
+const DetailItem = _ref => {
+  let {
+    label,
+    value,
+    tooltip,
+    placeholder,
+    isCustom
+  } = _ref;
+  // If value is a custom component (React element), render it directly
+  const renderValue = () => {
+    if (isCustom && value) {
+      return value;
+    }
+    if (value !== undefined && value !== null && value !== '') {
+      return value;
+    }
+    if (placeholder) {
+      return /*#__PURE__*/_react.default.createElement(PlaceholderValue, null, placeholder);
+    }
+    return /*#__PURE__*/_react.default.createElement(PlaceholderValue, null, "-");
+  };
+  return /*#__PURE__*/_react.default.createElement(DetailRow, null, /*#__PURE__*/_react.default.createElement(DetailLabel, null, label, tooltip && /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+    containerStyle: {
+      width: 14,
+      height: 14
+    },
+    title: tooltip,
+    noMargin: true
+  })), /*#__PURE__*/_react.default.createElement(DetailValue, null, renderValue()));
+};
+
+/**
+ * PaymentDetailsCard - Fully customizable details card
+ *
+ * @param {string} title - Optional card title
+ * @param {object|node} amountSection - Amount section config or custom node
+ *   - If object: { label, amount, currency, currencyColor, icon }
+ *   - If node: renders custom component
+ * @param {array} details - Array of detail items
+ *   - { label, value (string|node), tooltip, placeholder, isCustom }
+ * @param {node} infoSection - Optional custom node for bottom info section
+ * @param {boolean} showSeparators - Whether to show separators between sections
+ */
+const PaymentDetailsCard = _ref2 => {
+  let {
+    title,
+    amountSection,
+    details,
+    infoSection,
+    showSeparators = true
+  } = _ref2;
+  // Render amount section
+  const renderAmountSection = () => {
+    if (!amountSection) return null;
+
+    // If it's a React element, render it directly
+    if (/*#__PURE__*/_react.default.isValidElement(amountSection)) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, amountSection, showSeparators && /*#__PURE__*/_react.default.createElement(Separator, null));
+    }
+
+    // Otherwise, render the default amount layout
+    const {
+      label = 'Amount',
+      amount,
+      currency,
+      currencyColor,
+      icon
+    } = amountSection;
+    const displayAmount = (0, _formatCurrencyValue.formatCurrencyValue)(currency, amount, 2, {
+      valueFirst: true
+    });
+    const currencyIcon = (0, _formatCurrencyValue.getCurrencyIcon)(currency, icon);
+    const logoColor = currencyColor || _colors.default.black;
+    const renderCurrencyLogo = () => {
+      if (currencyIcon) {
+        return /*#__PURE__*/_react.default.createElement(CurrencyLogo, {
+          color: 'transparent'
+        }, /*#__PURE__*/_react.default.createElement(CurrencyIcon, {
+          src: currencyIcon,
+          alt: currency || 'currency'
+        }));
+      }
+      return /*#__PURE__*/_react.default.createElement(CurrencyLogo, {
+        color: logoColor
+      }, currency ? currency.charAt(0).toUpperCase() : '?');
+    };
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(AmountSection, null, /*#__PURE__*/_react.default.createElement(AmountLabel, null, label), /*#__PURE__*/_react.default.createElement(AmountDisplay, null, renderCurrencyLogo(), /*#__PURE__*/_react.default.createElement(AmountValue, null, displayAmount))), showSeparators && /*#__PURE__*/_react.default.createElement(Separator, null));
+  };
+
+  // Render details section
+  const renderDetailsSection = () => {
+    if (!details || details.length === 0) return null;
+    return /*#__PURE__*/_react.default.createElement(DetailsSection, {
+      noMargin: !infoSection
+    }, details.map((detail, index) => /*#__PURE__*/_react.default.createElement(DetailItem, {
+      key: detail.key || index,
+      label: detail.label,
+      value: detail.value,
+      tooltip: detail.tooltip,
+      placeholder: detail.placeholder,
+      isCustom: detail.isCustom
+    })));
+  };
+
+  // Render info section
+  const renderInfoSection = () => {
+    if (!infoSection) return null;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showSeparators && /*#__PURE__*/_react.default.createElement(Separator, null), /*#__PURE__*/_react.default.createElement(InfoSectionContainer, null, infoSection));
+  };
+  return /*#__PURE__*/_react.default.createElement(CardContainer, null, title && /*#__PURE__*/_react.default.createElement(CardTitle, null, title), renderAmountSection(), renderDetailsSection(), renderInfoSection());
+};
+exports.PaymentDetailsCard = PaymentDetailsCard;
+var _default = exports.default = PaymentDetailsCard;

package/dist/components/Payment/PaymentDetailsCard.stories.js

@@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutSeparators = exports.WithTooltips = exports.WithPlaceholders = exports.WithCustomInfoSection = exports.WithCustomAmountSection = exports.WithBitcoin = exports.DetailsOnly = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _PaymentDetailsCard = _interopRequireDefault(require("./PaymentDetailsCard"));
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StoryContainer = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCardstories__StoryContainer",
+  componentId: "sc-1bzi48y-0"
+})(["max-width:500px;padding:20px;background:", ";"], _colors.default.offWhite);
+var _default = exports.default = {
+  title: 'Components Library/Payment/PaymentDetailsCard',
+  component: _PaymentDetailsCard.default,
+  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(StoryContainer, null, /*#__PURE__*/_react.default.createElement(Story, null))))]
+};
+const Default = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  title: "Payment Details",
+  amountSection: {
+    label: 'Amount to pay',
+    amount: 1250.5,
+    currency: 'USDC'
+  },
+  details: [{
+    label: 'Reference',
+    value: 'INV-2024-001234'
+  }, {
+    label: 'Date',
+    value: 'Dec 19, 2024'
+  }, {
+    label: 'Status',
+    value: 'Pending'
+  }]
+});
+exports.Default = Default;
+const WithBitcoin = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  amountSection: {
+    label: 'Transfer amount',
+    amount: 0.054321,
+    currency: 'BTC'
+  },
+  details: [{
+    label: 'Network',
+    value: 'Bitcoin Mainnet'
+  }, {
+    label: 'Fee',
+    value: '0.00001 BTC'
+  }, {
+    label: 'Confirmations',
+    value: '3/6'
+  }]
+});
+exports.WithBitcoin = WithBitcoin;
+const WithTooltips = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  amountSection: {
+    label: 'Investment amount',
+    amount: 50000,
+    currency: 'USDT'
+  },
+  details: [{
+    label: 'Token price',
+    value: '$1.25',
+    tooltip: 'Current token price at the time of investment'
+  }, {
+    label: 'Tokens received',
+    value: '40,000 TKN',
+    tooltip: 'Number of tokens you will receive'
+  }, {
+    label: 'Lock-up period',
+    value: '12 months',
+    tooltip: 'Tokens will be locked for this period'
+  }]
+});
+exports.WithTooltips = WithTooltips;
+const WithPlaceholders = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  title: "Pending Payment",
+  amountSection: {
+    label: 'Amount',
+    amount: 500,
+    currency: 'USDC'
+  },
+  details: [{
+    label: 'Transaction ID',
+    value: null,
+    placeholder: 'Awaiting confirmation'
+  }, {
+    label: 'Recipient',
+    value: 'John Doe'
+  }, {
+    label: 'Status',
+    value: null,
+    placeholder: 'Processing...'
+  }]
+});
+exports.WithPlaceholders = WithPlaceholders;
+const WithCustomInfoSection = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  title: "Order Confirmation",
+  amountSection: {
+    label: 'Total amount',
+    amount: 2500,
+    currency: 'USDC'
+  },
+  details: [{
+    label: 'Order ID',
+    value: 'ORD-789456'
+  }, {
+    label: 'Items',
+    value: '3 tokens'
+  }],
+  infoSection: /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '12px',
+      background: _colors.default.lightGrey,
+      borderRadius: '4px',
+      fontSize: '14px',
+      color: _colors.default.grey2
+    }
+  }, "\u24D8 Your payment will be processed within 24 hours. You will receive a confirmation email once complete.")
+});
+exports.WithCustomInfoSection = WithCustomInfoSection;
+const WithoutSeparators = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  title: "Compact View",
+  amountSection: {
+    label: 'Amount',
+    amount: 100,
+    currency: 'USDC'
+  },
+  details: [{
+    label: 'From',
+    value: 'Wallet A'
+  }, {
+    label: 'To',
+    value: 'Wallet B'
+  }],
+  showSeparators: false
+});
+exports.WithoutSeparators = WithoutSeparators;
+const DetailsOnly = () => /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+  title: "Account Information",
+  details: [{
+    label: 'Account holder',
+    value: 'Jane Smith'
+  }, {
+    label: 'Account type',
+    value: 'Premium'
+  }, {
+    label: 'Member since',
+    value: 'Jan 2023'
+  }, {
+    label: 'Total investments',
+    value: '$125,000'
+  }]
+});
+exports.DetailsOnly = DetailsOnly;
+const WithCustomAmountSection = () => {
+  const CustomAmount = () => /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      textAlign: 'center',
+      padding: '20px 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '14px',
+      color: _colors.default.grey2,
+      marginBottom: '8px'
+    }
+  }, "You are investing"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '48px',
+      fontWeight: '800',
+      color: _colors.default.black
+    }
+  }, "$10,000"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: '14px',
+      color: _colors.default.freshGreen,
+      marginTop: '8px'
+    }
+  }, "\u2713 Best rate available"));
+  return /*#__PURE__*/_react.default.createElement(_PaymentDetailsCard.default, {
+    title: "Custom Investment",
+    amountSection: /*#__PURE__*/_react.default.createElement(CustomAmount, null),
+    details: [{
+      label: 'Exchange rate',
+      value: '1 USD = 0.92 EUR'
+    }, {
+      label: 'Fees',
+      value: '$0.00'
+    }]
+  });
+};
+exports.WithCustomAmountSection = WithCustomAmountSection;

package/dist/components/StatusTag/StatusTag.js

@@ -11,6 +11,7 @@ var _checkIcon = require("../../static/images/check-icon.svg");
 var _crossIcon = require("../../static/images/cross-icon.svg");
 var _sentIcon = require("../../static/images/sent-icon.svg");
 var _documentIcon = require("../../static/images/document-icon.svg");
+var _transferIcon = require("../../static/images/transfer-icon.svg");
 var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _StatusTag = require("./StatusTag.styles");
 const _excluded = ["variant", "icon", "text", "tooltip", "tooltipProps", "iconColor", "hoverColor", "disableHoverColor", "minWidth", "className", "containerStyle", "iconStyle", "textStyle", "onClick", "center"];
@@ -83,10 +84,16 @@ const variantConfig = {
     disableHoverColor: false
   },
   paid: {
-    icon: (iconColor, hoverColor, disableHoverColor) => /*#__PURE__*/_react.default.createElement(PaidIcon, {
-      iconColor: iconColor,
-      hoverColor: hoverColor,
-      disableHoverColor: disableHoverColor
+    // icon: (iconColor, hoverColor, disableHoverColor) => (
+    //   <PaidIcon
+    //     iconColor={iconColor}
+    //     hoverColor={hoverColor}
+    //     disableHoverColor={disableHoverColor}
+    //   />
+    // ),
+    icon: /*#__PURE__*/_react.default.createElement(_transferIcon.ReactComponent, {
+      width: 14,
+      height: 14
     }),
     iconColor: _colors.default.grey2,
     hoverColor: _colors.default.freshGreen,

package/dist/components/StepsProgress/StepIndicator.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StepIndicator = require("./StepIndicator.styles");
+var _checkIcon = require("../../static/images/check-icon.svg");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StepIndicator = _ref => {
+  let {
+    steps,
+    currentStep,
+    onStepClick,
+    showLabels = true,
+    marginBottom
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_StepIndicator.StepIndicatorContainer, {
+    marginBottom: marginBottom
+  }, steps.map((step, index) => {
+    const isCompleted = index < currentStep;
+    const isActive = index === currentStep;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: step.id
+    }, /*#__PURE__*/_react.default.createElement(_StepIndicator.StepItem, {
+      onClick: () => onStepClick && onStepClick(index),
+      style: {
+        cursor: onStepClick ? 'pointer' : 'default'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_StepIndicator.StepCircle, {
+      isCompleted: isCompleted,
+      isActive: isActive
+    }, isCompleted ? /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, {
+      width: 14,
+      height: 11
+    }) : index + 1), showLabels && /*#__PURE__*/_react.default.createElement(_StepIndicator.StepLabel, null, step.label)), index < steps.length - 1 && /*#__PURE__*/_react.default.createElement(_StepIndicator.StepConnector, {
+      isCompleted: isCompleted
+    }));
+  }));
+};
+StepIndicator.propTypes = {
+  steps: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired
+  })).isRequired,
+  currentStep: _propTypes.default.number.isRequired,
+  onStepClick: _propTypes.default.func,
+  showLabels: _propTypes.default.bool,
+  marginBottom: _propTypes.default.string
+};
+StepIndicator.defaultProps = {
+  onStepClick: null,
+  showLabels: true,
+  marginBottom: '32px'
+};
+var _default = exports.default = StepIndicator;

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);