npm - @movmo_app/payments - Versions diffs - 0.2.0 → 0.3.0 - Mend

@movmo_app/payments 0.2.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.es.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import fr, { useState as S, useRef as q, useEffect as X, useCallback as B, useMemo as Ce } from "react";
-var ze = { exports: {} }, je = {};
+import Er, { useState as O, useRef as Y, useEffect as B, useCallback as Z, useMemo as Ue } from "react";
+var rr = { exports: {} }, Ae = {};
 /**
  * @license React
  * react-jsx-runtime.production.min.js
@@ -9,21 +9,21 @@ var ze = { exports: {} }, je = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var nr;
-function Ir() {
-  if (nr) return je;
-  nr = 1;
-  var r = fr, t = Symbol.for("react.element"), s = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, l = r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, f = { key: !0, ref: !0, __self: !0, __source: !0 };
-  function d(v, y, T) {
-    var g, w = {}, F = null, _ = null;
-    T !== void 0 && (F = "" + T), y.key !== void 0 && (F = "" + y.key), y.ref !== void 0 && (_ = y.ref);
-    for (g in y) o.call(y, g) && !f.hasOwnProperty(g) && (w[g] = y[g]);
-    if (v && v.defaultProps) for (g in y = v.defaultProps, y) w[g] === void 0 && (w[g] = y[g]);
-    return { $$typeof: t, type: v, key: F, ref: _, props: w, _owner: l.current };
+var mr;
+function zr() {
+  if (mr) return Ae;
+  mr = 1;
+  var r = Er, t = Symbol.for("react.element"), n = Symbol.for("react.fragment"), o = Object.prototype.hasOwnProperty, l = r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, c = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function m(y, p, D) {
+    var R, h = {}, v = null, E = null;
+    D !== void 0 && (v = "" + D), p.key !== void 0 && (v = "" + p.key), p.ref !== void 0 && (E = p.ref);
+    for (R in p) o.call(p, R) && !c.hasOwnProperty(R) && (h[R] = p[R]);
+    if (y && y.defaultProps) for (R in p = y.defaultProps, p) h[R] === void 0 && (h[R] = p[R]);
+    return { $$typeof: t, type: y, key: v, ref: E, props: h, _owner: l.current };
   }
-  return je.Fragment = s, je.jsx = d, je.jsxs = d, je;
+  return Ae.Fragment = n, Ae.jsx = m, Ae.jsxs = m, Ae;
 }
-var _e = {};
+var $e = {};
 /**
  * @license React
  * react-jsx-runtime.development.js
@@ -33,91 +33,91 @@ var _e = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var sr;
-function Ur() {
-  return sr || (sr = 1, process.env.NODE_ENV !== "production" && function() {
-    var r = fr, t = Symbol.for("react.element"), s = Symbol.for("react.portal"), o = Symbol.for("react.fragment"), l = Symbol.for("react.strict_mode"), f = Symbol.for("react.profiler"), d = Symbol.for("react.provider"), v = Symbol.for("react.context"), y = Symbol.for("react.forward_ref"), T = Symbol.for("react.suspense"), g = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), F = Symbol.for("react.lazy"), _ = Symbol.for("react.offscreen"), D = Symbol.iterator, R = "@@iterator";
-    function G(e) {
+var pr;
+function Vr() {
+  return pr || (pr = 1, process.env.NODE_ENV !== "production" && function() {
+    var r = Er, t = Symbol.for("react.element"), n = Symbol.for("react.portal"), o = Symbol.for("react.fragment"), l = Symbol.for("react.strict_mode"), c = Symbol.for("react.profiler"), m = Symbol.for("react.provider"), y = Symbol.for("react.context"), p = Symbol.for("react.forward_ref"), D = Symbol.for("react.suspense"), R = Symbol.for("react.suspense_list"), h = Symbol.for("react.memo"), v = Symbol.for("react.lazy"), E = Symbol.for("react.offscreen"), A = Symbol.iterator, k = "@@iterator";
+    function J(e) {
       if (e === null || typeof e != "object")
         return null;
-      var n = D && e[D] || e[R];
-      return typeof n == "function" ? n : null;
+      var s = A && e[A] || e[k];
+      return typeof s == "function" ? s : null;
     }
-    var O = r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-    function C(e) {
+    var g = r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function P(e) {
       {
-        for (var n = arguments.length, i = new Array(n > 1 ? n - 1 : 0), u = 1; u < n; u++)
-          i[u - 1] = arguments[u];
-        J("error", e, i);
+        for (var s = arguments.length, i = new Array(s > 1 ? s - 1 : 0), f = 1; f < s; f++)
+          i[f - 1] = arguments[f];
+        G("error", e, i);
       }
     }
-    function J(e, n, i) {
+    function G(e, s, i) {
       {
-        var u = O.ReactDebugCurrentFrame, h = u.getStackAddendum();
-        h !== "" && (n += "%s", i = i.concat([h]));
-        var j = i.map(function(p) {
-          return String(p);
+        var f = g.ReactDebugCurrentFrame, C = f.getStackAddendum();
+        C !== "" && (s += "%s", i = i.concat([C]));
+        var F = i.map(function(w) {
+          return String(w);
         });
-        j.unshift("Warning: " + n), Function.prototype.apply.call(console[e], console, j);
+        F.unshift("Warning: " + s), Function.prototype.apply.call(console[e], console, F);
       }
     }
-    var W = !1, se = !1, oe = !1, A = !1, x = !1, b;
-    b = Symbol.for("react.module.reference");
-    function I(e) {
-      return !!(typeof e == "string" || typeof e == "function" || e === o || e === f || x || e === l || e === T || e === g || A || e === _ || W || se || oe || typeof e == "object" && e !== null && (e.$$typeof === F || e.$$typeof === w || e.$$typeof === d || e.$$typeof === v || e.$$typeof === y || // This needs to include all possible module reference object
+    var ue = !1, te = !1, j = !1, se = !1, he = !1, U;
+    U = Symbol.for("react.module.reference");
+    function T(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === o || e === c || he || e === l || e === D || e === R || se || e === E || ue || te || j || typeof e == "object" && e !== null && (e.$$typeof === v || e.$$typeof === h || e.$$typeof === m || e.$$typeof === y || e.$$typeof === p || // This needs to include all possible module reference object
       // types supported by any Flight configuration anywhere since
       // we don't know which Flight build this will end up being used
       // with.
-      e.$$typeof === b || e.getModuleId !== void 0));
+      e.$$typeof === U || e.getModuleId !== void 0));
     }
-    function U(e, n, i) {
-      var u = e.displayName;
-      if (u)
-        return u;
-      var h = n.displayName || n.name || "";
-      return h !== "" ? i + "(" + h + ")" : i;
+    function d(e, s, i) {
+      var f = e.displayName;
+      if (f)
+        return f;
+      var C = s.displayName || s.name || "";
+      return C !== "" ? i + "(" + C + ")" : i;
     }
-    function ie(e) {
+    function S(e) {
       return e.displayName || "Context";
     }
-    function z(e) {
+    function _(e) {
       if (e == null)
         return null;
-      if (typeof e.tag == "number" && C("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
+      if (typeof e.tag == "number" && P("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
         return e.displayName || e.name || null;
       if (typeof e == "string")
         return e;
       switch (e) {
         case o:
           return "Fragment";
-        case s:
+        case n:
           return "Portal";
-        case f:
+        case c:
           return "Profiler";
         case l:
           return "StrictMode";
-        case T:
+        case D:
           return "Suspense";
-        case g:
+        case R:
           return "SuspenseList";
       }
       if (typeof e == "object")
         switch (e.$$typeof) {
-          case v:
-            var n = e;
-            return ie(n) + ".Consumer";
-          case d:
-            var i = e;
-            return ie(i._context) + ".Provider";
           case y:
-            return U(e, e.render, "ForwardRef");
-          case w:
-            var u = e.displayName || null;
-            return u !== null ? u : z(e.type) || "Memo";
-          case F: {
-            var h = e, j = h._payload, p = h._init;
+            var s = e;
+            return S(s) + ".Consumer";
+          case m:
+            var i = e;
+            return S(i._context) + ".Provider";
+          case p:
+            return d(e, e.render, "ForwardRef");
+          case h:
+            var f = e.displayName || null;
+            return f !== null ? f : _(e.type) || "Memo";
+          case v: {
+            var C = e, F = C._payload, w = C._init;
             try {
-              return z(p(j));
+              return _(w(F));
             } catch {
               return null;
             }
@@ -125,18 +125,18 @@ function Ur() {
         }
       return null;
     }
-    var N = Object.assign, Y = 0, ue, V, k, le, ce, fe, me;
-    function pe() {
+    var M = Object.assign, X = 0, z, ee, V, N, W, me, ye;
+    function ge() {
     }
-    pe.__reactDisabledLog = !0;
-    function he() {
+    ge.__reactDisabledLog = !0;
+    function we() {
       {
-        if (Y === 0) {
-          ue = console.log, V = console.info, k = console.warn, le = console.error, ce = console.group, fe = console.groupCollapsed, me = console.groupEnd;
+        if (X === 0) {
+          z = console.log, ee = console.info, V = console.warn, N = console.error, W = console.group, me = console.groupCollapsed, ye = console.groupEnd;
           var e = {
             configurable: !0,
             enumerable: !0,
-            value: pe,
+            value: ge,
             writable: !0
           };
           Object.defineProperties(console, {
@@ -149,250 +149,250 @@ function Ur() {
             groupEnd: e
           });
         }
-        Y++;
+        X++;
       }
     }
-    function Ee() {
+    function fe() {
       {
-        if (Y--, Y === 0) {
+        if (X--, X === 0) {
           var e = {
             configurable: !0,
             enumerable: !0,
             writable: !0
           };
           Object.defineProperties(console, {
-            log: N({}, e, {
-              value: ue
-            }),
-            info: N({}, e, {
-              value: V
+            log: M({}, e, {
+              value: z
             }),
-            warn: N({}, e, {
-              value: k
+            info: M({}, e, {
+              value: ee
             }),
-            error: N({}, e, {
-              value: le
+            warn: M({}, e, {
+              value: V
             }),
-            group: N({}, e, {
-              value: ce
+            error: M({}, e, {
+              value: N
             }),
-            groupCollapsed: N({}, e, {
-              value: fe
+            group: M({}, e, {
+              value: W
             }),
-            groupEnd: N({}, e, {
+            groupCollapsed: M({}, e, {
               value: me
+            }),
+            groupEnd: M({}, e, {
+              value: ye
             })
           });
         }
-        Y < 0 && C("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+        X < 0 && P("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
       }
     }
-    var ae = O.ReactCurrentDispatcher, Q;
-    function ee(e, n, i) {
+    var je = g.ReactCurrentDispatcher, ve;
+    function H(e, s, i) {
       {
-        if (Q === void 0)
+        if (ve === void 0)
           try {
             throw Error();
-          } catch (h) {
-            var u = h.stack.trim().match(/\n( *(at )?)/);
-            Q = u && u[1] || "";
+          } catch (C) {
+            var f = C.stack.trim().match(/\n( *(at )?)/);
+            ve = f && f[1] || "";
           }
         return `
-` + Q + e;
+` + ve + e;
       }
     }
-    var re = !1, de;
+    var oe = !1, ie;
     {
-      var ye = typeof WeakMap == "function" ? WeakMap : Map;
-      de = new ye();
+      var be = typeof WeakMap == "function" ? WeakMap : Map;
+      ie = new be();
     }
-    function ve(e, n) {
-      if (!e || re)
+    function Ee(e, s) {
+      if (!e || oe)
         return "";
       {
-        var i = de.get(e);
+        var i = ie.get(e);
         if (i !== void 0)
           return i;
       }
-      var u;
-      re = !0;
-      var h = Error.prepareStackTrace;
+      var f;
+      oe = !0;
+      var C = Error.prepareStackTrace;
       Error.prepareStackTrace = void 0;
-      var j;
-      j = ae.current, ae.current = null, he();
+      var F;
+      F = je.current, je.current = null, we();
       try {
-        if (n) {
-          var p = function() {
+        if (s) {
+          var w = function() {
             throw Error();
           };
-          if (Object.defineProperty(p.prototype, "props", {
+          if (Object.defineProperty(w.prototype, "props", {
             set: function() {
               throw Error();
             }
           }), typeof Reflect == "object" && Reflect.construct) {
             try {
-              Reflect.construct(p, []);
-            } catch (Z) {
-              u = Z;
+              Reflect.construct(w, []);
+            } catch (ne) {
+              f = ne;
             }
-            Reflect.construct(e, [], p);
+            Reflect.construct(e, [], w);
           } else {
             try {
-              p.call();
-            } catch (Z) {
-              u = Z;
+              w.call();
+            } catch (ne) {
+              f = ne;
             }
-            e.call(p.prototype);
+            e.call(w.prototype);
           }
         } else {
           try {
             throw Error();
-          } catch (Z) {
-            u = Z;
+          } catch (ne) {
+            f = ne;
           }
           e();
         }
-      } catch (Z) {
-        if (Z && u && typeof Z.stack == "string") {
-          for (var m = Z.stack.split(`
-`), K = u.stack.split(`
-`), M = m.length - 1, L = K.length - 1; M >= 1 && L >= 0 && m[M] !== K[L]; )
+      } catch (ne) {
+        if (ne && f && typeof ne.stack == "string") {
+          for (var x = ne.stack.split(`
+`), re = f.stack.split(`
+`), I = x.length - 1, L = re.length - 1; I >= 1 && L >= 0 && x[I] !== re[L]; )
             L--;
-          for (; M >= 1 && L >= 0; M--, L--)
-            if (m[M] !== K[L]) {
-              if (M !== 1 || L !== 1)
+          for (; I >= 1 && L >= 0; I--, L--)
+            if (x[I] !== re[L]) {
+              if (I !== 1 || L !== 1)
                 do
-                  if (M--, L--, L < 0 || m[M] !== K[L]) {
-                    var te = `
-` + m[M].replace(" at new ", " at ");
-                    return e.displayName && te.includes("<anonymous>") && (te = te.replace("<anonymous>", e.displayName)), typeof e == "function" && de.set(e, te), te;
+                  if (I--, L--, L < 0 || x[I] !== re[L]) {
+                    var de = `
+` + x[I].replace(" at new ", " at ");
+                    return e.displayName && de.includes("<anonymous>") && (de = de.replace("<anonymous>", e.displayName)), typeof e == "function" && ie.set(e, de), de;
                   }
-                while (M >= 1 && L >= 0);
+                while (I >= 1 && L >= 0);
               break;
             }
         }
       } finally {
-        re = !1, ae.current = j, Ee(), Error.prepareStackTrace = h;
+        oe = !1, je.current = F, fe(), Error.prepareStackTrace = C;
       }
-      var we = e ? e.displayName || e.name : "", xe = we ? ee(we) : "";
-      return typeof e == "function" && de.set(e, xe), xe;
+      var Pe = e ? e.displayName || e.name : "", Ce = Pe ? H(Pe) : "";
+      return typeof e == "function" && ie.set(e, Ce), Ce;
     }
-    function P(e, n, i) {
-      return ve(e, !1);
+    function Re(e, s, i) {
+      return Ee(e, !1);
     }
-    function c(e) {
-      var n = e.prototype;
-      return !!(n && n.isReactComponent);
+    function _e(e) {
+      var s = e.prototype;
+      return !!(s && s.isReactComponent);
     }
-    function E(e, n, i) {
+    function le(e, s, i) {
       if (e == null)
         return "";
       if (typeof e == "function")
-        return ve(e, c(e));
+        return Ee(e, _e(e));
       if (typeof e == "string")
-        return ee(e);
+        return H(e);
       switch (e) {
-        case T:
-          return ee("Suspense");
-        case g:
-          return ee("SuspenseList");
+        case D:
+          return H("Suspense");
+        case R:
+          return H("SuspenseList");
       }
       if (typeof e == "object")
         switch (e.$$typeof) {
-          case y:
-            return P(e.render);
-          case w:
-            return E(e.type, n, i);
-          case F: {
-            var u = e, h = u._payload, j = u._init;
+          case p:
+            return Re(e.render);
+          case h:
+            return le(e.type, s, i);
+          case v: {
+            var f = e, C = f._payload, F = f._init;
             try {
-              return E(j(h), n, i);
+              return le(F(C), s, i);
             } catch {
             }
           }
         }
       return "";
     }
-    var $ = Object.prototype.hasOwnProperty, H = {}, Be = O.ReactDebugCurrentFrame;
-    function Te(e) {
+    var b = Object.prototype.hasOwnProperty, $ = {}, K = g.ReactDebugCurrentFrame;
+    function pe(e) {
       if (e) {
-        var n = e._owner, i = E(e.type, e._source, n ? n.type : null);
-        Be.setExtraStackFrame(i);
+        var s = e._owner, i = le(e.type, e._source, s ? s.type : null);
+        K.setExtraStackFrame(i);
       } else
-        Be.setExtraStackFrame(null);
+        K.setExtraStackFrame(null);
     }
-    function hr(e, n, i, u, h) {
+    function Ye(e, s, i, f, C) {
       {
-        var j = Function.call.bind($);
-        for (var p in e)
-          if (j(e, p)) {
-            var m = void 0;
+        var F = Function.call.bind(b);
+        for (var w in e)
+          if (F(e, w)) {
+            var x = void 0;
             try {
-              if (typeof e[p] != "function") {
-                var K = Error((u || "React class") + ": " + i + " type `" + p + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[p] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
-                throw K.name = "Invariant Violation", K;
+              if (typeof e[w] != "function") {
+                var re = Error((f || "React class") + ": " + i + " type `" + w + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[w] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw re.name = "Invariant Violation", re;
               }
-              m = e[p](n, p, u, i, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
-            } catch (M) {
-              m = M;
+              x = e[w](s, w, f, i, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (I) {
+              x = I;
             }
-            m && !(m instanceof Error) && (Te(h), C("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", u || "React class", i, p, typeof m), Te(null)), m instanceof Error && !(m.message in H) && (H[m.message] = !0, Te(h), C("Failed %s type: %s", i, m.message), Te(null));
+            x && !(x instanceof Error) && (pe(C), P("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", f || "React class", i, w, typeof x), pe(null)), x instanceof Error && !(x.message in $) && ($[x.message] = !0, pe(C), P("Failed %s type: %s", i, x.message), pe(null));
           }
       }
     }
-    var xr = Array.isArray;
-    function De(e) {
-      return xr(e);
+    var ze = Array.isArray;
+    function u(e) {
+      return ze(e);
     }
-    function br(e) {
+    function ce(e) {
       {
-        var n = typeof Symbol == "function" && Symbol.toStringTag, i = n && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        var s = typeof Symbol == "function" && Symbol.toStringTag, i = s && e[Symbol.toStringTag] || e.constructor.name || "Object";
         return i;
       }
     }
-    function gr(e) {
+    function ae(e) {
       try {
-        return Ke(e), !1;
+        return q(e), !1;
       } catch {
         return !0;
       }
     }
-    function Ke(e) {
+    function q(e) {
       return "" + e;
     }
-    function qe(e) {
-      if (gr(e))
-        return C("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", br(e)), Ke(e);
+    function Le(e) {
+      if (ae(e))
+        return P("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", ce(e)), q(e);
     }
-    var Ge = O.ReactCurrentOwner, wr = {
+    var xe = g.ReactCurrentOwner, Ve = {
       key: !0,
       ref: !0,
       __self: !0,
       __source: !0
-    }, Je, He;
-    function Er(e) {
-      if ($.call(e, "ref")) {
-        var n = Object.getOwnPropertyDescriptor(e, "ref").get;
-        if (n && n.isReactWarning)
+    }, nr, sr;
+    function Nr(e) {
+      if (b.call(e, "ref")) {
+        var s = Object.getOwnPropertyDescriptor(e, "ref").get;
+        if (s && s.isReactWarning)
           return !1;
       }
       return e.ref !== void 0;
     }
-    function jr(e) {
-      if ($.call(e, "key")) {
-        var n = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (n && n.isReactWarning)
+    function kr(e) {
+      if (b.call(e, "key")) {
+        var s = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (s && s.isReactWarning)
           return !1;
       }
       return e.key !== void 0;
     }
-    function _r(e, n) {
-      typeof e.ref == "string" && Ge.current;
+    function Pr(e, s) {
+      typeof e.ref == "string" && xe.current;
     }
-    function Rr(e, n) {
+    function Tr(e, s) {
       {
         var i = function() {
-          Je || (Je = !0, C("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", n));
+          nr || (nr = !0, P("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", s));
         };
         i.isReactWarning = !0, Object.defineProperty(e, "key", {
           get: i,
@@ -400,10 +400,10 @@ function Ur() {
         });
       }
     }
-    function Cr(e, n) {
+    function Sr(e, s) {
       {
         var i = function() {
-          He || (He = !0, C("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", n));
+          sr || (sr = !0, P("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", s));
         };
         i.isReactWarning = !0, Object.defineProperty(e, "ref", {
           get: i,
@@ -411,70 +411,70 @@ function Ur() {
         });
       }
     }
-    var Nr = function(e, n, i, u, h, j, p) {
-      var m = {
+    var Fr = function(e, s, i, f, C, F, w) {
+      var x = {
         // This tag allows us to uniquely identify this as a React Element
         $$typeof: t,
         // Built-in properties that belong on the element
         type: e,
-        key: n,
+        key: s,
         ref: i,
-        props: p,
+        props: w,
         // Record the component responsible for creating this element.
-        _owner: j
+        _owner: F
       };
-      return m._store = {}, Object.defineProperty(m._store, "validated", {
+      return x._store = {}, Object.defineProperty(x._store, "validated", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
         value: !1
-      }), Object.defineProperty(m, "_self", {
+      }), Object.defineProperty(x, "_self", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
-        value: u
-      }), Object.defineProperty(m, "_source", {
+        value: f
+      }), Object.defineProperty(x, "_source", {
         configurable: !1,
         enumerable: !1,
         writable: !1,
-        value: h
-      }), Object.freeze && (Object.freeze(m.props), Object.freeze(m)), m;
+        value: C
+      }), Object.freeze && (Object.freeze(x.props), Object.freeze(x)), x;
     };
-    function Pr(e, n, i, u, h) {
+    function Or(e, s, i, f, C) {
       {
-        var j, p = {}, m = null, K = null;
-        i !== void 0 && (qe(i), m = "" + i), jr(n) && (qe(n.key), m = "" + n.key), Er(n) && (K = n.ref, _r(n, h));
-        for (j in n)
-          $.call(n, j) && !wr.hasOwnProperty(j) && (p[j] = n[j]);
+        var F, w = {}, x = null, re = null;
+        i !== void 0 && (Le(i), x = "" + i), kr(s) && (Le(s.key), x = "" + s.key), Nr(s) && (re = s.ref, Pr(s, C));
+        for (F in s)
+          b.call(s, F) && !Ve.hasOwnProperty(F) && (w[F] = s[F]);
         if (e && e.defaultProps) {
-          var M = e.defaultProps;
-          for (j in M)
-            p[j] === void 0 && (p[j] = M[j]);
+          var I = e.defaultProps;
+          for (F in I)
+            w[F] === void 0 && (w[F] = I[F]);
         }
-        if (m || K) {
+        if (x || re) {
           var L = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
-          m && Rr(p, L), K && Cr(p, L);
+          x && Tr(w, L), re && Sr(w, L);
         }
-        return Nr(e, m, K, h, u, Ge.current, p);
+        return Fr(e, x, re, C, f, xe.current, w);
       }
     }
-    var We = O.ReactCurrentOwner, Ze = O.ReactDebugCurrentFrame;
-    function ge(e) {
+    var Ke = g.ReactCurrentOwner, or = g.ReactDebugCurrentFrame;
+    function ke(e) {
       if (e) {
-        var n = e._owner, i = E(e.type, e._source, n ? n.type : null);
-        Ze.setExtraStackFrame(i);
+        var s = e._owner, i = le(e.type, e._source, s ? s.type : null);
+        or.setExtraStackFrame(i);
       } else
-        Ze.setExtraStackFrame(null);
+        or.setExtraStackFrame(null);
     }
-    var Ae;
-    Ae = !1;
-    function $e(e) {
+    var qe;
+    qe = !1;
+    function Ge(e) {
       return typeof e == "object" && e !== null && e.$$typeof === t;
     }
-    function Xe() {
+    function ir() {
       {
-        if (We.current) {
-          var e = z(We.current.type);
+        if (Ke.current) {
+          var e = _(Ke.current.type);
           if (e)
             return `
@@ -483,295 +483,330 @@ Check the render method of \`` + e + "`.";
         return "";
       }
     }
-    function Sr(e) {
+    function Dr(e) {
       return "";
     }
-    var Qe = {};
-    function kr(e) {
+    var lr = {};
+    function Wr(e) {
       {
-        var n = Xe();
-        if (!n) {
+        var s = ir();
+        if (!s) {
           var i = typeof e == "string" ? e : e.displayName || e.name;
-          i && (n = `
+          i && (s = `
 Check the top-level render call using <` + i + ">.");
         }
-        return n;
+        return s;
       }
     }
-    function er(e, n) {
+    function cr(e, s) {
       {
         if (!e._store || e._store.validated || e.key != null)
           return;
         e._store.validated = !0;
-        var i = kr(n);
-        if (Qe[i])
+        var i = Wr(s);
+        if (lr[i])
           return;
-        Qe[i] = !0;
-        var u = "";
-        e && e._owner && e._owner !== We.current && (u = " It was passed a child from " + z(e._owner.type) + "."), ge(e), C('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', i, u), ge(null);
+        lr[i] = !0;
+        var f = "";
+        e && e._owner && e._owner !== Ke.current && (f = " It was passed a child from " + _(e._owner.type) + "."), ke(e), P('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', i, f), ke(null);
       }
     }
-    function rr(e, n) {
+    function dr(e, s) {
       {
         if (typeof e != "object")
           return;
-        if (De(e))
+        if (u(e))
           for (var i = 0; i < e.length; i++) {
-            var u = e[i];
-            $e(u) && er(u, n);
+            var f = e[i];
+            Ge(f) && cr(f, s);
           }
-        else if ($e(e))
+        else if (Ge(e))
           e._store && (e._store.validated = !0);
         else if (e) {
-          var h = G(e);
-          if (typeof h == "function" && h !== e.entries)
-            for (var j = h.call(e), p; !(p = j.next()).done; )
-              $e(p.value) && er(p.value, n);
+          var C = J(e);
+          if (typeof C == "function" && C !== e.entries)
+            for (var F = C.call(e), w; !(w = F.next()).done; )
+              Ge(w.value) && cr(w.value, s);
         }
       }
     }
-    function Tr(e) {
+    function Ar(e) {
       {
-        var n = e.type;
-        if (n == null || typeof n == "string")
+        var s = e.type;
+        if (s == null || typeof s == "string")
           return;
         var i;
-        if (typeof n == "function")
-          i = n.propTypes;
-        else if (typeof n == "object" && (n.$$typeof === y || // Note: Memo only checks outer props here.
+        if (typeof s == "function")
+          i = s.propTypes;
+        else if (typeof s == "object" && (s.$$typeof === p || // Note: Memo only checks outer props here.
         // Inner props are checked in the reconciler.
-        n.$$typeof === w))
-          i = n.propTypes;
+        s.$$typeof === h))
+          i = s.propTypes;
         else
           return;
         if (i) {
-          var u = z(n);
-          hr(i, e.props, "prop", u, e);
-        } else if (n.PropTypes !== void 0 && !Ae) {
-          Ae = !0;
-          var h = z(n);
-          C("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", h || "Unknown");
+          var f = _(s);
+          Ye(i, e.props, "prop", f, e);
+        } else if (s.PropTypes !== void 0 && !qe) {
+          qe = !0;
+          var C = _(s);
+          P("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", C || "Unknown");
         }
-        typeof n.getDefaultProps == "function" && !n.getDefaultProps.isReactClassApproved && C("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+        typeof s.getDefaultProps == "function" && !s.getDefaultProps.isReactClassApproved && P("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
       }
     }
-    function Or(e) {
+    function $r(e) {
       {
-        for (var n = Object.keys(e.props), i = 0; i < n.length; i++) {
-          var u = n[i];
-          if (u !== "children" && u !== "key") {
-            ge(e), C("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", u), ge(null);
+        for (var s = Object.keys(e.props), i = 0; i < s.length; i++) {
+          var f = s[i];
+          if (f !== "children" && f !== "key") {
+            ke(e), P("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", f), ke(null);
             break;
           }
         }
-        e.ref !== null && (ge(e), C("Invalid attribute `ref` supplied to `React.Fragment`."), ge(null));
+        e.ref !== null && (ke(e), P("Invalid attribute `ref` supplied to `React.Fragment`."), ke(null));
       }
     }
-    var tr = {};
-    function ar(e, n, i, u, h, j) {
+    var ur = {};
+    function fr(e, s, i, f, C, F) {
       {
-        var p = I(e);
-        if (!p) {
-          var m = "";
-          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (m += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
-          var K = Sr();
-          K ? m += K : m += Xe();
-          var M;
-          e === null ? M = "null" : De(e) ? M = "array" : e !== void 0 && e.$$typeof === t ? (M = "<" + (z(e.type) || "Unknown") + " />", m = " Did you accidentally export a JSX literal instead of a component?") : M = typeof e, C("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", M, m);
+        var w = T(e);
+        if (!w) {
+          var x = "";
+          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (x += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var re = Dr();
+          re ? x += re : x += ir();
+          var I;
+          e === null ? I = "null" : u(e) ? I = "array" : e !== void 0 && e.$$typeof === t ? (I = "<" + (_(e.type) || "Unknown") + " />", x = " Did you accidentally export a JSX literal instead of a component?") : I = typeof e, P("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", I, x);
         }
-        var L = Pr(e, n, i, h, j);
+        var L = Or(e, s, i, C, F);
         if (L == null)
           return L;
-        if (p) {
-          var te = n.children;
-          if (te !== void 0)
-            if (u)
-              if (De(te)) {
-                for (var we = 0; we < te.length; we++)
-                  rr(te[we], e);
-                Object.freeze && Object.freeze(te);
+        if (w) {
+          var de = s.children;
+          if (de !== void 0)
+            if (f)
+              if (u(de)) {
+                for (var Pe = 0; Pe < de.length; Pe++)
+                  dr(de[Pe], e);
+                Object.freeze && Object.freeze(de);
               } else
-                C("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+                P("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
             else
-              rr(te, e);
+              dr(de, e);
         }
-        if ($.call(n, "key")) {
-          var xe = z(e), Z = Object.keys(n).filter(function(Mr) {
-            return Mr !== "key";
-          }), Me = Z.length > 0 ? "{key: someKey, " + Z.join(": ..., ") + ": ...}" : "{key: someKey}";
-          if (!tr[xe + Me]) {
-            var $r = Z.length > 0 ? "{" + Z.join(": ..., ") + ": ...}" : "{}";
-            C(`A props object containing a "key" prop is being spread into JSX:
+        if (b.call(s, "key")) {
+          var Ce = _(e), ne = Object.keys(s).filter(function(Yr) {
+            return Yr !== "key";
+          }), He = ne.length > 0 ? "{key: someKey, " + ne.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!ur[Ce + He]) {
+            var Br = ne.length > 0 ? "{" + ne.join(": ..., ") + ": ...}" : "{}";
+            P(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`, Me, xe, $r, xe), tr[xe + Me] = !0;
+  <%s key={someKey} {...props} />`, He, Ce, Br, Ce), ur[Ce + He] = !0;
           }
         }
-        return e === o ? Or(L) : Tr(L), L;
+        return e === o ? $r(L) : Ar(L), L;
       }
     }
-    function Fr(e, n, i) {
-      return ar(e, n, i, !0);
+    function Mr(e, s, i) {
+      return fr(e, s, i, !0);
     }
-    function Dr(e, n, i) {
-      return ar(e, n, i, !1);
+    function Ir(e, s, i) {
+      return fr(e, s, i, !1);
     }
-    var Wr = Dr, Ar = Fr;
-    _e.Fragment = o, _e.jsx = Wr, _e.jsxs = Ar;
-  }()), _e;
+    var Ur = Ir, Lr = Mr;
+    $e.Fragment = o, $e.jsx = Ur, $e.jsxs = Lr;
+  }()), $e;
 }
-process.env.NODE_ENV === "production" ? ze.exports = Ir() : ze.exports = Ur();
-var a = ze.exports;
-function mr(r) {
-  var t, s, o = "";
+process.env.NODE_ENV === "production" ? rr.exports = zr() : rr.exports = Vr();
+var a = rr.exports;
+function _r(r) {
+  var t, n, o = "";
   if (typeof r == "string" || typeof r == "number") o += r;
   else if (typeof r == "object") if (Array.isArray(r)) {
     var l = r.length;
-    for (t = 0; t < l; t++) r[t] && (s = mr(r[t])) && (o && (o += " "), o += s);
-  } else for (s in r) r[s] && (o && (o += " "), o += s);
+    for (t = 0; t < l; t++) r[t] && (n = _r(r[t])) && (o && (o += " "), o += n);
+  } else for (n in r) r[n] && (o && (o += " "), o += n);
   return o;
 }
-function ne() {
-  for (var r, t, s = 0, o = "", l = arguments.length; s < l; s++) (r = arguments[s]) && (t = mr(r)) && (o && (o += " "), o += t);
+function Q() {
+  for (var r, t, n = 0, o = "", l = arguments.length; n < l; n++) (r = arguments[n]) && (t = _r(r)) && (o && (o += " "), o += t);
   return o;
 }
-const Lr = "https://core.spreedly.com/iframe/iframe-v1.min.js", Yr = "https://cdn.e2e.movmo.io";
-let Ne = {};
-const yt = (r) => {
-  Ne = { ...Ne, ...r };
-}, Ie = (r) => {
-  var s;
+const Kr = "https://core.spreedly.com/iframe/iframe-v1.min.js", qr = "https://cdn.e2e.movmo.io";
+let Te = {};
+const Ct = (r) => {
+  Te = { ...Te, ...r };
+}, Je = (r) => {
+  var n;
   const t = globalThis.process;
-  return (s = t == null ? void 0 : t.env) == null ? void 0 : s[r];
-}, Fe = () => ({
-  baseUrl: Ne.baseUrl ?? Ie("REACT_APP_MOVMO_API_URL") ?? "",
-  spreedlyScriptUrl: Ne.spreedlyScriptUrl ?? Ie("REACT_APP_SPREEDLY_SCRIPT_URL") ?? Lr,
-  iconCdnBaseUrl: Ne.iconCdnBaseUrl ?? Ie("REACT_APP_MOVMO_ICON_CDN_URL") ?? Yr
-}), pr = (r) => ({
+  return (n = t == null ? void 0 : t.env) == null ? void 0 : n[r];
+}, We = () => ({
+  baseUrl: Te.baseUrl ?? Je("REACT_APP_MOVMO_API_URL") ?? "",
+  spreedlyScriptUrl: Te.spreedlyScriptUrl ?? Je("REACT_APP_SPREEDLY_SCRIPT_URL") ?? Kr,
+  iconCdnBaseUrl: Te.iconCdnBaseUrl ?? Je("REACT_APP_MOVMO_ICON_CDN_URL") ?? qr,
+  fetch: Te.fetch ?? (typeof globalThis < "u" && typeof globalThis.fetch == "function" ? globalThis.fetch.bind(globalThis) : (() => {
+    throw new Error("@movmo_app/payments: no fetch available");
+  })())
+}), tr = (r) => ({
   id: r.id,
   last4: r.last4,
   brand: r.brand,
   expMonth: r.expMonth,
   expYear: r.expYear,
   isDefault: r.isDefault
-}), Pe = {
+}), Se = {
   Accept: "application/json",
   "Content-Type": "application/json"
-}, Se = (r) => {
-  const { baseUrl: t } = Fe();
+}, Fe = (r) => {
+  const { baseUrl: t } = We();
   if (!t)
     throw new Error(
       "@movmo_app/payments: baseUrl is not configured. Call setPaymentsConfig({ baseUrl }) at app boot, or set REACT_APP_MOVMO_API_URL."
     );
   return `${t}${r}`;
-}, ke = async (r, t) => {
+}, Oe = (r, t) => {
+  const { fetch: n } = We();
+  return n(r, t);
+}, De = async (r, t) => {
   try {
     return (await r.json()).message || t;
   } catch {
     return t;
   }
-}, Vr = async () => {
-  const r = await fetch(Se("/v1/payments/tokenization-session"), {
-    method: "GET",
-    headers: Pe,
-    credentials: "include"
-  });
-  if (!r.ok)
-    throw new Error(await ke(r, `Failed to fetch tokenization session (${r.status})`));
-  return await r.json();
-}, zr = async (r, t, s) => {
-  const o = await fetch(
-    Se(`/v1/users/${encodeURIComponent(r)}/payment-methods/from-token`),
+};
+let Me = null;
+const ar = () => {
+  if (Me) return Me;
+  const r = (async () => {
+    const t = await Oe(Fe("/v1/payments/tokenization-session"), {
+      method: "GET",
+      headers: Se,
+      credentials: "include"
+    });
+    if (!t.ok)
+      throw new Error(
+        await De(t, `Failed to fetch tokenization session (${t.status})`)
+      );
+    return await t.json();
+  })();
+  return Me = r, r.finally(() => {
+    Me === r && (Me = null);
+  }).catch(() => {
+  }), r;
+}, Gr = (r) => typeof r.brand == "string" && typeof r.last4 == "string" && typeof r.expMonth == "number" && typeof r.expYear == "number", Hr = async (r, t, n) => {
+  const o = await Oe(
+    Fe(`/v1/users/${encodeURIComponent(r)}/payment-methods/from-token`),
     {
       method: "POST",
-      headers: Pe,
+      headers: Se,
       credentials: "include",
-      body: JSON.stringify({ tokenizedPaymentMethodId: t, isDefault: s })
+      body: JSON.stringify({ tokenizedPaymentMethodId: t, isDefault: n })
     }
   );
   if (!o.ok)
-    throw new Error(await ke(o, `Failed to save payment method (${o.status})`));
+    throw new Error(await De(o, `Failed to save payment method (${o.status})`));
   const l = await o.json();
-  return pr(l);
-}, Br = async (r) => {
-  const t = await fetch(Se(`/v1/users/${encodeURIComponent(r)}/payment-methods`), {
+  if (Gr(l))
+    return tr(l);
+  const c = await Oe(
+    Fe(
+      `/v1/users/${encodeURIComponent(r)}/payment-methods/${encodeURIComponent(l.id)}`
+    ),
+    {
+      method: "GET",
+      headers: Se,
+      credentials: "include"
+    }
+  );
+  if (!c.ok)
+    throw new Error(
+      await De(c, `Failed to fetch saved payment method (${c.status})`)
+    );
+  const m = await c.json();
+  return tr(m);
+}, Jr = async (r, t) => {
+  const n = await Oe(Fe(`/v1/users/${encodeURIComponent(r)}/payment-methods`), {
     method: "GET",
-    headers: Pe,
-    credentials: "include"
+    headers: Se,
+    credentials: "include",
+    signal: t
   });
-  if (!t.ok)
-    throw new Error(await ke(t, `Failed to fetch payment methods (${t.status})`));
-  return (await t.json() ?? []).map(pr);
-}, Kr = async (r, t) => {
-  const s = await fetch(
-    Se(
+  if (!n.ok)
+    throw new Error(await De(n, `Failed to fetch payment methods (${n.status})`));
+  return (await n.json() ?? []).map(tr);
+}, Xr = async (r, t) => {
+  const n = await Oe(
+    Fe(
       `/v1/users/${encodeURIComponent(r)}/payment-methods/${encodeURIComponent(t)}`
     ),
     {
       method: "DELETE",
-      headers: Pe,
+      headers: Se,
       credentials: "include"
     }
   );
-  if (!s.ok)
-    throw new Error(await ke(s, `Failed to delete payment method (${s.status})`));
-}, qr = async (r, t, s) => {
-  const o = await fetch(
-    Se(
+  if (!n.ok)
+    throw new Error(await De(n, `Failed to delete payment method (${n.status})`));
+}, Zr = async (r, t, n) => {
+  const o = await Oe(
+    Fe(
       `/v1/users/${encodeURIComponent(r)}/payment-methods/${encodeURIComponent(t)}`
     ),
     {
       method: "PUT",
-      headers: Pe,
+      headers: Se,
       credentials: "include",
-      body: JSON.stringify(s)
+      body: JSON.stringify(n)
     }
   );
   if (!o.ok)
-    throw new Error(await ke(o, `Failed to update payment method (${o.status})`));
-}, Gr = {
+    throw new Error(await De(o, `Failed to update payment method (${o.status})`));
+}, Qr = {
   visa: "visa",
   master: "mastercard",
   mastercard: "mastercard",
   american_express: "amex",
   amex: "amex",
   discover: "discover"
-}, Jr = 28, be = ({
+}, et = 28, Ne = ({
   brand: r,
   className: t,
-  width: s = 46
+  width: n = 46
 }) => {
-  const o = Gr[r.toLowerCase()] ?? "credit-card", l = Math.max(s, Jr), f = Math.round(l * 24 / 34), { iconCdnBaseUrl: d } = Fe();
+  const o = r ? Qr[r.toLowerCase()] ?? "credit-card" : "credit-card", l = Math.max(n, et), c = Math.round(l * 24 / 34), { iconCdnBaseUrl: m } = We();
   return /* @__PURE__ */ a.jsx(
     "img",
     {
-      src: `${d}/website/assets/icons/payments/${o}.svg`,
+      src: `${m}/website/assets/icons/payments/${o}.svg`,
       alt: o === "credit-card" ? "card" : `${o} card`,
       "data-testid": `card-brand-${r.toLowerCase()}`,
       className: t,
       width: l,
-      height: f,
+      height: c,
       loading: "lazy"
     }
   );
 };
