@stokr/components-library 2.3.65-beta.9 → 2.3.65

package/dist/components/Modal/Modal.js

@@ -80,15 +80,44 @@ const Modal = _ref => {
     isRegisterEntity,
     background,
     maxHeight,
-    boxStyles
+    boxStyles,
+    maxWidth
   } = _ref;
   (0, _react.useEffect)(() => {
-    //if modal open, disable scroll on the background
     if (isOpen) {
+      // Store current scroll position and body width BEFORE any changes
+      const scrollY = window.scrollY;
+      const bodyWidth = document.body.offsetWidth;
+
+      // Calculate scrollbar width
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+
+      // Set CSS variable for fixed elements (like header) to compensate
+      document.documentElement.style.setProperty('--scrollbar-compensation', "".concat(scrollbarWidth, "px"));
+
+      // Lock the body width to prevent any recalculation
+      document.body.style.width = "".concat(bodyWidth, "px");
+      document.body.style.position = 'fixed';
+      document.body.style.top = "-".concat(scrollY, "px");
+      document.body.style.left = '0';
       document.body.style.overflow = 'hidden';
     }
     return () => {
-      document.body.style.overflow = 'unset';
+      if (isOpen) {
+        // Get scroll position from body's top offset
+        const scrollY = Math.abs(parseInt(document.body.style.top || '0', 10));
+
+        // Reset all styles
+        document.documentElement.style.setProperty('--scrollbar-compensation', '0px');
+        document.body.style.width = '';
+        document.body.style.position = '';
+        document.body.style.top = '';
+        document.body.style.left = '';
+        document.body.style.overflow = '';
+
+        // Restore scroll position
+        window.scrollTo(0, scrollY);
+      }
     };
   }, [isOpen]);
   return /*#__PURE__*/_react.default.createElement(_reactPortal.Portal, {
@@ -105,7 +134,7 @@ const Modal = _ref => {
   }, status => /*#__PURE__*/_react.default.createElement(_Modal.ModalRoot, {
     className: className,
     style: getTransitionStyles[status]
-  }, /*#__PURE__*/_react.default.createElement(_global.default, null), /*#__PURE__*/_react.default.createElement(_Modal.Dimmer, {
+  }, /*#__PURE__*/_react.default.createElement(_Modal.Dimmer, {
     background: background,
     open: isOpen,
     kyc: kyc,
@@ -117,7 +146,8 @@ const Modal = _ref => {
     thin: thin,
     isRegisterEntity: isRegisterEntity,
     style: boxStyles,
-    maxHeight: maxHeight
+    maxHeight: maxHeight,
+    maxWidth: maxWidth
   }, /*#__PURE__*/_react.default.createElement(_Modal.ModalClose, {
     onClick: onClose
   }), children)))));
@@ -132,7 +162,10 @@ Modal.propTypes = {
   isOpen: _propTypes.default.bool.isRequired,
   onClose: _propTypes.default.func.isRequired,
   background: _propTypes.default.string,
-  boxStyle: _propTypes.default.object
+  boxStyle: _propTypes.default.object,
+  maxHeight: _propTypes.default.string,
+  /** Max width limit in pixels (e.g., '1200px'). Uses min(percentage, maxWidth) */
+  maxWidth: _propTypes.default.string
 };
 Modal.defaultProps = {
   className: '',

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

@@ -24,12 +24,12 @@ const Dimmer = exports.Dimmer = _styledComponents.default.div.withConfig({
 const Box = exports.Box = _styledComponents.default.div.withConfig({
   displayName: "Modalstyles__Box",
   componentId: "sc-9hc271-2"
-})(["display:inline-block;vertical-align:middle;position:relative;left:0;top:0;width:100%;background-color:", ";font-size:10px;text-align:left;box-shadow:0 2px 20px 0 rgba(0,0,0,0.1);max-height:", ";", " ", " ", " ", " @media screen and (max-width:767px){min-height:100vh;}", ""], _colors.default.white, props => props.maxHeight || 'unset', props => props.fullscreen && "\n    height: 90vh;\n  ", props => props.kyc && "\n    width: 100vw;\n    height: 100vh;\n    max-width: 1024px!important;\n    max-height: 768px!important;\n  ", _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: ", ";\n\n    ", "\n  "])), (0, _grid.default)(12), props => props.thin && "\n      max-width: ".concat((0, _grid.default)(8), ";\n    ")), _rwd.default.XLarge(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    //max-width: ", ";\n\n    ", "\n  "])), (0, _grid.default)(11), props => props.thin && "\n      max-width: ".concat((0, _grid.default)(8), ";\n    ")), _ref => {
+})(["display:inline-block;vertical-align:middle;position:relative;left:0;top:0;width:100%;background-color:", ";font-size:10px;text-align:left;box-shadow:0 2px 20px 0 rgba(0,0,0,0.1);max-height:", ";", " ", " ", " ", " @media screen and (max-width:767px){min-height:100vh;}", " ", ""], _colors.default.white, props => props.maxHeight || 'unset', props => props.fullscreen && "\n    height: 90vh;\n  ", props => props.kyc && "\n    width: 100vw;\n    height: 100vh;\n    max-width: 1024px!important;\n    max-height: 768px!important;\n  ", _rwd.default.Medium(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    max-width: min(", ", ", ");\n\n    ", "\n  "])), (0, _grid.default)(12), props => props.maxWidth || '1200px', props => props.thin && "\n      max-width: min(".concat((0, _grid.default)(8), ", ").concat(props.maxWidth || '800px', ");\n    ")), _rwd.default.XLarge(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-width: min(", ", ", ");\n\n    ", "\n  "])), (0, _grid.default)(12), props => props.maxWidth || '1500px', props => props.thin && "\n      max-width: min(".concat((0, _grid.default)(8), ", ").concat(props.maxWidth || '800px', ");\n    ")), _ref => {
   let {
     isRegisterEntity
   } = _ref;
   return isRegisterEntity && (0, _styledComponents.css)(["max-width:55% !important;height:65vh;"]);
-});
+}, props => props.maxWidth && "\n    max-width: ".concat(props.maxWidth, " !important;\n  "));
 const ModalInnerSmartContractAddress = exports.ModalInnerSmartContractAddress = _styledComponents.default.input.withConfig({
   displayName: "Modalstyles__ModalInnerSmartContractAddress",
   componentId: "sc-9hc271-3"

package/dist/components/Modal/SideModal.js

@@ -30,15 +30,57 @@ const SideModal = _ref => {
   (0, _react.useEffect)(() => {
     // Disable scroll on background when modal is open
     if (isOpen) {
+      // Calculate scrollbar width before hiding it
+      const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
+
+      // Store current scroll position
+      const scrollY = window.scrollY;
+
+      // Apply styles to prevent layout shift
+      document.body.style.position = 'fixed';
+      document.body.style.top = "-".concat(scrollY, "px");
+      document.body.style.left = '0';
+      document.body.style.right = '0';
       document.body.style.overflow = 'hidden';
+      document.body.style.paddingRight = "".concat(scrollbarWidth, "px");
+
+      // Set CSS variable for fixed elements (like headers)
+      document.documentElement.style.setProperty('--scrollbar-compensation', "".concat(scrollbarWidth, "px"));
+
+      // Store scroll position for restoration
+      document.body.dataset.scrollY = scrollY;
+
       // Small delay to trigger animation
       setTimeout(() => setIsVisible(true), 10);
     } else {
-      document.body.style.overflow = 'unset';
+      // Restore scroll position
+      const scrollY = document.body.dataset.scrollY || '0';
+
+      // Reset all body styles
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.left = '';
+      document.body.style.right = '';
+      document.body.style.overflow = '';
+      document.body.style.paddingRight = '';
+
+      // Reset CSS variable
+      document.documentElement.style.setProperty('--scrollbar-compensation', '0px');
+
+      // Restore scroll position
+      window.scrollTo(0, parseInt(scrollY));
       setIsVisible(false);
     }
     return () => {
-      document.body.style.overflow = 'unset';
+      const scrollY = document.body.dataset.scrollY || '0';
+      document.body.style.position = '';
+      document.body.style.top = '';
+      document.body.style.left = '';
+      document.body.style.right = '';
+      document.body.style.overflow = '';
+      document.body.style.paddingRight = '';
+      document.documentElement.style.setProperty('--scrollbar-compensation', '0px');
+      window.scrollTo(0, parseInt(scrollY));
     };
   }, [isOpen]);
 

package/dist/components/Modal/SuccessModal/SuccessModal.js

@@ -0,0 +1,173 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.showSuccess = exports.showProgress = exports.default = exports.SuccessModalComponent = exports.SuccessModal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _client = require("react-dom/client");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _dotlottieReact = require("@lottiefiles/dotlottie-react");
+var _Modal = require("../Modal");
+var _SuccessModal = require("./SuccessModal.styles");
+var _checked = _interopRequireDefault(require("../../../static/animations/checked.lottie"));
+var _progress = _interopRequireDefault(require("../../../static/animations/progress.lottie"));
+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 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 _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 variantConfig = {
+  success: {
+    animation: _checked.default,
+    segment: [0, 50],
+    loop: false
+  },
+  progress: {
+    animation: _progress.default,
+    segment: null,
+    loop: false
+  }
+};
+const SuccessModalComponent = _ref => {
+  let {
+    isOpen,
+    onClose,
+    variant = 'success',
+    title,
+    subtitle,
+    content,
+    animationSrc,
+    loop,
+    autoplay = true,
+    segment,
+    speed = 1,
+    modalProps = {},
+    maxWidth = '800px'
+  } = _ref;
+  const config = variantConfig[variant] || variantConfig.success;
+  const animationSource = animationSrc || config.animation;
+  const animationLoop = loop !== undefined ? loop : config.loop;
+  const animationSegment = segment || config.segment;
+  (0, _react.useEffect)(() => {
+    if (!isOpen) return;
+    const handleKeyDown = e => {
+      if (e.key === 'Escape') {
+        onClose === null || onClose === void 0 || onClose();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, _extends({
+    isOpen: isOpen,
+    onClose: onClose,
+    maxHeight: "90vh",
+    boxStyles: {
+      minHeight: 'unset'
+    },
+    maxWidth: maxWidth
+  }, modalProps), /*#__PURE__*/_react.default.createElement(_SuccessModal.SuccessModalContent, null, /*#__PURE__*/_react.default.createElement(_SuccessModal.AnimationContainer, null, /*#__PURE__*/_react.default.createElement(_dotlottieReact.DotLottieReact, {
+    src: animationSource,
+    loop: animationLoop,
+    autoplay: autoplay,
+    speed: speed,
+    segment: animationSegment,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  })), title && /*#__PURE__*/_react.default.createElement(_SuccessModal.Title, null, title), subtitle && /*#__PURE__*/_react.default.createElement(_SuccessModal.Subtitle, null, subtitle), content && /*#__PURE__*/_react.default.createElement(_SuccessModal.ContentWrapper, null, content)));
+};
+exports.SuccessModal = exports.SuccessModalComponent = SuccessModalComponent;
+SuccessModalComponent.propTypes = {
+  isOpen: _propTypes.default.bool.isRequired,
+  onClose: _propTypes.default.func.isRequired,
+  variant: _propTypes.default.oneOf(['success', 'progress']),
+  title: _propTypes.default.string,
+  subtitle: _propTypes.default.string,
+  content: _propTypes.default.node,
+  animationSrc: _propTypes.default.string,
+  loop: _propTypes.default.bool,
+  autoplay: _propTypes.default.bool,
+  segment: _propTypes.default.arrayOf(_propTypes.default.number),
+  speed: _propTypes.default.number,
+  modalProps: _propTypes.default.object,
+  maxWidth: _propTypes.default.string
+};
+let successContainer = null;
+let successRoot = null;
+const showSuccess = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const {
+    variant = 'success',
+    title = '',
+    subtitle = '',
+    content = null,
+    animationSrc = null,
+    loop,
+    autoplay = true,
+    segment,
+    speed = 1,
+    autoClose = 0,
+    modalProps = {},
+    maxWidth = '800px'
+  } = options;
+  return new Promise(resolve => {
+    if (!successContainer) {
+      successContainer = document.createElement('div');
+      successContainer.id = 'success-modal-root';
+      document.body.appendChild(successContainer);
+      successRoot = (0, _client.createRoot)(successContainer);
+    }
+    let isClosed = false;
+    const handleClose = () => {
+      if (isClosed) return;
+      isClosed = true;
+      renderModal(false);
+      setTimeout(() => {
+        renderModal(null);
+        resolve();
+      }, 350);
+    };
+    const renderModal = isOpen => {
+      if (isOpen === null) {
+        successRoot.render(null);
+        return;
+      }
+      successRoot.render(/*#__PURE__*/_react.default.createElement(SuccessModalComponent, {
+        isOpen: isOpen,
+        onClose: handleClose,
+        variant: variant,
+        title: title,
+        subtitle: subtitle,
+        content: content,
+        animationSrc: animationSrc,
+        loop: loop,
+        autoplay: autoplay,
+        segment: segment,
+        speed: speed,
+        modalProps: modalProps,
+        maxWidth: maxWidth
+      }));
+    };
+    renderModal(true);
+    if (autoClose > 0) {
+      setTimeout(() => {
+        handleClose();
+      }, autoClose);
+    }
+  });
+};
+exports.showSuccess = showSuccess;
+const showProgress = function () {
+  let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return showSuccess(_objectSpread(_objectSpread({}, options), {}, {
+    variant: 'progress'
+  }));
+};
+exports.showProgress = showProgress;
+var _default = exports.default = showSuccess;

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Title = exports.SuccessModalContent = exports.Subtitle = exports.ContentWrapper = exports.AnimationContainer = 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 SuccessModalContent = exports.SuccessModalContent = _styledComponents.default.div.withConfig({
+  displayName: "SuccessModalstyles__SuccessModalContent",
+  componentId: "sc-8cspgo-0"
+})(["display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 24px;max-height:calc(90vh - 60px);overflow-y:auto;"]);
+const AnimationContainer = exports.AnimationContainer = _styledComponents.default.div.withConfig({
+  displayName: "SuccessModalstyles__AnimationContainer",
+  componentId: "sc-8cspgo-1"
+})(["width:80px;height:80px;min-height:80px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Open Sans';"]);
+const Title = exports.Title = _styledComponents.default.h2.withConfig({
+  displayName: "SuccessModalstyles__Title",
+  componentId: "sc-8cspgo-2"
+})(["margin:0 0 16px 0;font-size:22px;font-weight:800;color:", ";text-transform:uppercase;letter-spacing:0.8px;line-height:28px;flex-shrink:0;font-family:'Open Sans';"], _colors.default.black);
+const Subtitle = exports.Subtitle = _styledComponents.default.p.withConfig({
+  displayName: "SuccessModalstyles__Subtitle",
+  componentId: "sc-8cspgo-3"
+})(["margin:0 0 24px 0;font-size:16px;font-weight:300;line-height:24px;letter-spacing:0.6px;max-width:550px;flex-shrink:0;"]);
+const ContentWrapper = exports.ContentWrapper = _styledComponents.default.div.withConfig({
+  displayName: "SuccessModalstyles__ContentWrapper",
+  componentId: "sc-8cspgo-4"
+})(["width:100%;margin-top:8px;"]);

package/dist/components/Modal/SuccessModal/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SuccessModal", {
+  enumerable: true,
+  get: function () {
+    return _SuccessModal.SuccessModal;
+  }
+});
+Object.defineProperty(exports, "SuccessModalComponent", {
+  enumerable: true,
+  get: function () {
+    return _SuccessModal.SuccessModalComponent;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SuccessModal.default;
+  }
+});
+Object.defineProperty(exports, "showProgress", {
+  enumerable: true,
+  get: function () {
+    return _SuccessModal.showProgress;
+  }
+});
+Object.defineProperty(exports, "showSuccess", {
+  enumerable: true,
+  get: function () {
+    return _SuccessModal.showSuccess;
+  }
+});
+var _SuccessModal = _interopRequireWildcard(require("./SuccessModal"));
+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); }

package/dist/components/Payment/PaymentDetailsCard.js

@@ -13,11 +13,11 @@ 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);
+})(["background:", ";border-radius:10px;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);
+})(["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);
 const AmountSection = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__AmountSection",
   componentId: "sc-e830fo-2"
@@ -25,7 +25,7 @@ const AmountSection = _styledComponents.default.div.withConfig({
 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);
+})(["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);
 const AmountDisplay = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__AmountDisplay",
   componentId: "sc-e830fo-4"
@@ -41,7 +41,7 @@ const CurrencyIcon = _styledComponents.default.img.withConfig({
 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;"]);
+})(["font-size:34px;font-weight:600;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"
@@ -53,19 +53,19 @@ const DetailsSection = _styledComponents.default.div.withConfig({
 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;}"]);
+})(["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;}"]);
 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;"]);
+})(["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;}"]);
 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);
+})(["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);
 const PlaceholderValue = _styledComponents.default.span.withConfig({
   displayName: "PaymentDetailsCard__PlaceholderValue",
   componentId: "sc-e830fo-13"
-})(["color:", ";font-weight:400;"], _colors.default.grey2);
+})(["color:#62748e;font-weight:300;font-size:14px;letter-spacing:0.5px;"]);
 const InfoSectionContainer = _styledComponents.default.div.withConfig({
   displayName: "PaymentDetailsCard__InfoSectionContainer",
   componentId: "sc-e830fo-14"
@@ -123,7 +123,8 @@ const PaymentDetailsCard = _ref2 => {
     amountSection,
     details,
     infoSection,
-    showSeparators = true
+    showSeparators = true,
+    containerStyle
   } = _ref2;
   // Render amount section
   const renderAmountSection = () => {
@@ -158,7 +159,7 @@ const PaymentDetailsCard = _ref2 => {
       }
       return /*#__PURE__*/_react.default.createElement(CurrencyLogo, {
         color: logoColor
-      }, currency ? currency.charAt(0).toUpperCase() : '?');
+      }, 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));
   };
