@coinlist-co/react 0.12.1-rc.6b77fc6 → 0.12.1-rc.9aec85a

package/dist/client/index.js

@@ -5,7 +5,7 @@ import {
   SDK_LOGGER_NAME,
   loggerOverPino,
   publicClients
-} from "../chunk-DOSABR7Q.js";
+} from "../chunk-DCW7NQXH.js";
 import {
   AuthorizationCode,
   CodeVerifier,
@@ -14,7 +14,6 @@ import {
   DEFAULT_ONDO_SELL_TOKENS_TO_COMPUTE_PRICE,
   DEFAULT_SLIPPAGE_BPS,
   ONDO_POLL_INTERVAL_MS,
-  ONDO_QUOTE_EXPIRY_THRESHOLD_MS,
   ONDO_SETTLEMENT_ASSET,
   ONDO_SUPPORTED_INPUT_ASSETS,
   OffersNamespaceImpl,
@@ -25,6 +24,7 @@ import {
   SWAP_POLL_INTERVAL_MS,
   SwapQuote,
   TOKEN_REGISTRY,
+  TokenRegistrySnapshot,
   USDC,
   USDC_SYMBOL,
   computeOndoBuyPrice,
@@ -35,9 +35,11 @@ import {
   formattedPricePerShare,
   generatePKCEParams,
   isSwapAvailable,
+  offerDisplayTokens,
+  ondoQuoteOfferDeadline,
   superstateSwapContractAddress,
   swapSpender
-} from "../chunk-DX4VTV7L.js";
+} from "../chunk-VH34YC3Q.js";
 import {
   API_VERSION,
   AssetDecimals,
@@ -86,7 +88,7 @@ import {
   shortenAddress,
   txExplorerUrl,
   usdAmount
-} from "../chunk-2YEJXE2V.js";
+} from "../chunk-MOE5S6CE.js";
 
 // src/client/CoinListProvider.tsx
 import {
@@ -1094,7 +1096,7 @@ var CoinListProvider = CoinListContextProvider;
 import { createContext as createContext4, useContext as useContext3 } from "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-\\[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-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
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -1396,7 +1398,7 @@ function AlertBanner({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx6("p", { className: cn(typeClasses.subhead, text), children: content })
+        /* @__PURE__ */ jsx6("p", { className: cn(typeClasses.bodySm, text), children: content })
       ]
     }
   );
@@ -2392,12 +2394,16 @@ function AssetSummaryRow({
           ] })
         ] }),
         (value || caption) && /* @__PURE__ */ jsxs17("div", { className: "clcosdk:flex clcosdk:shrink-0 clcosdk:flex-col clcosdk:items-end clcosdk:justify-center", children: [
-          value && /* @__PURE__ */ jsx23(
+          value && // `min-h-[1lh]` + flex center: a Skeleton sized to `1em` (cap
+          // height) sits in the same line box as loaded copy, so leading
+          // keeps the two rows apart instead of two full-lh bars colliding.
+          /* @__PURE__ */ jsx23(
             "div",
             {
               className: cn(
                 typeClasses.h4,
-                "clcosdk:text-right clcosdk:text-text-primary"
+                "clcosdk:flex clcosdk:min-h-[1lh] clcosdk:items-center",
+                "clcosdk:justify-end clcosdk:text-text-primary"
               ),
               children: value
             }
@@ -2410,7 +2416,8 @@ function AssetSummaryRow({
             {
               className: cn(
                 typeClasses.subhead,
-                "clcosdk:text-right clcosdk:text-text-secondary"
+                "clcosdk:flex clcosdk:min-h-[1lh] clcosdk:items-center",
+                "clcosdk:justify-end clcosdk:text-text-secondary"
               ),
               children: caption
             }
@@ -3130,7 +3137,7 @@ function detailRows2(state) {
 function PriceValue({ price }) {
   switch (price.type) {
     case "loading":
-      return /* @__PURE__ */ jsx32(Skeleton, { className: "clcosdk:h-6 clcosdk:w-24" });
+      return /* @__PURE__ */ jsx32(Skeleton, { className: "clcosdk:h-[1em] clcosdk:w-24" });
     case "known":
       return price.price;
     case "unavailable":
@@ -3144,7 +3151,7 @@ function PriceValue({ price }) {
 function PriceCaption({ price }) {
   switch (price.type) {
     case "loading":
-      return /* @__PURE__ */ jsx32(Skeleton, { className: "clcosdk:h-4 clcosdk:w-20" });
+      return /* @__PURE__ */ jsx32(Skeleton, { className: "clcosdk:h-[1em] clcosdk:w-20" });
     case "known":
       return /* @__PURE__ */ jsx32(StatusIndicator, { status: price.market });
     // Nothing to say about a market whose price never arrived: the order steps
@@ -3597,7 +3604,7 @@ function stablecoinIconUrl(symbol) {
   }
 }
 function offerIconUrl(offer) {
-  return offer.logoUrl === "" ? null : AssetIconUrl(offer.logoUrl);
+  return offer.logoUrl ? AssetIconUrl(offer.logoUrl) : null;
 }
 function tokenLogoUrl(logo, minWidth = 40) {
   switch (logo.kind) {
@@ -3616,6 +3623,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);
 }
@@ -4064,7 +4085,7 @@ function toInputAssetUi({
 }
 
 // src/client/hooks/checkout/ondo/buy/review/useOndoBuyReviewViewModel.ts
-import { useEffect as useEffect7, useRef as useRef5, useState as useState6 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo4, useRef as useRef5, useState as useState6 } from "react";
 
 // src/client/hooks/checkout/ondo/buy/data/useOndoBuyTransaction.ts
 import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
@@ -4222,8 +4243,12 @@ function useOndoBuyReviewViewModel({
     }
   }, [stepInput.type]);
   const transaction = transactionState.type === "CONTENT" ? transactionState.transaction : null;
+  const offerUntil = useMemo4(
+    () => transaction === null ? null : ondoQuoteOfferDeadline(transaction.expiresAt),
+    [transaction]
+  );
   const secondsLeft = useCountdown({
-    until: transaction?.expiresAt ?? null,
+    until: offerUntil,
     enabled
   });
   const quoteStatus = toQuoteStatusUi(transactionState, secondsLeft);
@@ -4347,14 +4372,11 @@ function toQuoteStatusUi(state, secondsLeft) {
       message: refreshErrorMessage(state.refreshError)
     };
   }
-  if (secondsLeft === null || isTooCloseToExpiry(secondsLeft)) {
+  if (secondsLeft === null || secondsLeft === 0) {
     return { type: "expired" };
   }
   return { type: "valid", expiresInLabel: expiresInLabel(secondsLeft) };
 }
-function isTooCloseToExpiry(secondsLeft) {
-  return secondsLeft * 1e3 <= ONDO_QUOTE_EXPIRY_THRESHOLD_MS;
-}
 function expiresInLabel(secondsLeft) {
   const unit = secondsLeft === 1 ? "second" : "seconds";
   return `Quote expires in ${secondsLeft} ${unit}`;
@@ -4846,8 +4868,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) {
@@ -6163,7 +6186,7 @@ function preparationErrorMessage2(error) {
 }
 
 // src/client/hooks/checkout/ondo/sell/review/useOndoSellReviewViewModel.ts
-import { useEffect as useEffect14, useRef as useRef11, useState as useState15 } from "react";
+import { useEffect as useEffect14, useMemo as useMemo5, useRef as useRef11, useState as useState15 } from "react";
 
 // src/client/hooks/checkout/ondo/sell/data/useOndoSellTransaction.ts
 import { useCallback as useCallback4, useEffect as useEffect13, useRef as useRef10, useState as useState14 } from "react";
@@ -6284,8 +6307,12 @@ function useOndoSellReviewViewModel({
     }
   }, [stepInput.type]);
   const transaction = transactionState.type === "CONTENT" ? transactionState.transaction : null;
+  const offerUntil = useMemo5(
+    () => transaction === null ? null : ondoQuoteOfferDeadline(transaction.expiresAt),
+    [transaction]
+  );
   const secondsLeft = useCountdown({
-    until: transaction?.expiresAt ?? null,
+    until: offerUntil,
     enabled
   });
   const quoteStatus = toQuoteStatusUi2(transactionState, secondsLeft);
@@ -6414,14 +6441,11 @@ function toQuoteStatusUi2(state, secondsLeft) {
       message: refreshErrorMessage2(state.refreshError)
     };
   }
-  if (secondsLeft === null || isTooCloseToExpiry2(secondsLeft)) {
+  if (secondsLeft === null || secondsLeft === 0) {
     return { type: "expired" };
   }
   return { type: "valid", expiresInLabel: expiresInLabel2(secondsLeft) };
 }
-function isTooCloseToExpiry2(secondsLeft) {
-  return secondsLeft * 1e3 <= ONDO_QUOTE_EXPIRY_THRESHOLD_MS;
-}
 function expiresInLabel2(secondsLeft) {
   const unit = secondsLeft === 1 ? "second" : "seconds";
   return `Quote expires in ${secondsLeft} ${unit}`;
@@ -7509,7 +7533,7 @@ function LiveDot() {
 function PriceValue2({ price }) {
   switch (price.type) {
     case "loading":
-      return /* @__PURE__ */ jsx46(Skeleton, { className: "clcosdk:h-6 clcosdk:w-24" });
+      return /* @__PURE__ */ jsx46(Skeleton, { className: "clcosdk:h-[1em] clcosdk:w-24" });
     case "known":
       return price.price;
     default: {
@@ -9105,11 +9129,11 @@ function CheckoutContainer({
   enabled = true,
   className
 }) {
-  return renderOffer(offer.type, {
-    ondo: () => /* @__PURE__ */ jsx50(
+  return renderOffer(offer, {
+    ondo: (ondoOffer) => /* @__PURE__ */ jsx50(
       OndoCheckoutContainer,
       {
-        offer,
+        offer: ondoOffer,
         chain,
         wallets,
         config: config["ondo::swap"],
@@ -9117,10 +9141,10 @@ function CheckoutContainer({
         className
       }
     ),
-    superstate: () => /* @__PURE__ */ jsx50(
+    superstate: (superstateOffer) => /* @__PURE__ */ jsx50(
       SuperstateSwapCheckoutContainer,
       {
-        offer,
+        offer: superstateOffer,
         chain,
         wallets,
         enabled,
@@ -9128,7 +9152,7 @@ function CheckoutContainer({
         className
       }
     ),
-    tokenSale: () => config["coinlist::token_sale"].render(offer)
+    tokenSale: (tokenSaleOffer) => config["coinlist::token_sale"].render(tokenSaleOffer)
   });
 }
 function OndoCheckoutContainer({
@@ -9168,16 +9192,16 @@ function OndoCheckoutContainer({
     )
   });
 }
-function renderOffer(type, branches) {
-  switch (type) {
+function renderOffer(offer, branches) {
+  switch (offer.type) {
     case "ondo::swap":
-      return branches.ondo();
+      return branches.ondo(offer);
     case "superstate::swap":
-      return branches.superstate();
+      return branches.superstate(offer);
     case "coinlist::token_sale":
-      return branches.tokenSale();
+      return branches.tokenSale(offer);
     default: {
-      const exhaustive = type;
+      const exhaustive = offer;
       return exhaustive;
     }
   }
@@ -9195,6 +9219,58 @@ function renderOndoSide(side, branches) {
   }
 }
 
+// src/client/components/design-system/ThemedImage.tsx
+import { Fragment as Fragment9, jsx as jsx51, jsxs as jsxs37 } from "react/jsx-runtime";
+function ThemedImage({
+  light,
+  dark,
+  sizes,
+  alt,
+  width,
+  height,
+  className,
+  style
+}) {
+  const shared = { width, height, style };
+  if (!dark) {
+    return /* @__PURE__ */ jsx51(
+      "img",
+      {
+        src: light.src,
+        srcSet: light.srcSet,
+        sizes: light.srcSet ? sizes : void 0,
+        className,
+        alt,
+        ...shared
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs37(Fragment9, { children: [
+    /* @__PURE__ */ jsx51(
+      "img",
+      {
+        src: light.src,
+        srcSet: light.srcSet,
+        sizes: light.srcSet ? sizes : void 0,
+        className: cn("clcosdk-on-light", className),
+        alt,
+        ...shared
+      }
+    ),
+    /* @__PURE__ */ jsx51(
+      "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;
@@ -9203,7 +9279,8 @@ function onOfferCardKeyDown(event, onClick) {
 }
 
 // src/client/components/offers/shared/OfferAssetCard.tsx
-import { jsx as jsx51, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs38 } from "react/jsx-runtime";
+var LOGO_SIZES = "(min-width: 768px) 48px, 40px";
 function OfferAssetCard({
   offer,
   onClick,
@@ -9211,7 +9288,7 @@ function OfferAssetCard({
   containerClassName
 }) {
   const interactive = onClick !== void 0;
-  const card = /* @__PURE__ */ jsx51(
+  const card = /* @__PURE__ */ jsx52(
     "article",
     {
       className: cn(
@@ -9225,11 +9302,13 @@ function OfferAssetCard({
       tabIndex: interactive ? 0 : void 0,
       onClick,
       onKeyDown: interactive ? (event) => onOfferCardKeyDown(event, onClick) : void 0,
-      children: /* @__PURE__ */ jsxs37("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__ */ jsx51("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__ */ jsx51(
-          "img",
+      children: /* @__PURE__ */ jsxs38("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__ */ jsx52("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__ */ jsx52(
+          ThemedImage,
           {
-            src: offer.logoUrl,
+            light: offer.logo.light,
+            dark: offer.logo.dark ?? void 0,
+            sizes: LOGO_SIZES,
             alt: "",
             width: 48,
             height: 48,
@@ -9237,8 +9316,8 @@ function OfferAssetCard({
             style: { maxWidth: "none", width: "100%", height: "100%" }
           }
         ) }) : null,
-        /* @__PURE__ */ jsxs37("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:flex-1 clcosdk:flex-col clcosdk:items-start clcosdk:justify-center", children: [
-          offer.name ? /* @__PURE__ */ jsx51(
+        /* @__PURE__ */ jsxs38("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:flex-1 clcosdk:flex-col clcosdk:items-start clcosdk:justify-center", children: [
+          offer.name ? /* @__PURE__ */ jsx52(
             "h2",
             {
               className: cn(
@@ -9247,13 +9326,13 @@ function OfferAssetCard({
               children: offer.name
             }
           ) : null,
-          offer.symbol ? /* @__PURE__ */ jsx51("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__ */ jsx52("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__ */ jsx51("div", { className: containerClassName, children: card }) : card;
-  return /* @__PURE__ */ jsx51(CoinListStyleScope, { children: wrapped });
+  const wrapped = containerClassName ? /* @__PURE__ */ jsx52("div", { className: containerClassName, children: card }) : card;
+  return /* @__PURE__ */ jsx52(CoinListStyleScope, { children: wrapped });
 }
 function cardActionLabel(offer) {
   const parts = [offer.name, offer.symbol].filter(Boolean);
@@ -9261,7 +9340,7 @@ function cardActionLabel(offer) {
 }
 
 // src/client/components/offers/grid/OffersAssetGrid.tsx
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var DEFAULT_MAX_COLUMNS = 3;
 function OffersAssetGrid({
   offers,
@@ -9276,14 +9355,14 @@ function OffersAssetGrid({
   );
   const maxGridWidth = `calc(${cols} * 20rem + ${Math.max(cols - 1, 0)} * 1.5rem)`;
   const interactive = onOfferClick !== void 0;
-  return /* @__PURE__ */ jsx52(CoinListStyleScope, { children: /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsx53(CoinListStyleScope, { children: /* @__PURE__ */ jsx53(
     "div",
     {
       className: cn(
         "clcosdk:flex clcosdk:w-full clcosdk:justify-center",
         containerClassName
       ),
-      children: /* @__PURE__ */ jsx52(
+      children: /* @__PURE__ */ jsx53(
         "div",
         {
           className: cn(
@@ -9293,7 +9372,7 @@ function OffersAssetGrid({
             className
           ),
           style: { maxWidth: maxGridWidth },
-          children: offers.map((offer) => /* @__PURE__ */ jsx52(
+          children: offers.map((offer) => /* @__PURE__ */ jsx53(
             OfferAssetCard,
             {
               offer,
@@ -9335,7 +9414,9 @@ function saleCardStatus({
 }
 
 // src/client/components/offers/shared/OfferSaleCard.tsx
-import { jsx as jsx53, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
+var HEADER_LOGO_SIZES = "(min-width: 768px) 36px, 32px";
+var WATERMARK_SIZES = "(min-width: 768px) 20rem, 15rem";
 function OfferSaleCard({
   offer,
   onClick,
@@ -9350,7 +9431,8 @@ function OfferSaleCard({
     secondsLeft
   });
   const interactive = onClick !== void 0;
-  const card = /* @__PURE__ */ jsxs38(
+  const logo = offer.logo ? offer.logo.dark ?? offer.logo.light : null;
+  const card = /* @__PURE__ */ jsxs39(
     "article",
     {
       className: cn(
@@ -9365,16 +9447,17 @@ function OfferSaleCard({
       onClick,
       onKeyDown: interactive ? (event) => onOfferCardKeyDown(event, onClick) : void 0,
       children: [
-        offer.logoUrl ? /* @__PURE__ */ jsx53(
+        logo ? /* @__PURE__ */ jsx54(
           "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__ */ jsx53(
-              "img",
+            children: /* @__PURE__ */ jsx54(
+              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%" }
@@ -9382,12 +9465,13 @@ function OfferSaleCard({
             )
           }
         ) : null,
-        /* @__PURE__ */ jsxs38("div", { className: "clcosdk:relative clcosdk:z-10 clcosdk:flex clcosdk:flex-col clcosdk:gap-2 clcosdk:md:gap-3", children: [
-          /* @__PURE__ */ jsxs38("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:items-center clcosdk:gap-2.5 clcosdk:md:gap-3", children: [
-            offer.logoUrl ? /* @__PURE__ */ jsx53("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__ */ jsx53(
-              "img",
+        /* @__PURE__ */ jsxs39("div", { className: "clcosdk:relative clcosdk:z-10 clcosdk:flex clcosdk:flex-col clcosdk:gap-2 clcosdk:md:gap-3", children: [
+          /* @__PURE__ */ jsxs39("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:items-center clcosdk:gap-2.5 clcosdk:md:gap-3", children: [
+            logo ? /* @__PURE__ */ jsx54("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__ */ jsx54(
+              ThemedImage,
               {
-                src: offer.logoUrl,
+                light: logo,
+                sizes: HEADER_LOGO_SIZES,
                 alt: "",
                 width: 36,
                 height: 36,
@@ -9395,7 +9479,7 @@ function OfferSaleCard({
                 style: { maxWidth: "none", width: "100%", height: "100%" }
               }
             ) }) : null,
-            offer.name ? /* @__PURE__ */ jsx53(
+            offer.name ? /* @__PURE__ */ jsx54(
               "h2",
               {
                 className: cn(
@@ -9405,7 +9489,7 @@ function OfferSaleCard({
               }
             ) : null
           ] }),
-          offer.tagline ? /* @__PURE__ */ jsx53(
+          offer.tagline ? /* @__PURE__ */ jsx54(
             "p",
             {
               className: cn(
@@ -9416,20 +9500,20 @@ function OfferSaleCard({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsxs38("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__ */ jsxs38("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:items-center clcosdk:gap-2 clcosdk:md:gap-3", children: [
-            status.phase === "live" ? /* @__PURE__ */ jsxs38(
+        /* @__PURE__ */ jsxs39("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__ */ jsxs39("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:items-center clcosdk:gap-2 clcosdk:md:gap-3", children: [
+            status.phase === "live" ? /* @__PURE__ */ jsxs39(
               "span",
               {
                 className: "clcosdk:relative clcosdk:inline-flex clcosdk:size-2 clcosdk:shrink-0",
                 "aria-hidden": "true",
                 children: [
-                  /* @__PURE__ */ jsx53("span", { className: "clcosdk-status-dot-ping clcosdk:absolute clcosdk:inset-0 clcosdk:rounded-full clcosdk:bg-positive" }),
-                  /* @__PURE__ */ jsx53("span", { className: "clcosdk:relative clcosdk:inline-flex clcosdk:size-full clcosdk:rounded-full clcosdk:bg-positive" })
+                  /* @__PURE__ */ jsx54("span", { className: "clcosdk-status-dot-ping clcosdk:absolute clcosdk:inset-0 clcosdk:rounded-full clcosdk:bg-positive" }),
+                  /* @__PURE__ */ jsx54("span", { className: "clcosdk:relative clcosdk:inline-flex clcosdk:size-full clcosdk:rounded-full clcosdk:bg-positive" })
                 ]
               }
             ) : null,
-            /* @__PURE__ */ jsx53(
+            /* @__PURE__ */ jsx54(
               "p",
               {
                 className: cn(
@@ -9440,7 +9524,7 @@ function OfferSaleCard({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs38(
+          /* @__PURE__ */ jsxs39(
             "span",
             {
               className: cn(
@@ -9450,8 +9534,8 @@ function OfferSaleCard({
               "aria-hidden": "true",
               children: [
                 "View",
-                /* @__PURE__ */ jsx53("span", { className: "clcosdk:max-md:hidden", children: " offer" }),
-                /* @__PURE__ */ jsx53(ArrowRight, { className: "clcosdk:size-4", "aria-hidden": true })
+                /* @__PURE__ */ jsx54("span", { className: "clcosdk:max-md:hidden", children: " offer" }),
+                /* @__PURE__ */ jsx54(ArrowRight, { className: "clcosdk:size-4", "aria-hidden": true })
               ]
             }
           )
@@ -9459,8 +9543,8 @@ function OfferSaleCard({
       ]
     }
   );
-  const wrapped = containerClassName ? /* @__PURE__ */ jsx53("div", { className: containerClassName, children: card }) : card;
-  return /* @__PURE__ */ jsx53(CoinListStyleScope, { children: wrapped });
+  const wrapped = containerClassName ? /* @__PURE__ */ jsx54("div", { className: containerClassName, children: card }) : card;
+  return /* @__PURE__ */ jsx54(CoinListStyleScope, { children: wrapped });
 }
 var SALE_PHASE_LABEL = {
   upcoming: "Upcoming",
@@ -9473,10 +9557,10 @@ function cardActionLabel2(offer, phase) {
 }
 
 // src/client/components/offers/grid/OffersGridView.tsx
-import { jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs40 } from "react/jsx-runtime";
 var DEFAULT_MAX_COLUMNS2 = 2;
 function OffersGridView(props) {
-  return /* @__PURE__ */ jsx54(CoinListStyleScope, { children: /* @__PURE__ */ jsx54(OffersGridViewBody, { ...props }) });
+  return /* @__PURE__ */ jsx55(CoinListStyleScope, { children: /* @__PURE__ */ jsx55(OffersGridViewBody, { ...props }) });
 }
 function OffersGridViewBody({
   state,
@@ -9490,13 +9574,13 @@ function OffersGridViewBody({
 }) {
   switch (state.type) {
     case "loading":
-      return loading ?? /* @__PURE__ */ jsx54(LoadingState, {});
+      return loading ?? /* @__PURE__ */ jsx55(LoadingState, {});
     case "error":
-      return error ?? /* @__PURE__ */ jsx54(ErrorState, { message: state.message });
+      return error ?? /* @__PURE__ */ jsx55(ErrorState, { message: state.message });
     case "empty":
-      return emptyState ?? /* @__PURE__ */ jsx54(EmptyState, {});
+      return emptyState ?? /* @__PURE__ */ jsx55(EmptyState, {});
     case "content":
-      return /* @__PURE__ */ jsx54(
+      return /* @__PURE__ */ jsx55(
         OffersGridContent,
         {
           offers: state.offers,
@@ -9526,14 +9610,14 @@ function OffersGridContent({
     Math.max(1, maxColumns ?? DEFAULT_MAX_COLUMNS2)
   );
   const maxGridWidth = `calc(${cols} * 28rem + ${Math.max(cols - 1, 0)} * 1.5rem)`;
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     "div",
     {
       className: cn(
         "clcosdk:flex clcosdk:w-full clcosdk:justify-center",
         containerClassName
       ),
-      children: /* @__PURE__ */ jsx54(
+      children: /* @__PURE__ */ jsx55(
         "div",
         {
           className: cn(
@@ -9542,7 +9626,7 @@ function OffersGridContent({
             className
           ),
           style: { maxWidth: maxGridWidth },
-          children: offers.map((offer) => /* @__PURE__ */ jsx54(
+          children: offers.map((offer) => /* @__PURE__ */ jsx55(
             OfferSaleCard,
             {
               offer,
@@ -9556,17 +9640,17 @@ function OffersGridContent({
   );
 }
 function LoadingState() {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     "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__ */ jsx54("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading offers..." })
+      children: /* @__PURE__ */ jsx55("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading offers..." })
     }
   );
 }
 function ErrorState({ message }) {
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     AlertBanner,
     {
       variant: "error",
@@ -9577,13 +9661,13 @@ function ErrorState({ message }) {
   );
 }
 function EmptyState() {
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs40(
     "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__ */ jsx54(
+        /* @__PURE__ */ jsx55(
           "p",
           {
             className: cn(
@@ -9593,14 +9677,14 @@ function EmptyState() {
             children: "No offers available"
           }
         ),
-        /* @__PURE__ */ jsx54("p", { className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"), children: "Check back soon for upcoming opportunities." })
+        /* @__PURE__ */ jsx55("p", { className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"), children: "Check back soon for upcoming opportunities." })
       ]
     }
   );
 }
 
 // src/client/hooks/offers/grid/useOffersGridViewModel.ts
-import { useCallback as useCallback6, useMemo as useMemo4 } from "react";
+import { useCallback as useCallback7, useMemo as useMemo6 } from "react";
 
 // src/client/hooks/offers/data/useOffers.ts
 import { useEffect as useEffect20, useState as useState24 } from "react";
@@ -9658,36 +9742,147 @@ 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,
-    tagline: offer.tagline,
-    logoUrl: offer.logoUrl,
-    startsAt: offer.startsAt,
+    ...tokenMetadata ? { name: tokenMetadata.name } : {},
+    ...saleWindow(offer),
+    logo: OfferLogoUi.fromOffer(offer, tokenMetadata),
     endsAt: offer.endsAt
   }),
-  fromDetail: (detail) => ({
+  fromDetail: (detail, tokenMetadata = null) => ({
     id: detail.id,
-    name: detail.name,
-    tagline: detail.tagline,
-    logoUrl: detail.logoUrl,
-    startsAt: detail.startsAt,
+    name: tokenMetadata?.name ?? detail.name,
+    ...saleWindow(detail),
+    logo: OfferLogoUi.fromOffer(detail, tokenMetadata),
     endsAt: detail.endsAt
   })
 };
+function saleWindow(offer) {
+  switch (offer.type) {
+    case "coinlist::token_sale":
+    case "superstate::swap":
+      return { tagline: offer.tagline, startsAt: offer.startsAt };
+    case "ondo::swap":
+      return { tagline: null, startsAt: null };
+    default: {
+      const exhaustive = offer;
+      return exhaustive;
+    }
+  }
+}
+
+// src/client/hooks/shared/useTokenRegistry.ts
+import { useCallback as useCallback6, useEffect as useEffect21, useState as useState25 } from "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] = useState25(
+    () => data !== void 0 ? { type: "CONTENT", registry: TokenRegistrySnapshot.fromTokens(data) } : LOADING_STATE4
+  );
+  const [refetchCount, setRefetchCount] = useState25(0);
+  const refetch = useCallback6(() => {
+    setRefetchCount((count) => count + 1);
+  }, []);
+  useEffect21(() => {
+    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 = useMemo4(
-    () => toUiState(offersState, onOfferClick !== void 0),
-    [offersState, onOfferClick]
+  const { offersState } = useOffers({ data: data?.offers, enabled });
+  const { state: registryState } = useTokenRegistry({
+    data: data?.tokens,
+    enabled
+  });
+  const state = useMemo6(
+    () => toUiState(offersState, registryState, onOfferClick !== void 0),
+    [offersState, registryState, onOfferClick]
   );
-  const onEvent = useCallback6(
+  const onEvent = useCallback7(
     (event) => {
       switch (event.type) {
         case "ON_OFFER_CLICK": {
@@ -9710,7 +9905,7 @@ function useOffersGridViewModel(options = {}) {
   );
   return { state, onEvent };
 }
-function toUiState(offersState, interactive) {
+function toUiState(offersState, registryState, interactive) {
   switch (offersState.type) {
     case "LOADING":
       return { type: "loading" };
@@ -9723,9 +9918,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
       };
     }
@@ -9737,7 +9941,7 @@ function toUiState(offersState, interactive) {
 }
 
 // src/client/components/offers/grid/OffersGridContainer.tsx
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 function OffersGridContainer({
   data,
   onOfferClick,
@@ -9749,17 +9953,17 @@ function OffersGridContainer({
     onOfferClick,
     enabled
   });
-  return /* @__PURE__ */ jsx55(OffersGridView, { state, onEvent, ...viewProps });
+  return /* @__PURE__ */ jsx56(OffersGridView, { state, onEvent, ...viewProps });
 }
 
 // src/client/components/requirements/ConnectedWalletList.tsx
-import { useState as useState25 } from "react";
-import { jsx as jsx56, jsxs as jsxs40 } from "react/jsx-runtime";
+import { useState as useState26 } from "react";
+import { jsx as jsx57, jsxs as jsxs41 } from "react/jsx-runtime";
 function ConnectedWalletRow({
   wallet,
   onRemove
 }) {
-  const [state, setState] = useState25("idle");
+  const [state, setState] = useState26("idle");
   const remove = async () => {
     if (!onRemove) return;
     setState("removing");
@@ -9770,8 +9974,8 @@ function ConnectedWalletRow({
       setState("error");
     }
   };
-  return /* @__PURE__ */ jsxs40("div", { className: "clcosdk:flex clcosdk:min-h-9 clcosdk:flex-wrap clcosdk:items-center clcosdk:justify-between clcosdk:gap-2", children: [
-    /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsxs41("div", { className: "clcosdk:flex clcosdk:min-h-9 clcosdk:flex-wrap clcosdk:items-center clcosdk:justify-between clcosdk:gap-2", children: [
+    /* @__PURE__ */ jsx57(
       "span",
       {
         title: wallet.address,
@@ -9782,16 +9986,16 @@ function ConnectedWalletRow({
         children: wallet.shortAddress
       }
     ),
-    onRemove != null && (state === "confirming" ? /* @__PURE__ */ jsxs40("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
-      /* @__PURE__ */ jsx56(
+    onRemove != null && (state === "confirming" ? /* @__PURE__ */ jsxs41("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
+      /* @__PURE__ */ jsx57(
         "span",
         {
           className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"),
           children: "Remove?"
         }
       ),
-      /* @__PURE__ */ jsx56(ClButton, { size: "sm", variant: "destructive", onClick: remove, children: "Remove" }),
-      /* @__PURE__ */ jsx56(
+      /* @__PURE__ */ jsx57(ClButton, { size: "sm", variant: "destructive", onClick: remove, children: "Remove" }),
+      /* @__PURE__ */ jsx57(
         ClButton,
         {
           size: "sm",
@@ -9800,9 +10004,9 @@ function ConnectedWalletRow({
           children: "Cancel"
         }
       )
-    ] }) : state === "error" ? /* @__PURE__ */ jsxs40("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
-      /* @__PURE__ */ jsx56("span", { className: cn(typeClasses.subhead, "clcosdk:text-error"), children: "Couldn't remove." }),
-      /* @__PURE__ */ jsx56(
+    ] }) : state === "error" ? /* @__PURE__ */ jsxs41("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
+      /* @__PURE__ */ jsx57("span", { className: cn(typeClasses.subhead, "clcosdk:text-error"), children: "Couldn't remove." }),
+      /* @__PURE__ */ jsx57(
         ClButton,
         {
           size: "sm",
@@ -9811,7 +10015,7 @@ function ConnectedWalletRow({
           children: "Try again"
         }
       )
-    ] }) : /* @__PURE__ */ jsx56(
+    ] }) : /* @__PURE__ */ jsx57(
       ClButton,
       {
         size: "sm",
@@ -9824,7 +10028,7 @@ function ConnectedWalletRow({
   ] });
 }
 function ConnectedWalletList(props) {
-  return /* @__PURE__ */ jsx56(CoinListStyleScope, { children: /* @__PURE__ */ jsx56(ConnectedWalletListBody, { ...props }) });
+  return /* @__PURE__ */ jsx57(CoinListStyleScope, { children: /* @__PURE__ */ jsx57(ConnectedWalletListBody, { ...props }) });
 }
 function ConnectedWalletListBody({
   wallets,
@@ -9834,18 +10038,18 @@ function ConnectedWalletListBody({
   status = "ready",
   className
 }) {
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       className: cn("clcosdk:flex clcosdk:flex-col clcosdk:gap-2", className),
       children: [
-        status === "loading" ? /* @__PURE__ */ jsx56(AlertBanner, { variant: "info", content: "Loading your connected wallets\u2026" }) : status === "error" ? /* @__PURE__ */ jsx56(
+        status === "loading" ? /* @__PURE__ */ jsx57(AlertBanner, { variant: "info", content: "Loading your connected wallets\u2026" }) : status === "error" ? /* @__PURE__ */ jsx57(
           AlertBanner,
           {
             variant: "error",
             content: "Couldn't load your connected wallets."
           }
-        ) : wallets.length === 0 ? /* @__PURE__ */ jsx56(AlertBanner, { variant: "info", content: "No wallets connected yet." }) : /* @__PURE__ */ jsx56("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:divide-y clcosdk:divide-divider", children: wallets.map((wallet) => /* @__PURE__ */ jsx56(
+        ) : wallets.length === 0 ? /* @__PURE__ */ jsx57(AlertBanner, { variant: "info", content: "No wallets connected yet." }) : /* @__PURE__ */ jsx57("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:divide-y clcosdk:divide-divider", children: wallets.map((wallet) => /* @__PURE__ */ jsx57(
           ConnectedWalletRow,
           {
             wallet,
@@ -9853,7 +10057,7 @@ function ConnectedWalletListBody({
           },
           wallet.id
         )) }),
-        onAdd != null && status !== "loading" && /* @__PURE__ */ jsx56(
+        onAdd != null && status !== "loading" && /* @__PURE__ */ jsx57(
           ClButton,
           {
             size: "sm",
@@ -9870,9 +10074,9 @@ function ConnectedWalletListBody({
 
 // src/client/components/requirements/identity-verification/IdentityVerificationView.tsx
 import SumsubWebSdk from "@sumsub/websdk-react";
-import { jsx as jsx57, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs42 } from "react/jsx-runtime";
 function IdentityVerificationView(props) {
-  return /* @__PURE__ */ jsx57(CoinListStyleScope, { children: /* @__PURE__ */ jsx57(IdentityVerificationViewBody, { ...props }) });
+  return /* @__PURE__ */ jsx58(CoinListStyleScope, { children: /* @__PURE__ */ jsx58(IdentityVerificationViewBody, { ...props }) });
 }
 function IdentityVerificationViewBody({
   state,
@@ -9881,7 +10085,7 @@ function IdentityVerificationViewBody({
 }) {
   switch (state.type) {
     case "loading":
-      return /* @__PURE__ */ jsx57(
+      return /* @__PURE__ */ jsx58(
         "output",
         {
           "aria-live": "polite",
@@ -9889,11 +10093,11 @@ function IdentityVerificationViewBody({
             "clcosdk:flex clcosdk:min-h-40 clcosdk:items-center clcosdk:justify-center",
             className
           ),
-          children: /* @__PURE__ */ jsx57("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading identity verification..." })
+          children: /* @__PURE__ */ jsx58("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading identity verification..." })
         }
       );
     case "error":
-      return /* @__PURE__ */ jsxs41(
+      return /* @__PURE__ */ jsxs42(
         "div",
         {
           className: cn(
@@ -9901,13 +10105,13 @@ function IdentityVerificationViewBody({
             className
           ),
           children: [
-            /* @__PURE__ */ jsx57(AlertBanner, { variant: "error", icon: true, content: state.message }),
-            state.retryable && /* @__PURE__ */ jsx57(ClButton, { size: "sm", onClick: () => onEvent({ type: "ON_RETRY" }), children: "Try again" })
+            /* @__PURE__ */ jsx58(AlertBanner, { variant: "error", icon: true, content: state.message }),
+            state.retryable && /* @__PURE__ */ jsx58(ClButton, { size: "sm", onClick: () => onEvent({ type: "ON_RETRY" }), children: "Try again" })
           ]
         }
       );
     case "ready":
-      return /* @__PURE__ */ jsx57("div", { className: cn("clcosdk:w-full", className), children: /* @__PURE__ */ jsx57(
+      return /* @__PURE__ */ jsx58("div", { className: cn("clcosdk:w-full", className), children: /* @__PURE__ */ jsx58(
         SumsubWebSdk,
         {
           accessToken: state.accessToken,
@@ -9947,25 +10151,25 @@ function toError(error) {
 }
 
 // src/client/hooks/requirements/identity-verification/useIdentityVerificationViewModel.ts
-import { useCallback as useCallback8, useEffect as useEffect22, useMemo as useMemo5, useRef as useRef15 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect23, useMemo as useMemo7, useRef as useRef15 } from "react";
 
 // src/client/hooks/requirements/data/useKycToken.ts
-import { useCallback as useCallback7, useEffect as useEffect21, useRef as useRef14, useState as useState26 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect22, useRef as useRef14, useState as useState27 } from "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] = useState26(IDLE_STATE);
+  const [kycTokenState, setKycTokenState] = useState27(IDLE_STATE);
   const resetPendingRef = useRef14(reset === true);
   const tokenIssuedRef = useRef14(false);
-  useEffect21(() => {
+  useEffect22(() => {
     if (!tokenIssuedRef.current) {
       resetPendingRef.current = reset === true;
     }
   }, [reset]);
-  const fetchToken = useCallback7(async () => {
-    setKycTokenState(LOADING_STATE4);
+  const fetchToken = useCallback8(async () => {
+    setKycTokenState(LOADING_STATE5);
     try {
       const kycToken = await coinlist.requirements.createKycToken({
         levelName,
@@ -9999,7 +10203,7 @@ function useIdentityVerificationViewModel(options = {}) {
   const { levelName, reset, locale, onSubmitted, onError } = options;
   const { kycTokenState, fetchToken } = useKycToken(levelName, reset);
   const fetchedRef = useRef15(false);
-  useEffect22(() => {
+  useEffect23(() => {
     if (fetchedRef.current) {
       return;
     }
@@ -10007,7 +10211,7 @@ function useIdentityVerificationViewModel(options = {}) {
     fetchToken().catch(() => {
     });
   }, [fetchToken]);
-  const state = useMemo5(() => {
+  const state = useMemo7(() => {
     switch (kycTokenState.type) {
       case "IDLE":
       case "LOADING":
@@ -10033,7 +10237,7 @@ function useIdentityVerificationViewModel(options = {}) {
       }
     }
   }, [kycTokenState, locale, fetchToken]);
-  const onEvent = useCallback8(
+  const onEvent = useCallback9(
     (event) => {
       switch (event.type) {
         case "ON_RETRY":
@@ -10058,7 +10262,7 @@ function useIdentityVerificationViewModel(options = {}) {
 }
 
 // src/client/components/requirements/identity-verification/IdentityVerificationContainer.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 function IdentityVerificationContainer({
   levelName,
   reset,
@@ -10074,7 +10278,7 @@ function IdentityVerificationContainer({
     onSubmitted,
     onError
   });
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     IdentityVerificationView,
     {
       state,
@@ -10089,7 +10293,7 @@ import { ChevronRight } from "lucide-react";
 
 // src/client/components/design-system/StepStatusIcon.tsx
 import { CircleCheck as CircleCheck2, CircleX, Info as Info5 } from "lucide-react";
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var statusConfig = {
   required: {
     Icon: Info5,
@@ -10114,7 +10318,7 @@ var statusConfig = {
 };
 function StepStatusIcon({ status, className }) {
   const { Icon, colorClass, fillClass } = statusConfig[status];
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     Icon,
     {
       className: cn(
@@ -10129,49 +10333,90 @@ function StepStatusIcon({ status, className }) {
 }
 
 // src/client/components/requirements/RequirementItem.tsx
-import { Fragment as Fragment9, jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx61, jsxs as jsxs43 } from "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__ */ jsx60(ClButton, { size: "sm", onClick: onAction, children: "Continue" });
+      return /* @__PURE__ */ jsx61(ClButton, { size: "sm", className: "clcosdk:self-start", onClick: onAction, children: "Continue" });
     case "pending":
-      return /* @__PURE__ */ jsx60(
+      return /* @__PURE__ */ jsx61(
         AlertBanner,
         {
           variant: "warning",
-          content: "Under review. We'll notify you when complete."
+          content: statusMessages?.pending ?? DEFAULT_PENDING
         }
       );
     case "completed":
-      return /* @__PURE__ */ jsx60(AlertBanner, { variant: "success", content: "Identity verified." });
+      return /* @__PURE__ */ jsx61(
+        AlertBanner,
+        {
+          variant: "success",
+          content: statusMessages?.completed ?? "Identity verified."
+        }
+      );
     case "rejected":
-      return /* @__PURE__ */ jsx60(
+      return /* @__PURE__ */ jsx61(
         AlertBanner,
         {
           variant: "error",
-          content: onContactSupport === null ? "Verification rejected." : /* @__PURE__ */ jsxs42(Fragment9, { children: [
-            "Verification rejected.",
-            " ",
-            /* @__PURE__ */ jsx60(
-              "button",
-              {
-                type: "button",
-                onClick: onContactSupport,
-                className: "clcosdk:underline",
-                children: "Contact support"
-              }
-            ),
-            "."
-          ] })
+          content: /* @__PURE__ */ jsx61(
+            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__ */ jsxs43(Fragment10, { children: [
+      message,
+      " ",
+      /* @__PURE__ */ jsx61(
+        "button",
+        {
+          type: "button",
+          onClick: onContactSupport,
+          className: "clcosdk:underline",
+          children: SUPPORT_LINK
+        }
+      ),
+      "."
+    ] });
+  }
+  return /* @__PURE__ */ jsxs43(Fragment10, { children: [
+    message.slice(0, linkAt),
+    /* @__PURE__ */ jsx61(
+      "button",
+      {
+        type: "button",
+        onClick: onContactSupport,
+        className: "clcosdk:underline",
+        children: SUPPORT_LINK
+      }
+    ),
+    message.slice(linkAt + SUPPORT_LINK.length)
+  ] });
+}
 function WalletActionZone({
   status,
   multiWallet,
@@ -10181,8 +10426,8 @@ function WalletActionZone({
   onRemoveWallet
 }) {
   if (multiWallet) {
-    return /* @__PURE__ */ jsxs42(Fragment9, { children: [
-      /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsxs43(Fragment10, { children: [
+      /* @__PURE__ */ jsx61(
         ConnectedWalletList,
         {
           wallets: connectedWallets,
@@ -10191,7 +10436,7 @@ function WalletActionZone({
           status: walletsStatus
         }
       ),
-      status === "rejected" && /* @__PURE__ */ jsx60(
+      status === "rejected" && /* @__PURE__ */ jsx61(
         AlertBanner,
         {
           variant: "error",
@@ -10202,21 +10447,30 @@ function WalletActionZone({
   }
   if (status === "completed") {
     const connected = connectedWallets[0];
-    return /* @__PURE__ */ jsxs42(Fragment9, { children: [
-      onAction !== null && /* @__PURE__ */ jsx60(ClButton, { size: "sm", variant: "secondary", onClick: onAction, children: "Change wallet" }),
-      walletsStatus === "loading" ? /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsxs43(Fragment10, { children: [
+      onAction !== null && /* @__PURE__ */ jsx61(
+        ClButton,
+        {
+          size: "sm",
+          variant: "secondary",
+          className: "clcosdk:self-start",
+          onClick: onAction,
+          children: "Change wallet"
+        }
+      ),
+      walletsStatus === "loading" ? /* @__PURE__ */ jsx61(
         AlertBanner,
         {
           variant: "info",
           content: "Loading your connected wallet\u2026"
         }
-      ) : walletsStatus === "error" ? /* @__PURE__ */ jsx60(
+      ) : walletsStatus === "error" ? /* @__PURE__ */ jsx61(
         AlertBanner,
         {
           variant: "error",
           content: "Couldn't load your connected wallet."
         }
-      ) : /* @__PURE__ */ jsx60(
+      ) : /* @__PURE__ */ jsx61(
         AlertBanner,
         {
           variant: "success",
@@ -10226,9 +10480,9 @@ function WalletActionZone({
     ] });
   }
   if (status === "rejected") {
-    return /* @__PURE__ */ jsxs42(Fragment9, { children: [
-      onAction !== null && /* @__PURE__ */ jsx60(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" }),
-      /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsxs43(Fragment10, { children: [
+      onAction !== null && /* @__PURE__ */ jsx61(ClButton, { size: "sm", className: "clcosdk:self-start", onClick: onAction, children: "Connect wallet" }),
+      /* @__PURE__ */ jsx61(
         AlertBanner,
         {
           variant: "error",
@@ -10238,7 +10492,7 @@ function WalletActionZone({
     ] });
   }
   if (onAction === null) return null;
-  return /* @__PURE__ */ jsx60(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" });
+  return /* @__PURE__ */ jsx61(ClButton, { size: "sm", className: "clcosdk:self-start", onClick: onAction, children: "Connect wallet" });
 }
 function RequirementItem({
   ui,
@@ -10248,9 +10502,10 @@ function RequirementItem({
   onAction,
   onRemoveWallet,
   walletsStatus,
-  onContactSupport
+  onContactSupport,
+  spaceBeforeNextRow = true
 }) {
-  return /* @__PURE__ */ jsx60(CoinListStyleScope, { children: /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsx61(CoinListStyleScope, { children: /* @__PURE__ */ jsxs43(
     "div",
     {
       className: cn(
@@ -10258,17 +10513,17 @@ function RequirementItem({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs42(
+        /* @__PURE__ */ jsxs43(
           "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__ */ jsxs42("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-3", children: [
-                /* @__PURE__ */ jsx60(StepStatusIcon, { status: ui.status }),
-                /* @__PURE__ */ jsx60(
+              /* @__PURE__ */ jsxs43("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-3", children: [
+                /* @__PURE__ */ jsx61(StepStatusIcon, { status: ui.status }),
+                /* @__PURE__ */ jsx61(
                   "span",
                   {
                     className: cn(
@@ -10279,7 +10534,7 @@ function RequirementItem({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx60(
+              /* @__PURE__ */ jsx61(
                 ChevronRight,
                 {
                   className: cn(
@@ -10292,43 +10547,53 @@ function RequirementItem({
             ]
           }
         ),
-        /* @__PURE__ */ jsx60(
+        /* @__PURE__ */ jsx61(
           "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__ */ jsx60("div", { className: "clcosdk:min-h-0 clcosdk:overflow-hidden", children: /* @__PURE__ */ jsxs42("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4 clcosdk:px-2 clcosdk:pb-4", children: [
-              /* @__PURE__ */ jsx60(
-                "p",
-                {
-                  className: cn(
-                    typeClasses.subhead,
-                    "clcosdk:text-text-secondary"
+            children: /* @__PURE__ */ jsx61("div", { className: "clcosdk:min-h-0 clcosdk:overflow-hidden", children: /* @__PURE__ */ jsxs43(
+              "div",
+              {
+                className: cn(
+                  "clcosdk:flex clcosdk:flex-col clcosdk:gap-4",
+                  spaceBeforeNextRow && "clcosdk:pb-4"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx61(
+                    "p",
+                    {
+                      className: cn(
+                        typeClasses.bodySm,
+                        "clcosdk:text-text-secondary"
+                      ),
+                      children: ui.description
+                    }
                   ),
-                  children: ui.description
-                }
-              ),
-              ui.variant === "verification" ? /* @__PURE__ */ jsx60(
-                VerificationActionZone,
-                {
-                  status: ui.status,
-                  onAction,
-                  onContactSupport
-                }
-              ) : /* @__PURE__ */ jsx60(
-                WalletActionZone,
-                {
-                  status: ui.status,
-                  multiWallet: ui.multiWallet,
-                  connectedWallets: ui.connectedWallets,
-                  walletsStatus,
-                  onAction,
-                  onRemoveWallet
-                }
-              )
-            ] }) })
+                  ui.variant === "verification" ? /* @__PURE__ */ jsx61(
+                    VerificationActionZone,
+                    {
+                      status: ui.status,
+                      statusMessages: ui.statusMessages,
+                      onAction,
+                      onContactSupport
+                    }
+                  ) : /* @__PURE__ */ jsx61(
+                    WalletActionZone,
+                    {
+                      status: ui.status,
+                      multiWallet: ui.multiWallet,
+                      connectedWallets: ui.connectedWallets,
+                      walletsStatus,
+                      onAction,
+                      onRemoveWallet
+                    }
+                  )
+                ]
+              }
+            ) })
           }
         )
       ]
@@ -10337,35 +10602,29 @@ function RequirementItem({
 }
 
 // src/client/components/requirements/RequirementsChecklistView.tsx
-import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
 function RequirementsChecklistView(props) {
-  return /* @__PURE__ */ jsx61(CoinListStyleScope, { children: /* @__PURE__ */ jsx61(RequirementsChecklistViewBody, { ...props }) });
+  return /* @__PURE__ */ jsx62(CoinListStyleScope, { children: /* @__PURE__ */ jsx62(RequirementsChecklistViewBody, { ...props }) });
 }
 function RequirementsChecklistViewBody({
   state,
   onEvent,
   loading,
   error,
-  unauthenticatedState,
   className
 }) {
   switch (state.type) {
     case "loading":
-      return loading ?? /* @__PURE__ */ jsx61(LoadingState2, {});
-    case "not-authenticated":
-      return unauthenticatedState ?? null;
-    case "error":
-      return error ?? /* @__PURE__ */ jsx61(
-        AlertBanner,
+      return loading ?? /* @__PURE__ */ jsx62(
+        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__ */ jsxs43(
+    case "error":
+      return /* @__PURE__ */ jsxs44(
         "div",
         {
           className: cn(
@@ -10373,46 +10632,91 @@ function RequirementsChecklistViewBody({
             className
           ),
           children: [
-            /* @__PURE__ */ jsxs43("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
-              /* @__PURE__ */ jsx61("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
-              /* @__PURE__ */ jsx61("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: state.description })
-            ] }),
-            /* @__PURE__ */ jsx61("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:divide-y clcosdk:divide-divider", children: state.items.map((row) => /* @__PURE__ */ jsx61(
-              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__ */ jsx61(
+            /* @__PURE__ */ jsx62("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
+            error ?? /* @__PURE__ */ jsx62(
               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__ */ jsx61(
+            )
+          ]
+        }
+      );
+    case "content":
+      return /* @__PURE__ */ jsxs44(
+        "div",
+        {
+          className: cn(
+            "clcosdk:flex clcosdk:w-full clcosdk:flex-col clcosdk:gap-4",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+              /* @__PURE__ */ jsx62("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
+              state.blockedMessage == null && /* @__PURE__ */ jsx62(
+                "p",
+                {
+                  className: cn(typeClasses.body, "clcosdk:text-text-secondary"),
+                  children: state.items.length === 0 ? "No requirements to complete." : state.description
+                }
+              )
+            ] }),
+            state.blockedMessage != null ? /* @__PURE__ */ jsx62(AlertBanner, { variant: "info", icon: true, content: state.blockedMessage }) : state.items.length === 0 ? state.continueAction && /* @__PURE__ */ jsx62(
               ClButton,
               {
+                variant: "primary",
                 fullWidth: true,
                 disabled: !state.continueAction.enabled,
                 onClick: () => onEvent({ type: "ON_CONTINUE" }),
                 children: "Continue"
               }
-            )
+            ) : /* @__PURE__ */ jsxs44(Fragment11, { children: [
+              /* @__PURE__ */ jsx62("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:divide-y clcosdk:divide-divider", children: state.items.map((row, index) => /* @__PURE__ */ jsx62(
+                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__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-row clcosdk:items-center clcosdk:justify-between clcosdk:gap-6", children: [
+                /* @__PURE__ */ jsx62(
+                  "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__ */ jsx62(
+                  ClButton,
+                  {
+                    variant: "primary",
+                    disabled: !state.continueAction.enabled,
+                    onClick: () => onEvent({ type: "ON_CONTINUE" }),
+                    className: "clcosdk:shrink-0",
+                    children: "Continue"
+                  }
+                )
+              ] })
+            ] })
           ]
         }
       );
@@ -10422,19 +10726,43 @@ function RequirementsChecklistViewBody({
     }
   }
 }
-function LoadingState2() {
-  return /* @__PURE__ */ jsx61(
-    "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__ */ jsxs44(
+    "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__ */ jsx61("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__ */ jsx62("output", { className: "clcosdk:sr-only", children: "Loading requirements..." }),
+        /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+          /* @__PURE__ */ jsx62("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: title2 }),
+          /* @__PURE__ */ jsx62("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: description2 })
+        ] }),
+        /* @__PURE__ */ jsx62("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-3", children: LOADING_ROW_WIDTHS.map((width) => /* @__PURE__ */ jsx62(Skeleton, { className: cn("clcosdk:h-8", width) }, width)) })
+      ]
     }
   );
 }
 
 // src/client/components/requirements/tax-document/TaxDocumentModalView.tsx
-import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
 function TaxDocumentModalView({
   state,
   onEvent,
@@ -10443,7 +10771,7 @@ function TaxDocumentModalView({
   if (state.type === "hidden") {
     return null;
   }
-  return /* @__PURE__ */ jsx62(CoinListStyleScope, { children: /* @__PURE__ */ jsx62("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__ */ jsxs44(
+  return /* @__PURE__ */ jsx63(CoinListStyleScope, { children: /* @__PURE__ */ jsx63("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__ */ jsxs45(
     "div",
     {
       className: cn(
@@ -10451,11 +10779,11 @@ function TaxDocumentModalView({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
-          /* @__PURE__ */ jsx62("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
-          /* @__PURE__ */ jsx62(CloseButton, { onClick: () => onEvent({ type: "ON_CLOSE" }) })
+        /* @__PURE__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
+          /* @__PURE__ */ jsx63("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
+          /* @__PURE__ */ jsx63(CloseButton, { onClick: () => onEvent({ type: "ON_CLOSE" }) })
         ] }),
-        /* @__PURE__ */ jsx62(Screen, { screen: state.screen, onEvent })
+        /* @__PURE__ */ jsx63(Screen, { screen: state.screen, onEvent })
       ]
     }
   ) }) });
@@ -10466,11 +10794,11 @@ function Screen({
 }) {
   switch (screen.type) {
     case "loading":
-      return /* @__PURE__ */ jsx62(LoadingScreen, {});
+      return /* @__PURE__ */ jsx63(LoadingScreen, {});
     case "error":
-      return /* @__PURE__ */ jsx62(AlertBanner, { variant: "error", icon: true, content: screen.message });
+      return /* @__PURE__ */ jsx63(AlertBanner, { variant: "error", icon: true, content: screen.message });
     case "review":
-      return /* @__PURE__ */ jsx62(
+      return /* @__PURE__ */ jsx63(
         ReviewScreen,
         {
           fields: screen.fields,
@@ -10481,9 +10809,9 @@ function Screen({
         }
       );
     case "editing":
-      return /* @__PURE__ */ jsx62(EditScreen, { fields: screen.fields, onEvent });
+      return /* @__PURE__ */ jsx63(EditScreen, { fields: screen.fields, onEvent });
     case "sign-only":
-      return /* @__PURE__ */ jsx62(
+      return /* @__PURE__ */ jsx63(
         SignOnlyScreen,
         {
           signing: screen.signing,
@@ -10498,14 +10826,14 @@ function Screen({
   }
 }
 function LoadingScreen() {
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     "output",
     {
       "aria-live": "polite",
       className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4",
-      children: [0, 1, 2, 3, 4].map((row) => /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1", children: [
-        /* @__PURE__ */ jsx62("div", { className: "clcosdk:h-3 clcosdk:w-28 clcosdk:animate-pulse clcosdk:rounded clcosdk:bg-surface" }),
-        /* @__PURE__ */ jsx62("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__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1", children: [
+        /* @__PURE__ */ jsx63("div", { className: "clcosdk:h-3 clcosdk:w-28 clcosdk:animate-pulse clcosdk:rounded clcosdk:bg-surface" }),
+        /* @__PURE__ */ jsx63("div", { className: "clcosdk:h-5 clcosdk:w-48 clcosdk:animate-pulse clcosdk:rounded clcosdk:bg-surface" })
       ] }, row))
     }
   );
@@ -10517,9 +10845,9 @@ function ReviewScreen({
   signError,
   onEvent
 }) {
-  return /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
-    /* @__PURE__ */ jsx62("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Review your information below. If anything looks incorrect, edit before signing." }),
-    piiUnavailable && /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+    /* @__PURE__ */ jsx63("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Review your information below. If anything looks incorrect, edit before signing." }),
+    piiUnavailable && /* @__PURE__ */ jsx63(
       AlertBanner,
       {
         variant: "info",
@@ -10527,27 +10855,27 @@ function ReviewScreen({
         content: "We don't have this information on file yet \u2014 please fill it in below."
       }
     ),
-    /* @__PURE__ */ jsx62("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__ */ jsxs44(
+    /* @__PURE__ */ jsx63("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__ */ jsxs45(
       "div",
       {
         className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1",
         children: [
-          /* @__PURE__ */ jsx62(
+          /* @__PURE__ */ jsx63(
             "span",
             {
               className: cn(typeClasses.label, "clcosdk:text-text-secondary"),
               children: label
             }
           ),
-          /* @__PURE__ */ jsx62("span", { className: cn(typeClasses.body, "clcosdk:text-text-primary"), children: displayValue })
+          /* @__PURE__ */ jsx63("span", { className: cn(typeClasses.body, "clcosdk:text-text-primary"), children: displayValue })
         ]
       },
       field
     )) }),
-    /* @__PURE__ */ jsx62("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__ */ jsx62(AlertBanner, { variant: "error", icon: true, content: signError }),
-    /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
-      /* @__PURE__ */ jsx62(
+    /* @__PURE__ */ jsx63("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__ */ jsx63(AlertBanner, { variant: "error", icon: true, content: signError }),
+    /* @__PURE__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+      /* @__PURE__ */ jsx63(
         ClButton,
         {
           fullWidth: true,
@@ -10557,7 +10885,7 @@ function ReviewScreen({
           children: "Sign W-8BEN"
         }
       ),
-      /* @__PURE__ */ jsx62(
+      /* @__PURE__ */ jsx63(
         ClButton,
         {
           fullWidth: true,
@@ -10574,20 +10902,20 @@ function EditScreen({
   fields,
   onEvent
 }) {
-  return /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
-    /* @__PURE__ */ jsx62("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__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+    /* @__PURE__ */ jsx63("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__ */ jsxs45(
       "label",
       {
         className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1",
         children: [
-          /* @__PURE__ */ jsx62(
+          /* @__PURE__ */ jsx63(
             "span",
             {
               className: cn(typeClasses.label, "clcosdk:text-text-secondary"),
               children: label
             }
           ),
-          /* @__PURE__ */ jsx62(
+          /* @__PURE__ */ jsx63(
             "input",
             {
               type: "text",
@@ -10608,9 +10936,9 @@ function EditScreen({
       },
       field
     )) }),
-    /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
-      /* @__PURE__ */ jsx62(ClButton, { fullWidth: true, onClick: () => onEvent({ type: "ON_SAVE_EDIT" }), children: "Save & review" }),
-      /* @__PURE__ */ jsx62(
+    /* @__PURE__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+      /* @__PURE__ */ jsx63(ClButton, { fullWidth: true, onClick: () => onEvent({ type: "ON_SAVE_EDIT" }), children: "Save & review" }),
+      /* @__PURE__ */ jsx63(
         ClButton,
         {
           fullWidth: true,
@@ -10627,10 +10955,10 @@ function SignOnlyScreen({
   signError,
   onEvent
 }) {
-  return /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
-    /* @__PURE__ */ jsx62("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__ */ jsx62(AlertBanner, { variant: "error", icon: true, content: signError }),
-    /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+    /* @__PURE__ */ jsx63("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__ */ jsx63(AlertBanner, { variant: "error", icon: true, content: signError }),
+    /* @__PURE__ */ jsx63(
       ClButton,
       {
         fullWidth: true,
@@ -10644,12 +10972,12 @@ function SignOnlyScreen({
 }
 
 // src/client/hooks/requirements/tax-document/useTaxDocumentModalViewModel.ts
-import { useCallback as useCallback10, useEffect as useEffect24, useMemo as useMemo6 } from "react";
+import { useCallback as useCallback11, useEffect as useEffect25, useMemo as useMemo8 } from "react";
 
 // src/client/hooks/requirements/data/useTaxDocument.ts
-import { useCallback as useCallback9, useEffect as useEffect23, useState as useState27 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect24, useState as useState28 } from "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 = {
@@ -10722,8 +11050,8 @@ function useTaxDocument({
 }) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useTaxDocument");
-  const [state, setState] = useState27(LOADING_STATE5);
-  useEffect23(() => {
+  const [state, setState] = useState28(LOADING_STATE6);
+  useEffect24(() => {
     let isCancelled = false;
     if (!isOpen) {
       return () => {
@@ -10731,12 +11059,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") {
@@ -10764,7 +11092,7 @@ function useTaxDocument({
       isCancelled = true;
     };
   }, [coinlist, isReady, isOpen, log]);
-  const onEditField = useCallback9(
+  const onEditField = useCallback10(
     (field, value) => {
       setState(
         (prev) => prev.type === "EDITING" ? { ...prev, fields: { ...prev.fields, [field]: value } } : prev
@@ -10772,7 +11100,7 @@ function useTaxDocument({
     },
     []
   );
-  const onStartEdit = useCallback9(() => {
+  const onStartEdit = useCallback10(() => {
     setState(
       (prev) => prev.type === "REVIEW" ? {
         type: "EDITING",
@@ -10783,7 +11111,7 @@ function useTaxDocument({
       } : prev
     );
   }, []);
-  const onSaveEdit = useCallback9(() => {
+  const onSaveEdit = useCallback10(() => {
     setState(
       (prev) => prev.type === "EDITING" ? {
         type: "REVIEW",
@@ -10794,7 +11122,7 @@ function useTaxDocument({
       } : prev
     );
   }, []);
-  const onCancelEdit = useCallback9(() => {
+  const onCancelEdit = useCallback10(() => {
     setState(
       (prev) => prev.type === "EDITING" ? {
         type: "REVIEW",
@@ -10805,7 +11133,7 @@ function useTaxDocument({
       } : prev
     );
   }, []);
-  const onSign = useCallback9(() => {
+  const onSign = useCallback10(() => {
     if (state.type !== "REVIEW" && state.type !== "SIGN_ONLY") return;
     if (state.type === "REVIEW" && state.fields.dob.trim() !== "" && !isValidUsDate(state.fields.dob)) {
       setState({
@@ -10847,19 +11175,19 @@ function useTaxDocumentModalViewModel({
   onSubmitted
 }) {
   const { state, onEditField, onStartEdit, onSaveEdit, onCancelEdit, onSign } = useTaxDocument({ isOpen });
-  useEffect24(() => {
+  useEffect25(() => {
     if (state.type === "SUBMITTED") {
       onSubmitted?.(state.submission);
       onClose();
     }
   }, [state]);
-  const uiState = useMemo6(() => {
+  const uiState = useMemo8(() => {
     if (!isOpen || state.type === "SUBMITTED") {
       return { type: "hidden" };
     }
     return { type: "content", title: toTitle(state), screen: toScreen(state) };
   }, [isOpen, state]);
-  const onEvent = useCallback10(
+  const onEvent = useCallback11(
     (event) => {
       switch (event.type) {
         case "ON_CLOSE":
@@ -10942,7 +11270,7 @@ function toFieldsUi(fields) {
 }
 
 // src/client/components/requirements/tax-document/TaxDocumentModalContainer.tsx
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 function TaxDocumentModalContainer({
   isOpen,
   onClose,
@@ -10954,7 +11282,7 @@ function TaxDocumentModalContainer({
     onClose,
     onSubmitted
   });
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     TaxDocumentModalView,
     {
       state,
@@ -10965,26 +11293,26 @@ function TaxDocumentModalContainer({
 }
 
 // src/client/components/requirements/VerificationOverlay.tsx
-import { jsx as jsx64, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
 function VerificationOverlay({
   onClose,
   children
 }) {
-  return /* @__PURE__ */ jsx64(CoinListStyleScope, { children: /* @__PURE__ */ jsx64(VerificationOverlayBody, { onClose, children }) });
+  return /* @__PURE__ */ jsx65(CoinListStyleScope, { children: /* @__PURE__ */ jsx65(VerificationOverlayBody, { onClose, children }) });
 }
 function VerificationOverlayBody({
   onClose,
   children
 }) {
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     "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__ */ jsxs45("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__ */ jsx64(
+      children: /* @__PURE__ */ jsxs46("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__ */ jsx65(
           CloseButton,
           {
             onClick: onClose,
@@ -10999,7 +11327,7 @@ function VerificationOverlayBody({
 
 // src/client/components/requirements/wallet/ConnectWalletModalView.tsx
 import { useId as useId5 } from "react";
-import { jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
 function ConnectWalletModalView({
   state,
   onEvent,
@@ -11009,7 +11337,7 @@ function ConnectWalletModalView({
   if (state.type === "hidden") {
     return null;
   }
-  return /* @__PURE__ */ jsx65(CoinListStyleScope, { children: /* @__PURE__ */ jsx65("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__ */ jsxs46(
+  return /* @__PURE__ */ jsx66(CoinListStyleScope, { children: /* @__PURE__ */ jsx66("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__ */ jsxs47(
     "div",
     {
       role: "dialog",
@@ -11020,8 +11348,8 @@ function ConnectWalletModalView({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs46("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
-          /* @__PURE__ */ jsx65(
+        /* @__PURE__ */ jsxs47("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
+          /* @__PURE__ */ jsx66(
             "h3",
             {
               id: titleId,
@@ -11029,9 +11357,9 @@ function ConnectWalletModalView({
               children: "Connect your wallet"
             }
           ),
-          /* @__PURE__ */ jsx65(CloseButton, { onClick: () => onEvent({ type: "ON_CLOSE" }) })
+          /* @__PURE__ */ jsx66(CloseButton, { onClick: () => onEvent({ type: "ON_CLOSE" }) })
         ] }),
-        /* @__PURE__ */ jsx65(
+        /* @__PURE__ */ jsx66(
           Screen2,
           {
             screen: state.screen,
@@ -11050,9 +11378,9 @@ function Screen2({
 }) {
   switch (screen.type) {
     case "needs-wallet":
-      return /* @__PURE__ */ jsxs46("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
-        /* @__PURE__ */ jsx65("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__ */ jsx65(
+      return /* @__PURE__ */ jsxs47("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+        /* @__PURE__ */ jsx66("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__ */ jsx66(
           ClButton,
           {
             fullWidth: true,
@@ -11062,23 +11390,23 @@ function Screen2({
         )
       ] });
     case "ready":
-      return /* @__PURE__ */ jsxs46("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
-        /* @__PURE__ */ jsx65("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__ */ jsxs46("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: [
-          /* @__PURE__ */ jsx65(
+      return /* @__PURE__ */ jsxs47("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
+        /* @__PURE__ */ jsx66("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__ */ jsxs47("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: [
+          /* @__PURE__ */ jsx66(
             "span",
             {
               className: cn(typeClasses.label, "clcosdk:text-text-secondary"),
               children: "Wallet address"
             }
           ),
-          /* @__PURE__ */ jsx65("span", { className: cn(typeClasses.body, "clcosdk:text-text-primary"), children: screen.shortAddress })
+          /* @__PURE__ */ jsx66("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__ */ jsx65("div", { role: "alert", children: /* @__PURE__ */ jsx65(AlertBanner, { variant: "error", icon: true, content: screen.signError }) }),
-        /* @__PURE__ */ jsx65(
+        /* @__PURE__ */ jsx66("div", { role: "alert", children: /* @__PURE__ */ jsx66(AlertBanner, { variant: "error", icon: true, content: screen.signError }) }),
+        /* @__PURE__ */ jsx66(
           ClButton,
           {
             fullWidth: true,
@@ -11089,7 +11417,7 @@ function Screen2({
             children: "Sign & connect"
           }
         ),
-        canRequestConnect && /* @__PURE__ */ jsx65(
+        canRequestConnect && /* @__PURE__ */ jsx66(
           ClButton,
           {
             fullWidth: true,
@@ -11108,10 +11436,10 @@ function Screen2({
 }
 
 // src/client/hooks/requirements/wallet/useConnectWalletModalViewModel.ts
-import { useCallback as useCallback12, useEffect as useEffect26, useMemo as useMemo7 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect27, useMemo as useMemo9 } from "react";
 
 // src/client/hooks/requirements/data/useConnectWallet.ts
-import { useCallback as useCallback11, useEffect as useEffect25, useRef as useRef16, useState as useState28 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect26, useRef as useRef16, useState as useState29 } from "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.";
@@ -11242,24 +11570,24 @@ function useConnectWallet({
   statement
 }) {
   const { coinlist } = useCoinList();
-  const [state, setState] = useState28(
+  const [state, setState] = useState29(
     () => wallet ? { type: "READY", address: wallet.address, sign: IDLE_SIGN2 } : { type: "NEEDS_WALLET" }
   );
   const attempt = useRef16(0);
-  useEffect25(() => {
+  useEffect26(() => {
     attempt.current += 1;
     if (!isOpen) return;
     setState(
       wallet ? { type: "READY", address: wallet.address, sign: IDLE_SIGN2 } : { type: "NEEDS_WALLET" }
     );
   }, [isOpen, wallet?.address]);
-  useEffect25(
+  useEffect26(
     () => () => {
       attempt.current += 1;
     },
     []
   );
-  const onSign = useCallback11(() => {
+  const onSign = useCallback12(() => {
     if (!wallet || state.type !== "READY") return;
     attempt.current += 1;
     const gen = attempt.current;
@@ -11321,13 +11649,13 @@ function useConnectWalletModalViewModel({
     challengeType,
     statement
   });
-  useEffect26(() => {
+  useEffect27(() => {
     if (state.type === "CONNECTED") {
       onConnected?.(state.binding);
       onClose();
     }
   }, [state]);
-  const uiState = useMemo7(() => {
+  const uiState = useMemo9(() => {
     if (!isOpen || state.type === "CONNECTED") {
       return { type: "hidden" };
     }
@@ -11352,7 +11680,7 @@ function useConnectWalletModalViewModel({
       canRequestConnect
     };
   }, [isOpen, state, onRequestConnect]);
-  const onEvent = useCallback12(
+  const onEvent = useCallback13(
     (event) => {
       switch (event.type) {
         case "ON_CLOSE":
@@ -11376,13 +11704,13 @@ function useConnectWalletModalViewModel({
 }
 
 // src/client/components/requirements/wallet/ConnectWalletModalContainer.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 function ConnectWalletModalContainer({
   className,
   ...options
 }) {
   const { state, onEvent } = useConnectWalletModalViewModel(options);
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     ConnectWalletModalView,
     {
       state,
@@ -11393,11 +11721,11 @@ function ConnectWalletModalContainer({
 }
 
 // src/client/hooks/requirements/useRequirementsChecklistViewModel.ts
-import { useCallback as useCallback15, useEffect as useEffect29, useMemo as useMemo8, useRef as useRef17, useState as useState31 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect30, useMemo as useMemo10, useRef as useRef17, useState as useState32 } from "react";
 
 // src/client/hooks/requirements/data/useOptionAddresses.ts
-import { useCallback as useCallback13, useEffect as useEffect27, useState as useState29 } from "react";
-var LOADING_STATE6 = { type: "LOADING" };
+import { useCallback as useCallback14, useEffect as useEffect28, useState as useState30 } from "react";
+var LOADING_STATE7 = { type: "LOADING" };
 var EMPTY_STATE = {
   type: "CONTENT",
   addresses: []
@@ -11406,19 +11734,19 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
   const { coinlist, isReady } = useCoinList();
   const log = useLogger("useOptionAddresses");
   const { data, enabled = true } = options;
-  const [addressesState, setAddressesState] = useState29(
-    data !== void 0 ? { type: "CONTENT", addresses: data } : LOADING_STATE6
+  const [addressesState, setAddressesState] = useState30(
+    data !== void 0 ? { type: "CONTENT", addresses: data } : LOADING_STATE7
   );
-  const [fetchKey, setFetchKey] = useState29(0);
-  const refetch = useCallback13(() => setFetchKey((k) => k + 1), []);
-  const disconnect = useCallback13(
+  const [fetchKey, setFetchKey] = useState30(0);
+  const refetch = useCallback14(() => setFetchKey((k) => k + 1), []);
+  const disconnect = useCallback14(
     async (addressId) => {
       await coinlist.wallets.remove({ offerId, addressId });
       refetch();
     },
     [coinlist, offerId, refetch]
   );
-  useEffect27(() => {
+  useEffect28(() => {
     let isCancelled = false;
     if (!enabled) {
       setAddressesState(
@@ -11430,7 +11758,7 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
     }
     if (!isReady) {
       if (data === void 0) {
-        setAddressesState(LOADING_STATE6);
+        setAddressesState(LOADING_STATE7);
       }
       return () => {
         isCancelled = true;
@@ -11447,7 +11775,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(() => ({
@@ -11474,18 +11802,18 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
 }
 
 // src/client/hooks/requirements/data/useRequirements.ts
-import { useCallback as useCallback14, useEffect as useEffect28, useState as useState30 } from "react";
-var LOADING_STATE7 = { type: "LOADING" };
+import { useCallback as useCallback15, useEffect as useEffect29, useState as useState31 } from "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] = useState30(
-    data !== void 0 ? { type: "CONTENT", ...data } : LOADING_STATE7
+  const [requirementsState, setRequirementsState] = useState31(
+    data !== void 0 ? { type: "CONTENT", ...data } : LOADING_STATE8
   );
-  const [fetchKey, setFetchKey] = useState30(0);
-  const refetch = useCallback14(() => setFetchKey((k) => k + 1), []);
-  useEffect28(() => {
+  const [fetchKey, setFetchKey] = useState31(0);
+  const refetch = useCallback15(() => setFetchKey((k) => k + 1), []);
+  useEffect29(() => {
     let isCancelled = false;
     if (!enabled) {
       return () => {
@@ -11494,7 +11822,7 @@ function useRequirements(offerId, options = {}) {
     }
     if (!isReady) {
       if (data === void 0) {
-        setRequirementsState(LOADING_STATE7);
+        setRequirementsState(LOADING_STATE8);
       }
       return () => {
         isCancelled = true;
@@ -11511,7 +11839,7 @@ function useRequirements(offerId, options = {}) {
         isCancelled = true;
       };
     }
-    setRequirementsState(LOADING_STATE7);
+    setRequirementsState(LOADING_STATE8);
     Promise.all([
       coinlist.requirements.forOffer(offerId),
       coinlist.requirements.statuses(offerId)
@@ -11553,7 +11881,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",
@@ -11561,10 +11889,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) {
@@ -11601,20 +11963,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;
@@ -11645,19 +12007,19 @@ function useRequirementsChecklistViewModel(options) {
     data,
     enabled
   });
-  const [expandedId, setExpandedId] = useState31(null);
-  const [taxDocumentOpen, setTaxDocumentOpen] = useState31(false);
-  const [connectWalletOpen, setConnectWalletOpen] = useState31(false);
-  const [verifyingRequirementId, setVerifyingRequirementId] = useState31(null);
+  const [expandedId, setExpandedId] = useState32(null);
+  const [taxDocumentOpen, setTaxDocumentOpen] = useState32(false);
+  const [connectWalletOpen, setConnectWalletOpen] = useState32(false);
+  const [verifyingRequirementId, setVerifyingRequirementId] = useState32(null);
   const isMountedRef = useRef17(true);
-  useEffect29(() => {
+  useEffect30(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
     };
   }, []);
-  const [hasWalletRequirement, setHasWalletRequirement] = useState31(false);
-  useEffect29(() => {
+  const [hasWalletRequirement, setHasWalletRequirement] = useState32(false);
+  useEffect30(() => {
     if (requirementsState.type === "CONTENT") {
       setHasWalletRequirement(
         (requirementsState.requirements[optionId] ?? []).some(
@@ -11673,14 +12035,14 @@ function useRequirementsChecklistViewModel(options) {
   } = useOptionAddresses(offerId, optionId, {
     enabled: enabled && hasWalletRequirement
   });
-  const removeWallet = useCallback15(
+  const removeWallet = useCallback16(
     async (addressId) => {
       await disconnect(OfferOptionAddressId(addressId));
       refetch();
     },
     [disconnect, refetch]
   );
-  const awaitVerificationResult = useCallback15(
+  const awaitVerificationResult = useCallback16(
     (requirementId, statusBeforeSubmit) => {
       void (async () => {
         const deadline = Date.now() + VERIFICATION_POLL_TIMEOUT_MS;
@@ -11707,11 +12069,11 @@ function useRequirementsChecklistViewModel(options) {
     },
     [coinlist, offerId, refetch, log]
   );
-  const requirements = useMemo8(
+  const requirements = useMemo10(
     () => requirementsState.type === "CONTENT" ? requirementsState.requirements[optionId] ?? [] : [],
     [requirementsState, optionId]
   );
-  const statusById = useMemo8(() => {
+  const statusById = useMemo10(() => {
     if (requirementsState.type !== "CONTENT") {
       return /* @__PURE__ */ new Map();
     }
@@ -11720,12 +12082,12 @@ function useRequirementsChecklistViewModel(options) {
       requirementsState.statuses.filter((s) => ids.has(s.id)).map((s) => [s.id, s])
     );
   }, [requirementsState, requirements]);
-  const state = useMemo8(() => {
+  const state = useMemo10(() => {
     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);
@@ -11789,7 +12151,7 @@ function useRequirementsChecklistViewModel(options) {
     identityVerificationOptions,
     removeWallet
   ]);
-  const handleRequirementAction = useCallback15(
+  const handleRequirementAction = useCallback16(
     (requirement) => {
       const inlineVerification = statusById.get(requirement.id)?.kycLevel !== void 0 && onRequirementActionOverride === void 0;
       if (inlineVerification) {
@@ -11821,7 +12183,7 @@ function useRequirementsChecklistViewModel(options) {
       coinlist
     ]
   );
-  const onEvent = useCallback15(
+  const onEvent = useCallback16(
     (event) => {
       switch (event.type) {
         case "ON_TOGGLE_ITEM":
@@ -11919,11 +12281,10 @@ function toVerificationUi(verifyingRequirementId, statusById, identityVerificati
 }
 
 // src/client/components/requirements/RequirementsChecklistContainer.tsx
-import { Fragment as Fragment10, jsx as jsx67, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx68, jsxs as jsxs48 } from "react/jsx-runtime";
 function RequirementsChecklistContainer({
   loading,
   error,
-  unauthenticatedState,
   className,
   enabled = true,
   ...options
@@ -11932,24 +12293,19 @@ function RequirementsChecklistContainer({
     ...options,
     enabled
   });
-  return /* @__PURE__ */ jsxs47(Fragment10, { children: [
-    /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsxs48(Fragment12, { children: [
+    /* @__PURE__ */ jsx68(
       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__ */ jsx67(CoinListSignInCardContainer, {})
-        ),
         className
       }
     ),
-    state.type === "content" && /* @__PURE__ */ jsxs47(Fragment10, { children: [
-      /* @__PURE__ */ jsx67(
+    state.type === "content" && /* @__PURE__ */ jsxs48(Fragment12, { children: [
+      /* @__PURE__ */ jsx68(
         TaxDocumentModalContainer,
         {
           isOpen: state.taxDocumentOpen,
@@ -11957,11 +12313,11 @@ function RequirementsChecklistContainer({
           onSubmitted: () => onEvent({ type: "ON_TAX_DOCUMENT_SUBMITTED" })
         }
       ),
-      state.verification && /* @__PURE__ */ jsx67(
+      state.verification && /* @__PURE__ */ jsx68(
         VerificationOverlay,
         {
           onClose: () => onEvent({ type: "ON_CLOSE_VERIFICATION" }),
-          children: /* @__PURE__ */ jsx67(
+          children: /* @__PURE__ */ jsx68(
             IdentityVerificationContainer,
             {
               levelName: state.verification.levelName,
@@ -11972,7 +12328,7 @@ function RequirementsChecklistContainer({
           )
         }
       ),
-      /* @__PURE__ */ jsx67(
+      /* @__PURE__ */ jsx68(
         ConnectWalletModalContainer,
         {
           isOpen: state.connectWalletOpen,
@@ -12005,7 +12361,7 @@ function pinoClientLogger(options) {
 }
 
 // src/client/hooks/auth/useCompleteOAuth.ts
-import { useEffect as useEffect30, useRef as useRef18 } from "react";
+import { useEffect as useEffect31, useRef as useRef18 } from "react";
 function useCompleteOAuth(options) {
   const { coinlist } = useCoinList();
   const log = useLogger("useCompleteOAuth");
@@ -12016,7 +12372,7 @@ function useCompleteOAuth(options) {
   onFailureRef.current = options.onFailure;
   onSuccessRef.current = options.onSuccess;
   const hasStartedExchangeRef = useRef18(false);
-  useEffect30(() => {
+  useEffect31(() => {
     if (typeof window === "undefined") return;
     const params = new URLSearchParams(window.location.search);
     if (!params.has("code") && !params.has("error")) return;
@@ -12080,16 +12436,16 @@ function useCompleteOAuth(options) {
 }
 
 // src/client/hooks/checkout/coin-list/token-sale/data/useParticipations.ts
-import { useEffect as useEffect31, useState as useState32 } from "react";
-var LOADING_STATE8 = { type: "LOADING" };
+import { useEffect as useEffect32, useState as useState33 } from "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] = useState32(
-    data !== void 0 ? { type: "CONTENT", participations: data } : LOADING_STATE8
+  const [participationsState, setParticipationsState] = useState33(
+    data !== void 0 ? { type: "CONTENT", participations: data } : LOADING_STATE9
   );
-  useEffect31(() => {
+  useEffect32(() => {
     let isCancelled = false;
     if (!enabled) {
       return () => {
@@ -12098,7 +12454,7 @@ function useParticipations(offerId, options = {}) {
     }
     if (!isReady) {
       if (data === void 0) {
-        setParticipationsState(LOADING_STATE8);
+        setParticipationsState(LOADING_STATE9);
       }
       return () => {
         isCancelled = true;
@@ -12109,7 +12465,7 @@ function useParticipations(offerId, options = {}) {
         isCancelled = true;
       };
     }
-    setParticipationsState(LOADING_STATE8);
+    setParticipationsState(LOADING_STATE9);
     coinlist.tokenSale.list(offerId).then((participations) => {
       if (!isCancelled) {
         log.debug(() => ({
@@ -12136,16 +12492,16 @@ function useParticipations(offerId, options = {}) {
 }
 
 // src/client/hooks/offers/data/useOfferDetails.ts
-import { useEffect as useEffect32, useState as useState33 } from "react";
-var LOADING_STATE9 = { type: "LOADING" };
+import { useEffect as useEffect33, useState as useState34 } from "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] = useState33(
-    data !== void 0 ? { type: "CONTENT", offerDetail: data } : LOADING_STATE9
+  const [offerDetailsState, setOfferDetailsState] = useState34(
+    data !== void 0 ? { type: "CONTENT", offerDetail: data } : LOADING_STATE10
   );
-  useEffect32(() => {
+  useEffect33(() => {
     let isCancelled = false;
     if (!enabled) {
       return () => {
@@ -12154,7 +12510,7 @@ function useOfferDetails(offerId, options = {}) {
     }
     if (!isReady) {
       if (data === void 0) {
-        setOfferDetailsState(LOADING_STATE9);
+        setOfferDetailsState(LOADING_STATE10);
       }
       return () => {
         isCancelled = true;
@@ -12165,7 +12521,7 @@ function useOfferDetails(offerId, options = {}) {
         isCancelled = true;
       };
     }
-    setOfferDetailsState(LOADING_STATE9);
+    setOfferDetailsState(LOADING_STATE10);
     coinlist.offers.get(offerId).then((offerDetail) => {
       if (!isCancelled) {
         log.debug(() => ({
@@ -12193,15 +12549,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)
   })
 };
 
@@ -12243,6 +12607,7 @@ export {
   OAUTH_STATE_KEY,
   OfferAssetCard,
   OfferAssetCardUi,
+  OfferLogoUi,
   OfferSaleCard,
   OfferSaleCardUi,
   OffersAssetGrid,
@@ -12304,6 +12669,7 @@ export {
   quoteOverAsks,
   stablecoinIconUrl,
   submitErc20Approval,
+  tokenLogoSrcSet,
   tokenLogoUrl,
   tokenMetadataOf,
   useCheckoutOfferTokenMetadata,
@@ -12346,6 +12712,7 @@ export {
   useTaxDocument,
   useTaxDocumentModalViewModel,
   useTokenMetadata,
+  useTokenRegistry,
   validateAmount,
   validateSellAmount,
   validateSuperstateAmount