-let Re = null;
-const Hr = () => {
+let Ie = null;
+const rt = () => {
   if (typeof window > "u")
     return Promise.reject(new Error("Spreedly can only be loaded in a browser environment."));
   if (window.Spreedly)
     return Promise.resolve(window.Spreedly);
-  if (Re)
-    return Re;
-  const { spreedlyScriptUrl: r } = Fe();
-  return Re = new Promise((t, s) => {
+  if (Ie)
+    return Ie;
+  const { spreedlyScriptUrl: r } = We();
+  return Ie = new Promise((t, n) => {
     const o = document.querySelector(
       `script[src="${r}"]`
     ), l = () => {
-      window.Spreedly ? t(window.Spreedly) : s(new Error("Spreedly script loaded but window.Spreedly is undefined."));
+      window.Spreedly ? t(window.Spreedly) : n(new Error("Spreedly script loaded but window.Spreedly is undefined."));
     };
     if (o) {
       if (window.Spreedly) {
@@ -781,246 +816,306 @@ const Hr = () => {
       o.addEventListener("load", l, { once: !0 }), o.addEventListener(
         "error",
         () => {
-          o.remove(), s(new Error("Failed to load Spreedly iframe script."));
+          o.remove(), n(new Error("Failed to load Spreedly iframe script."));
         },
         { once: !0 }
       );
       return;
     }
-    const f = document.createElement("script");
-    f.src = r, f.async = !0, f.onload = l, f.onerror = () => {
-      f.remove(), s(new Error("Failed to load Spreedly iframe script."));
-    }, document.head.appendChild(f);
+    const c = document.createElement("script");
+    c.src = r, c.async = !0, c.onload = l, c.onerror = () => {
+      c.remove(), n(new Error("Failed to load Spreedly iframe script."));
+    }, document.head.appendChild(c);
   }).catch((t) => {
-    throw Re = null, t;
-  }), Re;
-}, Zr = "movmo-card-number", Xr = "movmo-card-cvv", Qr = (r) => ({
+    throw Ie = null, t;
+  }), Ie;
+}, tt = "movmo-card-number", at = "movmo-card-cvv", nt = (r) => ({
   first_name: r.firstName,
   last_name: r.lastName,
   month: r.month,
   year: r.year,
   ...r.email ? { email: r.email } : {},
   ...r.zip ? { zip: r.zip } : {}
-}), et = (r = {}) => {
+}), st = (r = {}) => {
   const {
-    numberEl: t = Zr,
-    cvvEl: s = Xr,
+    numberEl: t = tt,
+    cvvEl: n = at,
     onCardTokenized: o,
     onFieldErrors: l,
-    onValidityChange: f,
-    onBrandChange: d
-  } = r, [v, y] = S("idle"), [T, g] = S(null), [w, F] = S({ number: !1, cvv: !1 }), [_, D] = S(null), R = q(null), G = q(o), O = q(l), C = q(f), J = q(d);
-  X(() => {
-    G.current = o;
-  }, [o]), X(() => {
-    O.current = l;
-  }, [l]), X(() => {
-    C.current = f;
-  }, [f]), X(() => {
-    J.current = d;
-  }, [d]);
-  const W = q({ number: !1, cvv: !1 });
-  X(() => {
-    let A = !1;
-    return y("loading"), g(null), F({ number: !1, cvv: !1 }), D(null), W.current = { number: !1, cvv: !1 }, (async () => {
+    onValidityChange: c,
+    onBrandChange: m
+  } = r, [y, p] = O("idle"), [D, R] = O(null), [h, v] = O({ number: !1, cvv: !1 }), [E, A] = O(null), [k, J] = O({ number: !1, cvv: !1 }), g = Y(null), P = Y(o), G = Y(l), ue = Y(c), te = Y(m);
+  B(() => {
+    P.current = o;
+  }, [o]), B(() => {
+    G.current = l;
+  }, [l]), B(() => {
+    ue.current = c;
+  }, [c]), B(() => {
+    te.current = m;
+  }, [m]);
+  const j = Y({ number: !1, cvv: !1 });
+  B(() => {
+    let U = !1;
+    return p("loading"), R(null), v({ number: !1, cvv: !1 }), A(null), j.current = { number: !1, cvv: !1 }, (async () => {
       try {
-        const [x, b] = await Promise.all([
-          Vr(),
-          Hr()
+        const [T, d] = await Promise.all([
+          ar(),
+          rt()
         ]);
-        if (A) return;
-        R.current = b, b.on("ready", () => {
-          var I;
-          if (!A) {
-            y("ready");
+        if (U) return;
+        g.current = d, d.on("ready", () => {
+          var S, _, M, X, z, ee;
+          if (!U) {
+            p("ready");
             try {
-              (I = b.setNumberFormat) == null || I.call(b, "prettyFormat");
+              (S = d.setFieldType) == null || S.call(d, "number", "tel"), (_ = d.setFieldType) == null || _.call(d, "cvv", "tel");
             } catch {
             }
+            try {
+              typeof d.setNumberFormat == "function" ? d.setNumberFormat("prettyFormat") : console.warn(
+                "@movmo_app/payments: Spreedly.setNumberFormat is missing — card-number digits will not be space-grouped."
+              );
+            } catch (V) {
+              console.warn("@movmo_app/payments: setNumberFormat failed", V);
+            }
+            try {
+              (M = d.setPlaceholder) == null || M.call(d, "number", "Card number"), (X = d.setPlaceholder) == null || X.call(d, "cvv", "CVV");
+              const V = 'box-sizing: border-box;width: 100%;height: 100%;margin: 0;padding: 0;border: 0;background: transparent;outline: none;font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;font-size: 14px;font-weight: 400;line-height: 20px;color: rgb(28 25 23);letter-spacing: 0;vertical-align: middle;';
+              (z = d.setStyle) == null || z.call(d, "number", V), (ee = d.setStyle) == null || ee.call(d, "cvv", V);
+            } catch {
+            }
+          }
+        }), d.on("paymentMethod", (S) => {
+          var _;
+          (_ = P.current) == null || _.call(P, S);
+        }), d.on("errors", (S) => {
+          var _;
+          (_ = G.current) == null || _.call(G, S);
+        }), d.on("fieldEvent", (S, _, M, X) => {
+          var V;
+          if (U) return;
+          if (_ === "focus") {
+            J((N) => N[S] ? N : { ...N, [S]: !0 });
+            return;
           }
-        }), b.on("paymentMethod", (I) => {
-          var U;
-          (U = G.current) == null || U.call(G, I);
-        }), b.on("errors", (I) => {
-          var U;
-          (U = O.current) == null || U.call(O, I);
-        }), b.on("fieldEvent", (I, U, ie, z) => {
-          var ue;
-          if (A || U !== "input") return;
-          const N = z ?? {};
-          if (I === "number") {
-            if (N.numberLength === 0)
-              D((V) => {
-                var k;
-                return V !== null && ((k = J.current) == null || k.call(J, null)), null;
+          if (_ === "blur") {
+            J((N) => N[S] ? { ...N, [S]: !1 } : N);
+            return;
+          }
+          if (_ !== "input") return;
+          const z = X ?? {};
+          if (S === "number") {
+            if (z.numberLength === 0)
+              A((N) => {
+                var W;
+                return N !== null && ((W = te.current) == null || W.call(te, null)), null;
               });
-            else if (N.cardType !== void 0) {
-              const V = N.cardType || null;
-              D((k) => {
-                var le;
-                return k !== V && ((le = J.current) == null || le.call(J, V)), V;
+            else if (z.cardType !== void 0) {
+              const N = z.cardType || null;
+              A((W) => {
+                var me;
+                return W !== N && ((me = te.current) == null || me.call(te, N)), N;
               });
             }
           }
-          const Y = I === "number" ? typeof N.validNumber == "boolean" ? N.validNumber : void 0 : typeof N.validCvv == "boolean" ? N.validCvv : void 0;
-          if (typeof Y == "boolean") {
-            const V = W.current, k = I === "number" ? { ...V, number: Y } : { ...V, cvv: Y };
-            (k.number !== V.number || k.cvv !== V.cvv) && (W.current = k, F(k), (ue = C.current) == null || ue.call(C, k));
+          const ee = S === "number" ? typeof z.validNumber == "boolean" ? z.validNumber : void 0 : typeof z.validCvv == "boolean" ? z.validCvv : void 0;
+          if (typeof ee == "boolean") {
+            const N = j.current, W = S === "number" ? { ...N, number: ee } : { ...N, cvv: ee };
+            (W.number !== N.number || W.cvv !== N.cvv) && (j.current = W, v(W), (V = ue.current) == null || V.call(ue, W));
           }
-        }), b.on("consoleError", (I) => {
-          var ie;
-          const U = I instanceof Error ? I.message : "An unexpected error occurred while securing your card.";
-          (ie = O.current) == null || ie.call(O, [{ message: U }]);
-        }), b.init(x.environmentKey, {
+        }), d.on("consoleError", (S) => {
+          var M;
+          const _ = S instanceof Error ? S.message : "An unexpected error occurred while securing your card.";
+          (M = G.current) == null || M.call(G, [{ message: _ }]);
+        }), d.init(T.environmentKey, {
           numberEl: t,
-          cvvEl: s,
-          nonce: x.nonce,
-          timestamp: String(x.timestamp),
-          certificateToken: x.certificateToken,
-          signature: x.signature
+          cvvEl: n,
+          nonce: T.nonce,
+          timestamp: String(T.timestamp),
+          certificateToken: T.certificateToken,
+          signature: T.signature
         });
-      } catch (x) {
-        if (A) return;
-        const b = x instanceof Error ? x.message : "Failed to initialize card form.";
-        g(b), y("error");
+      } catch (T) {
+        if (U) return;
+        const d = T instanceof Error ? T.message : "Failed to initialize card form.";
+        R(d), p("error");
       }
     })(), () => {
-      var x, b;
-      A = !0;
+      var T, d;
+      U = !0;
       try {
-        (b = (x = R.current) == null ? void 0 : x.removeHandlers) == null || b.call(x);
+        (d = (T = g.current) == null ? void 0 : T.removeHandlers) == null || d.call(T);
       } catch {
       }
-      R.current = null;
+      g.current = null;
     };
-  }, [t, s]);
-  const se = B((A) => {
-    var x;
-    (x = R.current) == null || x.tokenizeCreditCard(Qr(A));
-  }, []), oe = B((A) => {
-    var x, b;
-    (b = (x = R.current) == null ? void 0 : x.transferFocus) == null || b.call(x, A);
+  }, [t, n]);
+  const se = Z((U) => {
+    var T;
+    (T = g.current) == null || T.tokenizeCreditCard(nt(U));
+  }, []), he = Z((U) => {
+    var T, d;
+    (d = (T = g.current) == null ? void 0 : T.transferFocus) == null || d.call(T, U);
   }, []);
-  return { status: v, error: T, tokenize: se, validity: w, brand: _, focusField: oe };
-}, Ue = "h-11 w-full rounded-md border border-grayWarm-300 bg-white px-3 py-2 text-sm text-grayWarm-900 placeholder:text-grayWarm-400 outline-none focus:border-grayWarm-950 focus:shadow-[0_0_0_1px_#1c1917]", or = "flex h-11 w-full items-center gap-2 rounded-md border border-grayWarm-300 bg-white px-3 py-2 transition-shadow focus-within:border-grayWarm-950 focus-within:shadow-[0_0_0_1px_#1c1917]", rt = (r) => {
+  return { status: y, error: D, tokenize: se, validity: h, brand: E, focused: k, focusField: he };
+}, Xe = "h-11 w-full rounded-md border border-grayWarm-300 bg-white px-3 py-2 text-sm text-grayWarm-900 placeholder:text-grayWarm-400 outline-none focus:border-grayWarm-950 focus:shadow-[0_0_0_1px_#1c1917]", hr = "flex h-11 w-full items-center gap-2 rounded-md border bg-white px-3 py-2 transition-shadow", yr = "border-grayWarm-950 shadow-[0_0_0_1px_#1c1917]", vr = "border-grayWarm-300", ot = (r) => {
   const t = r.trim();
   if (!t) return { firstName: "", lastName: "" };
-  const s = t.lastIndexOf(" ");
-  return s === -1 ? { firstName: t, lastName: "" } : {
-    firstName: t.slice(0, s).trim(),
-    lastName: t.slice(s + 1).trim()
+  const n = t.lastIndexOf(" ");
+  return n === -1 ? { firstName: t, lastName: "" } : {
+    firstName: t.slice(0, n).trim(),
+    lastName: t.slice(n + 1).trim()
   };
-}, yr = (r) => {
+}, Rr = (r) => {
   const t = r.replace(/\D/g, "");
   if (t.length < 4) return { month: "", year: "" };
-  const s = t.slice(0, 2), o = t.slice(2), l = o.length === 2 ? `20${o}` : o.slice(0, 4);
-  return { month: s, year: l };
-}, tt = (r) => {
+  const n = t.slice(0, 2), o = t.slice(2), l = o.length === 2 ? `20${o}` : o.slice(0, 4);
+  return { month: n, year: l };
+}, it = (r) => {
   const t = r.replace(/\D/g, "").slice(0, 4);
   return t.length <= 2 ? t : `${t.slice(0, 2)} / ${t.slice(2)}`;
-}, Le = (r) => {
-  const { month: t, year: s } = yr(r);
-  if (!t || !s) return !1;
-  const o = parseInt(t, 10), l = parseInt(s, 10);
+}, Ze = (r) => {
+  const { month: t, year: n } = Rr(r);
+  if (!t || !n) return !1;
+  const o = parseInt(t, 10), l = parseInt(n, 10);
   if (isNaN(o) || o < 1 || o > 12) return !1;
-  const f = /* @__PURE__ */ new Date();
-  return !(l < f.getFullYear() || l > f.getFullYear() + 20 || l === f.getFullYear() && o < f.getMonth() + 1);
-}, Ye = (r) => /^\d{5}(-\d{4})?$/.test(r.trim()), at = (r) => {
+  const c = /* @__PURE__ */ new Date();
+  return !(l < c.getFullYear() || l > c.getFullYear() + 20 || l === c.getFullYear() && o < c.getMonth() + 1);
+}, Qe = (r) => /^\d{5}(-\d{4})?$/.test(r.trim()), lt = (r) => {
   const t = r.replace(/[^\d]/g, "").slice(0, 9);
   return t.length <= 5 ? t : `${t.slice(0, 5)}-${t.slice(5)}`;
-}, vr = ({
+}, Cr = ({
   userId: r,
   onSuccess: t,
-  onError: s,
+  onError: n,
   isDefault: o = !1,
   className: l,
-  defaultCardholderName: f,
-  defaultCardholderFirstName: d = "",
-  defaultCardholderLastName: v = "",
-  autoSave: y = !1,
-  formId: T = "movmo-card-form",
-  hideInternalSaveButton: g = !1,
-  onCanSubmitChange: w
+  defaultCardholderName: c,
+  defaultCardholderFirstName: m = "",
+  defaultCardholderLastName: y = "",
+  autoSave: p = !1,
+  formId: D = "movmo-card-form",
+  hideInternalSaveButton: R = !1,
+  onCanSubmitChange: h,
+  onSavingChange: v,
+  autoFocus: E
 }) => {
-  const F = f ?? [d, v].filter(Boolean).join(" "), [_, D] = S(F), [R, G] = S(""), [O, C] = S(""), [J, W] = S("idle"), [se, oe] = S(null), A = q(!1), x = B(
-    async (P) => {
-      W("saving");
+  const A = c ?? [m, y].filter(Boolean).join(" "), [k, J] = O(A), [g, P] = O(""), [G, ue] = O(""), [te, j] = O("idle"), se = Y(!1), he = Z(
+    async (b) => {
+      j("saving");
       try {
-        const c = await zr(r, P, o);
-        W("ready"), t(c);
-      } catch (c) {
-        const E = c instanceof Error ? c.message : "Failed to save payment method.";
-        oe(E), W("ready"), A.current = !1, s(E);
+        const $ = await Hr(r, b, o);
+        j("ready"), t($);
+      } catch ($) {
+        const K = $ instanceof Error ? $.message : "Failed to save payment method.";
+        j("ready"), se.current = !1, n(K);
       }
     },
-    [r, o, t, s]
-  ), b = B(
-    (P) => {
-      const c = P.map((E) => E.message).filter(Boolean).join("; ") || "Card validation failed.";
-      oe(c), W((E) => E === "tokenizing" ? "ready" : E), A.current = !1, s(c);
+    [r, o, t, n]
+  ), U = Z(
+    (b) => {
+      const $ = b.map((K) => K.message).filter(Boolean).join("; ") || "Card validation failed.";
+      j((K) => K === "tokenizing" ? "ready" : K), se.current = !1, n($);
     },
-    [s]
-  ), I = Ce(
+    [n]
+  ), T = Ue(
     () => ({
-      onCardTokenized: x,
-      onFieldErrors: b
+      onCardTokenized: he,
+      onFieldErrors: U
     }),
-    [x, b]
+    [he, U]
   ), {
-    status: U,
-    error: ie,
-    tokenize: z,
-    validity: N,
-    brand: Y,
-    focusField: ue
-  } = et(I), V = _.trim().split(/\s+/).length >= 2, k = Le(R), le = Ye(O), ce = q(!1), fe = q(!1), me = q(!1), pe = q(null), he = q(null);
-  X(() => {
-    var P;
-    N.cvv ? fe.current || (fe.current = !0, (P = pe.current) == null || P.focus()) : fe.current = !1;
-  }, [N.cvv]);
-  const Ee = !V || !k || !le || !N.number || !N.cvv, ae = J === "tokenizing" || J === "saving", Q = U === "ready" && !ae && !Ee, ee = q(w);
-  X(() => {
-    ee.current = w;
-  }, [w]), X(() => {
-    var P;
-    (P = ee.current) == null || P.call(ee, Q);
-  }, [Q]);
-  const re = B(() => {
-    const { firstName: P, lastName: c } = rt(_), { month: E, year: $ } = yr(R);
-    oe(null), W("tokenizing"), z({ firstName: P, lastName: c, month: E, year: $, zip: O.trim() });
-  }, [_, R, O, z]);
-  X(() => {
-    if (!y || !Q || A.current) return;
-    const P = setTimeout(() => {
-      A.current = !0, re();
+    status: d,
+    error: S,
+    tokenize: _,
+    validity: M,
+    brand: X,
+    focused: z,
+    focusField: ee
+  } = st(T), V = Y(!1);
+  B(() => {
+    !E || d !== "ready" || V.current || (V.current = !0, ee(E));
+  }, [E, d, ee]);
+  const N = k.trim().split(/\s+/).length >= 2, W = Ze(g), me = Qe(G), ye = Y(!1), ge = Y(!1), we = Y(!1), fe = Y(null), je = Y(null);
+  B(() => {
+    var b;
+    M.cvv ? ge.current || (ge.current = !0, (b = fe.current) == null || b.focus()) : ge.current = !1;
+  }, [M.cvv]);
+  const ve = !N || !W || !me || !M.number || !M.cvv, H = te === "tokenizing" || te === "saving", oe = d === "ready" && !H && !ve, ie = Y(h);
+  B(() => {
+    ie.current = h;
+  }, [h]), B(() => {
+    var b;
+    (b = ie.current) == null || b.call(ie, oe);
+  }, [oe]);
+  const be = Y(v);
+  B(() => {
+    be.current = v;
+  }, [v]), B(() => {
+    var b;
+    (b = be.current) == null || b.call(be, H);
+  }, [H]);
+  const Ee = Z(() => {
+    const { firstName: b, lastName: $ } = ot(k), { month: K, year: pe } = Rr(g);
+    j("tokenizing"), _({ firstName: b, lastName: $, month: K, year: pe, zip: G.trim() });
+  }, [k, g, G, _]);
+  B(() => {
+    if (!p || !oe || se.current) return;
+    const b = setTimeout(() => {
+      se.current = !0, Ee();
     }, 1200);
-    return () => clearTimeout(P);
-  }, [y, Q, re]);
-  const de = (P) => {
-    P.preventDefault(), Q && re();
-  }, ye = se ?? ie, ve = U !== "ready" || ae;
-  return /* @__PURE__ */ a.jsxs(
+    return () => clearTimeout(b);
+  }, [p, oe, Ee]);
+  const Re = (b) => {
+    b.preventDefault(), oe && Ee();
+  }, _e = d !== "ready" || H, le = Y(n);
+  return B(() => {
+    le.current = n;
+  }, [n]), B(() => {
+    var b;
+    S && ((b = le.current) == null || b.call(le, S));
+  }, [S]), /* @__PURE__ */ a.jsxs(
     "form",
     {
-      id: T,
-      onSubmit: de,
-      className: ne("flex w-full flex-col gap-3", l),
+      id: D,
+      onSubmit: Re,
+      className: Q("flex w-full flex-col gap-3", l),
       "data-testid": "movmo-card-form",
       children: [
         /* @__PURE__ */ a.jsxs("div", { children: [
           /* @__PURE__ */ a.jsx("span", { id: "movmo-card-number-label", className: "sr-only", children: "Card number" }),
-          /* @__PURE__ */ a.jsxs("div", { className: or, children: [
-            /* @__PURE__ */ a.jsx(be, { brand: Y ?? "", width: 32, className: "flex-shrink-0" }),
-            /* @__PURE__ */ a.jsx(
-              "div",
-              {
-                id: "movmo-card-number",
-                "aria-labelledby": "movmo-card-number-label",
-                className: "flex-1",
-                "data-testid": "movmo-card-number-mount"
-              }
-            )
-          ] })
+          /* @__PURE__ */ a.jsxs(
+            "div",
+            {
+              className: Q(
+                hr,
+                z.number ? yr : vr
+              ),
+              children: [
+                /* @__PURE__ */ a.jsx(Ne, { brand: X ?? "", width: 32, className: "flex-shrink-0" }),
+                /* @__PURE__ */ a.jsxs("div", { className: "relative h-full flex-1", children: [
+                  /* @__PURE__ */ a.jsx(
+                    "div",
+                    {
+                      id: "movmo-card-number",
+                      "aria-labelledby": "movmo-card-number-label",
+                      "aria-busy": d !== "ready",
+                      className: "absolute inset-0",
+                      "data-testid": "movmo-card-number-mount"
+                    }
+                  ),
+                  d !== "ready" ? /* @__PURE__ */ a.jsx(
+                    "div",
+                    {
+                      "aria-hidden": "true",
+                      className: "pointer-events-none absolute inset-y-2 left-0 right-2 animate-pulse rounded bg-grayWarm-200"
+                    }
+                  ) : null
+                ] })
+              ]
+            }
+          )
         ] }),
         /* @__PURE__ */ a.jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
           /* @__PURE__ */ a.jsxs("div", { children: [
@@ -1033,13 +1128,13 @@ const Hr = () => {
                 inputMode: "numeric",
                 autoComplete: "cc-exp",
                 placeholder: "MM / YY",
-                value: R,
-                onChange: (P) => {
-                  const c = tt(P.target.value);
-                  G(c), Le(c) && !ce.current ? (ce.current = !0, ue("cvv")) : Le(c) || (ce.current = !1);
+                value: g,
+                onChange: (b) => {
+                  const $ = it(b.target.value);
+                  P($), Ze($) && !ye.current ? (ye.current = !0, ee("cvv")) : Ze($) || (ye.current = !1);
                 },
-                className: ne(Ue, R && !k && "border-error-500"),
-                disabled: ve,
+                className: Q(Xe, g && !W && "border-error-500"),
+                disabled: _e,
                 required: !0,
                 "data-testid": "movmo-card-expiry-input"
               }
@@ -1047,29 +1142,48 @@ const Hr = () => {
           ] }),
           /* @__PURE__ */ a.jsxs("div", { className: "relative", children: [
             /* @__PURE__ */ a.jsx("span", { id: "movmo-card-cvv-label", className: "sr-only", children: "CVV" }),
-            /* @__PURE__ */ a.jsxs("div", { className: or, children: [
-              /* @__PURE__ */ a.jsx(
-                "div",
-                {
-                  id: "movmo-card-cvv",
-                  "aria-labelledby": "movmo-card-cvv-label",
-                  className: "flex-1",
-                  "data-testid": "movmo-card-cvv-mount"
-                }
-              ),
-              /* @__PURE__ */ a.jsx(
-                "button",
-                {
-                  type: "button",
-                  "aria-label": "CVV help",
-                  tabIndex: -1,
-                  className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border border-grayWarm-300 text-xs text-grayWarm-500",
-                  title: Y === "american_express" ? "The 4 numbers on the front of your card." : "The 3 numbers on the back of your card.",
-                  "data-testid": "movmo-cvv-help",
-                  children: "?"
-                }
-              )
-            ] })
+            /* @__PURE__ */ a.jsxs(
+              "div",
+              {
+                className: Q(
+                  hr,
+                  z.cvv ? yr : vr
+                ),
+                children: [
+                  /* @__PURE__ */ a.jsxs("div", { className: "relative h-full flex-1", children: [
+                    /* @__PURE__ */ a.jsx(
+                      "div",
+                      {
+                        id: "movmo-card-cvv",
+                        "aria-labelledby": "movmo-card-cvv-label",
+                        "aria-busy": d !== "ready",
+                        className: "absolute inset-0",
+                        "data-testid": "movmo-card-cvv-mount"
+                      }
+                    ),
+                    d !== "ready" ? /* @__PURE__ */ a.jsx(
+                      "div",
+                      {
+                        "aria-hidden": "true",
+                        className: "pointer-events-none absolute inset-y-2 left-0 right-2 animate-pulse rounded bg-grayWarm-200"
+                      }
+                    ) : null
+                  ] }),
+                  /* @__PURE__ */ a.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "CVV help",
+                      tabIndex: -1,
+                      className: "flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full border border-grayWarm-300 text-xs text-grayWarm-500",
+                      title: X === "american_express" ? "The 4 numbers on the front of your card." : "The 3 numbers on the back of your card.",
+                      "data-testid": "movmo-cvv-help",
+                      children: "?"
+                    }
+                  )
+                ]
+              }
+            )
           ] }),
           /* @__PURE__ */ a.jsxs("div", { children: [
             /* @__PURE__ */ a.jsx("label", { htmlFor: "movmo-card-zip", className: "sr-only", children: "ZIP code" }),
@@ -1077,19 +1191,19 @@ const Hr = () => {
               "input",
               {
                 id: "movmo-card-zip",
-                ref: pe,
+                ref: fe,
                 type: "text",
                 inputMode: "numeric",
                 autoComplete: "postal-code",
                 placeholder: "ZIP code",
-                value: O,
-                onChange: (P) => {
-                  var E;
-                  const c = at(P.target.value);
-                  C(c), Ye(c) && !me.current ? (me.current = !0, (E = he.current) == null || E.focus()) : Ye(c) || (me.current = !1);
+                value: G,
+                onChange: (b) => {
+                  var K;
+                  const $ = lt(b.target.value);
+                  ue($), Qe($) && !we.current ? (we.current = !0, (K = je.current) == null || K.focus()) : Qe($) || (we.current = !1);
                 },
-                className: ne(Ue, O && !le && "border-error-500"),
-                disabled: ve,
+                className: Q(Xe, G && !me && "border-error-500"),
+                disabled: _e,
                 required: !0,
                 "data-testid": "movmo-card-zip-input"
               }
@@ -1102,112 +1216,118 @@ const Hr = () => {
             "input",
             {
               id: "movmo-card-cardholder-name",
-              ref: he,
+              ref: je,
               type: "text",
               autoComplete: "cc-name",
               placeholder: "Cardholder name",
-              value: _,
-              onChange: (P) => D(P.target.value),
-              className: Ue,
-              disabled: ve,
+              value: k,
+              onChange: (b) => J(b.target.value),
+              className: Xe,
+              disabled: _e,
               required: !0,
               "data-testid": "movmo-card-cardholder-name-input"
             }
           )
         ] }),
-        ye ? /* @__PURE__ */ a.jsx(
-          "p",
-          {
-            role: "alert",
-            className: "rounded-md bg-error-50 px-3 py-2 text-sm text-error-700",
-            "data-testid": "movmo-card-error",
-            children: ye
-          }
-        ) : null,
-        !y && !g ? /* @__PURE__ */ a.jsx(
+        !p && !R ? /* @__PURE__ */ a.jsx(
           "button",
           {
             type: "submit",
-            disabled: !Q,
-            className: ne(
+            disabled: !oe,
+            className: Q(
               "inline-flex h-11 items-center justify-center rounded-md bg-brand-500 px-4 text-sm font-semibold text-white transition-colors hover:bg-brand-600",
               "disabled:cursor-not-allowed disabled:bg-grayWarm-300 disabled:text-grayWarm-500"
             ),
             "data-testid": "movmo-card-save",
-            children: ae ? "Saving…" : U === "loading" ? "Loading…" : "Save card"
+            children: H ? "Saving…" : d === "loading" ? "Loading…" : "Save card"
           }
-        ) : ae ? /* @__PURE__ */ a.jsx("p", { className: "text-center text-sm text-grayWarm-500", "data-testid": "movmo-card-autosaving", children: "Saving card…" }) : null
+        ) : H && p ? (
+          // In autoSave mode (empty-state inline form, no Save button at all),
+          // surface the in-flight state as inline text. The modal flow uses a
+          // spinner inside the modal-footer Save button instead — see
+          // AddPaymentMethodModal.isSaving.
+          /* @__PURE__ */ a.jsx(
+            "p",
+            {
+              className: "text-center text-sm text-grayWarm-500",
+              "aria-live": "polite",
+              "data-testid": "movmo-card-autosaving",
+              children: "Saving card…"
+            }
+          )
+        ) : null
       ]
     }
   );
 };
-vr.displayName = "MovmoCardForm";
-const nt = (r) => {
-  const [t, s] = S("idle"), [o, l] = S(null);
-  return { deletePaymentMethod: B(
-    async (d) => {
-      s("pending"), l(null);
+Cr.displayName = "MovmoCardForm";
+const ct = (r) => {
+  const [t, n] = O("idle"), [o, l] = O(null);
+  return { deletePaymentMethod: Z(
+    async (m) => {
+      n("pending"), l(null);
       try {
-        await Kr(r, d), s("idle");
-      } catch (v) {
-        const y = v instanceof Error ? v.message : "Failed to delete payment method.";
-        throw l(y), s("error"), v;
+        await Xr(r, m), n("idle");
+      } catch (y) {
+        const p = y instanceof Error ? y.message : "Failed to delete payment method.";
+        throw l(p), n("error"), y;
       }
     },
     [r]
   ), status: t, error: o };
-}, st = (r) => {
-  const [t, s] = S("idle"), [o, l] = S(null);
-  return { setDefault: B(
-    async (d) => {
-      s("pending"), l(null);
+}, dt = (r) => {
+  const [t, n] = O("idle"), [o, l] = O(null);
+  return { setDefault: Z(
+    async (m) => {
+      n("pending"), l(null);
       try {
-        await qr(r, d, { isDefault: !0 }), s("idle");
-      } catch (v) {
-        const y = v instanceof Error ? v.message : "Failed to set default payment method.";
-        throw l(y), s("error"), v;
+        await Zr(r, m, { isDefault: !0 }), n("idle");
+      } catch (y) {
+        const p = y instanceof Error ? y.message : "Failed to set default payment method.";
+        throw l(p), n("error"), y;
       }
     },
     [r]
   ), status: t, error: o };
-}, ot = (r) => {
-  const [t, s] = S([]), [o, l] = S("idle"), [f, d] = S(null), [v, y] = S(0), T = q(null);
-  X(() => {
-    var F;
-    (F = T.current) == null || F.abort();
-    const w = new AbortController();
-    return T.current = w, l("loading"), d(null), Br(r).then((_) => {
-      w.signal.aborted || (s(_), l("ready"));
-    }).catch((_) => {
-      if (w.signal.aborted) return;
-      const D = _ instanceof Error ? _.message : "Failed to fetch payment methods.";
-      d(D), l("error");
+}, ut = (r) => {
+  const [t, n] = O([]), [o, l] = O("idle"), [c, m] = O(null), [y, p] = O(0), D = Y(null);
+  B(() => {
+    var v;
+    (v = D.current) == null || v.abort();
+    const h = new AbortController();
+    return D.current = h, l("loading"), m(null), Jr(r, h.signal).then((E) => {
+      h.signal.aborted || (n(E), l("ready"));
+    }).catch((E) => {
+      if (h.signal.aborted || E instanceof DOMException && E.name === "AbortError") return;
+      const A = E instanceof Error ? E.message : "Failed to fetch payment methods.";
+      m(A), l("error");
     }), () => {
-      w.abort();
+      h.abort();
     };
-  }, [r, v]);
-  const g = B(() => {
-    y((w) => w + 1);
+  }, [r, y]);
+  const R = Z(() => {
+    p((h) => h + 1);
   }, []);
-  return { items: t, status: o, error: f, refetch: g };
-}, it = ({
+  return { items: t, status: o, error: c, refetch: R };
+}, ft = ({
   open: r,
   onClose: t,
-  formId: s,
+  formId: n,
   saveDisabled: o,
   saveLabel: l = "Save",
-  children: f
-}) => (X(() => {
+  isSaving: c = !1,
+  children: m
+}) => (B(() => {
   if (!r) return;
-  const d = (v) => {
-    v.key === "Escape" && t();
+  const y = (p) => {
+    p.key === "Escape" && t();
   };
-  return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
-}, [r, t]), X(() => {
+  return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
+}, [r, t]), B(() => {
   if (!r) return;
-  const d = document.body.style.overflow;
+  const y = document.body.style.overflow;
   return document.body.style.overflow = "hidden", () => {
-    document.body.style.overflow = d;
+    document.body.style.overflow = y;
   };
 }, [r]), r ? /* @__PURE__ */ a.jsx(
   "div",
@@ -1216,8 +1336,8 @@ const nt = (r) => {
     "aria-modal": "true",
     "aria-labelledby": "movmo-add-payment-title",
     className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4",
-    onClick: (d) => {
-      d.target === d.currentTarget && t();
+    onClick: (y) => {
+      y.target === y.currentTarget && t();
     },
     "data-testid": "add-payment-method-modal",
     children: /* @__PURE__ */ a.jsxs("div", { className: "flex max-h-full w-full max-w-md flex-col rounded-xl bg-white shadow-2xl", children: [
@@ -1228,15 +1348,16 @@ const nt = (r) => {
             type: "button",
             onClick: t,
             "aria-label": "Close add-payment dialog",
-            className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-grayWarm-200 text-grayWarm-700 hover:bg-grayWarm-100",
+            className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-grayWarm-100 p-2 text-grayWarm-950 transition-colors hover:bg-grayWarm-200",
             "data-testid": "add-payment-method-close",
-            children: /* @__PURE__ */ a.jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: /* @__PURE__ */ a.jsx(
+            children: /* @__PURE__ */ a.jsx("svg", { viewBox: "0 0 20 20", width: "20", height: "20", "aria-hidden": "true", children: /* @__PURE__ */ a.jsx(
               "path",
               {
-                d: "M3 3L13 13M13 3L3 13",
+                d: "M5 5L15 15M15 5L5 15",
                 stroke: "currentColor",
-                strokeWidth: "1.75",
-                strokeLinecap: "round"
+                strokeWidth: "1.67",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
               }
             ) })
           }
@@ -1249,9 +1370,9 @@ const nt = (r) => {
             children: "Add payment method"
           }
         ),
-        /* @__PURE__ */ a.jsx("span", { "aria-hidden": "true", className: "h-8 w-8 flex-shrink-0" })
+        /* @__PURE__ */ a.jsx("span", { "aria-hidden": "true", className: "h-9 w-9 flex-shrink-0" })
       ] }),
-      /* @__PURE__ */ a.jsx("div", { className: "flex-1 overflow-y-auto p-4", children: f }),
+      /* @__PURE__ */ a.jsx("div", { className: "flex-1 overflow-y-auto p-4", children: m }),
       /* @__PURE__ */ a.jsxs("div", { className: "flex gap-3 border-t border-grayWarm-200 p-4", children: [
         /* @__PURE__ */ a.jsx(
           "button",
@@ -1267,54 +1388,123 @@ const nt = (r) => {
           "button",
           {
             type: "submit",
-            form: s,
-            disabled: o,
-            className: ne(
-              "inline-flex h-11 flex-1 items-center justify-center rounded-lg bg-brand-500 px-4 text-sm font-semibold text-white transition-colors hover:bg-brand-600",
-              "disabled:cursor-not-allowed disabled:bg-grayWarm-300 disabled:text-grayWarm-500"
+            form: n,
+            disabled: c ? !1 : o,
+            "aria-disabled": c || o,
+            "aria-busy": c,
+            className: Q(
+              "inline-flex h-11 flex-1 items-center justify-center rounded-lg bg-brand-500 px-4 text-sm font-semibold text-white transition-colors",
+              c ? "cursor-not-allowed opacity-90 pointer-events-none" : "hover:bg-brand-600 disabled:cursor-not-allowed disabled:bg-grayWarm-300 disabled:text-grayWarm-500"
             ),
             "data-testid": "add-payment-method-save",
-            children: l
+            children: c ? /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
+              /* @__PURE__ */ a.jsxs(
+                "svg",
+                {
+                  className: "h-[18px] w-[18px] animate-spin",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ a.jsx(
+                      "circle",
+                      {
+                        cx: "12",
+                        cy: "12",
+                        r: "10",
+                        stroke: "currentColor",
+                        strokeWidth: "3",
+                        strokeOpacity: "0.25"
+                      }
+                    ),
+                    /* @__PURE__ */ a.jsx(
+                      "path",
+                      {
+                        d: "M22 12a10 10 0 0 1-10 10",
+                        stroke: "currentColor",
+                        strokeWidth: "3",
+                        strokeLinecap: "round"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ a.jsx("span", { className: "sr-only", children: "Saving card" })
+            ] }) : l
           }
         )
       ] })
     ] })
   }
-) : null), lt = (r, t, s = /* @__PURE__ */ new Date()) => t < s.getFullYear() || t === s.getFullYear() && r < s.getMonth() + 1, ir = (r) => {
+) : null), mt = (r) => {
+  if (!r) return "Card";
+  const t = r.toLowerCase();
+  return t === "amex" ? "Amex" : t.charAt(0).toUpperCase() + t.slice(1);
+}, pt = ({
+  method: r,
+  trailing: t,
+  onClick: n,
+  cardLabelFormat: o = "branded",
+  className: l
+}) => /* @__PURE__ */ a.jsxs(
+  "div",
+  {
+    className: Q("flex items-center gap-3", n && "cursor-pointer", l),
+    onClick: n,
+    role: n ? "button" : void 0,
+    tabIndex: n ? 0 : void 0,
+    onKeyDown: n ? (c) => {
+      (c.key === "Enter" || c.key === " ") && (c.preventDefault(), n());
+    } : void 0,
+    "data-testid": `payment-method-preview-${r.id}`,
+    children: [
+      /* @__PURE__ */ a.jsx(Ne, { brand: r.brand, width: 34, className: "flex-shrink-0" }),
+      /* @__PURE__ */ a.jsx("span", { className: "flex-1 text-lg font-semibold text-grayWarm-950", children: o === "masked" ? `•••• ${r.last4}` : `${mt(r.brand)} ${r.last4}` }),
+      t
+    ]
+  }
+), ht = (r, t, n = /* @__PURE__ */ new Date()) => t < n.getFullYear() || t === n.getFullYear() && r < n.getMonth() + 1, br = (r) => {
+  if (!r) return "Card";
   const t = r.toLowerCase();
-  return t === "amex" ? "Amex" : t ? t.charAt(0).toUpperCase() + t.slice(1) : "Card";
-}, ct = (r, t) => `${String(r).padStart(2, "0")}/${t}`, dt = ({
+  return t === "amex" ? "Amex" : t.charAt(0).toUpperCase() + t.slice(1);
+}, yt = (r, t) => `${String(r).padStart(2, "0")}/${t}`, vt = ({
   method: r,
   selectable: t,
-  selected: s,
+  selected: n,
   onSelect: o,
   onSetDefault: l,
-  onRemove: f,
-  disabled: d,
-  showDefaultBadge: v,
-  hideSetDefaultMenuItem: y
+  onRemove: c,
+  disabled: m,
+  showDefaultBadge: y,
+  hideSetDefaultMenuItem: p,
+  cardLabelFormat: D = "branded"
 }) => {
-  const [T, g] = S(!1), w = q(null), F = lt(r.expMonth, r.expYear);
-  X(() => {
-    if (!T) return;
-    const D = (R) => {
-      var G;
-      (G = w.current) != null && G.contains(R.target) || g(!1);
+  const [R, h] = O(!1), v = Y(null), E = ht(r.expMonth, r.expYear);
+  B(() => {
+    if (!R) return;
+    const k = (J) => {
+      var g;
+      (g = v.current) != null && g.contains(J.target) || h(!1);
     };
-    return document.addEventListener("mousedown", D), () => document.removeEventListener("mousedown", D);
-  }, [T]);
-  const _ = () => {
-    t && o && !d && o(r);
+    return document.addEventListener("mousedown", k), () => document.removeEventListener("mousedown", k);
+  }, [R]);
+  const A = () => {
+    t && o && !m && o(r);
   };
   return /* @__PURE__ */ a.jsxs(
     "div",
     {
-      className: ne(
-        "flex items-center gap-3 rounded-lg border px-3 py-3 transition-colors",
-        t && !d && "cursor-pointer",
-        s ? "border-grayWarm-950 shadow-[0_0_0_1px_#1c1917]" : "border-grayWarm-200 hover:border-grayWarm-300"
+      className: Q(
+        // items-start + per-element mt offsets so the radio, brand icon, and
+        // label all read as one horizontal line, with the Exp text directly
+        // below the label in the same column. Matches main's flights-ui +
+        // accounts-ui row layout (both use items-start).
+        "flex items-start gap-3 transition-colors",
+        t ? "rounded-lg border px-3 py-3" : "py-4",
+        t && !m && "cursor-pointer",
+        t && (n ? "border-grayWarm-950 shadow-[0_0_0_1px_#1c1917]" : "border-grayWarm-200 hover:border-grayWarm-300")
       ),
-      onClick: _,
+      onClick: A,
       "data-testid": `payment-method-row-${r.id}`,
       children: [
         t ? /* @__PURE__ */ a.jsx(
@@ -1322,81 +1512,104 @@ const nt = (r) => {
           {
             type: "radio",
             name: "movmo-payment-method",
-            checked: s,
+            checked: n,
             onChange: () => o == null ? void 0 : o(r),
-            onClick: (D) => D.stopPropagation(),
-            "aria-label": `Select ${ir(r.brand)} ending ${r.last4}`,
-            className: "h-4 w-4 cursor-pointer accent-grayWarm-950",
-            disabled: d
+            onClick: (k) => k.stopPropagation(),
+            "aria-label": `Select ${br(r.brand)} ending ${r.last4}`,
+            className: "mr-1 h-4 w-4 mt-2 cursor-pointer appearance-none rounded-full border-2 border-grayWarm-300 checked:border-[5px] checked:border-grayWarm-950 bg-white checked:bg-white focus:ring-0 focus:ring-offset-0",
+            disabled: m
           }
         ) : null,
-        /* @__PURE__ */ a.jsx(be, { brand: r.brand, className: "flex-shrink-0" }),
+        /* @__PURE__ */ a.jsx(Ne, { brand: r.brand, className: "flex-shrink-0" }),
         /* @__PURE__ */ a.jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ a.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ a.jsxs("span", { className: "text-base font-semibold text-grayWarm-900", children: [
-              ir(r.brand),
-              " ••••",
-              r.last4
-            ] }),
-            v && r.isDefault ? /* @__PURE__ */ a.jsx(
+            /* @__PURE__ */ a.jsx("span", { className: "text-lg font-semibold text-grayWarm-950", children: D === "masked" ? `•••• ${r.last4}` : `${br(r.brand)} ${r.last4}` }),
+            y && r.isDefault ? /* @__PURE__ */ a.jsx(
               "span",
               {
-                className: "inline-flex items-center rounded-full bg-success-50 px-2 py-0.5 text-xs font-medium text-success-700",
+                className: "inline-flex items-center rounded-full bg-success-50 px-2 py-0.5 text-xs font-semibold text-success-700",
                 "data-testid": `badge-default-${r.id}`,
                 children: "Default"
               }
             ) : null,
-            F ? /* @__PURE__ */ a.jsx(
+            E ? /* @__PURE__ */ a.jsx(
               "span",
               {
-                className: "inline-flex items-center rounded-full bg-error-50 px-2 py-0.5 text-xs font-medium text-error-700",
+                className: "inline-flex items-center rounded-full bg-error-50 px-2 py-0.5 text-xs font-semibold text-error-700",
                 "data-testid": `badge-expired-${r.id}`,
                 children: "Expired"
               }
             ) : null
           ] }),
-          /* @__PURE__ */ a.jsxs("div", { className: ne("text-sm", F ? "text-grayWarm-400" : "text-grayWarm-600"), children: [
+          /* @__PURE__ */ a.jsxs("div", { className: Q("text-base", E ? "text-grayWarm-400" : "text-grayWarm-600"), children: [
             "Exp. ",
-            ct(r.expMonth, r.expYear)
+            yt(r.expMonth, r.expYear)
           ] })
         ] }),
-        /* @__PURE__ */ a.jsxs("div", { className: "relative flex-shrink-0", ref: w, children: [
+        /* @__PURE__ */ a.jsxs("div", { className: "relative flex-shrink-0", ref: v, children: [
           /* @__PURE__ */ a.jsx(
             "button",
             {
               type: "button",
               "aria-label": `Open actions for card ending ${r.last4}`,
               "aria-haspopup": "menu",
-              "aria-expanded": T,
+              "aria-expanded": R,
               className: "rounded-lg p-2 text-grayWarm-600 transition-colors hover:bg-grayWarm-100 disabled:cursor-not-allowed disabled:opacity-50",
-              disabled: d,
-              onClick: (D) => {
-                D.stopPropagation(), g((R) => !R);
+              disabled: m,
+              onClick: (k) => {
+                k.stopPropagation(), h((J) => !J);
               },
               "data-testid": `menu-trigger-${r.id}`,
-              children: /* @__PURE__ */ a.jsxs("svg", { viewBox: "0 0 16 16", width: "16", height: "16", "aria-hidden": "true", children: [
-                /* @__PURE__ */ a.jsx("circle", { cx: "3", cy: "8", r: "1.5", fill: "currentColor" }),
-                /* @__PURE__ */ a.jsx("circle", { cx: "8", cy: "8", r: "1.5", fill: "currentColor" }),
-                /* @__PURE__ */ a.jsx("circle", { cx: "13", cy: "8", r: "1.5", fill: "currentColor" })
-              ] })
+              children: /* @__PURE__ */ a.jsx(
+                "svg",
+                {
+                  viewBox: "0 0 24 24",
+                  width: "20",
+                  height: "20",
+                  fill: "currentColor",
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ a.jsx("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" })
+                }
+              )
             }
           ),
-          T ? /* @__PURE__ */ a.jsxs(
+          R ? /* @__PURE__ */ a.jsxs(
             "div",
             {
               role: "menu",
-              className: "absolute right-0 top-full z-10 mt-1 min-w-[160px] rounded-lg border border-grayWarm-200 bg-white py-1 shadow-lg",
-              onClick: (D) => D.stopPropagation(),
+              className: Q(
+                "absolute z-10 whitespace-nowrap rounded-lg border border-grayWarm-200 bg-white py-1 shadow-lg",
+                // selectable mode (flights-ui): the row has a thick border that a
+                // top-aligned dropdown would crash through. Float the menu ABOVE
+                // the trigger button, horizontally centered, with a small tail
+                // pointing back down at the dots. Matches main's flights-ui menu.
+                // non-selectable mode (accounts-ui): no per-row border to
+                // overlap; keep the menu below + right-aligned.
+                t ? "bottom-full left-1/2 mb-2 -translate-x-1/2" : "right-0 top-full mt-1"
+              ),
+              onClick: (k) => k.stopPropagation(),
               "data-testid": `menu-${r.id}`,
               children: [
-                !r.isDefault && !y ? /* @__PURE__ */ a.jsx(
+                t ? (
+                  // Tail: 8px square rotated 45° so its bottom-right corner
+                  // becomes a downward-pointing tip. Bottom + right borders of
+                  // the square form the menu's continuous border.
+                  /* @__PURE__ */ a.jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "absolute -bottom-1.5 left-1/2 h-3 w-3 -translate-x-1/2 rotate-45 border-b border-r border-grayWarm-200 bg-white"
+                    }
+                  )
+                ) : null,
+                !r.isDefault && !p ? /* @__PURE__ */ a.jsx(
                   "button",
                   {
                     type: "button",
                     role: "menuitem",
-                    className: "block w-full px-4 py-2 text-left text-sm text-grayWarm-700 hover:bg-grayWarm-100",
+                    className: "block w-full px-4 py-1 text-left text-md font-semibold text-grayWarm-950 hover:text-grayWarm-700",
                     onClick: () => {
-                      g(!1), l(r);
+                      h(!1), l(r);
                     },
                     "data-testid": `menu-set-default-${r.id}`,
                     children: "Set as default"
@@ -1407,12 +1620,12 @@ const nt = (r) => {
                   {
                     type: "button",
                     role: "menuitem",
-                    className: "block w-full px-4 py-2 text-left text-sm text-error-700 hover:bg-error-50",
+                    className: "block w-full px-4 py-1 text-left text-md font-semibold text-error-700 hover:text-error-500",
                     onClick: () => {
-                      g(!1), f(r);
+                      h(!1), c(r);
                     },
                     "data-testid": `menu-remove-${r.id}`,
-                    children: "Remove"
+                    children: "Delete"
                   }
                 )
               ]
@@ -1422,19 +1635,19 @@ const nt = (r) => {
       ]
     }
   );
-}, ut = (r) => `${Fe().iconCdnBaseUrl}/website/assets/icons/payments/${r}.svg`, Ve = ({ slug: r, alt: t }) => /* @__PURE__ */ a.jsx(
+}, bt = (r) => `${We().iconCdnBaseUrl}/website/assets/icons/payments/${r}.svg`, er = ({ slug: r, alt: t }) => /* @__PURE__ */ a.jsx(
   "img",
   {
-    src: ut(r),
+    src: bt(r),
     alt: t,
     height: 20,
     loading: "lazy",
     style: { height: 20, width: "auto" }
   }
-), Oe = ({
+), Be = ({
   type: r,
   label: t,
-  iconNode: s
+  iconNode: n
 }) => (
   // Alt payment types are visible + clickable but don't yet do anything —
   // the click is intentionally a no-op so the row looks identical to the
@@ -1459,23 +1672,23 @@ const nt = (r) => {
         ),
         /* @__PURE__ */ a.jsxs("span", { className: "flex flex-1 items-center gap-2 text-sm font-semibold text-grayWarm-900", children: [
           t,
-          s
+          n
         ] })
       ]
     }
   )
-), lr = ({
+), xr = ({
   selected: r,
   onSelect: t,
-  creditCardBody: s,
+  creditCardBody: n,
   className: o
 }) => {
   const l = r === "credit_card";
-  return /* @__PURE__ */ a.jsxs("div", { className: ne("flex w-full flex-col gap-3", o), children: [
+  return /* @__PURE__ */ a.jsxs("div", { className: Q("flex w-full flex-col gap-3", o), children: [
     /* @__PURE__ */ a.jsxs(
       "label",
       {
-        className: ne(
+        className: Q(
           "flex cursor-pointer flex-col gap-3 rounded-lg border px-4 py-3 transition-colors",
           l ? "border-grayWarm-900 shadow-[0_0_0_1px_#1c1917]" : "border-grayWarm-200"
         ),
@@ -1496,13 +1709,13 @@ const nt = (r) => {
             ),
             /* @__PURE__ */ a.jsx("span", { className: "flex-1 text-sm font-semibold text-grayWarm-900", children: "Credit card" }),
             /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ a.jsx(be, { brand: "mastercard", width: 28 }),
-              /* @__PURE__ */ a.jsx(be, { brand: "visa", width: 28 }),
-              /* @__PURE__ */ a.jsx(be, { brand: "amex", width: 28 }),
-              /* @__PURE__ */ a.jsx(be, { brand: "discover", width: 28 })
+              /* @__PURE__ */ a.jsx(Ne, { brand: "mastercard", width: 28 }),
+              /* @__PURE__ */ a.jsx(Ne, { brand: "visa", width: 28 }),
+              /* @__PURE__ */ a.jsx(Ne, { brand: "amex", width: 28 }),
+              /* @__PURE__ */ a.jsx(Ne, { brand: "discover", width: 28 })
             ] })
           ] }),
-          l ? /* @__PURE__ */ a.jsx("div", { "data-testid": "payment-type-credit_card-body", children: s }) : null
+          l ? /* @__PURE__ */ a.jsx("div", { "data-testid": "payment-type-credit_card-body", children: n }) : null
         ]
       }
     ),
@@ -1515,31 +1728,31 @@ const nt = (r) => {
       }
     ) : null,
     /* @__PURE__ */ a.jsx(
-      Oe,
+      Be,
       {
         type: "paypal",
         label: "PayPal",
-        iconNode: /* @__PURE__ */ a.jsx(Ve, { slug: "paypal", alt: "PayPal" })
+        iconNode: /* @__PURE__ */ a.jsx(er, { slug: "paypal", alt: "PayPal" })
       }
     ),
     /* @__PURE__ */ a.jsx(
-      Oe,
+      Be,
       {
         type: "googlepay",
         label: "GooglePay",
-        iconNode: /* @__PURE__ */ a.jsx(Ve, { slug: "google-pay", alt: "GooglePay" })
+        iconNode: /* @__PURE__ */ a.jsx(er, { slug: "google-pay", alt: "GooglePay" })
       }
     ),
     /* @__PURE__ */ a.jsx(
-      Oe,
+      Be,
       {
         type: "klarna",
         label: "Klarna",
-        iconNode: /* @__PURE__ */ a.jsx(Ve, { slug: "klarna", alt: "Klarna" })
+        iconNode: /* @__PURE__ */ a.jsx(er, { slug: "klarna", alt: "Klarna" })
       }
     ),
     /* @__PURE__ */ a.jsx(
-      Oe,
+      Be,
       {
         type: "ach",
         label: "Bank account (ACH)",
@@ -1547,143 +1760,190 @@ const nt = (r) => {
       }
     )
   ] });
-}, cr = "movmo-add-payment-form", dr = (r) => {
-  const t = r.filter((o) => o.isDefault), s = r.filter((o) => !o.isDefault);
-  return [...t, ...s];
-}, ur = () => /* @__PURE__ */ a.jsxs(
+}, gr = "movmo-add-payment-form", wr = (r) => {
+  const t = r.filter((o) => o.isDefault), n = r.filter((o) => !o.isDefault);
+  return [...t, ...n];
+}, jr = ({ withDefaultBadge: r = !1 }) => /* @__PURE__ */ a.jsxs(
   "div",
   {
-    className: "flex items-center gap-3 rounded-lg border border-grayWarm-200 px-3 py-3",
+    className: "flex items-start justify-between py-4",
     "data-testid": "payment-method-skeleton",
     children: [
-      /* @__PURE__ */ a.jsx("div", { className: "h-8 w-[46px] flex-shrink-0 animate-pulse rounded bg-grayWarm-200" }),
-      /* @__PURE__ */ a.jsxs("div", { className: "flex-1 space-y-2", children: [
-        /* @__PURE__ */ a.jsx("div", { className: "h-4 w-32 animate-pulse rounded bg-grayWarm-200" }),
-        /* @__PURE__ */ a.jsx("div", { className: "h-3 w-20 animate-pulse rounded bg-grayWarm-200" })
+      /* @__PURE__ */ a.jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ a.jsx("div", { className: "h-8 w-[46px] flex-shrink-0 animate-pulse rounded bg-grayWarm-200" }),
+        /* @__PURE__ */ a.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ a.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ a.jsx("div", { className: "h-5 w-[120px] animate-pulse rounded bg-grayWarm-200" }),
+            r ? /* @__PURE__ */ a.jsx("div", { className: "h-5 w-[56px] animate-pulse rounded-full bg-grayWarm-200" }) : null
+          ] }),
+          /* @__PURE__ */ a.jsx("div", { className: "h-4 w-[100px] animate-pulse rounded bg-grayWarm-200" })
+        ] })
       ] }),
-      /* @__PURE__ */ a.jsx("div", { className: "h-8 w-8 animate-pulse rounded bg-grayWarm-200" })
+      /* @__PURE__ */ a.jsx("div", { className: "h-5 w-5 flex-shrink-0 animate-pulse rounded-full bg-grayWarm-200" })
     ]
   }
-), ft = ({
+), xt = ({
   userId: r,
   defaultCardholderName: t,
-  defaultCardholderFirstName: s,
+  defaultCardholderFirstName: n,
   defaultCardholderLastName: o,
   selectedId: l,
-  onSelect: f,
-  onChange: d,
-  paymentTypeSelector: v = !0,
-  autoSaveFirstCard: y = !0,
-  selectionSetsDefault: T = !1,
-  showDefaultBadge: g = !0,
-  className: w
+  onSelect: c,
+  onChange: m,
+  paymentTypeSelector: y = !0,
+  autoSaveFirstCard: p = !0,
+  selectionSetsDefault: D = !1,
+  showDefaultBadge: R = !0,
+  collapsible: h = !1,
+  cardLabelFormat: v = "branded",
+  className: E
 }) => {
-  const { items: F, status: _, error: D, refetch: R } = ot(r), { deletePaymentMethod: G, status: O } = nt(r), { setDefault: C, status: J } = st(r), [W, se] = S([]), [oe, A] = S(null), [x, b] = S(!1), [I, U] = S(null), [ie, z] = S(!1), [N, Y] = S(null), ue = B(() => {
-    b(!1), U(null), Y(null);
-  }, []), V = t ?? ([s, o].filter(Boolean).join(" ") || void 0);
-  X(() => {
-    _ === "ready" && se(dr(F));
-  }, [F, _]);
-  const k = B(
-    (c) => {
-      se((E) => {
-        const $ = typeof c == "function" ? c(E) : c, H = dr($);
-        return d == null || d(H), H;
+  const { items: A, status: k, error: J, refetch: g } = ut(r), { deletePaymentMethod: P, status: G } = ct(r), { setDefault: ue, status: te } = dt(r), [j, se] = O([]), [he, U] = O(null), [T, d] = O(!1), [S, _] = O(null), [M, X] = O(!1), [z, ee] = O(!1), [V, N] = O(null), [W, me] = O(!1), ye = Y(!1), ge = Z(() => {
+    d(!1), _(null), N(null);
+  }, []), we = t ?? ([n, o].filter(Boolean).join(" ") || void 0);
+  B(() => {
+    k === "ready" && se(wr(A));
+  }, [A, k]), B(() => {
+    if (!c || ye.current || k !== "ready" || j.length === 0 || l) return;
+    ye.current = !0;
+    const u = j.find((ce) => ce.isDefault) ?? j[0];
+    c(u);
+  }, [c, k, j, l]);
+  const fe = Z(
+    (u) => {
+      se((ce) => {
+        const ae = typeof u == "function" ? u(ce) : u, q = wr(ae);
+        return queueMicrotask(() => m == null ? void 0 : m(q)), q;
       });
     },
-    [d]
-  ), le = O === "pending" || J === "pending", ce = B(
-    async (c) => {
-      const E = W;
-      A(null), k(($) => $.map((H) => ({ ...H, isDefault: H.id === c.id })));
+    [m]
+  ), je = G === "pending" || te === "pending", ve = Z(
+    async (u) => {
+      const ce = j;
+      U(null), fe((ae) => ae.map((q) => ({ ...q, isDefault: q.id === u.id })));
       try {
-        await C(c.id), R();
-      } catch ($) {
-        se(E), d == null || d(E);
-        const H = $ instanceof Error ? $.message : "Failed to set default payment method.";
-        A(H);
+        await ue(u.id), g();
+      } catch (ae) {
+        se(ce), m == null || m(ce);
+        const q = ae instanceof Error ? ae.message : "Failed to set default payment method.";
+        U(q);
       }
     },
-    [W, k, C, R, d]
-  ), fe = B(
-    (c) => {
-      f == null || f(c), T && (c.isDefault || ce(c));
+    [j, fe, ue, g, m]
+  ), H = Z(
+    (u) => {
+      c == null || c(u), D && (u.isDefault || ve(u));
     },
-    [f, T, ce]
-  ), me = B(
-    async (c) => {
-      const E = W;
-      A(null), k(($) => $.filter((H) => H.id !== c.id));
+    [c, D, ve]
+  ), oe = Z(
+    async (u) => {
+      const ce = j;
+      U(null);
+      const ae = j.filter((xe) => xe.id !== u.id);
+      fe(() => ae);
+      const q = u.id === l && c ? ae.find((xe) => xe.isDefault) ?? ae[0] ?? null : null;
+      q && H(q);
+      const Le = !!q && D && q !== null && !q.isDefault;
       try {
-        await G(c.id), R();
-      } catch ($) {
-        se(E), d == null || d(E);
-        const H = $ instanceof Error ? $.message : "Failed to delete payment method.";
-        A(H);
+        await P(u.id), Le || g();
+      } catch (xe) {
+        se(ce), m == null || m(ce);
+        const Ve = xe instanceof Error ? xe.message : "Failed to delete payment method.";
+        U(Ve);
       }
     },
-    [W, k, G, R, d]
-  ), pe = B(
-    (c) => {
-      U(null), b(!1), Y(null), k((E) => [c, ...E.filter(($) => $.id !== c.id)]), R();
+    [
+      j,
+      fe,
+      P,
+      g,
+      m,
+      l,
+      c,
+      H,
+      D
+    ]
+  ), ie = Z(
+    (u) => {
+      _(null), d(!1), N(null), fe((ae) => [u, ...ae.filter((q) => q.id !== u.id)]), H(u), !!c && D && !u.isDefault || g();
     },
-    [k, R]
-  ), he = B((c) => {
-    U(c);
-  }, []), Ee = _ === "ready" && W.length === 0, ae = typeof f == "function", Q = W.length === 0, ee = y && W.length === 0, re = B(
-    (c) => /* @__PURE__ */ a.jsx(
-      vr,
+    [fe, g, H, c, D]
+  ), be = Z((u) => {
+    _(u);
+  }, []), Ee = k === "ready" && j.length === 0, Re = typeof c == "function", _e = !Re && !h, le = j.length === 0, b = p && j.length === 0, $ = Z(
+    (u) => /* @__PURE__ */ a.jsx(
+      Cr,
       {
         userId: r,
-        isDefault: Q,
-        defaultCardholderName: V,
-        autoSave: !c && ee,
-        hideInternalSaveButton: c,
-        formId: c ? cr : void 0,
-        onCanSubmitChange: c ? z : void 0,
-        onSuccess: pe,
-        onError: he
+        isDefault: le,
+        defaultCardholderName: we,
+        autoSave: !u && b,
+        hideInternalSaveButton: u,
+        formId: u ? gr : void 0,
+        onCanSubmitChange: u ? X : void 0,
+        onSavingChange: u ? ee : void 0,
+        autoFocus: u ? "number" : void 0,
+        onSuccess: ie,
+        onError: be
       }
     ),
-    [r, Q, V, ee, pe, he]
-  ), de = Ce(() => re(!1), [re]), ye = Ce(() => re(!0), [re]), ve = Ce(() => v ? /* @__PURE__ */ a.jsx(
-    lr,
+    [r, le, we, b, ie, be]
+  ), K = Ue(() => $(!1), [$]), pe = Ue(() => $(!0), [$]), Ye = Ue(() => y ? /* @__PURE__ */ a.jsx(
+    xr,
     {
-      selected: N,
-      onSelect: (c) => Y(c),
-      creditCardBody: de
+      selected: V,
+      onSelect: (u) => N(u),
+      creditCardBody: K
     }
-  ) : de, [v, N, de]), P = Ce(() => v ? /* @__PURE__ */ a.jsx(
-    lr,
+  ) : K, [y, V, K]), ze = Ue(() => y ? /* @__PURE__ */ a.jsx(
+    xr,
     {
-      selected: N,
-      onSelect: (c) => Y(c),
-      creditCardBody: ye
+      selected: V,
+      onSelect: (u) => N(u),
+      creditCardBody: pe
     }
-  ) : ye, [v, N, ye]);
+  ) : pe, [y, V, pe]);
   return /* @__PURE__ */ a.jsxs(
     "div",
     {
-      className: ne("flex w-full flex-col gap-4", w),
+      className: Q("flex w-full flex-col gap-4", E),
       "data-testid": "payment-methods-manager",
       children: [
-        _ === "loading" ? /* @__PURE__ */ a.jsxs("div", { className: "flex flex-col gap-2", "data-testid": "payment-methods-loading", children: [
-          /* @__PURE__ */ a.jsx(ur, {}),
-          /* @__PURE__ */ a.jsx(ur, {})
-        ] }) : null,
-        _ === "error" ? /* @__PURE__ */ a.jsxs(
+        k === "loading" && j.length === 0 ? (
+          // Only show the skeleton on first load — during a silent refetch
+          // (e.g. after set-default or delete optimistic mutations), the user
+          // already sees the correct optimistic list and a skeleton flash
+          // here would be jarring.
+          /* @__PURE__ */ a.jsxs(
+            "div",
+            {
+              className: Q(
+                // Match the real-list shell so layout doesn't reflow when data
+                // arrives. In selection mode the outer card is suppressed too.
+                _e ? "flex flex-col divide-y divide-grayWarm-200 rounded-xl border border-grayWarm-200 px-4 md:px-6" : "flex flex-col gap-2"
+              ),
+              "data-testid": "payment-methods-loading",
+              children: [
+                /* @__PURE__ */ a.jsx(jr, { withDefaultBadge: !0 }),
+                /* @__PURE__ */ a.jsx(jr, {})
+              ]
+            }
+          )
+        ) : null,
+        k === "error" ? /* @__PURE__ */ a.jsxs(
           "div",
           {
             role: "alert",
+            "aria-live": "polite",
             className: "flex items-center justify-between gap-3 rounded-md bg-error-50 p-3 text-sm text-error-700",
             "data-testid": "payment-methods-list-error",
             children: [
-              /* @__PURE__ */ a.jsx("span", { children: D ?? "Failed to load payment methods." }),
+              /* @__PURE__ */ a.jsx("span", { children: J ?? "Failed to load payment methods." }),
               /* @__PURE__ */ a.jsx(
                 "button",
                 {
                   type: "button",
-                  onClick: R,
+                  onClick: g,
                   className: "rounded-md border border-error-700 px-3 py-1 text-xs font-semibold text-error-700 hover:bg-error-50",
                   children: "Retry"
                 }
@@ -1691,62 +1951,136 @@ const nt = (r) => {
             ]
           }
         ) : null,
-        oe ? /* @__PURE__ */ a.jsx(
+        he ? /* @__PURE__ */ a.jsx(
           "div",
           {
             role: "alert",
+            "aria-live": "polite",
             className: "rounded-md bg-error-50 p-3 text-sm text-error-700",
             "data-testid": "payment-methods-mutation-error",
-            children: oe
+            children: he
           }
         ) : null,
-        _ === "ready" && W.length > 0 ? /* @__PURE__ */ a.jsx("div", { className: "flex flex-col gap-2", children: W.map((c) => /* @__PURE__ */ a.jsx(
-          dt,
+        h && j.length > 0 ? /* @__PURE__ */ a.jsx("div", { className: "border-t border-grayWarm-200 pt-4", children: /* @__PURE__ */ a.jsxs(
+          "div",
           {
-            method: c,
-            selectable: ae,
-            selected: ae && c.id === l,
-            onSelect: fe,
-            onSetDefault: ce,
-            onRemove: me,
-            disabled: le,
-            showDefaultBadge: g,
-            hideSetDefaultMenuItem: T
-          },
-          c.id
-        )) }) : null,
-        Ee ? (
-          // Empty state: render the add-card body inline (per Figma 1536-21454).
-          /* @__PURE__ */ a.jsx("div", { "data-testid": "payment-methods-empty", children: ve })
-        ) : _ === "ready" ? /* @__PURE__ */ a.jsx(
-          "button",
+            className: "flex items-center justify-between",
+            "data-testid": W ? "payment-methods-drawer-header" : "payment-methods-collapsed-preview",
+            children: [
+              W ? /* @__PURE__ */ a.jsx("h3", { className: "text-md font-semibold text-grayWarm-950", children: "Payment methods" }) : /* @__PURE__ */ a.jsx(
+                pt,
+                {
+                  method: j.find((u) => u.id === l) ?? j.find((u) => u.isDefault) ?? j[0],
+                  cardLabelFormat: v,
+                  className: "flex-1"
+                }
+              ),
+              /* @__PURE__ */ a.jsx(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": W ? "Collapse payment methods" : "Expand payment methods",
+                  "aria-expanded": W,
+                  className: "bg-grayWarm-100 p-2 rounded-lg hover:bg-grayWarm-200 transition-colors",
+                  onClick: () => me((u) => !u),
+                  "data-testid": W ? "payment-methods-drawer-close" : "payment-methods-drawer-open",
+                  children: /* @__PURE__ */ a.jsx(
+                    "img",
+                    {
+                      src: `${We().iconCdnBaseUrl}/website/assets/icons/chevron-${W ? "up" : "down"}-double.svg`,
+                      alt: "",
+                      className: "w-5 h-5"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ) }) : null,
+        j.length > 0 && (!h || W) ? /* @__PURE__ */ a.jsx(
+          "div",
           {
-            type: "button",
-            onClick: () => {
-              U(null), Y(null), z(!1), b(!0);
-            },
-            className: "self-start rounded-lg bg-brand-50 px-6 py-3 text-md font-semibold text-brand-600 transition-colors hover:bg-brand-100",
-            "data-testid": "payment-methods-add-trigger",
-            children: "Add payment method"
+            className: Q(
+              "flex flex-col",
+              // accounts-ui (non-selectable, non-collapsible): rounded outer card
+              // with divide-y separators between rows.
+              // flights-ui (selectable or collapsible): bare space-y-3 gap between
+              // per-row bordered tiles; no outer card chrome.
+              _e ? "rounded-xl border border-grayWarm-200 px-4 md:px-6 divide-y divide-grayWarm-200" : "space-y-3"
+            ),
+            children: j.map((u) => /* @__PURE__ */ a.jsx(
+              vt,
+              {
+                method: u,
+                selectable: Re,
+                selected: Re && u.id === l,
+                onSelect: H,
+                onSetDefault: ve,
+                onRemove: oe,
+                disabled: je,
+                showDefaultBadge: R,
+                hideSetDefaultMenuItem: D,
+                cardLabelFormat: v
+              },
+              u.id
+            ))
           }
         ) : null,
+        Ee ? (
+          // Empty state: render the add-card body inline (per Figma 1536-21454).
+          /* @__PURE__ */ a.jsx("div", { "data-testid": "payment-methods-empty", children: Ye })
+        ) : j.length > 0 && (!h || W) ? (
+          // Keep the Add button visible during silent refetches (status flips
+          // back to 'loading' transiently after set-default / delete).
+          // In collapsible mode only show the Add button when the drawer is open.
+          /* @__PURE__ */ a.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                _(null), N(null), X(!1), d(!0);
+              },
+              onMouseEnter: () => {
+                ar().catch(() => {
+                });
+              },
+              onFocus: () => {
+                ar().catch(() => {
+                });
+              },
+              className: "self-start rounded-lg bg-brand-50 px-6 py-3 text-md font-semibold text-brand-600 transition-colors hover:bg-brand-100",
+              "data-testid": "payment-methods-add-trigger",
+              children: "Add payment method"
+            }
+          )
+        ) : null,
         /* @__PURE__ */ a.jsxs(
-          it,
+          ft,
           {
-            open: x,
-            onClose: ue,
-            formId: cr,
-            saveDisabled: !ie,
+            open: T,
+            onClose: ge,
+            formId: gr,
+            saveDisabled: !M,
+            isSaving: z,
             children: [
-              P,
-              I ? /* @__PURE__ */ a.jsx(
-                "p",
-                {
-                  role: "alert",
-                  className: "mt-3 rounded-md bg-error-50 px-3 py-2 text-sm text-error-700",
-                  "data-testid": "payment-methods-modal-error",
-                  children: I
-                }
+              ze,
+              S ? (
+                // Single source of truth for save-time errors (API failures + hook
+                // init failures forwarded from MovmoCardForm.onError). MovmoCardForm
+                // intentionally does NOT render its own banner — two role="alert"
+                // nodes on the same string is a WCAG 4.1.3 violation (announced
+                // twice). aria-live="polite" so SR users hear new errors but the
+                // announcement doesn't interrupt their current input.
+                /* @__PURE__ */ a.jsx(
+                  "p",
+                  {
+                    role: "alert",
+                    "aria-live": "polite",
+                    className: "mt-3 rounded-md bg-error-50 px-3 py-2 text-sm text-error-700",
+                    "data-testid": "payment-methods-modal-error",
+                    children: S
+                  }
+                )
               ) : null
             ]
           }
@@ -1755,46 +2089,90 @@ const nt = (r) => {
     }
   );
 };
-ft.displayName = "PaymentMethodsManager";
-const mt = (r) => {
-  const t = r.toLowerCase();
-  return t === "amex" ? "Amex" : t ? t.charAt(0).toUpperCase() + t.slice(1) : "Card";
-}, vt = ({
-  method: r,
-  trailing: t,
-  onClick: s,
-  className: o
-}) => /* @__PURE__ */ a.jsxs(
-  "div",
-  {
-    className: ne("flex items-center gap-3 py-2", s && "cursor-pointer", o),
-    onClick: s,
-    role: s ? "button" : void 0,
-    tabIndex: s ? 0 : void 0,
-    onKeyDown: s ? (l) => {
-      (l.key === "Enter" || l.key === " ") && (l.preventDefault(), s());
-    } : void 0,
-    "data-testid": `payment-method-preview-${r.id}`,
-    children: [
-      /* @__PURE__ */ a.jsx(be, { brand: r.brand, className: "flex-shrink-0" }),
-      /* @__PURE__ */ a.jsxs("span", { className: "flex-1 text-base font-semibold text-grayWarm-900", children: [
-        mt(r.brand),
-        " ",
-        r.last4
-      ] }),
-      t
-    ]
+xt.displayName = "PaymentMethodsManager";
+const gt = "/v1/auth/", wt = "movmo_csrf_token", jt = (r) => {
+  if (typeof document > "u") return null;
+  const t = document.cookie ? document.cookie.split(";") : [];
+  for (const n of t) {
+    const o = n.trim();
+    if (o.startsWith(r + "="))
+      return decodeURIComponent(o.substring(r.length + 1));
   }
-);
+  return null;
+}, Et = (r) => typeof r == "string" ? r : r instanceof URL ? r.href : r.url, _t = () => {
+  if (typeof globalThis < "u" && typeof globalThis.fetch == "function")
+    return globalThis.fetch.bind(globalThis);
+  throw new Error("@movmo_app/payments: no global fetch available in this environment");
+}, Nt = (r) => {
+  const {
+    refreshSession: t,
+    onRefreshFailed: n,
+    csrfCookieName: o = wt,
+    extraHeaders: l,
+    authPathFragment: c = gt,
+    baseFetch: m = _t(),
+    readCookie: y = jt
+  } = r;
+  let p = null;
+  const D = () => {
+    if (p) return p;
+    const h = (async () => {
+      await t();
+    })();
+    return p = h, h.finally(() => {
+      p === h && (p = null);
+    }).catch(() => {
+    }), h;
+  }, R = (h, v) => {
+    const E = new Headers(v == null ? void 0 : v.headers), A = y(o);
+    if (A && !E.has("X-CSRF-Token") && E.set("X-CSRF-Token", A), l) {
+      const k = l(h, v);
+      for (const [J, g] of Object.entries(k))
+        E.has(J) || E.set(J, g);
+    }
+    return {
+      ...v,
+      headers: E,
+      credentials: (v == null ? void 0 : v.credentials) ?? "include"
+    };
+  };
+  return async function(v, E) {
+    const A = await m(v, R(v, E));
+    if (Et(v).includes(c) || A.status !== 401 && A.status !== 403)
+      return A;
+    try {
+      await D();
+    } catch (g) {
+      try {
+        n(g);
+      } catch (P) {
+        console.error(
+          "@movmo_app/payments: onRefreshFailed callback threw — auth retry path is misconfigured",
+          P
+        );
+      }
+      return A;
+    }
+    try {
+      return await m(v, R(v, E));
+    } catch (g) {
+      return console.error(
+        "@movmo_app/payments: retry after token refresh failed — returning original response",
+        g
+      ), A;
+    }
+  };
+};
 export {
-  vr as MovmoCardForm,
-  vt as PaymentMethodPreview,
-  ft as PaymentMethodsManager,
-  Fe as getPaymentsConfig,
-  yt as setPaymentsConfig,
-  nt as useDeletePaymentMethod,
-  et as useMovmoCardFields,
-  st as useSetDefaultPaymentMethod,
-  ot as useUserPaymentMethods
+  Cr as MovmoCardForm,
+  pt as PaymentMethodPreview,
+  xt as PaymentMethodsManager,
+  Nt as createMovmoAuthFetch,
+  We as getPaymentsConfig,
+  Ct as setPaymentsConfig,
+  ct as useDeletePaymentMethod,
+  st as useMovmoCardFields,
+  dt as useSetDefaultPaymentMethod,
+  ut as useUserPaymentMethods
 };
 //# sourceMappingURL=index.es.js.map