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

package/dist/components/Icon/Icon.stories.js

@@ -0,0 +1,108 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AllSvgIcons = exports.AllIcons = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Icon = require("./Icon.style");
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = _interopRequireDefault(require("../../styles/colors"));
+var _transferIcon = require("../../static/images/transfer-icon.svg");
+var _plusIcon = require("../../static/images/plus-icon.svg");
+var _documentIcon = require("../../static/images/document-icon.svg");
+var _sentIcon = require("../../static/images/sent-icon.svg");
+var _searchIcon = require("../../static/images/search-icon.svg");
+var _checkIcon = require("../../static/images/check-icon.svg");
+var _crossIcon = require("../../static/images/cross-icon.svg");
+var _copy_icon = require("../../static/images/copy_icon.svg");
+var _usdcLogo = require("../../static/images/usdc-logo.svg");
+var _warningFilled = require("../../static/images/warning-filled.svg");
+var _download_icon = require("../../static/images/download_icon.svg");
+var _profInv = require("../../static/images/prof-inv.svg");
+var _upload = require("../../static/images/upload.svg");
+var _refresh = require("../../static/images/refresh.svg");
+var _logo = require("../../static/images/logo.svg");
+var _earlyAdopter = require("../../static/images/early-adopter.svg");
+var _eth = require("../../static/images/eth.svg");
+var _eur = require("../../static/images/eur.svg");
+var _faceScanIcon = require("../../static/images/face-scan-icon.svg");
+var _adminBadge = require("../../static/images/admin-badge.svg");
+var _arrowDownBlack = require("../../static/images/arrow-down-black.svg");
+var _capsLock = require("../../static/images/caps-lock.svg");
+var _Glassess = require("../../static/images/Glassess.svg");
+var _VerifiedBadge = require("../../static/images/VerifiedBadge.svg");
+var _playBtn = require("../../static/images/play-btn.svg");
+var _mangopay = require("../../static/images/mangopay.svg");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// SVG Icons from static/images
+
+// Map of all SVG icons for easy iteration
+const svgIcons = {
+  'transfer-icon': _transferIcon.ReactComponent,
+  'plus-icon': _plusIcon.ReactComponent,
+  'document-icon': _documentIcon.ReactComponent,
+  'sent-icon': _sentIcon.ReactComponent,
+  'search-icon': _searchIcon.ReactComponent,
+  'check-icon': _checkIcon.ReactComponent,
+  'cross-icon': _crossIcon.ReactComponent,
+  'copy-icon': _copy_icon.ReactComponent,
+  'usdc-logo': _usdcLogo.ReactComponent,
+  'warning-filled': _warningFilled.ReactComponent,
+  'download-icon': _download_icon.ReactComponent,
+  'prof-inv': _profInv.ReactComponent,
+  upload: _upload.ReactComponent,
+  refresh: _refresh.ReactComponent,
+  logo: _logo.ReactComponent,
+  'early-adopter': _earlyAdopter.ReactComponent,
+  eth: _eth.ReactComponent,
+  eur: _eur.ReactComponent,
+  'face-scan-icon': _faceScanIcon.ReactComponent,
+  'admin-badge': _adminBadge.ReactComponent,
+  'arrow-down-black': _arrowDownBlack.ReactComponent,
+  'caps-lock': _capsLock.ReactComponent,
+  glasses: _Glassess.ReactComponent,
+  'verified-badge': _VerifiedBadge.ReactComponent,
+  'play-btn': _playBtn.ReactComponent,
+  mangopay: _mangopay.ReactComponent
+};
+const IconsGrid = _styledComponents.default.div.withConfig({
+  displayName: "Iconstories__IconsGrid",
+  componentId: "sc-ue519l-0"
+})(["display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:24px;padding:24px;"]);
+const IconBox = _styledComponents.default.div.withConfig({
+  displayName: "Iconstories__IconBox",
+  componentId: "sc-ue519l-1"
+})(["display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;border:1px solid ", ";border-radius:4px;background:", ";&:hover{background:", ";}"], _colors.default.lightGrey, _colors.default.white, _colors.default.lightGrey);
+const IconName = _styledComponents.default.span.withConfig({
+  displayName: "Iconstories__IconName",
+  componentId: "sc-ue519l-2"
+})(["font-family:'Open Sans',sans-serif;font-size:11px;color:", ";text-align:center;word-break:break-word;"], _colors.default.grey2);
+var _default = exports.default = {
+  title: 'Components Library/Icon',
+  component: _Icon.Icon,
+  decorators: [Story => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(Story, null))]
+};
+const AllIcons = () => /*#__PURE__*/_react.default.createElement(IconsGrid, null, Object.entries(_Icon.iconsMap).map(_ref => {
+  let [name, iconCode] = _ref;
+  return /*#__PURE__*/_react.default.createElement(IconBox, {
+    key: name
+  }, /*#__PURE__*/_react.default.createElement(_Icon.Icon, {
+    icon: iconCode,
+    size: 24,
+    color: _colors.default.dark
+  }), /*#__PURE__*/_react.default.createElement(IconName, null, name));
+}));
+exports.AllIcons = AllIcons;
+const SvgIconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Iconstories__SvgIconWrapper",
+  componentId: "sc-ue519l-3"
+})(["width:32px;height:32px;display:flex;align-items:center;justify-content:center;svg{max-width:100%;max-height:100%;}"]);
+const AllSvgIcons = () => /*#__PURE__*/_react.default.createElement(IconsGrid, null, Object.entries(svgIcons).map(_ref2 => {
+  let [name, SvgComponent] = _ref2;
+  return /*#__PURE__*/_react.default.createElement(IconBox, {
+    key: name
+  }, /*#__PURE__*/_react.default.createElement(SvgIconWrapper, null, /*#__PURE__*/_react.default.createElement(SvgComponent, null)), /*#__PURE__*/_react.default.createElement(IconName, null, name));
+}));
+exports.AllSvgIcons = AllSvgIcons;

