@pollar/react 0.11.1 → 0.11.3-rc.1

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.1"
+        "0.11.3-rc.1"
       ] })
     ] })
   ] });
@@ -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",
@@ -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;
@@ -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("");
@@ -4151,6 +4238,11 @@ function SendModal({ onClose }) {
       setFormError("Enter a destination address");
       return;
     }
+    const isNativeAsset = selectedAsset.type === "native";
+    if (isBaseUnitChain && !isNativeAsset && (!selectedAsset.issuer || selectedAsset.decimals === void 0)) {
+      setFormError("This token is missing its mint or decimals and cannot be sent.");
+      return;
+    }
     let sendAmount = amount;
     if (isBaseUnitChain) {
       try {
@@ -4166,8 +4258,9 @@ function SendModal({ onClose }) {
         chain: "SOLANA",
         destination: destination.trim(),
         amount: sendAmount,
-        // Native SOL carries no mint; an SPL token's mint rides in `issuer`.
-        ...selectedAsset.type === "native" ? {} : { mint: selectedAsset.issuer ?? null }
+        // Native SOL carries no mint; an SPL token's mint rides in `issuer`,
+        // which the guard above proved is present.
+        ...isNativeAsset ? {} : { mint: selectedAsset.issuer }
       });
       return;
     }
@@ -4199,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,
@@ -4255,6 +4349,7 @@ function formatAmount3(value) {
 function SwapModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   step,
   txTitle,
   sellOptions,
@@ -4294,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("");
@@ -4310,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;
@@ -4588,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);
@@ -4639,7 +4717,7 @@ function SwapModal({ onClose }) {
   const assetRecords = enabledAssets.step === "loaded" ? enabledAssets.data.assets : [];
   const isLoadingData = walletBalance.step === "loading" || enabledAssets.step === "loading";
   const sellOptions = balances.filter(
-    (b) => b.type != null && (b.type === "native" || !b.trustlineRemoved)
+    (b) => (b.chain === void 0 || b.chain === "STELLAR") && (b.type === "native" || (b.type === "credit_alphanum4" || b.type === "credit_alphanum12") && !b.trustlineRemoved)
   ).map((b) => ({
     ref: toRef(b),
     code: b.code,
@@ -4793,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,
@@ -4875,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);
@@ -4952,9 +5030,7 @@ function EarnModal({ onClose }) {
     if (!selectedOpportunity) return null;
     const balances = walletBalance.step === "loaded" ? walletBalance.data.balances : [];
     const issuer = selectedOpportunity.asset.issuer;
-    const rec = balances.find(
-      (b) => issuer === null ? b.type === "native" : b.code === assetCode && b.issuer === issuer
-    );
+    const rec = balances.find((b) => issuer === null ? b.type === "native" : b.code === assetCode && b.issuer === issuer);
     return rec ? rec.available : null;
   })();
   const depositAssetRecord = (() => {
@@ -4974,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) {
@@ -5069,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",
@@ -5317,6 +5377,7 @@ function shortIp(hash) {
 function SessionsModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   state,
   revokingFamilyId,
   signingOutEverywhere,
@@ -5325,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;
@@ -5454,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(() => {
@@ -5492,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,
@@ -5510,6 +5555,7 @@ function SessionsModal({ onClose }) {
 function TransactionModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   transaction,
   showXdr,
   copied,
@@ -5521,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(
@@ -5577,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);
@@ -5612,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,
@@ -5631,6 +5661,12 @@ function TransactionModal({ onClose }) {
   ) });
 }
 var PAGE_SIZE = 10;
+function explorerUrlFor(chain, hash, network) {
+  if (chain === "SOLANA") {
+    return `https://explorer.solana.com/tx/${hash}${network === "testnet" ? "?cluster=devnet" : ""}`;
+  }
+  return `https://stellar.expert/explorer/${network === "testnet" ? "testnet" : "public"}/tx/${hash}`;
+}
 function StatusBadge({ status }) {
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-hist-item-badge", "data-status": status, children: status });
 }
@@ -5667,31 +5703,19 @@ function renderSummary(summary) {
 function TxHistoryModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   txHistory,
   offset,
+  chains,
+  selectedChain,
+  walletAddress,
+  onSelectChain,
   onRefresh,
   onPrev,
   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;
@@ -5744,6 +5768,11 @@ function TxHistoryModalTemplate({
             /* @__PURE__ */ jsxRuntime.jsx("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" }) }) })
           ] })
         ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ChainSelect, { value: selectedChain, options: chains, onChange: onSelectChain, disabled: isLoading }),
