@stokr/components-library 2.3.71 → 2.3.73

package/dist/components/2FA/enable-2fa-flow.js

@@ -88,9 +88,9 @@ const Enable2FAFlow = _ref => {
     noPadding: true
   }, showSuccess ? /*#__PURE__*/_react.default.createElement(_Sucess2FA.default, {
     onClick: () => {
+      onSuccess && onSuccess();
       setshowSuccess(false);
       setShowFlow(false);
-      onSuccess && onSuccess();
     },
     subTitleLeft: "Your log in 2FA authentication is now set",
     textRight: "You will now be asked for your 2FA code next time you log in."

package/dist/components/InfoBox/InfoBox.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InfoBox = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const VARIANTS = {
+  warning: {
+    background: '#FFFBEB',
+    border: _colors.default.warningOrange,
+    iconColor: 'black'
+  },
+  info: {
+    background: '#F8FAFC',
+    border: _colors.default.blueDark,
+    iconColor: 'black'
+  },
+  error: {
+    background: '#FDEDEC',
+    border: _colors.default.darkRed,
+    iconColor: 'black'
+  }
+};
+const Container = _styledComponents.default.div.withConfig({
+  displayName: "InfoBox__Container",
+  componentId: "sc-fb6dfq-0"
+})(["position:relative;display:flex;overflow:hidden;align-items:flex-start;align-items:center;gap:12px;padding:12px 20px 12px 16px;background:", ";border:1px solid ", ";border-radius:8px;font-size:12px;line-height:18px;letter-spacing:0.6px;font-weight:400;color:", ";&:before{content:'';display:block;width:4px;position:absolute;height:100%;left:0px;background:", ";}"], props => props.$bg, props => props.$border, _colors.default.black, props => props.$border);
+const DefaultIcon = _styledComponents.default.i.attrs({
+  className: 'ion ion-md-information-circle-outline'
+}).withConfig({
+  displayName: "InfoBox__DefaultIcon",
+  componentId: "sc-fb6dfq-1"
+})(["flex-shrink:0;font-size:18px;line-height:18px;color:", ";margin-top:1px;"], props => props.$color);
+const CustomIconWrapper = _styledComponents.default.span.withConfig({
+  displayName: "InfoBox__CustomIconWrapper",
+  componentId: "sc-fb6dfq-2"
+})(["flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;"]);
+const Content = _styledComponents.default.div.withConfig({
+  displayName: "InfoBox__Content",
+  componentId: "sc-fb6dfq-3"
+})(["flex:1;min-width:0;"]);
+
+/**
+ * InfoBox - A flexible alert/info banner with variant support.
+ *
+ * @param {'warning'|'info'|'error'} variant - Visual style variant
+ * @param {node} children - Content to display (supports mixed bold/normal text via JSX)
+ * @param {node} icon - Custom icon node; when provided, replaces the default circled "i"
+ * @param {object} style - Optional inline styles for the container
+ * @param {string} className - Optional className for the container
+ */
+const InfoBox = _ref => {
+  let {
+    variant = 'warning',
+    children,
+    icon,
+    style,
+    className
+  } = _ref;
+  const theme = VARIANTS[variant] || VARIANTS.warning;
+  const renderIcon = () => {
+    if (icon) {
+      return /*#__PURE__*/_react.default.createElement(CustomIconWrapper, null, icon);
+    }
+    return /*#__PURE__*/_react.default.createElement(DefaultIcon, {
+      $color: theme.iconColor
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(Container, {
+    $bg: theme.background,
+    $border: theme.border,
+    style: style,
+    className: className
+  }, renderIcon(), /*#__PURE__*/_react.default.createElement(Content, null, children));
+};
+exports.InfoBox = InfoBox;
+var _default = exports.default = InfoBox;

package/dist/components/Payment/PaymentDetailsCard.js

@@ -8,7 +8,9 @@ var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = _interopRequireDefault(require("../../styles/colors"));
 var _InfoIcon = require("../InfoIcon/InfoIcon");
+var _ArrowSimple = require("../icons/ArrowSimple");
 var _formatCurrencyValue = require("../../utils/formatCurrencyValue");
+var _externalLinkIcon = _interopRequireDefault(require("../../static/images/external-link-icon.svg"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const CardContainer = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__CardContainer",
@@ -17,7 +19,7 @@ const CardContainer = _styledComponents.default.div.withConfig({
 const CardTitle = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__CardTitle",
   componentId: "sc-e830fo-1"
-})(["font-size:12px;letter-spacing:0.6px;font-weight:600;color:", ";background:#f1f5f9;padding:12px 24px;margin:-20px -32px 20px -32px;border-radius:9px 9px 0 0;border-bottom:1px solid ", ";text-align:start;"], _colors.default.futureBlack, _colors.default.lightGrey);
+})(["font-size:10px;letter-spacing:1.12px;font-weight:500;color:", ";background:", ";padding:12px 24px;margin:-20px -32px 20px -32px;border-radius:9px 9px 0 0;text-align:start;text-transform:uppercase;"], _colors.default.white, _colors.default.futureBlack);
 const AmountSection = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__AmountSection",
   componentId: "sc-e830fo-2"
@@ -25,75 +27,118 @@ const AmountSection = _styledComponents.default.div.withConfig({
 const AmountLabel = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__AmountLabel",
   componentId: "sc-e830fo-3"
-})(["font-size:11px;font-weight:400;line-height:20px;text-transform:uppercase;letter-spacing:2px;margin-bottom:12px;color:", ";text-align:start;"], _colors.default.futureBlack);
+})(["font-size:11px;font-weight:400;line-height:20px;text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;color:", ";text-align:start;"], _colors.default.grayBlue);
+const AmountSubtitle = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__AmountSubtitle",
+  componentId: "sc-e830fo-4"
+})(["font-size:12px;font-weight:400;line-height:18px;letter-spacing:0.6px;color:#90A1B9;margin-top:8px;text-align:start;"]);
 const AmountDisplay = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__AmountDisplay",
-  componentId: "sc-e830fo-4"
+  componentId: "sc-e830fo-5"
 })(["display:flex;align-items:center;gap:16px;"]);
