mainstack-payments 1.0.20 → 1.0.21

package/build/mainstack-payments.js

@@ -1,4 +1,4 @@
-import { jsx as h, jsxs as $, Fragment as Et } from "react/jsx-runtime";
+import { jsx as h, jsxs as $, Fragment as wt } from "react/jsx-runtime";
 import { Colors as ct, InfoIcon as Ks, Paragraph as dv, CountrySelect as M1, NotificationsFilledIcon as Go, LockIcon as O1, customSnackbar as Pt, SnackbarType as $t, CancelFilledIcon as wu, Button as qs, Loader as R1, ExpandMoreIcon as Wa, ClickTooltip as xp, DiscountIcon as I1, PhoneNumberInput as D1, MainstackProvider as B1, CustomSnackbarContainer as N1 } from "mainstack-design-system";
 import * as R from "react";
 import _e, { forwardRef as pn, useContext as et, createContext as tn, useLayoutEffect as ki, useEffect as de, useState as ae, useRef as Se, useMemo as at, useCallback as fe, useReducer as L1, useInsertionEffect as Td, createElement as fv, useId as eo, cloneElement as Zs, Children as pv, isValidElement as bl, memo as j1, useSyncExternalStore as z1, PureComponent as V1, useImperativeHandle as U1 } from "react";
@@ -49,7 +49,7 @@ var K1 = /* @__PURE__ */ function() {
       return r.parentNode && r.parentNode.removeChild(r);
     }), this.tags = [], this.ctr = 0, process.env.NODE_ENV !== "production" && (this._alreadyInsertedOrderInsensitiveRule = !1);
   }, e;
-}(), Ct = "-ms-", Ys = "-moz-", $e = "-webkit-", _d = "comm", kd = "rule", Pd = "decl", q1 = "@import", mv = "@keyframes", Z1 = "@layer", Y1 = Math.abs, Sl = String.fromCharCode, X1 = Object.assign;
+}(), Et = "-ms-", Ys = "-moz-", $e = "-webkit-", _d = "comm", kd = "rule", Pd = "decl", q1 = "@import", mv = "@keyframes", Z1 = "@layer", Y1 = Math.abs, Sl = String.fromCharCode, X1 = Object.assign;
 function J1(e, t) {
   return xt(e, 0) ^ 45 ? (((t << 2 ^ xt(e, 0)) << 2 ^ xt(e, 1)) << 2 ^ xt(e, 2)) << 2 ^ xt(e, 3) : 0;
 }
@@ -462,24 +462,24 @@ function wv(e, t) {
     case 4810:
     case 6968:
     case 2756:
-      return $e + e + Ys + e + Ct + e + e;
+      return $e + e + Ys + e + Et + e + e;
     case 6828:
     case 4268:
-      return $e + e + Ct + e + e;
+      return $e + e + Et + e + e;
     case 6165:
-      return $e + e + Ct + "flex-" + e + e;
+      return $e + e + Et + "flex-" + e + e;
     case 5187:
-      return $e + e + Fe(e, /(\w+).+(:[^]+)/, $e + "box-$1$2" + Ct + "flex-$1$2") + e;
+      return $e + e + Fe(e, /(\w+).+(:[^]+)/, $e + "box-$1$2" + Et + "flex-$1$2") + e;
     case 5443:
-      return $e + e + Ct + "flex-item-" + Fe(e, /flex-|-self/, "") + e;
+      return $e + e + Et + "flex-item-" + Fe(e, /flex-|-self/, "") + e;
     case 4675:
-      return $e + e + Ct + "flex-line-pack" + Fe(e, /align-content|flex-|-self/, "") + e;
+      return $e + e + Et + "flex-line-pack" + Fe(e, /align-content|flex-|-self/, "") + e;
     case 5548:
-      return $e + e + Ct + Fe(e, "shrink", "negative") + e;
+      return $e + e + Et + Fe(e, "shrink", "negative") + e;
     case 5292:
-      return $e + e + Ct + Fe(e, "basis", "preferred-size") + e;
+      return $e + e + Et + Fe(e, "basis", "preferred-size") + e;
     case 6060:
-      return $e + "box-" + Fe(e, "-grow", "") + $e + e + Ct + Fe(e, "grow", "positive") + e;
+      return $e + "box-" + Fe(e, "-grow", "") + $e + e + Et + Fe(e, "grow", "positive") + e;
     case 4554:
       return $e + Fe(e, /([^-])(transform)/g, "$1" + $e + "$2") + e;
     case 6187:
@@ -488,7 +488,7 @@ function wv(e, t) {
     case 3959:
       return Fe(e, /(image-set\([^]*)/, $e + "$1$`$1");
     case 4968:
-      return Fe(Fe(e, /(.+:)(flex-)?(.*)/, $e + "box-pack:$3" + Ct + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + $e + e + e;
+      return Fe(Fe(e, /(.+:)(flex-)?(.*)/, $e + "box-pack:$3" + Et + "flex-pack:$3"), /s.+-b[^;]+/, "justify") + $e + e + e;
     case 4095:
     case 3583:
     case 4068:
@@ -525,19 +525,19 @@ function wv(e, t) {
         case 107:
           return Fe(e, ":", ":" + $e) + e;
         case 101:
-          return Fe(e, /(.+:)([^;!]+)(;|!.+)?/, "$1" + $e + (xt(e, 14) === 45 ? "inline-" : "") + "box$3$1" + $e + "$2$3$1" + Ct + "$2box$3") + e;
+          return Fe(e, /(.+:)([^;!]+)(;|!.+)?/, "$1" + $e + (xt(e, 14) === 45 ? "inline-" : "") + "box$3$1" + $e + "$2$3$1" + Et + "$2box$3") + e;
       }
       break;
     case 5936:
       switch (xt(e, t + 11)) {
         case 114:
-          return $e + e + Ct + Fe(e, /[svh]\w+-[tblr]{2}/, "tb") + e;
+          return $e + e + Et + Fe(e, /[svh]\w+-[tblr]{2}/, "tb") + e;
         case 108:
-          return $e + e + Ct + Fe(e, /[svh]\w+-[tblr]{2}/, "tb-rl") + e;
+          return $e + e + Et + Fe(e, /[svh]\w+-[tblr]{2}/, "tb-rl") + e;
         case 45:
-          return $e + e + Ct + Fe(e, /[svh]\w+-[tblr]{2}/, "lr") + e;
+          return $e + e + Et + Fe(e, /[svh]\w+-[tblr]{2}/, "lr") + e;
       }
-      return $e + e + Ct + e + e;
+      return $e + e + Et + e + e;
   }
   return e;
 }
@@ -566,7 +566,7 @@ var wS = function(t, n, r, a) {
                 }), Ao(t, {
                   props: [Fe(o, /:(plac\w+)/, ":" + Ys + "$1")]
                 }), Ao(t, {
-                  props: [Fe(o, /:(plac\w+)/, Ct + "input-$1")]
+                  props: [Fe(o, /:(plac\w+)/, Et + "input-$1")]
                 })], a);
             }
             return "";
@@ -1986,7 +1986,7 @@ function y2(e, t, n) {
     return Array.isArray(t) ? s : s[0];
   };
 }
