@coinlist-co/react 0.12.1-rc.f51a0c2 → 0.12.1

package/dist/client/index.cjs

@@ -59,6 +59,7 @@ __export(client_exports, {
   OAUTH_STATE_KEY: () => OAUTH_STATE_KEY,
   OfferAssetCard: () => OfferAssetCard,
   OfferAssetCardUi: () => OfferAssetCardUi,
+  OfferLogoUi: () => OfferLogoUi,
   OfferSaleCard: () => OfferSaleCard,
   OfferSaleCardUi: () => OfferSaleCardUi,
   OffersAssetGrid: () => OffersAssetGrid,
@@ -120,6 +121,7 @@ __export(client_exports, {
   quoteOverAsks: () => quoteOverAsks,
   stablecoinIconUrl: () => stablecoinIconUrl,
   submitErc20Approval: () => submitErc20Approval,
+  tokenLogoSrcSet: () => tokenLogoSrcSet,
   tokenLogoUrl: () => tokenLogoUrl,
   tokenMetadataOf: () => tokenMetadataOf,
   useCheckoutOfferTokenMetadata: () => useCheckoutOfferTokenMetadata,
@@ -162,6 +164,7 @@ __export(client_exports, {
   useTaxDocument: () => useTaxDocument,
   useTaxDocumentModalViewModel: () => useTaxDocumentModalViewModel,
   useTokenMetadata: () => useTokenMetadata,
+  useTokenRegistry: () => useTokenRegistry,
   validateAmount: () => validateAmount,
   validateSellAmount: () => validateSellAmount,
   validateSuperstateAmount: () => validateSuperstateAmount
@@ -3838,6 +3841,52 @@ var Erc20NamespaceImpl = class {
   }
 };
 
+// src/universal/core/tokens/token-registry-snapshot.ts
+var TokenRegistrySnapshot = {
+  /** Indexes a `tokens.list()` result. `[]` is a valid, empty snapshot. */
+  fromTokens: (tokens) => ({
+    tokens,
+    byKey: new Map(
+      tokens.map((token) => [registryKey(token.identifier), token])
+    )
+  }),
+  /**
+   * The registry's entry for one token, or `null` when it lists none. The
+   * registry is curated, so `null` is an ordinary answer rather than an
+   * error, and callers fall back to their own display defaults.
+   */
+  get: (snapshot, token) => snapshot.byKey.get(registryKey(token)) ?? null,
+  /**
+   * The registry's entry for the token an offer is *about*, or `null` when
+   * it lists none of them.
+   *
+   * Resolution follows {@link offerDisplayTokens}: the token a sale
+   * distributes or a swap hands over, never the funding token the user pays
+   * with. An offer deployed on several chains carries one such token per
+   * chain, and the first the registry knows wins - they are the same asset,
+   * so any listed one answers for the offer.
+   */
+  forOffer: (snapshot, offer) => {
+    for (const token of offerDisplayTokens(offer)) {
+      const metadata = TokenRegistrySnapshot.get(snapshot, token);
+      if (metadata !== null) {
+        return metadata;
+      }
+    }
+    return null;
+  }
+};
+function offerDisplayTokens(offer) {
+  const swaps = offer.tokens.filter((token) => token.role === "swap");
+  const distributions = offer.tokens.filter(
+    (token) => token.role === "distribution"
+  );
+  return [...swaps, ...distributions];
+}
+function registryKey(token) {
+  return `${token.chain}:${token.address.toLowerCase()}`;
+}
+
 // src/universal/api/nabu/tokens.ts
 var import_viem6 = require("viem");
 
@@ -5038,7 +5087,7 @@ var CoinListProvider = CoinListContextProvider;
 var import_react4 = require("react");
 
 // src/client/generated/sdk-styles.gen.ts
-var sdkStyles = '/*! tailwindcss v4.3.3 | 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction: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-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@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-sm:24rem;--clcosdk-container-md:28rem;--clcosdk-container-xl:36rem;--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-text-lg:1.125rem;--clcosdk-text-lg--line-height:calc(1.75 / 1.125);--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-xl:.75rem;--clcosdk-radius-2xl:1rem;--clcosdk-ease-out:cubic-bezier(0, 0, .2, 1);--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;--shadow-step-active:0px 0px 10px 0px #0000001a;--shadow-dialog:0px 8px 32px 0px #0000001a;--btn-primary-gradient:linear-gradient(180deg, #262626 0%, #1c1c1c 50%, #0f0f0f 100%);--btn-primary-shadow:inset 0px -1px 3px 0px #00000059, inset 0px 1px 2px 0px #ffffff2e, inset 0px 1px 0px 0px #ffffff1a;--sale-card-surface:linear-gradient(to top, #0a0a0a 0%, #1a1a1a 100%);--color-sale-card-text:#f4f4f5;--color-sale-card-text-muted:#a1a1aa;--color-sale-card-text-strong:#fff;--color-sale-card-border:#ffffff40;--color-sale-card-chrome-border:#ffffff4d;--color-sale-card-chrome-bg:#ffffff26;--color-sale-card-chrome-emphasis-border:#fff6;--color-sale-card-chrome-emphasis-bg:#ffffff40;--color-sale-card-focus-ring:#ffffff80}@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;--shadow-step-active:0px 0px 10px 0px #00000080;--shadow-dialog:0px 8px 32px 0px #0009;--btn-primary-gradient:linear-gradient(180deg, #fafafa 0%, #f0f0f0 50%, #e4e4e7 100%);--btn-primary-shadow:inset 0px -1px 3px 0px #0000001f, inset 0px 1px 2px 0px #fff9, inset 0px 1px 0px 0px #fff6}}: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;--shadow-step-active:0px 0px 10px 0px #00000080;--shadow-dialog:0px 8px 32px 0px #0009;--btn-primary-gradient:linear-gradient(180deg, #fafafa 0%, #f0f0f0 50%, #e4e4e7 100%);--btn-primary-shadow:inset 0px -1px 3px 0px #0000001f, inset 0px 1px 2px 0px #fff9, inset 0px 1px 0px 0px #fff6}.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 input,.clco-sdk-root textarea,.clco-sdk-root select{font:inherit;color:inherit;background:0 0;border:none;border-radius:0;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 h1,.clco-sdk-root h2,.clco-sdk-root h3,.clco-sdk-root h4,.clco-sdk-root h5,.clco-sdk-root h6,.clco-sdk-root p,.clco-sdk-root figure,.clco-sdk-root blockquote,.clco-sdk-root dl,.clco-sdk-root dd,.clco-sdk-root pre{margin:0}.clco-sdk-root img,.clco-sdk-root svg{max-width:100%;display:block}@keyframes clco-status-ping{0%{opacity:.7;transform:scale(1)}75%,to{opacity:0;transform:scale(3.25)}}.clco-sdk-root .clcosdk-status-dot-ping{animation:1.6s cubic-bezier(0,0,.2,1) infinite clco-status-ping}@media (prefers-reduced-motion:reduce){.clco-sdk-root .clcosdk-status-dot-ping{opacity:0;animation:none}}}@layer components;@layer utilities{.clcosdk\\:pointer-events-none{pointer-events:none}.clcosdk\\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.clcosdk\\:absolute{position:absolute}.clcosdk\\:fixed{position:fixed}.clcosdk\\:relative{position:relative}.clcosdk\\:inset-0{inset:0}.clcosdk\\:top-1\\/2{top:50%}.clcosdk\\:top-4{top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:top-full{top:100%}.clcosdk\\:-right-0\\.5{right:calc(var(--clcosdk-spacing) * -.5)}.clcosdk\\:right-4{right:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:right-\\[-14\\%\\]{right:-14%}.clcosdk\\:-bottom-0\\.5{bottom:calc(var(--clcosdk-spacing) * -.5)}.clcosdk\\:bottom-full{bottom:100%}.clcosdk\\:left-1\\/2{left:50%}.clcosdk\\:z-0{z-index:0}.clcosdk\\:z-10{z-index:10}.clcosdk\\:z-50{z-index:50}.clcosdk\\:order-1{order:1}.clcosdk\\:order-2{order:2}.clcosdk\\:mt-2{margin-top:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:mt-4{margin-top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:mt-auto{margin-top:auto}.clcosdk\\:mb-2{margin-bottom:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:flex{display:flex}.clcosdk\\:grid{display:grid}.clcosdk\\:inline-flex{display:inline-flex}.clcosdk\\:size-2{width:calc(var(--clcosdk-spacing) * 2);height:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:size-3{width:calc(var(--clcosdk-spacing) * 3);height:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:size-3\\.5{width:calc(var(--clcosdk-spacing) * 3.5);height:calc(var(--clcosdk-spacing) * 3.5)}.clcosdk\\:size-4{width:calc(var(--clcosdk-spacing) * 4);height:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:size-5{width:calc(var(--clcosdk-spacing) * 5);height:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:size-10{width:calc(var(--clcosdk-spacing) * 10);height:calc(var(--clcosdk-spacing) * 10)}.clcosdk\\:size-16{width:calc(var(--clcosdk-spacing) * 16);height:calc(var(--clcosdk-spacing) * 16)}.clcosdk\\:size-24{width:calc(var(--clcosdk-spacing) * 24);height:calc(var(--clcosdk-spacing) * 24)}.clcosdk\\:size-\\[15rem\\]{width:15rem;height:15rem}.clcosdk\\:size-full{width:100%;height:100%}.clcosdk\\:h-1{height:var(--clcosdk-spacing)}.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-8{height:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:h-9{height:calc(var(--clcosdk-spacing) * 9)}.clcosdk\\:h-10{height:calc(var(--clcosdk-spacing) * 10)}.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-\\[1em\\]{height:1em}.clcosdk\\:h-\\[18px\\]{height:18px}.clcosdk\\:h-\\[54px\\]{height:54px}.clcosdk\\:h-\\[71px\\]{height:71px}.clcosdk\\:h-auto{height:auto}.clcosdk\\:h-full{height:100%}.clcosdk\\:h-px{height:1px}.clcosdk\\:max-h-\\[92vh\\]{max-height:92vh}.clcosdk\\:max-h-full{max-height:100%}.clcosdk\\:min-h-0{min-height: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-\\[1lh\\]{min-height:1lh}.clcosdk\\:min-h-screen{min-height:100vh}.clcosdk\\:w-1{width:var(--clcosdk-spacing)}.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-8{width:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:w-10{width:calc(var(--clcosdk-spacing) * 10)}.clcosdk\\:w-12{width:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:w-16{width:calc(var(--clcosdk-spacing) * 16)}.clcosdk\\:w-20{width:calc(var(--clcosdk-spacing) * 20)}.clcosdk\\:w-24{width:calc(var(--clcosdk-spacing) * 24)}.clcosdk\\:w-28{width:calc(var(--clcosdk-spacing) * 28)}.clcosdk\\:w-32{width:calc(var(--clcosdk-spacing) * 32)}.clcosdk\\:w-40{width:calc(var(--clcosdk-spacing) * 40)}.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-\\[28rem\\]{width:28rem}.clcosdk\\:w-\\[448px\\]{width:448px}.clcosdk\\:w-auto{width:auto}.clcosdk\\:w-component{width:448px}.clcosdk\\:w-fit{width:fit-content}.clcosdk\\:w-full{width:100%}.clcosdk\\:w-max{width:max-content}.clcosdk\\:max-w-\\[16rem\\]{max-width:16rem}.clcosdk\\:max-w-\\[28rem\\]{max-width:28rem}.clcosdk\\:max-w-\\[30rem\\]{max-width:30rem}.clcosdk\\:max-w-\\[40rem\\]{max-width:40rem}.clcosdk\\:max-w-\\[56rem\\]{max-width:56rem}.clcosdk\\:max-w-\\[64rem\\]{max-width:64rem}.clcosdk\\:max-w-\\[760px\\]{max-width:760px}.clcosdk\\:max-w-full{max-width:100%}.clcosdk\\:max-w-md{max-width:var(--clcosdk-container-md)}.clcosdk\\:max-w-sm{max-width:var(--clcosdk-container-sm)}.clcosdk\\:max-w-xl{max-width:var(--clcosdk-container-xl)}.clcosdk\\:min-w-0{min-width:0}.clcosdk\\:flex-1{flex:1}.clcosdk\\:shrink-0{flex-shrink:0}.clcosdk\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.clcosdk\\:-translate-y-1\\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.clcosdk\\:rotate-90{rotate:90deg}.clcosdk\\:rotate-180{rotate:180deg}.clcosdk\\:animate-pulse{animation:var(--clcosdk-animate-pulse)}.clcosdk\\:animate-spin{animation:var(--clcosdk-animate-spin)}.clcosdk\\:cursor-pointer{cursor:pointer}.clcosdk\\:grid-cols-1{grid-template-columns:repeat(1,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-end{align-items:flex-end}.clcosdk\\:items-start{align-items:flex-start}.clcosdk\\:justify-between{justify-content:space-between}.clcosdk\\:justify-center{justify-content:center}.clcosdk\\:justify-end{justify-content:flex-end}.clcosdk\\:gap-1{gap:var(--clcosdk-spacing)}.clcosdk\\:gap-1\\.5{gap:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:gap-2{gap:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:gap-2\\.5{gap:calc(var(--clcosdk-spacing) * 2.5)}.clcosdk\\:gap-3{gap:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:gap-4{gap:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:gap-6{gap:calc(var(--clcosdk-spacing) * 6)}.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\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.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-\\[20px\\]{border-radius:20px}.clcosdk\\:rounded-\\[28px\\]{border-radius:28px}.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\\:rounded-xl{border-radius:var(--clcosdk-radius-xl)}.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-\\[1\\.5px\\]{border-style:var(--tw-border-style);border-width:1.5px}.clcosdk\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.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-background{border-color:var(--color-background)}.clcosdk\\:border-border{border-color:var(--color-border)}.clcosdk\\:border-brand-primary{border-color:var(--color-brand-primary)}.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-sale-card-border{border-color:var(--color-sale-card-border)}.clcosdk\\:border-sale-card-chrome-border{border-color:var(--color-sale-card-chrome-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-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-divider{background-color:var(--color-divider)}.clcosdk\\:bg-error-subtle{background-color:var(--color-error-subtle)}.clcosdk\\:bg-overlay{background-color:var(--color-overlay)}.clcosdk\\:bg-positive{background-color:var(--color-positive)}.clcosdk\\:bg-positive-subtle{background-color:var(--color-positive-subtle)}.clcosdk\\:bg-sale-card-chrome-bg{background-color:var(--color-sale-card-chrome-bg)}.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-text-disabled{background-color:var(--color-text-disabled)}.clcosdk\\:bg-text-primary{background-color:var(--color-text-primary)}.clcosdk\\:bg-transparent{background-color:#0000}.clcosdk\\:bg-warning-subtle{background-color:var(--color-warning-subtle)}.clcosdk\\:bg-\\[image\\:var\\(--btn-primary-gradient\\)\\]{background-image:var(--btn-primary-gradient)}.clcosdk\\:bg-\\[image\\:var\\(--sale-card-surface\\)\\]{background-image:var(--sale-card-surface)}.clcosdk\\:object-contain{object-fit:contain}.clcosdk\\:object-cover{object-fit:cover}.clcosdk\\:p-0{padding:0}.clcosdk\\:p-1\\.5{padding:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:p-3{padding:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:p-3\\.5{padding:calc(var(--clcosdk-spacing) * 3.5)}.clcosdk\\:p-4{padding:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:p-5{padding:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:p-6{padding:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:p-8{padding:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:p-16{padding:calc(var(--clcosdk-spacing) * 16)}.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-1\\.5{padding-block:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:py-2{padding-block:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:py-3{padding-block:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:py-8{padding-block:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:py-12{padding-block:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:pt-1{padding-top:var(--clcosdk-spacing)}.clcosdk\\:pt-4{padding-top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:pt-14{padding-top:calc(var(--clcosdk-spacing) * 14)}.clcosdk\\:pr-1\\.5{padding-right:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:pr-3{padding-right:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:pr-4{padding-right:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:pb-4{padding-bottom:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:pl-3{padding-left:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:text-center{text-align:center}.clcosdk\\:text-left{text-align:left}.clcosdk\\:text-right{text-align:right}.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-lg{font-size:var(--clcosdk-text-lg);line-height:var(--tw-leading,var(--clcosdk-text-lg--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-\\[13px\\]{font-size:13px}.clcosdk\\:text-\\[14px\\]{font-size:14px}.clcosdk\\:text-\\[15px\\]{font-size:15px}.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-\\[105\\%\\]{--tw-leading:105%;line-height:105%}.clcosdk\\:leading-\\[108\\%\\]{--tw-leading:108%;line-height:108%}.clcosdk\\:leading-\\[110\\%\\]{--tw-leading:110%;line-height:110%}.clcosdk\\:leading-\\[120\\%\\]{--tw-leading:120%;line-height:120%}.clcosdk\\:leading-\\[130\\%\\]{--tw-leading:130%;line-height:130%}.clcosdk\\:leading-\\[140\\%\\]{--tw-leading:140%;line-height:140%}.clcosdk\\:leading-\\[150\\%\\]{--tw-leading:150%;line-height:150%}.clcosdk\\:leading-\\[160\\%\\]{--tw-leading:160%;line-height:160%}.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\\:break-words{overflow-wrap:break-word}.clcosdk\\:whitespace-nowrap{white-space:nowrap}.clcosdk\\:text-background{color:var(--color-background)}.clcosdk\\:text-brand-primary{color:var(--color-brand-primary)}.clcosdk\\:text-error{color:var(--color-error)}.clcosdk\\:text-positive{color:var(--color-positive)}.clcosdk\\:text-sale-card-text{color:var(--color-sale-card-text)}.clcosdk\\:text-sale-card-text-muted{color:var(--color-sale-card-text-muted)}.clcosdk\\:text-sale-card-text-strong{color:var(--color-sale-card-text-strong)}.clcosdk\\:text-success{color:var(--color-success)}.clcosdk\\:text-text-disabled{color:var(--color-text-disabled)}.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\\:lining-nums{--tw-numeric-figure:lining-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.clcosdk\\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.clcosdk\\:no-underline{text-decoration-line:none}.clcosdk\\:underline{text-decoration-line:underline}.clcosdk\\:underline-offset-2{text-underline-offset:2px}.clcosdk\\:underline-offset-4{text-underline-offset:4px}.clcosdk\\:opacity-0{opacity:0}.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-\\[0px_1px_1px_0px_rgba\\(10\\,10\\,10\\,0\\.04\\)\\,0px_8px_12px_0px_rgba\\(10\\,10\\,10\\,0\\.08\\)\\]{--tw-shadow:0px 1px 1px 0px var(--tw-shadow-color,#0a0a0a0a), 0px 8px 12px 0px var(--tw-shadow-color,#0a0a0a14);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-\\[0px_4px_12px_0px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\,0px_12px_28px_0px_rgba\\(0\\,0\\,0\\,0\\.13\\)\\]{--tw-shadow:0px 4px 12px 0px var(--tw-shadow-color,#00000014), 0px 12px 28px 0px var(--tw-shadow-color,#00000021);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-\\[var\\(--btn-primary-shadow\\)\\]{--tw-shadow:var(--btn-primary-shadow);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\\:shadow-dialog{--tw-shadow:var(--shadow-dialog);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-step-active{--tw-shadow:var(--shadow-step-active);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-\\[background-color\\,border-color\\]{transition-property:background-color,border-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.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-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-opacity{transition-property:opacity;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\\:duration-500{--tw-duration:.5s;transition-duration:.5s}.clcosdk\\:ease-in-out{--tw-ease:var(--clcosdk-ease-in-out);transition-timing-function:var(--clcosdk-ease-in-out)}.clcosdk\\:ease-out{--tw-ease:var(--clcosdk-ease-out);transition-timing-function:var(--clcosdk-ease-out)}.clcosdk\\:outline-none{--tw-outline-style:none;outline-style:none}.clcosdk\\:group-focus-within\\:opacity-100:is(:where(.clcosdk\\:group):focus-within *){opacity:1}@media (hover:hover){.clcosdk\\:group-hover\\:border-sale-card-chrome-emphasis-border:is(:where(.clcosdk\\:group):hover *){border-color:var(--color-sale-card-chrome-emphasis-border)}.clcosdk\\:group-hover\\:bg-sale-card-chrome-emphasis-bg:is(:where(.clcosdk\\:group):hover *){background-color:var(--color-sale-card-chrome-emphasis-bg)}.clcosdk\\:group-hover\\:opacity-100:is(:where(.clcosdk\\:group):hover *){opacity:1}}.clcosdk\\:group-focus-visible\\:border-sale-card-chrome-emphasis-border:is(:where(.clcosdk\\:group):focus-visible *){border-color:var(--color-sale-card-chrome-emphasis-border)}.clcosdk\\:group-focus-visible\\:bg-sale-card-chrome-emphasis-bg:is(:where(.clcosdk\\:group):focus-visible *){background-color:var(--color-sale-card-chrome-emphasis-bg)}.clcosdk\\:placeholder\\:text-text-disabled::placeholder{color:var(--color-text-disabled)}@media (hover:hover){.clcosdk\\:hover\\:scale-\\[1\\.02\\]:hover{scale:1.02}.clcosdk\\:hover\\:border-text-disabled:hover{border-color:var(--color-text-disabled)}.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\\:opacity-80:hover{opacity:.8}.clcosdk\\:hover\\:opacity-90:hover{opacity:.9}}.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-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-sale-card-focus-ring:focus-visible{--tw-ring-color:var(--color-sale-card-focus-ring)}.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\\:active\\:opacity-80:active{opacity:.8}.clcosdk\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.clcosdk\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.clcosdk\\:disabled\\:opacity-40:disabled{opacity:.4}.clcosdk\\:disabled\\:opacity-50:disabled{opacity:.5}.clcosdk\\:aria-disabled\\:cursor-not-allowed[aria-disabled=true]{cursor:not-allowed}.clcosdk\\:aria-disabled\\:opacity-50[aria-disabled=true]{opacity:.5}@media not all and (min-width:48rem){.clcosdk\\:max-md\\:hidden{display:none}.clcosdk\\:max-md\\:w-full{width:100%}.clcosdk\\:max-md\\:justify-start{justify-content:flex-start}.clcosdk\\:max-md\\:gap-4{gap:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:max-md\\:rounded-none{border-radius:0}.clcosdk\\:max-md\\:border-0{border-style:var(--tw-border-style);border-width:0}.clcosdk\\:max-md\\:bg-transparent{background-color:#0000}.clcosdk\\:max-md\\:p-0{padding:0}@media (hover:hover){.clcosdk\\:max-md\\:hover\\:scale-100:hover{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}}}@media (min-width:40rem){.clcosdk\\:sm\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:48rem){.clcosdk\\:md\\:right-\\[-10\\%\\]{right:-10%}.clcosdk\\:md\\:order-1{order:1}.clcosdk\\:md\\:order-2{order:2}.clcosdk\\:md\\:hidden{display:none}.clcosdk\\:md\\:size-\\[20rem\\]{width:20rem;height:20rem}.clcosdk\\:md\\:h-9{height:calc(var(--clcosdk-spacing) * 9)}.clcosdk\\:md\\:h-12{height:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:md\\:h-\\[54px\\]{height:54px}.clcosdk\\:md\\:w-9{width:calc(var(--clcosdk-spacing) * 9)}.clcosdk\\:md\\:w-12{width:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:md\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.clcosdk\\:md\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.clcosdk\\:md\\:grid-cols-\\[minmax\\(0\\,11fr\\)_minmax\\(0\\,8fr\\)\\]{grid-template-columns:minmax(0,11fr) minmax(0,8fr)}.clcosdk\\:md\\:flex-row{flex-direction:row}.clcosdk\\:md\\:items-center{align-items:center}.clcosdk\\:md\\:items-end{align-items:flex-end}.clcosdk\\:md\\:justify-between{justify-content:space-between}.clcosdk\\:md\\:justify-end{justify-content:flex-end}.clcosdk\\:md\\:gap-3{gap:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:md\\:gap-6{gap:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:md\\:gap-x-12{column-gap:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:md\\:self-end{align-self:flex-end}.clcosdk\\:md\\:rounded-\\[40px\\]{border-radius:40px}.clcosdk\\:md\\:rounded-card{border-radius:24px}.clcosdk\\:md\\:rounded-dialog{border-radius:32px}.clcosdk\\:md\\:p-4{padding:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:md\\:p-6{padding:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:md\\:p-8{padding:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:md\\:px-6{padding-inline:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:md\\:px-8{padding-inline:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:md\\:py-2{padding-block:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:md\\:pr-2{padding-right:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:md\\:pr-4{padding-right:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:md\\:pl-4{padding-left:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:md\\:text-base{font-size:var(--clcosdk-text-base);line-height:var(--tw-leading,var(--clcosdk-text-base--line-height))}.clcosdk\\:md\\:text-\\[14px\\]{font-size:14px}.clcosdk\\:md\\:text-\\[16px\\]{font-size:16px}.clcosdk\\:md\\:text-\\[18px\\]{font-size:18px}.clcosdk\\:md\\:text-\\[28px\\]{font-size:28px}.clcosdk\\:md\\:leading-\\[120\\%\\]{--tw-leading:120%;line-height:120%}.clcosdk\\:md\\:leading-\\[160\\%\\]{--tw-leading:160%;line-height:160%}}@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-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}@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-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{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-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}';
+var sdkStyles = '/*! tailwindcss v4.3.3 | 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-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction: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-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@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-sm:24rem;--clcosdk-container-md:28rem;--clcosdk-container-xl:36rem;--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-text-lg:1.125rem;--clcosdk-text-lg--line-height:calc(1.75 / 1.125);--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-xl:.75rem;--clcosdk-radius-2xl:1rem;--clcosdk-ease-out:cubic-bezier(0, 0, .2, 1);--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;--shadow-step-active:0px 0px 10px 0px #0000001a;--shadow-dialog:0px 8px 32px 0px #0000001a;--btn-primary-gradient:linear-gradient(180deg, #262626 0%, #1c1c1c 50%, #0f0f0f 100%);--btn-primary-shadow:inset 0px -1px 3px 0px #00000059, inset 0px 1px 2px 0px #ffffff2e, inset 0px 1px 0px 0px #ffffff1a;--sale-card-surface:linear-gradient(to top, #0a0a0a 0%, #1a1a1a 100%);--color-sale-card-text:#f4f4f5;--color-sale-card-text-muted:#a1a1aa;--color-sale-card-text-strong:#fff;--color-sale-card-border:#ffffff40;--color-sale-card-chrome-border:#ffffff4d;--color-sale-card-chrome-bg:#ffffff26;--color-sale-card-chrome-emphasis-border:#fff6;--color-sale-card-chrome-emphasis-bg:#ffffff40;--color-sale-card-focus-ring:#ffffff80;--display-on-light:block;--display-on-dark:none}@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;--shadow-step-active:0px 0px 10px 0px #00000080;--shadow-dialog:0px 8px 32px 0px #0009;--btn-primary-gradient:linear-gradient(180deg, #fafafa 0%, #f0f0f0 50%, #e4e4e7 100%);--btn-primary-shadow:inset 0px -1px 3px 0px #0000001f, inset 0px 1px 2px 0px #fff9, inset 0px 1px 0px 0px #fff6;--display-on-light:none;--display-on-dark:block}}: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;--shadow-step-active:0px 0px 10px 0px #00000080;--shadow-dialog:0px 8px 32px 0px #0009;--btn-primary-gradient:linear-gradient(180deg, #fafafa 0%, #f0f0f0 50%, #e4e4e7 100%);--btn-primary-shadow:inset 0px -1px 3px 0px #0000001f, inset 0px 1px 2px 0px #fff9, inset 0px 1px 0px 0px #fff6;--display-on-light:none;--display-on-dark:block}.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 input,.clco-sdk-root textarea,.clco-sdk-root select{font:inherit;color:inherit;background:0 0;border:none;border-radius:0;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 h1,.clco-sdk-root h2,.clco-sdk-root h3,.clco-sdk-root h4,.clco-sdk-root h5,.clco-sdk-root h6,.clco-sdk-root p,.clco-sdk-root figure,.clco-sdk-root blockquote,.clco-sdk-root dl,.clco-sdk-root dd,.clco-sdk-root pre{margin:0}.clco-sdk-root img,.clco-sdk-root svg{max-width:100%;display:block}@keyframes clco-status-ping{0%{opacity:.7;transform:scale(1)}75%,to{opacity:0;transform:scale(3.25)}}.clco-sdk-root .clcosdk-status-dot-ping{animation:1.6s cubic-bezier(0,0,.2,1) infinite clco-status-ping}.clco-sdk-root .clcosdk-on-light{display:var(--display-on-light)}.clco-sdk-root .clcosdk-on-dark{display:var(--display-on-dark)}@media (prefers-reduced-motion:reduce){.clco-sdk-root .clcosdk-status-dot-ping{opacity:0;animation:none}}}@layer components;@layer utilities{.clcosdk\\:pointer-events-none{pointer-events:none}.clcosdk\\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.clcosdk\\:absolute{position:absolute}.clcosdk\\:fixed{position:fixed}.clcosdk\\:relative{position:relative}.clcosdk\\:inset-0{inset:0}.clcosdk\\:top-1\\/2{top:50%}.clcosdk\\:top-4{top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:top-full{top:100%}.clcosdk\\:-right-0\\.5{right:calc(var(--clcosdk-spacing) * -.5)}.clcosdk\\:right-4{right:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:right-\\[-14\\%\\]{right:-14%}.clcosdk\\:-bottom-0\\.5{bottom:calc(var(--clcosdk-spacing) * -.5)}.clcosdk\\:bottom-full{bottom:100%}.clcosdk\\:left-1\\/2{left:50%}.clcosdk\\:z-0{z-index:0}.clcosdk\\:z-10{z-index:10}.clcosdk\\:z-50{z-index:50}.clcosdk\\:order-1{order:1}.clcosdk\\:order-2{order:2}.clcosdk\\:-mx-2{margin-inline:calc(var(--clcosdk-spacing) * -2)}.clcosdk\\:mt-2{margin-top:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:mt-4{margin-top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:mt-auto{margin-top:auto}.clcosdk\\:mb-2{margin-bottom:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:flex{display:flex}.clcosdk\\:grid{display:grid}.clcosdk\\:inline-flex{display:inline-flex}.clcosdk\\:size-2{width:calc(var(--clcosdk-spacing) * 2);height:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:size-3{width:calc(var(--clcosdk-spacing) * 3);height:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:size-3\\.5{width:calc(var(--clcosdk-spacing) * 3.5);height:calc(var(--clcosdk-spacing) * 3.5)}.clcosdk\\:size-4{width:calc(var(--clcosdk-spacing) * 4);height:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:size-5{width:calc(var(--clcosdk-spacing) * 5);height:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:size-10{width:calc(var(--clcosdk-spacing) * 10);height:calc(var(--clcosdk-spacing) * 10)}.clcosdk\\:size-12{width:calc(var(--clcosdk-spacing) * 12);height:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:size-16{width:calc(var(--clcosdk-spacing) * 16);height:calc(var(--clcosdk-spacing) * 16)}.clcosdk\\:size-24{width:calc(var(--clcosdk-spacing) * 24);height:calc(var(--clcosdk-spacing) * 24)}.clcosdk\\:size-\\[15rem\\]{width:15rem;height:15rem}.clcosdk\\:size-full{width:100%;height:100%}.clcosdk\\:h-1{height:var(--clcosdk-spacing)}.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-8{height:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:h-9{height:calc(var(--clcosdk-spacing) * 9)}.clcosdk\\:h-10{height:calc(var(--clcosdk-spacing) * 10)}.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-\\[1em\\]{height:1em}.clcosdk\\:h-\\[18px\\]{height:18px}.clcosdk\\:h-\\[54px\\]{height:54px}.clcosdk\\:h-\\[71px\\]{height:71px}.clcosdk\\:h-auto{height:auto}.clcosdk\\:h-full{height:100%}.clcosdk\\:h-px{height:1px}.clcosdk\\:max-h-\\[92vh\\]{max-height:92vh}.clcosdk\\:max-h-full{max-height:100%}.clcosdk\\:min-h-0{min-height: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-\\[1lh\\]{min-height:1lh}.clcosdk\\:min-h-screen{min-height:100vh}.clcosdk\\:w-1{width:var(--clcosdk-spacing)}.clcosdk\\:w-1\\/2{width:50%}.clcosdk\\:w-2\\/5{width:40%}.clcosdk\\:w-3\\/5{width:60%}.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-8{width:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:w-10{width:calc(var(--clcosdk-spacing) * 10)}.clcosdk\\:w-12{width:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:w-16{width:calc(var(--clcosdk-spacing) * 16)}.clcosdk\\:w-20{width:calc(var(--clcosdk-spacing) * 20)}.clcosdk\\:w-24{width:calc(var(--clcosdk-spacing) * 24)}.clcosdk\\:w-28{width:calc(var(--clcosdk-spacing) * 28)}.clcosdk\\:w-32{width:calc(var(--clcosdk-spacing) * 32)}.clcosdk\\:w-40{width:calc(var(--clcosdk-spacing) * 40)}.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-\\[28rem\\]{width:28rem}.clcosdk\\:w-\\[448px\\]{width:448px}.clcosdk\\:w-\\[calc\\(100\\%\\+16px\\)\\]{width:calc(100% + 16px)}.clcosdk\\:w-auto{width:auto}.clcosdk\\:w-component{width:448px}.clcosdk\\:w-fit{width:fit-content}.clcosdk\\:w-full{width:100%}.clcosdk\\:w-max{width:max-content}.clcosdk\\:max-w-\\[16rem\\]{max-width:16rem}.clcosdk\\:max-w-\\[28rem\\]{max-width:28rem}.clcosdk\\:max-w-\\[30rem\\]{max-width:30rem}.clcosdk\\:max-w-\\[40rem\\]{max-width:40rem}.clcosdk\\:max-w-\\[56rem\\]{max-width:56rem}.clcosdk\\:max-w-\\[64rem\\]{max-width:64rem}.clcosdk\\:max-w-\\[760px\\]{max-width:760px}.clcosdk\\:max-w-full{max-width:100%}.clcosdk\\:max-w-md{max-width:var(--clcosdk-container-md)}.clcosdk\\:max-w-sm{max-width:var(--clcosdk-container-sm)}.clcosdk\\:max-w-xl{max-width:var(--clcosdk-container-xl)}.clcosdk\\:min-w-0{min-width:0}.clcosdk\\:flex-1{flex:1}.clcosdk\\:shrink-0{flex-shrink:0}.clcosdk\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.clcosdk\\:-translate-y-1\\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.clcosdk\\:rotate-90{rotate:90deg}.clcosdk\\:rotate-180{rotate:180deg}.clcosdk\\:animate-pulse{animation:var(--clcosdk-animate-pulse)}.clcosdk\\:animate-spin{animation:var(--clcosdk-animate-spin)}.clcosdk\\:cursor-pointer{cursor:pointer}.clcosdk\\:grid-cols-1{grid-template-columns:repeat(1,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-row{flex-direction:row}.clcosdk\\:flex-wrap{flex-wrap:wrap}.clcosdk\\:items-center{align-items:center}.clcosdk\\:items-end{align-items:flex-end}.clcosdk\\:items-start{align-items:flex-start}.clcosdk\\:justify-between{justify-content:space-between}.clcosdk\\:justify-center{justify-content:center}.clcosdk\\:justify-end{justify-content:flex-end}.clcosdk\\:justify-start{justify-content:flex-start}.clcosdk\\:gap-1{gap:var(--clcosdk-spacing)}.clcosdk\\:gap-1\\.5{gap:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:gap-2{gap:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:gap-2\\.5{gap:calc(var(--clcosdk-spacing) * 2.5)}.clcosdk\\:gap-3{gap:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:gap-4{gap:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:gap-6{gap:calc(var(--clcosdk-spacing) * 6)}.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-divider>:not(:last-child)){border-color:var(--color-divider)}.clcosdk\\:self-start{align-self:flex-start}.clcosdk\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.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-\\[20px\\]{border-radius:20px}.clcosdk\\:rounded-\\[28px\\]{border-radius:28px}.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\\:rounded-xl{border-radius:var(--clcosdk-radius-xl)}.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-\\[1\\.5px\\]{border-style:var(--tw-border-style);border-width:1.5px}.clcosdk\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.clcosdk\\:border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.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-background{border-color:var(--color-background)}.clcosdk\\:border-border{border-color:var(--color-border)}.clcosdk\\:border-brand-primary{border-color:var(--color-brand-primary)}.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-sale-card-border{border-color:var(--color-sale-card-border)}.clcosdk\\:border-sale-card-chrome-border{border-color:var(--color-sale-card-chrome-border)}.clcosdk\\:border-success-border{border-color:var(--color-success-border)}.clcosdk\\:border-text-primary{border-color:var(--color-text-primary)}.clcosdk\\:border-transparent{border-color:#0000}.clcosdk\\:border-warning-border{border-color:var(--color-warning-border)}.clcosdk\\:border-t-transparent{border-top-color:#0000}.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-divider{background-color:var(--color-divider)}.clcosdk\\:bg-error-subtle{background-color:var(--color-error-subtle)}.clcosdk\\:bg-overlay{background-color:var(--color-overlay)}.clcosdk\\:bg-positive{background-color:var(--color-positive)}.clcosdk\\:bg-positive-subtle{background-color:var(--color-positive-subtle)}.clcosdk\\:bg-sale-card-chrome-bg{background-color:var(--color-sale-card-chrome-bg)}.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-text-disabled{background-color:var(--color-text-disabled)}.clcosdk\\:bg-text-primary{background-color:var(--color-text-primary)}.clcosdk\\:bg-transparent{background-color:#0000}.clcosdk\\:bg-warning-subtle{background-color:var(--color-warning-subtle)}.clcosdk\\:bg-\\[image\\:var\\(--btn-primary-gradient\\)\\]{background-image:var(--btn-primary-gradient)}.clcosdk\\:bg-\\[image\\:var\\(--sale-card-surface\\)\\]{background-image:var(--sale-card-surface)}.clcosdk\\:object-contain{object-fit:contain}.clcosdk\\:object-cover{object-fit:cover}.clcosdk\\:p-0{padding:0}.clcosdk\\:p-1\\.5{padding:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:p-3{padding:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:p-3\\.5{padding:calc(var(--clcosdk-spacing) * 3.5)}.clcosdk\\:p-4{padding:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:p-5{padding:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:p-6{padding:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:p-8{padding:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:p-16{padding:calc(var(--clcosdk-spacing) * 16)}.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-1\\.5{padding-block:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:py-2{padding-block:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:py-3{padding-block:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:py-8{padding-block:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:py-12{padding-block:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:pt-1{padding-top:var(--clcosdk-spacing)}.clcosdk\\:pt-4{padding-top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:pt-14{padding-top:calc(var(--clcosdk-spacing) * 14)}.clcosdk\\:pr-1\\.5{padding-right:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:pr-3{padding-right:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:pr-4{padding-right:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:pb-1{padding-bottom:var(--clcosdk-spacing)}.clcosdk\\:pb-4{padding-bottom:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:pl-3{padding-left:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:text-center{text-align:center}.clcosdk\\:text-left{text-align:left}.clcosdk\\:text-right{text-align:right}.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-lg{font-size:var(--clcosdk-text-lg);line-height:var(--tw-leading,var(--clcosdk-text-lg--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-\\[13px\\]{font-size:13px}.clcosdk\\:text-\\[14px\\]{font-size:14px}.clcosdk\\:text-\\[15px\\]{font-size:15px}.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-\\[105\\%\\]{--tw-leading:105%;line-height:105%}.clcosdk\\:leading-\\[108\\%\\]{--tw-leading:108%;line-height:108%}.clcosdk\\:leading-\\[110\\%\\]{--tw-leading:110%;line-height:110%}.clcosdk\\:leading-\\[120\\%\\]{--tw-leading:120%;line-height:120%}.clcosdk\\:leading-\\[130\\%\\]{--tw-leading:130%;line-height:130%}.clcosdk\\:leading-\\[140\\%\\]{--tw-leading:140%;line-height:140%}.clcosdk\\:leading-\\[150\\%\\]{--tw-leading:150%;line-height:150%}.clcosdk\\:leading-\\[160\\%\\]{--tw-leading:160%;line-height:160%}.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\\:break-words{overflow-wrap:break-word}.clcosdk\\:whitespace-nowrap{white-space:nowrap}.clcosdk\\:text-background{color:var(--color-background)}.clcosdk\\:text-brand-primary{color:var(--color-brand-primary)}.clcosdk\\:text-error{color:var(--color-error)}.clcosdk\\:text-positive{color:var(--color-positive)}.clcosdk\\:text-sale-card-text{color:var(--color-sale-card-text)}.clcosdk\\:text-sale-card-text-muted{color:var(--color-sale-card-text-muted)}.clcosdk\\:text-sale-card-text-strong{color:var(--color-sale-card-text-strong)}.clcosdk\\:text-success{color:var(--color-success)}.clcosdk\\:text-text-disabled{color:var(--color-text-disabled)}.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\\:lining-nums{--tw-numeric-figure:lining-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.clcosdk\\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.clcosdk\\:no-underline{text-decoration-line:none}.clcosdk\\:underline{text-decoration-line:underline}.clcosdk\\:underline-offset-2{text-underline-offset:2px}.clcosdk\\:underline-offset-4{text-underline-offset:4px}.clcosdk\\:opacity-0{opacity:0}.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-\\[0px_1px_1px_0px_rgba\\(10\\,10\\,10\\,0\\.04\\)\\,0px_8px_12px_0px_rgba\\(10\\,10\\,10\\,0\\.08\\)\\]{--tw-shadow:0px 1px 1px 0px var(--tw-shadow-color,#0a0a0a0a), 0px 8px 12px 0px var(--tw-shadow-color,#0a0a0a14);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-\\[0px_4px_12px_0px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\,0px_12px_28px_0px_rgba\\(0\\,0\\,0\\,0\\.13\\)\\]{--tw-shadow:0px 4px 12px 0px var(--tw-shadow-color,#00000014), 0px 12px 28px 0px var(--tw-shadow-color,#00000021);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-\\[var\\(--btn-primary-shadow\\)\\]{--tw-shadow:var(--btn-primary-shadow);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\\:shadow-dialog{--tw-shadow:var(--shadow-dialog);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-step-active{--tw-shadow:var(--shadow-step-active);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-\\[background-color\\,border-color\\]{transition-property:background-color,border-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.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-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-opacity{transition-property:opacity;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\\:duration-500{--tw-duration:.5s;transition-duration:.5s}.clcosdk\\:ease-in-out{--tw-ease:var(--clcosdk-ease-in-out);transition-timing-function:var(--clcosdk-ease-in-out)}.clcosdk\\:ease-out{--tw-ease:var(--clcosdk-ease-out);transition-timing-function:var(--clcosdk-ease-out)}.clcosdk\\:outline-none{--tw-outline-style:none;outline-style:none}.clcosdk\\:group-focus-within\\:opacity-100:is(:where(.clcosdk\\:group):focus-within *){opacity:1}@media (hover:hover){.clcosdk\\:group-hover\\:border-sale-card-chrome-emphasis-border:is(:where(.clcosdk\\:group):hover *){border-color:var(--color-sale-card-chrome-emphasis-border)}.clcosdk\\:group-hover\\:bg-sale-card-chrome-emphasis-bg:is(:where(.clcosdk\\:group):hover *){background-color:var(--color-sale-card-chrome-emphasis-bg)}.clcosdk\\:group-hover\\:opacity-100:is(:where(.clcosdk\\:group):hover *){opacity:1}}.clcosdk\\:group-focus-visible\\:border-sale-card-chrome-emphasis-border:is(:where(.clcosdk\\:group):focus-visible *){border-color:var(--color-sale-card-chrome-emphasis-border)}.clcosdk\\:group-focus-visible\\:bg-sale-card-chrome-emphasis-bg:is(:where(.clcosdk\\:group):focus-visible *){background-color:var(--color-sale-card-chrome-emphasis-bg)}.clcosdk\\:placeholder\\:text-text-disabled::placeholder{color:var(--color-text-disabled)}@media (hover:hover){.clcosdk\\:hover\\:scale-\\[1\\.02\\]:hover{scale:1.02}.clcosdk\\:hover\\:border-text-disabled:hover{border-color:var(--color-text-disabled)}.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\\:opacity-80:hover{opacity:.8}.clcosdk\\:hover\\:opacity-90:hover{opacity:.9}}.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-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-sale-card-focus-ring:focus-visible{--tw-ring-color:var(--color-sale-card-focus-ring)}.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\\:active\\:opacity-80:active{opacity:.8}.clcosdk\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.clcosdk\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.clcosdk\\:disabled\\:opacity-40:disabled{opacity:.4}.clcosdk\\:disabled\\:opacity-50:disabled{opacity:.5}.clcosdk\\:aria-disabled\\:cursor-not-allowed[aria-disabled=true]{cursor:not-allowed}.clcosdk\\:aria-disabled\\:opacity-50[aria-disabled=true]{opacity:.5}@media not all and (min-width:48rem){.clcosdk\\:max-md\\:hidden{display:none}.clcosdk\\:max-md\\:w-full{width:100%}.clcosdk\\:max-md\\:justify-start{justify-content:flex-start}.clcosdk\\:max-md\\:gap-4{gap:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:max-md\\:rounded-none{border-radius:0}.clcosdk\\:max-md\\:border-0{border-style:var(--tw-border-style);border-width:0}.clcosdk\\:max-md\\:bg-transparent{background-color:#0000}.clcosdk\\:max-md\\:p-0{padding:0}@media (hover:hover){.clcosdk\\:max-md\\:hover\\:scale-100:hover{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}}}@media (min-width:40rem){.clcosdk\\:sm\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:48rem){.clcosdk\\:md\\:right-\\[-10\\%\\]{right:-10%}.clcosdk\\:md\\:order-1{order:1}.clcosdk\\:md\\:order-2{order:2}.clcosdk\\:md\\:hidden{display:none}.clcosdk\\:md\\:size-\\[20rem\\]{width:20rem;height:20rem}.clcosdk\\:md\\:h-9{height:calc(var(--clcosdk-spacing) * 9)}.clcosdk\\:md\\:h-12{height:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:md\\:h-\\[54px\\]{height:54px}.clcosdk\\:md\\:w-9{width:calc(var(--clcosdk-spacing) * 9)}.clcosdk\\:md\\:w-12{width:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:md\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.clcosdk\\:md\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.clcosdk\\:md\\:grid-cols-\\[minmax\\(0\\,11fr\\)_minmax\\(0\\,8fr\\)\\]{grid-template-columns:minmax(0,11fr) minmax(0,8fr)}.clcosdk\\:md\\:flex-row{flex-direction:row}.clcosdk\\:md\\:items-center{align-items:center}.clcosdk\\:md\\:items-end{align-items:flex-end}.clcosdk\\:md\\:justify-between{justify-content:space-between}.clcosdk\\:md\\:justify-end{justify-content:flex-end}.clcosdk\\:md\\:gap-3{gap:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:md\\:gap-6{gap:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:md\\:gap-x-12{column-gap:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:md\\:self-end{align-self:flex-end}.clcosdk\\:md\\:rounded-\\[40px\\]{border-radius:40px}.clcosdk\\:md\\:rounded-card{border-radius:24px}.clcosdk\\:md\\:rounded-dialog{border-radius:32px}.clcosdk\\:md\\:p-4{padding:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:md\\:p-6{padding:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:md\\:p-8{padding:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:md\\:px-6{padding-inline:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:md\\:px-8{padding-inline:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:md\\:py-2{padding-block:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:md\\:pr-2{padding-right:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:md\\:pr-4{padding-right:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:md\\:pl-4{padding-left:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:md\\:text-base{font-size:var(--clcosdk-text-base);line-height:var(--tw-leading,var(--clcosdk-text-base--line-height))}.clcosdk\\:md\\:text-\\[14px\\]{font-size:14px}.clcosdk\\:md\\:text-\\[16px\\]{font-size:16px}.clcosdk\\:md\\:text-\\[18px\\]{font-size:18px}.clcosdk\\:md\\:text-\\[28px\\]{font-size:28px}.clcosdk\\:md\\:leading-\\[120\\%\\]{--tw-leading:120%;line-height:120%}.clcosdk\\:md\\:leading-\\[160\\%\\]{--tw-leading:160%;line-height:160%}}@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-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}@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-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{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-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}';
 
 // src/client/CoinListStyleScope.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -5340,7 +5389,7 @@ function AlertBanner({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: cn(typeClasses.subhead, text), children: content })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: cn(typeClasses.bodySm, text), children: content })
       ]
     }
   );
@@ -7565,6 +7614,20 @@ function tokenLogoUrl(logo, minWidth = 40) {
     }
   }
 }