package/dist/components/Input/MultiSelect.js

@@ -0,0 +1,187 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MultiSelect = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactSelect = _interopRequireWildcard(require("react-select"));
+var _Input = require("./Input.styles");
+var _Select = require("./Select.styles");
+const _excluded = ["id", "name", "label", "options", "search", "error", "touched", "value", "disabled", "menuHeight", "placeholder"];
+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); }
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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 DropdownIndicator = props => {
+  const {
+    selectProps
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_reactSelect.components.DropdownIndicator, props, /*#__PURE__*/_react.default.createElement(_Select.SelectIcon, {
+    isMenuOpen: selectProps.menuIsOpen
+  }));
+};
+DropdownIndicator.propTypes = {
+  selectProps: _propTypes.default.instanceOf(Object).isRequired
+};
+const SelectMenuListWithScroll = props => {
+  const {
+    children,
+    selectProps
+  } = props;
+  const {
+    maxMenuHeight = 300
+  } = selectProps;
+  return /*#__PURE__*/_react.default.createElement(_Select.SelectMenuList, {
+    autoHeight: true,
+    autoHeightMax: maxMenuHeight,
+    fullHeight: true
+  }, children);
+};
+SelectMenuListWithScroll.propTypes = {
+  children: _propTypes.default.node.isRequired
+};
+const MultiSelect = props => {
+  const {
+      id,
+      name,
+      label,
+      options,
+      search,
+      error,
+      touched,
+      value,
+      disabled,
+      menuHeight,
+      placeholder
+    } = props,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  const hasValue = (value === null || value === void 0 ? void 0 : value.length) > 0;
+  const [labelUp, setLabelUp] = (0, _react.useState)(hasValue);
+  const [hasFocus, setHasFocus] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const currentHasValue = (value === null || value === void 0 ? void 0 : value.length) > 0;
+    setLabelUp(hasFocus || currentHasValue);
+  }, [hasFocus, value]);
+  const onFocus = () => {
+    props.onFocus && props.onFocus({
+      name,
+      value
+    });
+    setHasFocus(true);
+  };
+  const onBlur = () => {
+    props.onBlur && props.onBlur({
+      name,
+      value
+    });
+    setTimeout(() => {
+      setHasFocus(false);
+    }, 1);
+  };
+  const onChange = selectedOptions => {
+    const newValue = selectedOptions ? selectedOptions.map(opt => opt.value) : [];
+    props.onChange && props.onChange({
+      name,
+      value: newValue
+    });
+    setTimeout(() => {
+      setHasFocus(true);
+    }, 1);
+  };
+
+  // Get selected options from value array
+  const selectedOptions = options === null || options === void 0 ? void 0 : options.filter(option => value === null || value === void 0 ? void 0 : value.includes(option.value));
+  return /*#__PURE__*/_react.default.createElement(_Input.Wrapper, null, label && /*#__PURE__*/_react.default.createElement(_Input.Label, {
+    isUp: labelUp,
+    active: hasFocus,
+    error: error && touched,
+    htmlFor: id
+  }, label), /*#__PURE__*/_react.default.createElement(_reactSelect.default, _extends({}, otherProps, {
+    id: id,
+    name: name,
+    options: options,
+    isDisabled: disabled,
+    onChange: onChange,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    value: selectedOptions,
+    placeholder: placeholder,
+    isSearchable: search,
+    isMulti: true,
+    maxMenuHeight: menuHeight,
+    styles: {
+      control: () => _Select.SelectControl,
+      menu: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        marginTop: 0,
+        zIndex: 1000,
+        SelectMenu: _Select.SelectMenu
+      }),
+      option: (baseStyle, state) => _objectSpread({
+        fontWeight: state.isSelected || state.isFocused ? 'bold' : 'normal',
+        cursor: 'pointer'
+      }, _Select.SelectOption),
+      selectContainer: () => _Select.SelectContainer,
+      valueContainer: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        padding: 0
+      }),
+      multiValue: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        backgroundColor: '#f0f0f0',
+        borderRadius: '4px'
+      }),
+      multiValueLabel: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        fontSize: '14px',
+        padding: '2px 6px'
+      }),
+      multiValueRemove: baseStyle => _objectSpread(_objectSpread({}, baseStyle), {}, {
+        cursor: 'pointer',
+        ':hover': {
+          backgroundColor: '#e0e0e0'
+        }
+      })
+    },
+    components: {
+      DropdownIndicator,
+      IndicatorSeparator: null,
+      MenuList: SelectMenuListWithScroll
+    }
+  })));
+};
+exports.MultiSelect = MultiSelect;
+MultiSelect.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  name: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string,
+  error: _propTypes.default.bool,
+  touched: _propTypes.default.bool,
+  value: _propTypes.default.arrayOf(_propTypes.default.string),
+  options: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    value: _propTypes.default.string.isRequired,
+    label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired
+  })).isRequired,
+  search: _propTypes.default.bool,
+  placeholder: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func
+};
+MultiSelect.defaultProps = {
+  label: '',
+  value: [],
+  search: true,
+  error: false,
+  touched: false,
+  placeholder: '',
+  onChange: () => {},
+  onBlur: () => {},
+  onFocus: () => {}
+};
+var _default = exports.default = MultiSelect;