-var Ne = (...e) => e.filter(Boolean).join(" ");
+var Le = (...e) => e.filter(Boolean).join(" ");
 function b2() {
   return process.env.NODE_ENV !== "production";
 }
@@ -2262,12 +2262,12 @@ Js.exports;
       lo(y, k, _t);
       return;
     }
-    var wt = Ie ? Ie(be, Ge, k + "", y, w, Ue) : void 0, Xn = wt === void 0;
+    var Ct = Ie ? Ie(be, Ge, k + "", y, w, Ue) : void 0, Xn = Ct === void 0;
     if (Xn) {
       var va = ma(Ge), ya = !va && mn(Ge), xo = !va && !ya && yo(Ge);
-      wt = Ge, va || ya || xo ? ma(be) ? wt = be : up(be) ? wt = uc(be) : ya ? (Xn = !1, wt = cc(Ge, !0)) : xo ? (Xn = !1, wt = po(Ge, !0)) : wt = [] : Xi(Ge) || Zn(Ge) ? (wt = be, Zn(be) ? wt = Ji(be) : (!gn(be) || ga(be)) && (wt = hc(Ge))) : Xn = !1;
+      Ct = Ge, va || ya || xo ? ma(be) ? Ct = be : up(be) ? Ct = uc(be) : ya ? (Xn = !1, Ct = cc(Ge, !0)) : xo ? (Xn = !1, Ct = po(Ge, !0)) : Ct = [] : Xi(Ge) || Zn(Ge) ? (Ct = be, Zn(be) ? Ct = Ji(be) : (!gn(be) || ga(be)) && (Ct = hc(Ge))) : Xn = !1;
     }
-    Xn && (Ue.set(Ge, wt), Ce(wt, Ge, z, Ie, Ue), Ue.delete(Ge)), lo(y, k, wt);
+    Xn && (Ue.set(Ge, Ct), Ce(Ct, Ge, z, Ie, Ue), Ue.delete(Ge)), lo(y, k, Ct);
   }
   function Re(y, w) {
     return fa(bc(y, w, So), y + "");
@@ -7953,7 +7953,7 @@ function $5() {
   });
 }
 var xe = $5();
-function Le(e) {
+function je(e) {
   return pn(e);
 }
 function F5(e = {}) {
@@ -12637,7 +12637,7 @@ var zm = {
     /* @__PURE__ */ h("circle", { fill: "none", strokeMiterlimit: "10", cx: "12", cy: "12", r: "11.25" })
   ] }),
   viewBox: "0 0 24 24"
