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

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

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StatusTag = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _InfoIcon = _interopRequireDefault(require("../InfoIcon/InfoIcon"));
+var _Icon = require("../Icon/Icon.style");
+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"];
+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 PaidIcon = _ref => {
+  let {
+    iconColor,
+    hoverColor,
+    disableHoverColor
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_StatusTag.PaidIconWrapper, {
+    iconColor: iconColor,
+    hoverColor: hoverColor,
+    disableHoverColor: disableHoverColor
+  }, /*#__PURE__*/_react.default.createElement(_checkIcon.ReactComponent, null));
+};
+const DeclinedIcon = _ref2 => {
+  let {
+    iconColor,
+    hoverColor,
+    disableHoverColor
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(_StatusTag.DeclinedIconWrapper, {
+    iconColor: iconColor,
+    hoverColor: hoverColor,
+    disableHoverColor: disableHoverColor
+  }, /*#__PURE__*/_react.default.createElement(_crossIcon.ReactComponent, null));
+};
+
+// Variant configuration - maps variant to icon and colors only
+const variantConfig = {
+  pending: {
+    icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+      icon: _Icon.iconsMap.inProgress,
+      size: 12
+    }),
+    iconColor: _colors.default.grey2,
+    hoverColor: _colors.default.warningOrange,
+    disableHoverColor: false
+  },
+  initiated: {
+    icon: /*#__PURE__*/_react.default.createElement(_sentIcon.ReactComponent, {
+      width: 12,
+      height: 12
+    }),
+    iconColor: _colors.default.grey2,
+    hoverColor: _colors.default.blue,
+    disableHoverColor: false
+  },
+  confirmed: {
+    icon: /*#__PURE__*/_react.default.createElement(_documentIcon.ReactComponent, {
+      width: 12,
+      height: 12
+    }),
+    iconColor: _colors.default.grey2,
+    hoverColor: _colors.default.blue,
+    disableHoverColor: false
+  },
+  declined: {
+    icon: (iconColor, hoverColor, disableHoverColor) => /*#__PURE__*/_react.default.createElement(DeclinedIcon, {
+      iconColor: iconColor,
+      hoverColor: hoverColor,
+      disableHoverColor: disableHoverColor
+    }),
+    iconColor: _colors.default.grey2,
+    hoverColor: _colors.default.darkRed,
+    disableHoverColor: false
+  },
+  paid: {
+    // 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,
+    disableHoverColor: false
+  }
+};
+const StatusTag = _ref3 => {
+  var _variantData$disableH;
+  let {
+      variant,
+      icon,
+      text,
+      tooltip,
+      tooltipProps,
+      iconColor,
+      hoverColor,
+      disableHoverColor,
+      minWidth,
+      className,
+      containerStyle,
+      iconStyle,
+      textStyle,
+      onClick,
+      center
+    } = _ref3,
+    props = _objectWithoutProperties(_ref3, _excluded);
+  // If variant is provided, use its configuration (but allow overrides)
+  const variantData = variant ? variantConfig[variant] : null;
+
+  // Determine colors - variant config can be overridden by props
+  const finalIconColor = iconColor !== undefined ? iconColor : (variantData === null || variantData === void 0 ? void 0 : variantData.iconColor) || _colors.default.grey2;
+  const finalHoverColor = hoverColor !== undefined ? hoverColor : variantData === null || variantData === void 0 ? void 0 : variantData.hoverColor;
+  const finalDisableHoverColor = disableHoverColor !== undefined ? disableHoverColor : (_variantData$disableH = variantData === null || variantData === void 0 ? void 0 : variantData.disableHoverColor) !== null && _variantData$disableH !== void 0 ? _variantData$disableH : false;
+
+  // Determine which icon to use - handle function icons (for paid/declined)
+  let finalIcon = null;
+  if (icon) {
+    finalIcon = icon;
+  } else if (variantData !== null && variantData !== void 0 && variantData.icon) {
+    if (typeof variantData.icon === 'function') {
+      // Icon is a function (paid/declined) - pass color props
+      finalIcon = variantData.icon(finalIconColor, finalHoverColor, finalDisableHoverColor);
+    } else {
+      // Icon is a React element (pending/initiated/confirmed)
+      finalIcon = variantData.icon;
+    }
+  }
+  const content = /*#__PURE__*/_react.default.createElement(_StatusTag.StatusTagContainer, _extends({
+    className: className,
+    style: containerStyle,
+    onClick: onClick,
+    hasClick: !!onClick
+  }, props), /*#__PURE__*/_react.default.createElement(_StatusTag.StatusTagWrapper, {
+    minWidth: minWidth,
+    center: center
+  }, finalIcon && /*#__PURE__*/_react.default.createElement(_StatusTag.IconWrapper, {
+    iconColor: finalIconColor,
+    hoverColor: finalHoverColor,
+    disableHoverColor: finalDisableHoverColor,
+    style: iconStyle,
+    isCustomIcon: typeof (variantData === null || variantData === void 0 ? void 0 : variantData.icon) === 'function'
+  }, finalIcon), text && /*#__PURE__*/_react.default.createElement(_StatusTag.StatusText, {
+    style: textStyle
+  }, text)));
+
+  // Wrap with InfoIcon tooltip if tooltip is provided
+  if (tooltip) {
+    return /*#__PURE__*/_react.default.createElement(_InfoIcon.default, _extends({
+      title: tooltip,
+      position: "top",
+      noIcon: true,
+      noMarginLeft: true,
+      noMarginRight: true
+    }, tooltipProps), content);
+  }
+  return content;
+};
+exports.StatusTag = StatusTag;
+var _default = exports.default = StatusTag;

