@pollar/react 0.11.4-rc.2 → 0.11.4-rc.4

package/dist/index.js

@@ -1038,7 +1038,7 @@ var PollarModalFooter = ({ shield = false }) => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.11.4-rc.2"
+        "0.11.4-rc.4"
       ] })
     ] })
   ] });
@@ -2079,7 +2079,8 @@ function KycModalTemplate({
             kycStatus !== "approved" && kycStatus !== "rejected" && kycStatus !== "expired" && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onDoneVerifying, children: "Check again" }),
             /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", onClick: onClose, children: "Close" })
           ] })
-        ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
       ]
     }
   );
@@ -2089,7 +2090,15 @@ function newIdempotencyKey() {
   if (c && typeof c.randomUUID === "function") return c.randomUUID();
   return `kyc-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 12)}`;
 }
-function KycModal({ onClose, country = "MX", level = "basic", onApproved, corridorId, providerId }) {
+function KycModal({
+  onClose,
+  country = "MX",
+  level = "basic",
+  onApproved,
+  corridorId,
+  cardProviderId,
+  providerId
+}) {
   const { getClient, styles } = usePollar();
   const [step, setStep] = react.useState("select_provider");
   const [providers, setProviders] = react.useState([]);
@@ -2117,7 +2126,7 @@ function KycModal({ onClose, country = "MX", level = "basic", onApproved, corrid
     else finish(read.decisionStatus === "expired" ? "expired" : read.status);
   }
   function readStatus(providerId2) {
-    return corridorId ? client.getKycStatus(void 0, corridorId) : client.getKycStatus(providerId2);
+    return corridorId || cardProviderId ? client.getKycStatus(void 0, corridorId, cardProviderId) : client.getKycStatus(providerId2);
   }
   const starting = react.useRef(false);
   async function handleSelectProvider(provider, listed = true) {
@@ -2134,7 +2143,8 @@ function KycModal({ onClose, country = "MX", level = "basic", onApproved, corrid
         provider.levels?.[0] ?? level,
         listed ? country : void 0,
         corridorId,
-        key
+        key,
+        cardProviderId
       );
       if (result.alreadyApproved) {
         finish("approved");
@@ -2163,7 +2173,7 @@ function KycModal({ onClose, country = "MX", level = "basic", onApproved, corrid
   const loadProviders = react.useCallback(() => {
     setIsLoading(true);
     setError(null);
-    return getClient().getKycProviders(country, corridorId).then((result) => {
+    return getClient().getKycProviders(country, corridorId, cardProviderId).then((result) => {
       setProviders(result.providers);
       return result.providers;
     }).catch((e) => {
@@ -2171,7 +2181,7 @@ function KycModal({ onClose, country = "MX", level = "basic", onApproved, corrid
       setError(kycErrorMessage(e, "load"));
       return [];
     }).finally(() => setIsLoading(false));
-  }, [getClient, country, corridorId]);
+  }, [getClient, country, corridorId, cardProviderId]);
   react.useEffect(() => {
     void loadProviders().then((list) => {
       if (!providerId || autoOpened.current) return;
@@ -2193,7 +2203,8 @@ function KycModal({ onClose, country = "MX", level = "basic", onApproved, corrid
       const read = await client.pollKycDecision(selectedProvider.id, {
         intervalMs: 3e3,
         timeoutMs: 12e4,
-        ...corridorId ? { corridorId } : {}
+        ...corridorId ? { corridorId } : {},
+        ...cardProviderId ? { cardProviderId } : {}
       });
       finishWith(read);
     } catch {
@@ -2515,7 +2526,8 @@ function RequirementFormModal({ formId, progress, onClose, onSubmitted }) {
               ] })
             ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
       ]
     }
   ) });
@@ -3892,7 +3904,8 @@ function RampWidgetTemplate({
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onClose, children: "Close" }),
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", onClick: onRetry, children: "Try again" })
       ] })
-    ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
   ] });
 }
 
@@ -3953,9 +3966,15 @@ var REGISTRATION_COPY = {
     close: "Close",
     notReady: "Complete the previous steps first.",
     missing: "Some details are missing: {fields}.",
+    invalid: "Some details need to be corrected: {fields}.",
+    fix: "Review my details",
+    incomplete: "Your registration with the provider did not finish. Register again to complete it.",
+    providerDown: "The provider is not responding right now. Please try again in a few minutes.",
+    ipNotSupported: "The provider cannot accept your current connection (IPv6). Please try again from another network, for example Wi-Fi.",
     loadError: "Could not load the registration. Please try again.",
     submitError: "Could not register you. Please try again.",
-    step: "Step {n} of {total}"
+    step: "Step {n} of {total}",
+    terms: "Read the provider's terms of service"
   },
   es: {
     title: "Registro con el proveedor de pagos",
@@ -3966,9 +3985,15 @@ var REGISTRATION_COPY = {
     close: "Cerrar",
     notReady: "Primero completa los pasos anteriores.",
     missing: "Faltan algunos datos: {fields}.",
+    invalid: "Hay datos que corregir: {fields}.",
+    fix: "Revisar mis datos",
+    incomplete: "Tu registro con el proveedor no se complet\xF3. Reg\xEDstrate de nuevo para terminarlo.",
+    providerDown: "El proveedor no responde en este momento. Intenta de nuevo en unos minutos.",
+    ipNotSupported: "El proveedor no acepta tu conexi\xF3n actual (IPv6). Intenta desde otra red, por ejemplo Wi-Fi.",
     loadError: "No se pudo cargar el registro. Intenta de nuevo.",
     submitError: "No se pudo completar el registro. Intenta de nuevo.",
-    step: "Paso {n} de {total}"
+    step: "Paso {n} de {total}",
+    terms: "Leer los t\xE9rminos de servicio del proveedor"
   }
 };
 var SHARED_FIELD_LABELS = {
@@ -3983,7 +4008,24 @@ var SHARED_FIELD_LABELS = {
     source_of_funds: "Source of funds",
     destination_of_funds: "Use of funds",
     income_level: "Income level",
-    doc_provider_id: "SEGIP validation"
+    doc_provider_id: "SEGIP validation",
+    first_name: "First name",
+    last_name: "Last name",
+    email: "Email",
+    birth_date: "Date of birth",
+    document_country: "Document country",
+    phone_country_code: "Phone country code",
+    phone_number: "Phone number",
+    occupation: "Occupation",
+    annual_salary: "Annual income",
+    account_purpose: "Purpose of the card",
+    expected_monthly_volume: "Expected monthly spend",
+    address_line1: "Street address",
+    address_line2: "Address line 2",
+    city: "City",
+    region: "State or province",
+    postal_code: "Postal code",
+    country_code: "Country of residence"
   },
   es: {
     name: "Nombres",
@@ -3996,7 +4038,24 @@ var SHARED_FIELD_LABELS = {
     source_of_funds: "Origen de los fondos",
     destination_of_funds: "Destino de los fondos",
     income_level: "Nivel de ingresos",
-    doc_provider_id: "Validaci\xF3n SEGIP"
+    doc_provider_id: "Validaci\xF3n SEGIP",
+    first_name: "Nombres",
+    last_name: "Apellidos",
+    email: "Correo electr\xF3nico",
+    birth_date: "Fecha de nacimiento",
+    document_country: "Pa\xEDs del documento",
+    phone_country_code: "C\xF3digo de pa\xEDs del tel\xE9fono",
+    phone_number: "Tel\xE9fono",
+    occupation: "Ocupaci\xF3n",
+    annual_salary: "Ingreso anual",
+    account_purpose: "Uso de la tarjeta",
+    expected_monthly_volume: "Gasto mensual esperado",
+    address_line1: "Direcci\xF3n",
+    address_line2: "Direcci\xF3n (l\xEDnea 2)",
+    city: "Ciudad",
+    region: "Estado o provincia",
+    postal_code: "C\xF3digo postal",
+    country_code: "Pa\xEDs de residencia"
   }
 };
 var errorCode = (error) => error && typeof error === "object" && typeof error.code === "string" ? error.code : null;
@@ -4004,6 +4063,15 @@ function missingFieldsOf(error) {
   const body = error && typeof error === "object" ? error.body : void 0;
   return Array.isArray(body?.missing) ? body.missing.filter((item) => typeof item === "string") : [];
 }
+function registrationFixOf(error) {
+  const body = error && typeof error === "object" ? error.body : void 0;
+  const strings = (value) => Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
+  const forms = Array.isArray(body?.forms) ? body.forms.flatMap((item) => {
+    const form = item && typeof item === "object" ? item : {};
+    return typeof form.formId === "string" ? [{ formId: form.formId, keys: strings(form.keys) }] : [];
+  }) : [];
+  return { invalid: strings(body?.invalid), forms };
+}
 function RegistryCheckModal({ optionId, progress, onClose, onApproved }) {
   const { getClient, styles } = usePollar();
   const client = getClient();
@@ -4016,6 +4084,7 @@ function RegistryCheckModal({ optionId, progress, onClose, onApproved }) {
   const [surname2, setSurname2] = react.useState("");
   const [complement, setComplement] = react.useState("");
   const [error, setError] = react.useState(null);
+  const [rejected, setRejected] = react.useState([]);
   const [review, setReview] = react.useState(false);
   const [submitting, setSubmitting] = react.useState(false);
   const mounted = react.useRef(true);
@@ -4031,7 +4100,7 @@ function RegistryCheckModal({ optionId, progress, onClose, onApproved }) {
       if (loaded.status === "approved") return onApproved();
       setCheck(loaded);
       if (loaded.status === "pending") setReview(true);
-      if (loaded.status === "rejected") setError(rejectedMessage(loaded.rejectedFields));
+      if (loaded.status === "rejected") showRejected(loaded.rejectedFields);
       if (loaded.prefill.applies) {
         setSurname1(loaded.prefill.surname1);
         setSurname2(loaded.prefill.surname2 ?? "");
@@ -4043,15 +4112,21 @@ function RegistryCheckModal({ optionId, progress, onClose, onApproved }) {
     });
   }, [optionId]);
   const prefill = check?.prefill.applies ? check.prefill : null;
-  function rejectedMessage(fields) {
-    const labels = { surname1: copy.surname1, surname2: copy.surname2, complementNumber: copy.complement };
-    const named = (fields ?? []).map((field) => labels[field] ?? field);
-    return copy.rejected.replace("{fields}", named.length ? named.join(", ") : copy.surname2);
+  function showRejected(fields) {
+    const labels = {
+      surname1: copy.surname1,
+      surname2: copy.surname2,
+      complementNumber: copy.complement
+    };
+    const named = fields?.length ? fields : ["surname2"];
+    setRejected(named);
+    setError(copy.rejected.replace("{fields}", named.map((field) => labels[field] ?? field).join(", ")));
   }
   async function submit() {
     if (!prefill) return;
     setSubmitting(true);
     setError(null);
+    setRejected([]);
     try {
       const result = await client.submitRegistryCheck(optionId, {
         surname1: surname1.trim(),
@@ -4060,7 +4135,7 @@ function RegistryCheckModal({ optionId, progress, onClose, onApproved }) {
       });
       if (!mounted.current) return;
       if (result.status === "approved") onApproved();
-      else if (result.status === "rejected") setError(rejectedMessage(result.rejectedFields));
+      else if (result.status === "rejected") showRejected(result.rejectedFields);
       else setReview(true);
     } catch (e) {
       if (!mounted.current) return;
@@ -4125,6 +4200,7 @@ function RegistryCheckModal({ optionId, progress, onClose, onApproved }) {
                     value: surname1,
                     required: true,
                     disabled: submitting,
+                    "aria-invalid": rejected.includes("surname1") || void 0,
                     onChange: (e) => setSurname1(e.target.value)
                   }
                 )
@@ -4138,6 +4214,7 @@ function RegistryCheckModal({ optionId, progress, onClose, onApproved }) {
                     className: "pollar-input",
                     value: surname2,
                     disabled: submitting,
+                    "aria-invalid": rejected.includes("surname2") || void 0,
                     onChange: (e) => setSurname2(e.target.value)
                   }
                 )
@@ -4154,6 +4231,7 @@ function RegistryCheckModal({ optionId, progress, onClose, onApproved }) {
                     value: complement,
                     maxLength: 3,
                     disabled: submitting,
+                    "aria-invalid": rejected.includes("complementNumber") || void 0,
                     onChange: (e) => setComplement(e.target.value.toUpperCase().replace(/[^0-9A-Z]/g, ""))
                   }
                 )
@@ -4164,12 +4242,19 @@ function RegistryCheckModal({ optionId, progress, onClose, onApproved }) {
               ] })
             ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
       ]
     }
   ) });
 }
