@pollar/react 0.11.2 → 0.11.3

package/dist/index.js

@@ -1035,7 +1035,7 @@ var PollarModalFooter = () => {
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-footer-name", children: "Pollar" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-footer-version", children: [
         "v",
-        "0.11.2"
+        "0.11.3"
       ] })
     ] })
   ] });
@@ -1131,6 +1131,81 @@ function Toggle({ checked, onChange, disabled = false, busy = false, label }) {
     }
   );
 }
+
+// src/components/modal-theme.ts
+var DEFAULT_MODAL_BORDER_RADIUS = 16;
+var DEFAULT_BUTTON_BORDER_RADIUS = 6;
+var DEFAULT_OVERLAY_Z_INDEX = 50;
+function px(value, fallback) {
+  return `${typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : fallback}px`;
+}
+function color(value, fallback) {
+  return typeof value === "string" && value.trim() !== "" ? value : fallback;
+}
+function parseHex(value) {
+  const hex = value.trim().replace(/^#/, "");
+  const full = hex.length === 3 ? [...hex].map((c) => c + c).join("") : hex;
+  if (!/^[0-9a-f]{6}$/i.test(full)) return null;
+  return [Number.parseInt(full.slice(0, 2), 16), Number.parseInt(full.slice(2, 4), 16), Number.parseInt(full.slice(4, 6), 16)];
+}
+function readableTextOn(background) {
+  const rgb = parseHex(background);
+  if (!rgb) return "#ffffff";
+  const [r, g, b] = rgb;
+  return (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255 > 0.6 ? "#111827" : "#ffffff";
+}
+function buildModalCssVars(theme, accentColor, overrides = {}, variant = "compact") {
+  const isDark = theme === "dark";
+  const textColor = color(overrides.textColor, isDark ? "#ffffff" : "#111827");
+  const secondaryBg = color(overrides.buttonColor, "");
+  return {
+    "--pollar-accent": accentColor,
+    "--pollar-bg": color(overrides.backgroundColor, isDark ? "#1a1a1a" : "#ffffff"),
+    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
+    "--pollar-text": textColor,
+    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
+    // The primary button is the accent's, straight up; its label follows the
+    // accent's luminance so a pale accent doesn't render white-on-white.
+    "--pollar-btn-primary-fg": readableTextOn(accentColor),
+    ...secondaryBg ? {
+      "--pollar-btn-secondary-bg": secondaryBg,
+      "--pollar-btn-secondary-fg": readableTextOn(secondaryBg)
+    } : {},
+    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
+    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
+    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
+    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
+    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
+    "--pollar-modal-border-radius": px(overrides.modalBorderRadius, DEFAULT_MODAL_BORDER_RADIUS),
+    "--pollar-buttons-border-radius": px(overrides.buttonBorderRadius, DEFAULT_BUTTON_BORDER_RADIUS),
+    "--pollar-buttons-height": "44px",
+    "--pollar-input-height": "44px",
+    "--pollar-input-border-radius": "0.5rem",
+    "--pollar-card-border-radius": "10px",
+    ...variant === "hero" ? {
+      "--pollar-modal-padding": "2rem",
+      "--pollar-modal-heading-size": "1.375rem",
+      "--pollar-modal-subtitle-size": "0.9rem"
+    } : {}
+  };
+}
+function modalChrome(styles) {
+  const zIndex = styles.modalZIndex;
+  return {
+    theme: styles.theme ?? "light",
+    accentColor: styles.accentColor ?? "#005DB4",
+    styleOverrides: {
+      backgroundColor: styles.backgroundColor,
+      textColor: styles.textColor,
+      buttonColor: styles.buttonColor,
+      modalBorderRadius: styles.modalBorderRadius,
+      buttonBorderRadius: styles.buttonBorderRadius
+    },
+    overlayStyle: {
+      "--pollar-overlay-z-index": typeof zIndex === "number" && Number.isFinite(zIndex) ? zIndex : DEFAULT_OVERLAY_Z_INDEX
+    }
+  };
+}
 var PERIOD_LABEL = {
   DAY: "every 24h",
   DAY_CALENDAR: "daily",
@@ -1144,7 +1219,7 @@ var REASON_LABEL = {
   DISTRIBUTION_RULE_NOT_STARTED: "Not started yet",
   DISTRIBUTION_RULE_EXPIRED: "Expired",
   DISTRIBUTION_RULE_EXHAUSTED: "Fully claimed",
-  // Per-user, per-window claim limit (resets next period) — not permanent.
+  // Per-user, per-window claim limit (resets next period) - not permanent.
   DISTRIBUTION_RATE_LIMIT_EXCEEDED: "Claimed for this period"
 };
 function reasonLabel(reason) {
@@ -1200,6 +1275,7 @@ function RuleCard({
 function DistributionRulesModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   state,
   claimingId,
   claimErrors,
@@ -1208,24 +1284,7 @@ function DistributionRulesModalTemplate({
   onClaim,
   onClose
 }) {
-  const isDark = theme === "dark";
-  const cssVars = {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px"
-  };
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides);
   const isLoading = state.step === "loading";
   const rules = state.step === "loaded" ? state.rules : [];
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1300,7 +1359,7 @@ function DistributionRulesModalTemplate({
 }
 function DistributionRulesModal({ onClose }) {
   const { getClient, styles } = usePollar();
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const [state, setState] = react.useState({ step: "idle" });
   const [claimingId, setClaimingId] = react.useState(null);
   const [claimErrors, setClaimErrors] = react.useState({});
@@ -1343,11 +1402,12 @@ function DistributionRulesModal({ onClose }) {
     },
     [getClient]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
     DistributionRulesModalTemplate,
     {
       theme,
       accentColor,
+      styleOverrides,
       state,
       claimingId,
       claimErrors,
@@ -1419,26 +1479,6 @@ function useChains() {
     return { chains, primaryChain, primaryAddress: addressForChain(wallets, primaryChain), ready: true };
   }, [wallets, configured, ready]);
 }
-function cssVarsFor(theme, accentColor) {
-  const isDark = theme === "dark";
-  return {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px"
-  };
-}
 function assetKey(record) {
   return record.code + (record.issuer ?? "");
 }
@@ -1485,6 +1525,7 @@ function AssetItem({
 function EnabledAssetsModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   enabledAssets,
   walletAddress,
   chains,
@@ -1497,7 +1538,7 @@ function EnabledAssetsModalTemplate({
   onToggleTrustline,
   onAddCustom
 }) {
-  const cssVars = cssVarsFor(theme, accentColor);
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides);
   const isLoading = enabledAssets.step === "loading";
   const data = useStickyData(enabledAssets.step === "loaded" ? enabledAssets.data : null);
   const busy = busyKey !== null;
@@ -1589,13 +1630,14 @@ function isValidIssuer(issuer) {
 function CustomTrustlineModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   busy,
   actionError,
   onBack,
   onClose,
   onSubmit
 }) {
-  const cssVars = cssVarsFor(theme, accentColor);
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides);
   const [code, setCode] = react.useState("");
   const [issuer, setIssuer] = react.useState("");
   const [limit, setLimit] = react.useState("");
@@ -1692,7 +1734,7 @@ function assetKey2(record) {
 }
 function EnabledAssetsModal({ onClose }) {
   const { enabledAssets, refreshAssets, setTrustline, wallets, styles } = usePollar();
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const { chains } = useChains();
   const [selectedChain, setSelectedChain] = react.useState(null);
   react.useEffect(() => {
@@ -1743,11 +1785,12 @@ function EnabledAssetsModal({ onClose }) {
     },
     [runAction]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: view === "list" ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: onClose, children: view === "list" ? /* @__PURE__ */ jsxRuntime.jsx(
     EnabledAssetsModalTemplate,
     {
       theme,
       accentColor,
+      styleOverrides,
       enabledAssets,
       walletAddress,
       chains,
@@ -1768,6 +1811,7 @@ function EnabledAssetsModal({ onClose }) {
     {
       theme,
       accentColor,
+      styleOverrides,
       busy: busyKey === "custom",
       actionError,
       onBack: () => {
@@ -1802,6 +1846,7 @@ function KycStatus({ status, className }) {
 function KycModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   step,
   providers,
   selectedProvider,
@@ -1813,27 +1858,7 @@ function KycModalTemplate({
   onRefresh,
   onClose
 }) {
-  const isDark = theme === "dark";
-  const cssVars = {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px",
-    "--pollar-modal-padding": "2rem",
-    "--pollar-modal-heading-size": "1.375rem",
-    "--pollar-modal-subtitle-size": "0.9rem"
-  };
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides, "hero");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card pollar-kyc-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-header", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-kyc-header-text", children: [
@@ -1932,7 +1957,7 @@ function KycModal({ onClose, country = "MX", level = "basic", onApproved }) {
   const [kycStatus, setKycStatus] = react.useState("none");
   const [isLoading, setIsLoading] = react.useState(false);
   const client = getClient();
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const loadProviders = react.useCallback(() => {
     setIsLoading(true);
     return getClient().getKycProviders(country).then((result) => setProviders(result.providers)).catch(() => setProviders([])).finally(() => setIsLoading(false));
@@ -1972,11 +1997,12 @@ function KycModal({ onClose, country = "MX", level = "basic", onApproved }) {
       setStep("done");
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
     KycModalTemplate,
     {
       theme,
       accentColor,
+      styleOverrides,
       step,
       providers,
       selectedProvider,
@@ -2168,32 +2194,10 @@ function authStateToStatus(step) {
   if (error.includes(step)) return "ERROR";
   return "NONE";
 }
-function buildModalCssVars(theme, accentColor) {
-  const isDark = theme === "dark";
-  return {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px",
-    "--pollar-modal-padding": "2rem",
-    "--pollar-modal-heading-size": "1.375rem",
-    "--pollar-modal-subtitle-size": "0.9rem"
-  };
-}
 function LoginModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   logoUrl,
   emailEnabled,
   embeddedWallets,
@@ -2227,7 +2231,7 @@ function LoginModalTemplate({
     return acc;
   }, []);
   const activeGroupAdapters = walletGroups.find((g) => g.label === activeGroup)?.adapters ?? [];
-  const cssVars = buildModalCssVars(theme, accentColor);
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides, "hero");
   const status = authStateToStatus(authState.step);
   const isLoading = status === "LOADING";
   const isEmailCodeError = authState.step === "error" && (authState.errorCode === core.AUTH_ERROR_CODES.EMAIL_CODE_EXPIRED || authState.errorCode === core.AUTH_ERROR_CODES.EMAIL_CODE_INVALID);
@@ -2406,12 +2410,13 @@ function LoginModalStatus({
   status,
   theme,
   accentColor,
+  styleOverrides,
   logoUrl,
   appName,
   onRetry,
   onCancel
 }) {
-  const cssVars = buildModalCssVars(theme, accentColor);
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides, "hero");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card pollar-modal", style: cssVars, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-close-btn", onClick: onCancel, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
@@ -2446,6 +2451,7 @@ function PrivyLoginSubmodal({
   adapter,
   theme,
   accentColor,
+  styleOverrides,
   logoUrl,
   appName,
   onBack,
@@ -2457,28 +2463,8 @@ function PrivyLoginSubmodal({
   const [view, setView] = react.useState("root");
   const [status, setStatus] = react.useState("NONE");
   const [message, setMessage] = react.useState("");
-  const isDark = theme === "dark";
   const isLoading = status === "LOADING";
-  const cssVars = {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px",
-    "--pollar-modal-padding": "2rem",
-    "--pollar-modal-heading-size": "1.375rem",
-    "--pollar-modal-subtitle-size": "0.9rem"
-  };
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides, "hero");
   function fail(error) {
     setStatus("ERROR");
     setMessage(error instanceof Error ? error.message : "Something went wrong. Please try again.");
@@ -2635,8 +2621,10 @@ function LoginModal({ onClose }) {
       }
     };
   }, [getClient]);
-  const { theme = "light", accentColor = "#005DB4", logoUrl, emailEnabled, embeddedWallets, smartWallet, providers } = styles;
+  const { logoUrl, emailEnabled, embeddedWallets, smartWallet, providers } = styles;
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const smartWalletEnabled = smartWallet ?? false;
+  const modalTitle = styles.modalTitle?.trim() || config.application?.name || "Pollar";
   function handleClose() {
     setEmail("");
     getClient().cancelLogin();
@@ -2684,14 +2672,15 @@ function LoginModal({ onClose }) {
       getClient().login({ provider });
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: handleClose, children: configStatus !== "ready" ? /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: handleClose, children: configStatus !== "ready" ? /* @__PURE__ */ jsxRuntime.jsx(
     LoginModalStatus,
     {
       status: configStatus === "error" ? "error" : "loading",
       theme,
       accentColor,
+      styleOverrides,
       logoUrl: logoUrl ?? null,
-      appName: config.application?.name ?? "Pollar",
+      appName: modalTitle,
       onRetry: retryConfig,
       onCancel: handleClose
     }
@@ -2701,8 +2690,9 @@ function LoginModal({ onClose }) {
       adapter: interactiveAdapter,
       theme,
       accentColor,
+      styleOverrides,
       logoUrl: logoUrl ?? null,
-      appName: config.application?.name ?? "Pollar",
+      appName: modalTitle,
       onBack: () => setInteractiveAdapter(null),
       onCancel: handleClose,
       onAuthenticated: handleInteractiveAuthenticated
@@ -2712,6 +2702,7 @@ function LoginModal({ onClose }) {
     {
       theme,
       accentColor,
+      styleOverrides,
       logoUrl: logoUrl ?? null,
       emailEnabled: !!emailEnabled,
       embeddedWallets: !!embeddedWallets,
@@ -2724,7 +2715,7 @@ function LoginModal({ onClose }) {
         apple: !!providers?.apple
       },
       walletAdapters,
-      appName: config.application?.name ?? "Pollar",
+      appName: modalTitle,
       email,
       onEmailChange: setEmail,
       onEmailSubmit: handleEmailSubmit,
@@ -2747,34 +2738,36 @@ var RAIL_LABELS = {
   PSE: "PSE (Colombia)",
   ACH: "ACH (US)"
 };
-function RouteDisplay({ quote, onSelect }) {
+function RouteDisplay({ quote, busy = false, disabled = false, onSelect }) {
+  const inert = busy || disabled;
+  const select = () => {
+    if (!inert) onSelect(quote);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: "pollar-ramp-route-card",
       "data-recommended": quote.recommended,
+      "data-busy": busy || void 0,
+      "data-disabled": disabled || void 0,
       role: "button",
-      tabIndex: 0,
-      onClick: () => onSelect(quote),
-      onKeyDown: (e) => e.key === "Enter" && onSelect(quote),
+      "aria-busy": busy,
+      "aria-disabled": inert,
+      tabIndex: inert ? -1 : 0,
+      onClick: select,
+      onKeyDown: (e) => e.key === "Enter" && select(),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-route-left", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-route-provider", children: quote.provider }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-ramp-route-meta", children: [
-            RAIL_LABELS[quote.rail] ?? quote.rail,
-            " \xB7 ",
-            quote.protocol,
-            " \xB7 ",
-            quote.estimatedTime
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-route-meta", children: busy ? "Starting\u2026" : `${RAIL_LABELS[quote.rail] ?? quote.rail} \xB7 ${quote.protocol} \xB7 ${quote.estimatedTime}` })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-route-right", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-route-right", children: busy ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-spinner pollar-spinner-sm" }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-ramp-route-fee", children: [
             quote.fee,
             "% fee"
           ] }),
           quote.recommended && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-route-badge", children: "Best rate" })
-        ] })
+        ] }) })
       ]
     }
   );
@@ -2782,10 +2775,24 @@ function RouteDisplay({ quote, onSelect }) {
 var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 function isFieldValid(spec, raw) {
   const value = (raw ?? "").trim();
-  if (!value) return false;
+  if (!value) return spec.optional === true;
   if (spec.type === "email") return EMAIL_RE.test(value);
   return true;
 }
+function listOf(items) {
+  const last = items[items.length - 1];
+  if (last === void 0) return "a few details";
+  if (items.length === 1) return last;
+  return `${items.slice(0, -1).join(", ")} and ${last}`;
+}
+function placeholderFor(field, fields, values) {
+  if (field.placeholderFrom) {
+    const source = fields.find((f) => f.key === field.placeholderFrom);
+    const chosen = source?.options?.find((o) => o.value === values[field.placeholderFrom]);
+    if (chosen?.placeholder) return chosen.placeholder;
+  }
+  return field.placeholder;
+}
 var LOADING_STEPS = ["Detecting your country\u2026", "Consulting providers\u2026", "Route found!"];
 function flagEmoji(code) {
   const cc = code.trim().toUpperCase();
@@ -2799,47 +2806,19 @@ var STATUS_LABEL = {
   completed: "Completed",
   failed: "Failed"
 };
-var INSTRUCTION_LABELS = {
-  br_code: "Pix code",
-  account_holder_name: "Account holder",
-  bank_name: "Bank",
-  bank_address: "Bank address",
-  bank_account_number: "Account number",
-  bank_routing_number: "Routing number",
-  iban: "IBAN",
-  bic: "BIC",
-  clabe: "CLABE",
-  amount: "Amount",
-  currency: "Currency",
-  payment_rails: "Rails"
-};
-function flattenInstructions(instr) {
-  const out = [];
-  for (const [k, v] of Object.entries(instr)) {
-    if (k === "qrBase64") {
-      if (typeof v === "string" && v) out.push({ key: k, label: INSTRUCTION_LABELS[k] ?? "Payment QR", value: v, kind: "qr" });
-      continue;
-    }
-    if ((k === "expiresAt" || k === "expires_at") && (typeof v === "number" || typeof v === "string")) {
-      const ms = Number(v);
-      if (Number.isFinite(ms) && ms > 0) {
-        out.push({ key: k, label: INSTRUCTION_LABELS[k] ?? "Expires", value: new Date(ms).toLocaleString(), kind: "datetime" });
-      }
-      continue;
-    }
-    let value;
-    if (typeof v === "string" || typeof v === "number") value = String(v);
-    else if (Array.isArray(v)) value = v.filter((x) => typeof x === "string" || typeof x === "number").join(", ");
-    else continue;
-    if (!value) continue;
-    out.push({ key: k, label: INSTRUCTION_LABELS[k] ?? k, value, kind: "text" });
-  }
-  return out;
+function displayValue(field) {
+  if (field.type !== "datetime") return field.value;
+  const at = new Date(field.value);
+  return Number.isNaN(at.getTime()) ? field.value : at.toLocaleString();
 }
 function RampWidgetTemplate({
   theme,
   accentColor,
+  styleOverrides,
   step,
+  flowSteps,
+  flowStepIndex,
+  startingQuoteId,
   direction,
   amount,
   currency,
@@ -2855,6 +2834,8 @@ function RampWidgetTemplate({
   txStatus,
   kycUrl,
   tosUrl,
+  kycBlocking,
+  kycJustApproved,
   stellarTxHash,
   explorerUrl,
   depositInstructions,
@@ -2871,31 +2852,12 @@ function RampWidgetTemplate({
   onOpenKyc,
   onOpenTos,
   onCompleteWithdraw,
+  onBack,
   onRetry,
   onRefresh,
   onClose
 }) {
-  const isDark = theme === "dark";
-  const cssVars = {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px",
-    "--pollar-modal-padding": "2rem",
-    "--pollar-modal-heading-size": "1.375rem",
-    "--pollar-modal-subtitle-size": "0.9rem"
-  };
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides, "hero");
   const stepTitle = {
     input: direction === "onramp" ? "Buy crypto" : "Sell crypto",
     loading_quote: "Finding best route",
@@ -2908,7 +2870,11 @@ function RampWidgetTemplate({
     input: direction === "onramp" ? "Enter the amount you want to deposit" : "Enter the amount you want to withdraw",
     loading_quote: "Comparing providers in real time\u2026",
     select_route: "All prices include fees",
-    contact: `${provider || "This provider"} needs your name and email to verify you`,
+    // What this step actually asks for is whatever the route declared, and that
+    // is rarely a name and an email: an Abroad off-ramp asks where to send the
+    // money, not who you are. Say which, rather than asserting the Bridge case
+    // over every provider.
+    contact: `${provider || "This provider"} needs ${listOf(requiredFields.filter((f) => !f.optional).map((f) => f.label.toLowerCase()))} to continue`,
     status: `Finish the flow at ${provider || "the provider"} to continue`,
     error: "Please try again"
   };
@@ -2943,6 +2909,26 @@ function RampWidgetTemplate({
         /* @__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" }) }) })
       ] })
     ] }),
+    flowStepIndex >= 0 && flowSteps.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-steps", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "pollar-ramp-steps-label", children: [
+        "Step ",
+        flowStepIndex + 1,
+        " of ",
+        flowSteps.length
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "pollar-ramp-steps-track",
+          role: "progressbar",
+          "aria-valuenow": flowStepIndex + 1,
+          "aria-valuemin": 1,
+          "aria-valuemax": flowSteps.length,
+          "aria-label": flowSteps[flowStepIndex],
+          children: flowSteps.map((label, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-steps-segment", "data-done": i <= flowStepIndex || void 0 }, label))
+        }
+      )
+    ] }),
     step === "input" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-tabs", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2993,7 +2979,8 @@ function RampWidgetTemplate({
             min: "0",
             onChange: (e) => onAmountChange(e.target.value)
           }
-        )
+        ),
+        errorMsg && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-field-error", children: errorMsg })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-actions", children: [
         /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onClose, children: "Cancel" }),
@@ -3017,12 +3004,25 @@ function RampWidgetTemplate({
       ] }, i))
     ] }),
     step === "select_route" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-route-list", children: quotes.map((q, i) => /* @__PURE__ */ jsxRuntime.jsx(RouteDisplay, { quote: q, onSelect: onSelectQuote }, i)) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onClose, children: "Cancel" })
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-route-list", children: quotes.map((q, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        RouteDisplay,
+        {
+          quote: q,
+          busy: startingQuoteId != null && q.quoteId === startingQuoteId,
+          disabled: startingQuoteId != null && q.quoteId !== startingQuoteId,
+          onSelect: onSelectQuote
+        },
+        i
+      )) }),
+      errorMsg && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "pollar-ramp-payment-note", style: { color: "var(--pollar-error-text)" }, children: errorMsg }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: errorMsg ? "pollar-btn-primary" : "pollar-btn-secondary", onClick: onBack, children: "Back" })
     ] }),
     step === "contact" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       requiredFields.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-field", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "pollar-ramp-label", children: f.label }),
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "pollar-ramp-label", children: [
+          f.label,
+          f.optional && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-field-optional", children: " (optional)" })
+        ] }),
         f.type === "select" ? /* @__PURE__ */ jsxRuntime.jsxs(
           "select",
           {
@@ -3040,14 +3040,16 @@ function RampWidgetTemplate({
             type: f.type,
             className: "pollar-ramp-input",
             value: fieldValues[f.key] ?? "",
+            placeholder: placeholderFor(f, requiredFields, fieldValues),
             autoComplete: f.type === "email" ? "email" : "off",
             onChange: (e) => onFieldChange(f.key, e.target.value)
           }
         ),
+        f.hint && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-field-hint", children: f.hint }),
         f.type === "email" && (fieldValues[f.key] ?? "").trim() !== "" && !isFieldValid(f, fieldValues[f.key]) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-field-error", children: "Enter a valid email address." })
       ] }, f.key)),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-actions", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onRetry, children: "Back" }),
+        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-secondary", onClick: onBack, children: "Back" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -3119,20 +3121,44 @@ function RampWidgetTemplate({
           )
         ] })
       ] }),
-      depositInstructions && txStatus !== "completed" && flattenInstructions(depositInstructions).map(({ key, label, value, kind }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment-field", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-payment-label", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-payment-value", children: kind === "qr" ? /* @__PURE__ */ jsxRuntime.jsx(
+      depositInstructions?.scannable && txStatus !== "completed" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-payment-label", children: "Payment QR" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-payment-value", children: depositInstructions.scannable.image.inlineSafe ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "pollar-ramp-qr",
+            "aria-label": "Payment QR",
+            dangerouslySetInnerHTML: { __html: depositInstructions.scannable.image.data }
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
           "img",
           {
-            src: value.startsWith("data:") ? value : `data:image/png;base64,${value}`,
-            alt: label,
+            src: `data:${depositInstructions.scannable.image.mediaType};base64,${depositInstructions.scannable.image.data}`,
+            alt: "Payment QR",
             style: { width: "100%", maxWidth: 220, height: "auto", display: "block", margin: "0 auto" }
           }
-        ) : kind === "datetime" ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: value }) : /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("code", { style: { flex: 1, wordBreak: "break-all" }, children: value }),
-          /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value, label: `Copy ${label}` })
+        ) })
+      ] }),
+      depositInstructions?.scannable?.payload && depositInstructions.scannable.payloadLabel && txStatus !== "completed" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-payment-label", children: depositInstructions.scannable.payloadLabel }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-payment-value", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("code", { style: { flex: 1, wordBreak: "break-all" }, children: depositInstructions.scannable.payload }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CopyButton,
+            {
+              value: depositInstructions.scannable.payload,
+              label: `Copy ${depositInstructions.scannable.payloadLabel}`
+            }
+          )
         ] }) })
