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

package/dist/components/Modal/SideModal.stories.js

@@ -0,0 +1,342 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutCloseButton = exports.WithContent = exports.NoDimmerClose = exports.LongContent = exports.DifferentWidths = exports.Basic = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _SideModal = _interopRequireDefault(require("./SideModal"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _Button = _interopRequireDefault(require("../Button/Button.styles"));
+var _global = _interopRequireDefault(require("../../styles/global"));
+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); }
+var _default = exports.default = {
+  title: 'Components Library/Modal/SideModal',
+  component: _SideModal.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: {
+    isOpen: {
+      control: 'boolean',
+      description: 'Controls modal visibility'
+    },
+    width: {
+      control: {
+        type: 'range',
+        min: 20,
+        max: 90,
+        step: 5
+      },
+      description: 'Width as percentage of screen',
+      defaultValue: 40
+    },
+    minWidth: {
+      control: 'number',
+      description: 'Minimum width in pixels',
+      defaultValue: 400
+    },
+    closeOnDimmerClick: {
+      control: 'boolean',
+      description: 'Close modal when clicking dimmed area',
+      defaultValue: true
+    },
+    showCloseButton: {
+      control: 'boolean',
+      description: 'Show close button',
+      defaultValue: true
+    }
+  }
+}; // Basic example
+const Basic = () => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setIsOpen(true)
+  }, "Open Side Modal"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
+    isOpen: isOpen,
+    onClose: () => setIsOpen(false)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '40px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", {
+    style: {
+      marginBottom: '20px'
+    }
+  }, "Basic Side Modal"), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginBottom: '16px',
+      lineHeight: '1.6'
+    }
+  }, "This is a basic side modal that slides in from the right. It takes 40% of the screen width by default."), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginBottom: '16px',
+      lineHeight: '1.6'
+    }
+  }, "You can close it by clicking the X button, clicking outside, or pressing Escape."), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setIsOpen(false)
+  }, "Close Modal"))));
+};
+
+// Different widths
+exports.Basic = Basic;
+const DifferentWidths = () => {
+  const [isOpen30, setIsOpen30] = (0, _react.useState)(false);
+  const [isOpen40, setIsOpen40] = (0, _react.useState)(false);
+  const [isOpen60, setIsOpen60] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setIsOpen30(true)
+  }, "Open 30% Width"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setIsOpen40(true)
+  }, "Open 40% Width"), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setIsOpen60(true)
+  }, "Open 60% Width")), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
+    isOpen: isOpen30,
+    onClose: () => setIsOpen30(false),
+    width: 30,
+    minWidth: 300
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '40px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "30% Width Modal"), /*#__PURE__*/_react.default.createElement("p", null, "This modal takes 30% of the screen width."))), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
+    isOpen: isOpen40,
+    onClose: () => setIsOpen40(false),
+    width: 40,
+    minWidth: 400
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '40px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "40% Width Modal"), /*#__PURE__*/_react.default.createElement("p", null, "This modal takes 40% of the screen width (default)."))), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
+    isOpen: isOpen60,
+    onClose: () => setIsOpen60(false),
+    width: 60,
+    minWidth: 500
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '40px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "60% Width Modal"), /*#__PURE__*/_react.default.createElement("p", null, "This modal takes 60% of the screen width."))));
+};
+
+// With content example (like payout details)
+exports.DifferentWidths = DifferentWidths;
+const WithContent = () => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setIsOpen(true)
+  }, "View Payout Details"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
+    isOpen: isOpen,
+    onClose: () => setIsOpen(false)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '40px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h1", {
+    style: {
+      fontSize: '24px',
+      fontWeight: 'bold',
+      marginBottom: '8px',
+      textTransform: 'uppercase'
+    }
+  }, "PAYOUT DETAILS"), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      color: _colors.default.grey2,
+      marginBottom: '32px'
+    }
+  }, "View all payout information here."), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '32px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h3", {
+    style: {
+      marginBottom: '16px',
+      fontSize: '16px'
+    }
+  }, "Status"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: _colors.default.freshGreen
+    }
+  }, "\u2713"), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      fontWeight: 'bold'
+    }
+  }, "Initiated"), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      color: _colors.default.grey2,
+      fontSize: '12px'
+    }
+  }, "12. AUG 2025 11:57")), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      color: _colors.default.grey2,
+      fontSize: '14px',
+      marginLeft: '24px'
+    }
+  }, "Awaiting receipt of your funds.")))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      backgroundColor: _colors.default.grey3,
+      padding: '20px',
+      borderRadius: '8px',
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    style: {
+      color: _colors.default.grey2,
+      fontSize: '12px'
+    }
+  }, "Amount"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      fontSize: '20px',
+      fontWeight: 'bold'
+    }
+  }, "13.23145 BTC"))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    style: {
+      color: _colors.default.grey2,
+      fontSize: '12px'
+    }
+  }, "Wallet address"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontWeight: 'bold'
+    }
+  }, "GAYiyo[...]LGXg")), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginBottom: '16px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    style: {
+      color: _colors.default.grey2,
+      fontSize: '12px'
+    }
+  }, "Period"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontWeight: 'bold'
+    }
+  }, "01.10.2025. - 31.11.2025.")), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("label", {
+    style: {
+      color: _colors.default.grey2,
+      fontSize: '12px'
+    }
+  }, "Type"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontWeight: 'bold'
+    }
+  }, "Interest"))), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      backgroundColor: _colors.default.grey3,
+      padding: '20px',
+      borderRadius: '8px',
+      marginBottom: '24px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      color: _colors.default.grey2,
+      fontSize: '14px',
+      marginBottom: '8px'
+    }
+  }, "To modify payout details or cancel this transaction, contact our support team at", ' ', /*#__PURE__*/_react.default.createElement("a", {
+    href: "mailto:support@stokr.io",
+    style: {
+      color: _colors.default.blue,
+      textDecoration: 'none'
+    }
+  }, "support@stokr.io"), ".")), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setIsOpen(false)
+  }, "Close"))));
+};
+
+// Without close button
+exports.WithContent = WithContent;
+const WithoutCloseButton = () => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setIsOpen(true)
+  }, "Open Modal (No Close Button)"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
+    isOpen: isOpen,
+    onClose: () => setIsOpen(false),
+    showCloseButton: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '40px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "Modal Without Close Button"), /*#__PURE__*/_react.default.createElement("p", null, "This modal doesn't have a close button. You can only close it by:"), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "Clicking outside (on the dimmed area)"), /*#__PURE__*/_react.default.createElement("li", null, "Pressing Escape key"), /*#__PURE__*/_react.default.createElement("li", null, "Using the close button below")), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setIsOpen(false)
+  }, "Close Modal"))));
+};
+
+// Don't close on dimmer click
+exports.WithoutCloseButton = WithoutCloseButton;
+const NoDimmerClose = () => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setIsOpen(true)
+  }, "Open Modal (No Dimmer Close)"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
+    isOpen: isOpen,
+    onClose: () => setIsOpen(false),
+    closeOnDimmerClick: false
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '40px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "Modal That Doesn't Close on Dimmer Click"), /*#__PURE__*/_react.default.createElement("p", null, "This modal won't close when you click outside. You must use the close button or Escape key."), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setIsOpen(false)
+  }, "Close Modal"))));
+};
+
+// Long content (scrollable)
+exports.NoDimmerClose = NoDimmerClose;
+const LongContent = () => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  return /*#__PURE__*/_react.default.createElement(_ComponentWrapper.ComponentWrapper, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setIsOpen(true)
+  }, "Open Modal with Long Content"), /*#__PURE__*/_react.default.createElement(_SideModal.default, {
+    isOpen: isOpen,
+    onClose: () => setIsOpen(false)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: '40px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", null, "Long Content Modal"), /*#__PURE__*/_react.default.createElement("p", null, "This modal has scrollable content:"), Array.from({
+    length: 50
+  }, (_, i) => /*#__PURE__*/_react.default.createElement("p", {
+    key: i,
+    style: {
+      marginBottom: '16px'
+    }
+  }, "This is paragraph ", i + 1, ". The modal should be scrollable when content exceeds the viewport height.")), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: () => setIsOpen(false)
+  }, "Close Modal"))));
+};
+exports.LongContent = LongContent;