+const AmountLeft = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__AmountLeft",
+  componentId: "sc-e830fo-6"
+})(["display:flex;align-items:center;gap:16px;flex:1;min-width:0;"]);
+const CurrencyTicker = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__CurrencyTicker",
+  componentId: "sc-e830fo-7"
+})(["font-size:22px;font-weight:300;color:#90A1B9;letter-spacing:0.8px;line-height:28px;flex-shrink:0;margin-left:auto;"]);
 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);
+  componentId: "sc-e830fo-8"
+})(["width:24px;height:24px;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"
+  componentId: "sc-e830fo-9"
 })(["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:600;text-transform:uppercase;line-height:40px;letter-spacing:1.5px;word-wrap:break-word;color:", ";"], _colors.default.futureBlack);
+  componentId: "sc-e830fo-10"
+})(["font-size:34px;font-weight:300;text-transform:uppercase;line-height:40px;letter-spacing:1.5px;word-wrap:break-word;color:", ";"], _colors.default.futureBlack);
 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);
+  componentId: "sc-e830fo-11"
+})(["border:none;border-top:1px solid #E2E8F0;margin:20px 0px;"]);
+const ArrowSeparatorWrapper = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__ArrowSeparatorWrapper",
+  componentId: "sc-e830fo-12"
+})(["position:relative;display:flex;align-items:center;margin:20px 0;&::before,&::after{content:'';flex:1;height:1px;background:#E2E8F0;}"]);
+const ArrowCircle = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__ArrowCircle",
+  componentId: "sc-e830fo-13"
+})(["display:flex;align-items:center;justify-content:center;margin:0 16px;height:0;color:#CBD5E1;"]);
+const SectionHeader = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__SectionHeader",
+  componentId: "sc-e830fo-14"
+})(["font-size:11px;font-weight:400;line-height:20px;text-transform:uppercase;letter-spacing:2px;color:", ";text-align:start;margin-bottom:4px;"], _colors.default.grayBlue);
 const DetailsSection = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__DetailsSection",