-      ] }, key)),
+      ] }),
+      depositInstructions && txStatus !== "completed" && depositInstructions.fields.map((f) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-ramp-payment-field", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-ramp-payment-label", children: f.label }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-ramp-payment-value", children: f.copyable ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("code", { style: { flex: 1, wordBreak: "break-all" }, children: f.value }),
+          /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: f.value, label: `Copy ${f.label}` })
+        ] }) : f.type === "url" ? /* @__PURE__ */ jsxRuntime.jsx("a", { href: f.value, target: "_blank", rel: "noopener noreferrer", children: f.value }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: displayValue(f) }) })
+      ] }, f.key)),
       tosUrl && !depositInstructions && txStatus !== "completed" && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: "pollar-btn-primary", onClick: onOpenTos, children: [
         "Accept terms at ",
         provider
@@ -3141,6 +3167,16 @@ function RampWidgetTemplate({
         "Continue at ",
         provider
       ] }),
+      kycBlocking && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "pollar-ramp-payment-note", children: [
+        provider,
+        " needs to verify your identity before this payout. Nothing has been sent yet \u2014 complete verification with ",
+        provider,
+        ", and this will update on its own."
+      ] }),
+      kycJustApproved && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "pollar-ramp-payment-note", children: [
+        provider,
+        " approved your verification. Request a new quote to continue \u2014 the previous one was consumed."
+      ] }),
       canComplete && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-btn-primary", disabled: completing, onClick: onCompleteWithdraw, children: completing ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-spinner pollar-spinner-sm" }),
         "Submitting\u2026"