+        walletAddress && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-address-row", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pollar-address", children: cropAddress(walletAddress) }),
+          /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { value: walletAddress, label: "Copy wallet address" })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-hist-list", children: [
           txHistory.step === "idle" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "Click Refresh to load transactions." }),
           isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-loading-block", children: [
@@ -5754,7 +5783,7 @@ function TxHistoryModalTemplate({
           txHistory.step === "loaded" && records.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-modal-empty", children: "No transactions yet." }),
           records.map((record) => {
             const hash = typeof record.hash === "string" && record.hash.length > 0 ? record.hash : void 0;
-            const explorerUrl = hash ? `https://stellar.expert/explorer/${record.network === "testnet" ? "testnet" : "public"}/tx/${hash}` : void 0;
+            const explorerUrl = hash ? explorerUrlFor(record.chain, hash, record.network) : void 0;
             const asset = typeof record.details?.asset === "string" ? record.details.asset : void 0;
             const colon = asset ? asset.indexOf(":") : -1;
             const trustline = record.operation === "change_trust" && asset && colon > 0 ? {
@@ -5788,10 +5817,11 @@ function TxHistoryModalTemplate({
                   "\xB7 ",
                   record.details.sponsored ? "Sponsored" : "Self-paid"
                 ] }),
-                record.feeXlm && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                record.fee && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
                   "\xB7 ",
-                  record.feeXlm,
-                  " XLM"
+                  record.fee.amount,
+                  " ",
+                  record.fee.unit
                 ] })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pollar-hist-item-footer", children: [
@@ -5807,7 +5837,7 @@ function TxHistoryModalTemplate({
                       href: explorerUrl,
                       target: "_blank",
                       rel: "noopener noreferrer",
-                      "aria-label": "View on Stellar Explorer",
+                      "aria-label": "View on block explorer",
                       children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "12", height: "12", viewBox: "0 0 13 13", fill: "none", "aria-hidden": true, children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           "path",
@@ -5856,29 +5886,44 @@ function TxHistoryModalTemplate({
 }
 var PAGE_SIZE2 = 10;
 function TxHistoryModal({ onClose }) {
-  const { getClient, styles, txHistory } = usePollar();
-  const { theme = "light", accentColor = "#005DB4" } = styles;
+  const { getClient, styles, txHistory, wallets } = usePollar();
+  const { theme, accentColor, styleOverrides, overlayStyle } = modalChrome(styles);
   const [offset, setOffset] = react.useState(0);
+  const { chains } = useChains();
+  const [selectedChain, setSelectedChain] = react.useState(null);
+  react.useEffect(() => {
+    if (selectedChain === null && chains.length > 0) setSelectedChain(chains[0]);
+  }, [chains, selectedChain]);
+  const walletAddress = addressForChain(wallets, selectedChain);
   const load = react.useCallback(
-    (nextOffset) => {
+    (nextOffset, chain) => {
       setOffset(nextOffset);
-      void getClient().fetchTxHistory({ limit: PAGE_SIZE2, offset: nextOffset });
+      void getClient().fetchTxHistory({ limit: PAGE_SIZE2, offset: nextOffset, chain });
     },
     [getClient]
   );
   react.useEffect(() => {
-    load(0);
-  }, [load]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
+    if (selectedChain) load(0, selectedChain);
+  }, [selectedChain, load]);
+  const onSelectChain = (chain) => setSelectedChain(chain);
+  const paged = (nextOffset) => {
+    if (selectedChain) load(nextOffset, selectedChain);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pollar-overlay", style: overlayStyle, onClick: onClose, children: /* @__PURE__ */ jsxRuntime.jsx(
     TxHistoryModalTemplate,
     {
       theme,
       accentColor,
+      styleOverrides,
       txHistory,
       offset,
-      onRefresh: () => load(offset),
-      onPrev: () => load(Math.max(0, offset - PAGE_SIZE2)),
-      onNext: () => load(offset + PAGE_SIZE2),
+      chains,
+      selectedChain,
+      walletAddress,
+      onSelectChain,
+      onRefresh: () => paged(offset),
+      onPrev: () => paged(Math.max(0, offset - PAGE_SIZE2)),
+      onNext: () => paged(offset + PAGE_SIZE2),
       onClose
     }
   ) });
@@ -5922,6 +5967,7 @@ function BalanceItem({ record, faucet }) {
 function WalletBalanceModalTemplate({
   theme,
   accentColor,
+  styleOverrides,
   walletBalance,
   walletAddress,
   chains,
@@ -5931,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);
@@ -6022,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(() => {
@@ -6032,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,
@@ -6118,9 +6148,17 @@ function PollarProvider({
   onStorageDegrade,
   children
 }) {
-  const [pollarClient] = react.useState(
-    () => client instanceof core.PollarClient ? client : new core.PollarClient({ passkey: browserPasskeyCeremony, passkeySign: browserPasskeySigner, ...client })
-  );
+  const [pollarClient] = react.useState(() => {
+    if (client instanceof core.PollarClient) {
+      client.setPasskeyDefaults({ passkey: browserPasskeyCeremony, passkeySign: browserPasskeySigner });
+      return client;
+    }
+    return new core.PollarClient({
+      ...client,
+      passkey: client.passkey ?? browserPasskeyCeremony,
+      passkeySign: client.passkeySign ?? browserPasskeySigner
+    });
+  });
   const ownsClientRef = react.useRef(!(client instanceof core.PollarClient));
   const destroyTimerRef = react.useRef(null);
   react.useEffect(() => {
@@ -6147,6 +6185,9 @@ function PollarProvider({
   );
   const [configRetry, setConfigRetry] = react.useState(0);
   const retryConfig = react.useCallback(() => setConfigRetry((n) => n + 1), []);
+  const appConfigKey = appConfigProp === void 0 ? "" : JSON.stringify(appConfigProp);
+  const appConfigPropRef = react.useRef(appConfigProp);
+  appConfigPropRef.current = appConfigProp;
   react.useEffect(() => {
     return pollarClient.onTransactionStateChange(setTransaction);
   }, [pollarClient]);
@@ -6210,7 +6251,9 @@ function PollarProvider({
     setModalErrorLogger(pollarClient.getLogger());
   }, [pollarClient]);
   react.useEffect(() => {
-    if (appConfigProp !== void 0) {
+    const localConfig = appConfigPropRef.current;
+    if (localConfig !== void 0) {
+      setResolvedConfig(localConfig ?? DEFAULT_APP_CONFIG);
       setConfigStatus("ready");
       return;
     }
@@ -6232,7 +6275,7 @@ function PollarProvider({
     return () => {
       cancelled = true;
     };
-  }, [pollarClient, appConfigProp, configRetry]);
+  }, [pollarClient, appConfigKey, configRetry]);
   const [loginModalOpen, setLoginModalOpen] = react.useState(false);
   const [transactionModalOpen, setTransactionModalOpen] = react.useState(false);
   const [kycModalOpen, setKycModalOpen] = react.useState(false);
@@ -6914,8 +6957,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;