-  componentId: "sc-e830fo-9"
-})(["margin-bottom:", ";"], props => props.noMargin ? '0' : '24px');
+  componentId: "sc-e830fo-15"
+})(["margin-bottom:", ";"], props => props.noMargin ? '0' : '20px');
 const DetailRow = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__DetailRow",
-  componentId: "sc-e830fo-10"
-})(["display:flex;justify-content:space-between;align-items:flex-start;padding:10px 0;border-bottom:1px solid #f1f5f9;&:first-child{padding-top:0;}&:last-child{padding:10px 0 0 0;border-bottom:none;}"]);
+  componentId: "sc-e830fo-16"
+})(["display:flex;justify-content:space-between;align-items:flex-start;padding:6px 0;&:first-child{padding-top:0;}&:last-child{padding:6px 0 0 0;}"]);
 const DetailLabel = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__DetailLabel",
-  componentId: "sc-e830fo-11"
-})(["display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;line-height:20px;letter-spacing:0.5px;color:#56606f;i{font-size:14px;}"]);
+  componentId: "sc-e830fo-17"
+})(["display:flex;align-items:center;gap:10px;font-size:14px;font-weight:400;line-height:20px;letter-spacing:0.5px;color:#56606f;i{font-size:14px;}"]);
 const DetailValue = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__DetailValue",
-  componentId: "sc-e830fo-12"
-})(["font-size:14px;font-weight:600;line-height:20px;letter-spacing:0.5px;word-wrap:break-word;text-align:right;max-width:60%;color:", ";"], _colors.default.black);
+  componentId: "sc-e830fo-18"
+})(["font-size:14px;font-weight:600;line-height:20px;letter-spacing:0.5px;word-wrap:break-word;text-align:right;max-width:60%;color:", ";"], _colors.default.futureBlack);
 const PlaceholderValue = _styledComponents.default.span.withConfig({
   displayName: "PaymentDetailsCard__PlaceholderValue",
-  componentId: "sc-e830fo-13"
-})(["color:#62748e;font-weight:300;font-size:14px;letter-spacing:0.5px;"]);
+  componentId: "sc-e830fo-19"
+})(["color:", ";font-weight:300;font-size:14px;letter-spacing:0.5px;"], _colors.default.grayBlue);
+const ExternalLink = _styledComponents.default.a.withConfig({
+  displayName: "PaymentDetailsCard__ExternalLink",
+  componentId: "sc-e830fo-20"
+})(["color:", ";text-decoration:underline;font-size:14px;font-weight:600;letter-spacing:0.5px;display:inline-flex;align-items:center;gap:6px;&:hover{text-decoration:underline;}svg{width:12px;height:12px;flex-shrink:0;}"], _colors.default.futureBlack);
 const InfoSectionContainer = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__InfoSectionContainer",
-  componentId: "sc-e830fo-14"
+  componentId: "sc-e830fo-21"
 })(["margin-top:24px;"]);
-
-/**
- * Renders a single detail row
- */
+const BannerSlot = _styledComponents.default.div.withConfig({
+  displayName: "PaymentDetailsCard__BannerSlot",
+  componentId: "sc-e830fo-22"
+})(["margin-top:8px;"]);
+const ExternalLinkIconImg = _styledComponents.default.img.withConfig({
+  displayName: "PaymentDetailsCard__ExternalLinkIconImg",
+  componentId: "sc-e830fo-23"
+})(["width:12px;height:12px;flex-shrink:0;"]);
 const DetailItem = _ref => {
   let {
     label,
     value,
     tooltip,
     placeholder,
-    isCustom
+    isCustom,
+    href,
+    target
   } = _ref;
-  // If value is a custom component (React element), render it directly
   const renderValue = () => {
     if (isCustom && value) {
       return value;
     }
+    if (href) {
+      return /*#__PURE__*/_react.default.createElement(ExternalLink, {
+        href: href,
+        target: target || '_blank',
+        rel: "noopener noreferrer"
+      }, /*#__PURE__*/_react.default.createElement(ExternalLinkIconImg, {
+        src: _externalLinkIcon.default,
+        alt: ""
+      }), value || placeholder || '-');
+    }
     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 "-";
   };
   return /*#__PURE__*/_react.default.createElement(DetailRow, null, /*#__PURE__*/_react.default.createElement(DetailLabel, null, label, tooltip && /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
     containerStyle: {
@@ -105,88 +150,158 @@ const DetailItem = _ref => {
   })), /*#__PURE__*/_react.default.createElement(DetailValue, null, renderValue()));
 };
 
