@coinlist-co/react 0.5.1 → 0.9.0

package/dist/client/index.js

@@ -1,6 +1,5 @@
 import {
   API_VERSION,
-  Attributes,
   AuthenticatedApiClient,
   COINLIST_BASE_URL,
   HEADER_USER_AGENT,
@@ -13,6 +12,7 @@ import {
   VERIFY_IDENTITY_SOURCE_OF_FUNDS_PATH,
   VERIFY_IDENTITY_VERIFIED_PATH,
   WALLET_PATH,
+  createKycToken,
   createParticipation,
   fetchOfferDetails,
   fetchOfferRequirements,
@@ -21,22 +21,38 @@ import {
   fetchParticipation,
   fetchParticipations,
   fetchParticipationsPage,
-  fetchRequirementStatuses
-} from "../chunk-N3WBC2VS.js";
+  fetchPii,
+  fetchRequirementStatuses,
+  submitDocument
+} from "../chunk-MKCOK3DF.js";
 import {
   AuthorizationCode,
-  CodeVerifier
-} from "../chunk-CRACFEJ4.js";
+  CodeVerifier,
+  ERC20_ABI,
+  SUPERSTATE_SWAP_ABI,
+  SWAP_POLL_INTERVAL_MS,
+  SwapQuote,
+  TOKEN_REGISTRY,
+  computePrice,
+  computeSlip,
+  decodeSwappedOutputAmount,
+  generatePKCEParams,
+  isStopped,
+  shortenAddress
+} from "../chunk-I5YTJ5SL.js";
 import {
+  Attributes,
+  BlockchainAmount,
+  KycToken,
   NotAuthenticatedError,
-  arrayBufferToBase64Url,
-  generateSecureRandomBase64Url,
+  OfferOptionAddressId,
+  SwapNamespaceImpl,
+  connectExternalWallet,
+  createWalletOwnershipChallenge,
   getUUIDv4,
-  sha256
-} from "../chunk-V6WO67RO.js";
-
-// src/client/index.ts
-import "./styles.css";
+  listOptionAddresses,
+  removeOptionAddress
+} from "../chunk-Z2HAA2TI.js";
 
 // src/client/CoinListProvider.tsx
 import {
@@ -93,6 +109,286 @@ var ApiClient = class {
   }
 };
 
+// src/client/core/blockchain/wallet-error.ts
+import {
+  ContractFunctionRevertedError,
+  InsufficientFundsError,
+  UserRejectedRequestError,
+  WaitForTransactionReceiptTimeoutError
+} from "viem";
+function classifyWalletError(error, ctx) {
+  if (error instanceof UserRejectedRequestError) {
+    return { type: "user_rejected" };
+  }
+  if (error instanceof InsufficientFundsError) {
+    return { type: "insufficient_funds" };
+  }
+  if (error instanceof ContractFunctionRevertedError) {
+    return { type: "contract_reverted", reason: error.reason ?? error.message };
+  }
+  if (error instanceof WaitForTransactionReceiptTimeoutError && ctx?.hash) {
+    return { type: "timeout", hash: ctx.hash };
+  }
+  return { type: "unknown", cause: error };
+}
+
+// src/client/core/blockchain/swap-flows.ts
+async function executeSwap(params) {
+  const {
+    swap,
+    wallet,
+    contractAddress,
+    chain,
+    inputTokenAddress,
+    quote,
+    slippageBps,
+    onProgress
+  } = params;
+  const emit = (phase) => onProgress?.(phase);
+  const inputAmount = BlockchainAmount.add(
+    quote.inputTokenAmount,
+    quote.fee
+  ).raw;
+  const minOut = computeSlip(quote.outputTokenAmount, slippageBps).raw;
+  emit("checking-status");
+  let status;
+  try {
+    status = await swap.getStatus({ contractAddress, chain });
+  } catch {
+    return { type: "error", error: { step: "status-check" } };
+  }
+  if (isStopped(status)) {
+    return { type: "error", error: { step: "swap-stopped" } };
+  }
+  emit("checking-allowance");
+  let allowance;
+  try {
+    allowance = await swap.getTokenAllowance({
+      tokenAddress: inputTokenAddress,
+      owner: wallet.address,
+      spender: contractAddress,
+      chain
+    });
+  } catch {
+    return { type: "error", error: { step: "allowance-check" } };
+  }
+  if (allowance.allowance < inputAmount) {
+    if (allowance.allowance > 0n) {
+      const reset = await submitApproval({
+        wallet,
+        tokenAddress: inputTokenAddress,
+        spender: contractAddress,
+        chain,
+        value: 0n,
+        pending: "resetting-allowance",
+        confirming: "confirming-allowance-reset",
+        emit
+      });
+      if (reset.type === "error") return { type: "error", error: reset.error };
+    }
+    const approve = await submitApproval({
+      wallet,
+      tokenAddress: inputTokenAddress,
+      spender: contractAddress,
+      chain,
+      value: inputAmount,
+      pending: "approving",
+      confirming: "confirming-approval",
+      emit
+    });
+    if (approve.type === "error")
+      return { type: "error", error: approve.error };
+  }
+  emit("swapping");
+  let swapTxHash;
+  try {
+    swapTxHash = await wallet.writeContract({
+      abi: SUPERSTATE_SWAP_ABI,
+      address: contractAddress,
+      functionName: "swap",
+      args: [inputTokenAddress, inputAmount, minOut],
+      chain
+    });
+  } catch (error) {
+    return {
+      type: "error",
+      error: { step: "swap", cause: classifyWalletError(error) }
+    };
+  }
+  emit("confirming-swap");
+  let receipt;
+  try {
+    receipt = await wallet.awaitTx(swapTxHash, chain);
+  } catch (error) {
+    return {
+      type: "error",
+      error: {
+        step: "swap",
+        cause: classifyWalletError(error, { hash: swapTxHash })
+      }
+    };
+  }
+  if (receipt.status !== "success") {
+    return { type: "error", error: { step: "swap-reverted" } };
+  }
+  const outputAmount = decodeSwappedOutputAmount(receipt, quote.outputTokenAmount.decimals) ?? quote.outputTokenAmount;
+  const finalQuote = { ...quote, outputTokenAmount: outputAmount };
+  return {
+    type: "success",
+    swapTxHash,
+    inputAmount: finalQuote.inputTokenAmount,
+    fee: finalQuote.fee,
+    outputAmount,
+    pricePerShare: computePrice(finalQuote),
+    recipientAddress: wallet.address
+  };
+}
+async function submitApproval(args) {
+  const {
+    wallet,
+    tokenAddress,
+    spender,
+    chain,
+    value,
+    pending,
+    confirming,
+    emit
+  } = args;
+  emit(pending);
+  let hash;
+  try {
+    hash = await wallet.writeContract({
+      abi: ERC20_ABI,
+      address: tokenAddress,
+      functionName: "approve",
+      args: [spender, value],
+      chain
+    });
+  } catch (error) {
+    return {
+      type: "error",
+      error: { step: "approval", cause: classifyWalletError(error) }
+    };
+  }
+  emit(confirming);
+  let receipt;
+  try {
+    receipt = await wallet.awaitTx(hash, chain);
+  } catch (error) {
+    return {
+      type: "error",
+      error: { step: "approval", cause: classifyWalletError(error, { hash }) }
+    };
+  }
+  if (receipt.status !== "success") {
+    return { type: "error", error: { step: "approval-reverted" } };
+  }
+  return { type: "ok" };
+}
+async function authorizeWallet(params) {
+  const { swap, wallet, offerId, contractAddress, chain, onProgress } = params;
+  const emit = (phase) => onProgress?.(phase);
+  const walletAddress = wallet.address;
+  emit("checking-authorization");
+  let auth;
+  try {
+    auth = await swap.getAuthorization({
+      walletAddress,
+      contractAddress,
+      chain
+    });
+  } catch {
+    return { type: "error", error: { step: "authorization-check" } };
+  }
+  if (auth.authorized) return { type: "success" };
+  emit("requesting-challenge");
+  let challenge;
+  try {
+    challenge = await swap.requestWalletOwnershipChallenge({
+      walletAddress,
+      chain,
+      challengeType: "plain"
+    });
+  } catch {
+    return { type: "error", error: { step: "challenge-request" } };
+  }
+  emit("signing-message");
+  let signature;
+  try {
+    signature = await wallet.signMessage(challenge.message);
+  } catch (error) {
+    return {
+      type: "error",
+      error: { step: "signing", cause: classifyWalletError(error) }
+    };
+  }
+  emit("submitting-signature");
+  let allow;
+  try {
+    allow = await swap.allowWallet({
+      offerId,
+      walletAddress,
+      chain,
+      signature
+    });
+  } catch {
+    return { type: "error", error: { step: "allow-wallet" } };
+  }
+  if (allow.action === "broadcast_transaction") {
+    emit("broadcasting-transaction");
+    let hash;
+    try {
+      hash = await wallet.broadcastRawTx({
+        to: allow.to,
+        data: allow.data,
+        chain
+      });
+    } catch (error) {
+      return {
+        type: "error",
+        error: { step: "broadcast", cause: classifyWalletError(error) }
+      };
+    }
+    emit("awaiting-confirmation");
+    try {
+      await wallet.awaitTx(hash, chain);
+    } catch (error) {
+      return {
+        type: "error",
+        error: {
+          step: "broadcast",
+          cause: classifyWalletError(error, { hash })
+        }
+      };
+    }
+  }
+  emit("verifying-authorization");
+  let reCheck;
+  try {
+    reCheck = await swap.getAuthorization({
+      walletAddress,
+      contractAddress,
+      chain
+    });
+  } catch {
+    return { type: "error", error: { step: "authorization-check" } };
+  }
+  if (!reCheck.authorized) {
+    return { type: "error", error: { step: "not-authorized" } };
+  }
+  return { type: "success" };
+}
+
+// src/client/core/client-swap-namespace.ts
+var ClientSwapNamespaceImpl = class extends SwapNamespaceImpl {
+  executeSwap(params) {
+    return executeSwap({ ...params, swap: this });
+  }
+  authorizeWallet(params) {
+    return authorizeWallet({ ...params, swap: this });
+  }
+};
+
 // src/client/core/coinlist-client.ts
 var OAUTH_STATE_KEY = "coinlist.oauth_state";
 var OAUTH_CODE_VERIFIER_KEY = "coinlist.oauth_code_verifier";
@@ -108,6 +404,10 @@ var CoinListClientImpl = class {
       },
       this.fetchAccessToken.bind(this)
     );