@@ -3161,11 +3197,53 @@ var TERMINAL = ["completed", "failed"];
 function requiredFieldsOf(quote) {
   return quote.requiredFields ?? [];
 }
+function flowStepsOf(quotes, selected) {
+  const needsDetails = selected != null ? requiredFieldsOf(selected).length > 0 : quotes.some((q) => requiredFieldsOf(q).length > 0);
+  return needsDetails ? ["Amount", "Provider", "Details", "Complete"] : ["Amount", "Provider", "Complete"];
+}
+var STEP_LABEL = {
+  input: "Amount",
+  loading_quote: "Amount",
+  select_route: "Provider",
+  contact: "Details",
+  status: "Complete"
+};
+function brokenLimitOf(amount, quote) {
+  const { minAmount, maxAmount } = quote;
+  if (!Number.isFinite(amount)) return null;
+  if (minAmount != null && amount < minAmount) return { limit: "min", value: minAmount };
+  if (maxAmount != null && amount > maxAmount) return { limit: "max", value: maxAmount };
+  return null;
+}
+function limitMessage(limit, value, currency) {
+  return `The ${limit === "min" ? "minimum" : "maximum"} amount for this route is ${value} ${currency}.`;
+}
+var RAMP_ERROR_MESSAGES = {
+  SDK_RAMPS_QUOTE_EXPIRED: "This quote expired. Request a new one and try again.",
+  SDK_RAMPS_ASSET_NOT_ENABLED: "This currency is not available for that route right now.",
+  SDK_RAMPS_KYC_REQUIRED: "The provider needs to verify your identity before continuing.",
+  SDK_RAMPS_WALLET_UNSUPPORTED: "This wallet type cannot be used for this ramp.",
+  SDK_RAMPS_PROVIDER_NOT_CONFIGURED: "This ramp provider is not configured for this app yet.",
+  SDK_RAMPS_ANCHOR_ERROR: "The provider rejected the request. Please try again in a moment.",
+  SDK_RAMPS_BRIDGE_ERROR: "The provider rejected the request. Please try again in a moment."
+};
+function rampErrorMessage(e, fallback) {
+  const body = e?.body;
+  const code = e?.code;
+  if (typeof code !== "string") return e instanceof Error ? e.message : fallback;
+  const limit = body?.limit;
+  const value = body?.limitAmount;
+  const currency = body?.limitCurrency;
+  if ((limit === "min" || limit === "max") && typeof value === "number" && typeof currency === "string") {
+    return limitMessage(limit, value, currency);
+  }
+  return RAMP_ERROR_MESSAGES[code] ?? (e instanceof Error ? e.message : fallback);
+}
 function RampWidget({ onClose }) {
   const { getClient, signTx, wallet, styles, network } = usePollar();
   const walletAddress = wallet?.address ?? "";
   const client = getClient();
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const [step, setStep] = react.useState("input");
   const [direction, setDirection] = react.useState("onramp");
   const [amount, setAmount] = react.useState("");
@@ -3183,6 +3261,8 @@ function RampWidget({ onClose }) {
   const [provider, setProvider] = react.useState("");
   const [kycUrl, setKycUrl] = react.useState(null);
   const [tosUrl, setTosUrl] = react.useState(null);
+  const [kycPending, setKycPending] = react.useState(false);
+  const [kycApproved, setKycApproved] = react.useState(false);
   const [txStatus, setTxStatus] = react.useState(null);
   const [stellarTxHash, setStellarTxHash] = react.useState(null);
   const [depositInstructions, setDepositInstructions] = react.useState(null);
@@ -3211,6 +3291,23 @@ function RampWidget({ onClose }) {
       clearInterval(id);
     };
   }, [step, txId, txStatus, client]);