@@ -183,7 +184,9 @@ const PaymentDetailsCard = _ref2 => {
     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());
+  return /*#__PURE__*/_react.default.createElement(CardContainer, {
+    style: containerStyle
+  }, title && /*#__PURE__*/_react.default.createElement(CardTitle, null, title), renderAmountSection(), renderDetailsSection(), renderInfoSection());
 };
 exports.PaymentDetailsCard = PaymentDetailsCard;
 var _default = exports.default = PaymentDetailsCard;

package/dist/components/Payment/PaymentDisplay.js

@@ -16,9 +16,7 @@ var _SectionTitle = require("../SectionTitle/SectionTitle.styles");
 var _reactTippy = require("react-tippy");
 var _Grid = require("../Grid/Grid.styles");
 var _rwd = _interopRequireDefault(require("../../styles/rwd"));
-var _usdcLogo = _interopRequireDefault(require("../../static/images/usdc-logo.svg"));
-var _usdqLogo = _interopRequireDefault(require("../../static/images/usdq-logo.png"));
-var _bitcoinLogo = _interopRequireDefault(require("../../static/images/bitcoin-logo.svg"));
+var _formatCurrencyValue = require("../../utils/formatCurrencyValue");
 var _templateObject, _templateObject2, _templateObject3;
 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); }