package/dist/components/StatusTag/StatusTag.stories.js

@@ -0,0 +1,262 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithTooltips = exports.WithHoverColor = exports.UsingChildren = exports.TableUniformity = exports.Default = exports.CustomIcon = exports.Clickable = exports.AllVariants = exports.AllStatesInRow = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StatusTag = _interopRequireDefault(require("./StatusTag"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _Icon = require("../Icon/Icon.style");
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _global = _interopRequireDefault(require("../../styles/global"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Components Library/StatusTag',
+  component: _StatusTag.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: {
+    variant: {
+      control: {
+        type: 'select'
+      },
+      options: ['pending', 'initiated', 'confirmed', 'declined', 'paid', null],
+      description: 'Built-in variant (uses default icon and colors)'
+    },
+    text: {
+      control: 'text',
+      description: 'Text to display next to the icon'
+    },
+    icon: {
+      control: false,
+      description: 'Custom icon component (overrides variant icon)'
+    },
+    tooltip: {
+      control: 'text',
+      description: 'Tooltip text (uses InfoIcon)'
+    },
+    iconColor: {
+      control: 'color',
+      description: 'Default icon color (defaults to grey)'
+    },
+    hoverColor: {
+      control: 'color',
+      description: 'Icon color on hover'
+    },
+    disableHoverColor: {
+      control: 'boolean',
+      description: 'Disable hover color change (for pre-colored icons)',
+      defaultValue: false
+    },
+    minWidth: {
+      control: 'text',
+      description: 'Minimum width (for table uniformity)'
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Click handler'
+    }
+  }
+}; // Default example
+const Default = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Pending"
+}));
+
+// All variants
+exports.Default = Default;
+const AllVariants = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Pending"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "initiated",
+  text: "Initiated"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "confirmed",
+  text: "Confirmed"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "declined",
+  text: "Declined"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "paid",
+  text: "Paid"
+})));
+
+// Using children instead of text prop
+exports.AllVariants = AllVariants;
+const UsingChildren = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending"
+}, "Pending"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "initiated"
+}, "Initiated"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "paid"
+}, "Paid")));
+
+// With hover color change
+exports.UsingChildren = UsingChildren;
+const WithHoverColor = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+  style: {
+    marginBottom: '8px',
+    fontSize: '14px'
+  }
+}, "Pending (hover to see color change)"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Pending"
+})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h4", {
+  style: {
+    marginBottom: '8px',
+    fontSize: '14px'
+  }
+}, "Custom hover color"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Custom Hover",
+  hoverColor: _colors.default.blue
+}))));
+
+// Custom icon
+exports.WithHoverColor = WithHoverColor;
+const CustomIcon = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: _Icon.iconsMap.check,
+    size: 12
+  }),
+  text: "Custom Icon",
+  hoverColor: _colors.default.freshGreen
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  icon: /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: _Icon.iconsMap.warning,
+    size: 12
+  }),
+  text: "Warning",
+  hoverColor: _colors.default.warningOrange
+})));
+
+// With tooltips
+exports.CustomIcon = CustomIcon;
+const WithTooltips = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Pending",
+  tooltip: "This transaction is awaiting confirmation"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "initiated",
+  text: "Initiated",
+  tooltip: "Transaction has been initiated and is in progress"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "paid",
+  text: "Paid",
+  tooltip: "Payment has been successfully completed"
+})));
+
+// Table uniformity
+exports.WithTooltips = WithTooltips;
+const TableUniformity = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px'
+  }
+}, /*#__PURE__*/_react.default.createElement("h4", {
+  style: {
+    marginBottom: '8px',
+    fontSize: '14px'
+  }
+}, "All tags with same minWidth (for table columns)"), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Pending",
+  minWidth: "120px",
+  center: true
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "initiated",
+  text: "Initiated",
+  minWidth: "120px",
+  center: true
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "confirmed",
+  text: "Confirmed",
+  minWidth: "120px",
+  center: true
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "declined",
+  text: "Declined",
+  minWidth: "120px",
+  center: true
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "paid",
+  text: "Paid",
+  minWidth: "120px",
+  center: true
+})));
+
+// Clickable
+exports.TableUniformity = TableUniformity;
+const Clickable = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Clickable Pending",
+  onClick: () => alert('Clicked!')
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "paid",
+  text: "Clickable Paid",
+  onClick: () => alert('Paid clicked!')
+})));
+
+// All states in a row
+exports.Clickable = Clickable;
+const AllStatesInRow = () => /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+  style: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: '12px'
+  }
+}, /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "pending",
+  text: "Pending"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "initiated",
+  text: "Initiated"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "confirmed",
+  text: "Confirmed"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "declined",
+  text: "Declined"
+}), /*#__PURE__*/_react.default.createElement(_StatusTag.default, {
+  variant: "paid",
+  text: "Paid"
+})));
+exports.AllStatesInRow = AllStatesInRow;