+function tokenLogoSrcSet(logo) {
+  switch (logo.kind) {
+    case "VECTOR":
+      return null;
+    case "RASTER": {
+      const candidates = logo.variants.length > 0 ? logo.variants : [logo.original];
+      return [...candidates].sort((a, b) => a.width - b.width).map((image) => `${image.url} ${image.width}w`).join(", ");
+    }
+    default: {
+      const exhaustive = logo;
+      return exhaustive;
+    }
+  }
+}
 function offerAssetIconUrl(offer, tokenMetadata) {
   return (tokenMetadata ? tokenLogoUrl(tokenMetadata.logo) : null) ?? offerIconUrl(offer);
 }
@@ -8796,8 +8859,9 @@ var NO_TOKEN_ADDRESS = EvmContractAddress(
   "0x0000000000000000000000000000000000000000"
 );
 function offerTokenIdentifier(offer, chain) {
-  const byChain = offer.tokens.filter((token) => token.chain === chain);
-  const asset = byChain.find((token) => token.role === "swap") ?? byChain.find((token) => token.role === "distribution");
+  const asset = offerDisplayTokens(offer).find(
+    (token) => token.chain === chain
+  );
   return asset === void 0 ? null : { chain, address: asset.address };
 }
 function tokenMetadataOf(state) {
@@ -13146,6 +13210,58 @@ function renderOndoSide(side, branches) {
   }
 }
 
