@solvapay/react 1.0.7 → 1.0.8-preview.2

package/dist/index.js

@@ -1,820 +1,127 @@
+import {
+  ActivationFlow,
+  AmountPicker,
+  BalanceBadge,
+  CancelPlanButton,
+  CancelledPlanNotice,
+  CheckoutSummary2 as CheckoutSummary,
+  CopyContext,
+  CopyProvider,
+  CreditGate,
+  MandateText,
+  PaymentForm,
+  PaymentFormCardElement,
+  PaymentFormContext,
+  PaymentFormCustomerFields,
+  PaymentFormError,
+  PaymentFormLoading,
+  PaymentFormMandateText,
+  PaymentFormPaymentElement,
+  PaymentFormProvider,
+  PaymentFormSubmitButton,
+  PaymentFormSummary,
+  PaymentFormTermsCheckbox,
+  PlanBadge,
+  PlanSelector,
+  ProductBadge,
+  PurchaseGate,
+  SolvaPayContext,
+  SolvaPayProvider,
+  Spinner,
+  TopupForm2 as TopupForm,
+  buildRequestHeaders,
+  confirmPayment,
+  deriveVariant,
+  enCopy,
+  filterPurchases,
+  formatPrice,
+  getActivePurchases,
+  getCancelledPurchasesWithEndDate,
+  getMostRecentPurchase,
+  getPrimaryPurchase,
+  interpolate,
+  isPaidPurchase,
+  mergeCopy,
+  resolveCta,
+  useActivation,
+  useActivationFlow,
+  useAmountPicker,
+  useAmountPickerCopy,
+  useBalance,
+  useCheckout,
+  useCopy,
+  useCreditGate,
+  useCustomer,
+  useLocale,
+  useMerchant,
+  usePaymentForm,
+  usePlan,
+  usePlans,
+  useProduct,
+  usePurchase,
+  usePurchaseActions,
+  usePurchaseStatus,
+  useSolvaPay,
+  useTopup,
+  useTopupAmountSelector
+} from "./chunk-MOP3ZBGC.js";
 import {
   defaultAuthAdapter
 } from "./chunk-OUSEQRCT.js";
 