-function ProviderRegistrationModal({ corridorId, progress, onClose, onRegistered }) {
+function ProviderRegistrationModal({
+  corridorId,
+  cardProviderId,
+  progress,
+  onClose,
+  onRegistered
+}) {
   const { getClient, styles } = usePollar();
   const client = getClient();
   const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
@@ -4178,9 +4263,12 @@ function ProviderRegistrationModal({ corridorId, progress, onClose, onRegistered
   const copy = REGISTRATION_COPY[language];
   const labels = SHARED_FIELD_LABELS[language];
   const [registration, setRegistration] = react.useState(null);
+  const [termsUrl, setTermsUrl] = react.useState(null);
   const [consent, setConsent] = react.useState(false);
   const [error, setError] = react.useState(null);
   const [submitting, setSubmitting] = react.useState(false);
+  const [fixForm, setFixForm] = react.useState(null);
+  const [fixing, setFixing] = react.useState(null);
   const mounted = react.useRef(true);
   react.useEffect(() => {
     mounted.current = true;
@@ -4189,34 +4277,59 @@ function ProviderRegistrationModal({ corridorId, progress, onClose, onRegistered
     };
   }, []);
   react.useEffect(() => {
-    client.getProviderRegistration(corridorId).then((loaded) => {
+    const load = cardProviderId ? client.getCardProviderRegistration(cardProviderId).then((loaded) => {
+      setTermsUrl(loaded.termsUrl);
+      return loaded;
+    }) : client.getProviderRegistration(corridorId ?? "");
+    load.then((loaded) => {
       if (!mounted.current) return;
       if (loaded.status === "registered") onRegistered();
       else setRegistration(loaded);
     }).catch(() => mounted.current && setError(copy.loadError));
-  }, [corridorId]);
+  }, [corridorId, cardProviderId]);
   async function submit() {
     setSubmitting(true);
     setError(null);
+    setFixForm(null);
     try {
-      await client.submitProviderRegistration(corridorId);
+      if (cardProviderId) await client.submitCardProviderRegistration(cardProviderId);
+      else await client.submitProviderRegistration(corridorId ?? "");
       if (mounted.current) onRegistered();
     } catch (e) {
       if (!mounted.current) return;
       const code = errorCode(e);
       if (code === "KYC_REGISTRATION_MISSING_DATA") {
+        const fix = registrationFixOf(e);
+        const named = (keys) => keys.map((key) => labels[key] ?? key).join(", ");
+        const missing = missingFieldsOf(e).filter((key) => !fix.invalid.includes(key));
         setError(
-          copy.missing.replace(
-            "{fields}",
-            missingFieldsOf(e).map((key) => labels[key] ?? key).join(", ")
-          )
+          [
+            fix.invalid.length ? copy.invalid.replace("{fields}", named(fix.invalid)) : null,
+            missing.length ? copy.missing.replace("{fields}", named(missing)) : null
+          ].filter(Boolean).join(" ")
         );
+        setFixForm(fix.forms[0]?.formId ?? null);
       } else if (code === "KYC_REGISTRATION_STEPS_PENDING") setError(copy.notReady);
+      else if (code === "SDK_CARDS_PROVIDER_ERROR") setError(copy.providerDown);
+      else if (code === "SDK_CARDS_IP_NOT_SUPPORTED") setError(copy.ipNotSupported);
       else setError(copy.submitError);
     } finally {
       if (mounted.current) setSubmitting(false);
     }
   }
+  if (fixing) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      RequirementFormModal,
+      {
+        formId: fixing,
+        onClose: () => setFixing(null),
+        onSubmitted: () => {
+          setFixing(null);
+          void submit();
+        }
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -4235,6 +4348,7 @@ function ProviderRegistrationModal({ corridorId, progress, onClose, onRegistered
           /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-modal-close", onClick: onClose, "aria-label": copy.close, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 2l12 12M14 2L2 14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
         ] }),
         error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-form-error", role: "alert", children: error }),
+        fixForm && !submitting && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-actions", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", onClick: () => setFixing(fixForm), children: copy.fix }) }),
         !registration && !error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-loading-block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-spinner" }) }),
         registration && /* @__PURE__ */ jsxRuntime.jsxs(
           "form",
@@ -4246,8 +4360,10 @@ function ProviderRegistrationModal({ corridorId, progress, onClose, onRegistered
             },
             children: [
               registration.ready ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                registration.status === "incomplete" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-form-error", role: "status", children: copy.incomplete }),
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-form-description", children: copy.intro }),
                 /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "pollar-form-description", children: registration.fields.map((key) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: labels[key] ?? key }, key)) }),