package/dist/components/Modal/SideModal.styles.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideModalRoot = exports.SideModalBox = exports.Dimmer = 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 SideModalRoot = exports.SideModalRoot = _styledComponents.default.div.withConfig({
+  displayName: "SideModalstyles__SideModalRoot",
+  componentId: "sc-f9ztpn-0"
+})(["position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;"]);
+const Dimmer = exports.Dimmer = _styledComponents.default.div.withConfig({
+  displayName: "SideModalstyles__Dimmer",
+  componentId: "sc-f9ztpn-1"
+})(["position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);display:flex;justify-content:flex-end;align-items:stretch;opacity:", ";transition:opacity 0.3s ease-in-out;pointer-events:", ";"], props => props.isVisible ? 1 : 0, props => props.isVisible ? 'auto' : 'none');
+const SideModalBox = exports.SideModalBox = _styledComponents.default.div.withConfig({
+  displayName: "SideModalstyles__SideModalBox",
+  componentId: "sc-f9ztpn-2"
+})(["position:relative;width:", "%;min-width:", "px;max-width:90%;height:100%;background-color:", ";box-shadow:-2px 0 8px rgba(0,0,0,0.15);display:flex;flex-direction:column;overflow-y:auto;transform:translateX(", ");transition:transform 0.3s ease-in-out;z-index:1;pointer-events:auto;@media (max-width:768px){width:90%;min-width:90%;max-width:90%;}"], props => props.width, props => props.minWidth, _colors.default.white, props => props.isVisible ? '0' : '100%');

package/dist/components/Payment/PaymentDetailsCard.js

@@ -0,0 +1,188 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = 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());
+};
+var _default = exports.default = PaymentDetailsCard;