-// src/SolvaPayProvider.tsx
-import { createContext, useState, useEffect, useCallback, useMemo, useRef } from "react";
-
-// src/utils/purchases.ts
-function filterPurchases(purchases) {
-  return purchases.filter((purchase) => purchase.status === "active");
-}
-function getActivePurchases(purchases) {
-  return purchases.filter((purchase) => purchase.status === "active");
-}
-function getCancelledPurchasesWithEndDate(purchases) {
-  const now = /* @__PURE__ */ new Date();
-  return purchases.filter((purchase) => {
-    return purchase.status === "active" && purchase.cancelledAt && purchase.endDate && new Date(purchase.endDate) > now;
-  });
-}
-function getMostRecentPurchase(purchases) {
-  if (purchases.length === 0) return null;
-  return purchases.reduce((latest, current) => {
-    return new Date(current.startDate) > new Date(latest.startDate) ? current : latest;
-  });
-}
-function getPrimaryPurchase(purchases) {
-  const filtered = filterPurchases(purchases);
-  if (filtered.length > 0) {
-    return getMostRecentPurchase(filtered);
-  }
-  return null;
-}
-function isPaidPurchase(purchase) {
-  return (purchase.amount ?? 0) > 0;
-}
-
-// src/utils/headers.ts
-var CUSTOMER_REF_KEY = "solvapay_customerRef";
-var CUSTOMER_REF_EXPIRY = "solvapay_customerRef_expiry";
-var CUSTOMER_REF_USER_ID_KEY = "solvapay_customerRef_userId";
-function getAuthAdapter(config) {
-  if (config?.auth?.adapter) {
-    return config.auth.adapter;
-  }
-  if (config?.auth?.getToken || config?.auth?.getUserId) {
-    return {
-      async getToken() {
-        return config?.auth?.getToken?.() || null;
-      },
-      async getUserId() {
-        return config?.auth?.getUserId?.() || null;
-      }
-    };
-  }
-  return defaultAuthAdapter;
-}
-function getCachedCustomerRef(userId) {
-  if (typeof window === "undefined") return null;
-  const cached = localStorage.getItem(CUSTOMER_REF_KEY);
-  const expiry = localStorage.getItem(CUSTOMER_REF_EXPIRY);
-  const cachedUserId = localStorage.getItem(CUSTOMER_REF_USER_ID_KEY);
-  if (!cached || !expiry) return null;
-  if (Date.now() > parseInt(expiry)) {
-    localStorage.removeItem(CUSTOMER_REF_KEY);
-    localStorage.removeItem(CUSTOMER_REF_EXPIRY);
-    localStorage.removeItem(CUSTOMER_REF_USER_ID_KEY);
-    return null;
-  }
-  if (userId !== void 0 && userId !== null) {
-    if (cachedUserId !== userId) {
-      clearCachedCustomerRef();
-      return null;
-    }
-  }
-  return cached;
-}
-var CACHE_DURATION = 24 * 60 * 60 * 1e3;
-function setCachedCustomerRef(customerRef, userId) {
-  if (typeof window === "undefined") return;
-  if (userId === void 0 || userId === null) {
-    return;
-  }
-  localStorage.setItem(CUSTOMER_REF_KEY, customerRef);
-  localStorage.setItem(CUSTOMER_REF_EXPIRY, String(Date.now() + CACHE_DURATION));
-  localStorage.setItem(CUSTOMER_REF_USER_ID_KEY, userId);
-}
-function clearCachedCustomerRef() {
-  if (typeof window === "undefined") return;
-  localStorage.removeItem(CUSTOMER_REF_KEY);
-  localStorage.removeItem(CUSTOMER_REF_EXPIRY);
-  localStorage.removeItem(CUSTOMER_REF_USER_ID_KEY);
-}
-async function buildRequestHeaders(config) {
-  const adapter = getAuthAdapter(config);
-  const token = await adapter.getToken();
-  const userId = await adapter.getUserId();
-  const cachedRef = getCachedCustomerRef(userId);
-  const headers = {
-    "Content-Type": "application/json"
-  };
-  if (token) {
-    headers["Authorization"] = `Bearer ${token}`;
-  }
-  if (cachedRef) {
-    headers["x-solvapay-customer-ref"] = cachedRef;
-  }
-  if (config?.headers) {
-    const custom = typeof config.headers === "function" ? await config.headers() : config.headers;
-    Object.assign(headers, custom);
-  }
-  return { headers, userId };
-}
-
-// src/SolvaPayProvider.tsx
-import { jsx } from "react/jsx-runtime";
-var SolvaPayContext = createContext(null);
-var SolvaPayProvider = ({
-  config,
-  createPayment: customCreatePayment,
-  checkPurchase: customCheckPurchase,
-  processPayment: customProcessPayment,
-  createTopupPayment: customCreateTopupPayment,
-  children
-}) => {
-  const [purchaseData, setPurchaseData] = useState({
-    purchases: []
-  });
-  const [loading, setLoading] = useState(false);
-  const [isRefetching, setIsRefetching] = useState(false);
-  const [purchaseError, setPurchaseError] = useState(null);
-  const [internalCustomerRef, setInternalCustomerRef] = useState(void 0);
-  const [userId, setUserId] = useState(null);
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
-  const [creditsValue, setCreditsValue] = useState(null);
-  const [displayCurrencyValue, setDisplayCurrencyValue] = useState(null);
-  const [creditsPerMinorUnitValue, setCreditsPerMinorUnitValue] = useState(null);
-  const [displayExchangeRateValue, setDisplayExchangeRateValue] = useState(null);
-  const [balanceLoading, setBalanceLoading] = useState(false);
-  const balanceInFlightRef = useRef(false);
-  const balanceLoadedRef = useRef(false);
-  const optimisticUntilRef = useRef(0);
-  const optimisticTimerRef = useRef(null);
-  const fetchBalanceRef = useRef(null);
-  const inFlightRef = useRef(null);
-  const checkPurchaseRef = useRef(null);
-  const createPaymentRef = useRef(null);
-  const processPaymentRef = useRef(null);
-  const createTopupPaymentRef = useRef(null);
-  const configRef = useRef(config);
-  const buildDefaultCheckPurchaseRef = useRef(
-    null
-  );
-  useEffect(() => {
-    configRef.current = config;
-  }, [config]);
-  useEffect(() => {
-    checkPurchaseRef.current = customCheckPurchase || null;
-  }, [customCheckPurchase]);
-  useEffect(() => {
-    createPaymentRef.current = customCreatePayment || null;
-  }, [customCreatePayment]);
-  useEffect(() => {
-    processPaymentRef.current = customProcessPayment || null;
-  }, [customProcessPayment]);
-  useEffect(() => {
-    createTopupPaymentRef.current = customCreateTopupPayment || null;
-  }, [customCreateTopupPayment]);
-  const buildDefaultCheckPurchase = useCallback(async () => {
-    const currentConfig = configRef.current;
-    const { headers } = await buildRequestHeaders(currentConfig);
-    const route = currentConfig?.api?.checkPurchase || "/api/check-purchase";
-    const fetchFn = currentConfig?.fetch || fetch;
-    const res = await fetchFn(route, { method: "GET", headers });
-    if (!res.ok) {
-      const error = new Error(`Failed to check purchase: ${res.statusText}`);
-      currentConfig?.onError?.(error, "checkPurchase");
-      throw error;
-    }
-    return res.json();
-  }, []);
-  useEffect(() => {
-    buildDefaultCheckPurchaseRef.current = buildDefaultCheckPurchase;
-  }, [buildDefaultCheckPurchase]);
-  const buildDefaultCreatePayment = useCallback(
-    async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.createPayment || "/api/create-payment-intent";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const body = {};
-      if (params.planRef) {
-        body.planRef = params.planRef;
-      }
-      if (params.productRef) {
-        body.productRef = params.productRef;
-      }
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(body)
-      });
-      if (!res.ok) {
-        const error = new Error(`Failed to create payment: ${res.statusText}`);
-        currentConfig?.onError?.(error, "createPayment");
-        throw error;
-      }
-      return res.json();
-    },
-    []
-  );
-  const buildDefaultProcessPayment = useCallback(
-    async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.processPayment || "/api/process-payment";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(params)
-      });
-      if (!res.ok) {
-        const error = new Error(`Failed to process payment: ${res.statusText}`);
-        currentConfig?.onError?.(error, "processPayment");
-        throw error;
-      }
-      return res.json();
-    },
-    []
-  );
-  const buildDefaultCreateTopupPayment = useCallback(
-    async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.createTopupPayment || "/api/create-topup-payment-intent";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify({
-          amount: params.amount,
-          currency: params.currency
-        })
-      });
-      if (!res.ok) {
-        const error = new Error(`Failed to create topup payment: ${res.statusText}`);
-        currentConfig?.onError?.(error, "createTopupPayment");
-        throw error;
-      }
-      return res.json();
-    },
-    []
-  );
-  const fetchBalanceImpl = useCallback(async () => {
-    if (optimisticUntilRef.current > Date.now()) return;
-    if (!isAuthenticated && !internalCustomerRef) {
-      setCreditsValue(null);
-      setDisplayCurrencyValue(null);
-      setCreditsPerMinorUnitValue(null);
-      setDisplayExchangeRateValue(null);
-      setBalanceLoading(false);
-      balanceLoadedRef.current = false;
-      return;
-    }
-    if (balanceInFlightRef.current) return;
-    balanceInFlightRef.current = true;
-    if (!balanceLoadedRef.current) {
-      setBalanceLoading(true);
-    }
-    try {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.customerBalance || "/api/customer-balance";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, { method: "GET", headers });
-      if (!res.ok) {
-        console.error("[SolvaPayProvider] Failed to fetch balance:", res.statusText);
-        return;
-      }
-      const data = await res.json();
-      setCreditsValue(data.credits ?? null);
-      setDisplayCurrencyValue(data.displayCurrency ?? null);
-      setCreditsPerMinorUnitValue(data.creditsPerMinorUnit ?? null);
-      setDisplayExchangeRateValue(data.displayExchangeRate ?? null);
-      balanceLoadedRef.current = true;
-    } catch (error) {
-      console.error("[SolvaPayProvider] Failed to fetch balance:", error);
-    } finally {
-      setBalanceLoading(false);
-      balanceInFlightRef.current = false;
-    }
-  }, [isAuthenticated, internalCustomerRef]);
-  useEffect(() => {
-    fetchBalanceRef.current = fetchBalanceImpl;
-  }, [fetchBalanceImpl]);
-  useEffect(() => {
-    return () => {
-      if (optimisticTimerRef.current) clearTimeout(optimisticTimerRef.current);
-    };
-  }, []);
-  const OPTIMISTIC_GRACE_MS = 8e3;
-  const adjustBalanceImpl = useCallback((credits) => {
-    setCreditsValue((prev) => (prev ?? 0) + credits);
-    optimisticUntilRef.current = Date.now() + OPTIMISTIC_GRACE_MS;
-    if (optimisticTimerRef.current) clearTimeout(optimisticTimerRef.current);
-    optimisticTimerRef.current = setTimeout(() => {
-      optimisticUntilRef.current = 0;
-      fetchBalanceRef.current?.();
-    }, OPTIMISTIC_GRACE_MS);
-  }, []);
-  const _checkPurchase = useCallback(async () => {
-    if (checkPurchaseRef.current) {
-      return checkPurchaseRef.current();
-    }
-    if (buildDefaultCheckPurchaseRef.current) {
-      return buildDefaultCheckPurchaseRef.current();
-    }
-    return buildDefaultCheckPurchase();
-  }, [buildDefaultCheckPurchase]);
-  const createPayment = useCallback(
-    async (params) => {
-      if (createPaymentRef.current) {
-        return createPaymentRef.current(params);
-      }
-      return buildDefaultCreatePayment(params);
-    },
-    [buildDefaultCreatePayment]
-  );
-  const processPayment = useCallback(
-    async (params) => {
-      if (processPaymentRef.current) {
-        return processPaymentRef.current(params);
-      }
-      return buildDefaultProcessPayment(params);
-    },
-    [buildDefaultProcessPayment]
-  );
-  const createTopupPayment = useCallback(
-    async (params) => {
-      if (createTopupPaymentRef.current) {
-        return createTopupPaymentRef.current(params);
-      }
-      return buildDefaultCreateTopupPayment(params);
-    },
-    [buildDefaultCreateTopupPayment]
-  );
-  useEffect(() => {
-    const detectAuth = async () => {
-      const currentConfig = configRef.current;
-      const adapter = getAuthAdapter(currentConfig);
-      const token = await adapter.getToken();
-      const detectedUserId = await adapter.getUserId();
-      const prevUserId = userId;
-      setIsAuthenticated(!!token);
-      setUserId(detectedUserId);
-      if (prevUserId !== null && detectedUserId !== prevUserId) {
-        clearCachedCustomerRef();
-        setInternalCustomerRef(void 0);
-        return;
-      }
-      const cachedRef = getCachedCustomerRef(detectedUserId);
-      if (cachedRef && token) {
-        setInternalCustomerRef(cachedRef);
-      } else if (!token) {
-        clearCachedCustomerRef();
-        setInternalCustomerRef(void 0);
-      } else if (token && !cachedRef) {
-        setInternalCustomerRef(void 0);
-      }
-    };
-    detectAuth();
-    const interval = setInterval(detectAuth, 3e4);
-    return () => clearInterval(interval);
-  }, [userId]);
-  const fetchPurchase = useCallback(
-    async (force = false) => {
-      if (!isAuthenticated && !internalCustomerRef) {
-        setPurchaseData({ purchases: [] });
-        setPurchaseError(null);
-        setLoading(false);
-        setIsRefetching(false);
-        inFlightRef.current = null;
-        return;
-      }
-      const cacheKey = internalCustomerRef || userId || "anonymous";
-      if (inFlightRef.current === cacheKey && !force) {
-        return;
-      }
-      inFlightRef.current = cacheKey;
-      const hasExistingData = purchaseData.purchases.length > 0;
-      if (hasExistingData) {
-        setIsRefetching(true);
-      } else {
-        setLoading(true);
-      }
-      try {
-        const checkFn = checkPurchaseRef.current || buildDefaultCheckPurchaseRef.current;
-        if (!checkFn) {
-          throw new Error("checkPurchase function not available");
-        }
-        const data = await checkFn();
-        if (data.customerRef) {
-          setInternalCustomerRef(data.customerRef);
-          const currentAdapter = getAuthAdapter(configRef.current);
-          const currentUserId = await currentAdapter.getUserId();
-          setCachedCustomerRef(data.customerRef, currentUserId);
-        }
-        if (inFlightRef.current === cacheKey) {
-          const filteredData = {
-            ...data,
-            purchases: filterPurchases(data.purchases || [])
-          };
-          setPurchaseData(filteredData);
-          setPurchaseError(null);
-        }
-      } catch (err) {
-        console.error("[SolvaPayProvider] Failed to fetch purchase:", err);
-        if (inFlightRef.current === cacheKey) {
-          setPurchaseError(err instanceof Error ? err : new Error(String(err)));
-        }
-      } finally {
-        if (inFlightRef.current === cacheKey) {
-          setLoading(false);
-          setIsRefetching(false);
-          inFlightRef.current = null;
-        }
-      }
-    },
-    [isAuthenticated, internalCustomerRef, userId, purchaseData.purchases.length]
-  );
-  const fetchPurchaseRef = useRef(fetchPurchase);
-  useEffect(() => {
-    fetchPurchaseRef.current = fetchPurchase;
-  }, [fetchPurchase]);
-  const refetchPurchase = useCallback(async () => {
-    inFlightRef.current = null;
-    await fetchPurchaseRef.current(true);
-  }, []);
-  const cancelRenewal = useCallback(
-    async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.cancelRenewal || "/api/cancel-renewal";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(params)
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        const error = new Error(data.error || `Failed to cancel renewal: ${res.statusText}`);
-        currentConfig?.onError?.(error, "cancelRenewal");
-        throw error;
-      }
-      const result = await res.json();
-      await refetchPurchase();
-      return result;
-    },
-    [refetchPurchase]
-  );
-  const reactivateRenewal = useCallback(
-    async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.reactivateRenewal || "/api/reactivate-renewal";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(params)
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        const error = new Error(data.error || `Failed to reactivate renewal: ${res.statusText}`);
-        currentConfig?.onError?.(error, "reactivateRenewal");
-        throw error;
-      }
-      const result = await res.json();
-      await refetchPurchase();
-      return result;
-    },
-    [refetchPurchase]
-  );
-  const activatePlan = useCallback(
-    async (params) => {
-      const currentConfig = configRef.current;
-      const { headers } = await buildRequestHeaders(currentConfig);
-      const route = currentConfig?.api?.activatePlan || "/api/activate-plan";
-      const fetchFn = currentConfig?.fetch || fetch;
-      const res = await fetchFn(route, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(params)
-      });
-      if (!res.ok) {
-        const data = await res.json().catch(() => ({}));
-        const error = new Error(data.error || `Failed to activate plan: ${res.statusText}`);
-        currentConfig?.onError?.(error, "activatePlan");
-        throw error;
-      }
-      const result = await res.json();
-      if (result.status === "activated" || result.status === "already_active") {
-        await refetchPurchase();
-      }
-      return result;
-    },
-    [refetchPurchase]
-  );
-  useEffect(() => {
-    inFlightRef.current = null;
-    if (isAuthenticated || internalCustomerRef) {
-      fetchPurchase();
-    } else {
-      setPurchaseData({ purchases: [] });
-      setPurchaseError(null);
-      setLoading(false);
-      setIsRefetching(false);
-    }
-  }, [isAuthenticated, internalCustomerRef, userId]);
-  const updateCustomerRef = useCallback(
-    (newCustomerRef) => {
-      setInternalCustomerRef(newCustomerRef);
-      setCachedCustomerRef(newCustomerRef, userId);
-      fetchPurchase(true);
-    },
-    [fetchPurchase, userId]
-  );
-  const purchase = useMemo(() => {
-    const activePurchase = getPrimaryPurchase(purchaseData.purchases);
-    const activePaidPurchases = purchaseData.purchases.filter(
-      (p) => p.status === "active" && isPaidPurchase(p)
-    );
-    const activePaidPurchase = activePaidPurchases.sort(
-      (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
-    )[0] || null;
-    return {
-      loading,
-      isRefetching,
-      error: purchaseError,
-      customerRef: purchaseData.customerRef || internalCustomerRef,
-      email: purchaseData.email,
-      name: purchaseData.name,
-      purchases: purchaseData.purchases,
-      hasProduct: (productName) => {
-        return purchaseData.purchases.some(
-          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
-        );
-      },
-      hasPlan: (productName) => {
-        return purchaseData.purchases.some(
-          (p) => p.productName.toLowerCase() === productName.toLowerCase() && p.status === "active"
-        );
-      },
-      activePurchase,
-      hasPaidPurchase: activePaidPurchases.length > 0,
-      activePaidPurchase
-    };
-  }, [loading, isRefetching, purchaseError, purchaseData, internalCustomerRef]);
-  const balance = useMemo(
-    () => ({
-      loading: balanceLoading,
-      credits: creditsValue,
-      displayCurrency: displayCurrencyValue,
-      creditsPerMinorUnit: creditsPerMinorUnitValue,
-      displayExchangeRate: displayExchangeRateValue,
-      refetch: fetchBalanceImpl,
-      adjustBalance: adjustBalanceImpl
-    }),
-    [balanceLoading, creditsValue, displayCurrencyValue, creditsPerMinorUnitValue, displayExchangeRateValue, fetchBalanceImpl, adjustBalanceImpl]
-  );
-  const contextValue = useMemo(
-    () => ({
-      purchase,
-      refetchPurchase,
-      createPayment,
-      processPayment,
-      createTopupPayment,
-      cancelRenewal,
-      reactivateRenewal,
-      activatePlan,
-      customerRef: purchaseData.customerRef || internalCustomerRef,
-      updateCustomerRef,
-      balance,
-      _config: configRef.current
-    }),
-    [
-      purchase,
-      refetchPurchase,
-      createPayment,
-      processPayment,
-      createTopupPayment,
-      cancelRenewal,
-      reactivateRenewal,
-      activatePlan,
-      purchaseData.customerRef,
-      internalCustomerRef,
-      updateCustomerRef,
-      balance
-    ]
-  );
-  return /* @__PURE__ */ jsx(SolvaPayContext.Provider, { value: contextValue, children });
-};
-
 // src/PaymentForm.tsx