+  react.useEffect(() => {
+    if (step !== "status" || !kycPending || kycApproved) return;
+    let active = true;
+    const check = async () => {
+      try {
+        const { hasApproved } = await client.getRampKycStatus();
+        if (active && hasApproved) setKycApproved(true);
+      } catch {
+      }
+    };
+    void check();
+    const id = setInterval(check, 1e4);
+    return () => {
+      active = false;
+      clearInterval(id);
+    };
+  }, [step, kycPending, kycApproved, client]);
   async function loadCountries(resetSelection) {
     setCountriesLoading(true);
     try {
@@ -3256,7 +3353,7 @@ function RampWidget({ onClose }) {
       setRefreshing(false);
     }
   }
-  function resetToInput() {
+  function resetToInput({ keepMessage = false } = {}) {
     setStep("input");
     setQuotes([]);
     setSelectedQuote(null);
@@ -3268,7 +3365,7 @@ function RampWidget({ onClose }) {
     setTxStatus(null);
     setStellarTxHash(null);
     setDepositInstructions(null);
-    setErrorMsg(null);
+    if (!keepMessage) setErrorMsg(null);
   }
   async function resumeWithSignature(id, ps) {
     const outcome = await signTx(ps.unsignedXdr);
@@ -3292,6 +3389,8 @@ function RampWidget({ onClose }) {
     }
     setKycUrl(result.kycUrl ?? null);
     setTosUrl(result.tosUrl ?? null);
+    setKycPending(result.kycRequired === true);
+    if (result.kycRequired) setKycApproved(false);
     setTxStatus(result.status);
     setStellarTxHash(result.stellarTxHash ?? null);
     setDepositInstructions(result.depositInstructions ?? null);
@@ -3312,7 +3411,7 @@ function RampWidget({ onClose }) {
       setQuotes(list);
       setStep("select_route");
     } catch (e) {
-      setErrorMsg(e instanceof Error ? e.message : "Failed to fetch quotes.");
+      setErrorMsg(rampErrorMessage(e, "Failed to fetch quotes."));
       setStep("error");
     } finally {
       setIsLoading(false);
@@ -3321,8 +3420,13 @@ function RampWidget({ onClose }) {
   function handleSelectQuote(quote) {
     setSelectedQuote(quote);
     setErrorMsg(null);
+    const broken = brokenLimitOf(Number(amount), quote);
+    if (broken) {
+      setErrorMsg(limitMessage(broken.limit, broken.value, currency));
+      return;
+    }
     const fields = requiredFieldsOf(quote);
-    const missing = fields.some((f) => !(fieldValues[f.key] ?? "").trim());
+    const missing = fields.some((f) => !f.optional && !(fieldValues[f.key] ?? "").trim());
     if (fields.length > 0 && missing) {
       setStep("contact");
       return;
@@ -3351,7 +3455,7 @@ function RampWidget({ onClose }) {
       const result = direction === "onramp" ? await client.createOnRamp(base) : await client.createOffRamp(base);
       await applyResult(result);
     } catch (e) {
-      setErrorMsg(e instanceof Error ? e.message : "Failed to start the ramp.");
+      setErrorMsg(rampErrorMessage(e, "Failed to start the ramp."));
       setStep("error");
     } finally {
       setIsLoading(false);
@@ -3384,13 +3488,20 @@ function RampWidget({ onClose }) {
       setCompleting(false);
     }
   }
-  const canComplete = direction === "offramp" && step === "status" && txStatus !== "completed" && !stellarTxHash;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+  const kycBlocking = kycPending && !kycApproved;
+  const canComplete = direction === "offramp" && step === "status" && txStatus !== "completed" && !stellarTxHash && !kycBlocking;
+  const flowSteps = flowStepsOf(quotes, selectedQuote);
+  const flowStepIndex = flowSteps.indexOf(STEP_LABEL[step] ?? "");
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
     RampWidgetTemplate,
     {
       theme,
       accentColor,
+      styleOverrides,
       step,
+      flowSteps,
+      flowStepIndex,
+      startingQuoteId: isLoading && selectedQuote ? selectedQuote.quoteId : null,
       direction,
       amount,
       currency,
@@ -3406,6 +3517,8 @@ function RampWidget({ onClose }) {
       txStatus,
       kycUrl,
       tosUrl,
+      kycBlocking,
+      kycJustApproved: kycPending && kycApproved,
       stellarTxHash,
       explorerUrl: stellarTxHash ? `https://stellar.expert/explorer/${network === "mainnet" ? "public" : "testnet"}/tx/${stellarTxHash}` : null,
       depositInstructions,
@@ -3413,7 +3526,10 @@ function RampWidget({ onClose }) {
       completing,
       errorMsg,
       onDirectionChange: setDirection,
-      onAmountChange: setAmount,
+      onAmountChange: (next) => {
+        setAmount(next);
+        setErrorMsg(null);
+      },
       onFieldChange: setFieldValue,
       onCountryChange: handleCountryChange,
       onFindRoute: handleFindRoute,
@@ -3422,7 +3538,8 @@ function RampWidget({ onClose }) {
       onOpenKyc: handleOpenKyc,
       onOpenTos: handleOpenTos,
       onCompleteWithdraw: handleCompleteWithdraw,
-      onRetry: resetToInput,
+      onBack: () => resetToInput({ keepMessage: true }),
+      onRetry: () => resetToInput(),
       onRefresh: handleRefresh,
       onClose
     }
@@ -3479,6 +3596,7 @@ var CHAIN_NAME = {
 function ReceiveModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   walletAddress,
   chains,
   selectedChain,
@@ -3488,23 +3606,7 @@ function ReceiveModalTemplate({
   onClose
 }) {
   const isDark = theme === "dark";
-  const cssVars = {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px"
-  };
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides);
   const chainName = selectedChain ? CHAIN_NAME[selectedChain] ?? selectedChain : "wallet";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -3569,7 +3671,7 @@ function ReceiveModalTemplate({
 }
 function ReceiveModal({ onClose }) {
   const { wallets, styles } = usePollar();
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const [copied, setCopied] = react.useState(false);
   const copyTimerRef = react.useRef(null);
   const { chains } = useChains();
@@ -3595,11 +3697,12 @@ function ReceiveModal({ onClose }) {
       }, 2e3);
     });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
     ReceiveModalTemplate,
     {
       theme,
       accentColor,
+      styleOverrides,
       walletAddress,
       chains,
       selectedChain,
@@ -3862,6 +3965,7 @@ function assetKey3(record) {
 function SendModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   step,
   txTitle,
   assets,
@@ -3895,24 +3999,7 @@ function SendModalTemplate({
   onRetry,
   onDone
 }) {
-  const isDark = theme === "dark";
-  const cssVars = {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px"
-  };
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides);
   const selectedKey = selectedAsset ? assetKey3(selectedAsset) : "";
   const canSubmit = canSendOnChain && !!selectedAsset && !!amount && !!destination.trim() && !isLoadingBalance;
   const title = step === "form" ? "Send" : txTitle;
@@ -3982,7 +4069,7 @@ function SendModalTemplate({
               options: assets.map((a) => ({
                 key: assetKey3(a),
                 code: a.code,
-                // Unreadable (null) drops the "— X available" suffix instead of
+                // Unreadable (null) drops the "- X available" suffix instead of
                 // claiming a zero balance.
                 available: a.available ?? void 0,
                 enabledInApp: a.enabledInApp
@@ -4072,7 +4159,7 @@ function SendModal({ onClose }) {
     styles
   } = usePollar();
   const walletType = wallet?.custody === "external" ? wallet.provider : null;
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const [step, setStep] = react.useState("form");
   const [amount, setAmount] = react.useState("");
   const [destination, setDestination] = react.useState("");
@@ -4205,11 +4292,12 @@ function SendModal({ onClose }) {
     setShowXdr(false);
     setCopied(false);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: !isInProgress ? onClose : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: !isInProgress ? onClose : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
     SendModalTemplate,
     {
       theme,
       accentColor,
+      styleOverrides,
       step,
       txTitle,
       assets: sortedAssets,
@@ -4261,6 +4349,7 @@ function formatAmount3(value) {
 function SwapModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   step,
   txTitle,
   sellOptions,
@@ -4300,7 +4389,6 @@ function SwapModalTemplate({
   onRetry,
   onDone
 }) {
-  const isDark = theme === "dark";
   const [customOpen, setCustomOpen] = react.useState(false);
   const [customCode, setCustomCode] = react.useState("");
   const [customIssuer, setCustomIssuer] = react.useState("");
@@ -4316,23 +4404,7 @@ function SwapModalTemplate({
     setCustomError("");
     setCustomOpen(false);
   };
-  const cssVars = {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px"
-  };
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides);
   const sellKey = selectedSell ? assetOptionKey(selectedSell) : "";
   const buyKey = selectedBuy ? assetOptionKey(selectedBuy) : "";
   const canSwap = !smartUnsupported && !!selectedSell && !!selectedBuy && !!amount && !!quote && !quoteLoading && !isLoadingData;
@@ -4594,7 +4666,7 @@ function SwapModal({ onClose }) {
   } = usePollar();
   const walletType = wallet?.custody === "external" ? wallet.provider : null;
   const smartUnsupported = wallet?.custody === "smart";
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const [step, setStep] = react.useState("form");
   const [selectedSell, setSelectedSell] = react.useState(null);
   const [selectedBuy, setSelectedBuy] = react.useState(null);
@@ -4799,11 +4871,12 @@ function SwapModal({ onClose }) {
     setShowXdr(false);
     setCopied(false);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: !isInProgress ? onClose : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: !isInProgress ? onClose : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
     SwapModalTemplate,
     {
       theme,
       accentColor,
+      styleOverrides,
       step,
       txTitle,
       sellOptions,
@@ -4881,8 +4954,7 @@ function EarnModal({ onClose }) {
   } = usePollar();
   const walletType = wallet?.custody === "external" ? wallet.provider : null;
   const smartUnsupported = wallet?.custody === "smart";
-  const { theme = "light", accentColor = "#005DB4" } = styles;
-  const isDark = theme === "dark";
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const [step, setStep] = react.useState("form");
   const [tab, setTab] = react.useState("deposit");
   const [providers, setProviders] = react.useState(null);
@@ -4978,23 +5050,7 @@ function EarnModal({ onClose }) {
   const parsedAmount = parseFloat(amount);
   const exceedsAvailable = tab === "deposit" ? walletAvailable != null && parsedAmount > parseFloat(walletAvailable) : position != null && parsedAmount > parseFloat(position.withdrawable);
   const canSubmit = !smartUnsupported && !!provider && !!opportunityId && !!amount && parsedAmount > 0 && !exceedsAvailable && !providersLoading && !loadingOpps;
-  const cssVars = {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px"
-  };
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides);
   async function handleSubmit() {
     setFormError("");
     if (smartUnsupported) {
@@ -5073,7 +5129,7 @@ function EarnModal({ onClose }) {
     }
   }
   const title = step === "form" ? "Earn" : txTitle;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: !isInProgress ? onClose : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: !isInProgress ? onClose : void 0, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: "pollar-modal-card pollar-send-modal",
@@ -5321,6 +5377,7 @@ function shortIp(hash) {
 function SessionsModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   state,
   revokingFamilyId,
   signingOutEverywhere,
@@ -5329,24 +5386,7 @@ function SessionsModalTemplate({
   onLogoutEverywhere,
   onClose
 }) {
-  const isDark = theme === "dark";
-  const cssVars = {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px"
-  };
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides);
   const isLoading = state.step === "loading";
   const sessions = state.step === "loaded" ? state.sessions : [];
   const otherCount = sessions.filter((s) => !s.current).length;
@@ -5458,7 +5498,7 @@ function SessionsModalTemplate({
 }
 function SessionsModal({ onClose }) {
   const { getClient, styles, sessions } = usePollar();
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const [revokingFamilyId, setRevokingFamilyId] = react.useState(null);
   const [signingOutEverywhere, setSigningOutEverywhere] = react.useState(false);
   const load = react.useCallback(() => {
@@ -5496,11 +5536,12 @@ function SessionsModal({ onClose }) {
       setSigningOutEverywhere(false);
     }
   }, [getClient, onClose]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
     SessionsModalTemplate,
     {
       theme,
       accentColor,
+      styleOverrides,
       state: sessions,
       revokingFamilyId,
       signingOutEverywhere,
@@ -5514,6 +5555,7 @@ function SessionsModal({ onClose }) {
 function TransactionModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   transaction,
   showXdr,
   copied,
@@ -5525,24 +5567,7 @@ function TransactionModalTemplate({
   onCopyHash,
   onRetry
 }) {
-  const isDark = theme === "dark";
-  const cssVars = {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px"
-  };
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-modal-card pollar-tx-modal", "data-theme": theme, style: cssVars, onClick: (e) => e.stopPropagation(), children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-header", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "pollar-modal-title", children: "Transaction" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "pollar-close-btn", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -5581,7 +5606,7 @@ function TransactionModalTemplate({
 function TransactionModal({ onClose }) {
   const { getClient, styles, tx: transaction, network, wallet } = usePollar();
   const walletType = wallet?.custody === "external" ? wallet.provider : null;
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const [showXdr, setShowXdr] = react.useState(false);
   const [copied, setCopied] = react.useState(false);
   const copyTimerRef = react.useRef(null);
@@ -5616,11 +5641,12 @@ function TransactionModal({ onClose }) {
       await getClient().signAndSubmitTx(transaction.buildData.unsignedXdr);
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
     TransactionModalTemplate,
     {
       theme,
       accentColor,
+      styleOverrides,
       transaction,
       showXdr,
       copied,
@@ -5677,6 +5703,7 @@ function renderSummary(summary) {
 function TxHistoryModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   txHistory,
   offset,
   chains,
@@ -5688,24 +5715,7 @@ function TxHistoryModalTemplate({
   onNext,
   onClose
 }) {
-  const isDark = theme === "dark";
-  const cssVars = {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px"
-  };
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides);
   const isLoading = txHistory.step === "loading";
   const records = txHistory.step === "loaded" ? txHistory.data.records : [];
   const total = txHistory.step === "loaded" ? txHistory.data.total : 0;
@@ -5877,7 +5887,7 @@ function TxHistoryModalTemplate({
 var PAGE_SIZE2 = 10;
 function TxHistoryModal({ onClose }) {
   const { getClient, styles, txHistory, wallets } = usePollar();
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const [offset, setOffset] = react.useState(0);
   const { chains } = useChains();
   const [selectedChain, setSelectedChain] = react.useState(null);
@@ -5899,11 +5909,12 @@ function TxHistoryModal({ onClose }) {
   const paged = (nextOffset) => {
     if (selectedChain) load(nextOffset, selectedChain);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
     TxHistoryModalTemplate,
     {
       theme,
       accentColor,
+      styleOverrides,
       txHistory,
       offset,
       chains,
@@ -5956,6 +5967,7 @@ function BalanceItem({ record, faucet }) {
 function WalletBalanceModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   walletBalance,
   walletAddress,
   chains,
@@ -5965,24 +5977,7 @@ function WalletBalanceModalTemplate({
   onRefresh,
   onClose
 }) {
-  const isDark = theme === "dark";
-  const cssVars = {
-    "--pollar-accent": accentColor,
-    "--pollar-bg": isDark ? "#1a1a1a" : "#ffffff",
-    "--pollar-border": isDark ? "#374151" : "#e5e7eb",
-    "--pollar-text": isDark ? "#ffffff" : "#111827",
-    "--pollar-muted": isDark ? "#9ca3af" : "#6b7280",
-    "--pollar-input-bg": isDark ? "#374151" : "#f9fafb",
-    "--pollar-error-bg": isDark ? "#2a1515" : "#fef2f2",
-    "--pollar-error-border": isDark ? "#7f1d1d" : "#fecaca",
-    "--pollar-error-text": isDark ? "#f87171" : "#dc2626",
-    "--pollar-success-text": isDark ? "#4ade80" : "#16a34a",
-    "--pollar-buttons-border-radius": "6px",
-    "--pollar-buttons-height": "44px",
-    "--pollar-input-height": "44px",
-    "--pollar-input-border-radius": "0.5rem",
-    "--pollar-card-border-radius": "10px"
-  };
+  const cssVars = buildModalCssVars(theme, accentColor, styleOverrides);
   const isLoading = walletBalance.step === "loading";
   const data = useStickyData(walletBalance.step === "loaded" ? walletBalance.data : null);
   const balances = (data?.balances ?? []).filter((b) => resolveChain(b.chain) === selectedChain);
@@ -6056,7 +6051,7 @@ function WalletBalanceModalTemplate({
 }
 function WalletBalanceModal({ onClose }) {
   const { walletBalance, refreshWalletBalance, wallets, network, styles } = usePollar();
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const { chains } = useChains();
   const [selectedChain, setSelectedChain] = react.useState(null);
   react.useEffect(() => {
@@ -6066,11 +6061,12 @@ function WalletBalanceModal({ onClose }) {
   react.useEffect(() => {
     void refreshWalletBalance();
   }, [refreshWalletBalance]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
     WalletBalanceModalTemplate,
     {
       theme,
       accentColor,
+      styleOverrides,
       walletBalance,
       walletAddress,
       chains,
@@ -6110,7 +6106,7 @@ var browserPasskeyCeremony = async ({ challenge, mode }) => {
       challenge,
       rp: { id: rpId, name: rpId },
       user: { id: userId, name: "Smart Wallet", displayName: "Smart Wallet" },
-      // ES256 (secp256r1) — the curve the on-chain WebAuthn verifier expects.
+      // ES256 (secp256r1) - the curve the on-chain WebAuthn verifier expects.
       pubKeyCredParams: [{ type: "public-key", alg: -7 }],
       authenticatorSelection: { residentKey: "required", userVerification: "required" },
       attestation: "none",
@@ -6145,6 +6141,7 @@ function sessionsEqual(a, b) {
   return a.clientSessionId === b.clientSessionId && a.userId === b.userId && a.status === b.status && a.token?.accessToken === b.token?.accessToken && a.token?.refreshToken === b.token?.refreshToken && a.token?.expiresAt === b.token?.expiresAt && a.wallet?.address === b.wallet?.address;
 }
 var PollarContext = react.createContext(null);
+var clientByConfig = /* @__PURE__ */ new WeakMap();
 function PollarProvider({
   client,
   appConfig: appConfigProp,
@@ -6152,13 +6149,30 @@ function PollarProvider({
   onStorageDegrade,
   children
 }) {
-  const [pollarClient] = react.useState(
-    () => client instanceof core.PollarClient ? client : new core.PollarClient({ passkey: browserPasskeyCeremony, passkeySign: browserPasskeySigner, ...client })
-  );
-  const ownsClientRef = react.useRef(!(client instanceof core.PollarClient));
+  const [pollarClient] = react.useState(() => {
+    if (core.isPollarClient(client)) {
+      client.setPasskeyDefaults({ passkey: browserPasskeyCeremony, passkeySign: browserPasskeySigner });
+      return client;
+    }
+    const alreadyBuilt = clientByConfig.get(client);
+    if (alreadyBuilt) return alreadyBuilt;
+    const built = new core.PollarClient({
+      ...client,
+      passkey: client.passkey ?? browserPasskeyCeremony,
+      passkeySign: client.passkeySign ?? browserPasskeySigner
+    });
+    clientByConfig.set(client, built);
+    return built;
+  });
+  const ownsClientRef = react.useRef(!core.isPollarClient(client));
   const destroyTimerRef = react.useRef(null);
+  const builtFromConfigRef = react.useRef(core.isPollarClient(client) ? null : client);
   react.useEffect(() => {
     if (!ownsClientRef.current) return;
+    if (builtFromConfigRef.current) {
+      clientByConfig.delete(builtFromConfigRef.current);
+      builtFromConfigRef.current = null;
+    }
     if (destroyTimerRef.current) {
       clearTimeout(destroyTimerRef.current);
       destroyTimerRef.current = null;
@@ -6802,7 +6816,6 @@ function WalletButton() {
   } = usePollar();
   const { primaryAddress } = useChains();
   const walletAddress = primaryAddress || (wallet?.address ?? "");
-  const walletType = wallet?.custody === "external" ? wallet.provider : null;
   const [open, setOpen] = react.useState(false);
   const [copied, setCopied] = react.useState(false);
   const [creating, setCreating] = react.useState(false);
@@ -6903,7 +6916,6 @@ function WalletButton() {
       itemColor,
       wrapperRef,
       isInProgress,
-      walletType,
       showCreateAccount: canCreateAccount,
       creatingAccount: creating,
       onToggleOpen: () => setOpen((v) => !v),
@@ -6953,8 +6965,13 @@ exports.WalletBalanceModalTemplate = WalletBalanceModalTemplate;
 exports.WalletButton = WalletButton;
 exports.WalletButtonTemplate = WalletButtonTemplate;
 exports.addressForChain = addressForChain;
+exports.browserPasskeyCeremony = browserPasskeyCeremony;
+exports.browserPasskeySigner = browserPasskeySigner;
+exports.buildModalCssVars = buildModalCssVars;
 exports.chainsOf = chainsOf;
 exports.createPollarAdapterHook = createPollarAdapterHook;
+exports.modalChrome = modalChrome;
+exports.readableTextOn = readableTextOn;
 exports.resolveChain = resolveChain;
 exports.useChains = useChains;
 exports.usePollar = usePollar;