@solvapay/react 1.3.0 → 1.4.0-preview-ecd61384a4e849717e13d47ab2daa086cdcd91c5

package/dist/index.cjs

@@ -32,6 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   ActivationFlow: () => ActivationFlow2,
   AmountPicker: () => AmountPicker2,
+  AutoRecharge: () => AutoRecharge2,
   BalanceBadge: () => BalanceBadge,
   CancelPlanButton: () => CancelPlanButton,
   CancelledPlanNotice: () => CancelledPlanNotice2,
@@ -58,6 +59,7 @@ __export(index_exports, {
   TopupForm: () => TopupForm2,
   UnsupportedTransportMethodError: () => UnsupportedTransportMethodError,
   UpdatePaymentMethodButton: () => UpdatePaymentMethodButton,
+  configToAutoRechargeInput: () => configToAutoRechargeInput,
   confirmPayment: () => confirmPayment,
   createAnonymousAuthAdapter: () => createAnonymousAuthAdapter,
   createHttpTransport: () => createHttpTransport,
@@ -83,6 +85,7 @@ __export(index_exports, {
   toMajorUnits: () => toMajorUnits,
   useActivation: () => useActivation,
   useAutoActivateFreePlan: () => useAutoActivateFreePlan,
+  useAutoRecharge: () => useAutoRecharge,
   useBalance: () => useBalance,
   useCheckout: () => useCheckout,
   useCheckoutFlow: () => useCheckoutFlow,
@@ -112,6 +115,29 @@ module.exports = __toCommonJS(index_exports);
 // src/SolvaPayProvider.tsx
 var import_react2 = require("react");
 
+// ../server/src/index.ts
+var import_node_crypto = __toESM(require("crypto"), 1);
+var import_core = require("@solvapay/core");
+
+// ../server/src/helpers/balance-poll.ts
+var BALANCE_RECONCILE_DELAYS_MS = [500, 1e3, 2e3, 4e3, 8e3, 16e3];
+async function pollBalanceUntilIncreased(getBalance, baseline, delays = BALANCE_RECONCILE_DELAYS_MS) {
+  for (const delay of delays) {
+    await new Promise((resolve) => setTimeout(resolve, delay));
+    try {
+      const post = await getBalance();
+      if (post.credits > baseline) {
+        return { creditsAdded: post.credits - baseline };
+      }
+    } catch {
+    }
+  }
+  return null;
+}
+
+// src/helpers/auto-recharge-cache.ts
+var BALANCE_RECONCILE_GRACE_MS = BALANCE_RECONCILE_DELAYS_MS.reduce((sum, delay) => sum + delay, 0) + 1e3;
+
 // src/utils/purchases.ts
 function filterPurchases(purchases) {
   return purchases.filter((purchase) => purchase.status === "active");
@@ -308,6 +334,7 @@ var DEFAULT_ROUTES = {
   getProduct: "/api/get-product",
   listPlans: "/api/list-plans",
   getPaymentMethod: "/api/payment-method",
+  autoRecharge: "/api/auto-recharge",
   getUsage: "/api/usage",
   getLimits: "/api/limits"
 };
@@ -345,7 +372,11 @@ function createHttpTransport(config) {
     }),
     createTopupPayment: (params) => request(config, routeFor(config, "createTopupPayment"), {
       method: "POST",
-      body: { amount: params.amount, currency: params.currency },
+      body: {
+        amount: params.amount,
+        currency: params.currency,
+        ...params.autoRecharge ? { autoRecharge: params.autoRecharge } : {}
+      },
       onErrorContext: "createTopupPayment",
       errorPrefix: "Failed to create topup payment"
     }),
@@ -394,16 +425,12 @@ function createHttpTransport(config) {
         }
       );
     },
-    createCustomerSession: () => request(
-      config,
-      routeFor(config, "createCustomerSession"),
-      {
-        method: "POST",
-        body: {},
-        onErrorContext: "createCustomerSession",
-        errorPrefix: "Failed to create customer session"
-      }
-    ),
+    createCustomerSession: () => request(config, routeFor(config, "createCustomerSession"), {
+      method: "POST",
+      body: {},
+      onErrorContext: "createCustomerSession",
+      errorPrefix: "Failed to create customer session"
+    }),
     getMerchant: () => request(config, routeFor(config, "getMerchant"), {
       method: "GET",
       onErrorContext: "getMerchant",
@@ -433,6 +460,22 @@ function createHttpTransport(config) {
       onErrorContext: "getPaymentMethod",
       errorPrefix: "Failed to load payment method"
     }),
+    getAutoRecharge: () => request(config, routeFor(config, "autoRecharge"), {
+      method: "GET",
+      onErrorContext: "getAutoRecharge",
+      errorPrefix: "Failed to load auto-recharge"
+    }),
+    saveAutoRecharge: (input) => request(config, routeFor(config, "autoRecharge"), {
+      method: "PUT",
+      body: input,
+      onErrorContext: "saveAutoRecharge",
+      errorPrefix: "Failed to save auto-recharge"
+    }),
+    disableAutoRecharge: () => request(config, routeFor(config, "autoRecharge"), {
+      method: "DELETE",
+      onErrorContext: "disableAutoRecharge",
+      errorPrefix: "Failed to disable auto-recharge"
+    }),
     getUsage: () => request(config, routeFor(config, "getUsage"), {
       method: "GET",
       onErrorContext: "getUsage",
@@ -571,6 +614,42 @@ var enCopy = {
     creditEstimateExact: "= {credits} credits",
     creditEstimateApprox: "~ {credits} credits"
   },
+  autoRecharge: {
+    heading: "Auto recharge",
+    description: "Automatically top up so you never run out \u2014 recommended for production. You can turn this off anytime.",
+    settingsHeading: "Auto recharge settings",
+    setupTriggerLabel: "Set up auto-recharge",
+    modifyTriggerLabel: "Modify",
+    notConfiguredHint: "Automatic top-ups are off. Set up auto-recharge if you want credits added when your balance runs low.",
+    enableLabel: "Enable auto-recharge",
+    enableQuestion: "Would you like to set up automatic recharge?",
+    enableSentence: "Yes, automatically recharge my card when my credit balance falls below a threshold",
+    thresholdLabel: "When balance falls below",
+    thresholdAriaLabel: "Balance threshold",
+    fixedAmountLabel: "Add this amount",
+    fixedAmountAriaLabel: "Fixed top-up amount",
+    saveButton: "Save settings",
+    cancelButton: "Cancel",
+    disableButton: "Disable automatic top-up",
+    savedMessage: "Automatic top-up settings saved.",
+    disabledMessage: "Automatic top-ups disabled.",
+    setupRequiredMessage: "Confirm your card to activate automatic top-ups.",
+    setupHeading: "Authorize card",
+    setupDescription: "Authorize a card for automatic top-ups. You will not be charged now.",
+    setupSubmit: "Save card for auto-recharge",
+    setupProcessing: "Authorizing...",
+    setupAwaitingConfirmation: "Card authorized. Finishing activation \u2014 this can take a moment.",
+    setupAuthFailed: "Card authentication failed. Please try a different card.",
+    invalidThreshold: "Enter a valid balance threshold.",
+    thresholdTooLow: "Balance threshold must be greater than zero.",
+    minTopupAmount: "Top-up amount must be at least {amount}.",
+    topupBelowThreshold: "Top-up amount must be at least your balance threshold ({amount}).",
+    creditsPerRecharge: "\u2248 {credits} credits per recharge",
+    creditsPerRechargeApprox: "~ {credits} credits per recharge",
+    currencyPerRecharge: "\u2248 {amount} per recharge",
+    currencyPerRechargeApprox: "~ {amount} per recharge",
+    statusFailed: "Payment failed \u2014 update your card to resume"
+  },
   activationFlow: {
     heading: "Confirm your plan",
     activateButton: "Activate",
@@ -798,12 +877,18 @@ var SolvaPayProvider = ({ config, children }) => {
   const [displayExchangeRateValue, setDisplayExchangeRateValue] = (0, import_react2.useState)(
     initial?.balance?.displayExchangeRate ?? null
   );
+  const [displayBlockValue, setDisplayBlockValue] = (0, import_react2.useState)(
+    initial?.balance?.display ?? null
+  );
   const [balanceLoading, setBalanceLoading] = (0, import_react2.useState)(false);
   const balanceInFlightRef = (0, import_react2.useRef)(false);
   const balanceLoadedRef = (0, import_react2.useRef)(!!initial?.balance);
+  const creditsValueRef = (0, import_react2.useRef)(initial?.balance?.credits ?? null);
   const optimisticUntilRef = (0, import_react2.useRef)(0);
   const optimisticTimerRef = (0, import_react2.useRef)(null);
   const fetchBalanceRef = (0, import_react2.useRef)(null);
+  const reconcileRunningRef = (0, import_react2.useRef)(false);
+  const reconcilePollRef = (0, import_react2.useRef)(null);
   const inFlightRef = (0, import_react2.useRef)(null);
   const loadedCacheKeysRef = (0, import_react2.useRef)(
     new Set(initial?.customerRef ? [initial.customerRef] : [])
@@ -821,10 +906,12 @@ var SolvaPayProvider = ({ config, children }) => {
   const fetchBalanceImpl = (0, import_react2.useCallback)(async () => {
     if (optimisticUntilRef.current > Date.now()) return;
     if (!isAuthenticated && !internalCustomerRef) {
+      creditsValueRef.current = null;
       setCreditsValue(null);
       setDisplayCurrencyValue(null);
       setCreditsPerMinorUnitValue(null);
       setDisplayExchangeRateValue(null);
+      setDisplayBlockValue(null);
       setBalanceLoading(false);
       balanceLoadedRef.current = false;
       return;
@@ -841,10 +928,12 @@ var SolvaPayProvider = ({ config, children }) => {
         return;
       }
       const data = await transportRef.current.getBalance();
+      creditsValueRef.current = data.credits ?? null;
       setCreditsValue(data.credits ?? null);
       setDisplayCurrencyValue(data.displayCurrency ?? null);
       setCreditsPerMinorUnitValue(data.creditsPerMinorUnit ?? null);
       setDisplayExchangeRateValue(data.displayExchangeRate ?? null);
+      setDisplayBlockValue(data.display ?? null);
       balanceLoadedRef.current = true;
     } catch (error) {
       console.error("[SolvaPayProvider] Failed to fetch balance:", error);
@@ -859,18 +948,112 @@ var SolvaPayProvider = ({ config, children }) => {
   (0, import_react2.useEffect)(() => {
     return () => {
       if (optimisticTimerRef.current) clearTimeout(optimisticTimerRef.current);
+      reconcilePollRef.current = null;
+      reconcileRunningRef.current = false;
     };
   }, []);
   const OPTIMISTIC_GRACE_MS2 = 8e3;
-  const adjustBalanceImpl = (0, import_react2.useCallback)((credits) => {
-    setCreditsValue((prev) => (prev ?? 0) + credits);
-    optimisticUntilRef.current = Date.now() + OPTIMISTIC_GRACE_MS2;
+  const DEBIT_GRACE_MS = 2e3;
+  const clearOptimisticGrace = (0, import_react2.useCallback)(() => {
+    optimisticUntilRef.current = 0;
+    if (optimisticTimerRef.current) {
+      clearTimeout(optimisticTimerRef.current);
+      optimisticTimerRef.current = null;
+    }
+  }, []);
+  const applyBalanceSnapshot = (0, import_react2.useCallback)(
+    (data) => {
+      creditsValueRef.current = data.credits ?? null;
+      setCreditsValue(data.credits ?? null);
+      setDisplayCurrencyValue(data.displayCurrency ?? null);
+      setCreditsPerMinorUnitValue(data.creditsPerMinorUnit ?? null);
+      setDisplayExchangeRateValue(data.displayExchangeRate ?? null);
+      setDisplayBlockValue(data.display ?? null);
+      balanceLoadedRef.current = true;
+    },
+    []
+  );
+  const reconcileBalanceIncreaseImpl = (0, import_react2.useCallback)(async () => {
+    if (!transportRef.current.getBalance) return;
+    const finishReconcilePoll = () => {
+      reconcilePollRef.current = null;
+      clearOptimisticGrace();
+    };
+    reconcileRunningRef.current = true;
+    try {
+      while (reconcilePollRef.current) {
+        const { baseline: activeBaseline, generation: activeGeneration } = reconcilePollRef.current;
+        const pollResult = await pollBalanceUntilIncreased(
+          async () => {
+            const data = await transportRef.current.getBalance();
+            return { credits: data.credits ?? 0 };
+          },
+          activeBaseline,
+          BALANCE_RECONCILE_DELAYS_MS
+        );
+        const pollState = reconcilePollRef.current;
+        if (!pollState || pollState.generation !== activeGeneration) {
+          continue;
+        }
+        if (!pollResult) {
+          finishReconcilePoll();
+          break;
+        }
+        try {
+          const data = await transportRef.current.getBalance();
+          applyBalanceSnapshot(data);
+          pollState.pending -= 1;
+          if (pollState.pending > 0) {
+            pollState.baseline = data.credits ?? 0;
+            continue;
+          }
+        } catch (error) {
+          console.error("[SolvaPayProvider] Failed to reconcile balance after auto-recharge:", error);
+        }
+        finishReconcilePoll();
+        break;
+      }
+    } finally {
+      reconcileRunningRef.current = false;
+    }
+  }, [applyBalanceSnapshot, clearOptimisticGrace]);
+  const scheduleGraceRefetch = (0, import_react2.useCallback)((graceMs) => {
+    optimisticUntilRef.current = Date.now() + graceMs;
     if (optimisticTimerRef.current) clearTimeout(optimisticTimerRef.current);
     optimisticTimerRef.current = setTimeout(() => {
       optimisticUntilRef.current = 0;
       fetchBalanceRef.current?.();
-    }, OPTIMISTIC_GRACE_MS2);
+    }, graceMs);
   }, []);
+  const adjustBalanceImpl = (0, import_react2.useCallback)(
+    (credits) => {
+      const nextCredits = (creditsValueRef.current ?? 0) + credits;
+      creditsValueRef.current = nextCredits;
+      setCreditsValue(nextCredits);
+      if (credits >= 0) {
+        scheduleGraceRefetch(OPTIMISTIC_GRACE_MS2);
+      } else {
+        scheduleGraceRefetch(DEBIT_GRACE_MS);
+      }
+    },
+    [scheduleGraceRefetch]
+  );
+  const reconcileAfterUsageDebitImpl = (0, import_react2.useCallback)(
+    (opts) => {
+      if (opts?.expectIncrease !== true) {
+        return;
+      }
+      const nextCredits = creditsValueRef.current ?? 0;
+      const generation = (reconcilePollRef.current?.generation ?? 0) + 1;
+      const pending = (reconcilePollRef.current?.pending ?? 0) + 1;
+      reconcilePollRef.current = { baseline: nextCredits, generation, pending };
+      scheduleGraceRefetch(BALANCE_RECONCILE_GRACE_MS);
+      if (!reconcileRunningRef.current) {
+        void reconcileBalanceIncreaseImpl();
+      }
+    },
+    [reconcileBalanceIncreaseImpl, scheduleGraceRefetch]
+  );
   const createPayment = (0, import_react2.useCallback)(
     (params) => transportRef.current.createPayment(params),
     []
@@ -1042,6 +1225,7 @@ var SolvaPayProvider = ({ config, children }) => {
     setDisplayCurrencyValue(next.balance?.displayCurrency ?? null);
     setCreditsPerMinorUnitValue(next.balance?.creditsPerMinorUnit ?? null);
     setDisplayExchangeRateValue(next.balance?.displayExchangeRate ?? null);
+    setDisplayBlockValue(next.balance?.display ?? null);
     balanceLoadedRef.current = !!next.balance;
   }, []);
   (0, import_react2.useEffect)(() => {
@@ -1146,8 +1330,10 @@ var SolvaPayProvider = ({ config, children }) => {
       displayCurrency: displayCurrencyValue,
       creditsPerMinorUnit: creditsPerMinorUnitValue,
       displayExchangeRate: displayExchangeRateValue,
+      display: displayBlockValue,
       refetch: fetchBalanceImpl,
-      adjustBalance: adjustBalanceImpl
+      adjustBalance: adjustBalanceImpl,
+      reconcileAfterUsageDebit: reconcileAfterUsageDebitImpl
     }),
     [
       balanceLoading,
@@ -1155,8 +1341,10 @@ var SolvaPayProvider = ({ config, children }) => {
       displayCurrencyValue,
       creditsPerMinorUnitValue,
       displayExchangeRateValue,
+      displayBlockValue,
       fetchBalanceImpl,
-      adjustBalanceImpl
+      adjustBalanceImpl,
+      reconcileAfterUsageDebitImpl
     ]
   );
   const contextValue = (0, import_react2.useMemo)(
@@ -1401,7 +1589,7 @@ function withPaymentElementDefaults(options) {
 
 // src/utils/errors.ts
 var DOCS_BASE_URL = "https://solvapay.com/docs";
-var SolvaPayError = class extends Error {
+var SolvaPayError2 = class extends Error {
   code;
   docsUrl;
   constructor(code, message, docsUrl) {
@@ -1411,7 +1599,7 @@ var SolvaPayError = class extends Error {
     this.docsUrl = docsUrl;
   }
 };
-var MissingProviderError = class extends SolvaPayError {
+var MissingProviderError = class extends SolvaPayError2 {
   constructor(primitiveName) {
     const docsUrl = `${DOCS_BASE_URL}/troubleshooting/missing-provider`;
     super(
@@ -1422,7 +1610,7 @@ var MissingProviderError = class extends SolvaPayError {
     this.name = "MissingProviderError";
   }
 };
-var MissingProductRefError = class extends SolvaPayError {
+var MissingProductRefError = class extends SolvaPayError2 {
   constructor(primitiveName) {
     const docsUrl = `${DOCS_BASE_URL}/primitives/product-ref`;
     super(
@@ -3674,7 +3862,7 @@ function getStripeCacheKey2(publishableKey, accountId) {
   return accountId ? `${publishableKey}:${accountId}` : publishableKey;
 }
 function useTopup(options) {
-  const { amount, currency } = options;
+  const { amount, currency, autoRecharge } = options;
   const { createTopupPayment, customerRef, updateCustomerRef } = useSolvaPay();
   const [loading, setLoading] = (0, import_react20.useState)(false);
   const [error, setError] = (0, import_react20.useState)(null);
@@ -3693,7 +3881,7 @@ function useTopup(options) {
     setLoading(true);
     setError(null);
     try {
-      const result = await createTopupPayment({ amount, currency });
+      const result = await createTopupPayment({ amount, currency, autoRecharge });
       if (!result || typeof result !== "object") {
         throw new Error("Invalid topup payment intent response from server");
       }
@@ -3725,7 +3913,7 @@ function useTopup(options) {
       setLoading(false);
       isStartingRef.current = false;
     }
-  }, [amount, currency, createTopupPayment, customerRef, updateCustomerRef, loading]);
+  }, [amount, currency, autoRecharge, createTopupPayment, customerRef, updateCustomerRef, loading]);
   const reset = (0, import_react20.useCallback)(() => {
     isStartingRef.current = false;
     setLoading(false);
@@ -3757,6 +3945,7 @@ var Root4 = (0, import_react21.forwardRef)(function TopupFormRoot(props, forward
   const {
     amount,
     currency,
+    autoRecharge,
     onSuccess,
     onError,
     returnUrl,
@@ -3780,7 +3969,8 @@ var Root4 = (0, import_react21.forwardRef)(function TopupFormRoot(props, forward
     stripePromise
   } = useTopup({
     amount,
-    currency
+    currency,
+    autoRecharge
   });
   const hasInitializedRef = (0, import_react21.useRef)(false);
   const hasAmount = amount > 0;
@@ -4343,7 +4533,7 @@ var StripePaymentFormWrapper = ({
 
 // src/primitives/BalanceBadge.tsx
 var import_react25 = require("react");
-var import_core = require("@solvapay/core");
+var import_core2 = require("@solvapay/core");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var BalanceBadge = (0, import_react25.forwardRef)(function BalanceBadge2({ asChild, numberOnly, lowThreshold = 10, children, ...rest }, forwardedRef) {
   const solva = (0, import_react25.useContext)(SolvaPayContext);
@@ -4372,14 +4562,14 @@ var BalanceBadge = (0, import_react25.forwardRef)(function BalanceBadge2({ asChi
   const formattedCredits = new Intl.NumberFormat(locale).format(credits);
   let currencyEquivalent = "";
   if (!numberOnly && displayCurrency && creditsPerMinorUnit) {
-    const displayMinor = (0, import_core.creditsToDisplayMinorUnits)({
+    const displayMinor = (0, import_core2.creditsToDisplayMinorUnits)({
       credits,
       creditsPerMinorUnit,
       displayExchangeRate: displayExchangeRate ?? 1,
       displayCurrency
     });
     if (displayMinor !== null) {
-      const minorPerMajor = (0, import_core.minorUnitsPerMajor)(displayCurrency);
+      const minorPerMajor = (0, import_core2.minorUnitsPerMajor)(displayCurrency);
       const formatted = new Intl.NumberFormat(locale, {
         style: "currency",
         currency: displayCurrency,
@@ -6816,177 +7006,1837 @@ var CurrentPlanCard = ({
   );
 };
 
-// src/hooks/useLimits.ts
+// src/primitives/AutoRecharge.tsx
+var import_react42 = require("react");
+var import_react_dom = require("react-dom");
+var import_react_stripe_js4 = require("@stripe/react-stripe-js");
+var import_stripe_js3 = require("@stripe/stripe-js");
+
+// src/hooks/useAutoRecharge.ts
 var import_react41 = require("react");
-var CACHE_TTL_MS = 1e4;
-var OPTIMISTIC_GRACE_MS = 8e3;
-var limitsCache = /* @__PURE__ */ new Map();
-function cacheKey(customerRef, productRef, meterName) {
-  return `${customerRef ?? "anonymous"}:${productRef}:${meterName}`;
+
+// src/hooks/autoRechargeCache.ts
+var autoRechargeCache = /* @__PURE__ */ new Map();
+var CACHE_DURATION6 = 5 * 60 * 1e3;
+function autoRechargeCacheKeyFor(config) {
+  return createTransportCacheKey(config, config?.api?.autoRecharge || "/api/auto-recharge");
 }
-function useLimits(options) {
-  const { productRef, meterName: rawMeterName, enabled = true } = options;
-  const meterName = rawMeterName || "requests";
-  const transport = useTransport();
-  const { customerRef } = useCustomer();
-  const { purchase } = useSolvaPay();
-  const currentKey = !productRef || !enabled ? null : cacheKey(customerRef, productRef, meterName);
-  const [data, setData] = (0, import_react41.useState)(() => {
-    if (!currentKey) return null;
-    const cached = limitsCache.get(currentKey);
-    if (!cached || Date.now() - cached.timestamp >= CACHE_TTL_MS) return null;
-    return cached.data;
-  });
+
+// src/hooks/useAutoRecharge.ts
+function mergeAutoRechargeConfig(config, display) {
+  return display ? { ...config, display } : config;
+}
+async function fetchAutoRecharge(config) {
+  const transport = config?.transport ?? createHttpTransport(config);
+  if (!transport.getAutoRecharge) return null;
+  const response = await transport.getAutoRecharge();
+  if (!response.config) return null;
+  return mergeAutoRechargeConfig(response.config, response.display);
+}
+function useAutoRecharge() {
+  const { _config } = useSolvaPay();
+  const key = autoRechargeCacheKeyFor(_config);
+  const [config, setConfig] = (0, import_react41.useState)(
+    () => autoRechargeCache.get(key)?.config ?? null
+  );
   const [loading, setLoading] = (0, import_react41.useState)(() => {
-    if (!currentKey) return false;
-    const cached = limitsCache.get(currentKey);
-    if (!cached) return true;
-    if (cached.promise) return true;
-    if (Date.now() - cached.timestamp >= CACHE_TTL_MS) return true;
-    return false;
+    const cached = autoRechargeCache.get(key);
+    return !cached || !cached.config && !cached.promise;
   });
+  const [saving, setSaving] = (0, import_react41.useState)(false);
+  const [disabling, setDisabling] = (0, import_react41.useState)(false);
   const [error, setError] = (0, import_react41.useState)(null);
-  const [trackedKey, setTrackedKey] = (0, import_react41.useState)(currentKey);
-  if (trackedKey !== currentKey) {
-    setTrackedKey(currentKey);
-    setData(null);
-  }
-  const optimisticTimerRef = (0, import_react41.useRef)(null);
-  (0, import_react41.useEffect)(() => {
-    return () => {
-      if (optimisticTimerRef.current) clearTimeout(optimisticTimerRef.current);
-    };
-  }, []);
-  const attachToFetch = (0, import_react41.useCallback)(
-    async (promise) => {
+  const requestSeq = (0, import_react41.useRef)(0);
+  const load = (0, import_react41.useCallback)(
+    async (force = false) => {
+      const seq = requestSeq.current;
+      const cached = autoRechargeCache.get(key);
+      const now = Date.now();
+      if (!force && cached?.config && now - cached.timestamp < CACHE_DURATION6) {
+        if (seq !== requestSeq.current) return;
+        setConfig(cached.config);
+        setLoading(false);
+        setError(null);
+        return;
+      }
+      if (!force && cached?.promise) {
+        setLoading(true);
+        try {
+          const value = await cached.promise;
+          if (seq !== requestSeq.current) return;
+          setConfig(value);
+          setError(null);
+        } catch (caught) {
+          if (seq !== requestSeq.current) return;
+          setError(caught instanceof Error ? caught : new Error(String(caught)));
+        } finally {
+          if (seq === requestSeq.current) {
+            setLoading(false);
+          }
+        }
+        return;
+      }
       setLoading(true);
+      setError(null);
+      const promise = fetchAutoRecharge(_config);
+      autoRechargeCache.set(key, {
+        config: cached?.config ?? null,
+        promise,
+        timestamp: now
+      });
       try {
-        const fresh = await promise;
-        setData(fresh);
-        setError(null);
-        return fresh;
-      } catch (err) {
-        setError(err instanceof Error ? err : new Error("Failed to fetch limits"));
-        return null;
+        const value = await promise;
+        if (seq !== requestSeq.current) return;
+        autoRechargeCache.set(key, { config: value, promise: null, timestamp: Date.now() });
+        setConfig(value);
+      } catch (caught) {
+        if (seq !== requestSeq.current) return;
+        const err = caught instanceof Error ? caught : new Error(String(caught));
+        autoRechargeCache.set(key, { config: null, promise: null, timestamp: Date.now() });
+        setError(err);
       } finally {
-        setLoading(false);
+        if (seq === requestSeq.current) {
+          setLoading(false);
+        }
       }
     },
-    []
+    [_config, key]
   );
-  const fetchLimits = (0, import_react41.useCallback)(
-    async (force) => {
-      if (!productRef || !enabled || !transport.getLimits) {
-        setLoading(false);
-        return;
-      }
-      const key = cacheKey(customerRef, productRef, meterName);
-      const cached = limitsCache.get(key);
-      const now = Date.now();
-      if (cached?.promise) {
-        await attachToFetch(cached.promise);
-        return;
-      }
-      if (!force && cached?.data && now - cached.timestamp < CACHE_TTL_MS) {
-        setData(cached.data);
-        setLoading(false);
-        setError(null);
-        return;
+  (0, import_react41.useEffect)(() => {
+    void load();
+  }, [load]);
+  const refresh = (0, import_react41.useCallback)(
+    async (force = true) => {
+      await load(force);
+    },
+    [load]
+  );
+  const save = (0, import_react41.useCallback)(
+    async (input) => {
+      const transport = _config?.transport ?? createHttpTransport(_config);
+      if (!transport.saveAutoRecharge) {
+        throw new Error("saveAutoRecharge is not available on this transport");
       }
-      const promise = transport.getLimits({ productRef, meterName });
-      limitsCache.set(key, { data: cached?.data ?? null, timestamp: now, promise });
-      const fresh = await attachToFetch(promise);
-      if (fresh !== null) {
-        limitsCache.set(key, { data: fresh, timestamp: Date.now(), promise: null });
-      } else {
-        limitsCache.delete(key);
+      setSaving(true);
+      setError(null);
+      const seq = ++requestSeq.current;
+      try {
+        const result = await transport.saveAutoRecharge(input);
+        if (seq !== requestSeq.current) return result;
+        const nextConfig = mergeAutoRechargeConfig(result.config, result.display);
+        autoRechargeCache.set(key, {
+          config: nextConfig,
+          promise: null,
+          timestamp: Date.now()
+        });
+        setConfig(nextConfig);
+        return result;
+      } catch (caught) {
+        const err = caught instanceof Error ? caught : new Error(String(caught));
+        setError(err);
+        throw err;
+      } finally {
+        setSaving(false);
       }
     },
-    [transport, customerRef, productRef, meterName, enabled, attachToFetch]
+    [_config, key]
   );
-  (0, import_react41.useEffect)(() => {
-    fetchLimits(false);
-  }, [fetchLimits]);
-  const prevPurchasesRef = (0, import_react41.useRef)(null);
-  (0, import_react41.useEffect)(() => {
-    if (prevPurchasesRef.current !== null && prevPurchasesRef.current !== purchase.purchases) {
-      fetchLimits(true).catch(() => {
-      });
+  const disable = (0, import_react41.useCallback)(async () => {
+    const transport = _config?.transport ?? createHttpTransport(_config);
+    if (!transport.disableAutoRecharge) {
+      throw new Error("disableAutoRecharge is not available on this transport");
     }
-    prevPurchasesRef.current = purchase.purchases;
-  }, [purchase.purchases, fetchLimits]);
-  const refetch = (0, import_react41.useCallback)(() => fetchLimits(true), [fetchLimits]);
-  const adjustRemaining = (0, import_react41.useCallback)(
-    (delta) => {
-      if (!productRef || !enabled) return;
-      const key = cacheKey(customerRef, productRef, meterName);
-      setData((prev) => {
-        const cached = limitsCache.get(key);
-        const baseline = prev ?? cached?.data ?? null;
-        if (!baseline) return prev;
-        const next = {
-          ...baseline,
-          remaining: Math.max(0, baseline.remaining + delta)
-          // Don't optimistically flip `withinLimits` — paywall gating
-          // can hinge on factors beyond `remaining > 0`
-          // (activationRequired, etc.). Let the trailing refetch
-          // confirm.
-        };
-        limitsCache.set(key, {
-          data: next,
-          timestamp: Date.now(),
-          promise: cached?.promise ?? null
+    setDisabling(true);
+    setError(null);
+    const seq = ++requestSeq.current;
+    try {
+      const result = await transport.disableAutoRecharge();
+      if (seq === requestSeq.current) {
+        setConfig((current) => {
+          const disabledConfig = current ? { ...current, enabled: false } : null;
+          autoRechargeCache.set(key, {
+            config: disabledConfig,
+            promise: null,
+            timestamp: Date.now()
+          });
+          return disabledConfig;
         });
-        return next;
-      });
-      if (optimisticTimerRef.current) clearTimeout(optimisticTimerRef.current);
-      optimisticTimerRef.current = setTimeout(() => {
-        optimisticTimerRef.current = null;
-        fetchLimits(true).catch(() => {
+        await refresh(true);
+        setConfig((current) => {
+          const disabledConfig = current ? { ...current, enabled: false } : null;
+          autoRechargeCache.set(key, {
+            config: disabledConfig,
+            promise: null,
+            timestamp: Date.now()
+          });
+          return disabledConfig;
         });
-      }, OPTIMISTIC_GRACE_MS);
-    },
-    [customerRef, productRef, meterName, enabled, fetchLimits]
-  );
-  return {
-    remaining: data?.remaining ?? null,
-    withinLimits: data?.withinLimits ?? null,
-    meterName: data?.meterName ?? null,
-    activationRequired: data?.activationRequired ?? null,
-    loading,
-    error,
-    refetch,
-    adjustRemaining
-  };
+      }
+      return result;
+    } catch (caught) {
+      const err = caught instanceof Error ? caught : new Error(String(caught));
+      setError(err);
+      throw err;
+    } finally {
+      setDisabling(false);
+    }
+  }, [_config, key, refresh]);
+  return { config, loading, saving, disabling, error, refresh, save, disable };
 }
 
-// src/hooks/useAutoActivateFreePlan.ts
-var import_react42 = require("react");
-function useAutoActivateFreePlan(options) {
-  const { productRef, enabled = true, onActivated } = options;
-  const { customerRef } = useCustomer();
-  const { activationRequired, refetch: refetchLimits } = useLimits({
-    productRef,
-    enabled
+// src/primitives/autoRechargeActivation.ts
+var defaultSleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+async function waitForAutoRechargeActivation({
+  refresh,
+  getStatus,
+  attempts = 5,
+  delayMs = 800,
+  sleep = defaultSleep
+}) {
+  for (let attempt = 0; attempt < attempts; attempt++) {
+    await refresh(true);
+    if (getStatus() === "active") return true;
+    if (attempt < attempts - 1) await sleep(delayMs);
+  }
+  return getStatus() === "active";
+}
+
+// src/primitives/setupIntentReturn.ts
+var SETUP_INTENT_PARAMS = ["setup_intent", "setup_intent_client_secret", "redirect_status"];
+function readSetupIntentClientSecret(search) {
+  return new URLSearchParams(search).get("setup_intent_client_secret");
+}
+function stripSetupIntentParams() {
+  if (typeof window === "undefined") return;
+  const url = new URL(window.location.href);
+  let changed = false;
+  for (const param of SETUP_INTENT_PARAMS) {
+    if (url.searchParams.has(param)) {
+      url.searchParams.delete(param);
+      changed = true;
+    }
+  }
+  if (!changed) return;
+  const query = url.searchParams.toString();
+  window.history.replaceState({}, "", `${url.pathname}${query ? `?${query}` : ""}${url.hash}`);
+}
+
+// src/utils/credit-estimation.ts
+var import_core3 = require("@solvapay/core");
+function estimateCredits(resolvedAmountMajor, currency, creditsPerMinorUnit, displayExchangeRate) {
+  if (resolvedAmountMajor == null || resolvedAmountMajor <= 0) return null;
+  if (creditsPerMinorUnit == null || creditsPerMinorUnit <= 0) return null;
+  const rate = displayExchangeRate ?? 1;
+  const resolvedAmountMinor = Math.round(resolvedAmountMajor * getMinorUnitsPerMajor(currency));
+  return Math.round(resolvedAmountMinor / rate * creditsPerMinorUnit);
+}
+function estimateCurrencyMajorFromCredits(credits, currency, creditsPerMinorUnit, displayExchangeRate) {
+  if (credits == null || credits <= 0) return null;
+  if (creditsPerMinorUnit == null || creditsPerMinorUnit <= 0) return null;
+  const rate = displayExchangeRate ?? 1;
+  const displayMinor = (0, import_core3.creditsToDisplayMinorUnits)({
+    credits,
+    creditsPerMinorUnit,
+    displayExchangeRate: rate,
+    displayCurrency: currency
   });
-  const { plans } = usePlans({ productRef });
-  const { activate, error: activationError } = useActivation();
-  const freePlan = (0, import_react42.useMemo)(
-    () => plans.find((p) => p.requiresPayment === false && (p.freeUnits ?? 0) > 0),
-    [plans]
-  );
-  const attemptedKeyRef = (0, import_react42.useRef)(null);
-  const [activated, setActivated] = (0, import_react42.useState)(false);
-  const onActivatedRef = (0, import_react42.useRef)(onActivated);
-  (0, import_react42.useEffect)(() => {
-    onActivatedRef.current = onActivated;
-  }, [onActivated]);
-  (0, import_react42.useEffect)(() => {
-    attemptedKeyRef.current = null;
-    setActivated(false);
-  }, [customerRef, productRef]);
-  const shouldActivate = enabled && activationRequired === true && Boolean(productRef) && Boolean(freePlan?.reference);
+  if (displayMinor === null) return null;
+  return displayMinor / getMinorUnitsPerMajor(currency);
+}
+
+// src/helpers/stripe-minimums.ts
+var STRIPE_MINIMUM_MINOR = {
+  USD: 50,
+  EUR: 50,
+  GBP: 30,
+  SEK: 300,
+  NOK: 300,
+  DKK: 250,
+  CHF: 50,
+  CAD: 50,
+  AUD: 50,
+  JPY: 50,
+  KRW: 500
+};
+var DEFAULT_MINIMUM_MINOR = 50;
+function getStripeMinimumMinor(currency) {
+  return STRIPE_MINIMUM_MINOR[currency.toUpperCase()] ?? DEFAULT_MINIMUM_MINOR;
+}
+
+// src/helpers/auto-recharge-form.ts
+var DEFAULT_VALIDATION_MESSAGES = {
+  invalidThreshold: "Enter a valid balance threshold.",
+  thresholdTooLow: "Balance threshold must be greater than zero.",
+  minTopupAmount: "Top-up amount must be at least {amount}.",
+  topupBelowThreshold: "Top-up amount must be at least your balance threshold ({amount})."
+};
+function amountAnchors(thresholdValue, topupValue, unit = "currency") {
+  return {
+    thresholdBaseValue: thresholdValue,
+    thresholdBaseUnit: unit,
+    topupBaseValue: topupValue,
+    topupBaseUnit: unit
+  };
+}
+function createDefaultAutoRechargeForm(currency, defaultTopupMajor, defaultThresholdMajor) {
+  const topup = defaultTopupMajor != null && defaultTopupMajor > 0 ? String(defaultTopupMajor) : "10";
+  const threshold = defaultThresholdMajor != null && defaultThresholdMajor >= 0 ? String(defaultThresholdMajor) : "5";
+  return {
+    enabled: false,
+    thresholdAmountMajor: threshold,
+    thresholdUnit: "currency",
+    topupAmountMajor: topup,
+    topupUnit: "currency",
+    ...amountAnchors(threshold, topup, "currency")
+  };
+}
+function parsePositiveNumber(value) {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) return null;
+  const parsed = Number(trimmed);
+  if (!Number.isFinite(parsed) || parsed <= 0) return null;
+  return parsed;
+}
+function parseNonNegativeNumber(value) {
+  const trimmed = value.trim();
+  if (trimmed.length === 0) return null;
+  const parsed = Number(trimmed);
+  if (!Number.isFinite(parsed) || parsed < 0) return null;
+  return parsed;
+}
+function validateAutoRechargeForm(form, currency, conversion, messages = DEFAULT_VALIDATION_MESSAGES) {
+  if (!form.enabled) {
+    return {
+      ok: true,
+      payload: {
+        enabled: false,
+        triggerType: "balance",
+        currency: currency.toUpperCase()
+      }
+    };
+  }
+  const payload = {
+    enabled: true,
+    triggerType: "balance",
+    currency: currency.toUpperCase()
+  };
+  const minorPerMajor = getMinorUnitsPerMajor(currency);
+  const minMinor = getStripeMinimumMinor(currency);
+  const thresholdRaw = parseNonNegativeNumber(form.thresholdAmountMajor);
+  if (thresholdRaw == null) {
+    return { ok: false, error: messages.invalidThreshold };
+  }
+  if (form.thresholdUnit === "credits") {
+    const major = estimateCurrencyMajorFromCredits(
+      thresholdRaw,
+      currency,
+      conversion?.creditsPerMinorUnit,
+      conversion?.displayExchangeRate
+    );
+    if (major == null) {
+      return { ok: false, error: messages.invalidThreshold };
+    }
+    payload.thresholdAmountMajor = major;
+  } else {
+    payload.thresholdAmountMajor = thresholdRaw;
+  }
+  if (payload.thresholdAmountMajor == null || payload.thresholdAmountMajor <= 0) {
+    return { ok: false, error: messages.thresholdTooLow };
+  }
+  const amountRaw = parsePositiveNumber(form.topupAmountMajor);
+  if (amountRaw == null) {
+    return {
+      ok: false,
+      error: interpolate(messages.minTopupAmount, {
+        amount: formatPrice(minMinor, currency, { free: "" })
+      })
+    };
+  }
+  const amountMajor = form.topupUnit === "credits" ? estimateCurrencyMajorFromCredits(
+    amountRaw,
+    currency,
+    conversion?.creditsPerMinorUnit,
+    conversion?.displayExchangeRate
+  ) : amountRaw;
+  if (amountMajor == null || Math.round(amountMajor * minorPerMajor) < minMinor) {
+    return {
+      ok: false,
+      error: interpolate(messages.minTopupAmount, {
+        amount: formatPrice(minMinor, currency, { free: "" })
+      })
+    };
+  }
+  payload.topupAmountMajor = amountMajor;
+  if (amountMajor < payload.thresholdAmountMajor) {
+    return {
+      ok: false,
+      error: interpolate(messages.topupBelowThreshold, {
+        amount: formatPrice(
+          Math.round(payload.thresholdAmountMajor * minorPerMajor),
+          currency,
+          { free: "" }
+        )
+      })
+    };
+  }
+  return { ok: true, payload };
+}
+function triggerAmountMajorFromConfig(config) {
+  const topupCurrency = config.topup.currency.toUpperCase();
+  const minorPerMajor = getMinorUnitsPerMajor(topupCurrency);
+  const { thresholdAmountMinor } = config.trigger;
+  if (!Number.isFinite(thresholdAmountMinor) || thresholdAmountMinor < 0) {
+    return null;
+  }
+  return thresholdAmountMinor / minorPerMajor;
+}
+function configToAutoRechargeInput(config, options) {
+  if (!config.enabled) return null;
+  const display = options?.display ?? config.display;
+  const currency = (display?.currency ?? config.topup.currency ?? options?.currency ?? "USD").toUpperCase();
+  if (display?.thresholdAmountMajor != null && display.topupAmountMajor != null) {
+    return {
+      enabled: true,
+      triggerType: "balance",
+      thresholdAmountMajor: display.thresholdAmountMajor,
+      topupAmountMajor: display.topupAmountMajor,
+      currency
+    };
+  }
+  const thresholdMajor = triggerAmountMajorFromConfig(config);
+  const topupAmountMajor = config.topup.amountMinor / getMinorUnitsPerMajor(currency);
+  if (thresholdMajor == null || !Number.isFinite(topupAmountMajor) || topupAmountMajor <= 0) {
+    return null;
+  }
+  return {
+    enabled: true,
+    triggerType: "balance",
+    thresholdAmountMajor: Math.max(0, thresholdMajor),
+    topupAmountMajor,
+    currency
+  };
+}
+function configToForm(config, currency) {
+  const base = createDefaultAutoRechargeForm(currency);
+  const display = config.display;
+  if (display?.thresholdAmountMajor != null && display.topupAmountMajor != null) {
+    const thresholdStr2 = String(Math.max(0, display.thresholdAmountMajor));
+    const topupStr2 = String(display.topupAmountMajor);
+    return {
+      ...base,
+      enabled: config.enabled,
+      thresholdAmountMajor: thresholdStr2,
+      topupAmountMajor: topupStr2,
+      ...amountAnchors(thresholdStr2, topupStr2, "currency")
+    };
+  }
+  const thresholdMajor = triggerAmountMajorFromConfig(config);
+  const thresholdStr = thresholdMajor != null ? String(Math.max(0, thresholdMajor)) : "0";
+  const topupStr = String(config.topup.amountMinor / getMinorUnitsPerMajor(currency));
+  return {
+    ...base,
+    enabled: config.enabled,
+    thresholdAmountMajor: thresholdStr,
+    topupAmountMajor: topupStr,
+    ...amountAnchors(thresholdStr, topupStr, "currency")
+  };
+}
+function formatAmountWithUnit(value, unit, currency) {
+  const num = Number(value);
+  if (!value || !Number.isFinite(num)) return "\u2014";
+  if (unit === "credits") {
+    return `${new Intl.NumberFormat().format(num)} credits`;
+  }
+  return formatPrice(Math.round(num * getMinorUnitsPerMajor(currency)), currency, { free: "" });
+}
+function buildSummaryLine(form, currency) {
+  if (!form.enabled) return null;
+  const thresholdDisplay = formatAmountWithUnit(
+    form.thresholdAmountMajor,
+    form.thresholdUnit,
+    currency
+  );
+  const fixedDisplay = formatAmountWithUnit(form.topupAmountMajor, form.topupUnit, currency);
+  return `When my balance falls below ${thresholdDisplay}, add ${fixedDisplay}.`;
+}
+function convertAmountForUnitFlip(value, fromUnit, toUnit, currency, creditsPerMinorUnit, displayExchangeRate) {
+  if (fromUnit === toUnit) return value;
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed) || parsed <= 0) return value;
+  if (fromUnit === "currency" && toUnit === "credits") {
+    const credits = estimateCredits(parsed, currency, creditsPerMinorUnit, displayExchangeRate);
+    return credits != null ? String(credits) : value;
+  }
+  const major = estimateCurrencyMajorFromCredits(
+    parsed,
+    currency,
+    creditsPerMinorUnit,
+    displayExchangeRate
+  );
+  return major != null ? String(major) : value;
+}
+function flipUnitValue(anchor, targetUnit, currency, creditsPerMinorUnit, displayExchangeRate) {
+  if (targetUnit === anchor.unit) {
+    return { value: anchor.value, unit: anchor.unit };
+  }
+  const converted = convertAmountForUnitFlip(
+    anchor.value,
+    anchor.unit,
+    targetUnit,
+    currency,
+    creditsPerMinorUnit,
+    displayExchangeRate
+  );
+  return { value: converted, unit: targetUnit };
+}
+
+// src/primitives/AutoRecharge.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var AutoRechargeContext = (0, import_react42.createContext)(null);
+function useAutoRechargeCtx(part) {
+  const ctx = (0, import_react42.useContext)(AutoRechargeContext);
+  if (!ctx) {
+    throw new Error(`AutoRecharge.${part} must be rendered inside <AutoRecharge.Root>.`);
+  }
+  return ctx;
+}
+function getCurrencySymbol2(currency) {
+  try {
+    const parts = new Intl.NumberFormat("en", { style: "currency", currency }).formatToParts(0);
+    const sym = parts.find((p) => p.type === "currency");
+    return sym?.value ?? currency.toUpperCase();
+  } catch {
+    return currency.toUpperCase();
+  }
+}
+var stripePromiseCache3 = /* @__PURE__ */ new Map();
+function getStripeCacheKey3(publishableKey, accountId) {
+  return accountId ? `${publishableKey}:${accountId}` : publishableKey;
+}
+var Root11 = (0, import_react42.forwardRef)(function AutoRechargeRoot({
+  currency = "USD",
+  defaultThresholdAmountMajor,
+  defaultTopupAmountMajor,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  onSetupRequired,
+  onSaved,
+  onDisabled,
+  deferCardSetup = false,
+  onPendingConfig,
+  asChild,
+  children,
+  className,
+  ...rest
+}, forwardedRef) {
+  const solva = (0, import_react42.useContext)(SolvaPayContext);
+  if (!solva) throw new MissingProviderError("AutoRecharge");
+  const autoRecharge = useAutoRecharge();
+  const { creditsPerMinorUnit, displayExchangeRate } = useBalance();
+  const copy = useCopy();
+  const titleId = (0, import_react42.useId)();
+  const triggerRef = (0, import_react42.useRef)(null);
+  const defaultTopup = defaultTopupAmountMajor ?? defaultThresholdAmountMajor ?? void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react42.useState)(defaultOpen);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const setOpen = (0, import_react42.useCallback)(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const registerTriggerRef = (0, import_react42.useCallback)((node) => {
+    triggerRef.current = node;
+  }, []);
+  const focusTrigger = (0, import_react42.useCallback)(() => {
+    triggerRef.current?.focus();
+  }, []);
+  const [form, setForm] = (0, import_react42.useState)(
+    () => autoRecharge.config ? configToForm(autoRecharge.config, currency) : createDefaultAutoRechargeForm(currency, defaultTopup)
+  );
+  const [validationError, setValidationError] = (0, import_react42.useState)(null);
+  const [statusMessage, setStatusMessage] = (0, import_react42.useState)(null);
+  const [setup, setSetup] = (0, import_react42.useState)(null);
+  const latestConfigRef = (0, import_react42.useRef)(autoRecharge.config);
+  (0, import_react42.useEffect)(() => {
+    latestConfigRef.current = autoRecharge.config;
+  }, [autoRecharge.config]);
+  (0, import_react42.useEffect)(() => {
+    if (autoRecharge.config) {
+      setForm(configToForm(autoRecharge.config, currency));
+    }
+  }, [autoRecharge.config, currency]);
+  const canToggleUnits = creditsPerMinorUnit != null && creditsPerMinorUnit > 0;
+  const rate = displayExchangeRate ?? 1;
+  const isApproximate = rate !== 1;
+  const emitValidation = (0, import_react42.useCallback)(
+    (next) => {
+      const result = validateAutoRechargeForm(
+        next,
+        currency,
+        { creditsPerMinorUnit, displayExchangeRate },
+        copy.autoRecharge
+      );
+      if (!result.ok) {
+        setValidationError(result.error);
+        return null;
+      }
+      setValidationError(null);
+      return result.payload;
+    },
+    [currency, creditsPerMinorUnit, displayExchangeRate, copy.autoRecharge]
+  );
+  const updateForm = (0, import_react42.useCallback)(
+    (patch) => {
+      setForm((prev) => {
+        const next = { ...prev, ...patch };
+        emitValidation(next);
+        return next;
+      });
+    },
+    [emitValidation]
+  );
+  const resetForm = (0, import_react42.useCallback)(() => {
+    if (autoRecharge.config) {
+      setForm(configToForm(autoRecharge.config, currency));
+    } else {
+      setForm(createDefaultAutoRechargeForm(currency, defaultTopup));
+    }
+    setValidationError(null);
+  }, [autoRecharge.config, currency, defaultTopup]);
+  const flipUnit = (0, import_react42.useCallback)(
+    (valueKey, unitKey, baseValueKey, baseUnitKey, currentUnit) => {
+      const nextUnit = currentUnit === "currency" ? "credits" : "currency";
+      setForm((prev) => {
+        const anchor = { value: prev[baseValueKey], unit: prev[baseUnitKey] };
+        const flipped = flipUnitValue(
+          anchor,
+          nextUnit,
+          currency,
+          creditsPerMinorUnit,
+          displayExchangeRate
+        );
+        const next = {
+          ...prev,
+          [unitKey]: flipped.unit,
+          [valueKey]: flipped.value
+        };
+        emitValidation(next);
+        return next;
+      });
+    },
+    [currency, creditsPerMinorUnit, displayExchangeRate, emitValidation]
+  );
+  const fixedTopupHint = (0, import_react42.useMemo)(() => {
+    const parsed = Number(form.topupAmountMajor);
+    if (!Number.isFinite(parsed) || parsed <= 0) return null;
+    if (form.topupUnit === "currency") {
+      const credits = estimateCredits(parsed, currency, creditsPerMinorUnit, displayExchangeRate);
+      if (credits == null) return null;
+      return { credits, approximate: isApproximate };
+    }
+    const major = estimateCurrencyMajorFromCredits(
+      parsed,
+      currency,
+      creditsPerMinorUnit,
+      displayExchangeRate
+    );
+    if (major == null) return null;
+    return { major, approximate: isApproximate };
+  }, [
+    form.topupAmountMajor,
+    form.topupUnit,
+    currency,
+    creditsPerMinorUnit,
+    displayExchangeRate,
+    isApproximate
+  ]);
+  const summaryLine = (0, import_react42.useMemo)(() => buildSummaryLine(form, currency), [form, currency]);
+  const savedSummaryLine = (0, import_react42.useMemo)(() => {
+    if (!autoRecharge.config?.enabled) return null;
+    return buildSummaryLine(
+      configToForm(autoRecharge.config, currency),
+      currency
+    );
+  }, [autoRecharge.config, currency]);
+  const save = (0, import_react42.useCallback)(async () => {
+    const payload = emitValidation(form);
+    if (!payload) return;
+    const saveInput = deferCardSetup ? { ...payload, deferSetupIntent: true } : payload;
+    const result = await autoRecharge.save(saveInput);
+    if (result.setupClientSecret) {
+      setSetup(result);
+      setStatusMessage(copy.autoRecharge.setupRequiredMessage);
+      await onSetupRequired?.(result);
+      return;
+    }
+    setSetup(null);
+    if (deferCardSetup) {
+      await onPendingConfig?.(payload);
+    }
+    setStatusMessage(
+      payload.enabled ? copy.autoRecharge.savedMessage : copy.autoRecharge.disabledMessage
+    );
+    setOpen(false);
+    await onSaved?.(result);
+  }, [
+    autoRecharge,
+    copy.autoRecharge,
+    deferCardSetup,
+    emitValidation,
+    form,
+    onPendingConfig,
+    onSaved,
+    onSetupRequired,
+    setOpen
+  ]);
+  const disable = (0, import_react42.useCallback)(async () => {
+    await autoRecharge.disable();
+    setStatusMessage(copy.autoRecharge.disabledMessage);
+    setSetup(null);
+    await onDisabled?.();
+  }, [autoRecharge, copy.autoRecharge, onDisabled]);
+  const completeSetup = (0, import_react42.useCallback)(async () => {
+    const activated = await waitForAutoRechargeActivation({
+      refresh: autoRecharge.refresh,
+      getStatus: () => latestConfigRef.current?.status
+    });
+    setSetup(null);
+    if (!form.enabled) return;
+    if (activated) {
+      setStatusMessage(copy.autoRecharge.savedMessage);
+      setOpen(false);
+    } else {
+      setStatusMessage(copy.autoRecharge.setupAwaitingConfirmation);
+    }
+  }, [autoRecharge, copy.autoRecharge, form.enabled, setOpen]);
+  const dataState = setup ? "setup" : autoRecharge.error ? "error" : autoRecharge.loading ? "loading" : autoRecharge.saving ? "saving" : autoRecharge.disabling ? "disabling" : "idle";
+  const ctx = (0, import_react42.useMemo)(
+    () => ({
+      form,
+      updateForm,
+      resetForm,
+      validationError,
+      currency,
+      config: autoRecharge.config,
+      loading: autoRecharge.loading,
+      saving: autoRecharge.saving,
+      disabling: autoRecharge.disabling,
+      error: autoRecharge.error,
+      statusMessage,
+      setup,
+      dataState,
+      creditsPerMinorUnit,
+      displayExchangeRate,
+      canToggleUnits,
+      isApproximate,
+      summaryLine,
+      savedSummaryLine,
+      deferCardSetup,
+      fixedTopupHint: fixedTopupHint && "credits" in fixedTopupHint ? String(fixedTopupHint.credits) : fixedTopupHint && "major" in fixedTopupHint ? formatPrice(
+        Math.round(fixedTopupHint.major * getMinorUnitsPerMajor(currency)),
+        currency,
+        { free: "" }
+      ) : null,
+      open,
+      setOpen,
+      titleId,
+      registerTriggerRef,
+      focusTrigger,
+      save,
+      disable,
+      completeSetup,
+      flipUnit
+    }),
+    [
+      form,
+      updateForm,
+      resetForm,
+      validationError,
+      currency,
+      autoRecharge.config,
+      autoRecharge.loading,
+      autoRecharge.saving,
+      autoRecharge.disabling,
+      autoRecharge.error,
+      statusMessage,
+      setup,
+      dataState,
+      creditsPerMinorUnit,
+      displayExchangeRate,
+      canToggleUnits,
+      isApproximate,
+      summaryLine,
+      savedSummaryLine,
+      deferCardSetup,
+      fixedTopupHint,
+      open,
+      setOpen,
+      titleId,
+      registerTriggerRef,
+      focusTrigger,
+      save,
+      disable,
+      completeSetup,
+      flipUnit
+    ]
+  );
+  const Comp = asChild ? Slot : "section";
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AutoRechargeContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    Comp,
+    {
+      ref: forwardedRef,
+      className,
+      "aria-label": "Automatic credit top-up",
+      "data-solvapay-auto-recharge": "",
+      "data-state": dataState,
+      ...rest,
+      children
+    }
+  ) });
+});
+var Loading8 = (0, import_react42.forwardRef)(
+  function AutoRechargeLoading({ className, children, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("Loading");
+    if (!ctx.loading) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { ref: forwardedRef, className, "data-solvapay-auto-recharge-loading": "", ...rest, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Spinner, { size: "sm" }),
+      " Loading auto-recharge settings\u2026"
+    ] }) });
+  }
+);
+var Card2 = (0, import_react42.forwardRef)(function AutoRechargeCard({ className, children, ...rest }, forwardedRef) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "section",
+    {
+      ref: forwardedRef,
+      className,
+      "data-solvapay-auto-recharge-card": "",
+      ...rest,
+      children
+    }
+  );
+});
+var CardHeading = (0, import_react42.forwardRef)(
+  function AutoRechargeCardHeading({ className, children, ...rest }, forwardedRef) {
+    const copy = useCopy();
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "h3",
+      {
+        ref: forwardedRef,
+        className,
+        "data-solvapay-auto-recharge-card-heading": "",
+        ...rest,
+        children: children ?? copy.autoRecharge.heading
+      }
+    );
+  }
+);
+var CardSummary = (0, import_react42.forwardRef)(
+  function AutoRechargeCardSummary({ className, children, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("CardSummary");
+    const copy = useCopy();
+    const text = ctx.savedSummaryLine ?? copy.autoRecharge.notConfiguredHint;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "p",
+      {
+        ref: forwardedRef,
+        className,
+        "data-solvapay-auto-recharge-card-summary": "",
+        ...rest,
+        children: children ?? text
+      }
+    );
+  }
+);
+var Trigger = (0, import_react42.forwardRef)(function AutoRechargeTrigger({ asChild, onClick, children, className, ...rest }, forwardedRef) {
+  const ctx = useAutoRechargeCtx("Trigger");
+  const copy = useCopy();
+  const hasExistingConfig = Boolean(ctx.config?.enabled);
+  const label = hasExistingConfig ? copy.autoRecharge.modifyTriggerLabel : copy.autoRecharge.setupTriggerLabel;
+  const setRefs = (node) => {
+    ctx.registerTriggerRef(node);
+    if (typeof forwardedRef === "function") {
+      forwardedRef(node);
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+  };
+  const commonProps = {
+    "data-solvapay-auto-recharge-trigger": "",
+    type: "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": ctx.open,
+    disabled: ctx.loading,
+    onClick: composeEventHandlers(onClick, (event) => {
+      event.preventDefault();
+      ctx.resetForm();
+      ctx.setOpen(true);
+    }),
+    className,
+    ...rest
+  };
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Slot, { ref: setRefs, ...commonProps, children: children ?? label });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { ref: setRefs, ...commonProps, children: children ?? label });
+});
+var Overlay = (0, import_react42.forwardRef)(
+  function AutoRechargeOverlay({ onClick, className, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("Overlay");
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "div",
+      {
+        ref: forwardedRef,
+        className,
+        "data-solvapay-auto-recharge-overlay": "",
+        "aria-hidden": "true",
+        onClick: composeEventHandlers(onClick, () => {
+          ctx.resetForm();
+          ctx.setOpen(false);
+          ctx.focusTrigger();
+        }),
+        ...rest
+      }
+    );
+  }
+);
+var Content = (0, import_react42.forwardRef)(function AutoRechargeContent({ className, children, ...rest }, forwardedRef) {
+  const ctx = useAutoRechargeCtx("Content");
+  const panelRef = (0, import_react42.useRef)(null);
+  (0, import_react42.useEffect)(() => {
+    if (!ctx.open) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        ctx.resetForm();
+        ctx.setOpen(false);
+        ctx.focusTrigger();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    const focusTarget = panelRef.current?.querySelector(
+      'button:not([disabled]), input:not([disabled]), [href], [tabindex]:not([tabindex="-1"])'
+    );
+    focusTarget?.focus();
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [ctx.open, ctx.resetForm, ctx.setOpen, ctx.focusTrigger]);
+  if (!ctx.open || typeof document === "undefined") return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { "data-solvapay-auto-recharge-portal": "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Overlay, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        "div",
+        {
+          ref: (node) => {
+            panelRef.current = node;
+            if (typeof forwardedRef === "function") {
+              forwardedRef(node);
+            } else if (forwardedRef) {
+              forwardedRef.current = node;
+            }
+          },
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": ctx.titleId,
+          className,
+          "data-solvapay-auto-recharge-content": "",
+          ...rest,
+          children
+        }
+      )
+    ] }),
+    document.body
+  );
+});
+var Title = (0, import_react42.forwardRef)(
+  function AutoRechargeTitle({ className, children, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("Title");
+    const copy = useCopy();
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "h2",
+      {
+        ref: forwardedRef,
+        id: ctx.titleId,
+        className,
+        "data-solvapay-auto-recharge-title": "",
+        ...rest,
+        children: children ?? copy.autoRecharge.settingsHeading
+      }
+    );
+  }
+);
+var EnableQuestion = (0, import_react42.forwardRef)(
+  function AutoRechargeEnableQuestion({ className, children, ...rest }, forwardedRef) {
+    const copy = useCopy();
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { ref: forwardedRef, className, "data-solvapay-auto-recharge-question": "", ...rest, children: children ?? copy.autoRecharge.enableQuestion });
+  }
+);
+var EnableSentence = (0, import_react42.forwardRef)(
+  function AutoRechargeEnableSentence({ className, children, ...rest }, forwardedRef) {
+    const copy = useCopy();
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "label",
+      {
+        ref: forwardedRef,
+        className,
+        "data-solvapay-auto-recharge-enable-sentence": "",
+        ...rest,
+        children: children ?? copy.autoRecharge.enableSentence
+      }
+    );
+  }
+);
+var EnableRow = (0, import_react42.forwardRef)(
+  function AutoRechargeEnableRow({ className, children, ...rest }, forwardedRef) {
+    const enableId = (0, import_react42.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "div",
+      {
+        ref: forwardedRef,
+        className,
+        "data-solvapay-auto-recharge-enable-row": "",
+        ...rest,
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(EnableSwitch, { appearance: "checkbox", id: enableId }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(EnableSentence, { htmlFor: enableId })
+        ] })
+      }
+    );
+  }
+);
+var CancelButton = (0, import_react42.forwardRef)(
+  function AutoRechargeCancelButton({ asChild, onClick, children, className, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("CancelButton");
+    const copy = useCopy();
+    const commonProps = {
+      "data-solvapay-auto-recharge-cancel": "",
+      type: "button",
+      onClick: composeEventHandlers(onClick, (event) => {
+        event.preventDefault();
+        ctx.resetForm();
+        ctx.setOpen(false);
+        ctx.focusTrigger();
+      }),
+      className,
+      ...rest
+    };
+    if (asChild) {
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        Slot,
+        {
+          ref: forwardedRef,
+          ...commonProps,
+          children: children ?? copy.autoRecharge.cancelButton
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { ref: forwardedRef, ...commonProps, children: children ?? copy.autoRecharge.cancelButton });
+  }
+);
+var Header = (0, import_react42.forwardRef)(
+  function AutoRechargeHeader({ className, ...rest }, forwardedRef) {
+    const copy = useCopy();
+    const headingId = (0, import_react42.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      "header",
+      {
+        ref: forwardedRef,
+        className,
+        "data-solvapay-auto-recharge-header": "",
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("section", { "data-solvapay-auto-recharge-heading-group": "", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h3", { id: headingId, "data-solvapay-auto-recharge-heading": "", children: copy.autoRecharge.heading }),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Description, {})
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(EnableSwitch, { "aria-labelledby": headingId })
+        ]
+      }
+    );
+  }
+);
+var Description = (0, import_react42.forwardRef)(
+  function AutoRechargeDescription({ className, children, ...rest }, forwardedRef) {
+    const copy = useCopy();
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "p",
+      {
+        ref: forwardedRef,
+        className,
+        "data-solvapay-auto-recharge-description": "",
+        ...rest,
+        children: children ?? copy.autoRecharge.description
+      }
+    );
+  }
+);
+var EnableSwitch = (0, import_react42.forwardRef)(
+  function AutoRechargeEnableSwitch({ asChild, appearance = "switch", onChange, className, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("EnableSwitch");
+    const copy = useCopy();
+    const commonProps = {
+      "data-solvapay-auto-recharge-enable": "",
+      "data-appearance": appearance,
+      type: "checkbox",
+      ...appearance === "switch" ? { role: "switch", "aria-checked": ctx.form.enabled } : {},
+      checked: ctx.form.enabled,
+      "aria-label": copy.autoRecharge.enableLabel,
+      disabled: ctx.loading || ctx.saving || ctx.disabling || !!ctx.setup,
+      onChange: composeEventHandlers(onChange, (event) => {
+        ctx.updateForm({ enabled: event.currentTarget.checked });
+      }),
+      className,
+      ...rest
+    };
+    if (asChild) {
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        Slot,
+        {
+          ref: forwardedRef,
+          ...commonProps
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { ref: forwardedRef, ...commonProps });
+  }
+);
+var Fields = (0, import_react42.forwardRef)(
+  function AutoRechargeFields({ className, children, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("Fields");
+    const copy = useCopy();
+    if (!ctx.form.enabled) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      "fieldset",
+      {
+        ref: forwardedRef,
+        className,
+        disabled: ctx.saving || ctx.disabling,
+        "data-solvapay-auto-recharge-fields": "",
+        "data-solvapay-auto-recharge-body": "",
+        "data-state": "open",
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("legend", { className: "sr-only", children: copy.autoRecharge.heading }),
+          children ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Summary3, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ThresholdField, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TopupField, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ValidationError, {})
+          ] })
+        ]
+      }
+    );
+  }
+);
+var Setup = (0, import_react42.forwardRef)(
+  function AutoRechargeSetup({ className, children, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("Setup");
+    if (!ctx.setup?.setupClientSecret) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "div",
+      {
+        ref: forwardedRef,
+        className,
+        "data-solvapay-auto-recharge-setup-panel": "",
+        ...rest,
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CardSetup, { setup: ctx.setup, onComplete: ctx.completeSetup })
+      }
+    );
+  }
+);
+var Body = (0, import_react42.forwardRef)(
+  function AutoRechargeBody({ className, children, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("Body");
+    if (ctx.setup?.setupClientSecret) {
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Setup, { className });
+    }
+    if (!ctx.form.enabled) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Fields, { ref: forwardedRef, className, ...rest, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Summary3, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ThresholdField, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(TopupField, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ValidationError, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Actions, {})
+    ] }) });
+  }
+);
+var Summary3 = (0, import_react42.forwardRef)(
+  function AutoRechargeSummary({ className, children, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("Summary");
+    if (!ctx.summaryLine) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { ref: forwardedRef, className, "data-solvapay-auto-recharge-summary": "", ...rest, children: children ?? ctx.summaryLine });
+  }
+);
+var AmountField = (0, import_react42.forwardRef)(function AutoRechargeAmountField({ field, showLabel = true, asChild, onChange, className, ...rest }, forwardedRef) {
+  const ctx = useAutoRechargeCtx("AmountField");
+  const copy = useCopy();
+  const fieldConfig = {
+    threshold: {
+      label: copy.autoRecharge.thresholdLabel,
+      ariaLabel: copy.autoRecharge.thresholdAriaLabel,
+      unitToggleLabel: "balance threshold",
+      value: ctx.form.thresholdAmountMajor,
+      unit: ctx.form.thresholdUnit,
+      unitKey: "thresholdUnit",
+      valueKey: "thresholdAmountMajor",
+      baseValueKey: "thresholdBaseValue",
+      baseUnitKey: "thresholdBaseUnit",
+      mode: ctx.form.thresholdUnit === "currency" ? "currency" : "number",
+      onValue: (value) => ctx.updateForm({
+        thresholdAmountMajor: value,
+        thresholdBaseValue: value,
+        thresholdBaseUnit: ctx.form.thresholdUnit
+      })
+    },
+    fixed: {
+      label: copy.autoRecharge.fixedAmountLabel,
+      ariaLabel: copy.autoRecharge.fixedAmountAriaLabel,
+      unitToggleLabel: "fixed top-up amount",
+      value: ctx.form.topupAmountMajor,
+      unit: ctx.form.topupUnit,
+      unitKey: "topupUnit",
+      valueKey: "topupAmountMajor",
+      baseValueKey: "topupBaseValue",
+      baseUnitKey: "topupBaseUnit",
+      mode: ctx.form.topupUnit === "currency" ? "currency" : "number",
+      onValue: (value) => ctx.updateForm({
+        topupAmountMajor: value,
+        topupBaseValue: value,
+        topupBaseUnit: ctx.form.topupUnit
+      })
+    }
+  }[field];
+  const inputId = (0, import_react42.useId)();
+  const prefix = fieldConfig.mode === "currency" ? getCurrencySymbol2(ctx.currency) : void 0;
+  const handleChange = (event) => {
+    const raw = event.target.value;
+    const next = fieldConfig.mode === "currency" ? raw.replace(/[^0-9.]/g, "") : raw.replace(/[^0-9]/g, "");
+    fieldConfig.onValue(next);
+  };
+  const inputProps = {
+    id: inputId,
+    "data-solvapay-auto-recharge-amount": "",
+    "data-field": field,
+    type: "text",
+    inputMode: fieldConfig.mode === "currency" ? "decimal" : "numeric",
+    placeholder: fieldConfig.mode === "currency" ? "0.00" : "0",
+    value: fieldConfig.value,
+    "aria-label": fieldConfig.ariaLabel,
+    onChange: composeEventHandlers(onChange, handleChange),
+    className,
+    ...rest
+  };
+  const slotRef = forwardedRef;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { "data-solvapay-auto-recharge-field": "", "data-field": field, children: [
+    showLabel ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("label", { htmlFor: inputId, children: fieldConfig.label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { "data-solvapay-auto-recharge-amount-row": "", children: [
+      prefix ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { "data-solvapay-auto-recharge-currency-prefix": "", "aria-hidden": "true", children: prefix }) : null,
+      asChild ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Slot, { ref: slotRef, ...inputProps }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("input", { ref: forwardedRef, ...inputProps }),
+      ctx.canToggleUnits ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        UnitToggle,
+        {
+          unit: fieldConfig.unit,
+          fieldLabel: fieldConfig.unitToggleLabel,
+          onToggle: () => ctx.flipUnit(
+            fieldConfig.valueKey,
+            fieldConfig.unitKey,
+            fieldConfig.baseValueKey,
+            fieldConfig.baseUnitKey,
+            fieldConfig.unit
+          )
+        }
+      ) : null
+    ] })
+  ] });
+});
+var ThresholdField = (0, import_react42.forwardRef)(
+  function AutoRechargeThresholdField({ className, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("section", { ref, className, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AmountField, { field: "threshold" }) });
+  }
+);
+var TopupField = (0, import_react42.forwardRef)(
+  function AutoRechargeTopupField({ className, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+      "section",
+      {
+        ref,
+        className,
+        "data-solvapay-auto-recharge-topup-field": "",
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(AmountField, { field: "fixed" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Hint, {})
+        ]
+      }
+    );
+  }
+);
+var UnitToggle = (0, import_react42.forwardRef)(function AutoRechargeUnitToggle({ unit, fieldLabel, onToggle, className, ...rest }, forwardedRef) {
+  const ctx = useAutoRechargeCtx("UnitToggle");
+  const targetUnitLabel = unit === "currency" ? "credits" : "currency";
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "button",
+    {
+      ref: forwardedRef,
+      type: "button",
+      className,
+      "data-solvapay-auto-recharge-unit-toggle": "",
+      "aria-label": `Switch ${fieldLabel} to ${targetUnitLabel}`,
+      onClick: onToggle,
+      ...rest,
+      children: unit === "currency" ? ctx.currency.toUpperCase() : "credits"
+    }
+  );
+});
+var Hint = (0, import_react42.forwardRef)(
+  function AutoRechargeHint({ className, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("Hint");
+    const copy = useCopy();
+    const hint = ctx.fixedTopupHint;
+    if (!hint) return null;
+    const isCreditsHint = ctx.form.topupUnit === "currency";
+    const text = isCreditsHint ? interpolate(
+      ctx.isApproximate ? copy.autoRecharge.creditsPerRechargeApprox : copy.autoRecharge.creditsPerRecharge,
+      { credits: new Intl.NumberFormat().format(Number(hint)) }
+    ) : interpolate(
+      ctx.isApproximate ? copy.autoRecharge.currencyPerRechargeApprox : copy.autoRecharge.currencyPerRecharge,
+      { amount: hint }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { ref: forwardedRef, className, "data-solvapay-auto-recharge-hint": "", ...rest, children: text });
+  }
+);
+var ValidationError = (0, import_react42.forwardRef)(function AutoRechargeValidationError({ className, ...rest }, forwardedRef) {
+  const ctx = useAutoRechargeCtx("ValidationError");
+  if (!ctx.validationError) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "p",
+    {
+      ref: forwardedRef,
+      role: "alert",
+      "aria-live": "polite",
+      className,
+      "data-solvapay-auto-recharge-validation-error": "",
+      ...rest,
+      children: ctx.validationError
+    }
+  );
+});
+var Actions = (0, import_react42.forwardRef)(
+  function AutoRechargeActions({ className, children, ...rest }, forwardedRef) {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "menu",
+      {
+        ref: forwardedRef,
+        className,
+        "data-solvapay-auto-recharge-actions": "",
+        ...rest,
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CancelButton, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SaveButton, {}) })
+        ] })
+      }
+    );
+  }
+);
+var SaveButton = (0, import_react42.forwardRef)(function AutoRechargeSaveButton({ asChild, onClick, children, className, ...rest }, forwardedRef) {
+  const ctx = useAutoRechargeCtx("SaveButton");
+  const copy = useCopy();
+  const dataState = ctx.saving ? "processing" : ctx.validationError ? "disabled" : "idle";
+  const commonProps = {
+    "data-solvapay-auto-recharge-save": "",
+    "data-state": dataState,
+    type: "button",
+    disabled: ctx.saving || ctx.disabling || !!ctx.validationError,
+    "aria-busy": ctx.saving,
+    onClick: composeEventHandlers(onClick, (event) => {
+      event.preventDefault();
+      void ctx.save();
+    }),
+    className,
+    ...rest
+  };
+  const content = ctx.saving ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Spinner, { size: "sm" }),
+    " ",
+    copy.cta.processing
+  ] }) : children ?? copy.autoRecharge.saveButton;
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      Slot,
+      {
+        ref: forwardedRef,
+        ...commonProps,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { ref: forwardedRef, ...commonProps, children: content });
+});
+var DisableButton = (0, import_react42.forwardRef)(
+  function AutoRechargeDisableButton({ asChild, onClick, children, className, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("DisableButton");
+    const copy = useCopy();
+    if (!ctx.config) return null;
+    const commonProps = {
+      "data-solvapay-auto-recharge-disable": "",
+      type: "button",
+      disabled: ctx.saving || ctx.disabling,
+      "aria-busy": ctx.disabling,
+      onClick: composeEventHandlers(onClick, (event) => {
+        event.preventDefault();
+        void ctx.disable();
+      }),
+      className,
+      ...rest
+    };
+    if (asChild) {
+      return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        Slot,
+        {
+          ref: forwardedRef,
+          ...commonProps,
+          children: children ?? copy.autoRecharge.disableButton
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("button", { ref: forwardedRef, ...commonProps, children: children ?? copy.autoRecharge.disableButton });
+  }
+);
+var ErrorSlot7 = (0, import_react42.forwardRef)(
+  function AutoRechargeError({ className, children, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("Error");
+    if (!ctx.error) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "p",
+      {
+        ref: forwardedRef,
+        role: "alert",
+        "aria-live": "polite",
+        className,
+        "data-solvapay-auto-recharge-error": "",
+        ...rest,
+        children: children ?? ctx.error.message
+      }
+    );
+  }
+);
+var StatusMessage = (0, import_react42.forwardRef)(
+  function AutoRechargeStatusMessage({ className, children, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("StatusMessage");
+    if (!ctx.statusMessage) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "p",
+      {
+        ref: forwardedRef,
+        "aria-live": "polite",
+        className,
+        "data-solvapay-auto-recharge-status-message": "",
+        ...rest,
+        children: children ?? ctx.statusMessage
+      }
+    );
+  }
+);
+var Status = (0, import_react42.forwardRef)(
+  function AutoRechargeStatus({ className, ...rest }, forwardedRef) {
+    const ctx = useAutoRechargeCtx("Status");
+    const copy = useCopy();
+    const status = ctx.config?.status;
+    if (!status || status === "active" || status === "disabled" || status === "pending_setup") {
+      return null;
+    }
+    const label = status === "failed" ? copy.autoRecharge.statusFailed : null;
+    if (!label) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "span",
+      {
+        ref: forwardedRef,
+        className,
+        "data-solvapay-auto-recharge-status": "",
+        "data-status": status,
+        ...rest,
+        children: label
+      }
+    );
+  }
+);
+function CardSetupInner({ onComplete }) {
+  const copy = useCopy();
+  const stripe = (0, import_react_stripe_js4.useStripe)();
+  const elements = (0, import_react_stripe_js4.useElements)();
+  const [processing, setProcessing] = (0, import_react42.useState)(false);
+  const [error, setError] = (0, import_react42.useState)(null);
   (0, import_react42.useEffect)(() => {
+    if (!stripe) return;
+    const clientSecret = readSetupIntentClientSecret(window.location.search);
+    if (!clientSecret) return;
+    let cancelled = false;
+    void (async () => {
+      setProcessing(true);
+      const { setupIntent, error: retrieveError } = await stripe.retrieveSetupIntent(clientSecret);
+      if (cancelled) return;
+      stripSetupIntentParams();
+      if (retrieveError || !setupIntent) {
+        setError(copy.autoRecharge.setupAuthFailed);
+        setProcessing(false);
+        return;
+      }
+      if (setupIntent.status === "succeeded" || setupIntent.status === "processing") {
+        await onComplete();
+      } else {
+        setError(copy.autoRecharge.setupAuthFailed);
+      }
+      if (!cancelled) setProcessing(false);
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [stripe, onComplete, copy.autoRecharge]);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (!stripe || !elements) {
+      setError("Stripe is still loading. Please wait.");
+      return;
+    }
+    setProcessing(true);
+    setError(null);
+    const { error: submitError } = await elements.submit();
+    if (submitError) {
+      setError(submitError.message ?? "Card authorization failed");
+      setProcessing(false);
+      return;
+    }
+    const { error: confirmError } = await stripe.confirmSetup({
+      elements,
+      confirmParams: {
+        return_url: typeof window !== "undefined" ? window.location.href : "/"
+      },
+      redirect: "if_required"
+    });
+    if (confirmError) {
+      setError(confirmError.message ?? "Card authorization failed");
+      setProcessing(false);
+      return;
+    }
+    await onComplete();
+    setProcessing(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("form", { onSubmit: handleSubmit, "data-solvapay-auto-recharge-setup": "", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("h4", { children: copy.autoRecharge.setupHeading }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { children: copy.autoRecharge.setupDescription }),
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_stripe_js4.PaymentElement, { options: withPaymentElementDefaults() }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { role: "alert", "aria-live": "polite", "data-solvapay-auto-recharge-setup-error": "", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "button",
+      {
+        type: "submit",
+        disabled: processing || !stripe,
+        "data-solvapay-auto-recharge-setup-submit": "",
+        children: processing ? copy.autoRecharge.setupProcessing : copy.autoRecharge.setupSubmit
+      }
+    )
+  ] });
+}
+function CardSetup({ setup, onComplete }) {
+  const stripePromise = (0, import_react42.useMemo)(() => {
+    if (!setup.publishableKey || !setup.setupClientSecret) return null;
+    const options = {
+      ...setup.stripeAccountId ? { stripeAccount: setup.stripeAccountId } : {},
+      developerTools: { assistant: { enabled: false } }
+    };
+    const cacheKey2 = getStripeCacheKey3(setup.publishableKey, setup.stripeAccountId);
+    const cached = stripePromiseCache3.get(cacheKey2);
+    if (cached) return cached;
+    const promise = (0, import_stripe_js3.loadStripe)(setup.publishableKey, options);
+    stripePromiseCache3.set(cacheKey2, promise);
+    return promise;
+  }, [setup.publishableKey, setup.setupClientSecret, setup.stripeAccountId]);
+  if (!stripePromise || !setup.setupClientSecret) {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { "data-solvapay-auto-recharge-setup-loading": "", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Spinner, { size: "sm" }),
+      " Loading card form\u2026"
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    import_react_stripe_js4.Elements,
+    {
+      stripe: stripePromise,
+      options: { clientSecret: setup.setupClientSecret },
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CardSetupInner, { onComplete })
+    },
+    setup.setupClientSecret
+  );
+}
+var AutoRecharge = {
+  Root: Root11,
+  Loading: Loading8,
+  Card: Card2,
+  CardHeading,
+  CardSummary,
+  Trigger,
+  Overlay,
+  Content,
+  Title,
+  EnableQuestion,
+  EnableSentence,
+  EnableRow,
+  CancelButton,
+  Header,
+  Description,
+  EnableSwitch,
+  Fields,
+  Setup,
+  Body,
+  Summary: Summary3,
+  ThresholdField,
+  TopupField,
+  AmountField,
+  UnitToggle,
+  Hint,
+  ValidationError,
+  Actions,
+  SaveButton,
+  DisableButton,
+  Error: ErrorSlot7,
+  StatusMessage,
+  Status,
+  CardSetup
+};
+
+// src/components/AutoRecharge.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function AutoRecharge2({
+  currency = "USD",
+  defaultThresholdAmountMajor,
+  defaultTopupAmountMajor,
+  onSetupRequired,
+  onSaved,
+  onDisabled,
+  deferCardSetup,
+  onPendingConfig,
+  className
+}) {
+  const rootClass = ["solvapay-auto-recharge", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    AutoRecharge.Root,
+    {
+      currency,
+      defaultThresholdAmountMajor,
+      defaultTopupAmountMajor,
+      onSetupRequired,
+      onSaved,
+      onDisabled,
+      deferCardSetup,
+      onPendingConfig,
+      className: rootClass,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.Loading, { className: "solvapay-auto-recharge-loading" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(AutoRecharge.Card, { className: "solvapay-auto-recharge-card", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.CardHeading, { className: "solvapay-auto-recharge-card-heading" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.CardSummary, { className: "solvapay-auto-recharge-card-summary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.StatusMessage, { className: "solvapay-auto-recharge-status-message" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.Status, { className: "solvapay-auto-recharge-status" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.Trigger, { className: "solvapay-auto-recharge-trigger" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.Error, { className: "solvapay-auto-recharge-error" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(AutoRecharge.Content, { className: "solvapay-auto-recharge-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.Title, { className: "solvapay-auto-recharge-title" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.EnableQuestion, { className: "solvapay-auto-recharge-question" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.EnableRow, { className: "solvapay-auto-recharge-enable-row" }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(AutoRecharge.Fields, { className: "solvapay-auto-recharge-fields", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.ThresholdField, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.TopupField, { className: "solvapay-auto-recharge-topup-field" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.ValidationError, { className: "solvapay-auto-recharge-validation-error" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.Setup, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(AutoRecharge.Actions, { className: "solvapay-auto-recharge-actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.CancelButton, { className: "solvapay-auto-recharge-cancel" }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(AutoRecharge.SaveButton, { className: "solvapay-auto-recharge-save" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/hooks/useLimits.ts
+var import_react43 = require("react");
+var CACHE_TTL_MS = 1e4;
+var OPTIMISTIC_GRACE_MS = 8e3;
+var limitsCache = /* @__PURE__ */ new Map();
+function cacheKey(customerRef, productRef, meterName) {
+  return `${customerRef ?? "anonymous"}:${productRef}:${meterName}`;
+}
+function useLimits(options) {
+  const { productRef, meterName: rawMeterName, enabled = true } = options;
+  const meterName = rawMeterName || "requests";
+  const transport = useTransport();
+  const { customerRef } = useCustomer();
+  const { purchase } = useSolvaPay();
+  const currentKey = !productRef || !enabled ? null : cacheKey(customerRef, productRef, meterName);
+  const [data, setData] = (0, import_react43.useState)(() => {
+    if (!currentKey) return null;
+    const cached = limitsCache.get(currentKey);
+    if (!cached || Date.now() - cached.timestamp >= CACHE_TTL_MS) return null;
+    return cached.data;
+  });
+  const [loading, setLoading] = (0, import_react43.useState)(() => {
+    if (!currentKey) return false;
+    const cached = limitsCache.get(currentKey);
+    if (!cached) return true;
+    if (cached.promise) return true;
+    if (Date.now() - cached.timestamp >= CACHE_TTL_MS) return true;
+    return false;
+  });
+  const [error, setError] = (0, import_react43.useState)(null);
+  const [trackedKey, setTrackedKey] = (0, import_react43.useState)(currentKey);
+  if (trackedKey !== currentKey) {
+    setTrackedKey(currentKey);
+    setData(null);
+  }
+  const optimisticTimerRef = (0, import_react43.useRef)(null);
+  (0, import_react43.useEffect)(() => {
+    return () => {
+      if (optimisticTimerRef.current) clearTimeout(optimisticTimerRef.current);
+    };
+  }, []);
+  const attachToFetch = (0, import_react43.useCallback)(
+    async (promise) => {
+      setLoading(true);
+      try {
+        const fresh = await promise;
+        setData(fresh);
+        setError(null);
+        return fresh;
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Failed to fetch limits"));
+        return null;
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+  const fetchLimits = (0, import_react43.useCallback)(
+    async (force) => {
+      if (!productRef || !enabled || !transport.getLimits) {
+        setLoading(false);
+        return;
+      }
+      const key = cacheKey(customerRef, productRef, meterName);
+      const cached = limitsCache.get(key);
+      const now = Date.now();
+      if (cached?.promise) {
+        await attachToFetch(cached.promise);
+        return;
+      }
+      if (!force && cached?.data && now - cached.timestamp < CACHE_TTL_MS) {
+        setData(cached.data);
+        setLoading(false);
+        setError(null);
+        return;
+      }
+      const promise = transport.getLimits({ productRef, meterName });
+      limitsCache.set(key, { data: cached?.data ?? null, timestamp: now, promise });
+      const fresh = await attachToFetch(promise);
+      if (fresh !== null) {
+        limitsCache.set(key, { data: fresh, timestamp: Date.now(), promise: null });
+      } else {
+        limitsCache.delete(key);
+      }
+    },
+    [transport, customerRef, productRef, meterName, enabled, attachToFetch]
+  );
+  (0, import_react43.useEffect)(() => {
+    fetchLimits(false);
+  }, [fetchLimits]);
+  const prevPurchasesRef = (0, import_react43.useRef)(null);
+  (0, import_react43.useEffect)(() => {
+    if (prevPurchasesRef.current !== null && prevPurchasesRef.current !== purchase.purchases) {
+      fetchLimits(true).catch(() => {
+      });
+    }
+    prevPurchasesRef.current = purchase.purchases;
+  }, [purchase.purchases, fetchLimits]);
+  const refetch = (0, import_react43.useCallback)(() => fetchLimits(true), [fetchLimits]);
+  const adjustRemaining = (0, import_react43.useCallback)(
+    (delta) => {
+      if (!productRef || !enabled) return;
+      const key = cacheKey(customerRef, productRef, meterName);
+      setData((prev) => {
+        const cached = limitsCache.get(key);
+        const baseline = prev ?? cached?.data ?? null;
+        if (!baseline) return prev;
+        const next = {
+          ...baseline,
+          remaining: Math.max(0, baseline.remaining + delta)
+          // Don't optimistically flip `withinLimits` — paywall gating
+          // can hinge on factors beyond `remaining > 0`
+          // (activationRequired, etc.). Let the trailing refetch
+          // confirm.
+        };
+        limitsCache.set(key, {
+          data: next,
+          timestamp: Date.now(),
+          promise: cached?.promise ?? null
+        });
+        return next;
+      });
+      if (optimisticTimerRef.current) clearTimeout(optimisticTimerRef.current);
+      optimisticTimerRef.current = setTimeout(() => {
+        optimisticTimerRef.current = null;
+        fetchLimits(true).catch(() => {
+        });
+      }, OPTIMISTIC_GRACE_MS);
+    },
+    [customerRef, productRef, meterName, enabled, fetchLimits]
+  );
+  return {
+    remaining: data?.remaining ?? null,
+    withinLimits: data?.withinLimits ?? null,
+    meterName: data?.meterName ?? null,
+    activationRequired: data?.activationRequired ?? null,
+    loading,
+    error,
+    refetch,
+    adjustRemaining
+  };
+}
+
+// src/hooks/useAutoActivateFreePlan.ts
+var import_react44 = require("react");
+function useAutoActivateFreePlan(options) {
+  const { productRef, enabled = true, onActivated } = options;
+  const { customerRef } = useCustomer();
+  const { activationRequired, refetch: refetchLimits } = useLimits({
+    productRef,
+    enabled
+  });
+  const { plans } = usePlans({ productRef });
+  const { activate, error: activationError } = useActivation();
+  const freePlan = (0, import_react44.useMemo)(
+    () => plans.find((p) => p.requiresPayment === false && (p.freeUnits ?? 0) > 0),
+    [plans]
+  );
+  const attemptedKeyRef = (0, import_react44.useRef)(null);
+  const [activated, setActivated] = (0, import_react44.useState)(false);
+  const onActivatedRef = (0, import_react44.useRef)(onActivated);
+  (0, import_react44.useEffect)(() => {
+    onActivatedRef.current = onActivated;
+  }, [onActivated]);
+  (0, import_react44.useEffect)(() => {
+    attemptedKeyRef.current = null;
+    setActivated(false);
+  }, [customerRef, productRef]);
+  const shouldActivate = enabled && activationRequired === true && Boolean(productRef) && Boolean(freePlan?.reference);
+  (0, import_react44.useEffect)(() => {
     if (!shouldActivate || !productRef || !freePlan?.reference) return;
     const key = `${customerRef ?? "anonymous"}:${productRef}`;
     if (attemptedKeyRef.current === key) return;
@@ -7011,7 +8861,7 @@ function useAutoActivateFreePlan(options) {
 }
 
 // src/hooks/usePaywallResolver.ts
-var import_react43 = require("react");
+var import_react45 = require("react");
 function balanceCoversNextUnit(balance, credits) {
   if (!balance) return false;
   if (typeof balance.remainingUnits === "number" && balance.remainingUnits > 0) {
@@ -7025,7 +8875,7 @@ function balanceCoversNextUnit(balance, credits) {
 function usePaywallResolver(content) {
   const { activePurchase, hasPaidPurchase, refetch: refetchPurchase } = usePurchase();
   const { credits, refetch: refetchBalance } = useBalance();
-  const resolved = (0, import_react43.useMemo)(() => {
+  const resolved = (0, import_react45.useMemo)(() => {
     if (!content) return false;
     const productMatches = !content.product || activePurchase?.productRef === content.product || activePurchase?.productName === content.product;
     if (content.kind === "payment_required") {
@@ -7035,7 +8885,7 @@ function usePaywallResolver(content) {
     if (balanceCoversNextUnit(content.balance, credits)) return true;
     return Boolean(productMatches && activePurchase?.status === "active");
   }, [content, hasPaidPurchase, activePurchase, credits]);
-  const refetch = (0, import_react43.useCallback)(async () => {
+  const refetch = (0, import_react45.useCallback)(async () => {
     await Promise.all([
       refetchPurchase().catch(() => void 0),
       refetchBalance().catch(() => void 0)
@@ -7045,7 +8895,7 @@ function usePaywallResolver(content) {
 }
 
 // src/hooks/useCheckoutFlow.ts
-var import_react44 = require("react");
+var import_react46 = require("react");
 
 // src/primitives/checkout/shared.ts
 function isPayg(plan) {
@@ -7108,10 +8958,10 @@ function useCheckoutFlow(opts) {
     initialStep = "plan",
     initialAmountMinor = null
   } = opts;
-  const onPlanSelectRef = (0, import_react44.useRef)(opts.onPlanSelect);
-  const onAmountSelectRef = (0, import_react44.useRef)(opts.onAmountSelect);
-  const onPurchaseSuccessRef = (0, import_react44.useRef)(opts.onPurchaseSuccess);
-  const onErrorRef = (0, import_react44.useRef)(opts.onError);
+  const onPlanSelectRef = (0, import_react46.useRef)(opts.onPlanSelect);
+  const onAmountSelectRef = (0, import_react46.useRef)(opts.onAmountSelect);
+  const onPurchaseSuccessRef = (0, import_react46.useRef)(opts.onPurchaseSuccess);
+  const onErrorRef = (0, import_react46.useRef)(opts.onError);
   onPlanSelectRef.current = opts.onPlanSelect;
   onAmountSelectRef.current = opts.onAmountSelect;
   onPurchaseSuccessRef.current = opts.onPurchaseSuccess;
@@ -7124,8 +8974,8 @@ function useCheckoutFlow(opts) {
   const { creditsPerMinorUnit, displayExchangeRate, adjustBalance } = balance;
   const { refetchPurchase } = useSolvaPay();
   const { merchant } = useMerchant();
-  const [topupCurrencyOverride, setTopupCurrencyOverride] = (0, import_react44.useState)(null);
-  const topupCurrencies = (0, import_react44.useMemo)(() => {
+  const [topupCurrencyOverride, setTopupCurrencyOverride] = (0, import_react46.useState)(null);
+  const topupCurrencies = (0, import_react46.useMemo)(() => {
     const fromMerchant = (merchant?.supportedTopupCurrencies ?? []).map((code) => code.toUpperCase()).filter(Boolean);
     const fallback = opts.topupCurrency?.toUpperCase() ?? merchant?.defaultCurrency?.toUpperCase() ?? null;
     const list = fromMerchant.length > 0 ? fromMerchant : fallback ? [fallback] : [];
@@ -7135,25 +8985,25 @@ function useCheckoutFlow(opts) {
   const planPickerCurrency = planCtx.preferredCurrency?.toUpperCase() ?? null;
   const topupCurrency = (topupCurrencyOverride && topupCurrencies.includes(topupCurrencyOverride) ? topupCurrencyOverride : null) ?? (planPickerCurrency && topupCurrencies.includes(planPickerCurrency) ? planPickerCurrency : null) ?? resolvedDefaultTopupCurrency;
   const topupCurrencyReady = topupCurrency != null;
-  const setTopupCurrency = (0, import_react44.useCallback)(
+  const setTopupCurrency = (0, import_react46.useCallback)(
     (code) => {
       const normalized = code.toUpperCase();
       setTopupCurrencyOverride(normalized);
     },
     []
   );
-  const [step, setStep] = (0, import_react44.useState)(initialStep);
-  const [status, setStatus] = (0, import_react44.useState)("idle");
-  const [selectedAmountMinor, setSelectedAmountMinor] = (0, import_react44.useState)(initialAmountMinor);
-  const [successMeta, setSuccessMeta] = (0, import_react44.useState)(null);
-  const [error, setError] = (0, import_react44.useState)(null);
-  const selectedAmountMinorRef = (0, import_react44.useRef)(initialAmountMinor);
+  const [step, setStep] = (0, import_react46.useState)(initialStep);
+  const [status, setStatus] = (0, import_react46.useState)("idle");
+  const [selectedAmountMinor, setSelectedAmountMinor] = (0, import_react46.useState)(initialAmountMinor);
+  const [successMeta, setSuccessMeta] = (0, import_react46.useState)(null);
+  const [error, setError] = (0, import_react46.useState)(null);
+  const selectedAmountMinorRef = (0, import_react46.useRef)(initialAmountMinor);
   const selectedPlan = planCtx.selectedPlan;
   const selectedPlanRef = planCtx.selectedPlanRef;
   const selectedPlanShape = selectedPlan;
   const branch = selectedPlanShape ? isPayg(selectedPlanShape) ? "payg" : "recurring" : null;
   const canGoBack = step === "amount" || step === "payment";
-  const selectPlan = (0, import_react44.useCallback)(
+  const selectPlan = (0, import_react46.useCallback)(
     (ref) => {
       planCtx.select(ref);
       const plan = planCtx.plans.find((p) => p.reference === ref) ?? null;
@@ -7163,7 +9013,7 @@ function useCheckoutFlow(opts) {
     },
     [planCtx]
   );
-  const selectAmount = (0, import_react44.useCallback)(
+  const selectAmount = (0, import_react46.useCallback)(
     (amountMinor) => {
       selectedAmountMinorRef.current = amountMinor;
       setSelectedAmountMinor(amountMinor);
@@ -7172,7 +9022,7 @@ function useCheckoutFlow(opts) {
     },
     [topupCurrency]
   );
-  const runActivate = (0, import_react44.useCallback)(async () => {
+  const runActivate = (0, import_react46.useCallback)(async () => {
     if (!selectedPlanShape || !selectedPlanRef) return false;
     setError(null);
     setStatus("activating");
@@ -7189,7 +9039,7 @@ function useCheckoutFlow(opts) {
       return false;
     }
   }, [productRef, selectedPlanRef, selectedPlanShape, transport]);
-  const advanceFromPlan = (0, import_react44.useCallback)(async () => {
+  const advanceFromPlan = (0, import_react46.useCallback)(async () => {
     if (!selectedPlanShape || !selectedPlanRef) return;
     if (branch === "payg") {
       if (planCtx.currentPlanRef === selectedPlanRef) {
@@ -7203,7 +9053,7 @@ function useCheckoutFlow(opts) {
     setError(null);
     setStep("payment");
   }, [branch, planCtx.currentPlanRef, runActivate, selectedPlanRef, selectedPlanShape]);
-  const recordPaygSuccess = (0, import_react44.useCallback)(
+  const recordPaygSuccess = (0, import_react46.useCallback)(
     (creditsAddedFromBackend) => {
       if (!selectedPlanShape || selectedAmountMinor == null) return;
       const currency = topupCurrency ?? "USD";
@@ -7237,7 +9087,7 @@ function useCheckoutFlow(opts) {
       topupCurrency
     ]
   );
-  const recordRecurringSuccess = (0, import_react44.useCallback)(() => {
+  const recordRecurringSuccess = (0, import_react46.useCallback)(() => {
     if (!selectedPlanShape) return;
     const pricingOption = selectedPlan ? resolvePlanPricingOption(selectedPlan, planSelection?.selectedCurrency) : {
       currency: selectedPlanShape.currency ?? "USD",
@@ -7256,7 +9106,7 @@ function useCheckoutFlow(opts) {
     setStep("success");
     onPurchaseSuccessRef.current?.(meta);
   }, [selectedPlanShape, selectedPlan, planSelection?.selectedCurrency]);
-  const advance = (0, import_react44.useCallback)(async () => {
+  const advance = (0, import_react46.useCallback)(async () => {
     if (step === "plan") {
       await advanceFromPlan();
       return;
@@ -7283,7 +9133,7 @@ function useCheckoutFlow(opts) {
     selectedAmountMinor,
     step
   ]);
-  const back = (0, import_react44.useCallback)(() => {
+  const back = (0, import_react46.useCallback)(() => {
     setError(null);
     if (step === "amount") {
       setStep("plan");
@@ -7294,7 +9144,7 @@ function useCheckoutFlow(opts) {
       return;
     }
   }, [branch, step]);
-  const reset = (0, import_react44.useCallback)(() => {
+  const reset = (0, import_react46.useCallback)(() => {
     setStep("plan");
     selectedAmountMinorRef.current = null;
     setSelectedAmountMinor(null);
@@ -7303,13 +9153,13 @@ function useCheckoutFlow(opts) {
     setStatus("idle");
     setTopupCurrencyOverride(null);
   }, []);
-  const retry = (0, import_react44.useCallback)(async () => {
+  const retry = (0, import_react46.useCallback)(async () => {
     if (status !== "error") return;
     if (step === "plan" && branch === "payg") {
       await runActivate();
     }
   }, [branch, runActivate, status, step]);
-  const notifyPaymentSuccess = (0, import_react44.useCallback)(
+  const notifyPaymentSuccess = (0, import_react46.useCallback)(
     (_intent, extras) => {
       if (branch === "payg") {
         recordPaygSuccess(extras?.creditsAdded);
@@ -7319,7 +9169,7 @@ function useCheckoutFlow(opts) {
     },
     [branch, recordPaygSuccess, recordRecurringSuccess]
   );
-  return (0, import_react44.useMemo)(
+  return (0, import_react46.useMemo)(
     () => ({
       step,
       status,
@@ -7368,36 +9218,36 @@ function useCheckoutFlow(opts) {
 }
 
 // src/primitives/checkout/index.tsx
-var import_react46 = require("react");
+var import_react48 = require("react");
 
 // src/primitives/PaywallNotice.tsx
-var import_react45 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var PaywallNoticeContext = (0, import_react45.createContext)(null);
+var import_react47 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var PaywallNoticeContext = (0, import_react47.createContext)(null);
 function usePaywallNoticeCtx(part) {
-  const ctx = (0, import_react45.useContext)(PaywallNoticeContext);
+  const ctx = (0, import_react47.useContext)(PaywallNoticeContext);
   if (!ctx) {
     throw new Error(`PaywallNotice.${part} must be rendered inside <PaywallNotice.Root>.`);
   }
   return ctx;
 }
-var Root11 = (0, import_react45.forwardRef)(function PaywallNoticeRoot({ content, onResolved, classNames, asChild, children, ...rest }, forwardedRef) {
+var Root12 = (0, import_react47.forwardRef)(function PaywallNoticeRoot({ content, onResolved, classNames, asChild, children, ...rest }, forwardedRef) {
   const { resolved, refetch } = usePaywallResolver(content);
-  const classNamesResolved = (0, import_react45.useMemo)(() => classNames ?? {}, [classNames]);
-  const onResolvedRef = (0, import_react45.useRef)(onResolved);
-  (0, import_react45.useEffect)(() => {
+  const classNamesResolved = (0, import_react47.useMemo)(() => classNames ?? {}, [classNames]);
+  const onResolvedRef = (0, import_react47.useRef)(onResolved);
+  (0, import_react47.useEffect)(() => {
     onResolvedRef.current = onResolved;
   }, [onResolved]);
-  const hasResolvedRef = (0, import_react45.useRef)(false);
-  const signalResolved = (0, import_react45.useCallback)(() => {
+  const hasResolvedRef = (0, import_react47.useRef)(false);
+  const signalResolved = (0, import_react47.useCallback)(() => {
     if (hasResolvedRef.current) return;
     hasResolvedRef.current = true;
     onResolvedRef.current?.();
   }, []);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (resolved) signalResolved();
   }, [resolved, signalResolved]);
-  const ctx = (0, import_react45.useMemo)(
+  const ctx = (0, import_react47.useMemo)(
     () => ({
       content,
       resolved,
@@ -7408,7 +9258,7 @@ var Root11 = (0, import_react45.forwardRef)(function PaywallNoticeRoot({ content
     [content, resolved, refetch, signalResolved, classNamesResolved]
   );
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PaywallNoticeContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PaywallNoticeContext.Provider, { value: ctx, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Comp,
     {
       ref: forwardedRef,
@@ -7421,12 +9271,12 @@ var Root11 = (0, import_react45.forwardRef)(function PaywallNoticeRoot({ content
     }
   ) });
 });
-var Heading4 = (0, import_react45.forwardRef)(function PaywallNoticeHeading({ asChild, children, className, ...rest }, forwardedRef) {
+var Heading4 = (0, import_react47.forwardRef)(function PaywallNoticeHeading({ asChild, children, className, ...rest }, forwardedRef) {
   const ctx = usePaywallNoticeCtx("Heading");
   const copy = useCopy();
   const defaultText = ctx.resolved ? copy.paywall.resolvedHeading : ctx.content.kind === "payment_required" ? copy.paywall.paymentRequiredHeading : isTopupGate(ctx.content) ? copy.paywall.topupRequiredHeading : copy.paywall.activationRequiredHeading;
   const Comp = asChild ? Slot : "h2";
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Comp,
     {
       ref: forwardedRef,
@@ -7437,12 +9287,12 @@ var Heading4 = (0, import_react45.forwardRef)(function PaywallNoticeHeading({ as
     }
   );
 });
-var Message = (0, import_react45.forwardRef)(function PaywallNoticeMessage({ asChild, children, className, ...rest }, forwardedRef) {
+var Message = (0, import_react47.forwardRef)(function PaywallNoticeMessage({ asChild, children, className, ...rest }, forwardedRef) {
   const ctx = usePaywallNoticeCtx("Message");
   const copy = useCopy();
   const Comp = asChild ? Slot : "p";
   const defaultText = resolvePaywallMessage(ctx.content, copy.paywall);
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Comp,
     {
       ref: forwardedRef,
@@ -7485,14 +9335,14 @@ function resolvePaywallMessage(content, paywallCopy) {
   }
   return content.message ?? "";
 }
-var ProductContext = (0, import_react45.forwardRef)(function PaywallNoticeProductContext({ asChild, children, className, ...rest }, forwardedRef) {
+var ProductContext = (0, import_react47.forwardRef)(function PaywallNoticeProductContext({ asChild, children, className, ...rest }, forwardedRef) {
   const ctx = usePaywallNoticeCtx("ProductContext");
   const copy = useCopy();
   const product = ctx.content.kind === "activation_required" ? ctx.content.productDetails : void 0;
   if (!product?.name) return null;
   const label = interpolate(copy.paywall.productContext, { product: product.name });
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Comp,
     {
       ref: forwardedRef,
@@ -7503,7 +9353,7 @@ var ProductContext = (0, import_react45.forwardRef)(function PaywallNoticeProduc
     }
   );
 });
-var Balance = (0, import_react45.forwardRef)(function PaywallNoticeBalance({ asChild, children, className, ...rest }, forwardedRef) {
+var Balance = (0, import_react47.forwardRef)(function PaywallNoticeBalance({ asChild, children, className, ...rest }, forwardedRef) {
   const ctx = usePaywallNoticeCtx("Balance");
   const copy = useCopy();
   const balance = ctx.content.balance;
@@ -7513,7 +9363,7 @@ var Balance = (0, import_react45.forwardRef)(function PaywallNoticeBalance({ asC
     required: String(balance.creditsPerUnit ?? 1)
   });
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Comp,
     {
       ref: forwardedRef,
@@ -7529,27 +9379,27 @@ function Plans({ className, children }) {
   if (ctx.content.kind !== "activation_required") return null;
   if (!ctx.content.product) return null;
   const defaultClass = className ?? ctx.classNames.plans ?? "solvapay-paywall-plans";
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { "data-solvapay-paywall-plans": "", className: defaultClass, children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PlanSelector.Root, { productRef: ctx.content.product, filter: hidesFreePlan, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PlanSelector.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(PlanSelector.Card, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PlanSelector.CardBadge, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PlanSelector.CardName, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PlanSelector.CardPrice, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PlanSelector.CardInterval, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { "data-solvapay-paywall-plans": "", className: defaultClass, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlanSelector.Root, { productRef: ctx.content.product, filter: hidesFreePlan, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlanSelector.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(PlanSelector.Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlanSelector.CardBadge, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlanSelector.CardName, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlanSelector.CardPrice, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlanSelector.CardInterval, {})
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PlanSelector.Loading, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PlanSelector.Error, {})
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlanSelector.Loading, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlanSelector.Error, {})
   ] }) }) });
 }
 function hidesFreePlan(plan) {
   return plan.requiresPayment !== false;
 }
-var HostedCheckoutLink = (0, import_react45.forwardRef)(function PaywallNoticeHostedCheckoutLink({ asChild, children, className, ...rest }, forwardedRef) {
+var HostedCheckoutLink = (0, import_react47.forwardRef)(function PaywallNoticeHostedCheckoutLink({ asChild, children, className, ...rest }, forwardedRef) {
   const ctx = usePaywallNoticeCtx("HostedCheckoutLink");
   const copy = useCopy();
   const href = ctx.content.checkoutUrl;
   if (!href) return null;
   const Comp = asChild ? Slot : "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Comp,
     {
       ref: forwardedRef,
@@ -7567,12 +9417,12 @@ function EmbeddedCheckout({ returnUrl, topupCurrency, className }) {
   const ctx = usePaywallNoticeCtx("EmbeddedCheckout");
   const productRef = ctx.content.product;
   const { plans } = usePlans({ productRef: productRef ?? void 0 });
-  const filter = (0, import_react45.useMemo)(() => buildDefaultCheckoutPlanFilter(plans), [plans]);
+  const filter = (0, import_react47.useMemo)(() => buildDefaultCheckoutPlanFilter(plans), [plans]);
   if (!productRef) return null;
   const resolvedClassName = className ?? ctx.classNames.embeddedCheckout ?? "solvapay-paywall-embedded-checkout";
   const headingClassName = ctx.classNames.heading ?? "solvapay-paywall-step-heading";
   const messageClassName = ctx.classNames.message ?? "solvapay-paywall-step-message";
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     CheckoutSteps.Root,
     {
       productRef,
@@ -7585,33 +9435,33 @@ function EmbeddedCheckout({ returnUrl, topupCurrency, className }) {
       },
       className: resolvedClassName,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckoutSteps.StepHeading, { className: headingClassName }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckoutSteps.StepMessage, { className: messageClassName }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(CheckoutSteps.IfStep, { step: "plan", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckoutSteps.PlanGrid, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PlanSelector.Loading, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PlanSelector.Error, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckoutSteps.PlanContinueButton, {})
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckoutSteps.StepHeading, { className: headingClassName }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckoutSteps.StepMessage, { className: messageClassName }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(CheckoutSteps.IfStep, { step: "plan", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckoutSteps.PlanGrid, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlanSelector.Loading, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PlanSelector.Error, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckoutSteps.PlanContinueButton, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(CheckoutSteps.IfStep, { step: "amount", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckoutSteps.BackLink, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckoutSteps.AmountPicker, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckoutSteps.AmountContinueButton, {})
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(CheckoutSteps.IfStep, { step: "amount", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckoutSteps.BackLink, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckoutSteps.AmountPicker, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckoutSteps.AmountContinueButton, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(CheckoutSteps.IfStep, { step: "payment", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckoutSteps.BackLink, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckoutSteps.Payment, {})
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(CheckoutSteps.IfStep, { step: "payment", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckoutSteps.BackLink, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckoutSteps.Payment, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckoutSteps.IfStep, { step: "success", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CheckoutSteps.Success, {}) })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckoutSteps.IfStep, { step: "success", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CheckoutSteps.Success, {}) })
       ]
     }
   );
 }
-var Retry = (0, import_react45.forwardRef)(function PaywallNoticeRetry({ asChild, children, className, onClick, ...rest }, forwardedRef) {
+var Retry = (0, import_react47.forwardRef)(function PaywallNoticeRetry({ asChild, children, className, onClick, ...rest }, forwardedRef) {
   const ctx = usePaywallNoticeCtx("Retry");
   const copy = useCopy();
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     Comp,
     {
       ref: forwardedRef,
@@ -7629,8 +9479,8 @@ var Retry = (0, import_react45.forwardRef)(function PaywallNoticeRetry({ asChild
     }
   );
 });
-var PaywallNotice = Object.assign(Root11, {
-  Root: Root11,
+var PaywallNotice = Object.assign(Root12, {
+  Root: Root12,
   Heading: Heading4,
   Message,
   ProductContext,
@@ -7641,14 +9491,14 @@ var PaywallNotice = Object.assign(Root11, {
   Retry
 });
 function usePaywallNoticeOptional() {
-  return (0, import_react45.useContext)(PaywallNoticeContext);
+  return (0, import_react47.useContext)(PaywallNoticeContext);
 }
 
 // src/primitives/checkout/index.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
-var CheckoutContext = (0, import_react46.createContext)(null);
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var CheckoutContext = (0, import_react48.createContext)(null);
 function useCheckoutContext(part) {
-  const ctx = (0, import_react46.useContext)(CheckoutContext);
+  const ctx = (0, import_react48.useContext)(CheckoutContext);
   if (!ctx) {
     throw new Error(`CheckoutSteps.${part} must be rendered inside <CheckoutSteps.Root>.`);
   }
@@ -7657,7 +9507,7 @@ function useCheckoutContext(part) {
 function useCheckoutSteps() {
   return useCheckoutContext("useCheckoutSteps");
 }
-var Root12 = (0, import_react46.forwardRef)(function CheckoutStepsRoot(props, forwardedRef) {
+var Root13 = (0, import_react48.forwardRef)(function CheckoutStepsRoot(props, forwardedRef) {
   const {
     productRef,
     returnUrl: _returnUrl,
@@ -7679,9 +9529,9 @@ var Root12 = (0, import_react46.forwardRef)(function CheckoutStepsRoot(props, fo
     children
   } = props;
   if (externalFlow) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ref: forwardedRef, "data-solvapay-checkout": "", className, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CheckoutContext.Provider, { value: externalFlow, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref: forwardedRef, "data-solvapay-checkout": "", className, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CheckoutContext.Provider, { value: externalFlow, children }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     RootWithPlanSelector,
     {
       productRef,
@@ -7724,11 +9574,11 @@ function RootWithPlanSelector({
   children
 }) {
   const { plans } = usePlans({ productRef });
-  const resolvedFilter = (0, import_react46.useMemo)(
+  const resolvedFilter = (0, import_react48.useMemo)(
     () => filter ?? buildDefaultCheckoutPlanFilter(plans),
     [filter, plans]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     PlanSelector.Root,
     {
       productRef,
@@ -7738,7 +9588,7 @@ function RootWithPlanSelector({
       currentPlanRef,
       autoSelectFirstPaid,
       initialPlanRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         FlowProvider,
         {
           productRef,
@@ -7780,22 +9630,22 @@ function FlowProvider({
     onPurchaseSuccess,
     onError
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { ref: forwardedRef, "data-solvapay-checkout": "", "data-step": flow.step, className, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CheckoutContext.Provider, { value: flow, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { ref: forwardedRef, "data-solvapay-checkout": "", "data-step": flow.step, className, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CheckoutContext.Provider, { value: flow, children }) });
 }
 function IfStep({ step, children }) {
   const flow = useCheckoutContext("IfStep");
   const matches = Array.isArray(step) ? step.includes(flow.step) : flow.step === step;
   if (!matches) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children });
 }
-var StepHeading = (0, import_react46.forwardRef)(function CheckoutStepsStepHeading({ asChild, children, className, ...rest }, forwardedRef) {
+var StepHeading = (0, import_react48.forwardRef)(function CheckoutStepsStepHeading({ asChild, children, className, ...rest }, forwardedRef) {
   const flow = useCheckoutContext("StepHeading");
   const copy = useCopy();
   const paywallCtx = usePaywallNoticeOptional();
   if (flow.step === "success") return null;
   const defaultText = resolveStepHeading(flow.step, copy, paywallCtx?.content ?? null);
   const Comp = asChild ? Slot : "h3";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Comp,
     {
       ref: forwardedRef,
@@ -7807,7 +9657,7 @@ var StepHeading = (0, import_react46.forwardRef)(function CheckoutStepsStepHeadi
     }
   );
 });
-var StepMessage = (0, import_react46.forwardRef)(function CheckoutStepsStepMessage({ asChild, children, className, ...rest }, forwardedRef) {
+var StepMessage = (0, import_react48.forwardRef)(function CheckoutStepsStepMessage({ asChild, children, className, ...rest }, forwardedRef) {
   const flow = useCheckoutContext("StepMessage");
   const copy = useCopy();
   const paywallCtx = usePaywallNoticeOptional();
@@ -7815,7 +9665,7 @@ var StepMessage = (0, import_react46.forwardRef)(function CheckoutStepsStepMessa
   const defaultText = resolveStepMessage(flow, copy, paywallCtx?.content ?? null);
   if (!defaultText && children == null) return null;
   const Comp = asChild ? Slot : "p";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     Comp,
     {
       ref: forwardedRef,
@@ -7862,21 +9712,21 @@ function resolveStepMessage(flow, copy, content) {
   return "";
 }
 function PlanGrid({ className, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PlanSelector.Grid, { className: className ?? "solvapay-checkout-plan-grid", children: children ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(PlanSelector.Card, { className: "solvapay-checkout-plan-card", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PlanSelector.CardBadge, { className: "solvapay-checkout-plan-card-badge" }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PlanSelector.CardName, { className: "solvapay-checkout-plan-card-name" }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PlanSelector.CardPrice, { className: "solvapay-checkout-plan-card-price" }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PlanSelector.CardInterval, { className: "solvapay-checkout-plan-card-interval" })
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PlanSelector.Grid, { className: className ?? "solvapay-checkout-plan-grid", children: children ?? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(PlanSelector.Card, { className: "solvapay-checkout-plan-card", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PlanSelector.CardBadge, { className: "solvapay-checkout-plan-card-badge" }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PlanSelector.CardName, { className: "solvapay-checkout-plan-card-name" }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PlanSelector.CardPrice, { className: "solvapay-checkout-plan-card-price" }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PlanSelector.CardInterval, { className: "solvapay-checkout-plan-card-interval" })
   ] }) });
 }
-var PlanContinueButton = (0, import_react46.forwardRef)(
+var PlanContinueButton = (0, import_react48.forwardRef)(
   function PlanContinueButton2({ className, children, onClick, disabled, ...rest }, ref) {
     const flow = useCheckoutContext("PlanContinueButton");
     const locale = useLocale();
     const selectedPlanShape = flow.selectedPlan;
     const isDisabled = disabled || !flow.selectedPlanRef || flow.status === "activating";
     const label = children ?? formatContinueLabel(selectedPlanShape, locale);
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "button",
       {
         ref,
@@ -7899,13 +9749,13 @@ var PlanContinueButton = (0, import_react46.forwardRef)(
 function AmountPicker3({ className, children }) {
   const flow = useCheckoutContext("AmountPicker");
   if (!flow.topupCurrencyReady || flow.topupCurrency == null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "div",
       {
         className: className ?? "solvapay-amount-picker",
         "data-state": "loading",
         "aria-busy": "true",
-        children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "solvapay-amount-picker-pills", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "solvapay-amount-picker-pills", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "span",
           {
             className: "solvapay-amount-picker-pill",
@@ -7917,7 +9767,7 @@ function AmountPicker3({ className, children }) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     AmountPicker.Root,
     {
       currency: flow.topupCurrency,
@@ -7928,16 +9778,16 @@ function AmountPicker3({ className, children }) {
           flow.selectAmount(value);
         }
       },
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DefaultAmountTree, {})
+      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(DefaultAmountTree, {})
     }
   );
 }
 function DefaultAmountTree() {
   const ctx = useAmountPicker();
   const { selectAmountLabel, customAmountLabel, creditEstimate } = useAmountPickerCopy();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "solvapay-amount-picker-label", children: selectAmountLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "solvapay-amount-picker-pills", children: ctx.quickAmounts.map((amount) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "solvapay-amount-picker-label", children: selectAmountLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "solvapay-amount-picker-pills", children: ctx.quickAmounts.map((amount) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       AmountPicker.Option,
       {
         amount,
@@ -7945,11 +9795,11 @@ function DefaultAmountTree() {
       },
       amount
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "solvapay-amount-picker-custom-wrapper", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "solvapay-amount-picker-custom-label", children: customAmountLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "solvapay-amount-picker-custom-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "solvapay-amount-picker-currency-symbol", children: ctx.currencySymbol }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "solvapay-amount-picker-custom-wrapper", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "solvapay-amount-picker-custom-label", children: customAmountLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "solvapay-amount-picker-custom-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "solvapay-amount-picker-currency-symbol", children: ctx.currencySymbol }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           AmountPicker.Custom,
           {
             className: "solvapay-amount-picker-custom-input",
@@ -7958,7 +9808,7 @@ function DefaultAmountTree() {
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "p",
       {
         className: "solvapay-amount-picker-credit-estimate",
@@ -7968,7 +9818,7 @@ function DefaultAmountTree() {
     )
   ] });
 }
-var AmountContinueButton = (0, import_react46.forwardRef)(
+var AmountContinueButton = (0, import_react48.forwardRef)(
   function AmountContinueButton2({ className, children, onClick, disabled, ...rest }, ref) {
     const flow = useCheckoutContext("AmountContinueButton");
     const locale = useLocale();
@@ -7977,7 +9827,7 @@ var AmountContinueButton = (0, import_react46.forwardRef)(
     const ready = flow.topupCurrencyReady && currency != null;
     const isDisabled = disabled || !ready || amountMinor == null;
     const label = children ?? (ready && currency != null && amountMinor != null ? `Continue \u2014 ${formatPrice(amountMinor, currency, { locale })}` : "Continue");
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       "button",
       {
         ref,
@@ -8000,10 +9850,10 @@ var AmountContinueButton = (0, import_react46.forwardRef)(
 function Payment({ className }) {
   const flow = useCheckoutContext("Payment");
   if (flow.branch === "payg") {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PaygPayment, { className });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaygPayment, { className });
   }
   if (flow.branch === "recurring") {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(RecurringPayment, { className });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(RecurringPayment, { className });
   }
   return null;
 }
@@ -8017,12 +9867,12 @@ function PaygPayment({ className }) {
   const currency = flow.topupCurrency;
   if (!selectedPlanShape || amountMinor == null || currency == null) return null;
   const creditsAdded = creditsPerMinorUnit != null && creditsPerMinorUnit > 0 ? Math.floor(amountMinor / (displayExchangeRate ?? 1) * creditsPerMinorUnit) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: className ?? "solvapay-checkout-payment", "data-branch": "payg", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "solvapay-checkout-order-summary", "data-variant": "payg", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "solvapay-checkout-order-summary-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: creditsAdded != null ? `${creditsAdded.toLocaleString(locale)} credits` : formatPrice(amountMinor, currency, { locale }) }),
-      creditsAdded != null ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: formatPrice(amountMinor, currency, { locale }) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: className ?? "solvapay-checkout-payment", "data-branch": "payg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "solvapay-checkout-order-summary", "data-variant": "payg", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "solvapay-checkout-order-summary-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: creditsAdded != null ? `${creditsAdded.toLocaleString(locale)} credits` : formatPrice(amountMinor, currency, { locale }) }),
+      creditsAdded != null ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: formatPrice(amountMinor, currency, { locale }) }) : null
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       TopupForm.Root,
       {
         amount: amountMinor,
@@ -8031,11 +9881,11 @@ function PaygPayment({ className }) {
         className: "solvapay-checkout-topup-form",
         onSuccess: (intent, extras) => flow.notifyPaymentSuccess(intent, extras),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TopupForm.Loading, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TopupForm.PaymentElement, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TopupForm.Error, { className: "solvapay-checkout-error" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MandateText, { mode: "topup", amountMinor, currency }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(TopupForm.SubmitButton, { className: "solvapay-checkout-pay-button", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TopupForm.Loading, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TopupForm.PaymentElement, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(TopupForm.Error, { className: "solvapay-checkout-error" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MandateText, { mode: "topup", amountMinor, currency }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(TopupForm.SubmitButton, { className: "solvapay-checkout-pay-button", children: [
             "Pay ",
             formatPrice(amountMinor, currency, { locale })
           ] })
@@ -8058,12 +9908,12 @@ function RecurringPayment({ className }) {
   const isRecurring = !!cycle;
   const formattedAmount = formatPrice(amountMinor, currency, { locale });
   const priceLine = isRecurring ? `${formattedAmount}/${shortCycle(cycle)}` : formattedAmount;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: className ?? "solvapay-checkout-payment", "data-branch": "recurring", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "solvapay-checkout-order-summary", "data-variant": "recurring", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "solvapay-checkout-order-summary-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: planName }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: priceLine })
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: className ?? "solvapay-checkout-payment", "data-branch": "recurring", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "solvapay-checkout-order-summary", "data-variant": "recurring", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "solvapay-checkout-order-summary-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: planName }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: priceLine })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       PaymentForm.Root,
       {
         planRef: flow.selectedPlanRef,
@@ -8072,28 +9922,28 @@ function RecurringPayment({ className }) {
         requireTermsAcceptance: false,
         onSuccess: (intent) => flow.notifyPaymentSuccess(intent),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PaymentForm.Loading, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PaymentForm.PaymentElement, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PaymentForm.Error, { className: "solvapay-checkout-error" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PaymentForm.MandateText, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(PaymentForm.SubmitButton, { className: "solvapay-checkout-pay-button", children: isRecurring ? `Subscribe \u2014 ${priceLine}` : `Pay ${formattedAmount}` })
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaymentForm.Loading, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaymentForm.PaymentElement, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaymentForm.Error, { className: "solvapay-checkout-error" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaymentForm.MandateText, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PaymentForm.SubmitButton, { className: "solvapay-checkout-pay-button", children: isRecurring ? `Subscribe \u2014 ${priceLine}` : `Pay ${formattedAmount}` })
         ]
       }
     )
   ] });
 }
-var CheckoutEnvContext = (0, import_react46.createContext)(null);
+var CheckoutEnvContext = (0, import_react48.createContext)(null);
 function useReturnUrl() {
-  return (0, import_react46.useContext)(CheckoutEnvContext)?.returnUrl ?? "";
+  return (0, import_react48.useContext)(CheckoutEnvContext)?.returnUrl ?? "";
 }
 function useProductRef() {
-  return (0, import_react46.useContext)(CheckoutEnvContext)?.productRef ?? "";
+  return (0, import_react48.useContext)(CheckoutEnvContext)?.productRef ?? "";
 }
-var BackLink = (0, import_react46.forwardRef)(function CheckoutStepsBackLink({ label, glyph = "\u2190", className, onClick, ...rest }, ref) {
+var BackLink = (0, import_react48.forwardRef)(function CheckoutStepsBackLink({ label, glyph = "\u2190", className, onClick, ...rest }, ref) {
   const flow = useCheckoutContext("BackLink");
   if (!flow.canGoBack) return null;
   const resolvedLabel = label ?? (flow.step === "payment" && flow.branch === "payg" ? "Change amount" : flow.step === "payment" && flow.branch === "recurring" ? "Change plan" : "Back");
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "button",
     {
       ref,
@@ -8107,8 +9957,8 @@ var BackLink = (0, import_react46.forwardRef)(function CheckoutStepsBackLink({ l
       },
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "solvapay-checkout-back-link-glyph", "aria-hidden": "true", children: glyph }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "solvapay-checkout-back-link-label", children: resolvedLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "solvapay-checkout-back-link-glyph", "aria-hidden": "true", children: glyph }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "solvapay-checkout-back-link-label", children: resolvedLabel })
       ]
     }
   );
@@ -8118,74 +9968,74 @@ function Success({ className, children }) {
   const locale = useLocale();
   if (flow.step !== "success" || !flow.successMeta) return null;
   if (children) {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: className ?? "solvapay-checkout-success", children });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: className ?? "solvapay-checkout-success", children });
   }
   const meta = flow.successMeta;
   if (meta.branch === "payg") {
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: className ?? "solvapay-checkout-success", "data-branch": "payg", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "solvapay-checkout-success-check", "aria-hidden": "true", children: "\u2713" }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h2", { className: "solvapay-checkout-success-heading", children: "Credits added" }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "solvapay-checkout-success-subheading", children: "Pay as you go plan is active." }),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("dl", { className: "solvapay-checkout-receipt", "data-variant": "payg", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dt", { children: "Amount" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dd", { children: formatPrice(meta.amountMinor, meta.currency, { locale }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: className ?? "solvapay-checkout-success", "data-branch": "payg", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "solvapay-checkout-success-check", "aria-hidden": "true", children: "\u2713" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("h2", { className: "solvapay-checkout-success-heading", children: "Credits added" }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "solvapay-checkout-success-subheading", children: "Pay as you go plan is active." }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("dl", { className: "solvapay-checkout-receipt", "data-variant": "payg", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dt", { children: "Amount" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dd", { children: formatPrice(meta.amountMinor, meta.currency, { locale }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dt", { children: "Credits" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("dd", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dt", { children: "Credits" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("dd", { children: [
             "+",
             meta.creditsAdded.toLocaleString(locale)
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dt", { children: "Plan" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dd", { children: meta.plan.name ?? "Pay as you go" })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dt", { children: "Plan" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dd", { children: meta.plan.name ?? "Pay as you go" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dt", { children: "Rate" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dd", { children: meta.rateLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dt", { children: "Rate" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dd", { children: meta.rateLabel })
         ] })
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: className ?? "solvapay-checkout-success", "data-branch": "recurring", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "solvapay-checkout-success-check", "aria-hidden": "true", children: "\u2713" }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("h2", { className: "solvapay-checkout-success-heading", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: className ?? "solvapay-checkout-success", "data-branch": "recurring", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "solvapay-checkout-success-check", "aria-hidden": "true", children: "\u2713" }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("h2", { className: "solvapay-checkout-success-heading", children: [
       meta.plan.name ?? "Plan",
       " active"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "solvapay-checkout-success-subheading", children: "Subscription is live and credits are ready." }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("dl", { className: "solvapay-checkout-receipt", "data-variant": "recurring", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dt", { children: "Plan" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dd", { children: meta.plan.name ?? "Plan" })
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "solvapay-checkout-success-subheading", children: "Subscription is live and credits are ready." }),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("dl", { className: "solvapay-checkout-receipt", "data-variant": "recurring", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dt", { children: "Plan" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dd", { children: meta.plan.name ?? "Plan" })
       ] }),
-      meta.creditsIncluded > 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dt", { children: "Credits" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("dd", { children: [
+      meta.creditsIncluded > 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dt", { children: "Credits" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("dd", { children: [
           "+",
           meta.creditsIncluded.toLocaleString(locale)
         ] })
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dt", { children: "Charged today" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dd", { children: formatPrice(meta.chargedTodayMinor, meta.currency, { locale }) })
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dt", { children: "Charged today" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dd", { children: formatPrice(meta.chargedTodayMinor, meta.currency, { locale }) })
       ] }),
-      meta.nextRenewalLabel ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dt", { children: "Next renewal" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dd", { children: meta.nextRenewalLabel })
+      meta.nextRenewalLabel ? /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "solvapay-checkout-receipt-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dt", { children: "Next renewal" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("dd", { children: meta.nextRenewalLabel })
       ] }) : null
     ] })
   ] });
 }
-var RootWithEnv = (0, import_react46.forwardRef)(
+var RootWithEnv = (0, import_react48.forwardRef)(
   function CheckoutStepsRootWithEnv(props, forwardedRef) {
-    const env = (0, import_react46.useMemo)(
+    const env = (0, import_react48.useMemo)(
       () => ({ returnUrl: props.returnUrl, productRef: props.productRef }),
       [props.returnUrl, props.productRef]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(CheckoutEnvContext.Provider, { value: env, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Root12, { ...props, ref: forwardedRef }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CheckoutEnvContext.Provider, { value: env, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Root13, { ...props, ref: forwardedRef }) });
   }
 );
 var CheckoutSteps = {
@@ -8237,6 +10087,7 @@ var UnsupportedTransportMethodError = class extends Error {
 0 && (module.exports = {
   ActivationFlow,
   AmountPicker,
+  AutoRecharge,
   BalanceBadge,
   CancelPlanButton,
   CancelledPlanNotice,
@@ -8263,6 +10114,7 @@ var UnsupportedTransportMethodError = class extends Error {
   TopupForm,
   UnsupportedTransportMethodError,
   UpdatePaymentMethodButton,
+  configToAutoRechargeInput,
   confirmPayment,
   createAnonymousAuthAdapter,
   createHttpTransport,
@@ -8288,6 +10140,7 @@ var UnsupportedTransportMethodError = class extends Error {
   toMajorUnits,
   useActivation,
   useAutoActivateFreePlan,
+  useAutoRecharge,
   useBalance,
   useCheckout,
   useCheckoutFlow,