mainstack-payments 1.0.20 → 1.0.22

package/build/mainstack-payments.js

@@ -1,7 +1,7 @@
-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";
+import ke, { 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";
 import { createPortal as hv } from "react-dom";
 import G1 from "axios";
 function W1(e) {
@@ -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 "";
@@ -776,7 +776,7 @@ function TS() {
         }
       }
     }
-    var E = l, F = c, P = s, D = i, B = t, G = u, X = r, H = g, ne = p, le = n, he = o, U = a, ge = d, He = !1;
+    var E = l, F = c, P = s, D = i, B = t, G = u, X = r, H = g, ne = p, ce = n, he = o, U = a, ge = d, He = !1;
     function ze(L) {
       return He || (He = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), M(L) || T(L) === l;
     }
@@ -807,7 +807,7 @@ function TS() {
     function ie(L) {
       return T(L) === n;
     }
-    function ce(L) {
+    function ue(L) {
       return T(L) === o;
     }
     function Z(L) {
@@ -816,7 +816,7 @@ function TS() {
     function we(L) {
       return T(L) === d;
     }
-    Be.AsyncMode = E, Be.ConcurrentMode = F, Be.ContextConsumer = P, Be.ContextProvider = D, Be.Element = B, Be.ForwardRef = G, Be.Fragment = X, Be.Lazy = H, Be.Memo = ne, Be.Portal = le, Be.Profiler = he, Be.StrictMode = U, Be.Suspense = ge, Be.isAsyncMode = ze, Be.isConcurrentMode = M, Be.isContextConsumer = O, Be.isContextProvider = q, Be.isElement = j, Be.isForwardRef = J, Be.isFragment = Q, Be.isLazy = V, Be.isMemo = ee, Be.isPortal = ie, Be.isProfiler = ce, Be.isStrictMode = Z, Be.isSuspense = we, Be.isValidElementType = b, Be.typeOf = T;
+    Be.AsyncMode = E, Be.ConcurrentMode = F, Be.ContextConsumer = P, Be.ContextProvider = D, Be.Element = B, Be.ForwardRef = G, Be.Fragment = X, Be.Lazy = H, Be.Memo = ne, Be.Portal = ce, Be.Profiler = he, Be.StrictMode = U, Be.Suspense = ge, Be.isAsyncMode = ze, Be.isConcurrentMode = M, Be.isContextConsumer = O, Be.isContextProvider = q, Be.isElement = j, Be.isForwardRef = J, Be.isFragment = Q, Be.isLazy = V, Be.isMemo = ee, Be.isPortal = ie, Be.isProfiler = ue, Be.isStrictMode = Z, Be.isSuspense = we, Be.isValidElementType = b, Be.typeOf = T;
   }()), Be;
 }
 process.env.NODE_ENV === "production" ? Au.exports = AS() : Au.exports = TS();
@@ -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";
 }