-import { useEffect as useEffect2, useCallback as useCallback3, useRef as useRef3, useMemo as useMemo2, useState as useState4 } from "react";
-import { Elements } from "@stripe/react-stripe-js";
-
-// src/hooks/useCheckout.ts
-import { useState as useState2, useCallback as useCallback2, useRef as useRef2 } from "react";
-import { loadStripe } from "@stripe/stripe-js";
-
-// src/hooks/useSolvaPay.ts
-import { useContext } from "react";
-function useSolvaPay() {
-  const context = useContext(SolvaPayContext);
-  if (!context) {
-    throw new Error(
-      "useSolvaPay must be used within a SolvaPayProvider. Wrap your component tree with <SolvaPayProvider> to use this hook."
-    );
-  }
-  return context;
-}
-
-// src/hooks/useCheckout.ts
-var stripePromiseCache = /* @__PURE__ */ new Map();
-function getStripeCacheKey(publishableKey, accountId) {
-  return accountId ? `${publishableKey}:${accountId}` : publishableKey;
-}
-async function resolvePlanRef(productRef, fetchFn, headers, listPlansRoute) {
-  const url = `${listPlansRoute}?productRef=${encodeURIComponent(productRef)}`;
-  const res = await fetchFn(url, { method: "GET", headers });
-  if (!res.ok) {
-    throw new Error(`Failed to fetch plans for product "${productRef}": ${res.statusText}`);
-  }
-  const data = await res.json();
-  const allPlans = data.plans ?? [];
-  const activePlans = allPlans.filter((p) => p.isActive !== false && p.status !== "inactive");
-  if (activePlans.length === 0) {
-    throw new Error(
-      `No active plans found for product "${productRef}". Configure at least one plan in the SolvaPay Console.`
-    );
-  }
-  if (activePlans.length === 1) {
-    return activePlans[0].reference;
-  }
-  const defaultPlan = activePlans.find((p) => p.default === true);
-  if (defaultPlan) {
-    return defaultPlan.reference;
-  }
-  throw new Error(
-    `Product "${productRef}" has ${activePlans.length} active plans but none is marked as default. Either pass planRef explicitly, use <PricingSelector> for user selection, or mark one plan as default in the SolvaPay Console.`
-  );
-}
-function useCheckout(options) {
-  const { planRef, productRef } = options;
-  const { createPayment, customerRef, updateCustomerRef, _config } = useSolvaPay();
-  const [loading, setLoading] = useState2(false);
-  const [error, setError] = useState2(null);
-  const [stripePromise, setStripePromise] = useState2(null);
-  const [clientSecret, setClientSecret] = useState2(null);
-  const [resolvedPlanRef, setResolvedPlanRef] = useState2(planRef || null);
-  const isStartingRef = useRef2(false);
-  const startCheckout = useCallback2(async () => {
-    if (isStartingRef.current || loading) {
-      return;
-    }
-    if (!planRef && !productRef) {
-      setError(
-        new Error(
-          "useCheckout: either planRef or productRef is required. Pass planRef directly, or pass productRef to auto-resolve the plan."
-        )
-      );
-      return;
-    }
-    isStartingRef.current = true;
-    setLoading(true);
-    setError(null);
-    try {
-      let effectivePlanRef = planRef;
-      if (!effectivePlanRef && productRef) {
-        const listPlansRoute = _config?.api?.listPlans || "/api/list-plans";
-        effectivePlanRef = await resolvePlanRef(productRef, fetch, {}, listPlansRoute);
-        setResolvedPlanRef(effectivePlanRef);
-      }
-      if (!effectivePlanRef) {
-        throw new Error("Could not determine plan reference for checkout");
-      }
-      const result = await createPayment({ planRef: effectivePlanRef, productRef });
-      if (!result || typeof result !== "object") {
-        throw new Error("Invalid payment intent response from server");
-      }
-      if (!result.clientSecret || typeof result.clientSecret !== "string") {
-        throw new Error("Invalid client secret in payment intent response");
-      }
-      if (!result.publishableKey || typeof result.publishableKey !== "string") {
-        throw new Error("Invalid publishable key in payment intent response");
-      }
-      if (result.customerRef && result.customerRef !== customerRef && updateCustomerRef) {
-        updateCustomerRef(result.customerRef);
-      }
-      const stripeOptions = result.accountId ? { stripeAccount: result.accountId } : {};
-      const cacheKey = getStripeCacheKey(result.publishableKey, result.accountId);
-      let stripe = stripePromiseCache.get(cacheKey);
-      if (!stripe) {
-        stripe = loadStripe(result.publishableKey, stripeOptions);
-        stripePromiseCache.set(cacheKey, stripe);
-      }
-      setStripePromise(stripe);
-      setClientSecret(result.clientSecret);
-    } catch (err) {
-      const error2 = err instanceof Error ? err : new Error("Failed to start checkout");
-      setError(error2);
-    } finally {
-      setLoading(false);
-      isStartingRef.current = false;
-    }
-  }, [planRef, productRef, createPayment, updateCustomerRef, loading, _config]);
-  const reset = useCallback2(() => {
-    isStartingRef.current = false;
-    setLoading(false);
-    setError(null);
-    setStripePromise(null);
-    setClientSecret(null);
-    setResolvedPlanRef(planRef || null);
-  }, [planRef]);
-  return {
-    loading,
-    error,
-    stripePromise,
-    clientSecret,
-    resolvedPlanRef,
-    startCheckout,
-    reset
-  };
-}
-
-// src/hooks/usePurchase.ts
-function usePurchase() {
-  const { purchase, refetchPurchase } = useSolvaPay();
-  return {
-    ...purchase,
-    refetch: refetchPurchase
-  };
-}
-
-// src/components/Spinner.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Spinner = ({
-  className = "",
-  size = "md"
-}) => {
-  const sizeClasses = {
-    sm: "h-4 w-4",
-    md: "h-5 w-5",
-    lg: "h-6 w-6"
-  };
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      className: `animate-spin ${sizeClasses[size]} ${className}`,
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      role: "status",
-      "aria-busy": "true",
-      children: [
-        /* @__PURE__ */ jsx2("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ jsx2(
-          "path",
-          {
-            className: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          }
-        )
-      ]
-    }
-  );
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DefaultTree = ({
+  requireTermsAcceptance
+}) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(PaymentForm.Summary, {}),
+  /* @__PURE__ */ jsx(PaymentForm.CustomerFields, {}),
+  /* @__PURE__ */ jsx(PaymentForm.PaymentElement, {}),
+  /* @__PURE__ */ jsx(PaymentForm.Error, {}),
+  /* @__PURE__ */ jsx(PaymentForm.MandateText, {}),
+  requireTermsAcceptance && /* @__PURE__ */ jsx(PaymentForm.TermsCheckbox, {}),
+  /* @__PURE__ */ jsx(PaymentForm.SubmitButton, {})
+] });
+var PaymentFormBase = (props) => {
+  const { children, requireTermsAcceptance = false } = props;
+  return /* @__PURE__ */ jsx(PaymentForm.Root, { ...props, children: children ?? /* @__PURE__ */ jsx(DefaultTree, { requireTermsAcceptance }) });
 };
+var PaymentForm2 = Object.assign(PaymentFormBase, {
+  Summary: PaymentFormSummary,
+  CustomerFields: PaymentFormCustomerFields,
+  PaymentElement: PaymentFormPaymentElement,
+  CardElement: PaymentFormCardElement,
+  MandateText: PaymentFormMandateText,
+  TermsCheckbox: PaymentFormTermsCheckbox,
+  SubmitButton: PaymentFormSubmitButton,
+  Loading: PaymentFormLoading,
+  Error: PaymentFormError
+});
 
 // src/components/StripePaymentFormWrapper.tsx
-import { useState as useState3 } from "react";
+import { useState } from "react";
 import { useStripe, useElements, CardElement } from "@stripe/react-stripe-js";