+    this.swap = new ClientSwapNamespaceImpl({
+      api: this.api,
+      ensureUserAuthenticated: async () => this.ensureAuthenticated()
+    });
   }
   async init() {
     await this.fetchAccessToken(true);
@@ -131,19 +431,16 @@ var CoinListClientImpl = class {
     return this._accessToken !== null ? "logged-in" : "logged-out";
   }
   async startOAuth() {
-    const state = generateSecureRandomBase64Url(32);
-    const codeVerifier = generateSecureRandomBase64Url(32);
-    const codeChallengeRaw = await sha256(codeVerifier);
-    const codeChallenge = arrayBufferToBase64Url(codeChallengeRaw, false);
-    sessionStorage.setItem(OAUTH_STATE_KEY, state);
-    sessionStorage.setItem(OAUTH_CODE_VERIFIER_KEY, codeVerifier);
+    const pkceParams = await generatePKCEParams(this._config);
+    sessionStorage.setItem(OAUTH_STATE_KEY, pkceParams.state);
+    sessionStorage.setItem(OAUTH_CODE_VERIFIER_KEY, pkceParams.codeVerifier);
     const params = new URLSearchParams({
-      client_id: this._config.clientId,
-      response_type: "code",
-      redirect_uri: this._config.redirectUri,
-      code_challenge: codeChallenge,
-      code_challenge_method: "S256",
-      state
+      client_id: pkceParams.clientId,
+      response_type: pkceParams.responseType,
+      redirect_uri: pkceParams.redirectUri,
+      code_challenge: pkceParams.codeChallenge,
+      code_challenge_method: pkceParams.codeChallengeMethod,
+      state: pkceParams.state
     });
     const baseUrl = this._config.coinlistBaseUrl ?? COINLIST_BASE_URL;
     const url = `${baseUrl}${OAUTH_PAGE_PATH}?${params.toString()}`;
@@ -182,15 +479,15 @@ var CoinListClientImpl = class {
   }
   async fetchOffers() {
     this.ensureAuthenticated();
-    return fetchOffers(this.api);
+    return fetchOffers(this.api, void 0);
   }
   async fetchOffersPage(params) {
     this.ensureAuthenticated();
-    return fetchOffersPage(this.api, params);
+    return fetchOffersPage(this.api, params, void 0);
   }
   async fetchOfferDetails(id) {
     this.ensureAuthenticated();
-    return fetchOfferDetails(this.api, id);
+    return fetchOfferDetails(this.api, id, void 0);
   }
   async fetchParticipations(offerId) {
     this.ensureAuthenticated();
@@ -208,14 +505,46 @@ var CoinListClientImpl = class {
     this.ensureAuthenticated();
     return createParticipation(this.api, params);
   }
+  async createWalletOwnershipChallenge(params) {
+    this.ensureAuthenticated();
+    return createWalletOwnershipChallenge(this.api, params);
+  }
+  async connectExternalWallet(offerId, params) {
+    this.ensureAuthenticated();
+    return connectExternalWallet(this.api, offerId, params);
+  }
+  async listOptionAddresses(offerId, offerOptionId) {
+    this.ensureAuthenticated();
+    return listOptionAddresses(
+      this.api,
+      offerId,
+      offerOptionId
+    );
+  }
+  async removeOptionAddress(offerId, addressId) {
+    this.ensureAuthenticated();
+    return removeOptionAddress(this.api, offerId, addressId);
+  }
   async fetchOfferRequirements(offerId) {
     this.ensureAuthenticated();
-    return fetchOfferRequirements(this.api, offerId);
+    return fetchOfferRequirements(this.api, offerId, void 0);
   }
   async fetchRequirementStatuses(offerId) {
     this.ensureAuthenticated();
     return fetchRequirementStatuses(this.api, offerId);
   }
+  async fetchPii() {
+    this.ensureAuthenticated();
+    return fetchPii(this.api);
+  }
+  async submitDocument(documentType, fields) {
+    this.ensureAuthenticated();
+    return submitDocument(this.api, documentType, fields);
+  }
+  async createKycToken(levelName, reset) {
+    this.ensureAuthenticated();
+    return createKycToken(this.api, levelName, reset);
+  }
   handleRequirement(requirement) {
     const baseUrl = this._config.coinlistBaseUrl ?? COINLIST_BASE_URL;
     let path;
@@ -242,6 +571,9 @@ var CoinListClientImpl = class {
       case "jurisdiction":
         path = null;
         break;
+      case "document":
+        path = null;
+        break;
       default: {
         const _exhaustive = requirement.type;
         return;
@@ -269,7 +601,10 @@ function createCoinListClient(config) {
 // src/client/CoinListProvider.tsx
 import { jsx } from "react/jsx-runtime";
 var CoinListContext = createContext(null);
-function CoinListProvider({ config, children }) {
+function CoinListContextProvider({
+  config,
+  children
+}) {
   const [isReady, setIsReady] = useState(false);
   const coinlist = useMemo(() => createCoinListClient(config), [config]);
   useEffect(() => {
@@ -294,23 +629,69 @@ function CoinListProvider({ config, children }) {
   const value = useMemo(() => ({ coinlist, isReady }), [coinlist, isReady]);
   return /* @__PURE__ */ jsx(CoinListContext.Provider, { value, children });
 }
+var CoinListProvider = CoinListContextProvider;
+
+// src/client/CoinListStyleScope.tsx
+import { createContext as createContext2, useContext } from "react";
+
+// src/client/generated/sdk-styles.gen.ts
+var sdkStyles = '/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--clcosdk-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--clcosdk-color-red-400:oklch(70.4% .191 22.216);--clcosdk-color-red-500:oklch(63.7% .237 25.331);--clcosdk-color-amber-500:oklch(76.9% .188 70.08);--clcosdk-color-gray-400:oklch(70.7% .022 261.325);--clcosdk-color-gray-500:oklch(55.1% .027 264.364);--clcosdk-color-black:#000;--clcosdk-spacing:.25rem;--clcosdk-container-md:28rem;--clcosdk-text-xs:.75rem;--clcosdk-text-xs--line-height:calc(1 / .75);--clcosdk-text-sm:.875rem;--clcosdk-text-sm--line-height:calc(1.25 / .875);--clcosdk-text-base:1rem;--clcosdk-text-base--line-height:calc(1.5 / 1);--clcosdk-font-weight-normal:400;--clcosdk-font-weight-medium:500;--clcosdk-font-weight-semibold:600;--clcosdk-radius-md:.375rem;--clcosdk-radius-lg:.5rem;--clcosdk-radius-2xl:1rem;--clcosdk-ease-in-out:cubic-bezier(.4, 0, .2, 1);--clcosdk-animate-spin:spin 1s linear infinite;--clcosdk-animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--clcosdk-color-brand-primary:var(--color-brand-primary)}}@layer base{.clco-sdk-root{--color-brand-primary:#171717;--color-brand-primary-hover:#000;--color-brand-primary-active:#262626;--color-accent:#2b3a67;--color-accent-hover:#243057;--color-accent-active:#1d2647;--color-accent-focus:#c7d2fe;--color-accent-subtle:#eef1f8;--color-text-primary:#171717;--color-text-secondary:#8c8c8c;--color-text-disabled:#d1d1d1;--color-text-inverse:#fff;--color-background:#fff;--color-surface:#fafafa;--color-section:#f3f3f3;--color-border:#e5e5e5;--color-divider:#ececec;--color-overlay:#00000080;--color-positive:#15803d;--color-positive-subtle:#dcfce7;--color-negative:#dc2626;--color-negative-subtle:#fee2e2;--color-success:#2c8c5e;--color-success-subtle:#e6f4ec;--color-success-border:#cfe9db;--color-warning:#e08a1a;--color-warning-subtle:#fff7ed;--color-warning-border:#fdead7;--color-error:#b42318;--color-error-subtle:#feeceb;--color-error-border:#fbd5d2}@media (prefers-color-scheme:dark){.clco-sdk-root:not(:where(.light,.light *)){--color-brand-primary:#f4f4f5;--color-brand-primary-hover:#fff;--color-brand-primary-active:#e4e4e7;--color-accent:#6f82c9;--color-accent-hover:#8799e4;--color-accent-active:#5b6fcf;--color-accent-focus:#6f82c959;--color-accent-subtle:#6f82c91f;--color-text-primary:#f4f4f5;--color-text-secondary:#a1a1aa;--color-text-disabled:#71717a;--color-text-inverse:#171717;--color-background:#0f1115;--color-surface:#161a20;--color-section:#20242c;--color-border:#2a2e35;--color-divider:#323741;--color-overlay:#000000b3;--color-positive:#22c55e;--color-positive-subtle:#22c55e1f;--color-negative:#ef4444;--color-negative-subtle:#ef44441f;--color-success:#34d399;--color-success-subtle:#34d3991f;--color-success-border:#34d39940;--color-warning:#f59e0b;--color-warning-subtle:#f59e0b1f;--color-warning-border:#f59e0b40;--color-error:#f87171;--color-error-subtle:#f871711f;--color-error-border:#f8717140}}:where(.dark,.dark *) .clco-sdk-root{--color-brand-primary:#f4f4f5;--color-brand-primary-hover:#fff;--color-brand-primary-active:#e4e4e7;--color-accent:#6f82c9;--color-accent-hover:#8799e4;--color-accent-active:#5b6fcf;--color-accent-focus:#6f82c959;--color-accent-subtle:#6f82c91f;--color-text-primary:#f4f4f5;--color-text-secondary:#a1a1aa;--color-text-disabled:#71717a;--color-text-inverse:#171717;--color-background:#0f1115;--color-surface:#161a20;--color-section:#20242c;--color-border:#2a2e35;--color-divider:#323741;--color-overlay:#000000b3;--color-positive:#22c55e;--color-positive-subtle:#22c55e1f;--color-negative:#ef4444;--color-negative-subtle:#ef44441f;--color-success:#34d399;--color-success-subtle:#34d3991f;--color-success-border:#34d39940;--color-warning:#f59e0b;--color-warning-subtle:#f59e0b1f;--color-warning-border:#f59e0b40;--color-error:#f87171;--color-error-subtle:#f871711f;--color-error-border:#f8717140}.clco-sdk-root{color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.clco-sdk-root *,.clco-sdk-root :before,.clco-sdk-root :after{box-sizing:border-box}.clco-sdk-root button{appearance:none;cursor:pointer;font:inherit;color:inherit;background:0 0;border:none;padding:0}.clco-sdk-root a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}.clco-sdk-root ul,.clco-sdk-root ol{margin:0;padding:0;list-style:none}.clco-sdk-root img,.clco-sdk-root svg{max-width:100%;display:block}}@layer components;@layer utilities{.clcosdk\\:absolute{position:absolute}.clcosdk\\:fixed{position:fixed}.clcosdk\\:relative{position:relative}.clcosdk\\:inset-0{inset:calc(var(--clcosdk-spacing) * 0)}.clcosdk\\:top-4{top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:right-4{right:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:z-50{z-index:50}.clcosdk\\:mt-4{margin-top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:mb-6{margin-bottom:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:flex{display:flex}.clcosdk\\:grid{display:grid}.clcosdk\\:inline-flex{display:inline-flex}.clcosdk\\:h-3{height:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:h-4{height:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:h-5{height:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:h-6{height:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:h-9{height:calc(var(--clcosdk-spacing) * 9)}.clcosdk\\:h-11{height:calc(var(--clcosdk-spacing) * 11)}.clcosdk\\:h-12{height:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:h-14{height:calc(var(--clcosdk-spacing) * 14)}.clcosdk\\:h-28{height:calc(var(--clcosdk-spacing) * 28)}.clcosdk\\:h-52{height:calc(var(--clcosdk-spacing) * 52)}.clcosdk\\:h-\\[18px\\]{height:18px}.clcosdk\\:h-auto{height:auto}.clcosdk\\:h-full{height:100%}.clcosdk\\:max-h-\\[92vh\\]{max-height:92vh}.clcosdk\\:min-h-0{min-height:calc(var(--clcosdk-spacing) * 0)}.clcosdk\\:min-h-9{min-height:calc(var(--clcosdk-spacing) * 9)}.clcosdk\\:min-h-40{min-height:calc(var(--clcosdk-spacing) * 40)}.clcosdk\\:min-h-\\[2\\.4rem\\]{min-height:2.4rem}.clcosdk\\:w-4{width:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:w-5{width:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:w-6{width:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:w-12{width:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:w-16{width:calc(var(--clcosdk-spacing) * 16)}.clcosdk\\:w-28{width:calc(var(--clcosdk-spacing) * 28)}.clcosdk\\:w-48{width:calc(var(--clcosdk-spacing) * 48)}.clcosdk\\:w-80{width:calc(var(--clcosdk-spacing) * 80)}.clcosdk\\:w-96{width:calc(var(--clcosdk-spacing) * 96)}.clcosdk\\:w-\\[16px\\]{width:16px}.clcosdk\\:w-\\[448px\\]{width:448px}.clcosdk\\:w-auto{width:auto}.clcosdk\\:w-full{width:100%}.clcosdk\\:max-w-\\[22rem\\]{max-width:22rem}.clcosdk\\:max-w-\\[28rem\\]{max-width:28rem}.clcosdk\\:max-w-\\[30rem\\]{max-width:30rem}.clcosdk\\:max-w-\\[760px\\]{max-width:760px}.clcosdk\\:max-w-\\[1200px\\]{max-width:1200px}.clcosdk\\:max-w-md{max-width:var(--clcosdk-container-md)}.clcosdk\\:shrink-0{flex-shrink:0}.clcosdk\\:rotate-90{rotate:90deg}.clcosdk\\:animate-pulse{animation:var(--clcosdk-animate-pulse)}.clcosdk\\:animate-spin{animation:var(--clcosdk-animate-spin)}.clcosdk\\:cursor-pointer{cursor:pointer}.clcosdk\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.clcosdk\\:grid-rows-\\[0fr\\]{grid-template-rows:0fr}.clcosdk\\:grid-rows-\\[1fr\\]{grid-template-rows:1fr}.clcosdk\\:flex-col{flex-direction:column}.clcosdk\\:flex-wrap{flex-wrap:wrap}.clcosdk\\:items-center{align-items:center}.clcosdk\\:items-start{align-items:flex-start}.clcosdk\\:justify-between{justify-content:space-between}.clcosdk\\:justify-center{justify-content:center}.clcosdk\\:gap-1{gap:calc(var(--clcosdk-spacing) * 1)}.clcosdk\\:gap-2{gap:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:gap-3{gap:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:gap-4{gap:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:gap-5{gap:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:gap-6{gap:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:gap-8{gap:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:gap-\\[5px\\]{gap:5px}:where(.clcosdk\\:space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--clcosdk-spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--clcosdk-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.clcosdk\\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--clcosdk-spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--clcosdk-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.clcosdk\\:divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.clcosdk\\:divide-border>:not(:last-child)){border-color:var(--color-border)}:where(.clcosdk\\:divide-divider>:not(:last-child)){border-color:var(--color-divider)}.clcosdk\\:self-start{align-self:flex-start}.clcosdk\\:overflow-hidden{overflow:hidden}.clcosdk\\:overflow-y-auto{overflow-y:auto}.clcosdk\\:rounded{border-radius:.25rem}.clcosdk\\:rounded-2xl{border-radius:var(--clcosdk-radius-2xl)}.clcosdk\\:rounded-btn{border-radius:12px}.clcosdk\\:rounded-card{border-radius:24px}.clcosdk\\:rounded-full{border-radius:3.40282e38px}.clcosdk\\:rounded-lg{border-radius:var(--clcosdk-radius-lg)}.clcosdk\\:rounded-md{border-radius:var(--clcosdk-radius-md)}.clcosdk\\:border{border-style:var(--tw-border-style);border-width:1px}.clcosdk\\:border-2{border-style:var(--tw-border-style);border-width:2px}.clcosdk\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.clcosdk\\:border-dashed{--tw-border-style:dashed;border-style:dashed}.clcosdk\\:border-accent\\/50{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.clcosdk\\:border-accent\\/50{border-color:color-mix(in oklab, var(--color-accent) 50%, transparent)}}.clcosdk\\:border-accent\\/60{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.clcosdk\\:border-accent\\/60{border-color:color-mix(in oklab, var(--color-accent) 60%, transparent)}}.clcosdk\\:border-amber-500{border-color:var(--clcosdk-color-amber-500)}.clcosdk\\:border-border,.clcosdk\\:border-border\\/60{border-color:var(--color-border)}@supports (color:color-mix(in lab, red, red)){.clcosdk\\:border-border\\/60{border-color:color-mix(in oklab, var(--color-border) 60%, transparent)}}.clcosdk\\:border-current{border-color:currentColor}.clcosdk\\:border-divider{border-color:var(--color-divider)}.clcosdk\\:border-error-border{border-color:var(--color-error-border)}.clcosdk\\:border-success-border{border-color:var(--color-success-border)}.clcosdk\\:border-warning-border{border-color:var(--color-warning-border)}.clcosdk\\:border-t-transparent{border-top-color:#0000}.clcosdk\\:bg-accent\\/10{background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.clcosdk\\:bg-accent\\/10{background-color:color-mix(in oklab, var(--color-accent) 10%, transparent)}}.clcosdk\\:bg-background{background-color:var(--color-background)}.clcosdk\\:bg-black\\/50{background-color:var(--clcosdk-color-black)}@supports (color:color-mix(in lab, red, red)){.clcosdk\\:bg-black\\/50{background-color:color-mix(in oklab, var(--clcosdk-color-black) 50%, transparent)}}.clcosdk\\:bg-brand-primary{background-color:var(--color-brand-primary)}.clcosdk\\:bg-error-subtle{background-color:var(--color-error-subtle)}.clcosdk\\:bg-overlay{background-color:var(--color-overlay)}.clcosdk\\:bg-section{background-color:var(--color-section)}.clcosdk\\:bg-success-subtle{background-color:var(--color-success-subtle)}.clcosdk\\:bg-surface{background-color:var(--color-surface)}.clcosdk\\:bg-transparent{background-color:#0000}.clcosdk\\:bg-warning-subtle{background-color:var(--color-warning-subtle)}.clcosdk\\:bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.clcosdk\\:bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.clcosdk\\:from-surface{--tw-gradient-from:var(--color-surface);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.clcosdk\\:from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.clcosdk\\:via-section{--tw-gradient-via:var(--color-section);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.clcosdk\\:via-transparent{--tw-gradient-via:transparent;--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.clcosdk\\:to-background{--tw-gradient-to:var(--color-background);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.clcosdk\\:to-overlay\\/35{--tw-gradient-to:var(--color-overlay)}@supports (color:color-mix(in lab, red, red)){.clcosdk\\:to-overlay\\/35{--tw-gradient-to:color-mix(in oklab, var(--color-overlay) 35%, transparent)}}.clcosdk\\:to-overlay\\/35{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.clcosdk\\:object-cover{object-fit:cover}.clcosdk\\:p-0{padding:calc(var(--clcosdk-spacing) * 0)}.clcosdk\\:p-1\\.5{padding:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:p-3{padding:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:p-4{padding:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:p-6{padding:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:p-8{padding:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:px-2{padding-inline:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:px-3{padding-inline:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:px-4{padding-inline:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:px-5{padding-inline:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:px-6{padding-inline:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:py-2{padding-block:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:pt-4{padding-top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:pt-14{padding-top:calc(var(--clcosdk-spacing) * 14)}.clcosdk\\:pb-4{padding-bottom:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:text-center{text-align:center}.clcosdk\\:text-left{text-align:left}.clcosdk\\:font-mono{font-family:var(--clcosdk-font-mono)}.clcosdk\\:text-base{font-size:var(--clcosdk-text-base);line-height:var(--tw-leading,var(--clcosdk-text-base--line-height))}.clcosdk\\:text-sm{font-size:var(--clcosdk-text-sm);line-height:var(--tw-leading,var(--clcosdk-text-sm--line-height))}.clcosdk\\:text-xs{font-size:var(--clcosdk-text-xs);line-height:var(--tw-leading,var(--clcosdk-text-xs--line-height))}.clcosdk\\:text-\\[11px\\]{font-size:11px}.clcosdk\\:text-\\[12px\\]{font-size:12px}.clcosdk\\:text-\\[14px\\]{font-size:14px}.clcosdk\\:text-\\[16px\\]{font-size:16px}.clcosdk\\:text-\\[18px\\]{font-size:18px}.clcosdk\\:text-\\[22px\\]{font-size:22px}.clcosdk\\:text-\\[28px\\]{font-size:28px}.clcosdk\\:text-\\[36px\\]{font-size:36px}.clcosdk\\:text-\\[48px\\]{font-size:48px}.clcosdk\\:text-\\[64px\\]{font-size:64px}.clcosdk\\:leading-\\[110\\%\\]{--tw-leading:110%;line-height:110%}.clcosdk\\:leading-\\[120\\%\\]{--tw-leading:120%;line-height:120%}.clcosdk\\:leading-\\[125\\%\\]{--tw-leading:125%;line-height:125%}.clcosdk\\:leading-\\[130\\%\\]{--tw-leading:130%;line-height:130%}.clcosdk\\:leading-\\[135\\%\\]{--tw-leading:135%;line-height:135%}.clcosdk\\:leading-\\[140\\%\\]{--tw-leading:140%;line-height:140%}.clcosdk\\:leading-\\[150\\%\\]{--tw-leading:150%;line-height:150%}.clcosdk\\:font-medium{--tw-font-weight:var(--clcosdk-font-weight-medium);font-weight:var(--clcosdk-font-weight-medium)}.clcosdk\\:font-normal{--tw-font-weight:var(--clcosdk-font-weight-normal);font-weight:var(--clcosdk-font-weight-normal)}.clcosdk\\:font-semibold{--tw-font-weight:var(--clcosdk-font-weight-semibold);font-weight:var(--clcosdk-font-weight-semibold)}.clcosdk\\:tracking-\\[0\\.12px\\]{--tw-tracking:.12px;letter-spacing:.12px}.clcosdk\\:tracking-\\[0\\.28px\\]{--tw-tracking:.28px;letter-spacing:.28px}.clcosdk\\:whitespace-nowrap{white-space:nowrap}.clcosdk\\:text-error{color:var(--color-error)}.clcosdk\\:text-success{color:var(--color-success)}.clcosdk\\:text-text-inverse{color:var(--color-text-inverse)}.clcosdk\\:text-text-primary{color:var(--color-text-primary)}.clcosdk\\:text-text-secondary{color:var(--color-text-secondary)}.clcosdk\\:text-warning{color:var(--color-warning)}.clcosdk\\:capitalize{text-transform:capitalize}.clcosdk\\:underline{text-decoration-line:underline}.clcosdk\\:underline-offset-2{text-underline-offset:2px}.clcosdk\\:underline-offset-4{text-underline-offset:4px}.clcosdk\\:opacity-60{opacity:.6}.clcosdk\\:shadow-\\[0_0_0_3px_rgba\\(59\\,130\\,246\\,0\\.2\\)\\]{--tw-shadow:0 0 0 3px var(--tw-shadow-color,#3b82f633);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-\\[0_0_0_3px_rgba\\(59\\,130\\,246\\,0\\.18\\)\\]{--tw-shadow:0 0 0 3px var(--tw-shadow-color,#3b82f62e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-\\[0_0_0_3px_rgba\\(59\\,130\\,246\\,0\\.25\\)\\]{--tw-shadow:0 0 0 3px var(--tw-shadow-color,#3b82f640);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-\\[0_10px_24px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 10px 24px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-\\[0_10px_24px_rgba\\(0\\,0\\,0\\,0\\.25\\)\\]{--tw-shadow:0 10px 24px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-card{--tw-shadow:0px 4px 6px -2px var(--tw-shadow-color,#0000000d), 0px 12px 24px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:transition-\\[grid-template-rows\\]{transition-property:grid-template-rows;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.clcosdk\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.clcosdk\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.clcosdk\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.clcosdk\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.clcosdk\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.clcosdk\\:ease-in-out{--tw-ease:var(--clcosdk-ease-in-out);transition-timing-function:var(--clcosdk-ease-in-out)}@media (hover:hover){.clcosdk\\:hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--clcosdk-spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.clcosdk\\:hover\\:border-divider:hover{border-color:var(--color-divider)}.clcosdk\\:hover\\:bg-\\[\\#fcdcd8\\]:hover{background-color:#fcdcd8}.clcosdk\\:hover\\:bg-border:hover{background-color:var(--color-border)}.clcosdk\\:hover\\:bg-brand-primary:hover{background-color:var(--color-brand-primary)}.clcosdk\\:hover\\:bg-brand-primary-hover:hover{background-color:var(--color-brand-primary-hover)}.clcosdk\\:hover\\:bg-section:hover{background-color:var(--color-section)}.clcosdk\\:hover\\:bg-surface:hover{background-color:var(--color-surface)}.clcosdk\\:hover\\:text-\\[\\#8b1a13\\]:hover{color:#8b1a13}.clcosdk\\:hover\\:text-text-primary:hover{color:var(--color-text-primary)}.clcosdk\\:hover\\:underline:hover{text-decoration-line:underline}.clcosdk\\:hover\\:shadow-\\[0px_14px_32px_-10px_rgba\\(0\\,0\\,0\\,0\\.35\\)\\]:hover{--tw-shadow:0px 14px 32px -10px var(--tw-shadow-color,#00000059);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.clcosdk\\:focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:focus-visible\\:ring-accent-focus:focus-visible{--tw-ring-color:var(--color-accent-focus)}.clcosdk\\:focus-visible\\:ring-gray-400:focus-visible{--tw-ring-color:var(--clcosdk-color-gray-400)}.clcosdk\\:focus-visible\\:ring-gray-500:focus-visible{--tw-ring-color:var(--clcosdk-color-gray-500)}.clcosdk\\:focus-visible\\:ring-red-400:focus-visible{--tw-ring-color:var(--clcosdk-color-red-400)}.clcosdk\\:focus-visible\\:ring-red-500:focus-visible{--tw-ring-color:var(--clcosdk-color-red-500)}.clcosdk\\:focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.clcosdk\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.clcosdk\\:active\\:bg-\\[\\#d9d9d9\\]:active{background-color:#d9d9d9}.clcosdk\\:active\\:bg-\\[\\#f9c9c4\\]:active{background-color:#f9c9c4}.clcosdk\\:active\\:bg-border:active{background-color:var(--color-border)}.clcosdk\\:active\\:bg-brand-primary-active:active{background-color:var(--color-brand-primary-active)}.clcosdk\\:active\\:text-\\[\\#6d1510\\]:active{color:#6d1510}.clcosdk\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.clcosdk\\:disabled\\:opacity-40:disabled{opacity:.4}@media (prefers-color-scheme:dark){@media (hover:hover){.clcosdk\\:dark\\:hover\\:bg-\\[rgba\\(248\\,113\\,113\\,0\\.20\\)\\]:not(:where(.light,.light *)):hover{background-color:#f8717133}}}@media (hover:hover){.clcosdk\\:dark\\:hover\\:bg-\\[rgba\\(248\\,113\\,113\\,0\\.20\\)\\]:where(.dark,.dark *):hover{background-color:#f8717133}}@media (prefers-color-scheme:dark){@media (hover:hover){.clcosdk\\:dark\\:hover\\:text-\\[\\#fca5a5\\]:not(:where(.light,.light *)):hover{color:#fca5a5}}}@media (hover:hover){.clcosdk\\:dark\\:hover\\:text-\\[\\#fca5a5\\]:where(.dark,.dark *):hover{color:#fca5a5}}@media (prefers-color-scheme:dark){.clcosdk\\:dark\\:active\\:bg-\\[rgba\\(248\\,113\\,113\\,0\\.30\\)\\]:not(:where(.light,.light *)):active{background-color:#f871714d}}.clcosdk\\:dark\\:active\\:bg-\\[rgba\\(248\\,113\\,113\\,0\\.30\\)\\]:where(.dark,.dark *):active{background-color:#f871714d}@media (prefers-color-scheme:dark){.clcosdk\\:dark\\:active\\:bg-divider:not(:where(.light,.light *)):active{background-color:var(--color-divider)}}.clcosdk\\:dark\\:active\\:bg-divider:where(.dark,.dark *):active{background-color:var(--color-divider)}@media (prefers-color-scheme:dark){.clcosdk\\:dark\\:active\\:text-\\[\\#f87171\\]:not(:where(.light,.light *)):active{color:#f87171}}.clcosdk\\:dark\\:active\\:text-\\[\\#f87171\\]:where(.dark,.dark *):active{color:#f87171}.clcosdk\\:\\[\\&_circle\\]\\:fill-error-subtle circle{fill:var(--color-error-subtle)}.clcosdk\\:\\[\\&_circle\\]\\:fill-success-subtle circle{fill:var(--color-success-subtle)}.clcosdk\\:\\[\\&_circle\\]\\:fill-warning-subtle circle{fill:var(--color-warning-subtle)}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}';
+
+// src/client/CoinListStyleScope.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ScopeContext = createContext2(false);
+function CoinListStyleScope({ children }) {
+  const alreadyScoped = useContext(ScopeContext);
+  if (alreadyScoped) {
+    return /* @__PURE__ */ jsx2(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }),
+    /* @__PURE__ */ jsx2(
+      "link",
+      {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossOrigin: "anonymous"
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "link",
+      {
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "clco-sdk-root", style: { display: "contents" }, children: [
+      /* @__PURE__ */ jsx2(
+        "style",
+        {
+          href: "clco-sdk-styles",
+          precedence: "default",
+          dangerouslySetInnerHTML: { __html: sdkStyles }
+        }
+      ),
+      /* @__PURE__ */ jsx2(ScopeContext.Provider, { value: true, children })
+    ] })
+  ] });
+}
 
 // src/client/components/design-system/AlertBanner.tsx
 import { CircleCheck, Info } from "lucide-react";
 
 // src/client/components/design-system/tokens/typography.ts
 var typeClasses = {
-  hero: "text-[64px] leading-[110%] font-semibold",
-  display: "text-[48px] leading-[110%] font-semibold",
-  h1: "text-[36px] leading-[120%] font-semibold",
-  h2: "text-[28px] leading-[125%] font-semibold",
-  h3: "text-[22px] leading-[130%] font-semibold",
-  h4: "text-[18px] leading-[135%] font-medium",
-  body: "text-[16px] leading-[150%] font-normal",
-  subhead: "text-[14px] leading-[150%] font-normal",
-  caption: "text-[12px] leading-[140%] font-normal",
-  label: "text-[14px] leading-[140%] font-medium",
-  data: "text-[14px] leading-[140%] font-normal"
+  hero: "clcosdk:text-[64px] clcosdk:leading-[110%] clcosdk:font-semibold",
+  display: "clcosdk:text-[48px] clcosdk:leading-[110%] clcosdk:font-semibold",
+  h1: "clcosdk:text-[36px] clcosdk:leading-[120%] clcosdk:font-semibold",
+  h2: "clcosdk:text-[28px] clcosdk:leading-[125%] clcosdk:font-semibold",
+  h3: "clcosdk:text-[22px] clcosdk:leading-[130%] clcosdk:font-semibold",
+  h4: "clcosdk:text-[18px] clcosdk:leading-[135%] clcosdk:font-medium",
+  body: "clcosdk:text-[16px] clcosdk:leading-[150%] clcosdk:font-normal",
+  subhead: "clcosdk:text-[14px] clcosdk:leading-[150%] clcosdk:font-normal",
+  caption: "clcosdk:text-[12px] clcosdk:leading-[140%] clcosdk:font-normal",
+  label: "clcosdk:text-[14px] clcosdk:leading-[140%] clcosdk:font-medium",
+  data: "clcosdk:text-[14px] clcosdk:leading-[140%] clcosdk:font-normal"
 };
 
 // src/client/components/design-system/utils.ts
@@ -320,26 +701,26 @@ function cn(...inputs) {
 }
 
 // src/client/components/design-system/AlertBanner.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var variantConfig = {
   info: {
-    container: "bg-surface border-border",
-    text: "text-text-secondary",
+    container: "clcosdk:bg-surface clcosdk:border-border",
+    text: "clcosdk:text-text-secondary",
     Icon: Info
   },
   success: {
-    container: "bg-success-subtle border-success-border",
-    text: "text-success",
+    container: "clcosdk:bg-success-subtle clcosdk:border-success-border",
+    text: "clcosdk:text-success",
     Icon: CircleCheck
   },
   warning: {
-    container: "bg-warning-subtle border-warning-border",
-    text: "text-warning",
+    container: "clcosdk:bg-warning-subtle clcosdk:border-warning-border",
+    text: "clcosdk:text-warning",
     Icon: Info
   },
   error: {
-    container: "bg-error-subtle border-error-border",
-    text: "text-error",
+    container: "clcosdk:bg-error-subtle clcosdk:border-error-border",
+    text: "clcosdk:text-error",
     Icon: Info
   }
 };
@@ -350,18 +731,24 @@ function AlertBanner({
   className
 }) {
   const { container, text, Icon } = variantConfig[variant];
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: cn(
-        "flex items-center rounded-btn border p-3",
-        icon && "gap-2",
+        "clcosdk:flex clcosdk:items-center clcosdk:rounded-btn clcosdk:border clcosdk:p-3",
+        icon && "clcosdk:gap-2",
         container,
         className
       ),
       children: [
-        icon && /* @__PURE__ */ jsx2(Icon, { className: cn("h-4 w-4 shrink-0", text), "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx2("p", { className: cn(typeClasses.subhead, text), children: content })
+        icon && /* @__PURE__ */ jsx3(
+          Icon,
+          {
+            className: cn("clcosdk:h-4 clcosdk:w-4 clcosdk:shrink-0", text),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx3("p", { className: cn(typeClasses.subhead, text), children: content })
       ]
     }
   );
@@ -369,31 +756,31 @@ function AlertBanner({
 
 // src/client/components/design-system/CloseButton.tsx
 import { X } from "lucide-react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function CloseButton({
   onClick,
   "aria-label": ariaLabel = "Close",
   className
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx4(
     "button",
     {
       type: "button",
       onClick,
       "aria-label": ariaLabel,
       className: cn(
-        "cursor-pointer rounded-full p-1.5 text-text-secondary transition-colors hover:bg-surface hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2",
+        "clcosdk:cursor-pointer clcosdk:rounded-full clcosdk:p-1.5 clcosdk:text-text-secondary clcosdk:transition-colors clcosdk:hover:bg-surface clcosdk:hover:text-text-primary clcosdk:focus-visible:outline-none clcosdk:focus-visible:ring-2 clcosdk:focus-visible:ring-gray-400 clcosdk:focus-visible:ring-offset-2",
         className
       ),
-      children: /* @__PURE__ */ jsx3(X, { className: "h-5 w-5" })
+      children: /* @__PURE__ */ jsx4(X, { className: "clcosdk:h-5 clcosdk:w-5" })
     }
   );
 }
 
 // src/client/components/design-system/logos/CoinListWordmark.tsx
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function CoinListWordmark(props) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "svg",
     {
       width: "638",
@@ -404,35 +791,35 @@ function CoinListWordmark(props) {
       "aria-hidden": "true",
       ...props,
       children: [
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "path",
           {
             d: "M68.7724 123.966C74.8226 124.172 80.7696 123.519 86.5104 121.799C97.4076 118.531 106.551 112.58 113.942 103.947C113.942 103.947 113.942 103.947 113.908 103.912C111.879 102.193 109.851 100.507 107.857 98.8218L105.829 97.1363C105.451 96.8268 105.107 96.5172 104.729 96.2076C103.939 95.5197 103.148 94.8662 102.323 94.2126C95.3107 98.8562 87.6104 101.539 79.1196 101.883C74.8569 102.055 70.6287 101.642 66.5036 100.507C59.5252 98.6154 53.2688 95.1757 48.2499 89.7755C39.1059 79.938 35.8745 68.1743 38.2465 55.0348C39.7246 46.9172 43.4373 40.0723 49.1093 34.5C47.9061 34.7408 46.703 35.016 45.5342 35.3943C36.5277 38.2148 29.6181 43.6839 24.6336 51.6639C20.6803 58.0273 18.5834 64.9411 18.3428 72.4739C18.2053 76.7047 18.4803 80.7979 19.4428 84.7879C22.5023 97.2395 29.3087 107.043 39.6903 114.335H39.7934V114.403C40.1372 114.644 40.4809 114.919 40.8247 115.16C49.2812 120.801 58.5971 123.691 68.7724 124.035V123.966Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "path",
           {
             d: "M72.2101 89.052C68.1881 90.8406 64.0286 91.8725 59.6973 92.2165C64.9912 95.209 70.8007 96.688 77.1259 96.8256C79.1885 96.86 81.251 96.6536 83.4167 96.3097C88.745 95.4841 93.6951 93.5579 98.3015 90.7374C93.9358 87.057 89.6044 83.4109 85.2386 79.7305C81.526 83.6861 77.1946 86.8506 72.2101 89.052Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "path",
           {
             d: "M66.9848 0.241609C66.4348 0.276006 65.8848 0.344799 65.3691 0.413592C70.663 1.4111 75.7851 3.13093 80.6321 5.71068C90.0511 10.7326 97.3732 17.9215 102.289 27.4494L104.936 25.1448C107.652 22.7714 110.368 20.3981 113.084 18.0247C106.655 11.1797 99.092 6.15784 90.223 3.06214C84.3103 0.998336 78.2601 -0.0335643 72.0381 0.000832319C70.388 0.000832319 68.7036 0.138419 66.9848 0.241609Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "path",
           {
             d: "M25.4242 107.871C17.4833 97.9988 13.1519 86.7167 13.2207 73.818C13.2207 67.317 14.5614 61.0568 17.1396 55.1062C20.9553 46.2662 26.9711 39.1805 35.4276 34.2962C43.3685 29.687 51.9968 27.8984 61.1752 29.2743C70.5943 30.7189 78.3976 35.2249 84.6541 42.2762C84.6541 42.2762 84.8603 42.5514 84.9634 42.6546C85.8916 41.8291 86.8541 41.0035 87.7823 40.178L88.9167 39.1805C89.8792 38.355 90.8417 37.4951 91.8043 36.6696C94.0043 34.7434 96.17 32.8515 98.3357 30.9253C94.1075 22.223 87.7479 15.55 79.3258 10.8377C69.3911 5.26541 58.7002 3.54557 47.3904 5.02463C41.7528 5.78136 36.3557 7.50119 31.1993 10.0465C13.702 18.7145 1.08597 36.532 0.0546833 58.4771C-0.117196 62.0887 0.123436 65.7348 0.673452 69.3464C2.04849 78.3239 5.34859 86.4759 10.6425 93.8368C14.7676 99.5123 19.6834 104.19 25.3898 107.871H25.4242Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "path",
           {
             fillRule: "evenodd",
@@ -447,18 +834,18 @@ function CoinListWordmark(props) {
 }
 
 // src/client/components/design-system/PoweredByCoinList.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function PoweredByCoinList({ className }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn(
-        "flex items-center justify-center gap-[5px] text-text-secondary",
+        "clcosdk:flex clcosdk:items-center clcosdk:justify-center clcosdk:gap-[5px] clcosdk:text-text-secondary",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx5("span", { className: cn(typeClasses.caption, "tracking-[0.12px]"), children: "Powered by" }),
-        /* @__PURE__ */ jsx5(CoinListWordmark, { className: "h-3 w-auto" })
+        /* @__PURE__ */ jsx6("span", { className: cn(typeClasses.caption, "clcosdk:tracking-[0.12px]"), children: "Powered by" }),
+        /* @__PURE__ */ jsx6(CoinListWordmark, { className: "clcosdk:h-3 clcosdk:w-auto" })
       ]
     }
   );
@@ -467,48 +854,48 @@ function PoweredByCoinList({ className }) {
 // src/client/components/design-system/ClButton.tsx
 import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-3 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40 cursor-pointer",
+  "clcosdk:inline-flex clcosdk:items-center clcosdk:justify-center clcosdk:gap-3 clcosdk:whitespace-nowrap clcosdk:transition-colors clcosdk:focus-visible:outline-none clcosdk:focus-visible:ring-2 clcosdk:focus-visible:ring-offset-2 clcosdk:disabled:pointer-events-none clcosdk:disabled:opacity-40 clcosdk:cursor-pointer",
   {
     variants: {
       variant: {
         // Primary — tokens auto-switch: dark bg (#171717) → light bg (#f4f4f5) in dark mode
-        primary: "bg-brand-primary text-text-inverse font-semibold hover:bg-brand-primary-hover active:bg-brand-primary-active focus-visible:ring-gray-500",
+        primary: "clcosdk:bg-brand-primary clcosdk:text-text-inverse clcosdk:font-semibold clcosdk:hover:bg-brand-primary-hover clcosdk:active:bg-brand-primary-active clcosdk:focus-visible:ring-gray-500",
         // Secondary — bg-section, border-border, text-text-primary all auto-switch
         // hover maps to border token value; active has no token so uses dark: override
-        secondary: "bg-section border border-border text-text-primary font-medium hover:bg-border active:bg-[#d9d9d9] dark:active:bg-divider focus-visible:ring-gray-400",
+        secondary: "clcosdk:bg-section clcosdk:border clcosdk:border-border clcosdk:text-text-primary clcosdk:font-medium clcosdk:hover:bg-border clcosdk:active:bg-[#d9d9d9] clcosdk:dark:active:bg-divider clcosdk:focus-visible:ring-gray-400",
         // Destructive — error tokens auto-switch to translucent dark equivalents
         // hover/active have no tokens so use dark: overrides
-        destructive: "bg-error-subtle border border-error-border text-error font-semibold hover:bg-[#fcdcd8] active:bg-[#f9c9c4] dark:hover:bg-[rgba(248,113,113,0.20)] dark:active:bg-[rgba(248,113,113,0.30)] focus-visible:ring-red-400",
+        destructive: "clcosdk:bg-error-subtle clcosdk:border clcosdk:border-error-border clcosdk:text-error clcosdk:font-semibold clcosdk:hover:bg-[#fcdcd8] clcosdk:active:bg-[#f9c9c4] clcosdk:dark:hover:bg-[rgba(248,113,113,0.20)] clcosdk:dark:active:bg-[rgba(248,113,113,0.30)] clcosdk:focus-visible:ring-red-400",
         // Ghost — transparent base; hover/active use section/border tokens (auto-switch)
-        ghost: "bg-transparent text-text-primary font-medium hover:bg-section active:bg-border focus-visible:ring-gray-400",
+        ghost: "clcosdk:bg-transparent clcosdk:text-text-primary clcosdk:font-medium clcosdk:hover:bg-section clcosdk:active:bg-border clcosdk:focus-visible:ring-gray-400",
         // Link — text-text-primary auto-switches light/dark
-        link: "h-auto p-0 text-text-primary font-medium underline-offset-4 hover:underline focus-visible:ring-gray-500",
+        link: "clcosdk:h-auto clcosdk:p-0 clcosdk:text-text-primary clcosdk:font-medium clcosdk:underline-offset-4 clcosdk:hover:underline clcosdk:focus-visible:ring-gray-500",
         // Destructive link — text-error auto-switches (#b42318 → #f87171 in dark)
-        destructiveLink: "h-auto p-0 text-error font-medium hover:text-[#8b1a13] active:text-[#6d1510] dark:hover:text-[#fca5a5] dark:active:text-[#f87171] focus-visible:ring-red-500"
+        destructiveLink: "clcosdk:h-auto clcosdk:p-0 clcosdk:text-error clcosdk:font-medium clcosdk:hover:text-[#8b1a13] clcosdk:active:text-[#6d1510] clcosdk:dark:hover:text-[#fca5a5] clcosdk:dark:active:text-[#f87171] clcosdk:focus-visible:ring-red-500"
       },
       size: {
-        sm: "h-9 px-4 text-sm tracking-[0.28px]",
-        default: "h-11 px-5 text-sm tracking-[0.28px]",
-        lg: "h-14 px-6 text-base",
-        icon: "h-12 w-12"
+        sm: "clcosdk:h-9 clcosdk:px-4 clcosdk:text-sm clcosdk:tracking-[0.28px]",
+        default: "clcosdk:h-11 clcosdk:px-5 clcosdk:text-sm clcosdk:tracking-[0.28px]",
+        lg: "clcosdk:h-14 clcosdk:px-6 clcosdk:text-base",
+        icon: "clcosdk:h-12 clcosdk:w-12"
       },
       radius: {
-        pill: "rounded-full",
+        pill: "clcosdk:rounded-full",
         // compound variants below handle size-specific radii
         rounded: ""
       },
       fullWidth: {
-        true: "w-full",
+        true: "clcosdk:w-full",
         false: ""
       }
     },
     compoundVariants: [
-      { size: "sm", radius: "rounded", className: "rounded-lg" },
-      { size: "default", radius: "rounded", className: "rounded-2xl" },
-      { size: "lg", radius: "rounded", className: "rounded-2xl" },
-      { size: "icon", radius: "rounded", className: "rounded-md" }
+      { size: "sm", radius: "rounded", className: "clcosdk:rounded-lg" },
+      { size: "default", radius: "rounded", className: "clcosdk:rounded-2xl" },
+      { size: "lg", radius: "rounded", className: "clcosdk:rounded-2xl" },
+      { size: "icon", radius: "rounded", className: "clcosdk:rounded-md" }
     ],
     defaultVariants: {
       variant: "primary",
@@ -534,7 +921,7 @@ var ClButton = forwardRef(
     ...props
   }, ref) => {
     const isDisabled = disabled || isLoading;
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5(
       "button",
       {
         className: cn(
@@ -545,16 +932,16 @@ var ClButton = forwardRef(
         disabled: isDisabled,
         ...props,
         children: [
-          isLoading && /* @__PURE__ */ jsx6(
+          isLoading && /* @__PURE__ */ jsx7(
             "span",
             {
-              className: "h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-60",
+              className: "clcosdk:h-4 clcosdk:w-4 clcosdk:shrink-0 clcosdk:animate-spin clcosdk:rounded-full clcosdk:border-2 clcosdk:border-current clcosdk:border-t-transparent clcosdk:opacity-60",
               "aria-hidden": "true"
             }
           ),
-          startIcon && !isLoading && /* @__PURE__ */ jsx6("span", { className: "shrink-0", children: startIcon }),
-          /* @__PURE__ */ jsx6("span", { className: cn(isLoading && "opacity-60"), children: isLoading && loadingText ? loadingText : children }),
-          endIcon && !isLoading && /* @__PURE__ */ jsx6("span", { className: "shrink-0", children: endIcon })
+          startIcon && !isLoading && /* @__PURE__ */ jsx7("span", { className: "clcosdk:shrink-0", children: startIcon }),
+          /* @__PURE__ */ jsx7("span", { className: cn(isLoading && "clcosdk:opacity-60"), children: isLoading && loadingText ? loadingText : children }),
+          endIcon && !isLoading && /* @__PURE__ */ jsx7("span", { className: "clcosdk:shrink-0", children: endIcon })
         ]
       }
     );
@@ -563,9 +950,9 @@ var ClButton = forwardRef(
 ClButton.displayName = "ClButton";
 
 // src/client/components/design-system/logos/CoinListLogomark.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function CoinListLogomark(props) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "svg",
     {
       width: "115",
@@ -576,28 +963,28 @@ function CoinListLogomark(props) {
       "aria-hidden": "true",
       ...props,
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "path",
           {
             d: "M69.7519 123.966C75.8021 124.172 81.7491 123.519 87.4899 121.799C98.3871 118.531 107.531 112.58 114.922 103.947C114.922 103.947 114.922 103.947 114.888 103.912C112.859 102.193 110.831 100.507 108.837 98.8218L106.809 97.1363C106.431 96.8268 106.087 96.5172 105.709 96.2076C104.919 95.5197 104.128 94.8662 103.303 94.2126C96.2902 98.8562 88.5899 101.539 80.0991 101.883C75.8364 102.055 71.6082 101.642 67.4831 100.507C60.5047 98.6154 54.2483 95.1757 49.2294 89.7755C40.0854 79.938 36.854 68.1743 39.226 55.0348C40.7041 46.9172 44.4168 40.0723 50.0888 34.5C48.8856 34.7408 47.6825 35.016 46.5137 35.3943C37.5072 38.2148 30.5976 43.6839 25.6131 51.6639C21.6598 58.0273 19.5629 64.9411 19.3223 72.4739C19.1848 76.7047 19.4598 80.7979 20.4223 84.7879C23.4818 97.2395 30.2882 107.043 40.6698 114.335H40.7729V114.403C41.1167 114.644 41.4604 114.919 41.8042 115.16C50.2607 120.801 59.5766 123.691 69.7519 124.035V123.966Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "path",
           {
             d: "M73.1896 89.052C69.1676 90.8406 65.0081 91.8725 60.6768 92.2165C65.9707 95.209 71.7802 96.688 78.1054 96.8256C80.168 96.86 82.2305 96.6536 84.3962 96.3097C89.7245 95.4841 94.6746 93.5579 99.281 90.7374C94.9153 87.057 90.5839 83.4109 86.2181 79.7305C82.5055 83.6861 78.1741 86.8506 73.1896 89.052Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "path",
           {
             d: "M67.9643 0.241609C67.4143 0.276006 66.8643 0.344799 66.3486 0.413592C71.6425 1.4111 76.7646 3.13093 81.6116 5.71068C91.0306 10.7326 98.3527 17.9215 103.268 27.4494L105.915 25.1448C108.631 22.7714 111.347 20.3981 114.063 18.0247C107.634 11.1797 100.072 6.15784 91.2025 3.06214C85.2898 0.998336 79.2396 -0.0335643 73.0176 0.000832322C71.3675 0.000832322 69.6831 0.138419 67.9643 0.241609Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "path",
           {
             d: "M26.4037 107.871C18.4628 97.9988 14.1314 86.7167 14.2002 73.818C14.2002 67.317 15.5409 61.0568 18.1191 55.1062C21.9348 46.2662 27.9506 39.1805 36.4071 34.2962C44.348 29.687 52.9763 27.8984 62.1547 29.2743C71.5738 30.7189 79.3771 35.2249 85.6336 42.2762C85.6336 42.2762 85.8398 42.5514 85.9429 42.6546C86.8711 41.8291 87.8336 41.0035 88.7618 40.178L89.8962 39.1805C90.8587 38.355 91.8212 37.4951 92.7838 36.6696C94.9838 34.7434 97.1495 32.8515 99.3152 30.9253C95.087 22.223 88.7274 15.55 80.3053 10.8377C70.3706 5.26541 59.6797 3.54557 48.37 5.02463C42.7323 5.78136 37.3352 7.50119 32.1788 10.0465C14.6815 18.7145 2.06546 36.532 1.03418 58.4771C0.862296 62.0887 1.10293 65.7348 1.65294 69.3464C3.02798 78.3239 6.32808 86.4759 11.622 93.8368C15.7471 99.5123 20.6629 104.19 26.3693 107.871H26.4037Z",
@@ -610,7 +997,7 @@ function CoinListLogomark(props) {
 }
 
 // src/client/components/oauth/CoinListSignInButton.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function CoinListSignInButton({
   onClick,
   disabled = false,
@@ -618,7 +1005,7 @@ function CoinListSignInButton({
   isLoading = false,
   className
 }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     ClButton,
     {
       variant: "primary",
@@ -628,7 +1015,7 @@ function CoinListSignInButton({
       disabled,
       isLoading,
       loadingText: "Signing in...",
-      startIcon: /* @__PURE__ */ jsx8(CoinListLogomark, { className: "h-[18px] w-[16px] shrink-0" }),
+      startIcon: /* @__PURE__ */ jsx9(CoinListLogomark, { className: "clcosdk:h-[18px] clcosdk:w-[16px] clcosdk:shrink-0" }),
       className,
       children: "Continue with CoinList"
     }
@@ -636,9 +1023,9 @@ function CoinListSignInButton({
 }
 
 // src/client/hooks/useCoinList.ts
-import { useContext } from "react";
+import { useContext as useContext2 } from "react";
 function useCoinList() {
-  const context = useContext(CoinListContext);
+  const context = useContext2(CoinListContext);
   if (context === null) {
     throw new CoinListClientInitializationError();
   }
@@ -655,7 +1042,7 @@ var CoinListClientInitializationError = class extends Error {
 };
 
 // src/client/components/oauth/CoinListSignInCard.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function CoinListSignInCard({
   state = "idle",
   onSignIn,
@@ -666,37 +1053,50 @@ function CoinListSignInCard({
   const handleSignIn = onSignIn ?? (() => {
     void coinlist.startOAuth();
   });
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx10(CoinListStyleScope, { children: /* @__PURE__ */ jsxs7(
     "div",
     {
       className: cn(
-        "relative flex w-full max-w-md flex-col rounded-card border border-border bg-background p-6 shadow-card",
+        "clcosdk:relative clcosdk:flex clcosdk:w-full clcosdk:max-w-md clcosdk:flex-col clcosdk:rounded-card clcosdk:border clcosdk:border-border clcosdk:bg-background clcosdk:p-6 clcosdk:shadow-card",
         className
       ),
       children: [
-        onClose && /* @__PURE__ */ jsx9(CloseButton, { onClick: onClose, className: "absolute right-4 top-4" }),
-        /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx9("h3", { className: cn(typeClasses.h3, "text-text-primary"), children: "Sign in to participate" }),
-          /* @__PURE__ */ jsx9("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "A CoinList account is required to participate in this sale." })
+        onClose && /* @__PURE__ */ jsx10(
+          CloseButton,
+          {
+            onClick: onClose,
+            className: "clcosdk:absolute clcosdk:right-4 clcosdk:top-4"
+          }
+        ),
+        /* @__PURE__ */ jsxs7("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+          /* @__PURE__ */ jsx10("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: "Sign in to participate" }),
+          /* @__PURE__ */ jsx10("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "A CoinList account is required to participate in this sale." })
         ] }),
-        /* @__PURE__ */ jsx9(CoinListSignInButton, { onClick: handleSignIn, fullWidth: true, className: "mt-4" }),
-        state === "error" && /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
+          CoinListSignInButton,
+          {
+            onClick: handleSignIn,
+            fullWidth: true,
+            className: "clcosdk:mt-4"
+          }
+        ),
+        state === "error" && /* @__PURE__ */ jsx10(
           AlertBanner,
           {
             variant: "error",
             icon: true,
             content: "Error signing in. Please try again.",
-            className: "mt-4"
+            className: "clcosdk:mt-4"
           }
         ),
-        /* @__PURE__ */ jsx9(PoweredByCoinList, { className: "mt-4" })
+        /* @__PURE__ */ jsx10(PoweredByCoinList, { className: "clcosdk:mt-4" })
       ]
     }
-  );
+  ) });
 }
 
 // src/client/components/offers/OfferCard.tsx
-import { Fragment, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var monthYearFormatter = new Intl.DateTimeFormat("en-US", {
   month: "short",
   year: "numeric"
@@ -717,46 +1117,67 @@ function OfferCard({
   containerClassName
 }) {
   const cardLabel = "Open offer details";
-  const cardContent = /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsxs7("div", { className: "relative mb-6 h-52 w-full overflow-hidden rounded-2xl border border-border/60 bg-section", children: [
-      offer.bannerUrl ? /* @__PURE__ */ jsx10(
+  const cardContent = /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsxs8("div", { className: "clcosdk:relative clcosdk:mb-6 clcosdk:h-52 clcosdk:w-full clcosdk:overflow-hidden clcosdk:rounded-2xl clcosdk:border clcosdk:border-border/60 clcosdk:bg-section", children: [
+      offer.bannerUrl ? /* @__PURE__ */ jsx11(
         "img",
         {
           src: offer.bannerUrl,
           alt: "Offer banner",
-          className: "h-full w-full object-cover"
+          className: "clcosdk:h-full clcosdk:w-full clcosdk:object-cover"
         }
-      ) : /* @__PURE__ */ jsx10("div", { className: "h-full w-full bg-gradient-to-br from-surface via-section to-background" }),
-      /* @__PURE__ */ jsx10("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-overlay/35" }),
-      /* @__PURE__ */ jsx10("div", { className: "absolute inset-0 flex items-center justify-center p-6", children: offer.logoUrl ? /* @__PURE__ */ jsx10(
+      ) : /* @__PURE__ */ jsx11("div", { className: "clcosdk:h-full clcosdk:w-full clcosdk:bg-gradient-to-br clcosdk:from-surface clcosdk:via-section clcosdk:to-background" }),
+      /* @__PURE__ */ jsx11("div", { className: "clcosdk:absolute clcosdk:inset-0 clcosdk:bg-gradient-to-b clcosdk:from-transparent clcosdk:via-transparent clcosdk:to-overlay/35" }),
+      /* @__PURE__ */ jsx11("div", { className: "clcosdk:absolute clcosdk:inset-0 clcosdk:flex clcosdk:items-center clcosdk:justify-center clcosdk:p-6", children: offer.logoUrl ? /* @__PURE__ */ jsx11(
         "img",
         {
           src: offer.logoUrl,
           alt: "Offer logo",
-          className: "h-28 w-28 rounded-full border border-border bg-surface object-cover shadow-[0_10px_24px_rgba(0,0,0,0.25)]"
+          className: "clcosdk:h-28 clcosdk:w-28 clcosdk:rounded-full clcosdk:border clcosdk:border-border clcosdk:bg-surface clcosdk:object-cover clcosdk:shadow-[0_10px_24px_rgba(0,0,0,0.25)]"
         }
-      ) : /* @__PURE__ */ jsx10("div", { className: "h-28 w-28 rounded-full border border-border bg-surface shadow-[0_10px_24px_rgba(0,0,0,0.18)]" }) })
+      ) : /* @__PURE__ */ jsx11("div", { className: "clcosdk:h-28 clcosdk:w-28 clcosdk:rounded-full clcosdk:border clcosdk:border-border clcosdk:bg-surface clcosdk:shadow-[0_10px_24px_rgba(0,0,0,0.18)]" }) })
     ] }),
-    offer.tagline && /* @__PURE__ */ jsx10("p", { className: cn(typeClasses.h3, "min-h-[2.4rem] text-text-primary"), children: offer.tagline }),
-    /* @__PURE__ */ jsxs7("div", { className: "mt-4 grid grid-cols-2 gap-5 border-t border-divider pt-4", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx10("span", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Starts" }),
-        /* @__PURE__ */ jsx10("span", { className: cn(typeClasses.label, "text-text-primary"), children: offer.formattedStartsAt })
+    offer.tagline && /* @__PURE__ */ jsx11(
+      "p",
+      {
+        className: cn(
+          typeClasses.h3,
+          "clcosdk:min-h-[2.4rem] clcosdk:text-text-primary"
+        ),
+        children: offer.tagline
+      }
+    ),
+    /* @__PURE__ */ jsxs8("div", { className: "clcosdk:mt-4 clcosdk:grid clcosdk:grid-cols-2 clcosdk:gap-5 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1", children: [
+        /* @__PURE__ */ jsx11(
+          "span",
+          {
+            className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"),
+            children: "Starts"
+          }
+        ),
+        /* @__PURE__ */ jsx11("span", { className: cn(typeClasses.label, "clcosdk:text-text-primary"), children: offer.formattedStartsAt })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx10("span", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Ends" }),
-        /* @__PURE__ */ jsx10("span", { className: cn(typeClasses.label, "text-text-primary"), children: offer.formattedEndsAt })
+      /* @__PURE__ */ jsxs8("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1", children: [
+        /* @__PURE__ */ jsx11(
+          "span",
+          {
+            className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"),
+            children: "Ends"
+          }
+        ),
+        /* @__PURE__ */ jsx11("span", { className: cn(typeClasses.label, "clcosdk:text-text-primary"), children: offer.formattedEndsAt })
       ] })
     ] })
   ] });
   const baseClasses = cn(
-    "relative flex w-full max-w-[28rem] flex-col rounded-card border border-border bg-background p-6 text-left shadow-card transition-all duration-200",
+    "clcosdk:relative clcosdk:flex clcosdk:w-full clcosdk:max-w-[28rem] clcosdk:flex-col clcosdk:rounded-card clcosdk:border clcosdk:border-border clcosdk:bg-background clcosdk:p-6 clcosdk:text-left clcosdk:shadow-card clcosdk:transition-all clcosdk:duration-200",
     className,
-    onClick && "cursor-pointer hover:-translate-y-0.5 hover:border-divider hover:shadow-[0px_14px_32px_-10px_rgba(0,0,0,0.35)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-focus focus-visible:ring-offset-2"
+    onClick && "clcosdk:cursor-pointer clcosdk:hover:-translate-y-0.5 clcosdk:hover:border-divider clcosdk:hover:shadow-[0px_14px_32px_-10px_rgba(0,0,0,0.35)] clcosdk:focus-visible:outline-none clcosdk:focus-visible:ring-2 clcosdk:focus-visible:ring-accent-focus clcosdk:focus-visible:ring-offset-2"
   );
   let cardNode;
   if (onClick) {
-    cardNode = /* @__PURE__ */ jsx10(
+    cardNode = /* @__PURE__ */ jsx11(
       "button",
       {
         type: "button",
@@ -767,12 +1188,10 @@ function OfferCard({
       }
     );
   } else {
-    cardNode = /* @__PURE__ */ jsx10("div", { className: baseClasses, children: cardContent });
-  }
-  if (!containerClassName) {
-    return cardNode;
+    cardNode = /* @__PURE__ */ jsx11("div", { className: baseClasses, children: cardContent });
   }
-  return /* @__PURE__ */ jsx10("div", { className: containerClassName, children: cardNode });
+  const card = containerClassName ? /* @__PURE__ */ jsx11("div", { className: containerClassName, children: cardNode }) : cardNode;
+  return /* @__PURE__ */ jsx11(CoinListStyleScope, { children: card });
 }
 
 // src/client/hooks/useOffers.ts
@@ -818,9 +1237,9 @@ function useOffers(options = {}) {
 }
 
 // src/client/components/offers/OffersGrid.tsx
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_MAX_COLUMNS = 3;
-function OffersGrid({
+function OffersGridBody({
   data,
   maxColumns,
   className,
@@ -836,12 +1255,12 @@ function OffersGrid({
     if (loading) {
       return loading;
     }
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       "output",
       {
         "aria-live": "polite",
-        className: "flex min-h-40 items-center justify-center rounded-2xl border border-border bg-background p-6",
-        children: /* @__PURE__ */ jsx11("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "Loading offers..." })
+        className: "clcosdk:flex clcosdk:min-h-40 clcosdk:items-center clcosdk:justify-center clcosdk:rounded-2xl clcosdk:border clcosdk:border-border clcosdk:bg-background clcosdk:p-6",
+        children: /* @__PURE__ */ jsx12("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading offers..." })
       }
     );
   }
@@ -850,13 +1269,13 @@ function OffersGrid({
       return error;
     }
     const errorMessage = offersState.reason === "not-authenticated" ? "Sign in to view available offers." : "Unable to load offers right now. Please try again.";
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx12(
       AlertBanner,
       {
         variant: "error",
         icon: true,
         content: errorMessage,
-        className: "w-full max-w-[28rem]"
+        className: "clcosdk:w-full clcosdk:max-w-[28rem]"
       }
     );
   }
@@ -864,103 +1283,671 @@ function OffersGrid({
     if (emptyState) {
       return emptyState;
     }
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs9(
       "output",
       {
         "aria-live": "polite",
-        className: "flex min-h-40 flex-col items-center justify-center rounded-2xl border border-border bg-background p-6 text-center",
+        className: "clcosdk:flex clcosdk:min-h-40 clcosdk:flex-col clcosdk:items-center clcosdk:justify-center clcosdk:rounded-2xl clcosdk:border clcosdk:border-border clcosdk:bg-background clcosdk:p-6 clcosdk:text-center",
         children: [
-          /* @__PURE__ */ jsx11("p", { className: cn(typeClasses.body, "font-medium text-text-primary"), children: "No offers available" }),
-          /* @__PURE__ */ jsx11("p", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Check back soon for upcoming opportunities." })
+          /* @__PURE__ */ jsx12(
+            "p",
+            {
+              className: cn(
+                typeClasses.body,
+                "clcosdk:font-medium clcosdk:text-text-primary"
+              ),
+              children: "No offers available"
+            }
+          ),
+          /* @__PURE__ */ jsx12("p", { className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"), children: "Check back soon for upcoming opportunities." })
         ]
       }
     );
   }
   const maxGridWidth = `calc(${cols} * 28rem + ${Math.max(cols - 1, 0)} * 1.5rem)`;
-  return /* @__PURE__ */ jsx11("div", { className: cn("flex w-full justify-center", containerClassName), children: /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
-      className: cn("grid w-full gap-6", className),
-      style: {
-        gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 20rem), 1fr))",
-        maxWidth: maxGridWidth
-      },
-      children: offersState.offers.map((offer) => /* @__PURE__ */ jsx11(
-        OfferCard,
+      className: cn(
+        "clcosdk:flex clcosdk:w-full clcosdk:justify-center",
+        containerClassName
+      ),
+      children: /* @__PURE__ */ jsx12(
+        "div",
         {
-          offer: OfferCardUi.fromDomain(offer),
-          onClick: onOfferClick ? () => onOfferClick(offer) : void 0
-        },
-        offer.id
-      ))
+          className: cn("clcosdk:grid clcosdk:w-full clcosdk:gap-6", className),
+          style: {
+            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 20rem), 1fr))",
+            maxWidth: maxGridWidth
+          },
+          children: offersState.offers.map((offer) => /* @__PURE__ */ jsx12(
+            OfferCard,
+            {
+              offer: OfferCardUi.fromDomain(offer),
+              onClick: onOfferClick ? () => onOfferClick(offer) : void 0
+            },
+            offer.id
+          ))
+        }
+      )
     }
-  ) });
+  );
+}
+function OffersGrid(props = {}) {
+  return /* @__PURE__ */ jsx12(CoinListStyleScope, { children: /* @__PURE__ */ jsx12(OffersGridBody, { ...props }) });
 }
 
-// src/client/components/requirements/RequirementItem.tsx
-import { ChevronRight } from "lucide-react";
-
-// src/client/components/design-system/StepStatusIcon.tsx
-import { CircleCheck as CircleCheck2, CircleX, Info as Info2 } from "lucide-react";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var statusConfig = {
-  required: {
-    Icon: Info2,
-    colorClass: "text-warning",
-    fillClass: "[&_circle]:fill-warning-subtle"
-  },
-  pending: {
-    Icon: Info2,
-    colorClass: "text-warning",
-    fillClass: "[&_circle]:fill-warning-subtle"
-  },
-  completed: {
-    Icon: CircleCheck2,
-    colorClass: "text-success",
-    fillClass: "[&_circle]:fill-success-subtle"
-  },
-  rejected: {
-    Icon: CircleX,
-    colorClass: "text-error",
-    fillClass: "[&_circle]:fill-error-subtle"
-  }
-};
-function StepStatusIcon({ status, className }) {
-  const { Icon, colorClass, fillClass } = statusConfig[status];
-  return /* @__PURE__ */ jsx12(
-    Icon,
+// src/client/components/requirements/ConnectedWalletList.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+function ConnectedWalletRow({
+  wallet,
+  onRemove
+}) {
+  const [state, setState] = useState3("idle");
+  const remove = async () => {
+    if (!onRemove) return;
+    setState("removing");
+    try {
+      await onRemove(wallet.id);
+      setState("idle");
+    } catch {
+      setState("error");
+    }
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: "clcosdk:flex clcosdk:min-h-9 clcosdk:flex-wrap clcosdk:items-center clcosdk:justify-between clcosdk:gap-2", children: [
+    /* @__PURE__ */ jsx13(
+      "span",
+      {
+        title: wallet.address,
+        className: cn(
+          typeClasses.body,
+          "clcosdk:font-mono clcosdk:text-text-primary"
+        ),
+        children: wallet.shortAddress
+      }
+    ),
+    onRemove != null && (state === "confirming" ? /* @__PURE__ */ jsxs10("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
+      /* @__PURE__ */ jsx13(
+        "span",
+        {
+          className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"),
+          children: "Remove?"
+        }
+      ),
+      /* @__PURE__ */ jsx13(ClButton, { size: "sm", variant: "destructive", onClick: remove, children: "Remove" }),
+      /* @__PURE__ */ jsx13(
+        ClButton,
+        {
+          size: "sm",
+          variant: "ghost",
+          onClick: () => setState("idle"),
+          children: "Cancel"
+        }
+      )
+    ] }) : state === "error" ? /* @__PURE__ */ jsxs10("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
+      /* @__PURE__ */ jsx13("span", { className: cn(typeClasses.subhead, "clcosdk:text-error"), children: "Couldn't remove." }),
+      /* @__PURE__ */ jsx13(
+        ClButton,
+        {
+          size: "sm",
+          variant: "destructiveLink",
+          onClick: () => setState("confirming"),
+          children: "Try again"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx13(
+      ClButton,
+      {
+        size: "sm",
+        variant: "destructiveLink",
+        disabled: state === "removing",
+        onClick: () => setState("confirming"),
+        children: state === "removing" ? "Removing\u2026" : "Remove"
+      }
+    ))
+  ] });
+}
+function ConnectedWalletList({
+  wallets,
+  onRemove,
+  onAdd,
+  addLabel = "Add wallet",
+  status = "ready",
+  className
+}) {
+  return /* @__PURE__ */ jsxs10(
+    "div",
     {
-      className: cn("h-6 w-6 shrink-0", colorClass, fillClass, className),
-      "aria-hidden": "true"
+      className: cn("clcosdk:flex clcosdk:flex-col clcosdk:gap-2", className),
+      children: [
+        status === "loading" ? /* @__PURE__ */ jsx13(AlertBanner, { variant: "info", content: "Loading your connected wallets\u2026" }) : status === "error" ? /* @__PURE__ */ jsx13(
+          AlertBanner,
+          {
+            variant: "error",
+            content: "Couldn't load your connected wallets."
+          }
+        ) : wallets.length === 0 ? /* @__PURE__ */ jsx13(AlertBanner, { variant: "info", content: "No wallets connected yet." }) : /* @__PURE__ */ jsx13("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:divide-y clcosdk:divide-divider", children: wallets.map((wallet) => /* @__PURE__ */ jsx13(
+          ConnectedWalletRow,
+          {
+            wallet,
+            onRemove
+          },
+          wallet.id
+        )) }),
+        onAdd != null && status !== "loading" && /* @__PURE__ */ jsx13(
+          ClButton,
+          {
+            size: "sm",
+            variant: "secondary",
+            onClick: onAdd,
+            className: "clcosdk:self-start",
+            children: addLabel
+          }
+        )
+      ]
     }
   );
 }
 
-// src/client/components/requirements/RequirementItem.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-var RequirementVariant = {
-  fromType(type) {
-    switch (type) {
-      case "external_wallet":
-      case "whitelisted_wallet":
-        return "wallet";
-      default:
-        return "verification";
+// src/client/components/requirements/ConnectWalletModal.tsx
+import { useEffect as useEffect4, useId } from "react";
+
+// src/client/hooks/useConnectWallet.ts
+import { useCallback, useEffect as useEffect3, useRef, useState as useState4 } from "react";
+
+// src/client/core/connect-external-wallet.ts
+var DEFAULT_STATEMENT = "Sign this message to prove you own this wallet. This does not cost gas or move funds.";
+var TERMINAL_CODES = /* @__PURE__ */ new Set([
+  "not_authenticated",
+  "wallet_not_whitelisted",
+  "max_wallets_reached"
+]);
+var API_ERROR_CODES = /* @__PURE__ */ new Set([
+  "wallet_not_whitelisted",
+  "max_wallets_reached"
+]);
+function flowError(code) {
+  return { code, retryable: !TERMINAL_CODES.has(code) };
+}
+function siweContext() {
+  if (typeof window === "undefined") return { domain: "", uri: "" };
+  return { domain: window.location.host, uri: window.location.origin };
+}
+function apiErrorCode(error) {
+  if (typeof error !== "object" || error === null) return void 0;
+  const body = error.response?.body;
+  return typeof body?.code === "string" ? body.code : void 0;
+}
+function classifyApiError(error) {
+  if (error instanceof NotAuthenticatedError) {
+    return flowError("not_authenticated");
+  }
+  const code = apiErrorCode(error);
+  if (code !== void 0 && API_ERROR_CODES.has(code)) {
+    return flowError(code);
+  }
+  return flowError("unknown");
+}
+function challengeParams(wallet, challengeType, statement) {
+  switch (challengeType) {
+    case "siwe":
+      return {
+        walletAddress: wallet.address,
+        chain: wallet.chain,
+        challengeType: "siwe",
+        ...siweContext(),
+        statement: statement ?? DEFAULT_STATEMENT
+      };
+    case "plain":
+      return {
+        walletAddress: wallet.address,
+        chain: wallet.chain,
+        challengeType: "plain"
+      };
+    default: {
+      const _exhaustive = challengeType;
+      return _exhaustive;
     }
   }
-};
-var RequirementStatus = {
-  fromStatusValue(status) {
-    switch (status) {
-      case "not_started":
-      case "action_needed":
-        return "required";
-      case "in_progress":
-        return "pending";
-      case "completed":
-        return "completed";
-      case "rejected":
-        return "rejected";
+}
+async function connectExternalWalletFlow(params) {
+  const {
+    coinlist,
+    wallet,
+    offerId,
+    offerOptionId,
+    challengeType,
+    statement,
+    isCancelled,
+    onProgress
+  } = params;
+  const emit = (phase) => onProgress?.(phase);
+  const cancelled = () => isCancelled?.() ?? false;
+  emit("requesting-challenge");
+  let challenge;
+  try {
+    challenge = await coinlist.createWalletOwnershipChallenge(
+      challengeParams(wallet, challengeType ?? "siwe", statement)
+    );
+  } catch (error) {
+    return { type: "error", error: classifyApiError(error) };
+  }
+  if (cancelled()) return { type: "cancelled" };
+  emit("signing-message");
+  let signature;
+  try {
+    signature = await wallet.signMessage(challenge.message);
+  } catch (error) {
+    if (classifyWalletError(error).type === "user_rejected") {
+      return { type: "error", error: flowError("user_rejected") };
+    }
+    return { type: "error", error: flowError("unknown") };
+  }
+  if (cancelled()) return { type: "cancelled" };
+  emit("submitting-signature");
+  try {
+    const binding = await coinlist.connectExternalWallet(offerId, {
+      offerOptionId,
+      walletAddress: wallet.address,
+      chain: wallet.chain,
+      signature
+    });
+    return { type: "success", binding };
+  } catch (error) {
+    return { type: "error", error: classifyApiError(error) };
+  }
+}
+
+// src/client/hooks/useConnectWallet.ts
+var IDLE_SIGN = { type: "idle", error: null };
+var ERROR_COPY = {
+  not_authenticated: "Sign in to connect your wallet.",
+  user_rejected: "Signature request declined. Approve it in your wallet to continue.",
+  wallet_not_whitelisted: "This wallet is not approved for this offer.",
+  max_wallets_reached: "You've reached the maximum number of wallets for this option.",
+  unknown: "Unable to connect your wallet. Please try again."
+};
+function displayError(error) {
+  return {
+    code: error.code,
+    message: ERROR_COPY[error.code],
+    retryable: error.retryable
+  };
+}
+function useConnectWallet({
+  isOpen,
+  offerId,
+  offerOptionId,
+  wallet,
+  challengeType,
+  statement
+}) {
+  const { coinlist } = useCoinList();
+  const [state, setState] = useState4(
+    () => wallet ? { type: "READY", address: wallet.address, sign: IDLE_SIGN } : { type: "NEEDS_WALLET" }
+  );
+  const attempt = useRef(0);
+  useEffect3(() => {
+    attempt.current += 1;
+    if (!isOpen) return;
+    setState(
+      wallet ? { type: "READY", address: wallet.address, sign: IDLE_SIGN } : { type: "NEEDS_WALLET" }
+    );
+  }, [isOpen, wallet?.address]);
+  useEffect3(
+    () => () => {
+      attempt.current += 1;
+    },
+    []
+  );
+  const onSign = useCallback(() => {
+    if (!wallet || state.type !== "READY") return;
+    attempt.current += 1;
+    const gen = attempt.current;
+    setState({
+      type: "READY",
+      address: wallet.address,
+      sign: { type: "signing" }
+    });
+    connectExternalWalletFlow({
+      coinlist,
+      wallet,
+      offerId,
+      offerOptionId,
+      challengeType,
+      statement,
+      // Cancels the flow before signing / binding if this attempt is superseded.
+      isCancelled: () => attempt.current !== gen
+    }).then((result) => {
+      if (attempt.current !== gen) return;
+      if (result.type === "success") {
+        setState({ type: "CONNECTED", binding: result.binding });
+      } else if (result.type === "error") {
+        setState({
+          type: "READY",
+          address: wallet.address,
+          sign: { type: "idle", error: displayError(result.error) }
+        });
+      }
+    });
+  }, [
+    wallet,
+    state,
+    coinlist,
+    offerId,
+    offerOptionId,
+    challengeType,
+    statement
+  ]);
+  return { state, onSign };
+}
+
+// src/client/components/requirements/ConnectWalletModal.tsx
+import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+function ConnectWalletModal({
+  isOpen,
+  onClose,
+  offerId,
+  optionId,
+  wallet,
+  onConnected,
+  onRequestConnect,
+  challengeType,
+  statement,
+  className
+}) {
+  const { state, onSign } = useConnectWallet({
+    isOpen,
+    offerId,
+    offerOptionId: optionId,
+    wallet,
+    challengeType,
+    statement
+  });
+  const titleId = useId();
+  useEffect4(() => {
+    if (state.type === "CONNECTED") {
+      onConnected?.(state.binding);
+      onClose();
+    }
+  }, [state]);
+  if (!isOpen || state.type === "CONNECTED") return null;
+  return /* @__PURE__ */ jsx14("div", { className: "clcosdk:fixed clcosdk:inset-0 clcosdk:z-50 clcosdk:flex clcosdk:items-center clcosdk:justify-center clcosdk:bg-black/50 clcosdk:p-4", children: /* @__PURE__ */ jsxs11(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": titleId,
+      className: cn(
+        "clcosdk:flex clcosdk:w-full clcosdk:max-w-md clcosdk:flex-col clcosdk:gap-6 clcosdk:rounded-2xl clcosdk:bg-background clcosdk:p-6",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs11("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
+          /* @__PURE__ */ jsx14(
+            "h3",
+            {
+              id: titleId,
+              className: cn(typeClasses.h3, "clcosdk:text-text-primary"),
+              children: "Connect your wallet"
+            }
+          ),
+          /* @__PURE__ */ jsx14(CloseButton, { onClick: onClose })
+        ] }),
+        state.type === "NEEDS_WALLET" && /* @__PURE__ */ jsx14(NeedsWalletScreen, { onRequestConnect }),
+        state.type === "READY" && /* @__PURE__ */ jsx14(
+          ReadyScreen,
+          {
+            address: state.address,
+            sign: state.sign,
+            onSign,
+            onRequestConnect
+          }
+        )
+      ]
+    }
+  ) });
+}
+function NeedsWalletScreen({
+  onRequestConnect
+}) {
+  return /* @__PURE__ */ jsxs11("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+    /* @__PURE__ */ jsx14("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Connect an external wallet to prove ownership and bind it to this offer." }),
+    onRequestConnect && /* @__PURE__ */ jsx14(ClButton, { fullWidth: true, onClick: onRequestConnect, children: "Connect wallet" })
+  ] });
+}
+function ReadyScreen({
+  address,
+  sign,
+  onSign,
+  onRequestConnect
+}) {
+  const hasTerminalError = sign.type === "idle" && sign.error !== null && !sign.error.retryable;
+  return /* @__PURE__ */ jsxs11("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+    /* @__PURE__ */ jsx14("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Sign a message with your connected wallet to prove you own it. This does not cost gas or move any funds." }),
+    /* @__PURE__ */ jsxs11("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: [
+      /* @__PURE__ */ jsx14("span", { className: cn(typeClasses.label, "clcosdk:text-text-secondary"), children: "Wallet address" }),
+      /* @__PURE__ */ jsx14("span", { className: cn(typeClasses.body, "clcosdk:text-text-primary"), children: shortenAddress(address) })
+    ] }),
+    sign.type === "idle" && sign.error && // Live region: the error is inserted async after a failed attempt, so
+    // screen readers need it announced rather than silently rendered.
+    /* @__PURE__ */ jsx14("div", { role: "alert", children: /* @__PURE__ */ jsx14(AlertBanner, { variant: "error", icon: true, content: sign.error.message }) }),
+    /* @__PURE__ */ jsx14(
+      ClButton,
+      {
+        fullWidth: true,
+        onClick: onSign,
+        isLoading: sign.type === "signing",
+        loadingText: "Waiting for signature...",
+        disabled: hasTerminalError,
+        children: "Sign & connect"
+      }
+    ),
+    onRequestConnect && /* @__PURE__ */ jsx14(
+      ClButton,
+      {
+        fullWidth: true,
+        variant: "secondary",
+        onClick: onRequestConnect,
+        disabled: sign.type === "signing",
+        children: "Use a different wallet"
+      }
+    )
+  ] });
+}
+
+// src/client/components/requirements/IdentityVerification.tsx
+import SumsubWebSdk from "@sumsub/websdk-react";
+import { useEffect as useEffect6, useRef as useRef3 } from "react";
+
+// src/client/hooks/useKycToken.ts
+import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
+var IDLE_STATE = { type: "IDLE" };
+var LOADING_STATE2 = { type: "LOADING" };
+function useKycToken(levelName, reset) {
+  const { coinlist } = useCoinList();
+  const [kycTokenState, setKycTokenState] = useState5(IDLE_STATE);
+  const resetPendingRef = useRef2(reset === true);
+  const tokenIssuedRef = useRef2(false);
+  useEffect5(() => {
+    if (!tokenIssuedRef.current) {
+      resetPendingRef.current = reset === true;
+    }
+  }, [reset]);
+  const fetchToken = useCallback2(async () => {
+    setKycTokenState(LOADING_STATE2);
+    try {
+      const kycToken = await coinlist.createKycToken(
+        levelName,
+        resetPendingRef.current
+      );
+      resetPendingRef.current = false;
+      tokenIssuedRef.current = true;
+      setKycTokenState({ type: "CONTENT", token: kycToken.token });
+      return kycToken.token;
+    } catch (error) {
+      const reason = error instanceof NotAuthenticatedError ? "not-authenticated" : "generic-error";
+      setKycTokenState({ type: "ERROR", reason });
+      throw error;
+    }
+  }, [coinlist, levelName]);
+  return { kycTokenState, fetchToken };
+}
+
+// src/client/components/requirements/IdentityVerification.tsx
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+function IdentityVerification({
+  levelName,
+  reset,
+  locale,
+  onSubmitted,
+  onError,
+  className
+}) {
+  const { kycTokenState, fetchToken } = useKycToken(levelName, reset);
+  const fetchedRef = useRef3(false);
+  useEffect6(() => {
+    if (fetchedRef.current) return;
+    fetchedRef.current = true;
+    fetchToken().catch(() => {
+    });
+  }, [fetchToken]);
+  const handleMessage = (type, payload) => {
+    switch (type) {
+      case "idCheck.onApplicantSubmitted":
+        onSubmitted?.();
+        break;
+      case "idCheck.onError": {
+        const message = payload?.message ?? "Verification error";
+        onError?.(new Error(message));
+        break;
+      }
+      default:
+        break;
+    }
+  };
+  const handleError = (error) => {
+    onError?.(error instanceof Error ? error : new Error("Verification error"));
+  };
+  if (kycTokenState.type === "IDLE" || kycTokenState.type === "LOADING") {
+    return /* @__PURE__ */ jsx15(
+      "output",
+      {
+        "aria-live": "polite",
+        className: cn(
+          "clcosdk:flex clcosdk:min-h-40 clcosdk:items-center clcosdk:justify-center",
+          className
+        ),
+        children: /* @__PURE__ */ jsx15("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading identity verification..." })
+      }
+    );
+  }
+  if (kycTokenState.type === "ERROR") {
+    const errorMessage = kycTokenState.reason === "not-authenticated" ? "Sign in to verify your identity." : "Unable to start identity verification right now. Please try again.";
+    return /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        className: cn("clcosdk:flex clcosdk:flex-col clcosdk:gap-4", className),
+        children: [
+          /* @__PURE__ */ jsx15(AlertBanner, { variant: "error", icon: true, content: errorMessage }),
+          kycTokenState.reason !== "not-authenticated" && /* @__PURE__ */ jsx15(
+            ClButton,
+            {
+              size: "sm",
+              onClick: () => {
+                fetchToken().catch(() => {
+                });
+              },
+              children: "Try again"
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx15("div", { className: cn("clcosdk:w-full", className), children: /* @__PURE__ */ jsx15(
+    SumsubWebSdk,
+    {
+      accessToken: kycTokenState.token,
+      expirationHandler: fetchToken,
+      config: locale === void 0 ? {} : { lang: locale },
+      options: { addViewportTag: false, adaptIframeHeight: true },
+      onMessage: handleMessage,
+      onError: handleError
+    }
+  ) });
+}
+
+// src/client/components/requirements/RequirementItem.tsx
+import { ChevronRight } from "lucide-react";
+
+// src/client/components/design-system/StepStatusIcon.tsx
+import { CircleCheck as CircleCheck2, CircleX, Info as Info2 } from "lucide-react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var statusConfig = {
+  required: {
+    Icon: Info2,
+    colorClass: "clcosdk:text-warning",
+    fillClass: "clcosdk:[&_circle]:fill-warning-subtle"
+  },
+  pending: {
+    Icon: Info2,
+    colorClass: "clcosdk:text-warning",
+    fillClass: "clcosdk:[&_circle]:fill-warning-subtle"
+  },
+  completed: {
+    Icon: CircleCheck2,
+    colorClass: "clcosdk:text-success",
+    fillClass: "clcosdk:[&_circle]:fill-success-subtle"
+  },
+  rejected: {
+    Icon: CircleX,
+    colorClass: "clcosdk:text-error",
+    fillClass: "clcosdk:[&_circle]:fill-error-subtle"
+  }
+};
+function StepStatusIcon({ status, className }) {
+  const { Icon, colorClass, fillClass } = statusConfig[status];
+  return /* @__PURE__ */ jsx16(
+    Icon,
+    {
+      className: cn(
+        "clcosdk:h-6 clcosdk:w-6 clcosdk:shrink-0",
+        colorClass,
+        fillClass,
+        className
+      ),
+      "aria-hidden": "true"
+    }
+  );
+}
+
+// src/client/components/requirements/RequirementItem.tsx
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
+var RequirementVariant = {
+  fromType(type) {
+    switch (type) {
+      case "external_wallet":
+      case "whitelisted_wallet":
+        return "wallet";
+      default:
+        return "verification";
+    }
+  }
+};
+var RequirementStatus = {
+  fromStatusValue(status) {
+    switch (status) {
+      case "not_started":
+      case "action_needed":
+        return "required";
+      case "in_progress":
+        return "pending";
+      case "completed":
+        return "completed";
+      case "rejected":
+        return "rejected";
     }
   }
 };
@@ -972,13 +1959,18 @@ var ChecklistStatus = {
   }
 };
 var RequirementItemUi = {
-  fromDomain(req, statusInfo, label, description, walletAddress) {
+  fromDomain(req, statusInfo, label, description, addresses = []) {
     return {
       variant: RequirementVariant.fromType(req.type),
       status: statusInfo ? RequirementStatus.fromStatusValue(statusInfo.status) : "required",
       label,
       description,
-      walletAddress
+      multiWallet: req.type === "whitelisted_wallet",
+      connectedWallets: addresses.map((address) => ({
+        id: address.id,
+        address: address.address,
+        shortAddress: shortenAddress(address.address)
+      }))
     };
   }
 };
@@ -990,9 +1982,9 @@ function VerificationActionZone({
   switch (status) {
     case "required":
       if (onAction === null) return null;
-      return /* @__PURE__ */ jsx13(ClButton, { size: "sm", onClick: onAction, children: "Continue" });
+      return /* @__PURE__ */ jsx17(ClButton, { size: "sm", onClick: onAction, children: "Continue" });
     case "pending":
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx17(
         AlertBanner,
         {
           variant: "warning",
@@ -1000,21 +1992,21 @@ function VerificationActionZone({
         }
       );
     case "completed":
-      return /* @__PURE__ */ jsx13(AlertBanner, { variant: "success", content: "Identity verified." });
+      return /* @__PURE__ */ jsx17(AlertBanner, { variant: "success", content: "Identity verified." });
     case "rejected":
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx17(
         AlertBanner,
         {
           variant: "error",
-          content: onContactSupport === null ? "Verification rejected." : /* @__PURE__ */ jsxs9(Fragment2, { children: [
+          content: onContactSupport === null ? "Verification rejected." : /* @__PURE__ */ jsxs13(Fragment3, { children: [
             "Verification rejected.",
             " ",
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx17(
               "button",
               {
                 type: "button",
                 onClick: onContactSupport,
-                className: "underline",
+                className: "clcosdk:underline",
                 children: "Contact support"
               }
             ),
@@ -1026,25 +2018,61 @@ function VerificationActionZone({
 }
 function WalletActionZone({
   status,
-  walletAddress,
-  onAction
+  multiWallet,
+  connectedWallets,
+  walletsStatus,
+  onAction,
+  onRemoveWallet
 }) {
+  if (multiWallet) {
+    return /* @__PURE__ */ jsxs13(Fragment3, { children: [
+      /* @__PURE__ */ jsx17(
+        ConnectedWalletList,
+        {
+          wallets: connectedWallets,
+          onRemove: onRemoveWallet,
+          onAdd: onAction ?? void 0,
+          status: walletsStatus
+        }
+      ),
+      status === "rejected" && /* @__PURE__ */ jsx17(
+        AlertBanner,
+        {
+          variant: "error",
+          content: "One of these wallets is not eligible for this sale."
+        }
+      )
+    ] });
+  }
   if (status === "completed") {
-    return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-      onAction !== null && /* @__PURE__ */ jsx13(ClButton, { size: "sm", variant: "secondary", onClick: onAction, children: "Change wallet" }),
-      /* @__PURE__ */ jsx13(
+    const connected = connectedWallets[0];
+    return /* @__PURE__ */ jsxs13(Fragment3, { children: [
+      onAction !== null && /* @__PURE__ */ jsx17(ClButton, { size: "sm", variant: "secondary", onClick: onAction, children: "Change wallet" }),
+      walletsStatus === "loading" ? /* @__PURE__ */ jsx17(
+        AlertBanner,
+        {
+          variant: "info",
+          content: "Loading your connected wallet\u2026"
+        }
+      ) : walletsStatus === "error" ? /* @__PURE__ */ jsx17(
+        AlertBanner,
+        {
+          variant: "error",
+          content: "Couldn't load your connected wallet."
+        }
+      ) : /* @__PURE__ */ jsx17(
         AlertBanner,
         {
           variant: "success",
-          content: walletAddress ?? "Connected: 0xBa4b...9f2c"
+          content: connected ? connected.shortAddress : "Wallet connected."
         }
       )
     ] });
   }
   if (status === "rejected") {
-    return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-      onAction !== null && /* @__PURE__ */ jsx13(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" }),
-      /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsxs13(Fragment3, { children: [
+      onAction !== null && /* @__PURE__ */ jsx17(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" }),
+      /* @__PURE__ */ jsx17(
         AlertBanner,
         {
           variant: "error",
@@ -1054,7 +2082,7 @@ function WalletActionZone({
     ] });
   }
   if (onAction === null) return null;
-  return /* @__PURE__ */ jsx13(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" });
+  return /* @__PURE__ */ jsx17(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" });
 }
 function RequirementItem({
   ui,
@@ -1062,92 +2090,588 @@ function RequirementItem({
   onToggle,
   className,
   onAction,
+  onRemoveWallet,
+  walletsStatus,
   onContactSupport
 }) {
-  return /* @__PURE__ */ jsxs9("div", { className: cn("flex w-full flex-col", className), children: [
-    /* @__PURE__ */ jsxs9(
-      "button",
+  return /* @__PURE__ */ jsx17(CoinListStyleScope, { children: /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: cn(
+        "clcosdk:flex clcosdk:w-full clcosdk:flex-col",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs13(
+          "button",
+          {
+            type: "button",
+            onClick: onToggle,
+            "aria-expanded": expanded,
+            className: "clcosdk:flex clcosdk:h-14 clcosdk:w-full clcosdk:cursor-pointer clcosdk:items-center clcosdk:justify-between clcosdk:rounded-2xl clcosdk:px-2 clcosdk:transition-colors clcosdk:hover:bg-surface",
+            children: [
+              /* @__PURE__ */ jsxs13("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-3", children: [
+                /* @__PURE__ */ jsx17(StepStatusIcon, { status: ui.status }),
+                /* @__PURE__ */ jsx17(
+                  "span",
+                  {
+                    className: cn(
+                      typeClasses.body,
+                      "clcosdk:whitespace-nowrap clcosdk:font-medium clcosdk:text-text-primary"
+                    ),
+                    children: ui.label
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx17(
+                ChevronRight,
+                {
+                  className: cn(
+                    "clcosdk:h-6 clcosdk:w-6 clcosdk:shrink-0 clcosdk:text-text-secondary clcosdk:transition-transform clcosdk:duration-300",
+                    expanded && "clcosdk:rotate-90"
+                  ),
+                  "aria-hidden": "true"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx17(
+          "div",
+          {
+            className: cn(
+              "clcosdk:grid clcosdk:transition-[grid-template-rows] clcosdk:duration-300 clcosdk:ease-in-out",
+              expanded ? "clcosdk:grid-rows-[1fr]" : "clcosdk:grid-rows-[0fr]"
+            ),
+            children: /* @__PURE__ */ jsx17("div", { className: "clcosdk:min-h-0 clcosdk:overflow-hidden", children: /* @__PURE__ */ jsxs13("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4 clcosdk:px-2 clcosdk:pb-4", children: [
+              /* @__PURE__ */ jsx17(
+                "p",
+                {
+                  className: cn(
+                    typeClasses.subhead,
+                    "clcosdk:text-text-secondary"
+                  ),
+                  children: ui.description
+                }
+              ),
+              ui.variant === "verification" ? /* @__PURE__ */ jsx17(
+                VerificationActionZone,
+                {
+                  status: ui.status,
+                  onAction,
+                  onContactSupport
+                }
+              ) : /* @__PURE__ */ jsx17(
+                WalletActionZone,
+                {
+                  status: ui.status,
+                  multiWallet: ui.multiWallet,
+                  connectedWallets: ui.connectedWallets,
+                  walletsStatus,
+                  onAction,
+                  onRemoveWallet
+                }
+              )
+            ] }) })
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+// src/client/components/requirements/RequirementsChecklist.tsx
+import { useEffect as useEffect11, useRef as useRef4, useState as useState9 } from "react";
+
+// src/client/components/requirements/TaxDocumentModal.tsx
+import { useEffect as useEffect8 } from "react";
+
+// src/client/hooks/useTaxDocument.ts
+import { useCallback as useCallback3, useEffect as useEffect7, useState as useState6 } from "react";
+var IDLE_SIGN2 = { type: "idle", error: null };
+var LOADING_STATE3 = { type: "LOADING" };
+var SIGN_FAILED_MESSAGE = "Unable to sign document. Please try again.";
+var DOB_INVALID_MESSAGE = "Enter your date of birth as MM/DD/YYYY.";
+var FIELD_KEYS = {
+  fullLegalName: "Full Name",
+  dob: "DOB",
+  countryOfCitizenship: "Country Of Citizenship",
+  taxId: "Foreign Tax Number",
+  permanentAddress: "Permanent Address"
+};
+function formatUsDate(date) {
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const year = String(date.getFullYear()).padStart(4, "0");
+  return `${month}/${day}/${year}`;
+}
+function formatIsoDateOnly(isoDate) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(isoDate);
+  if (!match) return "";
+  const [, year, month, day] = match;
+  return `${month}/${day}/${year}`;
+}
+function isValidUsDate(value) {
+  const match = /^(\d{2})\/(\d{2})\/(\d{4})$/.exec(value);
+  if (!match) return false;
+  const [, mm, dd, yyyy] = match;
+  const month = Number(mm);
+  const day = Number(dd);
+  const year = Number(yyyy);
+  const date = new Date(year, month - 1, day);
+  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
+}
+function mapPiiToFields(pii) {
+  const { street, city, state, postalCode } = pii.permanentAddress;
+  const cityLine = [postalCode, city].filter(Boolean).join(" ");
+  const permanentAddress = [street, cityLine, state].filter(Boolean).join(", ");
+  return {
+    fullLegalName: pii.fullLegalName ?? "",
+    // Date-only ISO from the backend, shown as MM/DD/YYYY. Blank until the
+    // backend has a date of birth (the field is editable in the meantime).
+    dob: formatIsoDateOnly(pii.dateOfBirth ?? ""),
+    countryOfCitizenship: pii.jurisdiction?.name ?? "",
+    taxId: pii.taxId ?? "",
+    permanentAddress
+  };
+}
+function addressPartsFromPii(pii) {
+  return {
+    city: pii.permanentAddress.city ?? "",
+    country: pii.permanentAddress.country ?? ""
+  };
+}
+function hasAnyFieldValue(fields) {
+  return Object.values(fields).some((value) => value.trim() !== "");
+}
+function toSubmissionFields(fields, addressParts) {
+  return {
+    [FIELD_KEYS.fullLegalName]: fields.fullLegalName,
+    [FIELD_KEYS.dob]: fields.dob,
+    [FIELD_KEYS.countryOfCitizenship]: fields.countryOfCitizenship,
+    [FIELD_KEYS.taxId]: fields.taxId,
+    [FIELD_KEYS.permanentAddress]: fields.permanentAddress,
+    City: addressParts.city,
+    Country: addressParts.country,
+    Signature: fields.fullLegalName,
+    Date: formatUsDate(/* @__PURE__ */ new Date())
+  };
+}
+function useTaxDocument({
+  isOpen
+}) {
+  const { coinlist, isReady } = useCoinList();
+  const [state, setState] = useState6(LOADING_STATE3);
+  useEffect7(() => {
+    let isCancelled = false;
+    if (!isOpen) {
+      return () => {
+        isCancelled = true;
+      };
+    }
+    if (!isReady) {
+      setState(LOADING_STATE3);
+      return () => {
+        isCancelled = true;
+      };
+    }
+    setState(LOADING_STATE3);
+    coinlist.fetchPii().then((pii) => {
+      if (isCancelled) return;
+      if (pii.kind === "company") {
+        setState({ type: "SIGN_ONLY", sign: IDLE_SIGN2 });
+        return;
+      }
+      const fields = mapPiiToFields(pii);
+      setState({
+        type: "REVIEW",
+        fields,
+        addressParts: addressPartsFromPii(pii),
+        piiUnavailable: !hasAnyFieldValue(fields),
+        sign: IDLE_SIGN2
+      });
+    }).catch((error) => {
+      if (isCancelled) return;
+      setState({
+        type: "ERROR",
+        reason: error instanceof NotAuthenticatedError ? "not-authenticated" : "generic-error"
+      });
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, [coinlist, isReady, isOpen]);
+  const onEditField = useCallback3(
+    (field, value) => {
+      setState(
+        (prev) => prev.type === "EDITING" ? { ...prev, fields: { ...prev.fields, [field]: value } } : prev
+      );
+    },
+    []
+  );
+  const onStartEdit = useCallback3(() => {
+    setState(
+      (prev) => prev.type === "REVIEW" ? {
+        type: "EDITING",
+        fields: prev.fields,
+        original: prev.fields,
+        addressParts: prev.addressParts,
+        piiUnavailable: prev.piiUnavailable
+      } : prev
+    );
+  }, []);
+  const onSaveEdit = useCallback3(() => {
+    setState(
+      (prev) => prev.type === "EDITING" ? {
+        type: "REVIEW",
+        fields: prev.fields,
+        addressParts: prev.addressParts,
+        piiUnavailable: prev.piiUnavailable,
+        sign: IDLE_SIGN2
+      } : prev
+    );
+  }, []);
+  const onCancelEdit = useCallback3(() => {
+    setState(
+      (prev) => prev.type === "EDITING" ? {
+        type: "REVIEW",
+        fields: prev.original,
+        addressParts: prev.addressParts,
+        piiUnavailable: prev.piiUnavailable,
+        sign: IDLE_SIGN2
+      } : prev
+    );
+  }, []);
+  const onSign = useCallback3(() => {
+    if (state.type !== "REVIEW" && state.type !== "SIGN_ONLY") return;
+    if (state.type === "REVIEW" && state.fields.dob.trim() !== "" && !isValidUsDate(state.fields.dob)) {
+      setState({
+        ...state,
+        sign: { type: "idle", error: DOB_INVALID_MESSAGE }
+      });
+      return;
+    }
+    setState({ ...state, sign: { type: "signing" } });
+    coinlist.submitDocument(
+      "tax_certification",
+      state.type === "REVIEW" ? toSubmissionFields(state.fields, state.addressParts) : {}
+    ).then((submission) => {
+      setState({ type: "SUBMITTED", submission });
+    }).catch(() => {
+      setState(
+        (prev) => prev.type === "REVIEW" || prev.type === "SIGN_ONLY" ? { ...prev, sign: { type: "idle", error: SIGN_FAILED_MESSAGE } } : prev
+      );
+    });
+  }, [state, coinlist]);
+  return { state, onEditField, onStartEdit, onSaveEdit, onCancelEdit, onSign };
+}
+
+// src/client/components/requirements/TaxDocumentModal.tsx
+import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var FIELD_ROWS = [
+  { field: "fullLegalName", label: "Full legal name" },
+  { field: "dob", label: "Date of birth", placeholder: "MM/DD/YYYY" },
+  { field: "countryOfCitizenship", label: "Country of citizenship" },
+  { field: "taxId", label: "Tax ID" },
+  { field: "permanentAddress", label: "Permanent address" }
+];
+function TaxDocumentModal({
+  isOpen,
+  onClose,
+  onSubmitted,
+  className
+}) {
+  const { state, onEditField, onStartEdit, onSaveEdit, onCancelEdit, onSign } = useTaxDocument({ isOpen });
+  useEffect8(() => {
+    if (state.type === "SUBMITTED") {
+      onSubmitted?.(state.submission);
+      onClose();
+    }
+  }, [state]);
+  if (!isOpen || state.type === "SUBMITTED") return null;
+  return /* @__PURE__ */ jsx18("div", { className: "clcosdk:fixed clcosdk:inset-0 clcosdk:z-50 clcosdk:flex clcosdk:items-center clcosdk:justify-center clcosdk:bg-black/50 clcosdk:p-4", children: /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: cn(
+        "clcosdk:flex clcosdk:w-full clcosdk:max-w-md clcosdk:flex-col clcosdk:gap-6 clcosdk:rounded-2xl clcosdk:bg-background clcosdk:p-6",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs14("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
+          /* @__PURE__ */ jsx18(TaxDocumentModalHeading, { state }),
+          /* @__PURE__ */ jsx18(CloseButton, { onClick: onClose })
+        ] }),
+        state.type === "LOADING" && /* @__PURE__ */ jsx18(LoadingScreen, {}),
+        state.type === "ERROR" && /* @__PURE__ */ jsx18(ErrorScreen, { reason: state.reason }),
+        state.type === "REVIEW" && /* @__PURE__ */ jsx18(
+          ReviewScreen,
+          {
+            fields: state.fields,
+            piiUnavailable: state.piiUnavailable,
+            sign: state.sign,
+            onStartEdit,
+            onSign
+          }
+        ),
+        state.type === "EDITING" && /* @__PURE__ */ jsx18(
+          EditScreen,
+          {
+            fields: state.fields,
+            onEditField,
+            onSaveEdit,
+            onCancelEdit
+          }
+        ),
+        state.type === "SIGN_ONLY" && /* @__PURE__ */ jsx18(SignOnlyScreen, { sign: state.sign, onSign })
+      ]
+    }
+  ) });
+}
+function TaxDocumentModalHeading({
+  state
+}) {
+  const title = state.type === "EDITING" ? "Edit your W-8BEN" : state.type === "REVIEW" ? "Confirm your W-8BEN" : state.type === "SIGN_ONLY" ? "Confirm your W-8BEN-E" : "Tax document";
+  return /* @__PURE__ */ jsx18("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: title });
+}
+function LoadingScreen() {
+  return /* @__PURE__ */ jsx18(
+    "output",
+    {
+      "aria-live": "polite",
+      className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4",
+      children: FIELD_ROWS.map(({ field }) => /* @__PURE__ */ jsxs14(
+        "div",
+        {
+          className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1",
+          children: [
+            /* @__PURE__ */ jsx18("div", { className: "clcosdk:h-3 clcosdk:w-28 clcosdk:animate-pulse clcosdk:rounded clcosdk:bg-surface" }),
+            /* @__PURE__ */ jsx18("div", { className: "clcosdk:h-5 clcosdk:w-48 clcosdk:animate-pulse clcosdk:rounded clcosdk:bg-surface" })
+          ]
+        },
+        field
+      ))
+    }
+  );
+}
+function ErrorScreen({
+  reason
+}) {
+  return /* @__PURE__ */ jsx18(
+    AlertBanner,
+    {
+      variant: "error",
+      icon: true,
+      content: reason === "not-authenticated" ? "Sign in to complete your tax document." : "Unable to load your tax information right now. Please try again."
+    }
+  );
+}
+function ReviewScreen({
+  fields,
+  piiUnavailable,
+  sign,
+  onStartEdit,
+  onSign
+}) {
+  return /* @__PURE__ */ jsxs14("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+    /* @__PURE__ */ jsx18("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Review your information below. If anything looks incorrect, edit before signing." }),
+    piiUnavailable && /* @__PURE__ */ jsx18(
+      AlertBanner,
       {
-        type: "button",
-        onClick: onToggle,
-        "aria-expanded": expanded,
-        className: "flex h-14 w-full cursor-pointer items-center justify-between rounded-2xl px-2 transition-colors hover:bg-surface",
+        variant: "info",
+        icon: true,
+        content: "We don't have this information on file yet \u2014 please fill it in below."
+      }
+    ),
+    /* @__PURE__ */ jsx18("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: FIELD_ROWS.map(({ field, label }) => /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1",
         children: [
-          /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx13(StepStatusIcon, { status: ui.status }),
-            /* @__PURE__ */ jsx13(
-              "span",
-              {
-                className: cn(
-                  typeClasses.body,
-                  "whitespace-nowrap font-medium text-text-primary"
-                ),
-                children: ui.label
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx13(
-            ChevronRight,
+          /* @__PURE__ */ jsx18(
+            "span",
             {
-              className: cn(
-                "h-6 w-6 shrink-0 text-text-secondary transition-transform duration-300",
-                expanded && "rotate-90"
-              ),
-              "aria-hidden": "true"
+              className: cn(typeClasses.label, "clcosdk:text-text-secondary"),
+              children: label
             }
-          )
+          ),
+          /* @__PURE__ */ jsx18("span", { className: cn(typeClasses.body, "clcosdk:text-text-primary"), children: fields[field] || "\u2014" })
         ]
-      }
-    ),
-    /* @__PURE__ */ jsx13(
-      "div",
+      },
+      field
+    )) }),
+    /* @__PURE__ */ jsx18("p", { className: cn(typeClasses.caption, "clcosdk:text-text-secondary"), children: "By signing, you certify that the information above is accurate and that you are the beneficial owner of the income this form relates to. This document cannot be edited once signed." }),
+    sign.type === "idle" && sign.error && /* @__PURE__ */ jsx18(AlertBanner, { variant: "error", icon: true, content: sign.error }),
+    /* @__PURE__ */ jsxs14("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+      /* @__PURE__ */ jsx18(
+        ClButton,
+        {
+          fullWidth: true,
+          onClick: onSign,
+          isLoading: sign.type === "signing",
+          loadingText: "Signing...",
+          children: "Sign W-8BEN"
+        }
+      ),
+      /* @__PURE__ */ jsx18(
+        ClButton,
+        {
+          fullWidth: true,
+          variant: "secondary",
+          onClick: onStartEdit,
+          disabled: sign.type === "signing",
+          children: "Edit information"
+        }
+      )
+    ] })
+  ] });
+}
+function EditScreen({
+  fields,
+  onEditField,
+  onSaveEdit,
+  onCancelEdit
+}) {
+  return /* @__PURE__ */ jsxs14("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+    /* @__PURE__ */ jsx18("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: FIELD_ROWS.map(({ field, label, placeholder }) => /* @__PURE__ */ jsxs14(
+      "label",
       {
-        className: cn(
-          "grid transition-[grid-template-rows] duration-300 ease-in-out",
-          expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
-        ),
-        children: /* @__PURE__ */ jsx13("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-4 px-2 pb-4", children: [
-          /* @__PURE__ */ jsx13("p", { className: cn(typeClasses.subhead, "text-text-secondary"), children: ui.description }),
-          ui.variant === "verification" ? /* @__PURE__ */ jsx13(
-            VerificationActionZone,
+        className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1",
+        children: [
+          /* @__PURE__ */ jsx18(
+            "span",
             {
-              status: ui.status,
-              onAction,
-              onContactSupport
+              className: cn(typeClasses.label, "clcosdk:text-text-secondary"),
+              children: label
             }
-          ) : /* @__PURE__ */ jsx13(
-            WalletActionZone,
+          ),
+          /* @__PURE__ */ jsx18(
+            "input",
             {
-              status: ui.status,
-              walletAddress: ui.walletAddress,
-              onAction
+              type: "text",
+              value: fields[field],
+              placeholder,
+              onChange: (e) => onEditField(field, e.target.value),
+              className: cn(
+                typeClasses.body,
+                "clcosdk:rounded-lg clcosdk:border clcosdk:border-border clcosdk:bg-background clcosdk:px-3 clcosdk:py-2 clcosdk:text-text-primary clcosdk:focus-visible:outline-none clcosdk:focus-visible:ring-2 clcosdk:focus-visible:ring-gray-400"
+              )
             }
           )
-        ] }) })
+        ]
+      },
+      field
+    )) }),
+    /* @__PURE__ */ jsxs14("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+      /* @__PURE__ */ jsx18(ClButton, { fullWidth: true, onClick: onSaveEdit, children: "Save & review" }),
+      /* @__PURE__ */ jsx18(ClButton, { fullWidth: true, variant: "secondary", onClick: onCancelEdit, children: "Cancel" })
+    ] })
+  ] });
+}
+function SignOnlyScreen({
+  sign,
+  onSign
+}) {
+  return /* @__PURE__ */ jsxs14("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+    /* @__PURE__ */ jsx18("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "As an entity investor, you must complete a W-8BEN-E to confirm your foreign tax status and claim applicable treaty benefits. You'll receive an email to complete the signing." }),
+    sign.type === "idle" && sign.error && /* @__PURE__ */ jsx18(AlertBanner, { variant: "error", icon: true, content: sign.error }),
+    /* @__PURE__ */ jsx18(
+      ClButton,
+      {
+        fullWidth: true,
+        onClick: onSign,
+        isLoading: sign.type === "signing",
+        loadingText: "Signing...",
+        children: "Sign W-8BEN-E"
       }
     )
   ] });
 }
 
-// src/client/components/requirements/RequirementsChecklist.tsx
-import { useState as useState4 } from "react";
+// src/client/hooks/useOptionAddresses.ts
+import { useCallback as useCallback4, useEffect as useEffect9, useState as useState7 } from "react";
+var LOADING_STATE4 = { type: "LOADING" };
+var EMPTY_STATE = {
+  type: "CONTENT",
+  addresses: []
+};
+function useOptionAddresses(offerId, offerOptionId, options = {}) {
+  const { coinlist, isReady } = useCoinList();
+  const { data, enabled = true } = options;
+  const [addressesState, setAddressesState] = useState7(
+    data !== void 0 ? { type: "CONTENT", addresses: data } : LOADING_STATE4
+  );
+  const [fetchKey, setFetchKey] = useState7(0);
+  const refetch = useCallback4(() => setFetchKey((k) => k + 1), []);
+  const disconnect = useCallback4(
+    async (addressId) => {
+      await coinlist.removeOptionAddress(offerId, addressId);
+      refetch();
+    },
+    [coinlist, offerId, refetch]
+  );
+  useEffect9(() => {
+    let isCancelled = false;
+    if (!enabled) {
+      setAddressesState(
+        data !== void 0 ? { type: "CONTENT", addresses: data } : EMPTY_STATE
+      );
+      return () => {
+        isCancelled = true;
+      };
+    }
+    if (!isReady) {
+      if (data === void 0) {
+        setAddressesState(LOADING_STATE4);
+      }
+      return () => {
+        isCancelled = true;
+      };
+    }
+    if (data !== void 0 && fetchKey === 0) {
+      return () => {
+        isCancelled = true;
+      };
+    }
+    if (coinlist.getAuthState() === "logged-out") {
+      setAddressesState({ type: "ERROR", reason: "not-authenticated" });
+      return () => {
+        isCancelled = true;
+      };
+    }
+    setAddressesState(LOADING_STATE4);
+    coinlist.listOptionAddresses(offerId, offerOptionId).then((addresses) => {
+      if (!isCancelled) {
+        setAddressesState({ type: "CONTENT", addresses });
+      }
+    }).catch((error) => {
+      if (!isCancelled) {
+        const reason = error instanceof NotAuthenticatedError ? "not-authenticated" : "generic-error";
+        setAddressesState({ type: "ERROR", reason });
+      }
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, [coinlist, isReady, enabled, offerId, offerOptionId, fetchKey]);
+  return { addressesState, refetch, disconnect };
+}
 
 // src/client/hooks/useRequirements.ts
-import { useCallback, useEffect as useEffect3, useState as useState3 } from "react";
-var LOADING_STATE2 = { type: "LOADING" };
+import { useCallback as useCallback5, useEffect as useEffect10, useState as useState8 } from "react";
+var LOADING_STATE5 = { type: "LOADING" };
 function useRequirements(offerId, options = {}) {
   const { coinlist, isReady } = useCoinList();
   const { data } = options;
-  const [requirementsState, setRequirementsState] = useState3(
-    data !== void 0 ? { type: "CONTENT", ...data } : LOADING_STATE2
+  const [requirementsState, setRequirementsState] = useState8(
+    data !== void 0 ? { type: "CONTENT", ...data } : LOADING_STATE5
   );
-  const [fetchKey, setFetchKey] = useState3(0);
-  const refetch = useCallback(() => setFetchKey((k) => k + 1), []);
-  useEffect3(() => {
+  const [fetchKey, setFetchKey] = useState8(0);
+  const refetch = useCallback5(() => setFetchKey((k) => k + 1), []);
+  useEffect10(() => {
     let isCancelled = false;
     if (!isReady) {
       if (data === void 0) {
-        setRequirementsState(LOADING_STATE2);
+        setRequirementsState(LOADING_STATE5);
       }
       return () => {
         isCancelled = true;
@@ -1158,7 +2682,13 @@ function useRequirements(offerId, options = {}) {
         isCancelled = true;
       };
     }
-    setRequirementsState(LOADING_STATE2);
+    if (coinlist.getAuthState() === "logged-out") {
+      setRequirementsState({ type: "ERROR", reason: "not-authenticated" });
+      return () => {
+        isCancelled = true;
+      };
+    }
+    setRequirementsState(LOADING_STATE5);
     Promise.all([
       coinlist.fetchOfferRequirements(offerId),
       coinlist.fetchRequirementStatuses(offerId)
@@ -1184,7 +2714,8 @@ function useRequirements(offerId, options = {}) {
 }
 
 // src/client/components/requirements/RequirementsChecklist.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
+var isWalletRequirement = (requirement) => RequirementVariant.fromType(requirement.type) === "wallet";
 var DEFAULT_LABELS = {
   kyc_approved: "KYC Verification",
   identity_verified: "Identity Verification",
@@ -1193,7 +2724,8 @@ var DEFAULT_LABELS = {
   external_wallet: "External Wallet",
   whitelisted_wallet: "Whitelisted Wallet",
   jurisdiction: "Jurisdiction Check",
-  accreditation: "Accreditation"
+  accreditation: "Accreditation",
+  document: "Document"
 };
 var DEFAULT_DESCRIPTIONS = {
   kyc_approved: "Complete Know Your Customer verification.",
@@ -1203,9 +2735,39 @@ var DEFAULT_DESCRIPTIONS = {
   external_wallet: "Connect an external wallet.",
   whitelisted_wallet: "Connect a whitelisted wallet.",
   jurisdiction: "Confirm your jurisdiction eligibility.",
-  accreditation: "Verify your accreditation status."
+  accreditation: "Verify your accreditation status.",
+  document: "Confirm your Tax Documents."
 };
-function RequirementsChecklist({
+var VERIFICATION_POLL_INTERVAL_MS = 5e3;
+var VERIFICATION_POLL_TIMEOUT_MS = 12e4;
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function VerificationOverlay({
+  onClose,
+  children
+}) {
+  return /* @__PURE__ */ jsx19(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Identity verification",
+      className: "clcosdk:fixed clcosdk:inset-0 clcosdk:z-50 clcosdk:flex clcosdk:items-center clcosdk:justify-center clcosdk:bg-overlay clcosdk:p-4",
+      children: /* @__PURE__ */ jsxs15("div", { className: "clcosdk:relative clcosdk:flex clcosdk:max-h-[92vh] clcosdk:w-full clcosdk:max-w-[760px] clcosdk:flex-col clcosdk:overflow-y-auto clcosdk:rounded-2xl clcosdk:bg-background clcosdk:p-6 clcosdk:pt-14", children: [
+        /* @__PURE__ */ jsx19(
+          CloseButton,
+          {
+            onClick: onClose,
+            className: "clcosdk:absolute clcosdk:top-4 clcosdk:right-4"
+          }
+        ),
+        children
+      ] })
+    }
+  );
+}
+function RequirementsChecklistBody({
   offerId,
   optionId,
   title,
@@ -1213,39 +2775,107 @@ function RequirementsChecklist({
   onContinue,
   onRequirementActionOverride,
   onContactSupportOverride,
+  wallet,
+  onRequestConnect,
   getLabel,
   getDescription,
   loading,
+  unauthenticatedState,
   error,
   className,
-  data
+  data,
+  identityVerificationOptions
 }) {
   const { coinlist } = useCoinList();
-  const { requirementsState } = useRequirements(offerId, { data });
-  const [expandedIndex, setExpandedIndex] = useState4(null);
-  const onRequirementAction = onRequirementActionOverride !== void 0 ? onRequirementActionOverride : (requirement) => coinlist.handleRequirement(requirement);
+  const { requirementsState, refetch } = useRequirements(offerId, { data });
+  const [expandedIndex, setExpandedIndex] = useState9(null);
+  const [taxDocumentOpen, setTaxDocumentOpen] = useState9(false);
+  const [walletConnectOpen, setConnectWalletOpen] = useState9(false);
+  const [verifyingRequirementId, setVerifyingRequirementId] = useState9(null);
+  const isMountedRef = useRef4(true);
+  useEffect11(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  const [hasWalletRequirement, setHasWalletRequirement] = useState9(false);
+  useEffect11(() => {
+    if (requirementsState.type === "CONTENT") {
+      setHasWalletRequirement(
+        (requirementsState.requirements[optionId] ?? []).some(
+          isWalletRequirement
+        )
+      );
+    }
+  }, [requirementsState, optionId]);
+  const {
+    addressesState,
+    refetch: refetchAddresses,
+    disconnect
+  } = useOptionAddresses(offerId, optionId, {
+    enabled: hasWalletRequirement
+  });
+  const optionAddresses = addressesState.type === "CONTENT" ? addressesState.addresses : [];
+  const walletsStatus = addressesState.type === "ERROR" ? "error" : addressesState.type === "LOADING" ? "loading" : "ready";
+  const onRemoveWallet = async (id) => {
+    await disconnect(OfferOptionAddressId(id));
+    refetch();
+  };
+  const onRequirementAction = onRequirementActionOverride !== void 0 ? onRequirementActionOverride : (requirement) => {
+    if (requirement.type === "document") {
+      setTaxDocumentOpen(true);
+      return;
+    }
+    if ((requirement.type === "external_wallet" || requirement.type === "whitelisted_wallet") && wallet !== void 0 && (wallet !== null || onRequestConnect !== void 0)) {
+      setConnectWalletOpen(true);
+      return;
+    }
+    coinlist.handleRequirement(requirement);
+  };
   const onContactSupport = onContactSupportOverride !== void 0 ? onContactSupportOverride : () => coinlist.contactSupport();
+  const awaitVerificationResult = (requirementId, statusBeforeSubmit) => {
+    void (async () => {
+      const deadline = Date.now() + VERIFICATION_POLL_TIMEOUT_MS;
+      while (Date.now() < deadline) {
+        await sleep(VERIFICATION_POLL_INTERVAL_MS);
+        if (!isMountedRef.current) return;
+        try {
+          const statuses2 = await coinlist.fetchRequirementStatuses(offerId);
+          const current = statuses2.find((s) => s.id === requirementId)?.status;
+          if (current !== void 0 && current !== statusBeforeSubmit) break;
+        } catch (_) {
+        }
+      }
+      if (isMountedRef.current) {
+        setVerifyingRequirementId(null);
+        refetch();
+      }
+    })();
+  };
   if (requirementsState.type === "LOADING") {
     if (loading) return loading;
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx19(
       "output",
       {
         "aria-live": "polite",
-        className: "flex min-h-40 items-center justify-center rounded-2xl border border-border bg-background p-6",
-        children: /* @__PURE__ */ jsx14("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "Loading requirements..." })
+        className: "clcosdk:flex clcosdk:min-h-40 clcosdk:items-center clcosdk:justify-center clcosdk:rounded-2xl clcosdk:border clcosdk:border-border clcosdk:bg-background clcosdk:p-6",
+        children: /* @__PURE__ */ jsx19("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading requirements..." })
       }
     );
   }
   if (requirementsState.type === "ERROR") {
+    if (requirementsState.reason === "not-authenticated") {
+      return unauthenticatedState !== void 0 ? unauthenticatedState : /* @__PURE__ */ jsx19(CoinListSignInCard, {});
+    }
     if (error) return error;
-    const errorMessage = requirementsState.reason === "not-authenticated" ? "Sign in to view requirements." : "Unable to load requirements right now. Please try again.";
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx19(
       AlertBanner,
       {
         variant: "error",
         icon: true,
-        content: errorMessage,
-        className: "w-full max-w-[28rem]"
+        content: "Unable to load requirements right now. Please try again.",
+        className: "clcosdk:w-full clcosdk:max-w-[28rem]"
       }
     );
   }
@@ -1255,76 +2885,310 @@ function RequirementsChecklist({
   const optionStatuses = statuses.filter((s) => requirementIds.has(s.id));
   const statusByRequirementId = new Map(optionStatuses.map((s) => [s.id, s]));
   const checklistStatus = ChecklistStatus.derive(optionStatuses);
-  return /* @__PURE__ */ jsxs10("div", { className: cn("flex w-full flex-col gap-4", className), children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ jsx14("h3", { className: cn(typeClasses.h3, "text-text-primary"), children: title }),
-      /* @__PURE__ */ jsx14("p", { className: cn(typeClasses.body, "text-text-secondary"), children: description })
-    ] }),
-    /* @__PURE__ */ jsx14("div", { className: "flex flex-col divide-y divide-divider", children: requirements.map((req, index) => {
-      const statusInfo = statusByRequirementId.get(req.id);
-      const label = getLabel ? getLabel(req) : DEFAULT_LABELS[req.type];
-      const itemDescription = (getDescription ? getDescription(req) : null) ?? DEFAULT_DESCRIPTIONS[req.type];
-      let onActionBound;
-      if (onRequirementAction === null) {
-        onActionBound = null;
-      } else if (onRequirementAction) {
-        onActionBound = () => onRequirementAction(req);
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      className: cn(
+        "clcosdk:flex clcosdk:w-full clcosdk:flex-col clcosdk:gap-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs15("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+          /* @__PURE__ */ jsx19("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: title }),
+          /* @__PURE__ */ jsx19("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: description })
+        ] }),
+        /* @__PURE__ */ jsx19("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:divide-y clcosdk:divide-divider", children: requirements.map((req, index) => {
+          const statusInfo = statusByRequirementId.get(req.id);
+          const label = getLabel ? getLabel(req) : DEFAULT_LABELS[req.type];
+          const itemDescription = (getDescription ? getDescription(req) : null) ?? DEFAULT_DESCRIPTIONS[req.type];
+          const inlineVerification = statusInfo?.kycLevel !== void 0 && onRequirementActionOverride === void 0;
+          let onActionBound;
+          if (onRequirementAction === null) {
+            onActionBound = null;
+          } else if (inlineVerification) {
+            onActionBound = () => setVerifyingRequirementId(req.id);
+          } else if (onRequirementAction) {
+            onActionBound = () => onRequirementAction(req);
+          }
+          let onContactSupportBound;
+          if (onContactSupport === null) {
+            onContactSupportBound = null;
+          } else if (onContactSupport) {
+            onContactSupportBound = () => onContactSupport(req);
+          }
+          const walletRequirement = isWalletRequirement(req);
+          return /* @__PURE__ */ jsx19(
+            RequirementItem,
+            {
+              ui: RequirementItemUi.fromDomain(
+                req,
+                statusInfo,
+                label,
+                itemDescription,
+                walletRequirement ? optionAddresses : []
+              ),
+              expanded: expandedIndex === index,
+              onToggle: () => setExpandedIndex((prev) => prev === index ? null : index),
+              onAction: onActionBound,
+              onRemoveWallet: walletRequirement ? onRemoveWallet : void 0,
+              walletsStatus: walletRequirement ? walletsStatus : void 0,
+              onContactSupport: onContactSupportBound
+            },
+            req.id
+          );
+        }) }),
+        checklistStatus === "ineligible" && /* @__PURE__ */ jsx19(
+          AlertBanner,
+          {
+            variant: "error",
+            icon: true,
+            content: "You are not eligible to participate."
+          }
+        ),
+        onContinue && /* @__PURE__ */ jsx19(
+          ClButton,
+          {
+            fullWidth: true,
+            disabled: checklistStatus !== "eligible",
+            onClick: onContinue,
+            children: "Continue"
+          }
+        ),
+        /* @__PURE__ */ jsx19(
+          TaxDocumentModal,
+          {
+            isOpen: taxDocumentOpen,
+            onClose: () => setTaxDocumentOpen(false),
+            onSubmitted: () => refetch()
+          }
+        ),
+        verifyingRequirementId !== null && /* @__PURE__ */ jsx19(VerificationOverlay, { onClose: () => setVerifyingRequirementId(null), children: /* @__PURE__ */ jsx19(
+          IdentityVerification,
+          {
+            levelName: identityVerificationOptions?.levelName ?? statusByRequirementId.get(verifyingRequirementId)?.kycLevel,
+            reset: statusByRequirementId.get(verifyingRequirementId)?.kycReset ?? false,
+            locale: identityVerificationOptions?.locale,
+            onSubmitted: () => awaitVerificationResult(
+              verifyingRequirementId,
+              statusByRequirementId.get(verifyingRequirementId)?.status ?? "not_started"
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx19(
+          ConnectWalletModal,
+          {
+            isOpen: walletConnectOpen,
+            onClose: () => setConnectWalletOpen(false),
+            offerId,
+            optionId,
+            wallet: wallet ?? null,
+            onRequestConnect,
+            onConnected: () => {
+              refetch();
+              refetchAddresses();
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function RequirementsChecklist(props) {
+  return /* @__PURE__ */ jsx19(CoinListStyleScope, { children: /* @__PURE__ */ jsx19(RequirementsChecklistBody, { ...props }) });
+}
+
+// src/client/hooks/swap/useSwapOutputToken.ts
+import { useEffect as useEffect12, useRef as useRef5, useState as useState10 } from "react";
+var LOADING_STATE6 = { type: "LOADING" };
+function useSwapOutputToken(options) {
+  const { contractAddress, chain, enabled } = options;
+  const { coinlist, isReady } = useCoinList();
+  const [outputTokenState, setOutputTokenState] = useState10(LOADING_STATE6);
+  const fetchIdRef = useRef5(0);
+  useEffect12(() => {
+    if (!enabled || !isReady) return;
+    const currentFetchId = ++fetchIdRef.current;
+    const load = async () => {
+      try {
+        const outputToken = await coinlist.swap.getOutputToken({
+          contractAddress,
+          chain
+        });
+        if (currentFetchId !== fetchIdRef.current) return;
+        setOutputTokenState({ type: "CONTENT", outputToken });
+      } catch {
+        if (currentFetchId !== fetchIdRef.current) return;
+        setOutputTokenState({ type: "ERROR" });
       }
-      let onContactSupportBound;
-      if (onContactSupport === null) {
-        onContactSupportBound = null;
-      } else if (onContactSupport) {
-        onContactSupportBound = () => onContactSupport(req);
+    };
+    load();
+    return () => {
+      ++fetchIdRef.current;
+    };
+  }, [coinlist, isReady, contractAddress, chain, enabled]);
+  return { outputTokenState };
+}
+
+// src/client/hooks/swap/useSwapQuote.ts
+import { useEffect as useEffect13, useRef as useRef6, useState as useState11 } from "react";
+function useSwapQuote(options) {
+  const {
+    contractAddress,
+    chain,
+    inputAmount,
+    inputTokenAddress,
+    outputTokenDecimals,
+    pollIntervalMs = SWAP_POLL_INTERVAL_MS,
+    enabled
+  } = options;
+  const { coinlist, isReady } = useCoinList();
+  const [quote, setQuote] = useState11(null);
+  const [isLoading, setIsLoading] = useState11(true);
+  const [isRefreshing, setIsRefreshing] = useState11(false);
+  const isFetchingRef = useRef6(false);
+  const hasQuoteRef = useRef6(false);
+  const fetchIdRef = useRef6(0);
+  useEffect13(() => {
+    if (!isReady) return;
+    if (!enabled) {
+      setIsLoading(false);
+      return;
+    }
+    const currentFetchId = ++fetchIdRef.current;
+    isFetchingRef.current = false;
+    const loadQuote = async () => {
+      if (outputTokenDecimals === null) return;
+      if (isFetchingRef.current) return;
+      isFetchingRef.current = true;
+      if (hasQuoteRef.current) {
+        setIsRefreshing(true);
       }
-      return /* @__PURE__ */ jsx14(
-        RequirementItem,
-        {
-          ui: RequirementItemUi.fromDomain(
-            req,
-            statusInfo,
-            label,
-            itemDescription
-          ),
-          expanded: expandedIndex === index,
-          onToggle: () => setExpandedIndex((prev) => prev === index ? null : index),
-          onAction: onActionBound,
-          onContactSupport: onContactSupportBound
-        },
-        req.id
-      );
-    }) }),
-    checklistStatus === "ineligible" && /* @__PURE__ */ jsx14(
-      AlertBanner,
-      {
-        variant: "error",
-        icon: true,
-        content: "You are not eligible to participate."
+      try {
+        const preview = await coinlist.swap.getPreview({
+          contractAddress,
+          chain,
+          inputToken: inputTokenAddress,
+          amount: inputAmount.raw
+        });
+        if (currentFetchId !== fetchIdRef.current) return;
+        setQuote(
+          SwapQuote.fromPreview(
+            preview,
+            inputAmount.decimals,
+            outputTokenDecimals
+          )
+        );
+        if (!hasQuoteRef.current) {
+          hasQuoteRef.current = true;
+          setIsLoading(false);
+        }
+      } catch {
+      } finally {
+        if (currentFetchId === fetchIdRef.current) {
+          isFetchingRef.current = false;
+          setIsRefreshing(false);
+        }
       }
-    ),
-    onContinue && /* @__PURE__ */ jsx14(
-      ClButton,
-      {
-        fullWidth: true,
-        disabled: checklistStatus !== "eligible",
-        onClick: onContinue,
-        children: "Continue"
+    };
+    loadQuote();
+    const interval = setInterval(loadQuote, pollIntervalMs);
+    return () => {
+      clearInterval(interval);
+      ++fetchIdRef.current;
+      setIsRefreshing(false);
+    };
+  }, [
+    coinlist,
+    isReady,
+    contractAddress,
+    chain,
+    inputAmount.raw,
+    inputAmount.decimals,
+    inputTokenAddress,
+    outputTokenDecimals,
+    pollIntervalMs,
+    enabled
+  ]);
+  return { quote, isLoading, isRefreshing };
+}
+
+// src/client/hooks/swap/useSwapTokenBalances.ts
+import { useEffect as useEffect14, useRef as useRef7, useState as useState12 } from "react";
+function useSwapTokenBalances(options) {
+  const {
+    address,
+    chain,
+    assets,
+    pollIntervalMs = SWAP_POLL_INTERVAL_MS,
+    enabled
+  } = options;
+  const { coinlist, isReady } = useCoinList();
+  const [balances, setBalances] = useState12(/* @__PURE__ */ new Map());
+  const [isLoading, setIsLoading] = useState12(true);
+  const fetchIdRef = useRef7(0);
+  const isFetchingRef = useRef7(false);
+  const assetsKey = assets.join(",");
+  useEffect14(() => {
+    if (!isReady) return;
+    if (!enabled) {
+      setIsLoading(false);
+      return;
+    }
+    const symbols = assetsKey.split(",");
+    const currentFetchId = ++fetchIdRef.current;
+    isFetchingRef.current = false;
+    let isFirstFetch = true;
+    async function fetchBalances() {
+      if (isFetchingRef.current) return;
+      isFetchingRef.current = true;
+      if (isFirstFetch) {
+        setIsLoading(true);
       }
-    )
-  ] });
+      const results = await Promise.allSettled(
+        symbols.map(
+          (symbol) => coinlist.swap.getTokenBalance({
+            tokenAddress: TOKEN_REGISTRY.contractAddress(symbol, chain),
+            owner: address,
+            chain
+          })
+        )
+      );
+      if (currentFetchId !== fetchIdRef.current) return;
+      isFetchingRef.current = false;
+      const next = /* @__PURE__ */ new Map();
+      symbols.forEach((symbol, i) => {
+        const result = results[i];
+        next.set(
+          symbol,
+          result.status === "fulfilled" ? result.value.balance : null
+        );
+      });
+      setBalances(next);
+      setIsLoading(false);
+      isFirstFetch = false;
+    }
+    fetchBalances();
+    const interval = setInterval(fetchBalances, pollIntervalMs);
+    return () => {
+      clearInterval(interval);
+      ++fetchIdRef.current;
+    };
+  }, [coinlist, isReady, address, chain, assetsKey, pollIntervalMs, enabled]);
+  return { balances, isLoading };
 }
 
 // src/client/hooks/useCompleteOAuth.ts
-import { useEffect as useEffect4, useRef } from "react";
+import { useEffect as useEffect15, useRef as useRef8 } from "react";
 function useCompleteOAuth(options) {
   const { coinlist } = useCoinList();
-  const postOAuthCompleteRef = useRef(options.postOAuthComplete);
-  const onFailureRef = useRef(options.onFailure);
-  const onSuccessRef = useRef(options.onSuccess);
+  const postOAuthCompleteRef = useRef8(options.postOAuthComplete);
+  const onFailureRef = useRef8(options.onFailure);
+  const onSuccessRef = useRef8(options.onSuccess);
   postOAuthCompleteRef.current = options.postOAuthComplete;
   onFailureRef.current = options.onFailure;
   onSuccessRef.current = options.onSuccess;
-  const hasStartedExchangeRef = useRef(false);
-  useEffect4(() => {
+  const hasStartedExchangeRef = useRef8(false);
+  useEffect15(() => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams(window.location.search);
     if (!params.has("code") && !params.has("error")) return;
@@ -1368,19 +3232,19 @@ function useCompleteOAuth(options) {
 }
 
 // src/client/hooks/useOfferDetails.ts
-import { useEffect as useEffect5, useState as useState5 } from "react";
-var LOADING_STATE3 = { type: "LOADING" };
+import { useEffect as useEffect16, useState as useState13 } from "react";
+var LOADING_STATE7 = { type: "LOADING" };
 function useOfferDetails(offerId, options = {}) {
   const { coinlist, isReady } = useCoinList();
   const { data } = options;
-  const [offerDetailsState, setOfferDetailsState] = useState5(
-    data !== void 0 ? { type: "CONTENT", offerDetail: data } : LOADING_STATE3
+  const [offerDetailsState, setOfferDetailsState] = useState13(
+    data !== void 0 ? { type: "CONTENT", offerDetail: data } : LOADING_STATE7
   );
-  useEffect5(() => {
+  useEffect16(() => {
     let isCancelled = false;
     if (!isReady) {
       if (data === void 0) {
-        setOfferDetailsState(LOADING_STATE3);
+        setOfferDetailsState(LOADING_STATE7);
       }
       return () => {
         isCancelled = true;
@@ -1391,7 +3255,7 @@ function useOfferDetails(offerId, options = {}) {
         isCancelled = true;
       };
     }
-    setOfferDetailsState(LOADING_STATE3);
+    setOfferDetailsState(LOADING_STATE7);
     coinlist.fetchOfferDetails(offerId).then((offerDetail) => {
       if (!isCancelled) {
         setOfferDetailsState({ type: "CONTENT", offerDetail });
@@ -1410,19 +3274,19 @@ function useOfferDetails(offerId, options = {}) {
 }
 
 // src/client/hooks/useParticipations.ts
-import { useEffect as useEffect6, useState as useState6 } from "react";
-var LOADING_STATE4 = { type: "LOADING" };
+import { useEffect as useEffect17, useState as useState14 } from "react";
+var LOADING_STATE8 = { type: "LOADING" };
 function useParticipations(offerId, options = {}) {
   const { coinlist, isReady } = useCoinList();
   const { data } = options;
-  const [participationsState, setParticipationsState] = useState6(
-    data !== void 0 ? { type: "CONTENT", participations: data } : LOADING_STATE4
+  const [participationsState, setParticipationsState] = useState14(
+    data !== void 0 ? { type: "CONTENT", participations: data } : LOADING_STATE8
   );
-  useEffect6(() => {
+  useEffect17(() => {
     let isCancelled = false;
     if (!isReady) {
       if (data === void 0) {
-        setParticipationsState(LOADING_STATE4);
+        setParticipationsState(LOADING_STATE8);
       }
       return () => {
         isCancelled = true;
@@ -1433,7 +3297,7 @@ function useParticipations(offerId, options = {}) {
         isCancelled = true;
       };
     }
-    setParticipationsState(LOADING_STATE4);
+    setParticipationsState(LOADING_STATE8);
     coinlist.fetchParticipations(offerId).then((participations) => {
       if (!isCancelled) {
         setParticipationsState({ type: "CONTENT", participations });
@@ -1452,10 +3316,17 @@ function useParticipations(offerId, options = {}) {
 }
 export {
   ChecklistStatus,
+  ClientSwapNamespaceImpl,
   CoinListClientInitializationError,
   CoinListContext,
+  CoinListContextProvider,
   CoinListProvider,
   CoinListSignInCard,
+  CoinListStyleScope,
+  ConnectWalletModal,
+  ConnectedWalletList,
+  IdentityVerification,
+  KycToken,
   OAUTH_CODE_VERIFIER_KEY,
   OAUTH_STATE_KEY,
   OfferCard,
@@ -1466,12 +3337,24 @@ export {
   RequirementStatus,
   RequirementVariant,
   RequirementsChecklist,
+  TaxDocumentModal,
+  authorizeWallet,
+  classifyWalletError,
+  connectExternalWalletFlow,
   createCoinListClient,
+  executeSwap,
   useCoinList,
   useCompleteOAuth,
+  useConnectWallet,
+  useKycToken,
   useOfferDetails,
   useOffers,
+  useOptionAddresses,
   useParticipations,
-  useRequirements
+  useRequirements,
+  useSwapOutputToken,
+  useSwapQuote,
+  useSwapTokenBalances,
+  useTaxDocument
 };
 //# sourceMappingURL=index.js.map