+/**
+ * Renders a single amount block with icon, value, and optional currency ticker.
+ */
+const AmountBlock = _ref2 => {
+  let {
+    config
+  } = _ref2;
+  if (!config) return null;
+  if (/*#__PURE__*/_react.default.isValidElement(config)) {
+    return config;
+  }
+  const {
+    label = 'Amount',
+    subtitle,
+    amount,
+    currency,
+    currencyColor,
+    icon,
+    showTicker = true,
+    banner
+  } = config;
+  const formattedAmount = amount !== undefined && amount !== null && amount !== '' ? (0, _formatCurrencyValue.formatCurrencyValue)(currency, amount, 2, {
+    valueFirst: true
+  }) : null;
+  const currencyIcon = (0, _formatCurrencyValue.getCurrencyIcon)(currency, icon);
+  const logoColor = currencyColor || _colors.default.black;
+  const ticker = showTicker ? (currency || '').toUpperCase() : null;
+  const displayValue = formattedAmount ? formattedAmount.replace(/\s*\S+$/, '') : null;
+  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(AmountSection, null, /*#__PURE__*/_react.default.createElement(AmountLabel, {
+    hasSubtitle: !!subtitle
+  }, label), /*#__PURE__*/_react.default.createElement(AmountDisplay, null, /*#__PURE__*/_react.default.createElement(AmountLeft, null, renderCurrencyLogo(), /*#__PURE__*/_react.default.createElement(AmountValue, null, displayValue !== null ? displayValue : "-")), ticker && /*#__PURE__*/_react.default.createElement(CurrencyTicker, null, ticker)), subtitle && /*#__PURE__*/_react.default.createElement(AmountSubtitle, null, subtitle), banner && /*#__PURE__*/_react.default.createElement(BannerSlot, null, banner));
+};
+
+/**
+ * Renders a group of detail rows, optionally with a section header.
+ */
+const DetailGroup = _ref3 => {
+  let {
+    group,
+    isLast
+  } = _ref3;
+  const {
+    sectionTitle,
+    items
+  } = group;
+  return /*#__PURE__*/_react.default.createElement(DetailsSection, {
+    noMargin: isLast
+  }, sectionTitle && /*#__PURE__*/_react.default.createElement(SectionHeader, null, sectionTitle), items.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,
+    href: detail.href,
+    target: detail.target
+  })));
+};
+
 /**
  * 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 }
+ * @param {string} title - Optional card title (displayed in header bar)
+ * @param {object|node} amountSection - Single amount config or custom node (backward compat)
+ *   - If object: { label, subtitle, amount, currency, currencyColor, icon, showTicker, banner }
  *   - If node: renders custom component
- * @param {array} details - Array of detail items
- *   - { label, value (string|node), tooltip, placeholder, isCustom }
+ * @param {array} amountSections - Array of amount configs for multiple amount blocks
+ *   - Each: { label, subtitle, amount, currency, currencyColor, icon, showTicker, banner }
+ * @param {array} details - Flat array of detail items (backward compat)
+ *   - { label, value, tooltip, placeholder, isCustom, href, target }
+ * @param {array} detailGroups - Array of grouped detail sections with optional headers
+ *   - { sectionTitle, items: [{ label, value, tooltip, placeholder, isCustom, href, target }] }
  * @param {node} infoSection - Optional custom node for bottom info section
  * @param {boolean} showSeparators - Whether to show separators between sections
+ * @param {boolean} showArrowSeparator - Show a down-arrow separator between amount sections
+ * @param {object} containerStyle - Optional inline style for the container
  */