@@ -2010,9 +2010,9 @@ function Pr(...e) {
 var Js = { exports: {} };
 Js.exports;
 (function(e, t) {
-  var n = 200, r = "__lodash_hash_undefined__", a = 800, o = 16, i = 9007199254740991, s = "[object Arguments]", l = "[object Array]", c = "[object AsyncFunction]", u = "[object Boolean]", d = "[object Date]", f = "[object Error]", p = "[object Function]", g = "[object GeneratorFunction]", m = "[object Map]", v = "[object Number]", S = "[object Null]", x = "[object Object]", b = "[object Proxy]", T = "[object RegExp]", E = "[object Set]", F = "[object String]", P = "[object Undefined]", D = "[object WeakMap]", B = "[object ArrayBuffer]", G = "[object DataView]", X = "[object Float32Array]", H = "[object Float64Array]", ne = "[object Int8Array]", le = "[object Int16Array]", he = "[object Int32Array]", U = "[object Uint8Array]", ge = "[object Uint8ClampedArray]", He = "[object Uint16Array]", ze = "[object Uint32Array]", M = /[\\^$.*+?()[\]{}|]/g, O = /^\[object .+?Constructor\]$/, q = /^(?:0|[1-9]\d*)$/, j = {};
-  j[X] = j[H] = j[ne] = j[le] = j[he] = j[U] = j[ge] = j[He] = j[ze] = !0, j[s] = j[l] = j[B] = j[u] = j[G] = j[d] = j[f] = j[p] = j[m] = j[v] = j[x] = j[T] = j[E] = j[F] = j[D] = !1;
-  var J = typeof rs == "object" && rs && rs.Object === Object && rs, Q = typeof self == "object" && self && self.Object === Object && self, V = J || Q || Function("return this")(), ee = t && !t.nodeType && t, ie = ee && !0 && e && !e.nodeType && e, ce = ie && ie.exports === ee, Z = ce && J.process, we = function() {
+  var n = 200, r = "__lodash_hash_undefined__", a = 800, o = 16, i = 9007199254740991, s = "[object Arguments]", l = "[object Array]", c = "[object AsyncFunction]", u = "[object Boolean]", d = "[object Date]", f = "[object Error]", p = "[object Function]", g = "[object GeneratorFunction]", m = "[object Map]", v = "[object Number]", S = "[object Null]", x = "[object Object]", b = "[object Proxy]", T = "[object RegExp]", E = "[object Set]", F = "[object String]", P = "[object Undefined]", D = "[object WeakMap]", B = "[object ArrayBuffer]", G = "[object DataView]", X = "[object Float32Array]", H = "[object Float64Array]", ne = "[object Int8Array]", ce = "[object Int16Array]", he = "[object Int32Array]", U = "[object Uint8Array]", ge = "[object Uint8ClampedArray]", He = "[object Uint16Array]", ze = "[object Uint32Array]", M = /[\\^$.*+?()[\]{}|]/g, O = /^\[object .+?Constructor\]$/, q = /^(?:0|[1-9]\d*)$/, j = {};
+  j[X] = j[H] = j[ne] = j[ce] = j[he] = j[U] = j[ge] = j[He] = j[ze] = !0, j[s] = j[l] = j[B] = j[u] = j[G] = j[d] = j[f] = j[p] = j[m] = j[v] = j[x] = j[T] = j[E] = j[F] = j[D] = !1;
+  var J = typeof rs == "object" && rs && rs.Object === Object && rs, Q = typeof self == "object" && self && self.Object === Object && self, V = J || Q || Function("return this")(), ee = t && !t.nodeType && t, ie = ee && !0 && e && !e.nodeType && e, ue = ie && ie.exports === ee, Z = ue && J.process, we = function() {
     try {
       var y = ie && ie.require && ie.require("util").types;
       return y || Z && Z.binding && Z.binding("util");
@@ -2055,7 +2055,7 @@ Js.exports;
     return y ? "Symbol(src)_1." + y : "";
   }(), N = lt.toString, pe = _.call(Object), ye = RegExp(
     "^" + _.call(I).replace(M, "\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, "$1.*?") + "$"
-  ), Ye = ce ? V.Buffer : void 0, Tt = V.Symbol, Rt = V.Uint8Array, jt = Ye ? Ye.allocUnsafe : void 0, na = st(Object.getPrototypeOf, Object), ra = Object.create, ro = lt.propertyIsEnumerable, aa = mt.splice, It = Tt ? Tt.toStringTag : void 0, oa = function() {
+  ), Ye = ue ? V.Buffer : void 0, Tt = V.Symbol, Rt = V.Uint8Array, jt = Ye ? Ye.allocUnsafe : void 0, na = st(Object.getPrototypeOf, Object), ra = Object.create, ro = lt.propertyIsEnumerable, aa = mt.splice, It = Tt ? Tt.toStringTag : void 0, oa = function() {
     try {
       var y = ho(Object, "defineProperty");
       return y({}, "", {}), y;
@@ -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 + "");
@@ -7923,9 +7923,9 @@ function Lc(e, t) {
     e,
     r
   )(a);
-  return _e.forwardRef(function(l, c) {
+  return ke.forwardRef(function(l, c) {
     const { colorMode: u, forced: d } = jd();
-    return _e.createElement(o, {
+    return ke.createElement(o, {
       ref: c,
       "data-theme": d ? u : void 0,
       ...l
@@ -7953,7 +7953,7 @@ function $5() {
   });
 }
 var xe = $5();
-function Le(e) {
+function je(e) {
   return pn(e);
 }
 function F5(e = {}) {
@@ -9608,23 +9608,23 @@ function yi({ autoplay: e = !0, delay: t = 0, driver: n = kP, keyframes: r, type
   const { calculatedDuration: X } = E;
   let H = 1 / 0, ne = 1 / 0;
   X !== null && (H = X + i, ne = H * (o + 1) - i);
-  let le = 0;
+  let ce = 0;
   const he = (O) => {
     if (B === null)
       return;
-    p > 0 && (B = Math.min(B, O)), p < 0 && (B = Math.min(O - ne / p, B)), D !== null ? le = D : le = Math.round(O - B) * p;
-    const q = le - t * (p >= 0 ? 1 : -1), j = p >= 0 ? q < 0 : q > ne;
-    le = Math.max(q, 0), P === "finished" && D === null && (le = ne);
-    let J = le, Q = E;
+    p > 0 && (B = Math.min(B, O)), p < 0 && (B = Math.min(O - ne / p, B)), D !== null ? ce = D : ce = Math.round(O - B) * p;
+    const q = ce - t * (p >= 0 ? 1 : -1), j = p >= 0 ? q < 0 : q > ne;
+    ce = Math.max(q, 0), P === "finished" && D === null && (ce = ne);
+    let J = ce, Q = E;
     if (o) {
-      const ce = Math.min(le, ne) / H;
-      let Z = Math.floor(ce), we = ce % 1;
-      !we && ce >= 1 && (we = 1), we === 1 && Z--, Z = Math.min(Z, o + 1), !!(Z % 2) && (s === "reverse" ? (we = 1 - we, i && (we -= i / H)) : s === "mirror" && (Q = F)), J = cr(0, 1, we) * H;
+      const ue = Math.min(ce, ne) / H;
+      let Z = Math.floor(ue), we = ue % 1;
+      !we && ue >= 1 && (we = 1), we === 1 && Z--, Z = Math.min(Z, o + 1), !!(Z % 2) && (s === "reverse" ? (we = 1 - we, i && (we -= i / H)) : s === "mirror" && (Q = F)), J = cr(0, 1, we) * H;
     }
     const V = j ? { done: !1, value: r[0] } : Q.next(J);
     T && (V.value = T(V.value));
     let { done: ee } = V;
-    !j && X !== null && (ee = p >= 0 ? le >= ne : le <= 0);
+    !j && X !== null && (ee = p >= 0 ? ce >= ne : ce <= 0);
     const ie = D === null && (P === "finished" || P === "running" && ee);
     return d && d(V.value), ie && He(), V;
   }, U = () => {
@@ -9646,10 +9646,10 @@ function yi({ autoplay: e = !0, delay: t = 0, driver: n = kP, keyframes: r, type
       return v.then(O, q);
     },
     get time() {
-      return _n(le);
+      return _n(ce);
     },
     set time(O) {
-      O = ir(O), le = O, D !== null || !x || p === 0 ? D = O : B = x.now() - O / p;
+      O = ir(O), ce = O, D !== null || !x || p === 0 ? D = O : B = x.now() - O / p;
     },
     get duration() {
       const O = E.calculatedDuration === null ? Qh(E) : E.calculatedDuration;
@@ -9659,14 +9659,14 @@ function yi({ autoplay: e = !0, delay: t = 0, driver: n = kP, keyframes: r, type
       return p;
     },
     set speed(O) {
-      O === p || !x || (p = O, M.time = _n(le));
+      O === p || !x || (p = O, M.time = _n(ce));
     },
     get state() {
       return P;
     },
     play: ze,
     pause: () => {
-      P = "paused", D = le;
+      P = "paused", D = ce;
     },
     stop: () => {
       g = !0, P !== "idle" && (P = "idle", c && c(), ge());
@@ -10329,13 +10329,13 @@ function h6(e) {
       const X = Array.isArray(T) ? T : [T];
       let H = X.reduce(a, {});
       F === !1 && (H = {});
-      const { prevResolvedValues: ne = {} } = b, le = {
+      const { prevResolvedValues: ne = {} } = b, ce = {
         ...ne,
         ...H
       }, he = (U) => {
         B = !0, p.has(U) && (G = !0, p.delete(U)), b.needsAnimating[U] = !0;
       };
-      for (const U in le) {
+      for (const U in ce) {
         const ge = H[U], He = ne[U];
         if (g.hasOwnProperty(U))
           continue;
@@ -11036,7 +11036,7 @@ const $o = {
     return typeof a[2 + i] == "number" && (a[2 + i] /= c), typeof a[3 + i] == "number" && (a[3 + i] /= c), o(a);
   }
 };
-class W6 extends _e.Component {
+class W6 extends ke.Component {
   /**
    * This only mounts projection nodes for components that
    * need measuring, we might want to do it for all components
@@ -11078,7 +11078,7 @@ class W6 extends _e.Component {
 }
 function my(e) {
   const [t, n] = hy(), r = et(ef);
-  return _e.createElement(W6, { ...e, layoutGroup: r, switchLayoutGroup: et(u0), isPresent: t, safeToRemove: n });
+  return ke.createElement(W6, { ...e, layoutGroup: r, switchLayoutGroup: et(u0), isPresent: t, safeToRemove: n });
 }
 const H6 = {
   borderRadius: {
@@ -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,
       {
@@ -13990,7 +13990,7 @@ function q4() {
     function v(M) {
       if (process.env.NODE_ENV !== "production")
         var O = {}, q = 0;
-      function j(Q, V, ee, ie, ce, Z, we) {
+      function j(Q, V, ee, ie, ue, Z, we) {
         if (ie = ie || f, Z = Z || ee, we !== n) {
           if (l) {
             var L = new Error(
@@ -14005,15 +14005,15 @@ function q4() {
             ), O[tt] = !0, q++);
           }
         }
-        return V[ee] == null ? Q ? V[ee] === null ? new m("The " + ce + " `" + Z + "` is marked as required " + ("in `" + ie + "`, but its value is `null`.")) : new m("The " + ce + " `" + Z + "` is marked as required in " + ("`" + ie + "`, but its value is `undefined`.")) : null : M(V, ee, ie, ce, Z);
+        return V[ee] == null ? Q ? V[ee] === null ? new m("The " + ue + " `" + Z + "` is marked as required " + ("in `" + ie + "`, but its value is `null`.")) : new m("The " + ue + " `" + Z + "` is marked as required in " + ("`" + ie + "`, but its value is `undefined`.")) : null : M(V, ee, ie, ue, Z);
       }
       var J = j.bind(null, !1);
       return J.isRequired = j.bind(null, !0), J;
     }
     function S(M) {
       function O(q, j, J, Q, V, ee) {
-        var ie = q[j], ce = U(ie);
-        if (ce !== M) {
+        var ie = q[j], ue = U(ie);
+        if (ue !== M) {
           var Z = ge(ie);
           return new m(
             "Invalid " + Q + " `" + V + "` of type " + ("`" + Z + "` supplied to `" + J + "`, expected ") + ("`" + M + "`."),
@@ -14036,8 +14036,8 @@ function q4() {
           var ie = U(ee);
           return new m("Invalid " + Q + " `" + V + "` of type " + ("`" + ie + "` supplied to `" + J + "`, expected an array."));
         }
-        for (var ce = 0; ce < ee.length; ce++) {
-          var Z = M(ee, ce, J, Q, V + "[" + ce + "]", n);
+        for (var ue = 0; ue < ee.length; ue++) {
+          var Z = M(ee, ue, J, Q, V + "[" + ue + "]", n);
           if (Z instanceof Error)
             return Z;
         }
@@ -14086,11 +14086,11 @@ function q4() {
         for (var ee = q[j], ie = 0; ie < M.length; ie++)
           if (g(ee, M[ie]))
             return null;
-        var ce = JSON.stringify(M, function(we, L) {
+        var ue = JSON.stringify(M, function(we, L) {
           var tt = ge(L);
           return tt === "symbol" ? String(L) : L;
         });
-        return new m("Invalid " + Q + " `" + V + "` of value `" + String(ee) + "` " + ("supplied to `" + J + "`, expected one of " + ce + "."));
+        return new m("Invalid " + Q + " `" + V + "` of value `" + String(ee) + "` " + ("supplied to `" + J + "`, expected one of " + ue + "."));
       }
       return v(O);
     }
@@ -14101,9 +14101,9 @@ function q4() {
         var ee = q[j], ie = U(ee);
         if (ie !== "object")
           return new m("Invalid " + Q + " `" + V + "` of type " + ("`" + ie + "` supplied to `" + J + "`, expected an object."));
-        for (var ce in ee)
-          if (r(ee, ce)) {
-            var Z = M(ee, ce, J, Q, V + "." + ce, n);
+        for (var ue in ee)
+          if (r(ee, ue)) {
+            var Z = M(ee, ue, J, Q, V + "." + ue, n);
             if (Z instanceof Error)
               return Z;
           }
@@ -14122,20 +14122,20 @@ function q4() {
           ), i;
       }
       function j(J, Q, V, ee, ie) {
-        for (var ce = [], Z = 0; Z < M.length; Z++) {
+        for (var ue = [], Z = 0; Z < M.length; Z++) {
           var we = M[Z], L = we(J, Q, V, ee, ie, n);
           if (L == null)
             return null;
-          L.data && r(L.data, "expectedType") && ce.push(L.data.expectedType);
+          L.data && r(L.data, "expectedType") && ue.push(L.data.expectedType);
         }
-        var tt = ce.length > 0 ? ", expected one of type [" + ce.join(", ") + "]" : "";
+        var tt = ue.length > 0 ? ", expected one of type [" + ue.join(", ") + "]" : "";
         return new m("Invalid " + ee + " `" + ie + "` supplied to " + ("`" + V + "`" + tt + "."));
       }
       return v(j);
     }
     function G() {
       function M(O, q, j, J, Q) {
-        return le(O[q]) ? null : new m("Invalid " + J + " `" + Q + "` supplied to " + ("`" + j + "`, expected a ReactNode."));
+        return ce(O[q]) ? null : new m("Invalid " + J + " `" + Q + "` supplied to " + ("`" + j + "`, expected a ReactNode."));
       }
       return v(M);
     }
@@ -14149,11 +14149,11 @@ function q4() {
         var ee = q[j], ie = U(ee);
         if (ie !== "object")
           return new m("Invalid " + Q + " `" + V + "` of type `" + ie + "` " + ("supplied to `" + J + "`, expected `object`."));
-        for (var ce in M) {
-          var Z = M[ce];
+        for (var ue in M) {
+          var Z = M[ue];
           if (typeof Z != "function")
-            return X(J, Q, V, ce, ge(Z));
-          var we = Z(ee, ce, J, Q, V + "." + ce, n);
+            return X(J, Q, V, ue, ge(Z));
+          var we = Z(ee, ue, J, Q, V + "." + ue, n);
           if (we)
             return we;
         }
@@ -14166,8 +14166,8 @@ function q4() {
         var ee = q[j], ie = U(ee);
         if (ie !== "object")
           return new m("Invalid " + Q + " `" + V + "` of type `" + ie + "` " + ("supplied to `" + J + "`, expected `object`."));
-        var ce = t({}, q[j], M);
-        for (var Z in ce) {
+        var ue = t({}, q[j], M);
+        for (var Z in ue) {
           var we = M[Z];
           if (r(M, Z) && typeof we != "function")
             return X(J, Q, V, Z, ge(we));
@@ -14184,7 +14184,7 @@ Valid keys: ` + JSON.stringify(Object.keys(M), null, "  ")
       }
       return v(O);
     }
-    function le(M) {
+    function ce(M) {
       switch (typeof M) {
         case "number":
         case "string":
@@ -14194,7 +14194,7 @@ Valid keys: ` + JSON.stringify(Object.keys(M), null, "  ")
           return !M;
         case "object":
           if (Array.isArray(M))
-            return M.every(le);
+            return M.every(ce);
           if (M === null || s(M))
             return !0;
           var O = d(M);
@@ -14202,12 +14202,12 @@ Valid keys: ` + JSON.stringify(Object.keys(M), null, "  ")
             var q = O.call(M), j;
             if (O !== M.entries) {
               for (; !(j = q.next()).done; )
-                if (!le(j.value))
+                if (!ce(j.value))
                   return !1;
             } else
               for (; !(j = q.next()).done; ) {
                 var J = j.value;
-                if (J && !le(J[1]))
+                if (J && !ce(J[1]))
                   return !1;
               }
           } else
@@ -14481,7 +14481,7 @@ var Ky = Tf({}, function(e) {
   async: !0,
   ssr: typeof document < "u"
 }), s3 = /* @__PURE__ */ tn(void 0), l3 = [], Zy = /* @__PURE__ */ R.forwardRef(function(t, n) {
-  var r, a = R.useState(), o = a[0], i = a[1], s = R.useRef(), l = R.useRef(!1), c = R.useRef(null), u = R.useState({}), d = u[1], f = t.children, p = t.disabled, g = p === void 0 ? !1 : p, m = t.noFocusGuards, v = m === void 0 ? !1 : m, S = t.persistentFocus, x = S === void 0 ? !1 : S, b = t.crossFrame, T = b === void 0 ? !0 : b, E = t.autoFocus, F = E === void 0 ? !0 : E, P = t.allowTextSelection, D = t.group, B = t.className, G = t.whiteList, X = t.hasPositiveIndices, H = t.shards, ne = H === void 0 ? l3 : H, le = t.as, he = le === void 0 ? "div" : le, U = t.lockProps, ge = U === void 0 ? {} : U, He = t.sideCar, ze = t.returnFocus, M = ze === void 0 ? !1 : ze, O = t.focusOptions, q = t.onActivation, j = t.onDeactivation, J = R.useState({}), Q = J[0], V = R.useCallback(function(st) {
+  var r, a = R.useState(), o = a[0], i = a[1], s = R.useRef(), l = R.useRef(!1), c = R.useRef(null), u = R.useState({}), d = u[1], f = t.children, p = t.disabled, g = p === void 0 ? !1 : p, m = t.noFocusGuards, v = m === void 0 ? !1 : m, S = t.persistentFocus, x = S === void 0 ? !1 : S, b = t.crossFrame, T = b === void 0 ? !0 : b, E = t.autoFocus, F = E === void 0 ? !0 : E, P = t.allowTextSelection, D = t.group, B = t.className, G = t.whiteList, X = t.hasPositiveIndices, H = t.shards, ne = H === void 0 ? l3 : H, ce = t.as, he = ce === void 0 ? "div" : ce, U = t.lockProps, ge = U === void 0 ? {} : U, He = t.sideCar, ze = t.returnFocus, M = ze === void 0 ? !1 : ze, O = t.focusOptions, q = t.onActivation, j = t.onDeactivation, J = R.useState({}), Q = J[0], V = R.useCallback(function(st) {
     var mt = st.captureFocusRestore;
     if (!c.current) {
       var ve, lt = (ve = document) == null ? void 0 : ve.activeElement;
@@ -14501,7 +14501,7 @@ var Ky = Tf({}, function(e) {
         }) : ve.focus(Ve);
       }
     }
-  }, [M]), ce = R.useCallback(function(st) {
+  }, [M]), ue = R.useCallback(function(st) {
     l.current && Ky.useMedium(st);
   }, []), Z = qy.useMedium, we = R.useCallback(function(st) {
     s.current !== st && (s.current = st, i(st));
@@ -14549,7 +14549,7 @@ var Ky = Tf({}, function(e) {
   }, L, {
     className: B,
     onBlur: Z,
-    onFocus: ce
+    onFocus: ue
   }), /* @__PURE__ */ R.createElement(s3.Provider, {
     value: Ot
   }, f)), me && /* @__PURE__ */ R.createElement("div", {
@@ -14656,7 +14656,7 @@ function p3(e, t) {
         var p = o.indexOf(this);
         o.splice(p, 1), s();
       }, d.render = function() {
-        return /* @__PURE__ */ _e.createElement(a, this.props);
+        return /* @__PURE__ */ ke.createElement(a, this.props);
       }, u;
     }(V1);
     return f3(l, "displayName", "SideEffect(" + n(a) + ")"), l;
@@ -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 _e = 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,21 +15506,21 @@ 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
     }
   );
 });
-ke.displayName = "Text";
+_e.displayName = "Text";
 function cg(e) {
   return $F(
     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 le = 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,
@@ -15636,7 +15636,7 @@ var ue = Le(function(t, n) {
   };
   return /* @__PURE__ */ h(xe.div, { ref: n, __css: d, ...u });
 });
-ue.displayName = "Flex";
+le.displayName = "Flex";
 function Gr(e, t = {}) {
   const { ssr: n = !0, fallback: r } = t, { getWindow: a } = I5(), o = Array.isArray(e) ? e : [e];
   let i = Array.isArray(r) ? r : [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 }
   };
@@ -16662,10 +16662,10 @@ function N9() {
 In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`);
 }
 var zt = function(t, n, r) {
-  var a = !!r, o = _e.useRef(r);
-  _e.useEffect(function() {
+  var a = !!r, o = ke.useRef(r);
+  ke.useEffect(function() {
     o.current = r;
-  }, [r]), _e.useEffect(function() {
+  }, [r]), ke.useEffect(function() {
     if (!a || !t)
       return function() {
       };
@@ -16677,8 +16677,8 @@ var zt = function(t, n, r) {
     };
   }, [a, n, t, o]);
 }, fd = function(t) {
-  var n = _e.useRef(t);
-  return _e.useEffect(function() {
+  var n = ke.useRef(t);
+  return ke.useEffect(function() {
     n.current = t;
   }, [t]), n.current;
 }, Ja = function(t) {
@@ -16747,22 +16747,22 @@ var zt = function(t, n, r) {
     version: "2.7.0",
     url: "https://stripe.com/docs/stripe-js/react"
   }));
-}, zl = /* @__PURE__ */ _e.createContext(null);
+}, zl = /* @__PURE__ */ ke.createContext(null);
 zl.displayName = "ElementsContext";
 var jb = function(t, n) {
   if (!t)
     throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(n, " in an <Elements> provider."));
   return t;
 }, Ws = function(t) {
-  var n = t.stripe, r = t.options, a = t.children, o = _e.useMemo(function() {
+  var n = t.stripe, r = t.options, a = t.children, o = ke.useMemo(function() {
     return V9(n);
-  }, [n]), i = _e.useState(function() {
+  }, [n]), i = ke.useState(function() {
     return {
       stripe: o.tag === "sync" ? o.stripe : null,
       elements: o.tag === "sync" ? o.stripe.elements(r) : null
     };
   }), s = Bb(i, 2), l = s[0], c = s[1];
-  _e.useEffect(function() {
+  ke.useEffect(function() {
     var f = !0, p = function(m) {
       c(function(v) {
         return v.stripe ? v : {
@@ -16778,18 +16778,18 @@ var jb = function(t, n) {
     };
   }, [o, l, r]);
   var u = fd(n);
-  _e.useEffect(function() {
+  ke.useEffect(function() {
     u !== null && u !== n && console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.");
   }, [u, n]);
   var d = fd(r);
-  return _e.useEffect(function() {
+  return ke.useEffect(function() {
     if (l.elements) {
       var f = Nb(r, d, ["clientSecret", "fonts"]);
       f && l.elements.update(f);
     }
-  }, [r, d, l.elements]), _e.useEffect(function() {
+  }, [r, d, l.elements]), ke.useEffect(function() {
     U9(l.stripe);
-  }, [l.stripe]), /* @__PURE__ */ _e.createElement(zl.Provider, {
+  }, [l.stripe]), /* @__PURE__ */ ke.createElement(zl.Provider, {
     value: l
   }, a);
 };
@@ -16798,27 +16798,27 @@ Ws.propTypes = {
   options: Je.object
 };
 var G9 = function(t) {
-  var n = _e.useContext(zl);
+  var n = ke.useContext(zl);
   return jb(n, t);
 }, zb = function() {
   var t = G9("calls useElements()"), n = t.elements;
   return n;
 };
 Je.func.isRequired;
-var Vb = /* @__PURE__ */ _e.createContext(null);
+var Vb = /* @__PURE__ */ ke.createContext(null);
 Vb.displayName = "CustomCheckoutSdkContext";
 var W9 = function(t, n) {
   if (!t)
     throw new Error("Could not find CustomCheckoutProvider context; You need to wrap the part of your app that ".concat(n, " in an <CustomCheckoutProvider> provider."));
   return t;
-}, H9 = /* @__PURE__ */ _e.createContext(null);
+}, H9 = /* @__PURE__ */ ke.createContext(null);
 H9.displayName = "CustomCheckoutContext";
 Je.any, Je.shape({
   clientSecret: Je.string.isRequired,
   elementsOptions: Je.object
 }).isRequired;
 var pd = function(t) {
-  var n = _e.useContext(Vb), r = _e.useContext(zl);
+  var n = ke.useContext(Vb), r = ke.useContext(zl);
   if (n && r)
     throw new Error("You cannot wrap the part of your app that ".concat(t, " in both <CustomCheckoutProvider> and <Elements> providers."));
   return n ? W9(n, t) : jb(r, t);
@@ -16826,24 +16826,24 @@ var pd = function(t) {
   return t.charAt(0).toUpperCase() + t.slice(1);
 }, pt = function(t, n) {
   var r = "".concat(K9(t), "Element"), a = function(l) {
-    var c = l.id, u = l.className, d = l.options, f = d === void 0 ? {} : d, p = l.onBlur, g = l.onFocus, m = l.onReady, v = l.onChange, S = l.onEscape, x = l.onClick, b = l.onLoadError, T = l.onLoaderStart, E = l.onNetworksChange, F = l.onConfirm, P = l.onCancel, D = l.onShippingAddressChange, B = l.onShippingRateChange, G = pd("mounts <".concat(r, ">")), X = "elements" in G ? G.elements : null, H = "customCheckoutSdk" in G ? G.customCheckoutSdk : null, ne = _e.useState(null), le = Bb(ne, 2), he = le[0], U = le[1], ge = _e.useRef(null), He = _e.useRef(null);
+    var c = l.id, u = l.className, d = l.options, f = d === void 0 ? {} : d, p = l.onBlur, g = l.onFocus, m = l.onReady, v = l.onChange, S = l.onEscape, x = l.onClick, b = l.onLoadError, T = l.onLoaderStart, E = l.onNetworksChange, F = l.onConfirm, P = l.onCancel, D = l.onShippingAddressChange, B = l.onShippingRateChange, G = pd("mounts <".concat(r, ">")), X = "elements" in G ? G.elements : null, H = "customCheckoutSdk" in G ? G.customCheckoutSdk : null, ne = ke.useState(null), ce = Bb(ne, 2), he = ce[0], U = ce[1], ge = ke.useRef(null), He = ke.useRef(null);
     zt(he, "blur", p), zt(he, "focus", g), zt(he, "escape", S), zt(he, "click", x), zt(he, "loaderror", b), zt(he, "loaderstart", T), zt(he, "networkschange", E), zt(he, "confirm", F), zt(he, "cancel", P), zt(he, "shippingaddresschange", D), zt(he, "shippingratechange", B), zt(he, "change", v);
     var ze;
     m && (t === "expressCheckout" ? ze = m : ze = function() {
       m(he);
-    }), zt(he, "ready", ze), _e.useLayoutEffect(function() {
+    }), zt(he, "ready", ze), ke.useLayoutEffect(function() {
       if (ge.current === null && He.current !== null && (X || H)) {
         var O = null;
         H ? O = H.createElement(t, f) : X && (O = X.create(t, f)), ge.current = O, U(O), O && O.mount(He.current);
       }
     }, [X, H, f]);
     var M = fd(f);
-    return _e.useEffect(function() {
+    return ke.useEffect(function() {
       if (ge.current) {
         var O = Nb(f, M, ["paymentRequest"]);
         O && ge.current.update(O);
       }
-    }, [f, M]), _e.useLayoutEffect(function() {
+    }, [f, M]), ke.useLayoutEffect(function() {
       return function() {
         if (ge.current && typeof ge.current.destroy == "function")
           try {
@@ -16851,7 +16851,7 @@ var pd = function(t) {
           } catch {
           }
       };
-    }, []), /* @__PURE__ */ _e.createElement("div", {
+    }, []), /* @__PURE__ */ ke.createElement("div", {
       id: c,
       className: u,
       ref: He
@@ -16859,7 +16859,7 @@ var pd = function(t) {
   }, o = function(l) {
     pd("mounts <".concat(r, ">"));
     var c = l.id, u = l.className;
-    return /* @__PURE__ */ _e.createElement("div", {
+    return /* @__PURE__ */ ke.createElement("div", {
       id: c,
       className: u
     });
@@ -16882,7 +16882,7 @@ var pd = function(t) {
     onShippingRateChange: Je.func,
     options: Je.object
   }, i.displayName = r, i.__elementType = t, i;
-}, ht = typeof window > "u", q9 = /* @__PURE__ */ _e.createContext(null);
+}, ht = typeof window > "u", q9 = /* @__PURE__ */ ke.createContext(null);
 q9.displayName = "EmbeddedCheckoutProviderContext";
 var Vf = function() {
   var t = pd("calls useStripe()"), n = t.stripe;
@@ -18128,7 +18128,7 @@ function UR(e) {
   de(function() {
     i && S.current === !0 && Tr(p.current, f.initialValues) && ne(p.current);
   }, [i, ne]);
-  var le = fe(function(_) {
+  var ce = fe(function(_) {
     var I = _ && _.values ? _.values : p.current, W = _ && _.errors ? _.errors : g.current ? g.current : f.initialErrors || {}, N = _ && _.touched ? _.touched : m.current ? m.current : f.initialTouched || {}, pe = _ && _.status ? _.status : v.current ? v.current : f.initialStatus;
     p.current = I, g.current = W, m.current = N, v.current = pe;
     var ye = function() {
@@ -18152,8 +18152,8 @@ function UR(e) {
       ye();
   }, [f.initialErrors, f.initialStatus, f.initialTouched, f.onReset]);
   de(function() {
-    S.current === !0 && !Tr(p.current, f.initialValues) && c && (p.current = f.initialValues, le(), i && ne(p.current));
-  }, [c, f.initialValues, le, i, ne]), de(function() {
+    S.current === !0 && !Tr(p.current, f.initialValues) && c && (p.current = f.initialValues, ce(), i && ne(p.current));
+  }, [c, f.initialValues, ce, i, ne]), de(function() {
     c && S.current === !0 && !Tr(g.current, f.initialErrors) && (g.current = f.initialErrors || xr, P({
       type: "SET_ERRORS",
       payload: f.initialErrors || xr
@@ -18311,7 +18311,7 @@ function UR(e) {
         return _;
       }
     });
-  }, []), ce = fe(function(_) {
+  }, []), ue = fe(function(_) {
     P({
       type: "SET_STATUS",
       payload: _
@@ -18358,14 +18358,14 @@ function UR(e) {
       console.warn("Warning: An unhandled error was caught from submitForm()", W);
     });
   }), tt = {
-    resetForm: le,
+    resetForm: ce,
     validateForm: ne,
     validateField: he,
     setErrors: ze,
     setFieldError: O,
     setFieldTouched: Q,
     setFieldValue: q,
-    setStatus: ce,
+    setStatus: ue,
     setSubmitting: Z,
     setTouched: He,
     setValues: M,
@@ -18374,7 +18374,7 @@ function UR(e) {
   }, me = Zt(function() {
     return u(F.values, tt);
   }), ot = Zt(function(_) {
-    _ && _.preventDefault && ln(_.preventDefault) && _.preventDefault(), _ && _.stopPropagation && ln(_.stopPropagation) && _.stopPropagation(), le();
+    _ && _.preventDefault && ln(_.preventDefault) && _.preventDefault(), _ && _.stopPropagation && ln(_.stopPropagation) && _.stopPropagation(), ce();
   }), Ot = fe(function(_) {
     return {
       value: Vt(F.values, _),
@@ -18421,13 +18421,13 @@ function UR(e) {
     handleChange: J,
     handleReset: ot,
     handleSubmit: L,
-    resetForm: le,
+    resetForm: ce,
     setErrors: ze,
     setFormikState: ie,
     setFieldTouched: Q,
     setFieldValue: q,
     setFieldError: O,
-    setStatus: ce,
+    setStatus: ue,
     setSubmitting: Z,
     setTouched: He,
     setValues: M,
@@ -18971,8 +18971,8 @@ function Ca(e) {
         spec: i.spec,
         disableStackTrace: X.disableStackTrace || S
       }, d, X.params);
-      for (const le of Object.keys(H))
-        H[le] = x(H[le]);
+      for (const ce of Object.keys(H))
+        H[ce] = x(H[ce]);
       const ne = new Bt(Bt.formatError(X.message || f, H), n, H.path, X.type || c, H.disableStackTrace);
       return ne.params = H, ne;
     }
@@ -21796,7 +21796,7 @@ const iv = /* @__PURE__ */ new Map([
   const [T, E] = ae(0);
   return /* @__PURE__ */ $(Ee, { w: p || "full", children: [
     e && /* @__PURE__ */ h(
-      ke,
+      _e,
       {
         as: "label",
         htmlFor: n,
@@ -21857,7 +21857,7 @@ const iv = /* @__PURE__ */ new Map([
         ...S
       }
     ) }),
-    s && l && /* @__PURE__ */ $(ue, { alignItems: "center", gap: "6px", children: [
+    s && l && /* @__PURE__ */ $(le, { alignItems: "center", gap: "6px", children: [
       /* @__PURE__ */ h(Ks, { color: ct.red500 }),
       /* @__PURE__ */ h(dv, { color: ct.red500, size: "xxs", fontFamily: m, children: l })
     ] })
@@ -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 })
     ]
   }
@@ -21932,7 +21932,7 @@ const iv = /* @__PURE__ */ new Map([
       D.current && me.unobserve(D.current);
     };
   }, [F, P, i, o]);
-  const ne = typeof window < "u" ? JSON.parse(window.localStorage.getItem("userIp")) : "", { mutate: le, data: he } = Hf(u), [U, ge] = ae(!1), [He, ze] = ae(""), [M, O] = ae("");
+  const ne = typeof window < "u" ? JSON.parse(window.localStorage.getItem("userIp")) : "", { mutate: ce, data: he } = Hf(u), [U, ge] = ae(!1), [He, ze] = ae(""), [M, O] = ae("");
   ae(!1);
   const [q, j] = ae(0), J = Se(null), Q = (n == null ? void 0 : n.country) ?? (ne == null ? void 0 : ne.country_name), V = (we = Qt == null ? void 0 : Qt.find(
     (me) => me.name === Q
@@ -21986,7 +21986,7 @@ const iv = /* @__PURE__ */ new Map([
             ...d === "ips" || g ? { payment_method_id: (Ot = ve == null ? void 0 : ve.paymentMethod) == null ? void 0 : Ot.id } : { source: (st = ve == null ? void 0 : ve.token) == null ? void 0 : st.id },
             callback_url: f
           };
-          le(lt, {
+          ce(lt, {
             onSuccess: (Ve) => {
               var _, I;
               if ((_ = Ve == null ? void 0 : Ve.data) != null && _.next_action) {
@@ -22012,7 +22012,7 @@ const iv = /* @__PURE__ */ new Map([
           });
         }
       }
-  }, ce = {
+  }, ue = {
     backgroundColor: "#fff",
     iconColor: "#c4f0ff",
     color: "#131316",
@@ -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,
@@ -22049,7 +22049,7 @@ const iv = /* @__PURE__ */ new Map([
         /* @__PURE__ */ $(Bf, { gap: "16px", children: [
           /* @__PURE__ */ $(Ee, { children: [
             /* @__PURE__ */ h(
-              ke,
+              _e,
               {
                 fontSize: "14px",
                 fontWeight: "600",
@@ -22077,7 +22077,7 @@ const iv = /* @__PURE__ */ new Map([
                   {
                     options: {
                       style: {
-                        base: ce,
+                        base: ue,
                         invalid: {
                           iconColor: "red",
                           color: "red"
@@ -22089,10 +22089,10 @@ const iv = /* @__PURE__ */ new Map([
               }
             )
           ] }),
-          /* @__PURE__ */ $(ue, { width: "100%", gap: "8px", children: [
+          /* @__PURE__ */ $(le, { width: "100%", gap: "8px", children: [
             /* @__PURE__ */ $(Ee, { flexBasis: "50%", children: [
               /* @__PURE__ */ h(
-                ke,
+                _e,
                 {
                   fontSize: "14px",
                   fontWeight: "600",
@@ -22120,7 +22120,7 @@ const iv = /* @__PURE__ */ new Map([
                     {
                       options: {
                         style: {
-                          base: ce,
+                          base: ue,
                           invalid: {
                             iconColor: "red",
                             color: "red"
@@ -22134,7 +22134,7 @@ const iv = /* @__PURE__ */ new Map([
             ] }),
             /* @__PURE__ */ $(Ee, { flexBasis: "50%", children: [
               /* @__PURE__ */ h(
-                ke,
+                _e,
                 {
                   fontSize: "14px",
                   fontWeight: "600",
@@ -22162,7 +22162,7 @@ const iv = /* @__PURE__ */ new Map([
                     {
                       options: {
                         style: {
-                          base: ce,
+                          base: ue,
                           invalid: {
                             iconColor: "red",
                             color: "red"
@@ -22197,7 +22197,7 @@ const iv = /* @__PURE__ */ new Map([
               },
               fontFamily: "inherit",
               label: /* @__PURE__ */ h(
-                ke,
+                _e,
                 {
                   as: "label",
                   fontSize: "14px",
@@ -22226,7 +22226,7 @@ const iv = /* @__PURE__ */ new Map([
               fontFamily: "inherit"
             }
           ) }),
-          /* @__PURE__ */ h(ue, { gap: "16px", children: /* @__PURE__ */ $(Uo, { children: [
+          /* @__PURE__ */ h(le, { gap: "16px", children: /* @__PURE__ */ $(Uo, { children: [
             /* @__PURE__ */ h(
               oi,
               {
@@ -22243,7 +22243,7 @@ const iv = /* @__PURE__ */ new Map([
               }
             ),
             Z !== null && /* @__PURE__ */ h(
-              ke,
+              _e,
               {
                 color: Z ? "#0BA162" : "red",
                 fontSize: "12px",
@@ -22254,14 +22254,14 @@ const iv = /* @__PURE__ */ new Map([
           ] }) })
         ] }),
         /* @__PURE__ */ h(
-          ue,
+          le,
           {
             p: "16px",
             bg: "white",
             flexDirection: "column",
             alignItems: "center",
             children: /* @__PURE__ */ $(
-              ue,
+              le,
               {
                 gap: "10px",
                 width: `${q}px`,
@@ -22316,7 +22316,7 @@ const iv = /* @__PURE__ */ new Map([
           }
         ),
         /* @__PURE__ */ $(
-          ue,
+          le,
           {
             mt: "16px",
             mb: "10px",
@@ -22327,7 +22327,7 @@ const iv = /* @__PURE__ */ new Map([
             alignItems: "center",
             children: [
               /* @__PURE__ */ h(O1, { mt: 0.5, boxSize: 6 }),
-              /* @__PURE__ */ h(ke, { fontSize: "14px", lineHeight: "22px", color: "#4D5760", children: "Payments are secured and encrypted" })
+              /* @__PURE__ */ h(_e, { fontSize: "14px", lineHeight: "22px", color: "#4D5760", children: "Payments are secured and encrypted" })
             ]
           }
         )
@@ -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,
@@ -26422,18 +26422,6 @@ const lv = "Payment Completed", nD = ({
             bottom: "0px"
           } : {},
           children: [
-            i && /* @__PURE__ */ h(
-              Ee,
-              {
-                onClick: n,
-                fontSize: "20px",
-                position: "absolute",
-                top: "-30px",
-                left: "50%",
-                transform: "translateX(-50%)",
-                children: /* @__PURE__ */ h(wu, { color: "white", boxSize: "24px" })
-              }
-            ),
             /* @__PURE__ */ h(
               Ee,
               {
@@ -26447,7 +26435,7 @@ const lv = "Payment Completed", nD = ({
               }
             ),
             /* @__PURE__ */ $(
-              ke,
+              _e,
               {
                 color: "black",
                 fontFamily: "Bricolage Grotesque",
@@ -26480,6 +26468,20 @@ const lv = "Payment Completed", nD = ({
                 ]
               }
             ),
+            i && /* @__PURE__ */ $(
+              le,
+              {
+                onClick: n,
+                justifyContent: "center",
+                alignItems: "center",
+                fontSize: "14px",
+                py: "4px",
+                children: [
+                  /* @__PURE__ */ h(wu, { color: "black", boxSize: "24px" }),
+                  /* @__PURE__ */ h(_e, { children: "Cancel" })
+                ]
+              }
+            ),
             /* @__PURE__ */ h(
               "iframe",
               {
@@ -26532,7 +26534,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 +26557,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,
@@ -26589,7 +26591,7 @@ const lv = "Payment Completed", nD = ({
             )
           ] }),
           /* @__PURE__ */ h(zf, { p: "0", children: /* @__PURE__ */ h(
-            ke,
+            _e,
             {
               mt: "4px",
               mb: "16px",
@@ -26627,7 +26629,7 @@ const lv = "Payment Completed", nD = ({
       }
     ),
     /* @__PURE__ */ h(
-      ke,
+      _e,
       {
         mt: "4px",
         mb: "28px",
@@ -26733,7 +26735,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(le, { justifyContent: "center", children: /* @__PURE__ */ h(R1, { width: "20px", height: "20px" }) }) : /* @__PURE__ */ h(wt, { children: e })
   }
 ), sD = ({
   currency: e,
@@ -26856,18 +26858,18 @@ 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,
+      le,
       {
         justifyContent: "space-between",
         w: "full",
         alignItems: "center",
         children: [
-          /* @__PURE__ */ $(ue, { alignItems: "center", gap: "12px", children: [
+          /* @__PURE__ */ $(le, { alignItems: "center", gap: "12px", children: [
             /* @__PURE__ */ h(oD, { boxSize: "32px" }),
             /* @__PURE__ */ h(
-              ke,
+              _e,
               {
                 color: "#111215",
                 fontFamily: "Bricolage Grotesque",
@@ -26884,16 +26886,16 @@ const lv = "Payment Completed", nD = ({
       }
     ) }),
     (g == null ? void 0 : g.googlePay) && /* @__PURE__ */ h(_i, { onClick: x, disabled: v, children: /* @__PURE__ */ $(
-      ue,
+      le,
       {
         justifyContent: "space-between",
         w: "full",
         alignItems: "center",
         children: [
-          /* @__PURE__ */ $(ue, { alignItems: "center", gap: "12px", children: [
+          /* @__PURE__ */ $(le, { alignItems: "center", gap: "12px", children: [
             /* @__PURE__ */ h(iD, { boxSize: "32px" }),
             /* @__PURE__ */ h(
-              ke,
+              _e,
               {
                 color: "#111215",
                 fontFamily: "Bricolage Grotesque",
@@ -26964,7 +26966,7 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
 }) => {
   var X;
   const { isOpen: T, onToggle: E } = ni({ defaultIsOpen: !1 }), [F] = Gr("(max-width: 767px)"), P = async () => {
-    var H, ne, le, he;
+    var H, ne, ce, he;
     if (s)
       if (l !== "")
         try {
@@ -26972,7 +26974,7 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
           U.isSuccess ? (i({
             amount: (H = U == null ? void 0 : U.data) == null ? void 0 : H.discounted_amount,
             type: (ne = U == null ? void 0 : U.data) == null ? void 0 : ne.discount_type,
-            value: (le = U == null ? void 0 : U.data) == null ? void 0 : le.discount_value,
+            value: (ce = U == null ? void 0 : U.data) == null ? void 0 : ce.discount_value,
             isFullDiscount: ((he = U == null ? void 0 : U.data) == null ? void 0 : he.amount_to_pay) === 0
           }), Pt("Discount has been applied", $t.success)) : Pt(`${U == null ? void 0 : U.error}`, $t.error);
         } catch (U) {
@@ -26990,8 +26992,8 @@ 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(
-    ke,
+  }, B = (H) => H > 0 ? n === Ne.NGN ? `+ ${n} ${H}` : `+ ${H * 100} cents` : "", G = ({ children: H, ...ne }) => /* @__PURE__ */ h(
+    _e,
     {
       color: "#111215",
       fontFamily: "Bricolage Grotesque",
@@ -27002,22 +27004,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",
@@ -27033,7 +27041,7 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
           }
         ),
         F && /* @__PURE__ */ h(
-          ue,
+          le,
           {
             py: "12px",
             justifyContent: "center",
@@ -27054,7 +27062,7 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
         ),
         /* @__PURE__ */ $(Si, { in: !F || T, children: [
           /* @__PURE__ */ $(Ee, { borderBottom: "1px solid #E8EBF2", py: "12px", children: [
-            /* @__PURE__ */ $(ue, { justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ $(le, { justifyContent: "space-between", alignItems: "center", children: [
               /* @__PURE__ */ h(
                 dl,
                 {
@@ -27089,7 +27097,7 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
               ] })
             ] }),
             Array.isArray(v) && v.length > 0 && /* @__PURE__ */ h(Ee, { pt: "12px", children: v.map((H, ne) => /* @__PURE__ */ $(
-              ue,
+              le,
               {
                 justifyContent: "space-between",
                 alignItems: "center",
@@ -27109,8 +27117,8 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
               ne
             )) })
           ] }),
-          /* @__PURE__ */ $(ue, { flexDirection: "column", gap: "12px", mt: "16px", children: [
-            /* @__PURE__ */ $(ue, { width: "100%", justifyContent: "space-between", children: [
+          /* @__PURE__ */ $(le, { flexDirection: "column", gap: "12px", mt: "16px", children: [
+            /* @__PURE__ */ $(le, { width: "100%", justifyContent: "space-between", children: [
               /* @__PURE__ */ h(G, { fontWeight: 400, children: "Subtotal" }),
               /* @__PURE__ */ $(G, { fontWeight: 600, children: [
                 n,
@@ -27118,10 +27126,10 @@ 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: [
+              f.localTaxFees > 0 && f.shouldApplyTax && /* @__PURE__ */ $(le, { width: "100%", justifyContent: "space-between", children: [
+                /* @__PURE__ */ h(le, { alignItems: "center", children: /* @__PURE__ */ $(G, { fontWeight: 400, mr: "8px", children: [
                   "Sales Tax (",
                   f.taxedPercent,
                   "%)"
@@ -27132,8 +27140,8 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
                   On(f.localTaxFees)
                 ] })
               ] }),
-              p.applySwitchingFee && p.localSwitchingFee > 0 && /* @__PURE__ */ $(ue, { width: "100%", justifyContent: "space-between", children: [
-                /* @__PURE__ */ $(ue, { alignItems: "center", children: [
+              p.applySwitchingFee && p.localSwitchingFee > 0 && /* @__PURE__ */ $(le, { width: "100%", justifyContent: "space-between", children: [
+                /* @__PURE__ */ $(le, { alignItems: "center", children: [
                   /* @__PURE__ */ h(G, { fontWeight: 400, mr: "8px", children: "Currency switching fee" }),
                   /* @__PURE__ */ h(
                     xp,
@@ -27151,13 +27159,13 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
                   On(p.localSwitchingFee)
                 ] })
               ] }),
-              g.totalAmountPlusFees > 0 && /* @__PURE__ */ $(ue, { width: "100%", justifyContent: "space-between", children: [
-                /* @__PURE__ */ $(ue, { alignItems: "center", children: [
+              g.totalAmountPlusFees > 0 && /* @__PURE__ */ $(le, { width: "100%", justifyContent: "space-between", children: [
+                /* @__PURE__ */ $(le, { alignItems: "center", children: [
                   /* @__PURE__ */ h(G, { fontWeight: 400, mr: "8px", children: "Fees" }),
                   /* @__PURE__ */ h(
                     xp,
                     {
-                      body: /* @__PURE__ */ h(Ee, { mb: "20px", children: (X = g.applied_fees) == null ? void 0 : X.map((H) => /* @__PURE__ */ $(ke, { mb: "5px", children: [
+                      body: /* @__PURE__ */ h(Ee, { mb: "20px", children: (X = g.applied_fees) == null ? void 0 : X.map((H) => /* @__PURE__ */ $(_e, { mb: "5px", children: [
                         H.display_name,
                         ": ",
                         H.amount,
@@ -27178,9 +27186,9 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
                 ] })
               ] })
             ] }),
-            o && (o == null ? void 0 : o.amount) > 0 && /* @__PURE__ */ $(ue, { justify: "space-between", mb: "20px", alignItems: "center", children: [
+            o && (o == null ? void 0 : o.amount) > 0 && /* @__PURE__ */ $(le, { justify: "space-between", mb: "20px", alignItems: "center", children: [
               /* @__PURE__ */ $(
-                ue,
+                le,
                 {
                   justify: "center",
                   padding: "8px",
@@ -27191,7 +27199,7 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
                   children: [
                     /* @__PURE__ */ h(I1, { boxSize: "20px" }),
                     /* @__PURE__ */ $(
-                      ke,
+                      _e,
                       {
                         fontSize: "12px",
                         color: "#111215",
@@ -27225,13 +27233,14 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
               ] })
             ] }),
             s && !(o != null && o.amount) && r > 0 && /* @__PURE__ */ h(Ee, { mb: "20px", children: /* @__PURE__ */ $(
-              ue,
+              le,
               {
                 alignItems: "center",
                 gap: "12px",
                 bg: "white",
                 border: "1px solid #E8EBF2",
-                p: "8px",
+                pr: "6px",
+                py: "5px",
                 pl: "12px",
                 borderRadius: "12px",
                 children: [
@@ -27267,23 +27276,25 @@ 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"
                     }
                   )
                 ]
               }
             ) }),
-            /* @__PURE__ */ $(ue, { width: "100%", justifyContent: "space-between", children: [
+            /* @__PURE__ */ $(le, { width: "100%", justifyContent: "space-between", children: [
               /* @__PURE__ */ h(
-                ke,
+                _e,
                 {
                   fontSize: "1rem",
                   lineHeight: "32px",
@@ -27294,7 +27305,7 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
                 }
               ),
               a ? /* @__PURE__ */ h(dd, { height: "20px", width: "100px" }) : /* @__PURE__ */ $(
-                ke,
+                _e,
                 {
                   fontSize: "1rem",
                   lineHeight: "32px",
@@ -27311,7 +27322,7 @@ const Su = (e) => Math.round((e + Number.EPSILON) * 100) / 100, On = (e) => {
             ] })
           ] })
         ] })
-      ]
+      ] })
     }
   );
 }, dD = ({
@@ -27324,115 +27335,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__ */ $(le, { 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(
+            _e,
+            {
+              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__ */ $(
+            _e,
+            {
+              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__ */ $(le, { 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 }) {
@@ -27547,11 +27560,11 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
         await o() || g();
       },
       disabled: p,
-      children: /* @__PURE__ */ $(ue, { justifyContent: "space-between", w: "full", alignItems: "center", children: [
-        /* @__PURE__ */ $(ue, { alignItems: "center", gap: "12px", children: [
+      children: /* @__PURE__ */ $(le, { justifyContent: "space-between", w: "full", alignItems: "center", children: [
+        /* @__PURE__ */ $(le, { alignItems: "center", gap: "12px", children: [
           /* @__PURE__ */ h(pD, { boxSize: "32px" }),
           /* @__PURE__ */ h(
-            ke,
+            _e,
             {
               color: "#111215",
               fontFamily: "Bricolage Grotesque",
@@ -27877,7 +27890,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
 }) => /* @__PURE__ */ $(Ee, { mt: "16px", children: [
   e,
   /* @__PURE__ */ $(
-    ue,
+    le,
     {
       justifyContent: "center",
       gap: "10px",
@@ -27889,13 +27902,13 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
       letterSpacing: "-0.2px",
       textDecoration: "underline",
       children: [
-        /* @__PURE__ */ h(ke, { as: "a", children: "Terms & Conditions" }),
-        /* @__PURE__ */ h(ke, { as: "a", children: "Privacy Policy" })
+        /* @__PURE__ */ h(_e, { as: "a", children: "Terms & Conditions" }),
+        /* @__PURE__ */ h(_e, { as: "a", children: "Privacy Policy" })
       ]
     }
   ),
   !t && /* @__PURE__ */ $(
-    ue,
+    le,
     {
       justifyContent: "center",
       alignItems: "center",
@@ -27907,10 +27920,10 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
       lineHeight: "16px",
       letterSpacing: "-0.2px",
       children: [
-        /* @__PURE__ */ h(ke, { children: "Powered by" }),
-        /* @__PURE__ */ $(ue, { children: [
+        /* @__PURE__ */ h(_e, { children: "Powered by" }),
+        /* @__PURE__ */ $(le, { children: [
           /* @__PURE__ */ h(gD, {}),
-          /* @__PURE__ */ h(ke, { children: "Mainstack" })
+          /* @__PURE__ */ h(_e, { children: "Mainstack" })
         ] })
       ]
     }
@@ -27941,10 +27954,10 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
       ]
     }
   ) })
-] }), uv = () => /* @__PURE__ */ $(ue, { alignItems: "center", gap: "18px", my: "16px", children: [
+] }), uv = () => /* @__PURE__ */ $(le, { alignItems: "center", gap: "18px", my: "16px", children: [
   /* @__PURE__ */ h(id, {}),
   /* @__PURE__ */ h(
-    ke,
+    _e,
     {
       color: "#7D879B",
       fontFamily: "Bricolage Grotesque",
@@ -27984,7 +27997,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,
@@ -28000,7 +28013,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
       baseUrl: X,
       hasDiscountCode: H,
       mainstackProductId: ne,
-      STRIPE_SECRET_KEY: le,
+      STRIPE_SECRET_KEY: ce,
       STRIPE_SECRET_KEY_GBP: he,
       STRIPE_SECRET_KEY_CAD: U,
       applyTrancheFee: ge,
@@ -28011,7 +28024,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
       isFreeTrial: q,
       itemsList: j,
       isPowerUser: J
-    } = e, Q = b == null ? void 0 : b.hideDetails, V = b == null ? void 0 : b.isSingleColumn, ee = ((vo = b == null ? void 0 : b.showDefaultInputFields) == null ? void 0 : vo.email) ?? !0, ie = ((gn = b == null ? void 0 : b.showDefaultInputFields) == null ? void 0 : gn.phone) ?? !1, ce = ((Yn = b == null ? void 0 : b.showDefaultInputFields) == null ? void 0 : Yn.fullname) ?? !0, { Request: Z } = lD(X, {
+    } = e, Q = b == null ? void 0 : b.hideDetails, V = b == null ? void 0 : b.isSingleColumn, ee = ((vo = b == null ? void 0 : b.showDefaultInputFields) == null ? void 0 : vo.email) ?? !0, ie = ((gn = b == null ? void 0 : b.showDefaultInputFields) == null ? void 0 : gn.phone) ?? !1, ue = ((Yn = b == null ? void 0 : b.showDefaultInputFields) == null ? void 0 : Yn.fullname) ?? !0, { Request: Z } = lD(X, {
       "x-is-api-client-payment": d ?? !1
     }), [we, L] = ae(""), [tt, me] = ae(S), [ot, Ot] = ae(!1), [st, mt] = ae(!1), [ve, lt] = ae({
       openModal: !1,
@@ -28078,7 +28091,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 +28177,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 +28199,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 +28214,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,22 +28260,22 @@ 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:
-          K = le, qn = "US_ACCOUNT";
+          K = ce, qn = "US_ACCOUNT";
       }
       return aM(K);
     }, [
       v,
-      le,
+      ce,
       he,
       U
     ]);
     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 +28327,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 +28370,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 +28404,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 +28446,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),
@@ -28479,19 +28492,18 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
             ad,
             {
               colSpan: Q || V ? 12 : { base: 12, lg: 7 },
-              as: ue,
+              as: le,
               justifyContent: "center",
               pt: { base: "20px", lg: "48px" },
               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,
+                      le,
                       {
-                        py: "20px",
                         justifyContent: "space-between",
                         alignItems: "center",
                         cursor: "pointer",
@@ -28501,9 +28513,9 @@ 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,
+                              _e,
                               {
                                 fontSize: "1rem",
                                 lineHeight: "32px",
@@ -28514,7 +28526,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                               }
                             ),
                             /* @__PURE__ */ h(
-                              ke,
+                              _e,
                               {
                                 color: "#7D879B",
                                 fontFamily: "Bricolage Grotesque",
@@ -28536,11 +28548,11 @@ 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,
-                        showFullname: ce,
+                        showFullname: ue,
                         showEmail: ee,
                         showPhone: ie,
                         customForm: r,
@@ -28552,9 +28564,9 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                         },
                         setFieldValue: Y.setFieldValue,
                         proceedButton: /* @__PURE__ */ $(
-                          ue,
+                          le,
                           {
-                            mt: "12px",
+                            mt: "16px",
                             gap: "10px",
                             flexDirection: { base: "column", md: "row" },
                             width: "100%",
@@ -28609,7 +28621,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                   ] }) }),
                   yr > 0 && /* @__PURE__ */ $(Ee, { children: [
                     /* @__PURE__ */ $(
-                      ue,
+                      le,
                       {
                         as: "button",
                         py: "20px",
@@ -28629,7 +28641,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                         children: [
                           /* @__PURE__ */ $(Ee, { children: [
                             /* @__PURE__ */ h(
-                              ke,
+                              _e,
                               {
                                 fontSize: "1rem",
                                 lineHeight: "32px",
@@ -28641,13 +28653,14 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                               }
                             ),
                             /* @__PURE__ */ h(
-                              ke,
+                              _e,
                               {
                                 color: "#7D879B",
                                 fontFamily: "Bricolage Grotesque",
                                 fontSize: "14px",
                                 lineHeight: "28px",
                                 letterSpacing: "-0.2px",
+                                textAlign: "left",
                                 children: "Secure options to complete your purchase"
                               }
                             )
@@ -28664,9 +28677,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(le, { 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,
@@ -28712,11 +28725,11 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                           },
                           isLoading: (Y.values.payment_mode && Y.values.payment_mode === "card" || !Y.values.payment_mode) && (sa || ia),
                           children: [
-                            /* @__PURE__ */ $(ue, { justifyContent: "space-between", children: [
-                              /* @__PURE__ */ $(ue, { alignItems: "center", gap: "12px", children: [
+                            /* @__PURE__ */ $(le, { justifyContent: "space-between", children: [
+                              /* @__PURE__ */ $(le, { alignItems: "center", gap: "12px", children: [
                                 /* @__PURE__ */ h(mD, { boxSize: "32px" }),
                                 /* @__PURE__ */ h(
-                                  ke,
+                                  _e,
                                   {
                                     color: "#111215",
                                     fontFamily: "Bricolage Grotesque",
@@ -28728,9 +28741,9 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                                   }
                                 )
                               ] }),
-                              /* @__PURE__ */ $(ue, { alignItems: "center", gap: "12px", children: [
-                                /* @__PURE__ */ h(
-                                  ue,
+                              /* @__PURE__ */ $(le, { alignItems: "center", gap: "12px", children: [
+                                !V && /* @__PURE__ */ h(
+                                  le,
                                   {
                                     alignItems: "center",
                                     justify: "center",
@@ -28778,7 +28791,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,
@@ -28821,16 +28834,16 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
                           },
                           isLoading: Y.values.payment_mode !== "card" && (sa || ia),
                           children: /* @__PURE__ */ $(
-                            ue,
+                            le,
                             {
                               justifyContent: "space-between",
                               w: "full",
                               alignItems: "center",
                               children: [
-                                /* @__PURE__ */ $(ue, { alignItems: "center", gap: "12px", children: [
+                                /* @__PURE__ */ $(le, { alignItems: "center", gap: "12px", children: [
                                   /* @__PURE__ */ h(yD, { boxSize: "32px" }),
                                   /* @__PURE__ */ h(
-                                    ke,
+                                    _e,
                                     {
                                       color: "#111215",
                                       fontFamily: "Bricolage Grotesque",
@@ -28924,7 +28937,7 @@ const pD = (e) => /* @__PURE__ */ $(hn, { viewBox: "0 0 32 32", ...e, fill: "non
   paymentLoading: a,
   feesLoading: o,
   handlePaymentInitialization: i
-}) => /* @__PURE__ */ $(ue, { mt: "12px", gap: "10px", children: [
+}) => /* @__PURE__ */ $(le, { mt: "12px", gap: "10px", children: [
   e && /* @__PURE__ */ h(
     qs,
     {