+// src/client/components/design-system/ThemedImage.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+function ThemedImage({
+  light,
+  dark,
+  sizes,
+  alt,
+  width,
+  height,
+  className,
+  style
+}) {
+  const shared = { width, height, style };
+  if (!dark) {
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      "img",
+      {
+        src: light.src,
+        srcSet: light.srcSet,
+        sizes: light.srcSet ? sizes : void 0,
+        className,
+        alt,
+        ...shared
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      "img",
+      {
+        src: light.src,
+        srcSet: light.srcSet,
+        sizes: light.srcSet ? sizes : void 0,
+        className: cn("clcosdk-on-light", className),
+        alt,
+        ...shared
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      "img",
+      {
+        src: dark.src,
+        srcSet: dark.srcSet,
+        sizes: dark.srcSet ? sizes : void 0,
+        className: cn("clcosdk-on-dark", className),
+        alt,
+        ...shared
+      }
+    )
+  ] });
+}
+
 // src/client/components/offers/shared/offer-card-keyboard.ts
 function onOfferCardKeyDown(event, onClick) {
   if (event.key !== "Enter" && event.key !== " ") return;
@@ -13154,7 +13270,8 @@ function onOfferCardKeyDown(event, onClick) {
 }
 
 // src/client/components/offers/shared/OfferAssetCard.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
+var LOGO_SIZES = "(min-width: 768px) 48px, 40px";
 function OfferAssetCard({
   offer,
   onClick,
@@ -13162,7 +13279,7 @@ function OfferAssetCard({
   containerClassName
 }) {
   const interactive = onClick !== void 0;
-  const card = /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  const card = /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     "article",
     {
       className: cn(
@@ -13176,11 +13293,13 @@ function OfferAssetCard({
       tabIndex: interactive ? 0 : void 0,
       onClick,
       onKeyDown: interactive ? (event) => onOfferCardKeyDown(event, onClick) : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:flex-1 clcosdk:items-center clcosdk:gap-2.5 clcosdk:pr-3 clcosdk:md:gap-3 clcosdk:md:pr-4", children: [
-        offer.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "clcosdk:h-10 clcosdk:w-10 clcosdk:shrink-0 clcosdk:overflow-hidden clcosdk:rounded-full clcosdk:md:h-12 clcosdk:md:w-12", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-          "img",
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:flex-1 clcosdk:items-center clcosdk:gap-2.5 clcosdk:pr-3 clcosdk:md:gap-3 clcosdk:md:pr-4", children: [
+        offer.logo ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "clcosdk:h-10 clcosdk:w-10 clcosdk:shrink-0 clcosdk:overflow-hidden clcosdk:rounded-full clcosdk:md:h-12 clcosdk:md:w-12", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          ThemedImage,
           {
-            src: offer.logoUrl,
+            light: offer.logo.light,
+            dark: offer.logo.dark ?? void 0,
+            sizes: LOGO_SIZES,
             alt: "",
             width: 48,
             height: 48,
@@ -13188,8 +13307,8 @@ function OfferAssetCard({
             style: { maxWidth: "none", width: "100%", height: "100%" }
           }
         ) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:flex-1 clcosdk:flex-col clcosdk:items-start clcosdk:justify-center", children: [
-          offer.name ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:flex-1 clcosdk:flex-col clcosdk:items-start clcosdk:justify-center", children: [
+          offer.name ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             "h2",
             {
               className: cn(
@@ -13198,13 +13317,13 @@ function OfferAssetCard({
               children: offer.name
             }
           ) : null,
-          offer.symbol ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "clcosdk:w-full clcosdk:truncate clcosdk:text-[13px] clcosdk:leading-[150%] clcosdk:font-normal clcosdk:text-text-secondary clcosdk:md:text-[14px]", children: offer.symbol }) : null
+          offer.symbol ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "clcosdk:w-full clcosdk:truncate clcosdk:text-[13px] clcosdk:leading-[150%] clcosdk:font-normal clcosdk:text-text-secondary clcosdk:md:text-[14px]", children: offer.symbol }) : null
         ] })
       ] })
     }
   );