-const PaymentDetailsCard = _ref2 => {
+const PaymentDetailsCard = _ref4 => {
   let {
     title,
     amountSection,
+    amountSections,
     details,
+    detailGroups,
     infoSection,
     showSeparators = true,
+    showArrowSeparator = false,
     containerStyle
-  } = _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
+  } = _ref4;
+  const allAmountSections = amountSections || (amountSection ? [amountSection] : []);
+  const renderAmountSections = () => {
+    if (allAmountSections.length === 0) return null;
+    return allAmountSections.map((section, index) => {
+      const isLast = index === allAmountSections.length - 1;
+      const useArrow = showArrowSeparator && !isLast && allAmountSections.length > 1;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+        key: index
+      }, /*#__PURE__*/_react.default.createElement(AmountBlock, {
+        config: section
+      }), showSeparators && !isLast && (useArrow ? /*#__PURE__*/_react.default.createElement(ArrowSeparatorWrapper, null, /*#__PURE__*/_react.default.createElement(ArrowCircle, null, /*#__PURE__*/_react.default.createElement(_ArrowSimple.ArrowSimple, {
+        direction: "bottom"
+      }))) : /*#__PURE__*/_react.default.createElement(Separator, null)), showSeparators && isLast && (detailGroups || details) && /*#__PURE__*/_react.default.createElement(Separator, null));
     });
-    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
-    })));
+  const renderDetails = () => {
+    if (detailGroups && detailGroups.length > 0) {
+      return detailGroups.map((group, index) => {
+        const isLast = index === detailGroups.length - 1 && !infoSection;
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+          key: group.key || index
+        }, /*#__PURE__*/_react.default.createElement(DetailGroup, {
+          group: group,
+          isLast: isLast
+        }));
+      });
+    }
+    if (details && details.length > 0) {
+      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,
+        href: detail.href,
+        target: detail.target
+      })));
+    }
+    return null;
   };
-
-  // 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, {
     style: containerStyle
-  }, title && /*#__PURE__*/_react.default.createElement(CardTitle, null, title), renderAmountSection(), renderDetailsSection(), renderInfoSection());
+  }, title && /*#__PURE__*/_react.default.createElement(CardTitle, null, title), renderAmountSections(), renderDetails(), renderInfoSection());
 };
 exports.PaymentDetailsCard = PaymentDetailsCard;
 var _default = exports.default = PaymentDetailsCard;

package/dist/index.js

@@ -1553,4 +1553,15 @@ Object.keys(_Snackbar).forEach(function (key) {
       return _Snackbar[key];
     }
   });
+});
+var _InfoBox = require("./components/InfoBox/InfoBox");
+Object.keys(_InfoBox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _InfoBox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _InfoBox[key];
+    }
+  });
 });

package/dist/static/images/external-link-icon.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.33347 1.66667H3.13347C2.38673 1.66667 2.01308 1.66667 1.72787 1.81199C1.47698 1.93982 1.27315 2.14365 1.14533 2.39453C1 2.67975 1 3.05339 1 3.80013V8.8668C1 9.61353 1 9.98673 1.14533 10.2719C1.27315 10.5228 1.47698 10.727 1.72787 10.8548C2.0128 11 2.38599 11 3.13127 11H8.20207C8.94733 11 9.32 11 9.60493 10.8548C9.8558 10.727 10.0603 10.5226 10.1881 10.2717C10.3333 9.9868 10.3333 9.614 10.3333 8.86873V7.66667M11 4.33333V1M11 1H7.66667M11 1L6.33333 5.66667" stroke="#BCBCBC" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/styles/colors.js

@@ -54,6 +54,7 @@ const colors = exports.colors = {
   warningYellow: '#facc33',
   darkRed: '#D2200D',
   warningOrange: '#EB8003',
-  futureBlack: '#021128'
+  futureBlack: '#021128',
+  grayBlue: '#56606F'
 };
 var _default = exports.default = colors;

package/package.json

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