@@ -105,14 +103,6 @@ const PaymentDisplay = _ref2 => {
     onAddressCopy,
     copyButtonStyle
   } = _ref2;
-  const getCurrencyIcon = currency => {
-    if (customCurrencyIcon) return customCurrencyIcon;
-    if (!currency) return null;
-    if (currency.toLowerCase().includes('btc')) return _bitcoinLogo.default;
-    if (currency.toLowerCase().includes('usdc')) return _usdcLogo.default;
-    if (currency.toLowerCase().includes('usdq')) return _usdqLogo.default;
-    return null;
-  };
   const defaultQRCodeStyle = {
     backgroundColor: '#000000',
     padding: 18,
@@ -131,7 +121,7 @@ const PaymentDisplay = _ref2 => {
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_SectionTitle.SectionTitle, null, amountTitle), /*#__PURE__*/_react.default.createElement(AmountSection, {
     style: amountSectionStyle
   }, /*#__PURE__*/_react.default.createElement(AmountIcon, {
-    src: getCurrencyIcon(currency),
+    src: (0, _formatCurrencyValue.getCurrencyIcon)(currency, customCurrencyIcon),
     style: amountIconStyle,
     alt: currency
   }), /*#__PURE__*/_react.default.createElement(AmountText, {

package/dist/components/Snackbar/Snackbar.js

@@ -123,10 +123,13 @@ const SnackbarItem = _ref => {
     }
   };
   const displayIcon = icon !== undefined ? icon : defaultIcons[variant];
+  const isPermanent = duration === 'permanent' || duration === 0;
   return /*#__PURE__*/_react.default.createElement(_Snackbar.SnackbarWrapper, {
     $variant: variant,
     $isExiting: isExiting,
     $hasClick: !!onClick,
+    $duration: duration,
+    $isPermanent: isPermanent,
     onClick: onClick ? handleClick : undefined
   }, displayIcon && /*#__PURE__*/_react.default.createElement(_Snackbar.IconWrapper, {
     $variant: variant

package/dist/components/Snackbar/Snackbar.styles.js

@@ -14,6 +14,9 @@ const slideInLeft = (0, _styledComponents.keyframes)(["from{opacity:0;transform:
 const slideInUp = (0, _styledComponents.keyframes)(["from{opacity:0;transform:translateY(100%);}to{opacity:1;transform:translateY(0);}"]);
 const slideInDown = (0, _styledComponents.keyframes)(["from{opacity:0;transform:translateY(-100%);}to{opacity:1;transform:translateY(0);}"]);
 
+// Progress bar animation - shrinks from 100% to 0%
+const progressExpire = (0, _styledComponents.keyframes)(["from{width:100%;}to{width:0%;}"]);
+
 // Variant configurations
 const variantStyles = exports.variantStyles = {
   info: {
@@ -60,31 +63,37 @@ const SnackbarContainer = exports.SnackbarContainer = _styledComponents.default.
 const SnackbarWrapper = exports.SnackbarWrapper = _styledComponents.default.div.withConfig({
   displayName: "Snackbarstyles__SnackbarWrapper",
   componentId: "sc-xf2wxi-1"
-})(["display:flex;align-items:center;gap:12px;min-width:320px;max-width:480px;padding:12px 16px;background-color:", ";box-shadow:0 1px 2px -1px rgba(0,0,0,0.12);border-radius:6px;border:1px solid ", ";border-bottom:3px solid ", ";pointer-events:auto;animation:", " 0.3s ease-out forwards;", ""], _colors.default.white, _colors.default.grey, _ref3 => {
-  var _variantStyles$$varia;
+})(["position:relative;display:flex;align-items:center;gap:12px;min-width:320px;max-width:480px;padding:12px 16px;background-color:", ";box-shadow:0 1px 2px -1px rgba(0,0,0,0.12);border-radius:6px;border:1px solid ", ";pointer-events:auto;overflow:hidden;animation:", " 0.3s ease-out forwards;&::after{content:'';position:absolute;bottom:0;left:0;height:3px;background-color:", ";border-radius:0 0 0 6px;", "}", ""], _colors.default.white, _colors.default.grey, _ref3 => {
   let {
-    $variant
+    $isExiting
   } = _ref3;
-  return ((_variantStyles$$varia = variantStyles[$variant]) === null || _variantStyles$$varia === void 0 ? void 0 : _variantStyles$$varia.borderColor) || _colors.default.blue;
+  return $isExiting ? slideOut : 'none';
 }, _ref4 => {
+  var _variantStyles$$varia;
   let {
-    $isExiting
+    $variant
   } = _ref4;
-  return $isExiting ? slideOut : 'none';
+  return ((_variantStyles$$varia = variantStyles[$variant]) === null || _variantStyles$$varia === void 0 ? void 0 : _variantStyles$$varia.borderColor) || _colors.default.blue;
 }, _ref5 => {
   let {
-    $hasClick
+    $duration,
+    $isPermanent
   } = _ref5;
+  return $isPermanent ? (0, _styledComponents.css)(["width:100%;"]) : (0, _styledComponents.css)(["animation:", " ", "ms linear forwards;"], progressExpire, $duration);
+}, _ref6 => {
+  let {
+    $hasClick
+  } = _ref6;
   return $hasClick && (0, _styledComponents.css)(["cursor:pointer;&:hover{box-shadow:0 4px 24px rgba(0,0,0,0.16);}"]);
 });
 const IconWrapper = exports.IconWrapper = _styledComponents.default.div.withConfig({
   displayName: "Snackbarstyles__IconWrapper",
   componentId: "sc-xf2wxi-2"
-})(["flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:", ";svg{width:100%;height:100%;}"], _ref6 => {
+})(["flex-shrink:0;display:flex;align-items:center;justify-content:center;width:20px;height:20px;color:", ";svg{width:100%;height:100%;}"], _ref7 => {
   var _variantStyles$$varia2;
   let {
     $variant
-  } = _ref6;
+  } = _ref7;
   return ((_variantStyles$$varia2 = variantStyles[$variant]) === null || _variantStyles$$varia2 === void 0 ? void 0 : _variantStyles$$varia2.iconColor) || _colors.default.blue;
 });
 const Message = exports.Message = _styledComponents.default.div.withConfig({