-  const wrapped = containerClassName ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: containerClassName, children: card }) : card;
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(CoinListStyleScope, { children: wrapped });
+  const wrapped = containerClassName ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: containerClassName, children: card }) : card;
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CoinListStyleScope, { children: wrapped });
 }
 function cardActionLabel(offer) {
   const parts = [offer.name, offer.symbol].filter(Boolean);
@@ -13212,7 +13331,7 @@ function cardActionLabel(offer) {
 }
 
 // src/client/components/offers/grid/OffersAssetGrid.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var DEFAULT_MAX_COLUMNS = 3;
 function OffersAssetGrid({
   offers,
@@ -13227,14 +13346,14 @@ function OffersAssetGrid({
   );
   const maxGridWidth = `calc(${cols} * 20rem + ${Math.max(cols - 1, 0)} * 1.5rem)`;
   const interactive = onOfferClick !== void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "div",
     {
       className: cn(
         "clcosdk:flex clcosdk:w-full clcosdk:justify-center",
         containerClassName
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
         "div",
         {
           className: cn(
@@ -13244,7 +13363,7 @@ function OffersAssetGrid({
             className
           ),
           style: { maxWidth: maxGridWidth },
-          children: offers.map((offer) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+          children: offers.map((offer) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             OfferAssetCard,
             {
               offer,
@@ -13286,7 +13405,9 @@ function saleCardStatus({
 }
 
 // src/client/components/offers/shared/OfferSaleCard.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var HEADER_LOGO_SIZES = "(min-width: 768px) 36px, 32px";
+var WATERMARK_SIZES = "(min-width: 768px) 20rem, 15rem";
 function OfferSaleCard({
   offer,
   onClick,
@@ -13301,7 +13422,8 @@ function OfferSaleCard({
     secondsLeft
   });
   const interactive = onClick !== void 0;
-  const card = /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+  const logo = offer.logo ? offer.logo.dark ?? offer.logo.light : null;
+  const card = /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     "article",
     {
       className: cn(
@@ -13316,16 +13438,17 @@ function OfferSaleCard({
       onClick,
       onKeyDown: interactive ? (event) => onOfferCardKeyDown(event, onClick) : void 0,
       children: [
-        offer.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+        logo ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
           "div",
           {
             "aria-hidden": "true",
             className: "clcosdk:pointer-events-none clcosdk:absolute clcosdk:top-1/2 clcosdk:right-[-14%] clcosdk:z-0 clcosdk:size-[15rem] clcosdk:-translate-y-1/2 clcosdk:md:right-[-10%] clcosdk:md:size-[20rem]",
             style: { mixBlendMode: "overlay" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-              "img",
+            children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              ThemedImage,
               {
-                src: offer.logoUrl,
+                light: logo,
+                sizes: WATERMARK_SIZES,
                 alt: "",
                 className: "clcosdk:size-full clcosdk:rounded-full clcosdk:object-cover",
                 style: { maxWidth: "none", width: "100%", height: "100%" }
@@ -13333,12 +13456,13 @@ function OfferSaleCard({
             )
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "clcosdk:relative clcosdk:z-10 clcosdk:flex clcosdk:flex-col clcosdk:gap-2 clcosdk:md:gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:items-center clcosdk:gap-2.5 clcosdk:md:gap-3", children: [
-            offer.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "clcosdk:h-8 clcosdk:w-8 clcosdk:shrink-0 clcosdk:overflow-hidden clcosdk:rounded-full clcosdk:md:h-9 clcosdk:md:w-9", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-              "img",
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "clcosdk:relative clcosdk:z-10 clcosdk:flex clcosdk:flex-col clcosdk:gap-2 clcosdk:md:gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:items-center clcosdk:gap-2.5 clcosdk:md:gap-3", children: [
+            logo ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "clcosdk:h-8 clcosdk:w-8 clcosdk:shrink-0 clcosdk:overflow-hidden clcosdk:rounded-full clcosdk:md:h-9 clcosdk:md:w-9", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+              ThemedImage,
               {
-                src: offer.logoUrl,
+                light: logo,
+                sizes: HEADER_LOGO_SIZES,
                 alt: "",
                 width: 36,
                 height: 36,
@@ -13346,7 +13470,7 @@ function OfferSaleCard({
                 style: { maxWidth: "none", width: "100%", height: "100%" }
               }
             ) }) : null,
-            offer.name ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            offer.name ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
               "h2",
               {
                 className: cn(
@@ -13356,7 +13480,7 @@ function OfferSaleCard({
               }
             ) : null
           ] }),
-          offer.tagline ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+          offer.tagline ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             "p",
             {
               className: cn(
@@ -13367,20 +13491,20 @@ function OfferSaleCard({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "clcosdk:relative clcosdk:z-10 clcosdk:mt-auto clcosdk:flex clcosdk:h-11 clcosdk:w-full clcosdk:min-w-0 clcosdk:items-center clcosdk:justify-between clcosdk:gap-2 clcosdk:rounded-full clcosdk:border clcosdk:border-sale-card-chrome-border clcosdk:bg-sale-card-chrome-bg clcosdk:py-1.5 clcosdk:pr-1.5 clcosdk:pl-3 clcosdk:md:h-[54px] clcosdk:md:gap-3 clcosdk:md:py-2 clcosdk:md:pr-2 clcosdk:md:pl-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:items-center clcosdk:gap-2 clcosdk:md:gap-3", children: [
-            status.phase === "live" ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "clcosdk:relative clcosdk:z-10 clcosdk:mt-auto clcosdk:flex clcosdk:h-11 clcosdk:w-full clcosdk:min-w-0 clcosdk:items-center clcosdk:justify-between clcosdk:gap-2 clcosdk:rounded-full clcosdk:border clcosdk:border-sale-card-chrome-border clcosdk:bg-sale-card-chrome-bg clcosdk:py-1.5 clcosdk:pr-1.5 clcosdk:pl-3 clcosdk:md:h-[54px] clcosdk:md:gap-3 clcosdk:md:py-2 clcosdk:md:pr-2 clcosdk:md:pl-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:items-center clcosdk:gap-2 clcosdk:md:gap-3", children: [
+            status.phase === "live" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
               "span",
               {
                 className: "clcosdk:relative clcosdk:inline-flex clcosdk:size-2 clcosdk:shrink-0",
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "clcosdk-status-dot-ping clcosdk:absolute clcosdk:inset-0 clcosdk:rounded-full clcosdk:bg-positive" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "clcosdk:relative clcosdk:inline-flex clcosdk:size-full clcosdk:rounded-full clcosdk:bg-positive" })
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "clcosdk-status-dot-ping clcosdk:absolute clcosdk:inset-0 clcosdk:rounded-full clcosdk:bg-positive" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "clcosdk:relative clcosdk:inline-flex clcosdk:size-full clcosdk:rounded-full clcosdk:bg-positive" })
                 ]
               }
             ) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
               "p",
               {
                 className: cn(
@@ -13391,7 +13515,7 @@ function OfferSaleCard({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
             "span",
             {
               className: cn(
@@ -13401,8 +13525,8 @@ function OfferSaleCard({
               "aria-hidden": "true",
               children: [
                 "View",
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "clcosdk:max-md:hidden", children: " offer" }),
-                /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react13.ArrowRight, { className: "clcosdk:size-4", "aria-hidden": true })
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "clcosdk:max-md:hidden", children: " offer" }),
+                /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react13.ArrowRight, { className: "clcosdk:size-4", "aria-hidden": true })
               ]
             }
           )
@@ -13410,8 +13534,8 @@ function OfferSaleCard({
       ]
     }
   );
-  const wrapped = containerClassName ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: containerClassName, children: card }) : card;
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(CoinListStyleScope, { children: wrapped });
+  const wrapped = containerClassName ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: containerClassName, children: card }) : card;
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CoinListStyleScope, { children: wrapped });
 }
 var SALE_PHASE_LABEL = {
   upcoming: "Upcoming",
@@ -13424,10 +13548,10 @@ function cardActionLabel2(offer, phase) {
 }
 
 // src/client/components/offers/grid/OffersGridView.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 var DEFAULT_MAX_COLUMNS2 = 2;
 function OffersGridView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(OffersGridViewBody, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(OffersGridViewBody, { ...props }) });
 }
 function OffersGridViewBody({
   state,
@@ -13441,13 +13565,13 @@ function OffersGridViewBody({
 }) {
   switch (state.type) {
     case "loading":
-      return loading ?? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(LoadingState, {});
+      return loading ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(LoadingState, {});
     case "error":
-      return error ?? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ErrorState, { message: state.message });
+      return error ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ErrorState, { message: state.message });
     case "empty":
-      return emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(EmptyState, {});
+      return emptyState ?? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(EmptyState, {});
     case "content":
-      return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         OffersGridContent,
         {
           offers: state.offers,
@@ -13477,14 +13601,14 @@ function OffersGridContent({
     Math.max(1, maxColumns ?? DEFAULT_MAX_COLUMNS2)
   );
   const maxGridWidth = `calc(${cols} * 28rem + ${Math.max(cols - 1, 0)} * 1.5rem)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "div",
     {
       className: cn(
         "clcosdk:flex clcosdk:w-full clcosdk:justify-center",
         containerClassName
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         "div",
         {
           className: cn(
@@ -13493,7 +13617,7 @@ function OffersGridContent({
             className
           ),
           style: { maxWidth: maxGridWidth },
-          children: offers.map((offer) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          children: offers.map((offer) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             OfferSaleCard,
             {
               offer,
@@ -13507,17 +13631,17 @@ function OffersGridContent({
   );
 }
 function LoadingState() {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "output",
     {
       "aria-live": "polite",
       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__ */ (0, import_jsx_runtime54.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading offers..." })
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading offers..." })
     }
   );
 }
 function ErrorState({ message }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     AlertBanner,
     {
       variant: "error",
@@ -13528,13 +13652,13 @@ function ErrorState({ message }) {
   );
 }
 function EmptyState() {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     "output",
     {
       "aria-live": "polite",
       className: "clcosdk:flex clcosdk:min-h-40 clcosdk:flex-col clcosdk:items-center clcosdk:justify-center clcosdk:gap-2 clcosdk:rounded-2xl clcosdk:border clcosdk:border-border clcosdk:bg-background clcosdk:p-6 clcosdk:text-center",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "p",
           {
             className: cn(
@@ -13544,14 +13668,14 @@ function EmptyState() {
             children: "No offers available"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"), children: "Check back soon for upcoming opportunities." })
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"), children: "Check back soon for upcoming opportunities." })
       ]
     }
   );
 }
 
 // src/client/hooks/offers/grid/useOffersGridViewModel.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 
 // src/client/hooks/offers/data/useOffers.ts
 var import_react36 = require("react");
@@ -13609,19 +13733,56 @@ function useOffers(options = {}) {
   return { offersState };
 }
 
+// src/client/hooks/offers/shared/offer-logo.types.ts
+var CARD_LOGO_WIDTH = 96;
+var OfferLogoUi = {
+  /**
+   * The registry's logo for the token an offer is about, or the offer's own
+   * artwork otherwise, or `null` when neither exists.
+   *
+   * The registry wins when both exist because it is the token's real artwork
+   * where `Offer.logoUrl` is catalogue artwork, and because a swap publishes
+   * without artwork more often than not - which is why `logoUrl` is `null`
+   * on the swap variants.
+   */
+  fromOffer: (offer, tokenMetadata) => {
+    const light = tokenMetadata ? logoImage(tokenMetadata.logo) : null;
+    if (light !== null) {
+      const dark = tokenMetadata?.logoDark ? logoImage(tokenMetadata.logoDark) : null;
+      return { light, dark };
+    }
+    return offer.logoUrl ? { light: { src: offer.logoUrl }, dark: null } : null;
+  }
+};
+function logoImage(logo) {
+  const src = tokenLogoUrl(logo, CARD_LOGO_WIDTH);
+  if (src === null) {
+    return null;
+  }
+  const srcSet = tokenLogoSrcSet(logo);
+  return srcSet === null ? { src } : { src, srcSet };
+}
+
 // src/client/hooks/offers/shared/offer-sale-card.types.ts
 var OfferSaleCardUi = {
-  fromOffer: (offer) => ({
+  /**
+   * `tokenMetadata` is the registry's entry for the token the offer is about
+   * (`TokenRegistrySnapshot.forOffer`), or `null` when it lists none. The
+   * registry names win over the offer's own where both exist: they are the
+   * token's canonical name and artwork, where the offer's are catalogue copy.
+   */
+  fromOffer: (offer, tokenMetadata = null) => ({
     id: offer.id,
+    ...tokenMetadata ? { name: tokenMetadata.name } : {},
     ...saleWindow(offer),
-    logoUrl: offer.logoUrl,
+    logo: OfferLogoUi.fromOffer(offer, tokenMetadata),
     endsAt: offer.endsAt
   }),
-  fromDetail: (detail) => ({
+  fromDetail: (detail, tokenMetadata = null) => ({
     id: detail.id,
-    name: detail.name,
+    name: tokenMetadata?.name ?? detail.name,
     ...saleWindow(detail),
-    logoUrl: detail.logoUrl,
+    logo: OfferLogoUi.fromOffer(detail, tokenMetadata),
     endsAt: detail.endsAt
   })
 };
@@ -13639,17 +13800,80 @@ function saleWindow(offer) {
   }
 }
 
+// src/client/hooks/shared/useTokenRegistry.ts
+var import_react37 = require("react");
+var DISABLED_STATE2 = { type: "DISABLED" };
+var LOADING_STATE4 = { type: "LOADING" };
+function useTokenRegistry(options = {}) {
+  const { data, enabled = true } = options;
+  const { coinlist, isReady } = useCoinList();
+  const log = useLogger("useTokenRegistry");
+  const [state, setState] = (0, import_react37.useState)(
+    () => data !== void 0 ? { type: "CONTENT", registry: TokenRegistrySnapshot.fromTokens(data) } : LOADING_STATE4
+  );
+  const [refetchCount, setRefetchCount] = (0, import_react37.useState)(0);
+  const refetch = (0, import_react37.useCallback)(() => {
+    setRefetchCount((count) => count + 1);
+  }, []);
+  (0, import_react37.useEffect)(() => {
+    let isCancelled = false;
+    const seedActive = data !== void 0 && refetchCount === 0;
+    if (!isReady || !enabled || seedActive) {
+      return () => {
+        isCancelled = true;
+      };
+    }
+    setState(LOADING_STATE4);
+    coinlist.tokens.list().then((tokens) => {
+      if (!isCancelled) {
+        log.debug(() => ({
+          msg: "settled",
+          fields: { state: "CONTENT", count: tokens.length }
+        }));
+        setState({
+          type: "CONTENT",
+          registry: TokenRegistrySnapshot.fromTokens(tokens)
+        });
+      }
+    }).catch((error) => {
+      if (!isCancelled) {
+        log.failure(
+          () => ({
+            msg: "settled",
+            fields: { state: "ERROR", reason: "generic-error" }
+          }),
+          error
+        );
+        setState({ type: "ERROR", reason: "generic-error" });
+      }
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, [coinlist, isReady, enabled, data, refetchCount, log]);
+  return {
+    // LOADING would be a lie while disabled: nothing is in flight and nothing
+    // will replace it. Settled states (a seed, a previous answer) survive.
+    state: !enabled && state.type === "LOADING" ? DISABLED_STATE2 : state,
+    refetch
+  };
+}
+
 // src/client/hooks/offers/grid/useOffersGridViewModel.ts
 var NOT_AUTHENTICATED_MESSAGE = "Sign in to view available offers.";
 var GENERIC_ERROR_MESSAGE = "Unable to load offers right now. Please try again.";
 function useOffersGridViewModel(options = {}) {
   const { data, onOfferClick, enabled = true } = options;
-  const { offersState } = useOffers({ data, enabled });
-  const state = (0, import_react37.useMemo)(
-    () => toUiState(offersState, onOfferClick !== void 0),
-    [offersState, onOfferClick]
+  const { offersState } = useOffers({ data: data?.offers, enabled });
+  const { state: registryState } = useTokenRegistry({
+    data: data?.tokens,
+    enabled
+  });
+  const state = (0, import_react38.useMemo)(
+    () => toUiState(offersState, registryState, onOfferClick !== void 0),
+    [offersState, registryState, onOfferClick]
   );
-  const onEvent = (0, import_react37.useCallback)(
+  const onEvent = (0, import_react38.useCallback)(
     (event) => {
       switch (event.type) {
         case "ON_OFFER_CLICK": {
@@ -13672,7 +13896,7 @@ function useOffersGridViewModel(options = {}) {
   );
   return { state, onEvent };
 }
-function toUiState(offersState, interactive) {
+function toUiState(offersState, registryState, interactive) {
   switch (offersState.type) {
     case "LOADING":
       return { type: "loading" };
@@ -13685,9 +13909,18 @@ function toUiState(offersState, interactive) {
       if (offersState.offers.length === 0) {
         return { type: "empty" };
       }
+      if (registryState.type === "LOADING") {
+        return { type: "loading" };
+      }
+      const registry = registryState.type === "CONTENT" ? registryState.registry : null;
       return {
         type: "content",
-        offers: offersState.offers.map(OfferSaleCardUi.fromOffer),
+        offers: offersState.offers.map(
+          (offer) => OfferSaleCardUi.fromOffer(
+            offer,
+            registry ? TokenRegistrySnapshot.forOffer(registry, offer) : null
+          )
+        ),
         interactive
       };
     }
@@ -13699,7 +13932,7 @@ function toUiState(offersState, interactive) {
 }
 
 // src/client/components/offers/grid/OffersGridContainer.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function OffersGridContainer({
   data,
   onOfferClick,
@@ -13711,17 +13944,17 @@ function OffersGridContainer({
     onOfferClick,
     enabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(OffersGridView, { state, onEvent, ...viewProps });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(OffersGridView, { state, onEvent, ...viewProps });
 }
 
 // src/client/components/requirements/ConnectedWalletList.tsx
-var import_react38 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_react39 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function ConnectedWalletRow({
   wallet,
   onRemove
 }) {
-  const [state, setState] = (0, import_react38.useState)("idle");
+  const [state, setState] = (0, import_react39.useState)("idle");
   const remove = async () => {
     if (!onRemove) return;
     setState("removing");
@@ -13732,8 +13965,8 @@ function ConnectedWalletRow({
       setState("error");
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "clcosdk:flex clcosdk:min-h-9 clcosdk:flex-wrap clcosdk:items-center clcosdk:justify-between clcosdk:gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "clcosdk:flex clcosdk:min-h-9 clcosdk:flex-wrap clcosdk:items-center clcosdk:justify-between clcosdk:gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "span",
       {
         title: wallet.address,
@@ -13744,16 +13977,16 @@ function ConnectedWalletRow({
         children: wallet.shortAddress
       }
     ),
-    onRemove != null && (state === "confirming" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    onRemove != null && (state === "confirming" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         "span",
         {
           className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"),
           children: "Remove?"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ClButton, { size: "sm", variant: "destructive", onClick: remove, children: "Remove" }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ClButton, { size: "sm", variant: "destructive", onClick: remove, children: "Remove" }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         ClButton,
         {
           size: "sm",
@@ -13762,9 +13995,9 @@ function ConnectedWalletRow({
           children: "Cancel"
         }
       )
-    ] }) : state === "error" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: cn(typeClasses.subhead, "clcosdk:text-error"), children: "Couldn't remove." }),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    ] }) : state === "error" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: cn(typeClasses.subhead, "clcosdk:text-error"), children: "Couldn't remove." }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
         ClButton,
         {
           size: "sm",
@@ -13773,7 +14006,7 @@ function ConnectedWalletRow({
           children: "Try again"
         }
       )
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       ClButton,
       {
         size: "sm",
@@ -13786,7 +14019,7 @@ function ConnectedWalletRow({
   ] });
 }
 function ConnectedWalletList(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ConnectedWalletListBody, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ConnectedWalletListBody, { ...props }) });
 }
 function ConnectedWalletListBody({
   wallets,
@@ -13796,18 +14029,18 @@ function ConnectedWalletListBody({
   status = "ready",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
     "div",
     {
       className: cn("clcosdk:flex clcosdk:flex-col clcosdk:gap-2", className),
       children: [
-        status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(AlertBanner, { variant: "info", content: "Loading your connected wallets\u2026" }) : status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AlertBanner, { variant: "info", content: "Loading your connected wallets\u2026" }) : status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           AlertBanner,
           {
             variant: "error",
             content: "Couldn't load your connected wallets."
           }
-        ) : wallets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(AlertBanner, { variant: "info", content: "No wallets connected yet." }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:divide-y clcosdk:divide-divider", children: wallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        ) : wallets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AlertBanner, { variant: "info", content: "No wallets connected yet." }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:divide-y clcosdk:divide-divider", children: wallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           ConnectedWalletRow,
           {
             wallet,
@@ -13815,7 +14048,7 @@ function ConnectedWalletListBody({
           },
           wallet.id
         )) }),
-        onAdd != null && status !== "loading" && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        onAdd != null && status !== "loading" && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           ClButton,
           {
             size: "sm",
@@ -13832,9 +14065,9 @@ function ConnectedWalletListBody({
 
 // src/client/components/requirements/identity-verification/IdentityVerificationView.tsx
 var import_websdk_react = __toESM(require("@sumsub/websdk-react"), 1);
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function IdentityVerificationView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(IdentityVerificationViewBody, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(IdentityVerificationViewBody, { ...props }) });
 }
 function IdentityVerificationViewBody({
   state,
@@ -13843,7 +14076,7 @@ function IdentityVerificationViewBody({
 }) {
   switch (state.type) {
     case "loading":
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         "output",
         {
           "aria-live": "polite",
@@ -13851,11 +14084,11 @@ function IdentityVerificationViewBody({
             "clcosdk:flex clcosdk:min-h-40 clcosdk:items-center clcosdk:justify-center",
             className
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading identity verification..." })
+          children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading identity verification..." })
         }
       );
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
         "div",
         {
           className: cn(
@@ -13863,13 +14096,13 @@ function IdentityVerificationViewBody({
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(AlertBanner, { variant: "error", icon: true, content: state.message }),
-            state.retryable && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ClButton, { size: "sm", onClick: () => onEvent({ type: "ON_RETRY" }), children: "Try again" })
+            /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(AlertBanner, { variant: "error", icon: true, content: state.message }),
+            state.retryable && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ClButton, { size: "sm", onClick: () => onEvent({ type: "ON_RETRY" }), children: "Try again" })
           ]
         }
       );
     case "ready":
-      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cn("clcosdk:w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: cn("clcosdk:w-full", className), children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
         import_websdk_react.default,
         {
           accessToken: state.accessToken,
@@ -13909,25 +14142,25 @@ function toError(error) {
 }
 
 // src/client/hooks/requirements/identity-verification/useIdentityVerificationViewModel.ts
-var import_react40 = require("react");
+var import_react41 = require("react");
 
 // src/client/hooks/requirements/data/useKycToken.ts
-var import_react39 = require("react");
+var import_react40 = require("react");
 var IDLE_STATE = { type: "IDLE" };
-var LOADING_STATE4 = { type: "LOADING" };
+var LOADING_STATE5 = { type: "LOADING" };
 function useKycToken(levelName, reset) {
   const { coinlist } = useCoinList();
   const log = useLogger("useKycToken");
-  const [kycTokenState, setKycTokenState] = (0, import_react39.useState)(IDLE_STATE);
-  const resetPendingRef = (0, import_react39.useRef)(reset === true);
-  const tokenIssuedRef = (0, import_react39.useRef)(false);
-  (0, import_react39.useEffect)(() => {
+  const [kycTokenState, setKycTokenState] = (0, import_react40.useState)(IDLE_STATE);
+  const resetPendingRef = (0, import_react40.useRef)(reset === true);
+  const tokenIssuedRef = (0, import_react40.useRef)(false);
+  (0, import_react40.useEffect)(() => {
     if (!tokenIssuedRef.current) {
       resetPendingRef.current = reset === true;
     }
   }, [reset]);
-  const fetchToken = (0, import_react39.useCallback)(async () => {
-    setKycTokenState(LOADING_STATE4);
+  const fetchToken = (0, import_react40.useCallback)(async () => {
+    setKycTokenState(LOADING_STATE5);
     try {
       const kycToken = await coinlist.requirements.createKycToken({
         levelName,
@@ -13960,8 +14193,8 @@ var GENERIC_ERROR_MESSAGE2 = "Unable to start identity verification right now. P
 function useIdentityVerificationViewModel(options = {}) {
   const { levelName, reset, locale, onSubmitted, onError } = options;
   const { kycTokenState, fetchToken } = useKycToken(levelName, reset);
-  const fetchedRef = (0, import_react40.useRef)(false);
-  (0, import_react40.useEffect)(() => {
+  const fetchedRef = (0, import_react41.useRef)(false);
+  (0, import_react41.useEffect)(() => {
     if (fetchedRef.current) {
       return;
     }
@@ -13969,7 +14202,7 @@ function useIdentityVerificationViewModel(options = {}) {
     fetchToken().catch(() => {
     });
   }, [fetchToken]);
-  const state = (0, import_react40.useMemo)(() => {
+  const state = (0, import_react41.useMemo)(() => {
     switch (kycTokenState.type) {
       case "IDLE":
       case "LOADING":
@@ -13995,7 +14228,7 @@ function useIdentityVerificationViewModel(options = {}) {
       }
     }
   }, [kycTokenState, locale, fetchToken]);
-  const onEvent = (0, import_react40.useCallback)(
+  const onEvent = (0, import_react41.useCallback)(
     (event) => {
       switch (event.type) {
         case "ON_RETRY":
@@ -14020,7 +14253,7 @@ function useIdentityVerificationViewModel(options = {}) {
 }
 
 // src/client/components/requirements/identity-verification/IdentityVerificationContainer.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function IdentityVerificationContainer({
   levelName,
   reset,
@@ -14036,7 +14269,7 @@ function IdentityVerificationContainer({
     onSubmitted,
     onError
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     IdentityVerificationView,
     {
       state,
@@ -14051,7 +14284,7 @@ var import_lucide_react15 = require("lucide-react");
 
 // src/client/components/design-system/StepStatusIcon.tsx
 var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var statusConfig = {
   required: {
     Icon: import_lucide_react14.Info,
@@ -14076,7 +14309,7 @@ var statusConfig = {
 };
 function StepStatusIcon({ status, className }) {
   const { Icon, colorClass, fillClass } = statusConfig[status];
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Icon,
     {
       className: cn(
@@ -14091,49 +14324,90 @@ function StepStatusIcon({ status, className }) {
 }
 
 // src/client/components/requirements/RequirementItem.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
+var DEFAULT_PENDING = "Under review. We'll notify you when complete.";
+var DEFAULT_REJECTED = "Verification rejected.";
+var SUPPORT_LINK = "Contact support";
 function VerificationActionZone({
   status,
+  statusMessages,
   onAction,
   onContactSupport
 }) {
   switch (status) {
     case "required":
       if (onAction === null) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Continue" });
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ClButton, { size: "sm", className: "clcosdk:self-start", onClick: onAction, children: "Continue" });
     case "pending":
-      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         AlertBanner,
         {
           variant: "warning",
-          content: "Under review. We'll notify you when complete."
+          content: statusMessages?.pending ?? DEFAULT_PENDING
         }
       );
     case "completed":
-      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(AlertBanner, { variant: "success", content: "Identity verified." });
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        AlertBanner,
+        {
+          variant: "success",
+          content: statusMessages?.completed ?? "Identity verified."
+        }
+      );
     case "rejected":
-      return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         AlertBanner,
         {
           variant: "error",
-          content: onContactSupport === null ? "Verification rejected." : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-            "Verification rejected.",
-            " ",
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: onContactSupport,
-                className: "clcosdk:underline",
-                children: "Contact support"
-              }
-            ),
-            "."
-          ] })
+          content: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            RejectedMessage,
+            {
+              message: statusMessages?.rejected ?? DEFAULT_REJECTED,
+              onContactSupport
+            }
+          )
         }
       );
   }
 }
+function RejectedMessage({
+  message,
+  onContactSupport
+}) {
+  const linkAt = message.indexOf(SUPPORT_LINK);
+  if (onContactSupport == null) {
+    return message;
+  }
+  if (linkAt === -1) {
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+      message,
+      " ",
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onContactSupport,
+          className: "clcosdk:underline",
+          children: SUPPORT_LINK
+        }
+      ),
+      "."
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+    message.slice(0, linkAt),
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onContactSupport,
+        className: "clcosdk:underline",
+        children: SUPPORT_LINK
+      }
+    ),
+    message.slice(linkAt + SUPPORT_LINK.length)
+  ] });
+}
 function WalletActionZone({
   status,
   multiWallet,
@@ -14143,8 +14417,8 @@ function WalletActionZone({
   onRemoveWallet
 }) {
   if (multiWallet) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         ConnectedWalletList,
         {
           wallets: connectedWallets,
@@ -14153,7 +14427,7 @@ function WalletActionZone({
           status: walletsStatus
         }
       ),
-      status === "rejected" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      status === "rejected" && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         AlertBanner,
         {
           variant: "error",
@@ -14164,21 +14438,30 @@ function WalletActionZone({
   }
   if (status === "completed") {
     const connected = connectedWallets[0];
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-      onAction !== null && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ClButton, { size: "sm", variant: "secondary", onClick: onAction, children: "Change wallet" }),
-      walletsStatus === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+      onAction !== null && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        ClButton,
+        {
+          size: "sm",
+          variant: "secondary",
+          className: "clcosdk:self-start",
+          onClick: onAction,
+          children: "Change wallet"
+        }
+      ),
+      walletsStatus === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         AlertBanner,
         {
           variant: "info",
           content: "Loading your connected wallet\u2026"
         }
-      ) : walletsStatus === "error" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      ) : walletsStatus === "error" ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         AlertBanner,
         {
           variant: "error",
           content: "Couldn't load your connected wallet."
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         AlertBanner,
         {
           variant: "success",
@@ -14188,9 +14471,9 @@ function WalletActionZone({
     ] });
   }
   if (status === "rejected") {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
-      onAction !== null && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" }),
-      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [
+      onAction !== null && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ClButton, { size: "sm", className: "clcosdk:self-start", onClick: onAction, children: "Connect wallet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
         AlertBanner,
         {
           variant: "error",
@@ -14200,7 +14483,7 @@ function WalletActionZone({
     ] });
   }
   if (onAction === null) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ClButton, { size: "sm", className: "clcosdk:self-start", onClick: onAction, children: "Connect wallet" });
 }
 function RequirementItem({
   ui,
@@ -14210,9 +14493,10 @@ function RequirementItem({
   onAction,
   onRemoveWallet,
   walletsStatus,
-  onContactSupport
+  onContactSupport,
+  spaceBeforeNextRow = true
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
       className: cn(
@@ -14220,17 +14504,17 @@ function RequirementItem({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
           "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",
+            className: "clcosdk:-mx-2 clcosdk:flex clcosdk:h-14 clcosdk:w-[calc(100%+16px)] clcosdk:cursor-pointer clcosdk:items-center clcosdk:justify-between clcosdk:rounded-2xl clcosdk:px-2 clcosdk:transition-colors clcosdk:hover:bg-surface",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(StepStatusIcon, { status: ui.status }),
-                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(StepStatusIcon, { status: ui.status }),
+                /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                   "span",
                   {
                     className: cn(
@@ -14241,7 +14525,7 @@ function RequirementItem({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 import_lucide_react15.ChevronRight,
                 {
                   className: cn(
@@ -14254,43 +14538,53 @@ function RequirementItem({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           "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__ */ (0, import_jsx_runtime60.jsx)("div", { className: "clcosdk:min-h-0 clcosdk:overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4 clcosdk:px-2 clcosdk:pb-4", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                "p",
-                {
-                  className: cn(
-                    typeClasses.subhead,
-                    "clcosdk:text-text-secondary"
+            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "clcosdk:min-h-0 clcosdk:overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+              "div",
+              {
+                className: cn(
+                  "clcosdk:flex clcosdk:flex-col clcosdk:gap-4",
+                  spaceBeforeNextRow && "clcosdk:pb-4"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                    "p",
+                    {
+                      className: cn(
+                        typeClasses.bodySm,
+                        "clcosdk:text-text-secondary"
+                      ),
+                      children: ui.description
+                    }
                   ),
-                  children: ui.description
-                }
-              ),
-              ui.variant === "verification" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                VerificationActionZone,
-                {
-                  status: ui.status,
-                  onAction,
-                  onContactSupport
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-                WalletActionZone,
-                {
-                  status: ui.status,
-                  multiWallet: ui.multiWallet,
-                  connectedWallets: ui.connectedWallets,
-                  walletsStatus,
-                  onAction,
-                  onRemoveWallet
-                }
-              )
-            ] }) })
+                  ui.variant === "verification" ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                    VerificationActionZone,
+                    {
+                      status: ui.status,
+                      statusMessages: ui.statusMessages,
+                      onAction,
+                      onContactSupport
+                    }
+                  ) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+                    WalletActionZone,
+                    {
+                      status: ui.status,
+                      multiWallet: ui.multiWallet,
+                      connectedWallets: ui.connectedWallets,
+                      walletsStatus,
+                      onAction,
+                      onRemoveWallet
+                    }
+                  )
+                ]
+              }
+            ) })
           }
         )
       ]
@@ -14299,35 +14593,29 @@ function RequirementItem({
 }
 
 // src/client/components/requirements/RequirementsChecklistView.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function RequirementsChecklistView(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(RequirementsChecklistViewBody, { ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(RequirementsChecklistViewBody, { ...props }) });
 }
 function RequirementsChecklistViewBody({
   state,
   onEvent,
   loading,
   error,
-  unauthenticatedState,
   className
 }) {
   switch (state.type) {
     case "loading":
-      return loading ?? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(LoadingState2, {});
-    case "not-authenticated":
-      return unauthenticatedState ?? null;
-    case "error":
-      return error ?? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-        AlertBanner,
+      return loading ?? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        LoadingState2,
         {
-          variant: "error",
-          icon: true,
-          content: "Unable to load requirements right now. Please try again.",
-          className: "clcosdk:w-full clcosdk:max-w-[28rem]"
+          title: state.title,
+          description: state.description,
+          className
         }
       );
-    case "content":
-      return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
+    case "error":
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
         "div",
         {
           className: cn(
@@ -14335,46 +14623,91 @@ function RequirementsChecklistViewBody({
             className
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
-              /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: state.description })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:divide-y clcosdk:divide-divider", children: state.items.map((row) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-              RequirementItem,
-              {
-                ui: row.item,
-                expanded: row.expanded,
-                onToggle: () => onEvent({ type: "ON_TOGGLE_ITEM", requirementId: row.id }),
-                onAction: row.actionEnabled ? () => onEvent({
-                  type: "ON_REQUIREMENT_ACTION",
-                  requirementId: row.id
-                }) : null,
-                onRemoveWallet: row.wallets ? (id) => state.removeWallet(id) : void 0,
-                walletsStatus: row.wallets?.status,
-                onContactSupport: row.contactSupportEnabled ? () => onEvent({
-                  type: "ON_CONTACT_SUPPORT",
-                  requirementId: row.id
-                }) : null
-              },
-              row.id
-            )) }),
-            state.ineligible && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
+            error ?? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
               AlertBanner,
               {
                 variant: "error",
                 icon: true,
-                content: "You are not eligible to participate."
+                content: "Unable to load requirements. Refresh the page to try again."
               }
-            ),
-            state.continueAction && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+            )
+          ]
+        }
+      );
+    case "content":
+      return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+        "div",
+        {
+          className: cn(
+            "clcosdk:flex clcosdk:w-full clcosdk:flex-col clcosdk:gap-4",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
+              state.blockedMessage == null && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                "p",
+                {
+                  className: cn(typeClasses.body, "clcosdk:text-text-secondary"),
+                  children: state.items.length === 0 ? "No requirements to complete." : state.description
+                }
+              )
+            ] }),
+            state.blockedMessage != null ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(AlertBanner, { variant: "info", icon: true, content: state.blockedMessage }) : state.items.length === 0 ? state.continueAction && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
               ClButton,
               {
+                variant: "primary",
                 fullWidth: true,
                 disabled: !state.continueAction.enabled,
                 onClick: () => onEvent({ type: "ON_CONTINUE" }),
                 children: "Continue"
               }
-            )
+            ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:divide-y clcosdk:divide-divider", children: state.items.map((row, index) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                RequirementItem,
+                {
+                  ui: row.item,
+                  expanded: row.expanded,
+                  spaceBeforeNextRow: index < state.items.length - 1,
+                  onToggle: () => onEvent({ type: "ON_TOGGLE_ITEM", requirementId: row.id }),
+                  onAction: row.actionEnabled ? () => onEvent({
+                    type: "ON_REQUIREMENT_ACTION",
+                    requirementId: row.id
+                  }) : null,
+                  onRemoveWallet: row.wallets ? (id) => state.removeWallet(id) : void 0,
+                  walletsStatus: row.wallets?.status,
+                  onContactSupport: row.contactSupportEnabled ? () => onEvent({
+                    type: "ON_CONTACT_SUPPORT",
+                    requirementId: row.id
+                  }) : null
+                },
+                row.id
+              )) }),
+              /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-row clcosdk:items-center clcosdk:justify-between clcosdk:gap-6", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      typeClasses.subhead,
+                      "clcosdk:min-w-0",
+                      state.ineligible ? "clcosdk:text-error" : "clcosdk:text-text-secondary"
+                    ),
+                    children: state.ineligible ? "You are not eligible to invest." : completedLabel(state.items)
+                  }
+                ),
+                state.continueAction && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+                  ClButton,
+                  {
+                    variant: "primary",
+                    disabled: !state.continueAction.enabled,
+                    onClick: () => onEvent({ type: "ON_CONTINUE" }),
+                    className: "clcosdk:shrink-0",
+                    children: "Continue"
+                  }
+                )
+              ] })
+            ] })
           ]
         }
       );
@@ -14384,19 +14717,43 @@ function RequirementsChecklistViewBody({
     }
   }
 }
-function LoadingState2() {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
-    "output",
+function completedLabel(items) {
+  const completed = items.filter(
+    (row) => row.item.status === "completed"
+  ).length;
+  return `${completed}/${items.length} completed`;
+}
+var LOADING_ROW_WIDTHS = [
+  "clcosdk:w-3/5",
+  "clcosdk:w-2/5",
+  "clcosdk:w-1/2"
+];
+function LoadingState2({
+  title: title2,
+  description: description2,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+    "div",
     {
-      "aria-live": "polite",
-      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__ */ (0, import_jsx_runtime61.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading requirements..." })
+      className: cn(
+        "clcosdk:flex clcosdk:w-full clcosdk:flex-col clcosdk:gap-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("output", { className: "clcosdk:sr-only", children: "Loading requirements..." }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: title2 }),
+          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: description2 })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-3", children: LOADING_ROW_WIDTHS.map((width) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Skeleton, { className: cn("clcosdk:h-8", width) }, width)) })
+      ]
     }
   );
 }
 
 // src/client/components/requirements/tax-document/TaxDocumentModalView.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function TaxDocumentModalView({
   state,
   onEvent,
@@ -14405,7 +14762,7 @@ function TaxDocumentModalView({
   if (state.type === "hidden") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("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__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("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__ */ (0, import_jsx_runtime63.jsxs)(
     "div",
     {
       className: cn(
@@ -14413,11 +14770,11 @@ function TaxDocumentModalView({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(CloseButton, { onClick: () => onEvent({ type: "ON_CLOSE" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(CloseButton, { onClick: () => onEvent({ type: "ON_CLOSE" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Screen, { screen: state.screen, onEvent })
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Screen, { screen: state.screen, onEvent })
       ]
     }
   ) }) });
@@ -14428,11 +14785,11 @@ function Screen({
 }) {
   switch (screen.type) {
     case "loading":
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(LoadingScreen, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(LoadingScreen, {});
     case "error":
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(AlertBanner, { variant: "error", icon: true, content: screen.message });
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(AlertBanner, { variant: "error", icon: true, content: screen.message });
     case "review":
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         ReviewScreen,
         {
           fields: screen.fields,
@@ -14443,9 +14800,9 @@ function Screen({
         }
       );
     case "editing":
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(EditScreen, { fields: screen.fields, onEvent });
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(EditScreen, { fields: screen.fields, onEvent });
     case "sign-only":
-      return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         SignOnlyScreen,
         {
           signing: screen.signing,
@@ -14460,14 +14817,14 @@ function Screen({
   }
 }
 function LoadingScreen() {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "output",
     {
       "aria-live": "polite",
       className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4",
-      children: [0, 1, 2, 3, 4].map((row) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "clcosdk:h-3 clcosdk:w-28 clcosdk:animate-pulse clcosdk:rounded clcosdk:bg-surface" }),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "clcosdk:h-5 clcosdk:w-48 clcosdk:animate-pulse clcosdk:rounded clcosdk:bg-surface" })
+      children: [0, 1, 2, 3, 4].map((row) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "clcosdk:h-3 clcosdk:w-28 clcosdk:animate-pulse clcosdk:rounded clcosdk:bg-surface" }),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "clcosdk:h-5 clcosdk:w-48 clcosdk:animate-pulse clcosdk:rounded clcosdk:bg-surface" })
       ] }, row))
     }
   );
@@ -14479,9 +14836,9 @@ function ReviewScreen({
   signError,
   onEvent
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Review your information below. If anything looks incorrect, edit before signing." }),
-    piiUnavailable && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Review your information below. If anything looks incorrect, edit before signing." }),
+    piiUnavailable && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       AlertBanner,
       {
         variant: "info",
@@ -14489,27 +14846,27 @@ function ReviewScreen({
         content: "We don't have this information on file yet \u2014 please fill it in below."
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: fields.map(({ field, label, displayValue }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: fields.map(({ field, label, displayValue }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
       "div",
       {
         className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             "span",
             {
               className: cn(typeClasses.label, "clcosdk:text-text-secondary"),
               children: label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: cn(typeClasses.body, "clcosdk:text-text-primary"), children: displayValue })
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: cn(typeClasses.body, "clcosdk:text-text-primary"), children: displayValue })
         ]
       },
       field
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("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." }),
-    signError && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(AlertBanner, { variant: "error", icon: true, content: signError }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("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." }),
+    signError && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(AlertBanner, { variant: "error", icon: true, content: signError }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         ClButton,
         {
           fullWidth: true,
@@ -14519,7 +14876,7 @@ function ReviewScreen({
           children: "Sign W-8BEN"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         ClButton,
         {
           fullWidth: true,
@@ -14536,20 +14893,20 @@ function EditScreen({
   fields,
   onEvent
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: fields.map(({ field, label, placeholder, value }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: fields.map(({ field, label, placeholder, value }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
       "label",
       {
         className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             "span",
             {
               className: cn(typeClasses.label, "clcosdk:text-text-secondary"),
               children: label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             "input",
             {
               type: "text",
@@ -14570,9 +14927,9 @@ function EditScreen({
       },
       field
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ClButton, { fullWidth: true, onClick: () => onEvent({ type: "ON_SAVE_EDIT" }), children: "Save & review" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ClButton, { fullWidth: true, onClick: () => onEvent({ type: "ON_SAVE_EDIT" }), children: "Save & review" }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         ClButton,
         {
           fullWidth: true,
@@ -14589,10 +14946,10 @@ function SignOnlyScreen({
   signError,
   onEvent
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("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." }),
-    signError && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(AlertBanner, { variant: "error", icon: true, content: signError }),
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("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." }),
+    signError && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(AlertBanner, { variant: "error", icon: true, content: signError }),
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
       ClButton,
       {
         fullWidth: true,
@@ -14606,12 +14963,12 @@ function SignOnlyScreen({
 }
 
 // src/client/hooks/requirements/tax-document/useTaxDocumentModalViewModel.ts
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/client/hooks/requirements/data/useTaxDocument.ts
-var import_react41 = require("react");
+var import_react42 = require("react");
 var IDLE_SIGN = { type: "idle", error: null };
-var LOADING_STATE5 = { type: "LOADING" };
+var LOADING_STATE6 = { 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 = {
@@ -14684,8 +15041,8 @@ function useTaxDocument({
 }) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useTaxDocument");
-  const [state, setState] = (0, import_react41.useState)(LOADING_STATE5);
-  (0, import_react41.useEffect)(() => {
+  const [state, setState] = (0, import_react42.useState)(LOADING_STATE6);
+  (0, import_react42.useEffect)(() => {
     let isCancelled = false;
     if (!isOpen) {
       return () => {
@@ -14693,12 +15050,12 @@ function useTaxDocument({
       };
     }
     if (!isReady) {
-      setState(LOADING_STATE5);
+      setState(LOADING_STATE6);
       return () => {
         isCancelled = true;
       };
     }
-    setState(LOADING_STATE5);
+    setState(LOADING_STATE6);
     coinlist.requirements.getPii().then((pii) => {
       if (isCancelled) return;
       if (pii.kind === "company") {
@@ -14726,7 +15083,7 @@ function useTaxDocument({
       isCancelled = true;
     };
   }, [coinlist, isReady, isOpen, log]);
-  const onEditField = (0, import_react41.useCallback)(
+  const onEditField = (0, import_react42.useCallback)(
     (field, value) => {
       setState(
         (prev) => prev.type === "EDITING" ? { ...prev, fields: { ...prev.fields, [field]: value } } : prev
@@ -14734,7 +15091,7 @@ function useTaxDocument({
     },
     []
   );
-  const onStartEdit = (0, import_react41.useCallback)(() => {
+  const onStartEdit = (0, import_react42.useCallback)(() => {
     setState(
       (prev) => prev.type === "REVIEW" ? {
         type: "EDITING",
@@ -14745,7 +15102,7 @@ function useTaxDocument({
       } : prev
     );
   }, []);
-  const onSaveEdit = (0, import_react41.useCallback)(() => {
+  const onSaveEdit = (0, import_react42.useCallback)(() => {
     setState(
       (prev) => prev.type === "EDITING" ? {
         type: "REVIEW",
@@ -14756,7 +15113,7 @@ function useTaxDocument({
       } : prev
     );
   }, []);
-  const onCancelEdit = (0, import_react41.useCallback)(() => {
+  const onCancelEdit = (0, import_react42.useCallback)(() => {
     setState(
       (prev) => prev.type === "EDITING" ? {
         type: "REVIEW",
@@ -14767,7 +15124,7 @@ function useTaxDocument({
       } : prev
     );
   }, []);
-  const onSign = (0, import_react41.useCallback)(() => {
+  const onSign = (0, import_react42.useCallback)(() => {
     if (state.type !== "REVIEW" && state.type !== "SIGN_ONLY") return;
     if (state.type === "REVIEW" && state.fields.dob.trim() !== "" && !isValidUsDate(state.fields.dob)) {
       setState({
@@ -14809,19 +15166,19 @@ function useTaxDocumentModalViewModel({
   onSubmitted
 }) {
   const { state, onEditField, onStartEdit, onSaveEdit, onCancelEdit, onSign } = useTaxDocument({ isOpen });
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (state.type === "SUBMITTED") {
       onSubmitted?.(state.submission);
       onClose();
     }
   }, [state]);
-  const uiState = (0, import_react42.useMemo)(() => {
+  const uiState = (0, import_react43.useMemo)(() => {
     if (!isOpen || state.type === "SUBMITTED") {
       return { type: "hidden" };
     }
     return { type: "content", title: toTitle(state), screen: toScreen(state) };
   }, [isOpen, state]);
-  const onEvent = (0, import_react42.useCallback)(
+  const onEvent = (0, import_react43.useCallback)(
     (event) => {
       switch (event.type) {
         case "ON_CLOSE":
@@ -14904,7 +15261,7 @@ function toFieldsUi(fields) {
 }
 
 // src/client/components/requirements/tax-document/TaxDocumentModalContainer.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function TaxDocumentModalContainer({
   isOpen,
   onClose,
@@ -14916,7 +15273,7 @@ function TaxDocumentModalContainer({
     onClose,
     onSubmitted
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     TaxDocumentModalView,
     {
       state,
@@ -14927,26 +15284,26 @@ function TaxDocumentModalContainer({
 }
 
 // src/client/components/requirements/VerificationOverlay.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function VerificationOverlay({
   onClose,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(VerificationOverlayBody, { onClose, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(VerificationOverlayBody, { onClose, children }) });
 }
 function VerificationOverlayBody({
   onClose,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     "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__ */ (0, import_jsx_runtime64.jsxs)("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__ */ (0, import_jsx_runtime64.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("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__ */ (0, import_jsx_runtime65.jsx)(
           CloseButton,
           {
             onClick: onClose,
@@ -14960,18 +15317,18 @@ function VerificationOverlayBody({
 }
 
 // src/client/components/requirements/wallet/ConnectWalletModalView.tsx
-var import_react43 = require("react");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_react44 = require("react");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function ConnectWalletModalView({
   state,
   onEvent,
   className
 }) {
-  const titleId = (0, import_react43.useId)();
+  const titleId = (0, import_react44.useId)();
   if (state.type === "hidden") {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("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__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CoinListStyleScope, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("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__ */ (0, import_jsx_runtime66.jsxs)(
     "div",
     {
       role: "dialog",
@@ -14982,8 +15339,8 @@ function ConnectWalletModalView({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             "h3",
             {
               id: titleId,
@@ -14991,9 +15348,9 @@ function ConnectWalletModalView({
               children: "Connect your wallet"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(CloseButton, { onClick: () => onEvent({ type: "ON_CLOSE" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(CloseButton, { onClick: () => onEvent({ type: "ON_CLOSE" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           Screen2,
           {
             screen: state.screen,
@@ -15012,9 +15369,9 @@ function Screen2({
 }) {
   switch (screen.type) {
     case "needs-wallet":
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Connect an external wallet to prove ownership and bind it to this offer." }),
-        canRequestConnect && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Connect an external wallet to prove ownership and bind it to this offer." }),
+        canRequestConnect && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           ClButton,
           {
             fullWidth: true,
@@ -15024,23 +15381,23 @@ function Screen2({
         )
       ] });
     case "ready":
-      return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("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__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("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__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             "span",
             {
               className: cn(typeClasses.label, "clcosdk:text-text-secondary"),
               children: "Wallet address"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: cn(typeClasses.body, "clcosdk:text-text-primary"), children: screen.shortAddress })
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: cn(typeClasses.body, "clcosdk:text-text-primary"), children: screen.shortAddress })
         ] }),
         screen.signError && // Live region: the error is inserted async after a failed attempt,
         // so screen readers need it announced rather than silently
         // rendered.
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(AlertBanner, { variant: "error", icon: true, content: screen.signError }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(AlertBanner, { variant: "error", icon: true, content: screen.signError }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           ClButton,
           {
             fullWidth: true,
@@ -15051,7 +15408,7 @@ function Screen2({
             children: "Sign & connect"
           }
         ),
-        canRequestConnect && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        canRequestConnect && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           ClButton,
           {
             fullWidth: true,
@@ -15070,10 +15427,10 @@ function Screen2({
 }
 
 // src/client/hooks/requirements/wallet/useConnectWalletModalViewModel.ts
-var import_react45 = require("react");
+var import_react46 = require("react");
 
 // src/client/hooks/requirements/data/useConnectWallet.ts
-var import_react44 = require("react");
+var import_react45 = require("react");
 
 // src/client/core/wallets/connect-external-wallet.ts
 var DEFAULT_STATEMENT = "Sign this message to prove you own this wallet. This does not cost gas or move funds.";
@@ -15204,24 +15561,24 @@ function useConnectWallet({
   statement
 }) {
   const { coinlist } = useCoinList();
-  const [state, setState] = (0, import_react44.useState)(
+  const [state, setState] = (0, import_react45.useState)(
     () => wallet ? { type: "READY", address: wallet.address, sign: IDLE_SIGN2 } : { type: "NEEDS_WALLET" }
   );
-  const attempt = (0, import_react44.useRef)(0);
-  (0, import_react44.useEffect)(() => {
+  const attempt = (0, import_react45.useRef)(0);
+  (0, import_react45.useEffect)(() => {
     attempt.current += 1;
     if (!isOpen) return;
     setState(
       wallet ? { type: "READY", address: wallet.address, sign: IDLE_SIGN2 } : { type: "NEEDS_WALLET" }
     );
   }, [isOpen, wallet?.address]);
-  (0, import_react44.useEffect)(
+  (0, import_react45.useEffect)(
     () => () => {
       attempt.current += 1;
     },
     []
   );
-  const onSign = (0, import_react44.useCallback)(() => {
+  const onSign = (0, import_react45.useCallback)(() => {
     if (!wallet || state.type !== "READY") return;
     attempt.current += 1;
     const gen = attempt.current;
@@ -15283,13 +15640,13 @@ function useConnectWalletModalViewModel({
     challengeType,
     statement
   });
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (state.type === "CONNECTED") {
       onConnected?.(state.binding);
       onClose();
     }
   }, [state]);
-  const uiState = (0, import_react45.useMemo)(() => {
+  const uiState = (0, import_react46.useMemo)(() => {
     if (!isOpen || state.type === "CONNECTED") {
       return { type: "hidden" };
     }
@@ -15314,7 +15671,7 @@ function useConnectWalletModalViewModel({
       canRequestConnect
     };
   }, [isOpen, state, onRequestConnect]);
-  const onEvent = (0, import_react45.useCallback)(
+  const onEvent = (0, import_react46.useCallback)(
     (event) => {
       switch (event.type) {
         case "ON_CLOSE":
@@ -15338,13 +15695,13 @@ function useConnectWalletModalViewModel({
 }
 
 // src/client/components/requirements/wallet/ConnectWalletModalContainer.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 function ConnectWalletModalContainer({
   className,
   ...options
 }) {
   const { state, onEvent } = useConnectWalletModalViewModel(options);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     ConnectWalletModalView,
     {
       state,
@@ -15355,11 +15712,11 @@ function ConnectWalletModalContainer({
 }
 
 // src/client/hooks/requirements/useRequirementsChecklistViewModel.ts
-var import_react48 = require("react");
+var import_react49 = require("react");
 
 // src/client/hooks/requirements/data/useOptionAddresses.ts
-var import_react46 = require("react");
-var LOADING_STATE6 = { type: "LOADING" };
+var import_react47 = require("react");
+var LOADING_STATE7 = { type: "LOADING" };
 var EMPTY_STATE = {
   type: "CONTENT",
   addresses: []
@@ -15368,19 +15725,19 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useOptionAddresses");
   const { data, enabled = true } = options;
-  const [addressesState, setAddressesState] = (0, import_react46.useState)(
-    data !== void 0 ? { type: "CONTENT", addresses: data } : LOADING_STATE6
+  const [addressesState, setAddressesState] = (0, import_react47.useState)(
+    data !== void 0 ? { type: "CONTENT", addresses: data } : LOADING_STATE7
   );
-  const [fetchKey, setFetchKey] = (0, import_react46.useState)(0);
-  const refetch = (0, import_react46.useCallback)(() => setFetchKey((k) => k + 1), []);
-  const disconnect = (0, import_react46.useCallback)(
+  const [fetchKey, setFetchKey] = (0, import_react47.useState)(0);
+  const refetch = (0, import_react47.useCallback)(() => setFetchKey((k) => k + 1), []);
+  const disconnect = (0, import_react47.useCallback)(
     async (addressId) => {
       await coinlist.wallets.remove({ offerId, addressId });
       refetch();
     },
     [coinlist, offerId, refetch]
   );
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     let isCancelled = false;
     if (!enabled) {
       setAddressesState(
@@ -15392,7 +15749,7 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
     }
     if (!isReady) {
       if (data === void 0) {
-        setAddressesState(LOADING_STATE6);
+        setAddressesState(LOADING_STATE7);
       }
       return () => {
         isCancelled = true;
@@ -15409,7 +15766,7 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
         isCancelled = true;
       };
     }
-    setAddressesState(LOADING_STATE6);
+    setAddressesState(LOADING_STATE7);
     coinlist.wallets.list({ offerId, offerOptionId }).then((addresses) => {
       if (!isCancelled) {
         log.debug(() => ({
@@ -15436,18 +15793,18 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
 }
 
 // src/client/hooks/requirements/data/useRequirements.ts
-var import_react47 = require("react");
-var LOADING_STATE7 = { type: "LOADING" };
+var import_react48 = require("react");
+var LOADING_STATE8 = { type: "LOADING" };
 function useRequirements(offerId, options = {}) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useRequirements");
   const { data, enabled = true } = options;
-  const [requirementsState, setRequirementsState] = (0, import_react47.useState)(
-    data !== void 0 ? { type: "CONTENT", ...data } : LOADING_STATE7
+  const [requirementsState, setRequirementsState] = (0, import_react48.useState)(
+    data !== void 0 ? { type: "CONTENT", ...data } : LOADING_STATE8
   );
-  const [fetchKey, setFetchKey] = (0, import_react47.useState)(0);
-  const refetch = (0, import_react47.useCallback)(() => setFetchKey((k) => k + 1), []);
-  (0, import_react47.useEffect)(() => {
+  const [fetchKey, setFetchKey] = (0, import_react48.useState)(0);
+  const refetch = (0, import_react48.useCallback)(() => setFetchKey((k) => k + 1), []);
+  (0, import_react48.useEffect)(() => {
     let isCancelled = false;
     if (!enabled) {
       return () => {
@@ -15456,7 +15813,7 @@ function useRequirements(offerId, options = {}) {
     }
     if (!isReady) {
       if (data === void 0) {
-        setRequirementsState(LOADING_STATE7);
+        setRequirementsState(LOADING_STATE8);
       }
       return () => {
         isCancelled = true;
@@ -15473,7 +15830,7 @@ function useRequirements(offerId, options = {}) {
         isCancelled = true;
       };
     }
-    setRequirementsState(LOADING_STATE7);
+    setRequirementsState(LOADING_STATE8);
     Promise.all([
       coinlist.requirements.forOffer(offerId),
       coinlist.requirements.statuses(offerId)
@@ -15515,7 +15872,7 @@ var RequirementItemUi = {
   fromDomain(req, statusInfo, label, description2, addresses = []) {
     return {
       variant: RequirementVariant.fromType(req.type),
-      status: statusInfo ? RequirementStatus.fromStatusValue(statusInfo.status) : "required",
+      status: requirementStatus(req, statusInfo),
       label,
       description: description2,
       multiWallet: req.type === "whitelisted_wallet",
@@ -15523,10 +15880,44 @@ var RequirementItemUi = {
         id: address.id,
         address: address.address,
         shortAddress: shortenAddress(address.address)
-      }))
+      })),
+      statusMessages: statusMessagesFor(req.type)
     };
   }
 };
+var IDENTITY_STATUS_MESSAGES = {
+  pending: "Verification under review. We'll notify you when it's complete.",
+  completed: "Identity verified.",
+  rejected: "We couldn't verify your identity. Contact support for help."
+};
+var ACCREDITATION_STATUS_MESSAGES = {
+  pending: "Accreditation under review. We'll notify you when it's complete.",
+  completed: "Accreditation verified.",
+  rejected: "We couldn't verify your accreditation. Contact support for help."
+};
+var TAX_DOCUMENTATION_STATUS_MESSAGES = {
+  completed: "Tax documentation completed.",
+  rejected: "We couldn't accept your tax documentation. Contact support for help."
+};
+function statusMessagesFor(type) {
+  switch (type) {
+    case "kyc_approved":
+      return IDENTITY_STATUS_MESSAGES;
+    case "accreditation":
+      return ACCREDITATION_STATUS_MESSAGES;
+    case "document":
+      return TAX_DOCUMENTATION_STATUS_MESSAGES;
+    default:
+      return void 0;
+  }
+}
+function requirementStatus(req, statusInfo) {
+  if (!statusInfo) return "required";
+  if (req.type === "document" && statusInfo.status === "in_progress") {
+    return "required";
+  }
+  return RequirementStatus.fromStatusValue(statusInfo.status);
+}
 var RequirementVariant = {
   fromType(type) {
     switch (type) {
@@ -15563,20 +15954,20 @@ var ChecklistStatus = {
 
 // src/client/hooks/requirements/useRequirementsChecklistViewModel.ts
 var DEFAULT_LABELS = {
-  kyc_approved: "KYC Verification",
+  kyc_approved: "Identity Verification",
   external_wallet: "External Wallet",
   whitelisted_wallet: "Whitelisted Wallet",
   jurisdiction: "Jurisdiction Check",
   accreditation: "Accreditation",
-  document: "Document"
+  document: "Tax Documentation"
 };
 var DEFAULT_DESCRIPTIONS = {
-  kyc_approved: "Complete Know Your Customer verification.",
+  kyc_approved: "Complete Know Your Customer (KYC) verification.",
   external_wallet: "Connect an external wallet.",
   whitelisted_wallet: "Connect a whitelisted wallet.",
   jurisdiction: "Confirm your jurisdiction eligibility.",
-  accreditation: "Verify your accreditation status.",
-  document: "Confirm your Tax Documents."
+  accreditation: "Confirm that you meet accredited investor requirements.",
+  document: "Review and sign the required tax documentation."
 };
 var VERIFICATION_POLL_INTERVAL_MS = 5e3;
 var VERIFICATION_POLL_TIMEOUT_MS = 12e4;
@@ -15607,19 +15998,19 @@ function useRequirementsChecklistViewModel(options) {
     data,
     enabled
   });
-  const [expandedId, setExpandedId] = (0, import_react48.useState)(null);
-  const [taxDocumentOpen, setTaxDocumentOpen] = (0, import_react48.useState)(false);
-  const [connectWalletOpen, setConnectWalletOpen] = (0, import_react48.useState)(false);
-  const [verifyingRequirementId, setVerifyingRequirementId] = (0, import_react48.useState)(null);
-  const isMountedRef = (0, import_react48.useRef)(true);
-  (0, import_react48.useEffect)(() => {
+  const [expandedId, setExpandedId] = (0, import_react49.useState)(null);
+  const [taxDocumentOpen, setTaxDocumentOpen] = (0, import_react49.useState)(false);
+  const [connectWalletOpen, setConnectWalletOpen] = (0, import_react49.useState)(false);
+  const [verifyingRequirementId, setVerifyingRequirementId] = (0, import_react49.useState)(null);
+  const isMountedRef = (0, import_react49.useRef)(true);
+  (0, import_react49.useEffect)(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  const [hasWalletRequirement, setHasWalletRequirement] = (0, import_react48.useState)(false);
-  (0, import_react48.useEffect)(() => {
+  const [hasWalletRequirement, setHasWalletRequirement] = (0, import_react49.useState)(false);
+  (0, import_react49.useEffect)(() => {
     if (requirementsState.type === "CONTENT") {
       setHasWalletRequirement(
         (requirementsState.requirements[optionId] ?? []).some(
@@ -15635,14 +16026,14 @@ function useRequirementsChecklistViewModel(options) {
   } = useOptionAddresses(offerId, optionId, {
     enabled: enabled && hasWalletRequirement
   });
-  const removeWallet = (0, import_react48.useCallback)(
+  const removeWallet = (0, import_react49.useCallback)(
     async (addressId) => {
       await disconnect(OfferOptionAddressId(addressId));
       refetch();
     },
     [disconnect, refetch]
   );
-  const awaitVerificationResult = (0, import_react48.useCallback)(
+  const awaitVerificationResult = (0, import_react49.useCallback)(
     (requirementId, statusBeforeSubmit) => {
       void (async () => {
         const deadline = Date.now() + VERIFICATION_POLL_TIMEOUT_MS;
@@ -15669,11 +16060,11 @@ function useRequirementsChecklistViewModel(options) {
     },
     [coinlist, offerId, refetch, log]
   );
-  const requirements = (0, import_react48.useMemo)(
+  const requirements = (0, import_react49.useMemo)(
     () => requirementsState.type === "CONTENT" ? requirementsState.requirements[optionId] ?? [] : [],
     [requirementsState, optionId]
   );
-  const statusById = (0, import_react48.useMemo)(() => {
+  const statusById = (0, import_react49.useMemo)(() => {
     if (requirementsState.type !== "CONTENT") {
       return /* @__PURE__ */ new Map();
     }
@@ -15682,12 +16073,12 @@ function useRequirementsChecklistViewModel(options) {
       requirementsState.statuses.filter((s) => ids.has(s.id)).map((s) => [s.id, s])
     );
   }, [requirementsState, requirements]);
-  const state = (0, import_react48.useMemo)(() => {
+  const state = (0, import_react49.useMemo)(() => {
     switch (requirementsState.type) {
       case "LOADING":
-        return { type: "loading" };
+        return { type: "loading", title: title2, description: description2 };
       case "ERROR":
-        return requirementsState.reason === "not-authenticated" ? { type: "not-authenticated" } : { type: "error" };
+        return { type: "error", title: title2 };
       case "CONTENT": {
         const optionStatuses = [...statusById.values()];
         const checklistStatus = ChecklistStatus.derive(optionStatuses);
@@ -15751,7 +16142,7 @@ function useRequirementsChecklistViewModel(options) {
     identityVerificationOptions,
     removeWallet
   ]);
-  const handleRequirementAction = (0, import_react48.useCallback)(
+  const handleRequirementAction = (0, import_react49.useCallback)(
     (requirement) => {
       const inlineVerification = statusById.get(requirement.id)?.kycLevel !== void 0 && onRequirementActionOverride === void 0;
       if (inlineVerification) {
@@ -15783,7 +16174,7 @@ function useRequirementsChecklistViewModel(options) {
       coinlist
     ]
   );
-  const onEvent = (0, import_react48.useCallback)(
+  const onEvent = (0, import_react49.useCallback)(
     (event) => {
       switch (event.type) {
         case "ON_TOGGLE_ITEM":
@@ -15881,11 +16272,10 @@ function toVerificationUi(verifyingRequirementId, statusById, identityVerificati
 }
 
 // src/client/components/requirements/RequirementsChecklistContainer.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function RequirementsChecklistContainer({
   loading,
   error,
-  unauthenticatedState,
   className,
   enabled = true,
   ...options
@@ -15894,24 +16284,19 @@ function RequirementsChecklistContainer({
     ...options,
     enabled
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       RequirementsChecklistView,
       {
         state,
         onEvent,
         loading,
         error,
-        unauthenticatedState: (
-          // The sign-in default lives here, not in the View: it is a connected
-          // component, and a View must render from what it is handed.
-          unauthenticatedState !== void 0 ? unauthenticatedState : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(CoinListSignInCardContainer, {})
-        ),
         className
       }
     ),
-    state.type === "content" && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+    state.type === "content" && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         TaxDocumentModalContainer,
         {
           isOpen: state.taxDocumentOpen,
@@ -15919,11 +16304,11 @@ function RequirementsChecklistContainer({
           onSubmitted: () => onEvent({ type: "ON_TAX_DOCUMENT_SUBMITTED" })
         }
       ),
-      state.verification && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      state.verification && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         VerificationOverlay,
         {
           onClose: () => onEvent({ type: "ON_CLOSE_VERIFICATION" }),
-          children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             IdentityVerificationContainer,
             {
               levelName: state.verification.levelName,
@@ -15934,7 +16319,7 @@ function RequirementsChecklistContainer({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
         ConnectWalletModalContainer,
         {
           isOpen: state.connectWalletOpen,
@@ -16095,18 +16480,18 @@ function pinoClientLogger(options) {
 }
 
 // src/client/hooks/auth/useCompleteOAuth.ts
-var import_react49 = require("react");
+var import_react50 = require("react");
 function useCompleteOAuth(options) {
   const { coinlist } = useCoinList();
   const log = useLogger("useCompleteOAuth");
-  const postOAuthCompleteRef = (0, import_react49.useRef)(options.postOAuthComplete);
-  const onFailureRef = (0, import_react49.useRef)(options.onFailure);
-  const onSuccessRef = (0, import_react49.useRef)(options.onSuccess);
+  const postOAuthCompleteRef = (0, import_react50.useRef)(options.postOAuthComplete);
+  const onFailureRef = (0, import_react50.useRef)(options.onFailure);
+  const onSuccessRef = (0, import_react50.useRef)(options.onSuccess);
   postOAuthCompleteRef.current = options.postOAuthComplete;
   onFailureRef.current = options.onFailure;
   onSuccessRef.current = options.onSuccess;
-  const hasStartedExchangeRef = (0, import_react49.useRef)(false);
-  (0, import_react49.useEffect)(() => {
+  const hasStartedExchangeRef = (0, import_react50.useRef)(false);
+  (0, import_react50.useEffect)(() => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams(window.location.search);
     if (!params.has("code") && !params.has("error")) return;
@@ -16170,16 +16555,16 @@ function useCompleteOAuth(options) {
 }
 
 // src/client/hooks/checkout/coin-list/token-sale/data/useParticipations.ts
-var import_react50 = require("react");
-var LOADING_STATE8 = { type: "LOADING" };
+var import_react51 = require("react");
+var LOADING_STATE9 = { type: "LOADING" };
 function useParticipations(offerId, options = {}) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useParticipations");
   const { data, enabled = true } = options;
-  const [participationsState, setParticipationsState] = (0, import_react50.useState)(
-    data !== void 0 ? { type: "CONTENT", participations: data } : LOADING_STATE8
+  const [participationsState, setParticipationsState] = (0, import_react51.useState)(
+    data !== void 0 ? { type: "CONTENT", participations: data } : LOADING_STATE9
   );
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     let isCancelled = false;
     if (!enabled) {
       return () => {
@@ -16188,7 +16573,7 @@ function useParticipations(offerId, options = {}) {
     }
     if (!isReady) {
       if (data === void 0) {
-        setParticipationsState(LOADING_STATE8);
+        setParticipationsState(LOADING_STATE9);
       }
       return () => {
         isCancelled = true;
@@ -16199,7 +16584,7 @@ function useParticipations(offerId, options = {}) {
         isCancelled = true;
       };
     }
-    setParticipationsState(LOADING_STATE8);
+    setParticipationsState(LOADING_STATE9);
     coinlist.tokenSale.list(offerId).then((participations) => {
       if (!isCancelled) {
         log.debug(() => ({
@@ -16226,16 +16611,16 @@ function useParticipations(offerId, options = {}) {
 }
 
 // src/client/hooks/offers/data/useOfferDetails.ts
-var import_react51 = require("react");
-var LOADING_STATE9 = { type: "LOADING" };
+var import_react52 = require("react");
+var LOADING_STATE10 = { type: "LOADING" };
 function useOfferDetails(offerId, options = {}) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useOfferDetails");
   const { data, enabled = true } = options;
-  const [offerDetailsState, setOfferDetailsState] = (0, import_react51.useState)(
-    data !== void 0 ? { type: "CONTENT", offerDetail: data } : LOADING_STATE9
+  const [offerDetailsState, setOfferDetailsState] = (0, import_react52.useState)(
+    data !== void 0 ? { type: "CONTENT", offerDetail: data } : LOADING_STATE10
   );
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     let isCancelled = false;
     if (!enabled) {
       return () => {
@@ -16244,7 +16629,7 @@ function useOfferDetails(offerId, options = {}) {
     }
     if (!isReady) {
       if (data === void 0) {
-        setOfferDetailsState(LOADING_STATE9);
+        setOfferDetailsState(LOADING_STATE10);
       }
       return () => {
         isCancelled = true;
@@ -16255,7 +16640,7 @@ function useOfferDetails(offerId, options = {}) {
         isCancelled = true;
       };
     }
-    setOfferDetailsState(LOADING_STATE9);
+    setOfferDetailsState(LOADING_STATE10);
     coinlist.offers.get(offerId).then((offerDetail) => {
       if (!isCancelled) {
         log.debug(() => ({
@@ -16283,15 +16668,23 @@ function useOfferDetails(offerId, options = {}) {
 
 // src/client/hooks/offers/shared/offer-asset-card.types.ts
 var OfferAssetCardUi = {
-  fromOffer: (offer) => ({
+  /**
+   * `tokenMetadata` is the registry's entry for the token the offer is about
+   * (`TokenRegistrySnapshot.forOffer`), or `null` when it lists none. The
+   * registry names win over the offer's own where both exist: they are the
+   * token's canonical name, ticker and artwork, where the offer's are
+   * catalogue copy.
+   */
+  fromOffer: (offer, tokenMetadata = null) => ({
     id: offer.id,
-    logoUrl: offer.logoUrl
+    ...tokenMetadata ? { name: tokenMetadata.name, symbol: String(tokenMetadata.symbol) } : {},
+    logo: OfferLogoUi.fromOffer(offer, tokenMetadata)
   }),
-  fromDetail: (detail) => ({
+  fromDetail: (detail, tokenMetadata = null) => ({
     id: detail.id,
-    name: detail.name,
-    symbol: detail.asset.code,
-    logoUrl: detail.logoUrl
+    name: tokenMetadata?.name ?? detail.name,
+    symbol: tokenMetadata ? String(tokenMetadata.symbol) : detail.asset.code,
+    logo: OfferLogoUi.fromOffer(detail, tokenMetadata)
   })
 };
 
@@ -16334,6 +16727,7 @@ function formatMonthYear(date, locale) {
   OAUTH_STATE_KEY,
   OfferAssetCard,
   OfferAssetCardUi,
+  OfferLogoUi,
   OfferSaleCard,
   OfferSaleCardUi,
   OffersAssetGrid,
@@ -16395,6 +16789,7 @@ function formatMonthYear(date, locale) {
   quoteOverAsks,
   stablecoinIconUrl,
   submitErc20Approval,
+  tokenLogoSrcSet,
   tokenLogoUrl,
   tokenMetadataOf,
   useCheckoutOfferTokenMetadata,
@@ -16437,6 +16832,7 @@ function formatMonthYear(date, locale) {
   useTaxDocument,
   useTaxDocumentModalViewModel,
   useTokenMetadata,
+  useTokenRegistry,
   validateAmount,
   validateSellAmount,
   validateSuperstateAmount