-}, hn = Le((e, t) => {
+}, hn = je((e, t) => {
   const {
     as: n,
     viewBox: r,
@@ -12647,7 +12647,7 @@ var zm = {
     className: s,
     __css: l,
     ...c
-  } = e, u = Ne("chakra-icon", s), d = Vn("Icon", e), f = {
+  } = e, u = Le("chakra-icon", s), d = Vn("Icon", e), f = {
     w: "1em",
     h: "1em",
     display: "inline-block",
@@ -12702,7 +12702,7 @@ var c4 = Dd({
   "100%": {
     transform: "rotate(360deg)"
   }
-}), Sf = Le((e, t) => {
+}), Sf = je((e, t) => {
   const n = Vn("Spinner", e), {
     label: r = "Loading...",
     thickness: a = "2px",
@@ -12710,7 +12710,7 @@ var c4 = Dd({
     emptyColor: i = "transparent",
     className: s,
     ...l
-  } = rn(e), c = Ne("chakra-spinner", s), u = {
+  } = rn(e), c = Le("chakra-spinner", s), u = {
     display: "inline-block",
     borderColor: "currentColor",
     borderStyle: "solid",
@@ -12754,7 +12754,7 @@ function f4(e) {
 function p4(e) {
   return Py[e].icon;
 }
-var $y = Le(
+var $y = je(
   function(t, n) {
     const r = wf(), { status: a } = xf(), o = {
       display: "inline",
@@ -12766,7 +12766,7 @@ var $y = Le(
         ref: n,
         "data-status": a,
         ...t,
-        className: Ne("chakra-alert__desc", t.className),
+        className: Le("chakra-alert__desc", t.className),
         __css: o
       }
     );
@@ -12781,14 +12781,14 @@ function Fy(e) {
       display: "inherit",
       "data-status": t,
       ...e,
-      className: Ne("chakra-alert__icon", e.className),
+      className: Le("chakra-alert__icon", e.className),
       __css: a,
       children: e.children || /* @__PURE__ */ h(n, { h: "100%", w: "100%" })
     }
   );
 }
 Fy.displayName = "AlertIcon";
-var My = Le(
+var My = je(
   function(t, n) {
     const r = wf(), { status: a } = xf();
     return /* @__PURE__ */ h(
@@ -12797,14 +12797,14 @@ var My = Le(
         ref: n,
         "data-status": a,
         ...t,
-        className: Ne("chakra-alert__title", t.className),
+        className: Le("chakra-alert__title", t.className),
         __css: r.title
       }
     );
   }
 );
 My.displayName = "AlertTitle";
-var Oy = Le(function(t, n) {
+var Oy = je(function(t, n) {
   var r;
   const { status: a = "info", addRole: o = !0, ...i } = rn(t), s = (r = t.colorScheme) != null ? r : f4(a), l = Ri("Alert", { ...t, colorScheme: s }), c = {
     width: "100%",
@@ -12821,7 +12821,7 @@ var Oy = Le(function(t, n) {
       role: o ? "alert" : void 0,
       ref: n,
       ...i,
-      className: Ne("chakra-alert", t.className),
+      className: Le("chakra-alert", t.className),
       __css: c
     }
   ) }) });
@@ -12836,7 +12836,7 @@ function h4(e) {
     }
   ) });
 }
-var Cf = Le(
+var Cf = je(
   function(t, n) {
     const r = Vn("CloseButton", t), { children: a, isDisabled: o, __css: i, ...s } = rn(t), l = {
       outline: 0,
@@ -13250,7 +13250,7 @@ var Br = {
       {
         ref: t,
         ...d,
-        className: Ne("chakra-collapse", l),
+        className: Le("chakra-collapse", l),
         style: {
           overflow: "hidden",
           display: "block",
@@ -13302,7 +13302,7 @@ var k4 = {
     hr.div,
     {
       ref: n,
-      className: Ne("chakra-fade", o),
+      className: Le("chakra-fade", o),
       custom: f,
       ...Ry,
       animate: u,
@@ -13351,7 +13351,7 @@ var $4 = {
       hr.div,
       {
         ref: n,
-        className: Ne("chakra-offset-slide", s),
+        className: Le("chakra-offset-slide", s),
         ...Iy,
         animate: p,
         custom: g,
@@ -13421,7 +13421,7 @@ var M4 = {
       hr.div,
       {
         ref: n,
-        className: Ne("chakra-offset-slide", i),
+        className: Le("chakra-offset-slide", i),
         custom: m,
         ...Vo,
         animate: g,
@@ -13483,7 +13483,7 @@ var Wm = {
       ...f,
       ref: n,
       initial: "exit",
-      className: Ne("chakra-slide", s),
+      className: Le("chakra-slide", s),
       animate: v,
       exit: "exit",
       custom: S,
@@ -13494,12 +13494,12 @@ var Wm = {
   ) });
 });
 Dy.displayName = "Slide";
-var By = Le(function(t, n) {
+var By = je(function(t, n) {
   const { htmlWidth: r, htmlHeight: a, alt: o, ...i } = t;
   return /* @__PURE__ */ h("img", { width: r, height: a, ref: n, alt: o, ...i });
 });
 By.displayName = "NativeImage";
-var dl = Le((e, t) => /* @__PURE__ */ h(xe.img, { ref: t, as: By, className: "chakra-image", ...e }));
+var dl = je((e, t) => /* @__PURE__ */ h(xe.img, { ref: t, as: By, className: "chakra-image", ...e }));
 function I4(e) {
   return pv.toArray(e).filter(
     (t) => bl(t)
@@ -13519,7 +13519,7 @@ function Yu(e) {
   const { children: t, className: n, ...r } = e, a = bl(t) ? Zs(t, {
     "aria-hidden": !0,
     focusable: !1
-  }) : t, o = Ne("chakra-button__icon", n);
+  }) : t, o = Le("chakra-button__icon", n);
   return /* @__PURE__ */ h(
     xe.span,
     {
@@ -13542,7 +13542,7 @@ function Xu(e) {
     className: o,
     __css: i,
     ...s
-  } = e, l = Ne("chakra-button__spinner", o), c = n === "start" ? "marginEnd" : "marginStart", u = at(
+  } = e, l = Le("chakra-button__spinner", o), c = n === "start" ? "marginEnd" : "marginStart", u = at(
     () => ({
       display: "flex",
       alignItems: "center",
@@ -13557,7 +13557,7 @@ function Xu(e) {
   return /* @__PURE__ */ h(xe.div, { className: l, ...s, __css: u, children: a });
 }
 Xu.displayName = "ButtonSpinner";
-var Ef = Le((e, t) => {
+var Ef = je((e, t) => {
   const n = D4(), r = Vn("Button", { ...n, ...e }), {
     isDisabled: a = n == null ? void 0 : n.isDisabled,
     isLoading: o,
@@ -13598,7 +13598,7 @@ var Ef = Le((e, t) => {
       "data-active": yn(i),
       "data-loading": yn(o),
       __css: x,
-      className: Ne("chakra-button", m),
+      className: Le("chakra-button", m),
       ...S,
       disabled: a || o,
       children: [
@@ -13630,7 +13630,7 @@ var Ef = Le((e, t) => {
 Ef.displayName = "Button";
 function Hm(e) {
   const { leftIcon: t, rightIcon: n, children: r, iconSpacing: a } = e;
-  return /* @__PURE__ */ $(Et, { children: [
+  return /* @__PURE__ */ $(wt, { children: [
     t && /* @__PURE__ */ h(Yu, { marginEnd: a, children: t }),
     r,
     n && /* @__PURE__ */ h(Yu, { marginStart: a, children: n })
@@ -13736,13 +13736,13 @@ function z4(e) {
     getRequiredIndicatorProps: F
   };
 }
-var Uo = Le(
+var Uo = je(
   function(t, n) {
     const r = Ri("Form", t), a = rn(t), {
       getRootProps: o,
       htmlProps: i,
       ...s
-    } = z4(a), l = Ne("chakra-form-control", t.className);
+    } = z4(a), l = Le("chakra-form-control", t.className);
     return /* @__PURE__ */ h(j4, { value: s, children: /* @__PURE__ */ h(N4, { value: r, children: /* @__PURE__ */ h(
       xe.div,
       {
@@ -13754,9 +13754,9 @@ var Uo = Le(
   }
 );
 Uo.displayName = "FormControl";
-var V4 = Le(
+var V4 = je(
   function(t, n) {
-    const r = Ny(), a = L4(), o = Ne("chakra-form__helper-text", t.className);
+    const r = Ny(), a = L4(), o = Le("chakra-form__helper-text", t.className);
     return /* @__PURE__ */ h(
       xe.div,
       {
@@ -15395,9 +15395,9 @@ function ni(e = {}) {
 var [PF, PD] = nn({
   name: "InputGroupStylesContext",
   errorMessage: `useInputGroupStyles returned is 'undefined'. Seems you forgot to wrap the components in "<InputGroup />" `
-}), bb = Le(
+}), bb = je(
   function(t, n) {
-    const r = Ri("Input", t), { children: a, className: o, ...i } = rn(t), s = Ne("chakra-input__group", o), l = {}, c = I4(a), u = r.field;
+    const r = Ri("Input", t), { children: a, className: o, ...i } = rn(t), s = Le("chakra-input__group", o), l = {}, c = I4(a), u = r.field;
     c.forEach((f) => {
       var p, g;
       r && (u && f.type.id === "InputLeftElement" && (l.paddingStart = (p = u.height) != null ? p : u.h), u && f.type.id === "InputRightElement" && (l.paddingEnd = (g = u.height) != null ? g : u.h), f.type.id === "InputRightAddon" && (l.borderEndRadius = 0), f.type.id === "InputLeftAddon" && (l.borderStartRadius = 0));
@@ -15432,8 +15432,8 @@ var [PF, PD] = nn({
   }
 );
 bb.displayName = "InputGroup";
-var Ll = Le(function(t, n) {
-  const { htmlSize: r, ...a } = t, o = Ri("Input", a), i = rn(a), s = U4(i), l = Ne("chakra-input", t.className);
+var Ll = je(function(t, n) {
+  const { htmlSize: r, ...a } = t, o = Ri("Input", a), i = rn(a), s = U4(i), l = Le("chakra-input", t.className);
   return /* @__PURE__ */ h(
     xe.input,
     {
@@ -15447,7 +15447,7 @@ var Ll = Le(function(t, n) {
 });
 Ll.displayName = "Input";
 Ll.id = "Input";
-var Sb = Le(function(t, n) {
+var Sb = je(function(t, n) {
   const r = Vn("Link", t), { className: a, isExternal: o, ...i } = rn(t);
   return /* @__PURE__ */ h(
     xe.a,
@@ -15455,14 +15455,14 @@ var Sb = Le(function(t, n) {
       target: o ? "_blank" : void 0,
       rel: o ? "noopener" : void 0,
       ref: n,
-      className: Ne("chakra-link", a),
+      className: Le("chakra-link", a),
       ...i,
       __css: r
     }
   );
 });
 Sb.displayName = "Link";
-var Bf = Le(function(t, n) {
+var Bf = je(function(t, n) {
   const {
     templateAreas: r,
     gap: a,
@@ -15496,7 +15496,7 @@ Bf.displayName = "Grid";
 function $F(e, t) {
   return Array.isArray(e) ? e.map((n) => n === null ? null : t(n)) : dn(e) ? Object.keys(e).reduce((n, r) => (n[r] = t(e[r]), n), {}) : e != null ? t(e) : null;
 }
-var ke = Le(function(t, n) {
+var ke = je(function(t, n) {
   const r = Vn("Text", t), { className: a, align: o, decoration: i, casing: s, ...l } = rn(t), c = Zd({
     textAlign: t.align,
     textDecoration: t.decoration,
@@ -15506,7 +15506,7 @@ var ke = Le(function(t, n) {
     xe.p,
     {
       ref: n,
-      className: Ne("chakra-text", t.className),
+      className: Le("chakra-text", t.className),
       ...c,
       ...l,
       __css: r
@@ -15520,7 +15520,7 @@ function cg(e) {
     (t) => t === "auto" ? "auto" : `span ${t}/span ${t}`
   );
 }
-var ad = Le(function(t, n) {
+var ad = je(function(t, n) {
   const {
     area: r,
     colSpan: a,
@@ -15542,13 +15542,13 @@ var ad = Le(function(t, n) {
   return /* @__PURE__ */ h(xe.div, { ref: n, __css: d, ...u });
 });
 ad.displayName = "GridItem";
-var od = Le(function(t, n) {
+var od = je(function(t, n) {
   const r = Vn("Heading", t), { className: a, ...o } = rn(t);
   return /* @__PURE__ */ h(
     xe.h2,
     {
       ref: n,
-      className: Ne("chakra-heading", t.className),
+      className: Le("chakra-heading", t.className),
       ...o,
       __css: r
     }
@@ -15557,7 +15557,7 @@ var od = Le(function(t, n) {
 od.displayName = "Heading";
 var Ee = xe("div");
 Ee.displayName = "Box";
-var xb = Le(function(t, n) {
+var xb = je(function(t, n) {
   const { size: r, centerContent: a = !0, ...o } = t;
   return /* @__PURE__ */ h(
     Ee,
@@ -15574,12 +15574,12 @@ var xb = Le(function(t, n) {
   );
 });
 xb.displayName = "Square";
-var FF = Le(function(t, n) {
+var FF = je(function(t, n) {
   const { size: r, ...a } = t;
   return /* @__PURE__ */ h(xb, { size: r, ref: n, borderRadius: "9999px", ...a });
 });
 FF.displayName = "Circle";
-var id = Le(function(t, n) {
+var id = je(function(t, n) {
   const {
     borderLeftWidth: r,
     borderBottomWidth: a,
@@ -15618,12 +15618,12 @@ var id = Le(function(t, n) {
         ...m[f],
         ...p
       },
-      className: Ne("chakra-divider", d)
+      className: Le("chakra-divider", d)
     }
   );
 });
 id.displayName = "Divider";
-var ue = Le(function(t, n) {
+var ue = je(function(t, n) {
   const { direction: r, align: a, justify: o, wrap: i, basis: s, grow: l, shrink: c, ...u } = t, d = {
     display: "flex",
     flexDirection: r,
@@ -16269,7 +16269,7 @@ function Fb(e) {
     }
   );
 }
-var Mb = Le(
+var Mb = je(
   (e, t) => {
     const {
       className: n,
@@ -16277,7 +16277,7 @@ var Mb = Le(
       containerProps: a,
       motionProps: o,
       ...i
-    } = e, { getDialogProps: s, getDialogContainerProps: l } = dr(), c = s(i, t), u = l(a), d = Ne("chakra-modal__content", n), f = Zr(), p = {
+    } = e, { getDialogProps: s, getDialogContainerProps: l } = dr(), c = s(i, t), u = l(a), d = Le("chakra-modal__content", n), f = Zr(), p = {
       display: "flex",
       flexDirection: "column",
       position: "relative",
@@ -16345,7 +16345,7 @@ function _9(e) {
     }
   ) });
 }
-var k9 = xe(Dy), Ob = Le(
+var k9 = xe(Dy), Ob = je(
   (e, t) => {
     const {
       className: n,
@@ -16353,7 +16353,7 @@ var k9 = xe(Dy), Ob = Le(
       motionProps: a,
       containerProps: o,
       ...i
-    } = e, { getDialogProps: s, getDialogContainerProps: l, isOpen: c } = dr(), u = s(i, t), d = l(o), f = Ne("chakra-modal__content", n), p = Zr(), g = {
+    } = e, { getDialogProps: s, getDialogContainerProps: l, isOpen: c } = dr(), u = s(i, t), d = l(o), f = Le("chakra-modal__content", n), p = Zr(), g = {
       display: "flex",
       flexDirection: "column",
       position: "relative",
@@ -16392,9 +16392,9 @@ var k9 = xe(Dy), Ob = Le(
   }
 );
 Ob.displayName = "DrawerContent";
-var Rb = Le(
+var Rb = je(
   (e, t) => {
-    const { className: n, ...r } = e, a = Ne("chakra-modal__footer", n), i = {
+    const { className: n, ...r } = e, a = Le("chakra-modal__footer", n), i = {
       display: "flex",
       alignItems: "center",
       justifyContent: "flex-end",
@@ -16412,11 +16412,11 @@ var Rb = Le(
   }
 );
 Rb.displayName = "ModalFooter";
-var Lf = Le(
+var Lf = je(
   (e, t) => {
     const { className: n, ...r } = e, { headerId: a, setHeaderMounted: o } = dr();
     de(() => (o(!0), () => o(!1)), [o]);
-    const i = Ne("chakra-modal__header", n), l = {
+    const i = Le("chakra-modal__header", n), l = {
       flex: 0,
       ...Zr().header
     };
@@ -16433,9 +16433,9 @@ var Lf = Le(
   }
 );
 Lf.displayName = "ModalHeader";
-var P9 = xe(hr.div), jf = Le(
+var P9 = xe(hr.div), jf = je(
   (e, t) => {
-    const { className: n, transition: r, motionProps: a, ...o } = e, i = Ne("chakra-modal__overlay", n), l = {
+    const { className: n, transition: r, motionProps: a, ...o } = e, i = Le("chakra-modal__overlay", n), l = {
       pos: "fixed",
       left: "0",
       top: "0",
@@ -16456,10 +16456,10 @@ var P9 = xe(hr.div), jf = Le(
   }
 );
 jf.displayName = "ModalOverlay";
-var zf = Le((e, t) => {
+var zf = je((e, t) => {
   const { className: n, ...r } = e, { bodyId: a, setBodyMounted: o } = dr();
   de(() => (o(!0), () => o(!1)), [o]);
-  const i = Ne("chakra-modal__body", n), s = Zr();
+  const i = Le("chakra-modal__body", n), s = Zr();
   return /* @__PURE__ */ h(
     xe.div,
     {
@@ -16472,9 +16472,9 @@ var zf = Le((e, t) => {
   );
 });
 zf.displayName = "ModalBody";
-var Ib = Le(
+var Ib = je(
   (e, t) => {
-    const { onClick: n, className: r, ...a } = e, { onClose: o } = dr(), i = Ne("chakra-modal__close-btn", r), s = Zr();
+    const { onClick: n, className: r, ...a } = e, { onClose: o } = dr(), i = Le("chakra-modal__close-btn", r), s = Zr();
     return /* @__PURE__ */ h(
       Cf,
       {
@@ -16526,7 +16526,7 @@ var M9 = xe("div", {
     borderColor: ud.reference,
     background: ud.reference
   }
-}), dd = Le((e, t) => {
+}), dd = je((e, t) => {
   const n = {
     ...e,
     fadeDuration: typeof e.fadeDuration == "number" ? e.fadeDuration : 0.4,
@@ -16543,7 +16543,7 @@ var M9 = xe("div", {
   } = rn(n), [p, g] = v2("colors", [
     o,
     i
-  ]), m = F9(s), v = Ne("chakra-skeleton", u), S = {
+  ]), m = F9(s), v = Le("chakra-skeleton", u), S = {
     ...p && { [cd.variable]: p },
     ...g && { [ud.variable]: g }
   };
@@ -21875,7 +21875,7 @@ const iv = /* @__PURE__ */ new Map([
     borderRadius: "64px",
     ...n,
     children: [
-      /* @__PURE__ */ h(Et, { children: e }),
+      /* @__PURE__ */ h(wt, { children: e }),
       t && /* @__PURE__ */ h(Ee, { position: "absolute", right: "6px", children: t })
     ]
   }
@@ -22039,7 +22039,7 @@ const iv = /* @__PURE__ */ new Map([
     return me(), window.addEventListener("resize", me), () => {
       window.removeEventListener("resize", me);
     };
-  }, []), /* @__PURE__ */ h(Et, { children: i && /* @__PURE__ */ h(Ee, { position: "relative", children: a ? /* @__PURE__ */ h(Et, {}) : /* @__PURE__ */ h(Si, { in: o, animateOpacity: !0, children: /* @__PURE__ */ $(
+  }, []), /* @__PURE__ */ h(wt, { children: i && /* @__PURE__ */ h(Ee, { position: "relative", children: a ? /* @__PURE__ */ h(wt, {}) : /* @__PURE__ */ h(Si, { in: o, animateOpacity: !0, children: /* @__PURE__ */ $(
     Ee,
     {
       ref: J,
@@ -26371,7 +26371,7 @@ const iv = /* @__PURE__ */ new Map([
     )[0]) == null ? void 0 : a.currency.code;
   }
 });
-var je = /* @__PURE__ */ ((e) => (e.GHS = "GHS", e.NGN = "NGN", e.KES = "KES", e.UGX = "UGX", e.USD = "USD", e.GBP = "GBP", e.EUR = "EUR", e.BGN = "BGN", e.CZK = "CZK", e.DKK = "DKK", e.HUF = "HUF", e.PLN = "PLN", e.RON = "RON", e.SEK = "SEK", e.CAD = "CAD", e))(je || {});
+var Ne = /* @__PURE__ */ ((e) => (e.GHS = "GHS", e.NGN = "NGN", e.KES = "KES", e.UGX = "UGX", e.USD = "USD", e.GBP = "GBP", e.EUR = "EUR", e.BGN = "BGN", e.CZK = "CZK", e.DKK = "DKK", e.HUF = "HUF", e.PLN = "PLN", e.RON = "RON", e.SEK = "SEK", e.CAD = "CAD", e))(Ne || {});
 const lv = "Payment Completed", nD = ({
   src: e,
   isOpen: t,
@@ -26532,7 +26532,7 @@ const lv = "Payment Completed", nD = ({
       maxHeight: { lg: "95vh", base: "80vh" },
       fontFamily: "Bricolage Grotesque",
       children: [
-        r && /* @__PURE__ */ $(Et, { children: [
+        r && /* @__PURE__ */ $(wt, { children: [
           /* @__PURE__ */ h(Ib, {}),
           /* @__PURE__ */ h(
             Lf,
@@ -26555,7 +26555,7 @@ const lv = "Payment Completed", nD = ({
   onClose: t
 }) => {
   const [n] = Gr("(min-width: 768px)");
-  return /* @__PURE__ */ h(Et, { children: n ? /* @__PURE__ */ $(
+  return /* @__PURE__ */ h(wt, { children: n ? /* @__PURE__ */ $(
     Nf,
     {
       isCentered: !0,
@@ -26733,7 +26733,7 @@ const lv = "Payment Completed", nD = ({
     cursor: "pointer",
     textAlign: "left",
     ...n,
-    children: t ? /* @__PURE__ */ h(ue, { justifyContent: "center", children: /* @__PURE__ */ h(R1, { width: "20px", height: "20px" }) }) : /* @__PURE__ */ h(Et, { children: e })
+    children: t ? /* @__PURE__ */ h(ue, { justifyContent: "center", children: /* @__PURE__ */ h(R1, { width: "20px", height: "20px" }) }) : /* @__PURE__ */ h(wt, { children: e })
   }
 ), sD = ({
   currency: e,
@@ -26856,7 +26856,7 @@ const lv = "Payment Completed", nD = ({
     const b = await r.validateForm();
     Object.keys(b).length > 0 || f == null || f.show();
   };
-  return /* @__PURE__ */ h(Et, { children: f && ((g == null ? void 0 : g.applePay) || (g == null ? void 0 : g.googlePay)) && /* @__PURE__ */ $(Et, { children: [
+  return /* @__PURE__ */ h(wt, { children: f && ((g == null ? void 0 : g.applePay) || (g == null ? void 0 : g.googlePay)) && /* @__PURE__ */ $(wt, { children: [
     (g == null ? void 0 : g.applePay) && /* @__PURE__ */ h(_i, { onClick: x, disabled: v, children: /* @__PURE__ */ $(
       ue,
       {
@@ -26990,7 +26990,7 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
       value: 0,
       isFullDiscount: !1
     }));
-  }, B = (H) => H > 0 ? n === je.NGN ? `+ ${n} ${H}` : `+ ${H * 100} cents` : "", G = ({ children: H, ...ne }) => /* @__PURE__ */ h(
+  }, B = (H) => H > 0 ? n === Ne.NGN ? `+ ${n} ${H}` : `+ ${H * 100} cents` : "", G = ({ children: H, ...ne }) => /* @__PURE__ */ h(
     ke,
     {
       color: "#111215",
@@ -27002,22 +27002,28 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
       children: H
     }
   );
-  return /* @__PURE__ */ $(
+  return /* @__PURE__ */ h(
     Ee,
     {
-      p: { base: "16px", lg: "72px" },
-      borderRadius: m ? "16px" : { base: "16px", lg: "16px 0 0 16px" },
+      p: m ? "16px" : { base: "16px", lg: "32px" },
       style: { ...e },
       zIndex: 10,
       py: { base: "16px", lg: "48px" },
-      children: [
+      position: m ? "static" : { base: "static", lg: "fixed" },
+      children: /* @__PURE__ */ $(Ee, { maxWidth: "356px", mx: "auto", children: [
         /* @__PURE__ */ $(
           Ee,
           {
             textAlign: m ? "center" : { base: "center", lg: "left" },
             children: [
-              g.totalAmountPlusFees <= 0 ? /* @__PURE__ */ h(Et, {}) : typeof t == "string" ? /* @__PURE__ */ h(G, { color: "#7D879B", children: t }) : /* @__PURE__ */ h(Et, { children: t }),
-              a ? /* @__PURE__ */ h(dd, { height: "20px", width: "100px" }) : /* @__PURE__ */ h(
+              g.totalAmountPlusFees <= 0 ? /* @__PURE__ */ h(wt, {}) : typeof t == "string" ? /* @__PURE__ */ h(G, { color: "#7D879B", children: t }) : /* @__PURE__ */ h(wt, { children: t }),
+              a ? /* @__PURE__ */ h(
+                dd,
+                {
+                  height: "20px",
+                  width: m ? "100%" : { base: "100%", lg: "100px" }
+                }
+              ) : /* @__PURE__ */ h(
                 G,
                 {
                   as: "h6",
@@ -27118,7 +27124,7 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
                 On(r)
               ] })
             ] }),
-            !(o != null && o.isFullDiscount) && /* @__PURE__ */ $(Et, { children: [
+            !(o != null && o.isFullDiscount) && /* @__PURE__ */ $(wt, { children: [
               " ",
               f.localTaxFees > 0 && f.shouldApplyTax && /* @__PURE__ */ $(ue, { width: "100%", justifyContent: "space-between", children: [
                 /* @__PURE__ */ h(ue, { alignItems: "center", children: /* @__PURE__ */ $(G, { fontWeight: 400, mr: "8px", children: [
@@ -27231,7 +27237,8 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
                 gap: "12px",
                 bg: "white",
                 border: "1px solid #E8EBF2",
-                p: "8px",
+                pr: "6px",
+                py: "5px",
                 pl: "12px",
                 borderRadius: "12px",
                 children: [
@@ -27267,14 +27274,16 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
                       bgColor: "#F2F4F7",
                       py: "8px",
                       px: "14px",
-                      lineHeight: "22px",
+                      lineHeight: "20px",
                       fontSize: "12px",
-                      letterSpacing: "-0.2px",
+                      letterSpacing: "-0.4px",
                       fontWeight: 500,
                       color: "#111215",
                       onClick: P,
                       isLoading: d,
                       disabled: l === "",
+                      outlineOffset: "0px",
+                      height: "auto",
                       children: "Apply"
                     }
                   )
@@ -27311,7 +27320,7 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
             ] })
           ] })
         ] })
-      ]
+      ] })
     }
   );
 }, dD = ({
@@ -27324,115 +27333,117 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
   errors: i,
   setFieldValue: s,
   proceedButton: l
-}) => /* @__PURE__ */ $(ue, { flexDirection: "column", gap: "20px", pb: "40px", children: [
-  t && /* @__PURE__ */ h(
-    oi,
-    {
-      id: "fullname",
-      label: "Your name",
-      name: "fullname",
-      onChange: (c) => s("fullname", c.target.value),
-      value: o == null ? void 0 : o.fullname,
-      placeholder: "Full name",
-      type: "text",
-      error: !!(i != null && i.fullname),
-      errorMessage: i == null ? void 0 : i.fullname,
-      fontFamily: "inherit"
-    }
-  ),
-  n && /* @__PURE__ */ h(
-    oi,
-    {
-      id: "email",
-      label: "Email address",
-      name: "email",
-      onChange: (c) => s("email", c.target.value),
-      value: o == null ? void 0 : o.email,
-      placeholder: "Email address",
-      type: "email",
-      error: !!(i != null && i.email),
-      errorMessage: i == null ? void 0 : i.email,
-      fontFamily: "inherit"
-    }
-  ),
-  r && /* @__PURE__ */ $(Ee, { position: "relative", zIndex: "9", children: [
-    /* @__PURE__ */ h(
-      D1,
+}) => /* @__PURE__ */ $(wt, { children: [
+  /* @__PURE__ */ $(ue, { flexDirection: "column", gap: "20px", children: [
+    t && /* @__PURE__ */ h(
+      oi,
       {
-        value: o == null ? void 0 : o.phone,
-        onChange: (c) => {
-          s("phone", c);
-        },
-        placeholder: "",
-        label: /* @__PURE__ */ h(
-          ke,
-          {
-            as: "label",
-            fontSize: "14px",
-            lineHeight: "28px",
-            letterSpacing: "-0.2px",
-            fontWeight: 600,
-            mb: "10px",
-            mt: "0",
-            color: "#111215",
-            textAlign: "left",
-            children: "Phone Number (optional)"
-          }
-        ),
-        subtext: /* @__PURE__ */ $(
-          ke,
-          {
-            as: "span",
-            display: "block",
-            fontSize: "12px",
-            lineHeight: "22px",
-            letterSpacing: "-0.2px",
-            color: "#7D879B",
-            fontWeight: 400,
-            children: [
-              "By entering your phone number, you agree to",
-              " ",
-              /* @__PURE__ */ $(
-                Sb,
-                {
-                  href: "https://www.mainstack.co/company/privacy",
-                  target: "__blank",
-                  children: [
-                    /* @__PURE__ */ h(
-                      "span",
-                      {
-                        style: { textDecoration: "underline" },
-                        children: "Mainstack's SMS Terms of Service"
-                      }
-                    ),
-                    " ",
-                    "and",
-                    " ",
-                    /* @__PURE__ */ h("span", { style: { textDecoration: "underline" }, children: "Privacy Policy" })
-                  ]
-                }
-              ),
-              ". Mainstack will share your phone number with the seller of this product(s) or service(s). Message and data rates may apply."
-            ]
-          }
-        ),
+        id: "fullname",
+        label: "Your name",
+        name: "fullname",
+        onChange: (c) => s("fullname", c.target.value),
+        value: o == null ? void 0 : o.fullname,
+        placeholder: "Full name",
+        type: "text",
+        error: !!(i != null && i.fullname),
+        errorMessage: i == null ? void 0 : i.fullname,
         fontFamily: "inherit"
       }
     ),
-    !!(i != null && i.phone) && /* @__PURE__ */ $(ue, { alignItems: "center", gap: "6px", mt: "4px", children: [
-      /* @__PURE__ */ h(Ks, { color: ct.red500 }),
+    n && /* @__PURE__ */ h(
+      oi,
+      {
+        id: "email",
+        label: "Email address",
+        name: "email",
+        onChange: (c) => s("email", c.target.value),
+        value: o == null ? void 0 : o.email,
+        placeholder: "Email address",
+        type: "email",
+        error: !!(i != null && i.email),
+        errorMessage: i == null ? void 0 : i.email,
+        fontFamily: "inherit"
+      }
+    ),
+    r && /* @__PURE__ */ $(Ee, { position: "relative", zIndex: "9", children: [
       /* @__PURE__ */ h(
-        dv,
+        D1,
         {
-          color: ct.red500,
-          size: "xxs",
-          fontFamily: "inherit",
-          children: i == null ? void 0 : i.phone
+          value: o == null ? void 0 : o.phone,
+          onChange: (c) => {
+            s("phone", c);
+          },
+          placeholder: "",
+          label: /* @__PURE__ */ h(
+            ke,
+            {
+              as: "label",
+              fontSize: "14px",
+              lineHeight: "28px",
+              letterSpacing: "-0.2px",
+              fontWeight: 600,
+              mb: "10px",
+              mt: "0",
+              color: "#111215",
+              textAlign: "left",
+              children: "Phone Number (optional)"
+            }
+          ),
+          subtext: /* @__PURE__ */ $(
+            ke,
+            {
+              as: "span",
+              display: "block",
+              fontSize: "12px",
+              lineHeight: "22px",
+              letterSpacing: "-0.2px",
+              color: "#7D879B",
+              fontWeight: 400,
+              children: [
+                "By entering your phone number, you agree to",
+                " ",
+                /* @__PURE__ */ $(
+                  Sb,
+                  {
+                    href: "https://www.mainstack.co/company/privacy",
+                    target: "__blank",
+                    children: [
+                      /* @__PURE__ */ h(
+                        "span",
+                        {
+                          style: { textDecoration: "underline" },
+                          children: "Mainstack's SMS Terms of Service"
+                        }
+                      ),
+                      " ",
+                      "and",
+                      " ",
+                      /* @__PURE__ */ h("span", { style: { textDecoration: "underline" }, children: "Privacy Policy" })
+                    ]
+                  }
+                ),
+                ". Mainstack will share your phone number with the seller of this product(s) or service(s). Message and data rates may apply."
+              ]
+            }
+          ),
+          fontFamily: "inherit"
         }
-      )
-    ] })
+      ),
+      !!(i != null && i.phone) && /* @__PURE__ */ $(ue, { alignItems: "center", gap: "6px", mt: "4px", children: [
+        /* @__PURE__ */ h(Ks, { color: ct.red500 }),
+        /* @__PURE__ */ h(
+          dv,
+          {
+            color: ct.red500,
+            size: "xxs",
+            fontFamily: "inherit",
+            children: i == null ? void 0 : i.phone
+          }
+        )
+      ] })
+    ] }),
+    a
   ] }),
-  a,
   l
 ] });
 function fD({ Request: e }) {
@@ -27984,7 +27995,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
     FooterElement: p,
     height: g
   }, m) => {
-    var vo, gn, Yn, Xi, yo, Ji, bo, Qi, es, So, ts, y, w, k, z, Ce, Ie, Ue, be, Ge, _t, wt, Xn, va, ya, xo, dp, fp, pp, hp, mp, gp, vp, yp, bp;
+    var vo, gn, Yn, Xi, yo, Ji, bo, Qi, es, So, ts, y, w, k, z, Ce, Ie, Ue, be, Ge, _t, Ct, Xn, va, ya, xo, dp, fp, pp, hp, mp, gp, vp, yp, bp;
     const {
       currency: v,
       amount: S,
@@ -28078,7 +28089,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
       data: Gn,
       refetch: ec,
       isLoading: tc
-    } = sM(ve == null ? void 0 : ve.reference, Z), [nc, an] = ae(!1), [rc, on] = ae(!1), ao = ![je.NGN, je.GHS, je.KES].includes(
+    } = sM(ve == null ? void 0 : ve.reference, Z), [nc, an] = ae(!1), [rc, on] = ae(!1), ao = ![Ne.NGN, Ne.GHS, Ne.KES].includes(
       v
     ) && rc, oo = (K) => K === "United States" ? "United States of America" : K === "United Kingdom" ? "United Kingdom of Great Britain and Northern Ireland" : K, Y = UR({
       initialValues: {
@@ -28164,9 +28175,9 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
         Y.setFieldValue(K, Te);
       }
     }));
-    const Wn = cD((yo = Y.values) == null ? void 0 : yo.zipCode), Hn = q ? !1 : v !== (It == null ? void 0 : It.currency), io = Y.values.country !== "" ? aa((Ji = Y == null ? void 0 : Y.values) == null ? void 0 : Ji.country) : It == null ? void 0 : It.currency, so = aa(e == null ? void 0 : e.merchantCountry), ac = [je.USD, je.GBP, je.CAD].includes(
+    const Wn = cD((yo = Y.values) == null ? void 0 : yo.zipCode), Hn = q ? !1 : v !== (It == null ? void 0 : It.currency), io = Y.values.country !== "" ? aa((Ji = Y == null ? void 0 : Y.values) == null ? void 0 : Ji.country) : It == null ? void 0 : It.currency, so = aa(e == null ? void 0 : e.merchantCountry), ac = [Ne.USD, Ne.GBP, Ne.CAD, Ne.NGN].includes(
       so
-    ) && so === v, Kn = q ? !1 : !(ac && so === io), oc = io !== v, ic = [je.USD, je.GBP, je.CAD].includes(
+    ) && so === v, Kn = q ? !1 : !(ac && so === io), oc = io !== v, ic = [Ne.USD, Ne.GBP, Ne.CAD].includes(
       e == null ? void 0 : e.merchantCountry
     ) && (e == null ? void 0 : e.merchantCountry) === io, Gi = J ? q ? !1 : oc && ic : Kn, { data: oe, isLoading: Wi } = oM(
       {
@@ -28186,7 +28197,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
       Z
     ), lo = (ts = (So = (es = oe == null ? void 0 : oe.payload) == null ? void 0 : es.tax_calculation) == null ? void 0 : So.breakdown[0]) == null ? void 0 : ts.percentage_decimal, co = ((w = (y = oe == null ? void 0 : oe.payload) == null ? void 0 : y.tax_calculation) == null ? void 0 : w.local_tax) ?? 0, la = ((z = (k = oe == null ? void 0 : oe.payload) == null ? void 0 : k.tax_calculation) == null ? void 0 : z.dollar_tax) ?? 0, uo = ((Ce = oe == null ? void 0 : oe.payload) == null ? void 0 : Ce.local_amount) ?? 0, fo = ((Ie = oe == null ? void 0 : oe.payload) == null ? void 0 : Ie.local_transaction_fee) ?? 0, ca = ((Ue = oe == null ? void 0 : oe.payload) == null ? void 0 : Ue.currency_switching_fee) ?? 0, vr = ((be = oe == null ? void 0 : oe.payload) == null ? void 0 : be.local_currency_switching_fee) ?? 0, Hi = ((Ge = oe == null ? void 0 : oe.payload) == null ? void 0 : Ge.dollar_currency_switching_fee) ?? 0, yr = parseFloat(uo) + parseFloat(fo) + parseFloat(co) + (Hn ? Number(vr) : 0), Ht = at(() => {
       var K;
-      return v === je.UGX ? Math.ceil(yr) * 100 : Math.round(
+      return v === Ne.UGX ? Math.ceil(yr) * 100 : Math.round(
         yr * ((K = oe == null ? void 0 : oe.payload) != null && K.is_zero_decimal_currency ? 1 : 100)
       );
     }, [
@@ -28201,7 +28212,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
       (Number(fo) + Number(Hn ? vr : 0)).toFixed(2)
     ).toString(), Re = {
       ...e.metadata,
-      phone_number: (wt = Y.values) == null ? void 0 : wt.phone,
+      phone_number: (Ct = Y.values) == null ? void 0 : Ct.phone,
       reference: we,
       email: Y.values.email,
       name: (Xn = Y.values) == null ? void 0 : Xn.fullname,
@@ -28247,7 +28258,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
         case xu.indexOf(v) > -1:
           K = he, qn = "GB_ACCOUNT";
           break;
-        case v === je.CAD:
+        case v === Ne.CAD:
           K = U, qn = "CA_ACCOUNT";
           break;
         default:
@@ -28262,7 +28273,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
     ]);
     de(() => {
       // isFree
-      v !== je.NGN && v !== je.GHS && v !== je.KES ? Ot(!0) : Ot(!1);
+      v !== Ne.NGN && v !== Ne.GHS && v !== Ne.KES ? Ot(!0) : Ot(!1);
     }, [v]);
     const uc = () => {
       const K = ml();
@@ -28314,9 +28325,9 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
     }, [dc, fc] = ae(!1), ua = async (K) => {
       Y.setErrors({});
       const Te = [
-        je.NGN,
-        je.GHS,
-        je.KES
+        Ne.NGN,
+        Ne.GHS,
+        Ne.KES
       ].includes(v);
       if (K.preventDefault(), Ht === 0 || N != null && N.isFullDiscount) {
         Y.submitForm();
@@ -28357,7 +28368,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
       } catch {
         Pt("Failed to complete transaction", $t.error), Y.setSubmitting(!1), an(!1);
       }
-    }, da = Se(null), gc = (mp = da == null ? void 0 : da.current) == null ? void 0 : mp.offsetWidth, mo = v === je.USD && M !== "ips" && tt > 0, vc = [
+    }, da = Se(null), gc = (mp = da == null ? void 0 : da.current) == null ? void 0 : mp.offsetWidth, mo = v === Ne.USD && M !== "ips" && tt > 0, vc = [
       {
         name: "visa",
         src: "https://res.cloudinary.com/mainstack-co/image/upload/v1743682005/payment_lib/visa.png"
@@ -28391,25 +28402,25 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
     } = ni({ defaultIsOpen: !1 }), mn = [
       {
         name: "Bank Transfer or USSD",
-        currency: je.NGN,
+        currency: Ne.NGN,
         payment_mode: "transfer"
       },
       {
         name: "MoMo or Bank Transfer",
-        currency: je.GHS,
+        currency: Ne.GHS,
         payment_mode: "mobile_money"
       },
       {
         name: "MPESA or Airtel Money",
-        currency: je.KES,
+        currency: Ne.KES,
         payment_mode: "mobile_money"
       }
     ].find(
       (K) => K.currency === v
-    ), ga = !ao && jt("crypto") && G && mo || [je.NGN, je.GHS, je.KES].includes(
+    ), ga = !ao && jt("crypto") && G && mo || [Ne.NGN, Ne.GHS, Ne.KES].includes(
       v
     ) && !ao && M !== "ips";
-    return /* @__PURE__ */ h(Et, { children: /* @__PURE__ */ $(
+    return /* @__PURE__ */ h(wt, { children: /* @__PURE__ */ $(
       Bf,
       {
         py: (b == null ? void 0 : b.padding) ?? "0px",
@@ -28433,12 +28444,12 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
               colSpan: Q || V ? 12 : { base: 12, lg: 5 },
               height: "100%",
               bg: ct.gray25,
+              borderRadius: V ? "16px" : { base: "16px", lg: "16px 0 0 16px" },
               children: /* @__PURE__ */ h(
                 uD,
                 {
                   itemsList: j,
                   styles: {
-                    position: V ? "static" : { lg: "fixed" },
                     width: V ? "auto" : { lg: `${gc}px` }
                   },
                   summaryTitle: t ?? (Re == null ? void 0 : Re.productName),
@@ -28485,13 +28496,12 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
               overflowY: "auto",
               height: "90vh",
               children: /* @__PURE__ */ $(Ee, { width: "560px", children: [
-                /* @__PURE__ */ h(Et, { children: f }),
+                /* @__PURE__ */ h(wt, { children: f }),
                 /* @__PURE__ */ $(NR, { value: Y, children: [
-                  /* @__PURE__ */ h("form", { onSubmit: Y.handleSubmit, children: s ?? /* @__PURE__ */ $(Ee, { children: [
+                  /* @__PURE__ */ h("form", { onSubmit: Y.handleSubmit, children: s ?? /* @__PURE__ */ $(Ee, { borderBottom: "1px solid #E8EBF2", py: "20px", children: [
                     /* @__PURE__ */ $(
                       ue,
                       {
-                        py: "20px",
                         justifyContent: "space-between",
                         alignItems: "center",
                         cursor: "pointer",
@@ -28501,7 +28511,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                         opacity: pa ? 1 : 0.6,
                         transition: "opacity 0.2s",
                         children: [
-                          bl(n) ? /* @__PURE__ */ h(Et, { children: n }) : /* @__PURE__ */ $(Ee, { children: [
+                          bl(n) ? /* @__PURE__ */ h(wt, { children: n }) : /* @__PURE__ */ $(Ee, { children: [
                             /* @__PURE__ */ h(
                               ke,
                               {
@@ -28536,7 +28546,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                         ]
                       }
                     ),
-                    /* @__PURE__ */ h(Si, { in: pa, children: /* @__PURE__ */ h(Ee, { transition: "all 0.2s", children: /* @__PURE__ */ h(
+                    /* @__PURE__ */ h(Si, { in: pa, children: /* @__PURE__ */ h(Ee, { transition: "all 0.2s", mt: "20px", children: /* @__PURE__ */ h(
                       dD,
                       {
                         title: n,
@@ -28554,7 +28564,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                         proceedButton: /* @__PURE__ */ $(
                           ue,
                           {
-                            mt: "12px",
+                            mt: "16px",
                             gap: "10px",
                             flexDirection: { base: "column", md: "row" },
                             width: "100%",
@@ -28648,6 +28658,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                                 fontSize: "14px",
                                 lineHeight: "28px",
                                 letterSpacing: "-0.2px",
+                                textAlign: "left",
                                 children: "Secure options to complete your purchase"
                               }
                             )
@@ -28664,9 +28675,9 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                       }
                     ),
                     /* @__PURE__ */ h(Si, { in: Zn, children: /* @__PURE__ */ $(Ee, { transition: "all 0.2s", pb: "200px", children: [
-                      /* @__PURE__ */ h(ue, { gap: "12px", children: (jt("wallet") || !(N != null && N.isFullDiscount)) && /* @__PURE__ */ $(Et, { children: [
+                      /* @__PURE__ */ h(ue, { gap: "12px", children: (jt("wallet") || !(N != null && N.isFullDiscount)) && /* @__PURE__ */ $(wt, { children: [
                         " ",
-                        D && v !== je.NGN && v !== je.GHS && v !== je.KES && /* @__PURE__ */ h(
+                        D && v !== Ne.NGN && v !== Ne.GHS && v !== Ne.KES && /* @__PURE__ */ h(
                           Ws,
                           {
                             stripe: po,
@@ -28729,7 +28740,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                                 )
                               ] }),
                               /* @__PURE__ */ $(ue, { alignItems: "center", gap: "12px", children: [
-                                /* @__PURE__ */ h(
+                                !V && /* @__PURE__ */ h(
                                   ue,
                                   {
                                     alignItems: "center",
@@ -28778,7 +28789,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                                     showPayment: st,
                                     showCheckoutForm: ot,
                                     onCancel: ho,
-                                    btn_color: b == null ? void 0 : b.theme_color,
+                                    btn_color: (b == null ? void 0 : b.theme_color) ?? "#111215",
                                     onPaymentComplete: u,
                                     Request: Z,
                                     paymentModel: M,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mainstack-payments",
   "type": "module",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "main": "build/mainstack-payments.js",
   "types": "build/src/index.d.ts",
   "files": [