-
-// src/hooks/useCustomer.ts
-function useCustomer() {
-  const { purchase, customerRef } = useSolvaPay();
-  return {
-    customerRef: purchase.customerRef || customerRef,
-    email: purchase.email,
-    name: purchase.name,
-    loading: purchase.loading
-  };
-}
-
-// src/components/StripePaymentFormWrapper.tsx
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var StripePaymentFormWrapper = ({
   onSuccess,
   onError,
   returnUrl: _returnUrl,
-  submitButtonText = "Pay Now",
+  submitButtonText,
   buttonClassName,
   clientSecret
 }) => {
   const stripe = useStripe();
   const elements = useElements();
   const customer = useCustomer();
-  const [isProcessing, setIsProcessing] = useState3(false);
-  const [message, setMessage] = useState3(null);
-  const [cardComplete, setCardComplete] = useState3(false);
+  const copy = useCopy();
+  const effectiveSubmitText = submitButtonText ?? copy.cta.payNow;
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [message, setMessage] = useState(null);
+  const [cardComplete, setCardComplete] = useState(false);
   const handleSubmit = async (event) => {
     event.preventDefault();
     if (!stripe || !elements) {
-      const errorMessage = "Stripe is not available. Please refresh the page.";
+      const errorMessage = copy.errors.stripeUnavailable;
       setMessage(errorMessage);
       if (onError) {
         onError(new Error(errorMessage));
@@ -822,7 +129,7 @@ var StripePaymentFormWrapper = ({
       return;
     }
     if (!clientSecret) {
-      const errorMessage = "Payment intent not available. Please refresh the page.";
+      const errorMessage = copy.errors.paymentIntentUnavailable;
       setMessage(errorMessage);
       if (onError) {
         onError(new Error(errorMessage));
@@ -834,7 +141,7 @@ var StripePaymentFormWrapper = ({
     try {
       const cardElement = elements.getElement(CardElement);
       if (!cardElement) {
-        const errorMessage = "Card element not found";
+        const errorMessage = copy.errors.cardElementMissing;
         setMessage(errorMessage);
         setIsProcessing(false);
         if (onError) {
@@ -852,7 +159,7 @@ var StripePaymentFormWrapper = ({
         }
       });
       if (error) {
-        const errorMessage = error.message || "An unexpected error occurred.";
+        const errorMessage = error.message || copy.errors.paymentUnexpected;
         setMessage(errorMessage);
         setIsProcessing(false);
         if (onError) {
@@ -865,8 +172,8 @@ var StripePaymentFormWrapper = ({
             await onSuccess(paymentIntent);
             setMessage("Payment successful!");
           } catch (err) {
-            const error2 = err instanceof Error ? err : new Error("Payment processing failed");
-            setMessage("Payment processing failed. Please try again or contact support.");
+            const error2 = err instanceof Error ? err : new Error(copy.errors.paymentProcessingFailed);
+            setMessage(copy.errors.paymentProcessingFailed);
             setIsProcessing(false);
             if (onError) {
               onError(error2);
@@ -877,14 +184,18 @@ var StripePaymentFormWrapper = ({
           setMessage("Payment successful!");
         }
       } else if (paymentIntent && paymentIntent.status === "requires_action") {
-        setMessage("Payment requires additional authentication. Please complete the verification.");
+        setMessage(copy.errors.paymentRequires3ds);
         setIsProcessing(false);
       } else if (paymentIntent) {
-        setMessage(`Payment status: ${paymentIntent.status || "processing"}`);
+        setMessage(
+          interpolate(copy.errors.paymentStatusPrefix, {
+            status: paymentIntent.status || "processing"
+          })
+        );
         setIsProcessing(false);
       }
     } catch (err) {
-      const error = err instanceof Error ? err : new Error("Unknown error occurred");
+      const error = err instanceof Error ? err : new Error(copy.errors.unknownError);
       setMessage(error.message);
       if (onError) {
         onError(error);
@@ -912,8 +223,8 @@ var StripePaymentFormWrapper = ({
     },
     hidePostalCode: true
   };
-  return /* @__PURE__ */ jsxs2(Fragment, { children: [
-    isReady ? /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    isReady ? /* @__PURE__ */ jsx2(
       CardElement,
       {
         options: cardElementOptions,
@@ -927,9 +238,9 @@ var StripePaymentFormWrapper = ({
           }
         }
       }
-    ) : /* @__PURE__ */ jsx3("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", minHeight: "52px" }, children: /* @__PURE__ */ jsx3(Spinner, { size: "sm" }) }),
-    message && !isSuccess && /* @__PURE__ */ jsx3("div", { role: "alert", "aria-live": "assertive", "aria-atomic": "true", children: message }),
-    /* @__PURE__ */ jsx3(
+    ) : /* @__PURE__ */ jsx2("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", minHeight: "52px" }, children: /* @__PURE__ */ jsx2(Spinner, { size: "sm" }) }),
+    message && !isSuccess && /* @__PURE__ */ jsx2("div", { role: "alert", "aria-live": "assertive", "aria-atomic": "true", children: message }),
+    /* @__PURE__ */ jsx2(
       "button",
       {
         type: "submit",
@@ -938,936 +249,534 @@ var StripePaymentFormWrapper = ({
         "aria-busy": isProcessing,
         "aria-disabled": !isReady || !cardComplete || isProcessing || !clientSecret,
         onClick: handleSubmit,
-        children: isProcessing ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-          /* @__PURE__ */ jsx3(Spinner, { size: "sm" }),
-          /* @__PURE__ */ jsx3("span", { children: "Processing..." })
-        ] }) : submitButtonText
+        children: isProcessing ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(Spinner, { size: "sm" }),
+          /* @__PURE__ */ jsx2("span", { children: copy.cta.processing })
+        ] }) : effectiveSubmitText
       }
     )
   ] });
 };
 
-// src/PaymentForm.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var PaymentForm = ({
-  planRef,
-  productRef,
-  onSuccess,
-  onError,
-  returnUrl,
-  submitButtonText = "Pay Now",
-  className,
-  buttonClassName
-}) => {
-  const {
-    loading: checkoutLoading,
-    error: checkoutError,
-    clientSecret,
-    startCheckout,
-    stripePromise,
-    resolvedPlanRef
-  } = useCheckout({ planRef, productRef });
-  const { refetch } = usePurchase();
-  const { processPayment } = useSolvaPay();
-  const hasInitializedRef = useRef3(false);
-  const hasPlanOrProduct = !!(planRef || productRef);
-  useEffect2(() => {
-    if (!hasInitializedRef.current && hasPlanOrProduct && !checkoutLoading && !checkoutError && !clientSecret) {
-      hasInitializedRef.current = true;
-      startCheckout().catch(() => {
-        hasInitializedRef.current = false;
-      });
-    }
-    if (hasPlanOrProduct && clientSecret) {
-      hasInitializedRef.current = true;
-    }
-  }, [hasPlanOrProduct, checkoutLoading, checkoutError, clientSecret, startCheckout]);
-  const effectivePlanRef = planRef || resolvedPlanRef;
-  const handleSuccess = useCallback3(
-    async (paymentIntent) => {
-      const paymentIntentAny = paymentIntent;
-      if (processPayment && productRef) {
-        try {
-          const result = await processPayment({
-            paymentIntentId: paymentIntentAny.id,
-            productRef,
-            planRef: effectivePlanRef || void 0
-          });
-          const isTimeout = result?.status === "timeout";
-          if (isTimeout) {
-            for (let attempt = 1; attempt <= 5; attempt++) {
-              await new Promise((resolve) => setTimeout(resolve, attempt * 1e3));
-              await refetch();
-            }
-            const err = new Error("Payment processing timed out \u2014 webhooks may not be configured");
-            onError?.(err);
-            return;
-          }
-          await refetch();
-        } catch (error) {
-          console.error("[PaymentForm] Failed to process payment:", error);
-          onError?.(error instanceof Error ? error : new Error(String(error)));
-          return;
-        }
-      } else {
-        await refetch();
-      }
-      onSuccess?.(paymentIntentAny);
-    },
-    [processPayment, productRef, effectivePlanRef, refetch, onSuccess, onError]
-  );
-  const handleError = useCallback3(
-    (err) => {
-      if (onError) {
-        onError(err);
-      }
-    },
-    [onError]
-  );
-  const finalReturnUrl = returnUrl || (typeof window !== "undefined" ? window.location.href : "/");
-  const hasError = !!checkoutError;
-  const hasStripeData = !!(stripePromise && clientSecret);
-  const elementsOptions = useMemo2(() => {
-    if (!clientSecret) return void 0;
-    return { clientSecret };
-  }, [clientSecret]);
-  const [hasMountedElements, setHasMountedElements] = useState4(false);
-  useEffect2(() => {
-    if (hasStripeData) {
-      setHasMountedElements(true);
-    }
-  }, [hasStripeData]);
-  const shouldRenderElements = hasStripeData || hasMountedElements && stripePromise && clientSecret;
-  return /* @__PURE__ */ jsx4("div", { className, children: !hasPlanOrProduct ? /* @__PURE__ */ jsx4("div", { children: "PaymentForm: either planRef or productRef is required" }) : hasError ? /* @__PURE__ */ jsxs3("div", { children: [
-    /* @__PURE__ */ jsx4("div", { children: "Payment initialization failed" }),
-    /* @__PURE__ */ jsx4("div", { children: checkoutError?.message || "Unknown error" })
-  ] }) : shouldRenderElements && elementsOptions ? /* @__PURE__ */ jsx4(
-    Elements,
-    {
-      stripe: stripePromise,
-      options: elementsOptions,
-      children: /* @__PURE__ */ jsx4(
-        StripePaymentFormWrapper,
-        {
-          onSuccess: handleSuccess,
-          onError: handleError,
-          returnUrl: finalReturnUrl,
-          submitButtonText,
-          buttonClassName,
-          clientSecret
-        }
-      )
-    },
-    clientSecret
-  ) : /* @__PURE__ */ jsxs3("div", { children: [
+// src/components/CheckoutLayout.tsx
+import { useCallback, useContext, useEffect, useMemo, useRef, useState as useState2 } from "react";
+
+// src/components/PlanSelector.tsx
+import { Fragment as Fragment3, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DefaultTree2 = () => /* @__PURE__ */ jsxs3(Fragment3, { children: [
+  /* @__PURE__ */ jsx3(PlanSelector.Heading, { className: "solvapay-plan-selector-heading" }),
+  /* @__PURE__ */ jsx3(PlanSelector.Grid, { className: "solvapay-plan-selector-grid", children: /* @__PURE__ */ jsxs3(PlanSelector.Card, { className: "solvapay-plan-selector-card", children: [
+    /* @__PURE__ */ jsx3(PlanSelector.CardBadge, { className: "solvapay-plan-selector-card-badge" }),
+    /* @__PURE__ */ jsx3(PlanSelector.CardName, { className: "solvapay-plan-selector-card-name" }),
+    /* @__PURE__ */ jsx3(PlanSelector.CardPrice, { className: "solvapay-plan-selector-card-price" }),
+    /* @__PURE__ */ jsx3(PlanSelector.CardInterval, { className: "solvapay-plan-selector-card-interval" })
+  ] }) }),
+  /* @__PURE__ */ jsx3(PlanSelector.Loading, { className: "solvapay-plan-selector-loading" }),
+  /* @__PURE__ */ jsx3(PlanSelector.Error, { className: "solvapay-plan-selector-error" })
+] });
+var PlanSelector2 = (props) => {
+  const { children, className, ...rootProps } = props;
+  const rootClass = ["solvapay-plan-selector", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx3(PlanSelector.Root, { ...rootProps, className: rootClass, children: children ?? /* @__PURE__ */ jsx3(DefaultTree2, {}) });
+};
+
+// src/components/ActivationFlow.tsx
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ActivationFlow2 = (props) => {
+  const { className, onBack, ...rootProps } = props;
+  const rootClass = ["solvapay-activation-flow", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs4(ActivationFlow.Root, { ...rootProps, className: rootClass, children: [
+    /* @__PURE__ */ jsx4(SummaryStep, {}),
+    /* @__PURE__ */ jsx4(AmountStep, {}),
+    /* @__PURE__ */ jsx4(TopupPaymentStep, {}),
+    /* @__PURE__ */ jsx4(RetryingStep, {}),
+    /* @__PURE__ */ jsx4(ActivatedStep, {}),
+    /* @__PURE__ */ jsx4(ErrorStep, {}),
+    onBack && /* @__PURE__ */ jsx4(BackButton, { onBack })
+  ] });
+};
+var SummaryStep = () => {
+  const copy = useCopy();
+  return /* @__PURE__ */ jsxs4(ActivationFlow.Summary, { className: "solvapay-activation-flow-summary", children: [
+    /* @__PURE__ */ jsx4("h3", { className: "solvapay-activation-flow-heading", children: copy.activationFlow.heading }),
+    /* @__PURE__ */ jsx4(CheckoutSummary, {}),
+    /* @__PURE__ */ jsx4(ActivationFlow.ActivateButton, { className: "solvapay-activation-flow-activate" })
+  ] });
+};
+var AmountStep = () => {
+  const copy = useCopy();
+  return /* @__PURE__ */ jsxs4(ActivationFlow.AmountPicker, { children: [
+    /* @__PURE__ */ jsx4("h3", { className: "solvapay-activation-flow-topup-heading", children: copy.activationFlow.topupHeading }),
+    /* @__PURE__ */ jsx4("p", { className: "solvapay-activation-flow-topup-subheading", children: copy.activationFlow.topupSubheading }),
+    /* @__PURE__ */ jsx4(AmountPickerBody, {}),
+    /* @__PURE__ */ jsx4(ActivationFlow.ContinueButton, { className: "solvapay-activation-flow-continue" })
+  ] });
+};
+var AmountPickerBody = () => {
+  const ctx = useAmountPicker();
+  const { selectAmountLabel, customAmountLabel } = useAmountPickerCopy();
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    /* @__PURE__ */ jsx4("p", { className: "solvapay-amount-picker-label", children: selectAmountLabel }),
+    /* @__PURE__ */ jsx4("div", { className: "solvapay-amount-picker-pills", children: ctx.quickAmounts.map((amount) => /* @__PURE__ */ jsx4(
+      AmountPicker.Option,
+      {
+        amount,
+        className: "solvapay-amount-picker-pill"
+      },
+      amount
+    )) }),
+    /* @__PURE__ */ jsxs4("div", { className: "solvapay-amount-picker-custom-wrapper", children: [
+      /* @__PURE__ */ jsx4("p", { className: "solvapay-amount-picker-custom-label", children: customAmountLabel }),
+      /* @__PURE__ */ jsx4(AmountPicker.Custom, { className: "solvapay-amount-picker-custom-input" })
+    ] })
+  ] });
+};
+var TopupPaymentStep = () => {
+  const ctx = useActivationFlow();
+  const copy = useCopy();
+  if (ctx.step !== "topupPayment") return null;
+  return /* @__PURE__ */ jsxs4("div", { "data-solvapay-activation-flow-topup-payment": "", children: [
     /* @__PURE__ */ jsx4(
-      "div",
+      "button",
       {
-        style: {
-          minHeight: "40px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        children: /* @__PURE__ */ jsx4(Spinner, { size: "md" })
+        type: "button",
+        onClick: ctx.backToSelectAmount,
+        className: "solvapay-activation-flow-change-amount",
+        children: copy.activationFlow.changeAmountButton
       }
     ),
     /* @__PURE__ */ jsx4(
-      "button",
+      TopupForm,
       {
-        type: "submit",
-        disabled: true,
-        className: buttonClassName,
-        "aria-busy": "false",
-        "aria-disabled": "true",
-        children: submitButtonText
+        amount: ctx.amountCents,
+        currency: ctx.currency,
+        onSuccess: ctx.onTopupSuccess,
+        onError: (err) => ctx.onError?.(err instanceof Error ? err : new Error(String(err)))
       }
     )
-  ] }) });
+  ] });
 };
-
-// src/TopupForm.tsx
-import { useEffect as useEffect3, useCallback as useCallback5, useRef as useRef5, useMemo as useMemo3 } from "react";
-import { Elements as Elements2 } from "@stripe/react-stripe-js";
-
-// src/hooks/useTopup.ts
-import { useState as useState5, useCallback as useCallback4, useRef as useRef4 } from "react";
-import { loadStripe as loadStripe2 } from "@stripe/stripe-js";
-var stripePromiseCache2 = /* @__PURE__ */ new Map();
-function getStripeCacheKey2(publishableKey, accountId) {
-  return accountId ? `${publishableKey}:${accountId}` : publishableKey;
-}
-function useTopup(options) {
-  const { amount, currency } = options;
-  const { createTopupPayment, customerRef, updateCustomerRef } = useSolvaPay();
-  const [loading, setLoading] = useState5(false);
-  const [error, setError] = useState5(null);
-  const [stripePromise, setStripePromise] = useState5(null);
-  const [clientSecret, setClientSecret] = useState5(null);
-  const isStartingRef = useRef4(false);
-  const startTopup = useCallback4(async () => {
-    if (isStartingRef.current || loading) {
-      return;
-    }
-    if (!amount || amount <= 0) {
-      setError(new Error("useTopup: amount must be a positive number"));
-      return;
-    }
-    isStartingRef.current = true;
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await createTopupPayment({ amount, currency });
-      if (!result || typeof result !== "object") {
-        throw new Error("Invalid topup payment intent response from server");
-      }
-      if (!result.clientSecret || typeof result.clientSecret !== "string") {
-        throw new Error("Invalid client secret in topup payment intent response");
-      }
-      if (!result.publishableKey || typeof result.publishableKey !== "string") {
-        throw new Error("Invalid publishable key in topup payment intent response");
-      }
-      if (result.customerRef && result.customerRef !== customerRef && updateCustomerRef) {
-        updateCustomerRef(result.customerRef);
-      }
-      const stripeOptions = result.accountId ? { stripeAccount: result.accountId } : {};
-      const cacheKey = getStripeCacheKey2(result.publishableKey, result.accountId);
-      let stripe = stripePromiseCache2.get(cacheKey);
-      if (!stripe) {
-        stripe = loadStripe2(result.publishableKey, stripeOptions);
-        stripePromiseCache2.set(cacheKey, stripe);
+var RetryingStep = () => {
+  const copy = useCopy();
+  return /* @__PURE__ */ jsxs4(ActivationFlow.Retrying, { className: "solvapay-activation-flow-retrying", children: [
+    /* @__PURE__ */ jsx4("h3", { className: "solvapay-activation-flow-heading", children: copy.activationFlow.retryingHeading }),
+    /* @__PURE__ */ jsx4("p", { children: copy.activationFlow.retryingSubheading })
+  ] });
+};
+var ActivatedStep = () => {
+  const copy = useCopy();
+  return /* @__PURE__ */ jsxs4(ActivationFlow.Activated, { className: "solvapay-activation-flow-activated", children: [
+    /* @__PURE__ */ jsx4("h3", { children: copy.activationFlow.activatedHeading }),
+    /* @__PURE__ */ jsx4("p", { children: copy.activationFlow.activatedSubheading })
+  ] });
+};
+var ErrorStep = () => {
+  const ctx = useActivationFlow();
+  const copy = useCopy();
+  if (ctx.step !== "error") return null;
+  return /* @__PURE__ */ jsxs4("div", { className: "solvapay-activation-flow-error", role: "alert", children: [
+    /* @__PURE__ */ jsx4("p", { children: ctx.error }),
+    /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        onClick: ctx.reset,
+        className: "solvapay-activation-flow-try-again",
+        children: copy.activationFlow.tryAgainButton
       }
-      setStripePromise(stripe);
-      setClientSecret(result.clientSecret);
-    } catch (err) {
-      const error2 = err instanceof Error ? err : new Error("Failed to start topup");
-      setError(error2);
-    } finally {
-      setLoading(false);
-      isStartingRef.current = false;
+    )
+  ] });
+};
+var BackButton = ({ onBack }) => {
+  const ctx = useActivationFlow();
+  const copy = useCopy();
+  if (ctx.step !== "summary") return null;
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      type: "button",
+      onClick: onBack,
+      className: "solvapay-activation-flow-back",
+      children: copy.activationFlow.backButton
     }
-  }, [amount, currency, createTopupPayment, customerRef, updateCustomerRef, loading]);
-  const reset = useCallback4(() => {
-    isStartingRef.current = false;
-    setLoading(false);
-    setError(null);
-    setStripePromise(null);
-    setClientSecret(null);
-  }, []);
-  return {
-    loading,
-    error,
-    stripePromise,
-    clientSecret,
-    startTopup,
-    reset
-  };
-}
+  );
+};
 
-// src/TopupForm.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-var TopupForm = ({
-  amount,
-  currency,
+// src/components/CheckoutLayout.tsx
+import { Fragment as Fragment5, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var BREAKPOINTS = {
+  chat: 480,
+  desktop: 768
+};
+function widthToSize(width) {
+  if (width < BREAKPOINTS.chat) return "chat";
+  if (width < BREAKPOINTS.desktop) return "mobile";
+  return "desktop";
+}
+var CheckoutLayout = ({
+  planRef,
+  productRef,
+  prefillCustomer,
+  size = "auto",
+  requireTermsAcceptance,
   onSuccess,
+  onResult,
+  onFreePlan,
   onError,
-  returnUrl,
-  submitButtonText = "Top Up",
-  className,
-  buttonClassName
+  initialPlanRef,
+  onPlanSelect,
+  planSelector,
+  showBackButton = true,
+  submitButtonText,
+  returnUrl
 }) => {
-  const {
-    loading: topupLoading,
-    error: topupError,
-    clientSecret,
-    startTopup,
-    stripePromise
-  } = useTopup({ amount, currency });
-  const hasInitializedRef = useRef5(false);
-  const hasAmount = amount > 0;
-  useEffect3(() => {
-    if (!hasInitializedRef.current && hasAmount && !topupLoading && !topupError && !clientSecret) {
-      hasInitializedRef.current = true;
-      startTopup().catch(() => {
-        hasInitializedRef.current = false;
-      });
-    }
-    if (hasAmount && clientSecret) {
-      hasInitializedRef.current = true;
-    }
-  }, [hasAmount, topupLoading, topupError, clientSecret, startTopup]);
-  const handleSuccess = useCallback5(
-    async (paymentIntent) => {
-      if (onSuccess) {
-        await onSuccess(paymentIntent);
+  const rootRef = useRef(null);
+  const [autoSize, setAutoSize] = useState2("desktop");
+  const copy = useCopy();
+  useEffect(() => {
+    if (size !== "auto") return;
+    const el = rootRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        setAutoSize(widthToSize(entry.contentRect.width));
       }
-    },
-    [onSuccess]
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [size]);
+  const resolvedSize = size === "auto" ? autoSize : size;
+  const [selectedPlanRef, setSelectedPlanRef] = useState2(
+    planRef ?? initialPlanRef ?? null
   );
-  const handleError = useCallback5(
-    (err) => {
-      if (onError) {
-        onError(err);
-      }
+  const [userStep, setUserStep] = useState2(
+    planRef ? "pay" : selectedPlanRef ? "pay" : "select"
+  );
+  const effectivePlanRef = planRef ?? selectedPlanRef ?? void 0;
+  const { plan: resolvedPlan } = usePlan({
+    planRef: effectivePlanRef,
+    productRef
+  });
+  const isUsageBased = resolvedPlan?.type === "usage-based";
+  const step = useMemo(() => {
+    if (userStep === "pay" && isUsageBased) return "activate";
+    if (userStep === "activate" && resolvedPlan && !isUsageBased) return "pay";
+    return userStep;
+  }, [userStep, isUsageBased, resolvedPlan]);
+  const handlePlanSelect = useCallback(
+    (ref, plan) => {
+      setSelectedPlanRef(ref);
+      onPlanSelect?.(ref, plan);
+      setUserStep(plan.type === "usage-based" ? "activate" : "pay");
     },
-    [onError]
+    [onPlanSelect]
   );
-  const finalReturnUrl = returnUrl || (typeof window !== "undefined" ? window.location.href : "/");
-  const hasError = !!topupError;
-  const hasStripeData = !!(stripePromise && clientSecret);
-  const elementsOptions = useMemo3(() => {
-    if (!clientSecret) return void 0;
-    return { clientSecret };
-  }, [clientSecret]);
-  return /* @__PURE__ */ jsx5("div", { className, children: !hasAmount ? /* @__PURE__ */ jsx5("div", { children: "TopupForm: amount must be a positive number" }) : hasError ? /* @__PURE__ */ jsxs4("div", { children: [
-    /* @__PURE__ */ jsx5("div", { children: "Top-up initialization failed" }),
-    /* @__PURE__ */ jsx5("div", { children: topupError?.message || "Unknown error" })
-  ] }) : hasStripeData && elementsOptions ? /* @__PURE__ */ jsx5(
-    Elements2,
+  const handleBack = useCallback(() => {
+    if (planRef) return;
+    setUserStep("select");
+  }, [planRef]);
+  return /* @__PURE__ */ jsxs5(
+    "div",
     {
-      stripe: stripePromise,
-      options: elementsOptions,
-      children: /* @__PURE__ */ jsx5(
-        StripePaymentFormWrapper,
-        {
-          onSuccess: handleSuccess,
-          onError: handleError,
-          returnUrl: finalReturnUrl,
-          submitButtonText,
-          buttonClassName,
-          clientSecret
-        }
-      )
-    },
-    clientSecret
-  ) : /* @__PURE__ */ jsxs4("div", { children: [
+      ref: rootRef,
+      "data-solvapay-checkout-layout": resolvedSize,
+      "data-solvapay-step": step,
+      className: "solvapay-checkout-layout",
+      children: [
+        !planRef && showBackButton && step !== "select" && /* @__PURE__ */ jsx5(
+          "button",
+          {
+            type: "button",
+            onClick: handleBack,
+            "data-solvapay-checkout-back": "",
+            className: "solvapay-back",
+            children: copy.planSelector.backButton
+          }
+        ),
+        step === "select" && /* @__PURE__ */ jsx5(
+          SelectStep,
+          {
+            productRef: productRef ?? "",
+            initialPlanRef: initialPlanRef ?? selectedPlanRef ?? void 0,
+            filter: planSelector?.filter,
+            sortBy: planSelector?.sortBy,
+            popularPlanRef: planSelector?.popularPlanRef,
+            onContinue: handlePlanSelect
+          }
+        ),
+        step === "activate" && resolvedPlan && productRef && /* @__PURE__ */ jsx5(
+          ActivationFlow2,
+          {
+            productRef,
+            planRef: effectivePlanRef,
+            onBack: planRef ? void 0 : handleBack,
+            onSuccess: (result) => onResult?.(result),
+            onError
+          }
+        ),
+        step === "pay" && /* @__PURE__ */ jsx5(
+          PaymentForm2,
+          {
+            planRef: effectivePlanRef,
+            productRef,
+            prefillCustomer,
+            requireTermsAcceptance,
+            onSuccess,
+            onResult,
+            onFreePlan,
+            onError,
+            submitButtonText,
+            returnUrl
+          }
+        )
+      ]
+    }
+  );
+};
+async function defaultListPlans(productRef, config) {
+  const base = config?.api?.listPlans || "/api/list-plans";
+  const url = `${base}?productRef=${encodeURIComponent(productRef)}`;
+  const fetchFn = config?.fetch || fetch;
+  const { headers } = await buildRequestHeaders(config);
+  const res = await fetchFn(url, { method: "GET", headers });
+  if (!res.ok) {
+    const error = new Error(`Failed to fetch plans: ${res.statusText || res.status}`);
+    config?.onError?.(error, "listPlans");
+    throw error;
+  }
+  const data = await res.json();
+  return data.plans ?? [];
+}
+var SelectStep = ({ productRef, initialPlanRef, filter, sortBy, popularPlanRef, onContinue }) => {
+  const copy = useCopy();
+  const solva = useContext(SolvaPayContext);
+  const config = solva?._config;
+  const fetcher = useCallback(
+    (ref) => defaultListPlans(ref, config),
+    [config]
+  );
+  const { plans, selectedPlan } = usePlans({
+    productRef,
+    fetcher,
+    filter,
+    sortBy,
+    autoSelectFirstPaid: true,
+    initialPlanRef
+  });
+  const [userSelected, setUserSelected] = useState2(null);
+  const selected = userSelected ?? (selectedPlan && selectedPlan.requiresPayment !== false ? { ref: selectedPlan.reference, plan: selectedPlan } : null);
+  const autoSkipRef = useRef(false);
+  useEffect(() => {
+    if (autoSkipRef.current) return;
+    const selectable = plans.filter((p) => p.requiresPayment !== false);
+    if (plans.length === 1 && selectable.length === 1) {
+      autoSkipRef.current = true;
+      onContinue(selectable[0].reference, selectable[0]);
+    }
+  }, [plans, onContinue]);
+  const handleSelect = useCallback((ref, plan) => {
+    setUserSelected({ ref, plan });
+  }, []);
+  const continueLabel = useMemo(() => copy.planSelector.continueButton, [copy]);
+  return /* @__PURE__ */ jsxs5(Fragment5, { children: [
     /* @__PURE__ */ jsx5(
-      "div",
+      PlanSelector2,
       {
-        style: {
-          minHeight: "40px",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        children: /* @__PURE__ */ jsx5(Spinner, { size: "md" })
+        productRef,
+        initialPlanRef,
+        filter,
+        sortBy,
+        popularPlanRef,
+        autoSelectFirstPaid: true,
+        onSelect: handleSelect
       }
     ),
     /* @__PURE__ */ jsx5(
       "button",
       {
-        type: "submit",
-        disabled: true,
-        className: buttonClassName,
-        "aria-busy": "false",
-        "aria-disabled": "true",
-        children: submitButtonText
+        type: "button",
+        className: "solvapay-continue",
+        "data-solvapay-checkout-continue": "",
+        "data-state": selected ? "idle" : "disabled",
+        disabled: !selected,
+        onClick: () => {
+          if (selected) onContinue(selected.ref, selected.plan);
+        },
+        children: continueLabel
       }
     )
-  ] }) });
+  ] });
 };
 
-// src/components/ProductBadge.tsx
-import React5 from "react";
-import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
-var ProductBadge = ({
-  children,
-  as: Component = "div",
+// src/components/AmountPicker.tsx
+import { Fragment as Fragment6, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var AmountPicker2 = ({
+  currency,
+  minAmount,
+  maxAmount,
+  showCreditEstimate = true,
+  onChange,
   className
 }) => {
-  const { purchases, loading, hasPaidPurchase, activePurchase } = usePurchase();
-  const [hasLoadedOnce, setHasLoadedOnce] = React5.useState(false);
-  React5.useEffect(() => {
-    if (!loading) {
-      setHasLoadedOnce(true);
-    }
-  }, [loading]);
-  const planToDisplay = activePurchase?.productName || null;
-  const shouldShow = planToDisplay !== null && (!loading || hasLoadedOnce);
-  if (children) {
-    return /* @__PURE__ */ jsx6(Fragment2, { children: children({ purchases, loading, displayPlan: planToDisplay, shouldShow }) });
-  }
-  if (!shouldShow) {
-    return null;
-  }
-  const computedClassName = typeof className === "function" ? className({ purchases }) : className;
+  const rootClass = ["solvapay-amount-picker", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx6(
-    Component,
+    AmountPicker.Root,
     {
-      className: computedClassName,
-      "data-loading": loading,
-      "data-has-purchase": !!activePurchase,
-      "data-has-paid-purchase": hasPaidPurchase,
-      role: "status",
-      "aria-live": "polite",
-      "aria-busy": loading,
-      "aria-label": `Current product: ${planToDisplay}`,
-      children: planToDisplay
+      currency,
+      minAmount,
+      maxAmount,
+      onChange,
+      className: rootClass,
+      children: /* @__PURE__ */ jsx6(DefaultTree3, { showCreditEstimate })
     }
   );
 };
-var PlanBadge = ProductBadge;
-
-// src/components/PurchaseGate.tsx
-import { Fragment as Fragment3, jsx as jsx7 } from "react/jsx-runtime";
-var PurchaseGate = ({ requirePlan, requireProduct, children }) => {
-  const { purchases, loading, hasProduct } = usePurchase();
-  const productToCheck = requireProduct || requirePlan;
-  const hasAccess = productToCheck ? hasProduct(productToCheck) : purchases.some((p) => p.status === "active");
-  return /* @__PURE__ */ jsx7(Fragment3, { children: children({
-    hasAccess,
-    purchases,
-    loading
-  }) });
+var DefaultTree3 = ({ showCreditEstimate }) => {
+  const ctx = useAmountPicker();
+  const { selectAmountLabel, customAmountLabel, creditEstimate } = useAmountPickerCopy();
+  return /* @__PURE__ */ jsxs6(Fragment6, { children: [
+    /* @__PURE__ */ jsx6("p", { className: "solvapay-amount-picker-label", children: selectAmountLabel }),
+    /* @__PURE__ */ jsx6("div", { className: "solvapay-amount-picker-pills", children: ctx.quickAmounts.map((amount) => /* @__PURE__ */ jsx6(
+      AmountPicker.Option,
+      {
+        amount,
+        className: "solvapay-amount-picker-pill"
+      },
+      amount
+    )) }),
+    /* @__PURE__ */ jsxs6("div", { className: "solvapay-amount-picker-custom-wrapper", children: [
+      /* @__PURE__ */ jsx6("p", { className: "solvapay-amount-picker-custom-label", children: customAmountLabel }),
+      /* @__PURE__ */ jsxs6("div", { className: "solvapay-amount-picker-custom-row", children: [
+        /* @__PURE__ */ jsx6("span", { className: "solvapay-amount-picker-currency-symbol", children: ctx.currencySymbol }),
+        /* @__PURE__ */ jsx6(AmountPicker.Custom, { className: "solvapay-amount-picker-custom-input" })
+      ] })
+    ] }),
+    showCreditEstimate && ctx.estimatedCredits != null && /* @__PURE__ */ jsx6("p", { className: "solvapay-amount-picker-credit-estimate", children: creditEstimate(ctx.estimatedCredits) }),
+    ctx.error && /* @__PURE__ */ jsx6("p", { role: "alert", className: "solvapay-amount-picker-error", children: ctx.error })
+  ] });
 };
 
-// src/components/PricingSelector.tsx
-import { useCallback as useCallback7, useMemo as useMemo5 } from "react";
-
-// src/hooks/usePlans.ts
-import { useState as useState6, useEffect as useEffect4, useCallback as useCallback6, useMemo as useMemo4, useRef as useRef6 } from "react";
-var plansCache = /* @__PURE__ */ new Map();
-var CACHE_DURATION2 = 5 * 60 * 1e3;
-function processPlans(raw, filter, sortBy) {
-  let result = sortBy ? [...raw].sort(sortBy) : raw;
-  if (filter) result = result.filter(filter);
-  return result;
-}
-function computeInitialIndex(plans, initialPlanRef, autoSelectFirstPaid) {
-  if (plans.length === 0) return 0;
-  if (initialPlanRef) {
-    const idx = plans.findIndex((p) => p.reference === initialPlanRef);
-    if (idx >= 0) return idx;
-  }
-  if (autoSelectFirstPaid) {
-    const idx = plans.findIndex((p) => p.requiresPayment !== false);
-    return idx >= 0 ? idx : 0;
-  }
-  return 0;
-}
-function usePlans(options) {
-  const {
-    fetcher,
-    productRef,
-    filter,
-    sortBy,
-    autoSelectFirstPaid = false,
-    initialPlanRef,
-    selectionReady = true
-  } = options;
-  const fetcherRef = useRef6(fetcher);
-  const filterRef = useRef6(filter);
-  const sortByRef = useRef6(sortBy);
-  const autoSelectFirstPaidRef = useRef6(autoSelectFirstPaid);
-  const initialPlanRefRef = useRef6(initialPlanRef);
-  const selectionReadyRef = useRef6(selectionReady);
-  const hasAppliedInitialRef = useRef6(false);
-  const userHasSelectedRef = useRef6(false);
-  const [selectedPlanIndex, setSelectedPlanIndexState] = useState6(() => {
-    if (!selectionReady || !productRef) return 0;
-    const cached = plansCache.get(productRef);
-    if (!cached || Date.now() - cached.timestamp >= CACHE_DURATION2 || cached.plans.length === 0) {
-      return 0;
-    }
-    const processed = processPlans(cached.plans, filter, sortBy);
-    if (processed.length === 0) return 0;
-    const idx = computeInitialIndex(processed, initialPlanRef, autoSelectFirstPaid);
-    hasAppliedInitialRef.current = true;
-    return idx;
-  });
-  const [plans, setPlans] = useState6(() => {
-    if (!productRef) return [];
-    const cached = plansCache.get(productRef);
-    if (!cached || Date.now() - cached.timestamp >= CACHE_DURATION2 || cached.plans.length === 0) {
-      return [];
+// src/components/CancelledPlanNotice.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var CancelledPlanNotice2 = ({
+  onReactivated,
+  onError,
+  className
+}) => {
+  const rootClass = ["solvapay-cancelled-notice", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs7(
+    CancelledPlanNotice.Root,
+    {
+      onReactivated,
+      onError,
+      className: rootClass,
+      children: [
+        /* @__PURE__ */ jsx7(CancelledPlanNotice.Heading, { className: "solvapay-cancelled-notice-heading" }),
+        /* @__PURE__ */ jsxs7("div", { className: "solvapay-cancelled-notice-details", children: [
+          /* @__PURE__ */ jsx7(CancelledPlanNotice.Expires, { className: "solvapay-cancelled-notice-expires" }),
+          /* @__PURE__ */ jsx7(CancelledPlanNotice.DaysRemaining, { className: "solvapay-cancelled-notice-days-remaining" }),
+          /* @__PURE__ */ jsx7(CancelledPlanNotice.AccessUntil, { className: "solvapay-cancelled-notice-access-until" })
+        ] }),
+        /* @__PURE__ */ jsxs7("div", { className: "solvapay-cancelled-notice-footer", children: [
+          /* @__PURE__ */ jsx7(CancelledPlanNotice.CancelledOn, { className: "solvapay-cancelled-notice-cancelled-on" }),
+          /* @__PURE__ */ jsx7(CancelledPlanNotice.Reason, { className: "solvapay-cancelled-notice-reason" })
+        ] }),
+        /* @__PURE__ */ jsx7(CancelledPlanNotice.ReactivateButton, { className: "solvapay-cancelled-notice-reactivate" })
+      ]
     }
-    return processPlans(cached.plans, filter, sortBy);
-  });
-  const [loading, setLoading] = useState6(() => plans.length === 0);
-  const [error, setError] = useState6(null);
-  useEffect4(() => {
-    fetcherRef.current = fetcher;
-  }, [fetcher]);
-  useEffect4(() => {
-    filterRef.current = filter;
-  }, [filter]);
-  useEffect4(() => {
-    sortByRef.current = sortBy;
-  }, [sortBy]);
-  useEffect4(() => {
-    autoSelectFirstPaidRef.current = autoSelectFirstPaid;
-  }, [autoSelectFirstPaid]);
-  useEffect4(() => {
-    initialPlanRefRef.current = initialPlanRef;
-  }, [initialPlanRef]);
-  useEffect4(() => {
-    selectionReadyRef.current = selectionReady;
-  }, [selectionReady]);
-  const setSelectedPlanIndex = useCallback6((index) => {
-    userHasSelectedRef.current = true;
-    setSelectedPlanIndexState(index);
-  }, []);
-  const applyInitialSelection = useCallback6((processedPlans) => {
-    if (hasAppliedInitialRef.current || userHasSelectedRef.current) return;
-    if (!selectionReadyRef.current || processedPlans.length === 0) return;
-    hasAppliedInitialRef.current = true;
-    const idx = computeInitialIndex(
-      processedPlans,
-      initialPlanRefRef.current,
-      autoSelectFirstPaidRef.current
-    );
-    setSelectedPlanIndexState(idx);
-  }, []);
-  const fetchPlans = useCallback6(
-    async (force = false) => {
-      if (!productRef) {
-        setError(new Error("Product reference not configured"));
-        setLoading(false);
-        return;
-      }
-      const cached = plansCache.get(productRef);
-      const now = Date.now();
-      if (!force && cached && now - cached.timestamp < CACHE_DURATION2) {
-        const processedPlans = processPlans(
-          cached.plans,
-          filterRef.current,
-          sortByRef.current
-        );
-        setPlans(processedPlans);
-        setLoading(false);
-        setError(null);
-        applyInitialSelection(processedPlans);
-        return;
-      }
-      if (cached?.promise) {
-        try {
-          setLoading(true);
-          const fetchedPlans = await cached.promise;
-          const processedPlans = processPlans(
-            fetchedPlans,
-            filterRef.current,
-            sortByRef.current
-          );
-          setPlans(processedPlans);
-          setError(null);
-          applyInitialSelection(processedPlans);
-        } catch (err) {
-          setError(err instanceof Error ? err : new Error("Failed to load plans"));
-        } finally {
-          setLoading(false);
-        }
-        return;
-      }
-      try {
-        setLoading(true);
-        setError(null);
-        const fetchPromise = fetcherRef.current(productRef);
-        plansCache.set(productRef, { plans: [], timestamp: now, promise: fetchPromise });
-        const fetchedPlans = await fetchPromise;
-        plansCache.set(productRef, { plans: fetchedPlans, timestamp: now, promise: null });
-        const processedPlans = processPlans(
-          fetchedPlans,
-          filterRef.current,
-          sortByRef.current
-        );
-        setPlans(processedPlans);
-        applyInitialSelection(processedPlans);
-      } catch (err) {
-        plansCache.delete(productRef);
-        setError(err instanceof Error ? err : new Error("Failed to load plans"));
-      } finally {
-        setLoading(false);
-      }
-    },
-    [productRef, applyInitialSelection]
-  );
-  useEffect4(() => {
-    fetchPlans();
-  }, [fetchPlans]);
-  useEffect4(() => {
-    if (hasAppliedInitialRef.current || userHasSelectedRef.current) return;
-    if (!selectionReady || plans.length === 0) return;
-    applyInitialSelection(plans);
-  }, [selectionReady, plans, applyInitialSelection]);
-  const selectedPlan = useMemo4(() => plans[selectedPlanIndex] || null, [plans, selectedPlanIndex]);
-  const selectPlan = useCallback6(
-    (planRef) => {
-      const index = plans.findIndex((p) => p.reference === planRef);
-      if (index >= 0) {
-        setSelectedPlanIndex(index);
-      }
-    },
-    [plans, setSelectedPlanIndex]
   );
-  return {
-    plans,
-    loading,
-    error,
-    selectedPlanIndex,
-    selectedPlan,
-    setSelectedPlanIndex,
-    selectPlan,
-    refetch: () => fetchPlans(true),
-    isSelectionReady: hasAppliedInitialRef.current
-  };
-}
+};
 
-// src/components/PricingSelector.tsx
-import { Fragment as Fragment4, jsx as jsx8 } from "react/jsx-runtime";
-var PricingSelector = ({
+// src/components/CreditGate.tsx
+import { Fragment as Fragment7, jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var AllowedContent = ({ children }) => {
+  const ctx = useCreditGate();
+  if (ctx.state !== "allowed") return null;
+  return /* @__PURE__ */ jsx8(Fragment7, { children });
+};
+var DefaultBlockedTree = ({ fallback }) => {
+  const ctx = useCreditGate();
+  if (ctx.state !== "blocked") return null;
+  if (fallback) return /* @__PURE__ */ jsx8(Fragment7, { children: fallback });
+  return /* @__PURE__ */ jsxs8(Fragment7, { children: [
+    /* @__PURE__ */ jsx8(CreditGate.Heading, { className: "solvapay-credit-gate-heading" }),
+    /* @__PURE__ */ jsx8(CreditGate.Subheading, { className: "solvapay-credit-gate-subheading" }),
+    /* @__PURE__ */ jsx8(CreditGate.Topup, {})
+  ] });
+};
+var CreditGate2 = ({
+  minCredits,
   productRef,
-  fetcher,
-  filter,
-  sortBy,
-  autoSelectFirstPaid,
+  topupAmount,
+  topupCurrency,
+  fallback,
+  className,
   children
 }) => {
-  const { purchases } = usePurchase();
-  const plansHook = usePlans({
-    productRef,
-    fetcher,
-    filter,
-    sortBy,
-    autoSelectFirstPaid
-  });
-  const { plans } = plansHook;
-  const isPaidPlan = useCallback7(
-    (planRef) => {
-      const plan = plans.find((p) => p.reference === planRef);
-      return plan ? plan.requiresPayment !== false : true;
-    },
-    [plans]
-  );
-  const activePurchase = useMemo5(() => {
-    const activePurchases = purchases.filter((p) => p.status === "active");
-    return activePurchases.sort(
-      (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
-    )[0] || null;
-  }, [purchases]);
-  const isCurrentPlan = useCallback7(
-    (planRef) => {
-      return activePurchase?.planSnapshot?.reference === planRef;
-    },
-    [activePurchase]
-  );
-  return /* @__PURE__ */ jsx8(Fragment4, { children: children({
-    ...plansHook,
-    purchases,
-    isPaidPlan,
-    isCurrentPlan
-  }) });
-};
-var PlanSelector = PricingSelector;
-
-// src/hooks/useBalance.ts
-import { useEffect as useEffect5 } from "react";
-function useBalance() {
-  const { balance } = useSolvaPay();
-  useEffect5(() => {
-    balance.refetch();
-  }, [balance.refetch]);
-  return balance;
-}
-
-// src/components/BalanceBadge.tsx
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
-function BalanceBadge({ className, numberOnly, children }) {
-  const { credits, displayCurrency, creditsPerMinorUnit, displayExchangeRate, loading } = useBalance();
-  if (children) {
-    return /* @__PURE__ */ jsx9(Fragment5, { children: children({ credits, loading, displayCurrency, creditsPerMinorUnit }) });
-  }
-  if (loading) {
-    return /* @__PURE__ */ jsx9("span", { className, "aria-busy": "true" });
-  }
-  if (credits == null) {
-    return null;
-  }
-  const formattedCredits = new Intl.NumberFormat().format(credits);
-  if (numberOnly) {
-    return /* @__PURE__ */ jsx9("span", { className, children: formattedCredits });
-  }
-  let currencyEquivalent = "";
-  if (displayCurrency && creditsPerMinorUnit) {
-    const usdCents = credits / creditsPerMinorUnit;
-    const displayMajorUnits = usdCents * (displayExchangeRate ?? 1) / 100;
-    currencyEquivalent = ` (~${new Intl.NumberFormat(void 0, {
-      style: "currency",
-      currency: displayCurrency,
-      minimumFractionDigits: 2
-    }).format(displayMajorUnits)})`;
-  }
-  return /* @__PURE__ */ jsxs5("span", { className, children: [
-    formattedCredits,
-    " credits",
-    currencyEquivalent
-  ] });
-}
-
-// src/hooks/usePurchaseStatus.ts
-import { useMemo as useMemo6, useCallback as useCallback8 } from "react";
-function usePurchaseStatus() {
-  const { purchases } = usePurchase();
-  const isPaidPurchase2 = useCallback8((p) => {
-    return (p.amount ?? 0) > 0;
-  }, []);
-  const purchaseData = useMemo6(() => {
-    const cancelledPaidPurchases = purchases.filter((p) => {
-      return p.status === "active" && p.cancelledAt && isPaidPurchase2(p);
-    });
-    const cancelledPurchase = cancelledPaidPurchases.sort(
-      (a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime()
-    )[0] || null;
-    const shouldShowCancelledNotice = !!cancelledPurchase;
-    return {
-      cancelledPurchase,
-      shouldShowCancelledNotice
-    };
-  }, [purchases, isPaidPurchase2]);
-  const formatDate = useCallback8((dateString) => {
-    if (!dateString) return null;
-    return new Date(dateString).toLocaleDateString("en-US", {
-      year: "numeric",
-      month: "long",
-      day: "numeric"
-    });
-  }, []);
-  const getDaysUntilExpiration = useCallback8((endDate) => {
-    if (!endDate) return null;
-    const now = /* @__PURE__ */ new Date();
-    const expiration = new Date(endDate);
-    const diffTime = expiration.getTime() - now.getTime();
-    const diffDays = Math.ceil(diffTime / (1e3 * 60 * 60 * 24));
-    return diffDays > 0 ? diffDays : 0;
-  }, []);
-  return {
-    cancelledPurchase: purchaseData.cancelledPurchase,
-    shouldShowCancelledNotice: purchaseData.shouldShowCancelledNotice,
-    formatDate,
-    getDaysUntilExpiration
-  };
-}
-
-// src/hooks/usePurchaseActions.ts
-import { useState as useState7, useCallback as useCallback9 } from "react";
-function usePurchaseActions() {
-  const ctx = useSolvaPay();
-  const [isCancelling, setIsCancelling] = useState7(false);
-  const [isReactivating, setIsReactivating] = useState7(false);
-  const [isActivating, setIsActivating] = useState7(false);
-  const cancelRenewal = useCallback9(
-    async (params) => {
-      setIsCancelling(true);
-      try {
-        return await ctx.cancelRenewal(params);
-      } finally {
-        setIsCancelling(false);
-      }
-    },
-    [ctx.cancelRenewal]
-  );
-  const reactivateRenewal = useCallback9(
-    async (params) => {
-      setIsReactivating(true);
-      try {
-        return await ctx.reactivateRenewal(params);
-      } finally {
-        setIsReactivating(false);
-      }
-    },
-    [ctx.reactivateRenewal]
-  );
-  const activatePlan = useCallback9(
-    async (params) => {
-      setIsActivating(true);
-      try {
-        return await ctx.activatePlan(params);
-      } finally {
-        setIsActivating(false);
-      }
-    },
-    [ctx.activatePlan]
-  );
-  return {
-    cancelRenewal,
-    reactivateRenewal,
-    activatePlan,
-    isCancelling,
-    isReactivating,
-    isActivating
-  };
-}
-
-// src/hooks/useActivation.ts
-import { useState as useState8, useCallback as useCallback10 } from "react";
-function useActivation() {
-  const { activatePlan } = useSolvaPay();
-  const [state, setState] = useState8("idle");
-  const [error, setError] = useState8(null);
-  const [result, setResult] = useState8(null);
-  const activate = useCallback10(
-    async (params) => {
-      setState("activating");
-      setError(null);
-      setResult(null);
-      try {
-        const data = await activatePlan(params);
-        setResult(data);
-        switch (data.status) {
-          case "activated":
-          case "already_active":
-            setState("activated");
-            break;
-          case "topup_required":
-            setState("topup_required");
-            break;
-          case "payment_required":
-            setError("This plan requires payment. Please select a different plan.");
-            setState("payment_required");
-            break;
-          case "invalid":
-            setError(data.message || "Invalid plan configuration.");
-            setState("error");
-            break;
-          default:
-            setError("Unexpected response from server.");
-            setState("error");
-        }
-      } catch (err) {
-        setError(err instanceof Error ? err.message : "Activation failed");
-        setState("error");
-      }
-    },
-    [activatePlan]
-  );
-  const reset = useCallback10(() => {
-    setState("idle");
-    setError(null);
-    setResult(null);
-  }, []);
-  return { activate, state, error, result, reset };
-}
-
-// src/hooks/useTopupAmountSelector.ts
-import { useState as useState9, useCallback as useCallback11, useMemo as useMemo7 } from "react";
-function getQuickAmounts(currency) {
-  switch (currency.toUpperCase()) {
-    case "SEK":
-    case "NOK":
-    case "DKK":
-      return [100, 500, 1e3, 5e3];
-    case "JPY":
-      return [1e3, 5e3, 1e4, 5e4];
-    case "KRW":
-      return [1e4, 5e4, 1e5, 5e5];
-    case "ISK":
-    case "HUF":
-      return [1e3, 5e3, 1e4, 5e4];
-    default:
-      return [10, 50, 100, 500];
-  }
-}
-function getCurrencySymbol(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;
-  } catch {
-    return currency;
-  }
-}
-var DEFAULT_MIN = 1;
-var DEFAULT_MAX = 1e5;
-function useTopupAmountSelector(options) {
-  const { currency, minAmount = DEFAULT_MIN, maxAmount = DEFAULT_MAX } = options;
-  const [selectedAmount, setSelectedAmount] = useState9(null);
-  const [customAmount, setCustomAmountRaw] = useState9("");
-  const [error, setError] = useState9(null);
-  const quickAmounts = useMemo7(() => getQuickAmounts(currency), [currency]);
-  const currencySymbol = useMemo7(() => getCurrencySymbol(currency), [currency]);
-  const resolvedAmount = useMemo7(() => {
-    if (customAmount) {
-      const parsed = parseFloat(customAmount);
-      return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+  const rootClass = ["solvapay-credit-gate", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs8(
+    CreditGate.Root,
+    {
+      minCredits,
+      productRef,
+      topupAmount,
+      topupCurrency,
+      className: rootClass,
+      children: [
+        /* @__PURE__ */ jsx8(AllowedContent, { children }),
+        /* @__PURE__ */ jsx8(DefaultBlockedTree, { fallback })
+      ]
     }
-    return selectedAmount;
-  }, [selectedAmount, customAmount]);
-  const selectQuickAmount = useCallback11(
-    (amount) => {
-      setSelectedAmount(amount);
-      setCustomAmountRaw("");
-      setError(null);
-    },
-    []
-  );
-  const setCustomAmount = useCallback11(
-    (value) => {
-      const sanitized = value.replace(/[^0-9.]/g, "");
-      const dotIndex = sanitized.indexOf(".");
-      const cleaned = dotIndex === -1 ? sanitized : sanitized.slice(0, dotIndex + 1) + sanitized.slice(dotIndex + 1).replace(/\./g, "");
-      setCustomAmountRaw(cleaned);
-      setSelectedAmount(null);
-      setError(null);
-    },
-    []
   );
-  const validate = useCallback11(() => {
-    if (resolvedAmount == null) {
-      setError("Please select or enter an amount");
-      return false;
-    }
-    if (resolvedAmount < minAmount) {
-      setError(`Minimum amount is ${currencySymbol}${minAmount}`);
-      return false;
-    }
-    if (resolvedAmount > maxAmount) {
-      setError(`Maximum amount is ${currencySymbol}${maxAmount.toLocaleString()}`);
-      return false;
-    }
-    setError(null);
-    return true;
-  }, [resolvedAmount, minAmount, maxAmount, currencySymbol]);
-  const reset = useCallback11(() => {
-    setSelectedAmount(null);
-    setCustomAmountRaw("");
-    setError(null);
-  }, []);
-  return {
-    quickAmounts,
-    selectedAmount,
-    customAmount,
-    resolvedAmount,
-    selectQuickAmount,
-    setCustomAmount,
-    error,
-    validate,
-    reset,
-    currencySymbol
-  };
-}
+};
 export {
+  ActivationFlow2 as ActivationFlow,
+  AmountPicker2 as AmountPicker,
   BalanceBadge,
-  PaymentForm,
+  CancelPlanButton,
+  CancelledPlanNotice2 as CancelledPlanNotice,
+  CheckoutLayout,
+  CheckoutSummary,
+  CopyContext,
+  CopyProvider,
+  CreditGate2 as CreditGate,
+  MandateText,
+  PaymentForm2 as PaymentForm,
+  PaymentFormContext,
+  PaymentFormProvider,
   PlanBadge,
-  PlanSelector,
-  PricingSelector,
+  PlanSelector2 as PlanSelector,
   ProductBadge,
   PurchaseGate,
   SolvaPayProvider,
   Spinner,
   StripePaymentFormWrapper,
   TopupForm,
+  confirmPayment,
   defaultAuthAdapter,
+  deriveVariant,
+  enCopy,
   filterPurchases,
+  formatPrice,
   getActivePurchases,
   getCancelledPurchasesWithEndDate,
   getMostRecentPurchase,
   getPrimaryPurchase,
+  interpolate,
   isPaidPurchase,
+  mergeCopy,
+  resolveCta,
   useActivation,
   useBalance,
   useCheckout,
+  useCopy,
   useCustomer,
+  useLocale,
+  useMerchant,
+  usePaymentForm,
+  usePlan,
   usePlans,
+  useProduct,
   usePurchase,
   usePurchaseActions,
   usePurchaseStatus,