package/dist/components/StatusTag/StatusTag.styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatusText = exports.StatusTagWrapper = exports.StatusTagContainer = exports.PaidIconWrapper = exports.IconWrapper = exports.DeclinedIconWrapper = 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 StatusTagContainer = exports.StatusTagContainer = _styledComponents.default.div.withConfig({
+  displayName: "StatusTagstyles__StatusTagContainer",
+  componentId: "sc-24azs1-0"
+})(["display:inline-flex;cursor:", ";transition:opacity 0.2s ease;&:hover{opacity:", ";}"], props => props.hasClick ? 'pointer' : 'default', props => props.hasClick ? 0.8 : 1);
+const StatusTagWrapper = exports.StatusTagWrapper = _styledComponents.default.div.withConfig({
+  displayName: "StatusTagstyles__StatusTagWrapper",
+  componentId: "sc-24azs1-1"
+})(["display:flex;align-items:center;gap:6px;padding:6px 10px;background-color:transparent;border:1px solid ", ";border-radius:4px;white-space:nowrap;min-width:", ";justify-content:", ";"], _colors.default.lightGrey, props => props.minWidth || 'auto', props => props.center ? 'center' : 'flex-start');
+const IconWrapper = exports.IconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "StatusTagstyles__IconWrapper",
+  componentId: "sc-24azs1-2"
+})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;width:12px;height:12px;color:", ";transition:color 0.2s ease;svg{width:100%;height:100%;display:block;}", " ", ""], props => props.iconColor || _colors.default.grey2, props => !props.isCustomIcon && "\n    svg path,\n    svg circle,\n    svg rect,\n    svg line {\n      ".concat(!props.disableHoverColor ? "fill: currentColor;" : '', "\n    }\n  "), props => !props.disableHoverColor && props.hoverColor && "\n    ".concat(StatusTagContainer, ":hover & {\n      color: ").concat(props.hoverColor, ";\n    }\n  "));
+const StatusText = exports.StatusText = _styledComponents.default.span.withConfig({
+  displayName: "StatusTagstyles__StatusText",
+  componentId: "sc-24azs1-3"
+})(["font-size:12px;font-weight:600;line-height:18px;color:", ";letter-spacing:0.6px;"], _colors.default.black);
+
+// Paid icon wrapper (check + green circle)
+const PaidIconWrapper = exports.PaidIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "StatusTagstyles__PaidIconWrapper",
+  componentId: "sc-24azs1-4"
+})(["width:12px;height:12px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.2s ease;svg{width:8px;height:8px;}svg path{stroke:", ";}", ""], props => props.iconColor || _colors.default.grey2, _colors.default.white, props => !props.disableHoverColor && props.hoverColor && "\n    ".concat(StatusTagContainer, ":hover & {\n      background-color: ").concat(props.hoverColor, ";\n    }\n  "));
+
+// Declined icon wrapper (cross + red circle)
+const DeclinedIconWrapper = exports.DeclinedIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "StatusTagstyles__DeclinedIconWrapper",
+  componentId: "sc-24azs1-5"
+})(["width:12px;height:12px;border-radius:50%;background-color:", ";display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.2s ease;svg{width:6px;height:6px;}svg path{stroke:", ";}", ""], props => props.iconColor || _colors.default.grey2, _colors.default.white, props => !props.disableHoverColor && props.hoverColor && "\n    ".concat(StatusTagContainer, ":hover & {\n      background-color: ").concat(props.hoverColor, ";\n    }\n  "));