+                termsUrl && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-form-description", children: /* @__PURE__ */ jsxRuntime.jsx("a", { href: termsUrl, target: "_blank", rel: "noreferrer", children: copy.terms }) }),
                 /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "pollar-form-choice", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "input",
@@ -4267,7 +4383,8 @@ function ProviderRegistrationModal({ corridorId, progress, onClose, onRegistered
               ] })
             ]
           }
-        )
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
       ]
     }
   ) });
@@ -6778,6 +6895,781 @@ function EarnModal({ onClose }) {
     }
   ) });
 }
+
+// src/components/card-modal/card-kyc.ts
+var nonEmpty2 = (value) => typeof value === "string" && !!value.trim();
+function requiredCardStep(error) {
+  if (!error || typeof error !== "object") return null;
+  const { code, body } = error;
+  if (code !== "SDK_CARDS_REQUIREMENT_REQUIRED" || !body || typeof body !== "object") return null;
+  const { cardProviderId, requirementType, optionId } = body;
+  if (!nonEmpty2(cardProviderId) || !nonEmpty2(optionId)) return null;
+  if (requirementType === "KYC" || requirementType === "FORM" || requirementType === "REGISTRY_CHECK" || requirementType === "PROVIDER_REGISTRATION") {
+    return { cardProviderId, type: requirementType, optionId };
+  }
+  return null;
+}
+function pendingFromRequirement(cardProviderId, next) {
+  return {
+    cardProviderId,
+    type: next.type,
+    optionId: next.optionId,
+    progress: { position: next.completed + 1, total: next.total }
+  };
+}
+function blockedStepMessage(next) {
+  if (next.type === "REGISTRY_CHECK" && next.status === "pending") return "Your details are under review.";
+  if (next.type !== "KYC") return null;
+  if (next.status === "pending" && next.reviewReason) return "Your verification is under review.";
+  if (next.status === "rejected") return "Your verification was not approved.";
+  return null;
+}
+function cardStage(holder, requirements) {
+  if (holder === void 0 || requirements === void 0) return null;
+  if (holder === null || holder.kycStatus === "NOT_STARTED" && requirements?.next) return "steps";
+  if (holder.kycStatus !== "NOT_STARTED") return null;
+  return requirements?.steps.some((step) => step.type === "PROVIDER_REGISTRATION") ? "steps" : "provider-form";
+}
+var KYC_POLL_MS = 5e3;
+var REVEAL_MS = 3e4;
+var TX_LIMIT = 10;
+var FUNDING_POLL_MS = 5e3;
+var FUNDING_INFLIGHT = /* @__PURE__ */ new Set(["CREATED", "BURNED", "ATTESTED", "MINTED"]);
+var FUNDING_COPY = {
+  CREATED: {
+    title: "Confirming your payment",
+    step: 1,
+    hint: "Your USDC payment is being confirmed on Stellar. This takes a few seconds."
+  },
+  BURNED: {
+    title: "Sending it to the card network",
+    step: 2,
+    hint: "Your USDC left Stellar. Circle is confirming the transfer, usually in about a minute."
+  },
+  ATTESTED: {
+    title: "Crossing to the card network",
+    step: 3,
+    hint: "Transfer confirmed. Delivering the USDC to the card network."
+  },
+  MINTED: {
+    title: "Arrived, crediting your card",
+    step: 4,
+    hint: "The USDC reached the card provider, which is adding it to your card. This can take a few minutes."
+  },
+  CREDITED: { title: "Credited to your card" },
+  FAILED: { title: "Failed" }
+};
+var FUNDING_STEPS = 4;
+var INCOME_RANGES = [
+  { value: "0-1000", label: "Up to 1,000 USD" },
+  { value: "1000-5000", label: "1,000 to 5,000 USD" },
+  { value: "5000-10000", label: "5,000 to 10,000 USD" },
+  { value: "10000+", label: "More than 10,000 USD" }
+];
+var TX_LABELS = {
+  deposit: "Deposit",
+  transactionTransfer: "Bank deposit",
+  spend: "Purchase",
+  spend_adjustment: "Adjustment",
+  fee: "Fee",
+  fee_refund: "Fee refund",
+  withdrawal: "Withdrawal",
+  card_insurance: "Card issuance"
+};
+var KYC_PENDING_COPY = {
+  PENDING: "Your information is being reviewed.",
+  NEEDS_ACTION: "Finish verifying your identity with the card provider: you will be asked for a photo of your document and a selfie.",
+  IN_REVIEW: "Your verification is under manual review. This can take a while."
+};
+var KYC_FINAL_COPY = {
+  DENIED: "Your verification was denied.",
+  LOCKED: "Your account is locked.",
+  CANCELED: "Your verification was canceled."
+};
+var emptyKyc = {
+  firstName: "",
+  lastName: "",
+  birthDate: "",
+  nationalId: "",
+  countryOfIssue: "",
+  phoneCountryCode: "",
+  phoneNumber: "",
+  occupation: "",
+  annualSalary: "1000-5000",
+  accountPurpose: "Personal expenses",
+  expectedMonthlyVolume: "1000-5000",
+  address: { line1: "", line2: "", city: "", region: "", postalCode: "", countryCode: "" }
+};
+function usd(cents) {
+  if (cents === null || cents === void 0) return "-";
+  return (cents / 100).toLocaleString("en-US", { style: "currency", currency: "USD" });
+}
+function money(amount, currency) {
+  const n = Number(amount);
+  try {
+    return n.toLocaleString("en-US", { style: "currency", currency });
+  } catch {
+    return `${n.toFixed(2)} ${currency}`;
+  }
+}
+function groupPan(pan) {
+  return pan.replace(/\s+/g, "").replace(/(.{4})/g, "$1 ").trim();
+}
+var CARD_ERROR_COPY = {
+  SDK_CARDS_PROVIDER_ERROR: "The card provider is not responding right now. Please try again in a few minutes.",
+  SDK_CARDS_IP_NOT_SUPPORTED: "The card provider cannot accept your current connection (IPv6). Please try again from another network, for example Wi-Fi."
+};
+function errorText(e, fallback) {
+  if (core.isPollarApiError(e)) {
+    const known = CARD_ERROR_COPY[e.code];
+    if (known) return known;
+    const providerMessage = e.body.providerMessage;
+    if (typeof providerMessage === "string" && providerMessage) return providerMessage;
+    const message = e.body.message;
+    if (typeof message === "string" && message) return message;
+    return e.code;
+  }
+  return e instanceof Error && e.message ? e.message : fallback;
+}
+function CardModal({ onClose }) {
+  const { getClient, styles, wallet } = usePollar();
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides);
+  const [providers, setProviders] = react.useState(null);
+  const [holder, setHolder] = react.useState(void 0);
+  const [requirements, setRequirements] = react.useState(void 0);
+  const [pendingStep, setPendingStep] = react.useState(null);
+  const stepAttempt = react.useRef(null);
+  const [cards, setCards] = react.useState(null);
+  const [balance, setBalance] = react.useState(null);
+  const [transactions, setTransactions] = react.useState(null);
+  const [deposit, setDeposit] = react.useState(null);
+  const [fundings, setFundings] = react.useState(null);
+  const [fundAmount, setFundAmount] = react.useState("");
+  const [showManual, setShowManual] = react.useState(false);
+  const [occupations, setOccupations] = react.useState([]);
+  const [kyc, setKyc] = react.useState(emptyKyc);
+  const [terms, setTerms] = react.useState(false);
+  const [nickname, setNickname] = react.useState("");
+  const [secrets, setSecrets] = react.useState(null);
+  const [panel, setPanel] = react.useState("card");
+  const [busy, setBusy] = react.useState(null);
+  const [error, setError] = react.useState("");
+  const revealTimer = react.useRef(null);
+  const provider = providers?.[0] ?? null;
+  const card = cards?.[0] ?? null;
+  const loadHolder = react.useCallback(async () => {
+    const h = await getClient().getCardHolder();
+    setHolder(h);
+    return h;
+  }, [getClient]);
+  const loadRequirements = react.useCallback(
+    async (cardProviderId) => {
+      try {
+        const r = await getClient().getCardRequirements({ cardProviderId });
+        setRequirements(r);
+        return r;
+      } catch {
+        setRequirements(null);
+        return null;
+      }
+    },
+    [getClient]
+  );
+  const loadCardData = react.useCallback(async () => {
+    const client = getClient();
+    const list = await client.getCards();
+    if (list.length === 0) {
+      setCards(list);
+      return;
+    }
+    const [b, tx] = await Promise.all([client.getCardBalance(), client.getCardTransactions({ limit: TX_LIMIT })]);
+    setBalance(b);
+    setTransactions(tx.transactions);
+    setCards(list);
+  }, [getClient]);
+  react.useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const ps = await getClient().getCardProviders();
+        if (cancelled) return;
+        setProviders(ps);
+        if (ps.length === 0) return;
+        const [h] = await Promise.all([loadHolder(), loadRequirements(ps[0].id)]);
+        if (cancelled) return;
+        if (h?.kycStatus === "APPROVED") await loadCardData();
+      } catch (e) {
+        if (!cancelled) {
+          setProviders((cur) => cur ?? []);
+          setError(errorText(e, "Could not load your card"));
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [getClient, loadHolder, loadRequirements, loadCardData]);
+  const stage = cardStage(holder, requirements);
+  react.useEffect(() => {
+    if (stage !== "provider-form") return;
+    const profile = getClient().getUserProfile();
+    setKyc((k) => ({
+      ...k,
+      firstName: k.firstName || profile?.first_name || "",
+      lastName: k.lastName || profile?.last_name || ""
+    }));
+    getClient().getCardOccupations().then(setOccupations).catch(() => setOccupations([]));
+  }, [stage, getClient]);
+  const kycPending = holder ? holder.kycStatus in KYC_PENDING_COPY : false;
+  react.useEffect(() => {
+    if (!kycPending) return;
+    const id = setInterval(() => {
+      loadHolder().then((h) => {
+        if (h?.kycStatus === "APPROVED") void loadCardData();
+      }).catch(() => {
+      });
+    }, KYC_POLL_MS);
+    return () => clearInterval(id);
+  }, [kycPending, loadHolder, loadCardData]);
+  react.useEffect(
+    () => () => {
+      if (revealTimer.current) clearTimeout(revealTimer.current);
+    },
+    []
+  );
+  function openStep(step) {
+    stepAttempt.current = step;
+    setPendingStep(step);
+  }
+  async function run(key, work, fallback) {
+    if (busy) return;
+    setBusy(key);
+    setError("");
+    try {
+      await work();
+    } catch (e) {
+      const step = requiredCardStep(e);
+      if (step) openStep(step);
+      else setError(errorText(e, fallback));
+    } finally {
+      setBusy(null);
+    }
+  }
+  async function afterStep() {
+    if (!provider) return;
+    const [h, r] = await Promise.all([loadHolder(), loadRequirements(provider.id)]);
+    if (h?.kycStatus === "APPROVED") await loadCardData();
+    if (r?.next && !blockedStepMessage(r.next)) openStep(pendingFromRequirement(provider.id, r.next));
+  }
+  const start = () => run(
+    "start",
+    async () => {
+      if (!provider) return;
+      if (requirements?.next) {
+        openStep(pendingFromRequirement(provider.id, requirements.next));
+        return;
+      }
+      if (holder) return afterStep();
+      setHolder(await getClient().createCardHolder());
+    },
+    "Could not start your card application"
+  );
+  const sendKyc = () => run(
+    "kyc",
+    async () => {
+      const address = { ...kyc.address };
+      if (!address.line2) delete address.line2;
+      setHolder(await getClient().submitCardKyc({ termsAccepted: terms, kyc: { ...kyc, address } }));
+    },
+    "Could not submit your information"
+  );
+  const issue = () => run(
+    "issue",
+    async () => {
+      await getClient().issueCard(nickname.trim() ? { nickname: nickname.trim() } : {});
+      await loadCardData();
+    },
+    "Could not issue your card"
+  );
+  const refresh = () => run(
+    "refresh",
+    async () => {
+      await loadCardData();
+    },
+    "Could not refresh your card"
+  );
+  const reveal = () => run(
+    "reveal",
+    async () => {
+      if (!card) return;
+      const s = await getClient().revealCardSecrets(card.id);
+      setSecrets(s);
+      if (revealTimer.current) clearTimeout(revealTimer.current);
+      revealTimer.current = setTimeout(() => setSecrets(null), REVEAL_MS);
+    },
+    "Could not show the card details"
+  );
+  const openFund = () => run(
+    "fund",
+    async () => {
+      setFundings(await getClient().listCardFundings());
+      setPanel("fund");
+    },
+    "Could not load your fundings"
+  );
+  const fund = () => run(
+    "fund-send",
+    async () => {
+      const outcome = await getClient().fundCard({ amount: fundAmount.trim() });
+      if (outcome.status === "cancelled") {
+        setError("The payment was not signed.");
+        return;
+      }
+      setFundings((cur) => [outcome.funding, ...(cur ?? []).filter((f) => f.id !== outcome.funding.id)]);
+      setFundAmount("");
+    },
+    "Could not fund the card"
+  );
+  const showManualAddress = () => run(
+    "fund-manual",
+    async () => {
+      if (!deposit) setDeposit(await getClient().getCardDepositAddresses());
+      setShowManual(true);
+    },
+    "Could not load the deposit address"
+  );
+  const fundingsInflight = (fundings ?? []).some((f) => FUNDING_INFLIGHT.has(f.status));
+  react.useEffect(() => {
+    if (panel !== "fund" || !fundingsInflight) return;
+    const id = setInterval(() => {
+      getClient().listCardFundings().then((next) => {
+        setFundings((previous) => {
+          const credited = next.some(
+            (f) => f.status === "CREDITED" && previous?.find((p) => p.id === f.id)?.status !== "CREDITED"
+          );
+          if (credited) void loadCardData().catch(() => {
+          });
+          return next;
+        });
+      }).catch(() => {
+      });
+    }, FUNDING_POLL_MS);
+    return () => clearInterval(id);
+  }, [panel, fundingsInflight, getClient, loadCardData]);
+  const field = (key, label, extra = {}) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "pollar-send-field", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-send-label", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: "pollar-input",
+        value: kyc[key],
+        onChange: (e) => setKyc((k) => ({ ...k, [key]: e.target.value })),
+        ...extra
+      }
+    )
+  ] });
+  const addressField = (key, label, extra = {}) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "pollar-send-field", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-send-label", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: "pollar-input",
+        value: kyc.address[key] ?? "",
+        onChange: (e) => setKyc((k) => ({ ...k, address: { ...k.address, [key]: e.target.value } })),
+        ...extra
+      }
+    )
+  ] });
+  const rangeField = (key, label) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "pollar-send-field", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-send-label", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        className: "pollar-input pollar-send-select",
+        value: kyc[key],
+        onChange: (e) => setKyc((k) => ({ ...k, [key]: e.target.value })),
+        children: INCOME_RANGES.map((r) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: r.value, children: r.label }, r.value))
+      }
+    )
+  ] });
+  const kycComplete = kyc.firstName && kyc.lastName && /^\d{4}-\d{2}-\d{2}$/.test(kyc.birthDate) && kyc.nationalId && kyc.countryOfIssue.length === 2 && kyc.phoneCountryCode && kyc.phoneNumber && kyc.occupation && kyc.accountPurpose && kyc.address.line1 && kyc.address.city && kyc.address.region && kyc.address.postalCode && kyc.address.countryCode.length === 2;
+  if (pendingStep) {
+    const close = () => {
+      stepAttempt.current = null;
+      setPendingStep(null);
+    };
+    const done = () => {
+      if (stepAttempt.current !== pendingStep) return;
+      close();
+      void afterStep();
+    };
+    const progress = pendingStep.progress ? { progress: pendingStep.progress } : {};
+    if (pendingStep.type === "FORM") {
+      return /* @__PURE__ */ jsxRuntime.jsx(RequirementFormModal, { formId: pendingStep.optionId, ...progress, onClose: close, onSubmitted: done });
+    }
+    if (pendingStep.type === "REGISTRY_CHECK") {
+      return /* @__PURE__ */ jsxRuntime.jsx(RegistryCheckModal, { optionId: pendingStep.optionId, ...progress, onClose: close, onApproved: done });
+    }
+    if (pendingStep.type === "PROVIDER_REGISTRATION") {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        ProviderRegistrationModal,
+        {
+          cardProviderId: pendingStep.cardProviderId,
+          ...progress,
+          onClose: close,
+          onRegistered: done
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      KycModal,
+      {
+        cardProviderId: pendingStep.cardProviderId,
+        providerId: pendingStep.optionId,
+        onClose: close,
+        onApproved: done
+      }
+    );
+  }
+  const loading = providers === null || providers.length > 0 && (holder === void 0 || requirements === void 0) || holder?.kycStatus === "APPROVED" && cards === null && !error;
+  const blocked = requirements?.next ? blockedStepMessage(requirements.next) : null;
+  const stepsPending = !!requirements?.next;
+  const title = panel === "fund" ? "Add funds" : card ? card.nickname ?? "Your card" : "Get a card";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "pollar-modal-card pollar-card-modal",
+      "data-theme": theme,
+      style: cssVars,
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-send-header-left", children: [
+            panel === "fund" && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-modal-close", onClick: () => setPanel("card"), "aria-label": "Back", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 3L5 8l5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: title })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header-actions", children: [
+            card && panel === "card" && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "pollar-modal-close",
+                onClick: () => void refresh(),
+                disabled: busy !== null,
+                "aria-label": "Refresh",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    className: busy === "refresh" ? "pollar-modal-refresh-icon pollar-spinning" : "pollar-modal-refresh-icon",
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    "aria-hidden": true,
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 2v3h-3",
+                        stroke: "currentColor",
+                        strokeWidth: "1.6",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    )
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-modal-close", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 2l12 12M14 2L2 14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
+          ] })
+        ] }),
+        loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-loading-block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-spinner" }) }),
+        !loading && providers?.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: "Cards are not available for this app." }),
+        !loading && provider && !provider.available && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: "Cards are not available right now." }),
+        !loading && provider && provider.available && stage === "steps" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+            "Get ",
+            provider.cardLabel ?? `a ${provider.name} card`,
+            " funded from your wallet",
+            wallet ? "" : " once you sign in",
+            ". You will verify your identity first; it takes a few minutes."
+          ] }),
+          requirements && requirements.total > 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "pollar-card-note", children: [
+            requirements.completed,
+            " of ",
+            requirements.total,
+            " steps done"
+          ] }),
+          blocked && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: blocked }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-actions", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "pollar-btn-primary",
+              onClick: () => void start(),
+              disabled: busy !== null || !wallet || !!blocked,
+              children: busy === "start" ? "Starting..." : stepsPending ? "Continue" : "Start"
+            }
+          ) })
+        ] }),
+        !loading && provider && stage === "provider-form" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-card-section-title", children: "About you" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-card-grid", children: [
+            field("firstName", "First name", { autoComplete: "given-name" }),
+            field("lastName", "Last name", { autoComplete: "family-name" }),
+            field("birthDate", "Birth date", { placeholder: "YYYY-MM-DD", autoComplete: "bday" }),
+            field("nationalId", "ID number"),
+            field("countryOfIssue", "ID country (2 letters)", { maxLength: 2, placeholder: "AR" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "pollar-send-field", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-send-label", children: "Occupation" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "select",
+                {
+                  className: "pollar-input pollar-send-select",
+                  value: kyc.occupation,
+                  onChange: (e) => setKyc((k) => ({ ...k, occupation: e.target.value })),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select..." }),
+                    occupations.map((o) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: o.code, children: o.label }, o.code))
+                  ]
+                }
+              )
+            ] }),
+            field("phoneCountryCode", "Phone country code", { placeholder: "54", inputMode: "numeric" }),
+            field("phoneNumber", "Phone number", { placeholder: "91155551234", inputMode: "numeric" }),
+            rangeField("annualSalary", "Annual income"),
+            rangeField("expectedMonthlyVolume", "Expected monthly spend"),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-card-grid-full", children: field("accountPurpose", "What will you use the card for?") })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-card-section-title", children: "Address" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-card-grid", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-card-grid-full", children: addressField("line1", "Street and number", { autoComplete: "address-line1" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-card-grid-full", children: addressField("line2", "Apartment, floor (optional)", { autoComplete: "address-line2" }) }),
+            addressField("city", "City", { autoComplete: "address-level2" }),
+            addressField("region", "State or province", { autoComplete: "address-level1" }),
+            addressField("postalCode", "Postal code", { autoComplete: "postal-code" }),
+            addressField("countryCode", "Country (2 letters)", { maxLength: 2, placeholder: "AR" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "pollar-card-terms", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: terms, onChange: (e) => setTerms(e.target.checked) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              "I have read and accept the",
+              " ",
+              /* @__PURE__ */ jsxRuntime.jsxs("a", { className: "pollar-card-link", href: provider.termsUrl ?? "#", target: "_blank", rel: "noreferrer", children: [
+                provider.name,
+                " terms of service"
+              ] }),
+              provider.termsUrl ? "" : " (demo: the final terms link is pending)",
+              "."
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-actions", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "pollar-btn-primary",
+              onClick: () => void sendKyc(),
+              disabled: busy !== null || !terms || !kycComplete,
+              children: busy === "kyc" ? "Sending..." : "Continue"
+            }
+          ) })
+        ] }),
+        !loading && holder && holder.kycStatus in KYC_PENDING_COPY && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: KYC_PENDING_COPY[holder.kycStatus] }),
+          holder.kycReason && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-card-note", children: holder.kycReason }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-actions", children: [
+            holder.verificationLink && /* @__PURE__ */ jsxRuntime.jsx("a", { className: "pollar-btn-primary", href: holder.verificationLink, target: "_blank", rel: "noreferrer", children: "Verify my identity" }),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: () => void loadHolder().catch(() => {
+            }), children: "I am done" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-card-note", children: "This screen updates on its own once the verification comes back." })
+        ] }),
+        !loading && holder && holder.kycStatus in KYC_FINAL_COPY && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-error", children: [
+          KYC_FINAL_COPY[holder.kycStatus],
+          holder.kycReason ? ` ${holder.kycReason}` : ""
+        ] }),
+        !loading && provider && holder?.kycStatus === "APPROVED" && cards !== null && !card && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Your identity is verified. Issue your virtual card to start." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "pollar-send-field", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-send-label", children: "Card name (optional)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                className: "pollar-input",
+                value: nickname,
+                maxLength: 40,
+                onChange: (e) => setNickname(e.target.value),
+                placeholder: "Everyday card"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-actions", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", onClick: () => void issue(), disabled: busy !== null, children: busy === "issue" ? "Issuing..." : "Issue my card" }) })
+        ] }),
+        !loading && provider && card && panel === "card" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-card-visual", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-card-visual-top", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-card-brand", children: [
+                styles.logoUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { src: styles.logoUrl, alt: "", className: "pollar-card-brand-logo" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: provider.cardLabel ?? provider.name })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-card-status", children: card.status.toLowerCase() })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-card-visual-chip" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-card-visual-number", children: secrets ? groupPan(secrets.pan) : `\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ${card.last4 ?? "\u2022\u2022\u2022\u2022"}` }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-card-visual-bottom", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Expires" }),
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: card.expMonth && card.expYear ? `${card.expMonth}/${card.expYear.slice(-2)}` : "--/--" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: "CVC" }),
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: secrets ? secrets.cvc : "\u2022\u2022\u2022" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: card.type.toLowerCase() }),
+                /* @__PURE__ */ jsxRuntime.jsx("strong", { children: card.currency })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-card-balance", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Available" }),
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: usd(balance?.spendingPowerCents) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Limit" }),
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: usd(balance?.creditLimitCents) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: "To pay" }),
+              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: usd(balance?.balanceDueCents) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-actions", children: [
+            provider.supports.revealSecrets && (secrets ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: () => setSecrets(null), children: "Hide details" }) : /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: () => void reveal(), disabled: busy !== null, children: busy === "reveal" ? "Loading..." : "Show details" })),
+            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", onClick: () => void openFund(), disabled: busy !== null, children: "Add funds" })
+          ] }),
+          secrets && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-card-note", children: "The details hide on their own in 30 seconds. Do not share them." }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-card-section-title", children: "Recent activity" }),
+          transactions === null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-card-note", children: "Loading..." }),
+          transactions?.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-card-note", children: "No movements yet." }),
+          transactions?.map((tx) => {
+            const purchase = tx.purchase;
+            const local = purchase?.localAmount && purchase.localCurrency && purchase.localCurrency !== "USD" ? money(String(purchase.localAmount), purchase.localCurrency) : null;
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-card-tx", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                tx.merchantName ?? TX_LABELS[tx.type] ?? tx.type,
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-card-tx-meta", children: [
+                  new Date(tx.occurredAt).toLocaleDateString(),
+                  tx.merchantName ? ` \xB7 ${TX_LABELS[tx.type] ?? tx.type}` : "",
+                  purchase?.status && purchase.status !== "completed" ? ` \xB7 ${purchase.status}` : ""
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-card-tx-amount", "data-direction": tx.direction ?? void 0, children: [
+                tx.direction === "credit" ? "+" : tx.direction === "debit" ? "-" : "",
+                money(tx.amount, tx.currency),
+                local && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-card-tx-meta", children: local })
+              ] })
+            ] }, tx.id);
+          })
+        ] }),
+        !loading && provider && card && panel === "fund" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+            "Move ",
+            provider.fundingAssets.join(" or ") || "USDC",
+            " from your wallet to your card. It takes a few minutes to cross to the card network."
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "pollar-send-field", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-send-label", children: "Amount (USDC)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                className: "pollar-input",
+                inputMode: "decimal",
+                placeholder: "10",
+                value: fundAmount,
+                onChange: (e) => setFundAmount(e.target.value.replace(/[^0-9.]/g, ""))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-actions", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "pollar-btn-primary",
+              onClick: () => void fund(),
+              disabled: busy !== null || !(Number(fundAmount) >= 1),
+              children: busy === "fund-send" ? "Sending..." : "Fund from my wallet"
+            }
+          ) }),
+          fundings && fundings.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-card-section-title", children: "Your fundings" }),
+            fundings.map((f) => {
+              const copy = FUNDING_COPY[f.status];
+              const inflight = FUNDING_INFLIGHT.has(f.status);
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-card-tx", "aria-busy": inflight, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-card-funding-title", children: [
+                    inflight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-spinner pollar-spinner-sm", "aria-hidden": true }),
+                    copy?.title ?? f.status
+                  ] }),
+                  inflight && copy?.step && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-card-tx-meta", role: "status", children: [
+                    "Step ",
+                    copy.step,
+                    " of ",
+                    FUNDING_STEPS,
+                    " \xB7 ",
+                    copy.hint
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-card-tx-meta", children: [
+                    new Date(f.createdAt).toLocaleString(),
+                    f.status === "FAILED" && f.error ? ` \xB7 ${f.error}` : ""
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-card-tx-amount", "data-direction": f.status === "CREDITED" ? "credit" : void 0, children: money(f.amount, "USD") })
+              ] }, f.id);
+            }),
+            fundingsInflight && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-card-note", children: "You can close this window: the funding keeps going and your card is credited when it finishes." })
+          ] }),
+          !showManual && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "pollar-card-note", children: [
+            "Prefer to send from another wallet?",
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "pollar-card-link",
+                onClick: () => void showManualAddress(),
+                disabled: busy !== null,
+                children: "Show the deposit address"
+              }
+            )
+          ] }),
+          showManual && deposit?.map((d) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-card-deposit", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: d.network }),
+            " (chain ",
+            d.chainId,
+            ")",
+            /* @__PURE__ */ jsxRuntime.jsx("code", { children: d.address }),
+            /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: d.address, label: "Copy address" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "pollar-card-note", children: [
+              "Send only ",
+              d.tokens.map((t) => (t.currency ?? "token").toUpperCase()).join(" or "),
+              " on ",
+              d.network,
+              "; anything else can be lost."
+            ] })
+          ] }, d.network)),
+          showManual && deposit?.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: "The provider returned no deposit address." }),
+          showManual && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-card-note", children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-card-link", onClick: () => setShowManual(false), children: "Hide the deposit address" }) })
+        ] }),
+        error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-error", children: error }),
+        /* @__PURE__ */ jsxRuntime.jsx(PollarModalFooter, {})
+      ]
+    }
+  ) });
+}
 function describeDevice(s) {
   if (s.deviceLabel) return normalizeDeviceLabel(s.deviceLabel);
   if (!s.userAgent) return "Unknown device";
@@ -7794,9 +8686,30 @@ function PollarProvider({
   const [sendModalKey, setSendModalKey] = react.useState(0);
   const [swapModalKey, setSwapModalKey] = react.useState(0);
   const [earnModalKey, setEarnModalKey] = react.useState(0);
+  const [cardModalOpen, setCardModalOpen] = react.useState(false);
+  const [cardModalKey, setCardModalKey] = react.useState(0);
   const [receiveModalOpen, setReceiveModalOpen] = react.useState(false);
   const [sessionsModalOpen, setSessionsModalOpen] = react.useState(false);
   const [distributionRulesModalOpen, setDistributionRulesModalOpen] = react.useState(false);
+  react.useEffect(
+    () => pollarClient.onAuthStateChange((authState) => {
+      if (authState.step !== "idle") return;
+      setTransactionModalOpen(false);
+      setKycModalOpen(false);
+      setRampModalOpen(false);
+      setTxHistoryModalOpen(false);
+      setWalletBalanceModalOpen(false);
+      setEnabledAssetsModalOpen(false);
+      setSendModalOpen(false);
+      setSwapModalOpen(false);
+      setEarnModalOpen(false);
+      setCardModalOpen(false);
+      setReceiveModalOpen(false);
+      setSessionsModalOpen(false);
+      setDistributionRulesModalOpen(false);
+    }),
+    [pollarClient]
+  );
   const walletAddress = sessionState?.wallet?.address || "";
   const walletProvisioning = sessionState?.wallet?.provisioning;
   const getClient = react.useCallback(() => pollarClient, [pollarClient]);
@@ -7866,6 +8779,11 @@ function PollarProvider({
         setEarnModalKey((k) => k + 1);
         setEarnModalOpen(true);
       },
+      // cards
+      openCardModal: () => {
+        setCardModalKey((k) => k + 1);
+        setCardModalOpen(true);
+      },
       // sessions
       sessions,
       openSessionsModal: () => setSessionsModalOpen(true),
@@ -7940,6 +8858,8 @@ function PollarProvider({
     sendModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setSendModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(SendModal, { onClose: () => setSendModalOpen(false) }) }, sendModalKey),
     swapModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setSwapModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(SwapModal, { onClose: () => setSwapModalOpen(false) }) }, swapModalKey),
     earnModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setEarnModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(EarnModal, { onClose: () => setEarnModalOpen(false) }) }, earnModalKey),
+    cardModalOpen && // Keyed by the wallet too: a different user, or signing in with it open, starts it from scratch.
+    /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setCardModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(CardModal, { onClose: () => setCardModalOpen(false) }) }, `${cardModalKey}:${walletAddress}`),
     receiveModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setReceiveModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(ReceiveModal, { onClose: () => setReceiveModalOpen(false) }) }),
     sessionsModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setSessionsModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(SessionsModal, { onClose: () => setSessionsModalOpen(false) }) }),
     distributionRulesModalOpen && /* @__PURE__ */ jsxRuntime.jsx(ModalErrorBoundary, { onClose: () => setDistributionRulesModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(DistributionRulesModal, { onClose: () => setDistributionRulesModalOpen(false) }) })
@@ -8451,6 +9371,7 @@ function WalletButton() {
   );
 }
 
+exports.CardModal = CardModal;
 exports.ChainSelect = ChainSelect;
 exports.DistributionRulesModal = DistributionRulesModal;
 exports.DistributionRulesModalTemplate = DistributionRulesModalTemplate;