package/dist/components/Input/MultiSelect.stories.js

@@ -0,0 +1,141 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithPreselectedValues = exports.WithPlaceholder = exports.WithManyOptions = exports.Disabled = exports.Default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _MultiSelect = require("./MultiSelect");
+var _global = _interopRequireDefault(require("../../styles/global"));
+var _ComponentWrapper = require("../ComponentWrapper/ComponentWrapper.styles");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+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); }
+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); }
+const StoryContainer = _styledComponents.default.div.withConfig({
+  displayName: "MultiSelectstories__StoryContainer",
+  componentId: "sc-1vk8pre-0"
+})(["max-width:400px;padding:40px 20px;"]);
+var _default = exports.default = {
+  title: 'Components Library/Inputs/MultiSelect',
+  component: _MultiSelect.MultiSelect,
+  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 countryOptions = [{
+  key: 'us',
+  value: 'us',
+  label: 'United States'
+}, {
+  key: 'uk',
+  value: 'uk',
+  label: 'United Kingdom'
+}, {
+  key: 'de',
+  value: 'de',
+  label: 'Germany'
+}, {
+  key: 'fr',
+  value: 'fr',
+  label: 'France'
+}, {
+  key: 'es',
+  value: 'es',
+  label: 'Spain'
+}, {
+  key: 'it',
+  value: 'it',
+  label: 'Italy'
+}, {
+  key: 'nl',
+  value: 'nl',
+  label: 'Netherlands'
+}, {
+  key: 'ch',
+  value: 'ch',
+  label: 'Switzerland'
+}];
+const tagOptions = [{
+  key: 'tech',
+  value: 'tech',
+  label: 'Technology'
+}, {
+  key: 'finance',
+  value: 'finance',
+  label: 'Finance'
+}, {
+  key: 'health',
+  value: 'health',
+  label: 'Healthcare'
+}, {
+  key: 'education',
+  value: 'education',
+  label: 'Education'
+}, {
+  key: 'retail',
+  value: 'retail',
+  label: 'Retail'
+}];
+
+// Controlled wrapper for interactive stories
+const ControlledMultiSelect = props => {
+  const [value, setValue] = (0, _react.useState)(props.value || []);
+  const handleChange = _ref => {
+    let {
+      value: newValue
+    } = _ref;
+    setValue(newValue);
+    console.log('Selected values:', newValue);
+  };
+  return /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, _extends({}, props, {
+    value: value,
+    onChange: handleChange
+  }));
+};
+const Default = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+  id: "countries",
+  name: "countries",
+  label: "Select Countries",
+  options: countryOptions
+});
+exports.Default = Default;
+const WithPreselectedValues = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+  id: "countries",
+  name: "countries",
+  label: "Select Countries",
+  options: countryOptions,
+  value: ['us', 'de']
+});
+exports.WithPreselectedValues = WithPreselectedValues;
+const WithPlaceholder = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+  id: "tags",
+  name: "tags",
+  options: tagOptions,
+  placeholder: "Choose tags..."
+});
+exports.WithPlaceholder = WithPlaceholder;
+const Disabled = () => /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+  id: "countries",
+  name: "countries",
+  label: "Select Countries",
+  options: countryOptions,
+  value: ['uk', 'fr'],
+  disabled: true
+});
+exports.Disabled = Disabled;
+const WithManyOptions = () => {
+  const manyOptions = Array.from({
+    length: 50
+  }, (_, i) => ({
+    key: "option-".concat(i),
+    value: "option-".concat(i),
+    label: "Option ".concat(i + 1)
+  }));
+  return /*#__PURE__*/_react.default.createElement(ControlledMultiSelect, {
+    id: "many",
+    name: "many",
+    label: "Select Multiple",
+    options: manyOptions,
+    menuHeight: 200
+  });
+};
+exports.WithManyOptions = WithManyOptions;

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;