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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -24,6 +24,7 @@ import {
24
24
  SWAP_POLL_INTERVAL_MS,
25
25
  SwapQuote,
26
26
  TOKEN_REGISTRY,
27
+ TokenRegistrySnapshot,
27
28
  USDC,
28
29
  USDC_SYMBOL,
29
30
  computeOndoBuyPrice,
@@ -34,10 +35,11 @@ import {
34
35
  formattedPricePerShare,
35
36
  generatePKCEParams,
36
37
  isSwapAvailable,
38
+ offerDisplayTokens,
37
39
  ondoQuoteOfferDeadline,
38
40
  superstateSwapContractAddress,
39
41
  swapSpender
40
- } from "../chunk-QIAM2VUU.js";
42
+ } from "../chunk-VH34YC3Q.js";
41
43
  import {
42
44
  API_VERSION,
43
45
  AssetDecimals,
@@ -1094,7 +1096,7 @@ var CoinListProvider = CoinListContextProvider;
1094
1096
  import { createContext as createContext4, useContext as useContext3 } from "react";
1095
1097
 
1096
1098
  // src/client/generated/sdk-styles.gen.ts
1097
- var sdkStyles = '/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--clcosdk-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--clcosdk-color-red-400:oklch(70.4% .191 22.216);--clcosdk-color-red-500:oklch(63.7% .237 25.331);--clcosdk-color-amber-500:oklch(76.9% .188 70.08);--clcosdk-color-gray-400:oklch(70.7% .022 261.325);--clcosdk-color-gray-500:oklch(55.1% .027 264.364);--clcosdk-color-black:#000;--clcosdk-spacing:.25rem;--clcosdk-container-sm:24rem;--clcosdk-container-md:28rem;--clcosdk-container-xl:36rem;--clcosdk-text-xs:.75rem;--clcosdk-text-xs--line-height:calc(1 / .75);--clcosdk-text-sm:.875rem;--clcosdk-text-sm--line-height:calc(1.25 / .875);--clcosdk-text-base:1rem;--clcosdk-text-base--line-height:calc(1.5 / 1);--clcosdk-text-lg:1.125rem;--clcosdk-text-lg--line-height:calc(1.75 / 1.125);--clcosdk-font-weight-normal:400;--clcosdk-font-weight-medium:500;--clcosdk-font-weight-semibold:600;--clcosdk-radius-md:.375rem;--clcosdk-radius-lg:.5rem;--clcosdk-radius-xl:.75rem;--clcosdk-radius-2xl:1rem;--clcosdk-ease-out:cubic-bezier(0, 0, .2, 1);--clcosdk-ease-in-out:cubic-bezier(.4, 0, .2, 1);--clcosdk-animate-spin:spin 1s linear infinite;--clcosdk-animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--clcosdk-color-brand-primary:var(--color-brand-primary)}}@layer base{.clco-sdk-root{--color-brand-primary:#171717;--color-brand-primary-hover:#000;--color-brand-primary-active:#262626;--color-accent:#2b3a67;--color-accent-hover:#243057;--color-accent-active:#1d2647;--color-accent-focus:#c7d2fe;--color-accent-subtle:#eef1f8;--color-text-primary:#171717;--color-text-secondary:#8c8c8c;--color-text-disabled:#d1d1d1;--color-text-inverse:#fff;--color-background:#fff;--color-surface:#fafafa;--color-section:#f3f3f3;--color-border:#e5e5e5;--color-divider:#ececec;--color-overlay:#00000080;--color-positive:#15803d;--color-positive-subtle:#dcfce7;--color-negative:#dc2626;--color-negative-subtle:#fee2e2;--color-success:#2c8c5e;--color-success-subtle:#e6f4ec;--color-success-border:#cfe9db;--color-warning:#e08a1a;--color-warning-subtle:#fff7ed;--color-warning-border:#fdead7;--color-error:#b42318;--color-error-subtle:#feeceb;--color-error-border:#fbd5d2;--shadow-step-active:0px 0px 10px 0px #0000001a;--shadow-dialog:0px 8px 32px 0px #0000001a;--btn-primary-gradient:linear-gradient(180deg, #262626 0%, #1c1c1c 50%, #0f0f0f 100%);--btn-primary-shadow:inset 0px -1px 3px 0px #00000059, inset 0px 1px 2px 0px #ffffff2e, inset 0px 1px 0px 0px #ffffff1a;--sale-card-surface:linear-gradient(to top, #0a0a0a 0%, #1a1a1a 100%);--color-sale-card-text:#f4f4f5;--color-sale-card-text-muted:#a1a1aa;--color-sale-card-text-strong:#fff;--color-sale-card-border:#ffffff40;--color-sale-card-chrome-border:#ffffff4d;--color-sale-card-chrome-bg:#ffffff26;--color-sale-card-chrome-emphasis-border:#fff6;--color-sale-card-chrome-emphasis-bg:#ffffff40;--color-sale-card-focus-ring:#ffffff80}@media (prefers-color-scheme:dark){.clco-sdk-root:not(:where(.light,.light *)){--color-brand-primary:#f4f4f5;--color-brand-primary-hover:#fff;--color-brand-primary-active:#e4e4e7;--color-accent:#6f82c9;--color-accent-hover:#8799e4;--color-accent-active:#5b6fcf;--color-accent-focus:#6f82c959;--color-accent-subtle:#6f82c91f;--color-text-primary:#f4f4f5;--color-text-secondary:#a1a1aa;--color-text-disabled:#71717a;--color-text-inverse:#171717;--color-background:#0f1115;--color-surface:#161a20;--color-section:#20242c;--color-border:#2a2e35;--color-divider:#323741;--color-overlay:#000000b3;--color-positive:#22c55e;--color-positive-subtle:#22c55e1f;--color-negative:#ef4444;--color-negative-subtle:#ef44441f;--color-success:#34d399;--color-success-subtle:#34d3991f;--color-success-border:#34d39940;--color-warning:#f59e0b;--color-warning-subtle:#f59e0b1f;--color-warning-border:#f59e0b40;--color-error:#f87171;--color-error-subtle:#f871711f;--color-error-border:#f8717140;--shadow-step-active:0px 0px 10px 0px #00000080;--shadow-dialog:0px 8px 32px 0px #0009;--btn-primary-gradient:linear-gradient(180deg, #fafafa 0%, #f0f0f0 50%, #e4e4e7 100%);--btn-primary-shadow:inset 0px -1px 3px 0px #0000001f, inset 0px 1px 2px 0px #fff9, inset 0px 1px 0px 0px #fff6}}:where(.dark,.dark *) .clco-sdk-root{--color-brand-primary:#f4f4f5;--color-brand-primary-hover:#fff;--color-brand-primary-active:#e4e4e7;--color-accent:#6f82c9;--color-accent-hover:#8799e4;--color-accent-active:#5b6fcf;--color-accent-focus:#6f82c959;--color-accent-subtle:#6f82c91f;--color-text-primary:#f4f4f5;--color-text-secondary:#a1a1aa;--color-text-disabled:#71717a;--color-text-inverse:#171717;--color-background:#0f1115;--color-surface:#161a20;--color-section:#20242c;--color-border:#2a2e35;--color-divider:#323741;--color-overlay:#000000b3;--color-positive:#22c55e;--color-positive-subtle:#22c55e1f;--color-negative:#ef4444;--color-negative-subtle:#ef44441f;--color-success:#34d399;--color-success-subtle:#34d3991f;--color-success-border:#34d39940;--color-warning:#f59e0b;--color-warning-subtle:#f59e0b1f;--color-warning-border:#f59e0b40;--color-error:#f87171;--color-error-subtle:#f871711f;--color-error-border:#f8717140;--shadow-step-active:0px 0px 10px 0px #00000080;--shadow-dialog:0px 8px 32px 0px #0009;--btn-primary-gradient:linear-gradient(180deg, #fafafa 0%, #f0f0f0 50%, #e4e4e7 100%);--btn-primary-shadow:inset 0px -1px 3px 0px #0000001f, inset 0px 1px 2px 0px #fff9, inset 0px 1px 0px 0px #fff6}.clco-sdk-root{color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.clco-sdk-root *,.clco-sdk-root :before,.clco-sdk-root :after{box-sizing:border-box}.clco-sdk-root button{appearance:none;cursor:pointer;font:inherit;color:inherit;background:0 0;border:none;padding:0}.clco-sdk-root input,.clco-sdk-root textarea,.clco-sdk-root select{font:inherit;color:inherit;background:0 0;border:none;border-radius:0;padding:0}.clco-sdk-root a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}.clco-sdk-root ul,.clco-sdk-root ol{margin:0;padding:0;list-style:none}.clco-sdk-root h1,.clco-sdk-root h2,.clco-sdk-root h3,.clco-sdk-root h4,.clco-sdk-root h5,.clco-sdk-root h6,.clco-sdk-root p,.clco-sdk-root figure,.clco-sdk-root blockquote,.clco-sdk-root dl,.clco-sdk-root dd,.clco-sdk-root pre{margin:0}.clco-sdk-root img,.clco-sdk-root svg{max-width:100%;display:block}@keyframes clco-status-ping{0%{opacity:.7;transform:scale(1)}75%,to{opacity:0;transform:scale(3.25)}}.clco-sdk-root .clcosdk-status-dot-ping{animation:1.6s cubic-bezier(0,0,.2,1) infinite clco-status-ping}@media (prefers-reduced-motion:reduce){.clco-sdk-root .clcosdk-status-dot-ping{opacity:0;animation:none}}}@layer components;@layer utilities{.clcosdk\\:pointer-events-none{pointer-events:none}.clcosdk\\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.clcosdk\\:absolute{position:absolute}.clcosdk\\:fixed{position:fixed}.clcosdk\\:relative{position:relative}.clcosdk\\:inset-0{inset:0}.clcosdk\\:top-1\\/2{top:50%}.clcosdk\\:top-4{top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:top-full{top:100%}.clcosdk\\:-right-0\\.5{right:calc(var(--clcosdk-spacing) * -.5)}.clcosdk\\:right-4{right:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:right-\\[-14\\%\\]{right:-14%}.clcosdk\\:-bottom-0\\.5{bottom:calc(var(--clcosdk-spacing) * -.5)}.clcosdk\\:bottom-full{bottom:100%}.clcosdk\\:left-1\\/2{left:50%}.clcosdk\\:z-0{z-index:0}.clcosdk\\:z-10{z-index:10}.clcosdk\\:z-50{z-index:50}.clcosdk\\:order-1{order:1}.clcosdk\\:order-2{order:2}.clcosdk\\:mt-2{margin-top:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:mt-4{margin-top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:mt-auto{margin-top:auto}.clcosdk\\:mb-2{margin-bottom:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:flex{display:flex}.clcosdk\\:grid{display:grid}.clcosdk\\:inline-flex{display:inline-flex}.clcosdk\\:size-2{width:calc(var(--clcosdk-spacing) * 2);height:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:size-3{width:calc(var(--clcosdk-spacing) * 3);height:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:size-3\\.5{width:calc(var(--clcosdk-spacing) * 3.5);height:calc(var(--clcosdk-spacing) * 3.5)}.clcosdk\\:size-4{width:calc(var(--clcosdk-spacing) * 4);height:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:size-5{width:calc(var(--clcosdk-spacing) * 5);height:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:size-10{width:calc(var(--clcosdk-spacing) * 10);height:calc(var(--clcosdk-spacing) * 10)}.clcosdk\\:size-16{width:calc(var(--clcosdk-spacing) * 16);height:calc(var(--clcosdk-spacing) * 16)}.clcosdk\\:size-24{width:calc(var(--clcosdk-spacing) * 24);height:calc(var(--clcosdk-spacing) * 24)}.clcosdk\\:size-\\[15rem\\]{width:15rem;height:15rem}.clcosdk\\:size-full{width:100%;height:100%}.clcosdk\\:h-1{height:var(--clcosdk-spacing)}.clcosdk\\:h-3{height:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:h-4{height:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:h-5{height:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:h-6{height:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:h-8{height:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:h-9{height:calc(var(--clcosdk-spacing) * 9)}.clcosdk\\:h-10{height:calc(var(--clcosdk-spacing) * 10)}.clcosdk\\:h-11{height:calc(var(--clcosdk-spacing) * 11)}.clcosdk\\:h-12{height:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:h-14{height:calc(var(--clcosdk-spacing) * 14)}.clcosdk\\:h-\\[1em\\]{height:1em}.clcosdk\\:h-\\[18px\\]{height:18px}.clcosdk\\:h-\\[54px\\]{height:54px}.clcosdk\\:h-\\[71px\\]{height:71px}.clcosdk\\:h-auto{height:auto}.clcosdk\\:h-full{height:100%}.clcosdk\\:h-px{height:1px}.clcosdk\\:max-h-\\[92vh\\]{max-height:92vh}.clcosdk\\:max-h-full{max-height:100%}.clcosdk\\:min-h-0{min-height:0}.clcosdk\\:min-h-9{min-height:calc(var(--clcosdk-spacing) * 9)}.clcosdk\\:min-h-40{min-height:calc(var(--clcosdk-spacing) * 40)}.clcosdk\\:min-h-\\[1lh\\]{min-height:1lh}.clcosdk\\:min-h-screen{min-height:100vh}.clcosdk\\:w-1{width:var(--clcosdk-spacing)}.clcosdk\\:w-4{width:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:w-5{width:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:w-6{width:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:w-8{width:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:w-10{width:calc(var(--clcosdk-spacing) * 10)}.clcosdk\\:w-12{width:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:w-16{width:calc(var(--clcosdk-spacing) * 16)}.clcosdk\\:w-20{width:calc(var(--clcosdk-spacing) * 20)}.clcosdk\\:w-24{width:calc(var(--clcosdk-spacing) * 24)}.clcosdk\\:w-28{width:calc(var(--clcosdk-spacing) * 28)}.clcosdk\\:w-32{width:calc(var(--clcosdk-spacing) * 32)}.clcosdk\\:w-40{width:calc(var(--clcosdk-spacing) * 40)}.clcosdk\\:w-48{width:calc(var(--clcosdk-spacing) * 48)}.clcosdk\\:w-80{width:calc(var(--clcosdk-spacing) * 80)}.clcosdk\\:w-96{width:calc(var(--clcosdk-spacing) * 96)}.clcosdk\\:w-\\[16px\\]{width:16px}.clcosdk\\:w-\\[28rem\\]{width:28rem}.clcosdk\\:w-\\[448px\\]{width:448px}.clcosdk\\:w-auto{width:auto}.clcosdk\\:w-component{width:448px}.clcosdk\\:w-fit{width:fit-content}.clcosdk\\:w-full{width:100%}.clcosdk\\:w-max{width:max-content}.clcosdk\\:max-w-\\[16rem\\]{max-width:16rem}.clcosdk\\:max-w-\\[28rem\\]{max-width:28rem}.clcosdk\\:max-w-\\[30rem\\]{max-width:30rem}.clcosdk\\:max-w-\\[40rem\\]{max-width:40rem}.clcosdk\\:max-w-\\[56rem\\]{max-width:56rem}.clcosdk\\:max-w-\\[64rem\\]{max-width:64rem}.clcosdk\\:max-w-\\[760px\\]{max-width:760px}.clcosdk\\:max-w-full{max-width:100%}.clcosdk\\:max-w-md{max-width:var(--clcosdk-container-md)}.clcosdk\\:max-w-sm{max-width:var(--clcosdk-container-sm)}.clcosdk\\:max-w-xl{max-width:var(--clcosdk-container-xl)}.clcosdk\\:min-w-0{min-width:0}.clcosdk\\:flex-1{flex:1}.clcosdk\\:shrink-0{flex-shrink:0}.clcosdk\\:-translate-x-1\\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.clcosdk\\:-translate-y-1\\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.clcosdk\\:rotate-90{rotate:90deg}.clcosdk\\:rotate-180{rotate:180deg}.clcosdk\\:animate-pulse{animation:var(--clcosdk-animate-pulse)}.clcosdk\\:animate-spin{animation:var(--clcosdk-animate-spin)}.clcosdk\\:cursor-pointer{cursor:pointer}.clcosdk\\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.clcosdk\\:grid-rows-\\[0fr\\]{grid-template-rows:0fr}.clcosdk\\:grid-rows-\\[1fr\\]{grid-template-rows:1fr}.clcosdk\\:flex-col{flex-direction:column}.clcosdk\\:flex-wrap{flex-wrap:wrap}.clcosdk\\:items-center{align-items:center}.clcosdk\\:items-end{align-items:flex-end}.clcosdk\\:items-start{align-items:flex-start}.clcosdk\\:justify-between{justify-content:space-between}.clcosdk\\:justify-center{justify-content:center}.clcosdk\\:justify-end{justify-content:flex-end}.clcosdk\\:gap-1{gap:var(--clcosdk-spacing)}.clcosdk\\:gap-1\\.5{gap:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:gap-2{gap:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:gap-2\\.5{gap:calc(var(--clcosdk-spacing) * 2.5)}.clcosdk\\:gap-3{gap:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:gap-4{gap:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:gap-6{gap:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:gap-\\[5px\\]{gap:5px}:where(.clcosdk\\:space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--clcosdk-spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--clcosdk-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.clcosdk\\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--clcosdk-spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--clcosdk-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.clcosdk\\:divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.clcosdk\\:divide-border>:not(:last-child)){border-color:var(--color-border)}:where(.clcosdk\\:divide-divider>:not(:last-child)){border-color:var(--color-divider)}.clcosdk\\:self-start{align-self:flex-start}.clcosdk\\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.clcosdk\\:overflow-hidden{overflow:hidden}.clcosdk\\:overflow-y-auto{overflow-y:auto}.clcosdk\\:rounded{border-radius:.25rem}.clcosdk\\:rounded-2xl{border-radius:var(--clcosdk-radius-2xl)}.clcosdk\\:rounded-\\[20px\\]{border-radius:20px}.clcosdk\\:rounded-\\[28px\\]{border-radius:28px}.clcosdk\\:rounded-btn{border-radius:12px}.clcosdk\\:rounded-card{border-radius:24px}.clcosdk\\:rounded-full{border-radius:3.40282e38px}.clcosdk\\:rounded-lg{border-radius:var(--clcosdk-radius-lg)}.clcosdk\\:rounded-md{border-radius:var(--clcosdk-radius-md)}.clcosdk\\:rounded-xl{border-radius:var(--clcosdk-radius-xl)}.clcosdk\\:border{border-style:var(--tw-border-style);border-width:1px}.clcosdk\\:border-2{border-style:var(--tw-border-style);border-width:2px}.clcosdk\\:border-\\[1\\.5px\\]{border-style:var(--tw-border-style);border-width:1.5px}.clcosdk\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.clcosdk\\:border-accent\\/60{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.clcosdk\\:border-accent\\/60{border-color:color-mix(in oklab, var(--color-accent) 60%, transparent)}}.clcosdk\\:border-amber-500{border-color:var(--clcosdk-color-amber-500)}.clcosdk\\:border-background{border-color:var(--color-background)}.clcosdk\\:border-border{border-color:var(--color-border)}.clcosdk\\:border-brand-primary{border-color:var(--color-brand-primary)}.clcosdk\\:border-current{border-color:currentColor}.clcosdk\\:border-divider{border-color:var(--color-divider)}.clcosdk\\:border-error-border{border-color:var(--color-error-border)}.clcosdk\\:border-sale-card-border{border-color:var(--color-sale-card-border)}.clcosdk\\:border-sale-card-chrome-border{border-color:var(--color-sale-card-chrome-border)}.clcosdk\\:border-success-border{border-color:var(--color-success-border)}.clcosdk\\:border-warning-border{border-color:var(--color-warning-border)}.clcosdk\\:border-t-transparent{border-top-color:#0000}.clcosdk\\:bg-background{background-color:var(--color-background)}.clcosdk\\:bg-black\\/50{background-color:var(--clcosdk-color-black)}@supports (color:color-mix(in lab, red, red)){.clcosdk\\:bg-black\\/50{background-color:color-mix(in oklab, var(--clcosdk-color-black) 50%, transparent)}}.clcosdk\\:bg-brand-primary{background-color:var(--color-brand-primary)}.clcosdk\\:bg-divider{background-color:var(--color-divider)}.clcosdk\\:bg-error-subtle{background-color:var(--color-error-subtle)}.clcosdk\\:bg-overlay{background-color:var(--color-overlay)}.clcosdk\\:bg-positive{background-color:var(--color-positive)}.clcosdk\\:bg-positive-subtle{background-color:var(--color-positive-subtle)}.clcosdk\\:bg-sale-card-chrome-bg{background-color:var(--color-sale-card-chrome-bg)}.clcosdk\\:bg-section{background-color:var(--color-section)}.clcosdk\\:bg-success-subtle{background-color:var(--color-success-subtle)}.clcosdk\\:bg-surface{background-color:var(--color-surface)}.clcosdk\\:bg-text-disabled{background-color:var(--color-text-disabled)}.clcosdk\\:bg-text-primary{background-color:var(--color-text-primary)}.clcosdk\\:bg-transparent{background-color:#0000}.clcosdk\\:bg-warning-subtle{background-color:var(--color-warning-subtle)}.clcosdk\\:bg-\\[image\\:var\\(--btn-primary-gradient\\)\\]{background-image:var(--btn-primary-gradient)}.clcosdk\\:bg-\\[image\\:var\\(--sale-card-surface\\)\\]{background-image:var(--sale-card-surface)}.clcosdk\\:object-contain{object-fit:contain}.clcosdk\\:object-cover{object-fit:cover}.clcosdk\\:p-0{padding:0}.clcosdk\\:p-1\\.5{padding:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:p-3{padding:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:p-3\\.5{padding:calc(var(--clcosdk-spacing) * 3.5)}.clcosdk\\:p-4{padding:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:p-5{padding:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:p-6{padding:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:p-8{padding:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:p-16{padding:calc(var(--clcosdk-spacing) * 16)}.clcosdk\\:px-2{padding-inline:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:px-3{padding-inline:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:px-4{padding-inline:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:px-5{padding-inline:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:px-6{padding-inline:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:py-1\\.5{padding-block:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:py-2{padding-block:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:py-3{padding-block:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:py-8{padding-block:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:py-12{padding-block:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:pt-1{padding-top:var(--clcosdk-spacing)}.clcosdk\\:pt-4{padding-top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:pt-14{padding-top:calc(var(--clcosdk-spacing) * 14)}.clcosdk\\:pr-1\\.5{padding-right:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:pr-3{padding-right:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:pr-4{padding-right:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:pb-4{padding-bottom:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:pl-3{padding-left:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:text-center{text-align:center}.clcosdk\\:text-left{text-align:left}.clcosdk\\:text-right{text-align:right}.clcosdk\\:font-mono{font-family:var(--clcosdk-font-mono)}.clcosdk\\:text-base{font-size:var(--clcosdk-text-base);line-height:var(--tw-leading,var(--clcosdk-text-base--line-height))}.clcosdk\\:text-lg{font-size:var(--clcosdk-text-lg);line-height:var(--tw-leading,var(--clcosdk-text-lg--line-height))}.clcosdk\\:text-sm{font-size:var(--clcosdk-text-sm);line-height:var(--tw-leading,var(--clcosdk-text-sm--line-height))}.clcosdk\\:text-xs{font-size:var(--clcosdk-text-xs);line-height:var(--tw-leading,var(--clcosdk-text-xs--line-height))}.clcosdk\\:text-\\[11px\\]{font-size:11px}.clcosdk\\:text-\\[12px\\]{font-size:12px}.clcosdk\\:text-\\[13px\\]{font-size:13px}.clcosdk\\:text-\\[14px\\]{font-size:14px}.clcosdk\\:text-\\[15px\\]{font-size:15px}.clcosdk\\:text-\\[16px\\]{font-size:16px}.clcosdk\\:text-\\[18px\\]{font-size:18px}.clcosdk\\:text-\\[22px\\]{font-size:22px}.clcosdk\\:text-\\[28px\\]{font-size:28px}.clcosdk\\:text-\\[36px\\]{font-size:36px}.clcosdk\\:text-\\[48px\\]{font-size:48px}.clcosdk\\:text-\\[64px\\]{font-size:64px}.clcosdk\\:leading-\\[105\\%\\]{--tw-leading:105%;line-height:105%}.clcosdk\\:leading-\\[108\\%\\]{--tw-leading:108%;line-height:108%}.clcosdk\\:leading-\\[110\\%\\]{--tw-leading:110%;line-height:110%}.clcosdk\\:leading-\\[120\\%\\]{--tw-leading:120%;line-height:120%}.clcosdk\\:leading-\\[130\\%\\]{--tw-leading:130%;line-height:130%}.clcosdk\\:leading-\\[140\\%\\]{--tw-leading:140%;line-height:140%}.clcosdk\\:leading-\\[150\\%\\]{--tw-leading:150%;line-height:150%}.clcosdk\\:leading-\\[160\\%\\]{--tw-leading:160%;line-height:160%}.clcosdk\\:font-medium{--tw-font-weight:var(--clcosdk-font-weight-medium);font-weight:var(--clcosdk-font-weight-medium)}.clcosdk\\:font-normal{--tw-font-weight:var(--clcosdk-font-weight-normal);font-weight:var(--clcosdk-font-weight-normal)}.clcosdk\\:font-semibold{--tw-font-weight:var(--clcosdk-font-weight-semibold);font-weight:var(--clcosdk-font-weight-semibold)}.clcosdk\\:tracking-\\[0\\.12px\\]{--tw-tracking:.12px;letter-spacing:.12px}.clcosdk\\:tracking-\\[0\\.28px\\]{--tw-tracking:.28px;letter-spacing:.28px}.clcosdk\\:break-words{overflow-wrap:break-word}.clcosdk\\:whitespace-nowrap{white-space:nowrap}.clcosdk\\:text-background{color:var(--color-background)}.clcosdk\\:text-brand-primary{color:var(--color-brand-primary)}.clcosdk\\:text-error{color:var(--color-error)}.clcosdk\\:text-positive{color:var(--color-positive)}.clcosdk\\:text-sale-card-text{color:var(--color-sale-card-text)}.clcosdk\\:text-sale-card-text-muted{color:var(--color-sale-card-text-muted)}.clcosdk\\:text-sale-card-text-strong{color:var(--color-sale-card-text-strong)}.clcosdk\\:text-success{color:var(--color-success)}.clcosdk\\:text-text-disabled{color:var(--color-text-disabled)}.clcosdk\\:text-text-inverse{color:var(--color-text-inverse)}.clcosdk\\:text-text-primary{color:var(--color-text-primary)}.clcosdk\\:text-text-secondary{color:var(--color-text-secondary)}.clcosdk\\:text-warning{color:var(--color-warning)}.clcosdk\\:capitalize{text-transform:capitalize}.clcosdk\\:lining-nums{--tw-numeric-figure:lining-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.clcosdk\\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.clcosdk\\:no-underline{text-decoration-line:none}.clcosdk\\:underline{text-decoration-line:underline}.clcosdk\\:underline-offset-2{text-underline-offset:2px}.clcosdk\\:underline-offset-4{text-underline-offset:4px}.clcosdk\\:opacity-0{opacity:0}.clcosdk\\:opacity-60{opacity:.6}.clcosdk\\:shadow-\\[0_0_0_3px_rgba\\(59\\,130\\,246\\,0\\.2\\)\\]{--tw-shadow:0 0 0 3px var(--tw-shadow-color,#3b82f633);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-\\[0px_1px_1px_0px_rgba\\(10\\,10\\,10\\,0\\.04\\)\\,0px_8px_12px_0px_rgba\\(10\\,10\\,10\\,0\\.08\\)\\]{--tw-shadow:0px 1px 1px 0px var(--tw-shadow-color,#0a0a0a0a), 0px 8px 12px 0px var(--tw-shadow-color,#0a0a0a14);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-\\[0px_4px_12px_0px_rgba\\(0\\,0\\,0\\,0\\.08\\)\\,0px_12px_28px_0px_rgba\\(0\\,0\\,0\\,0\\.13\\)\\]{--tw-shadow:0px 4px 12px 0px var(--tw-shadow-color,#00000014), 0px 12px 28px 0px var(--tw-shadow-color,#00000021);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-\\[var\\(--btn-primary-shadow\\)\\]{--tw-shadow:var(--btn-primary-shadow);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-card{--tw-shadow:0px 4px 6px -2px var(--tw-shadow-color,#0000000d), 0px 12px 24px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-dialog{--tw-shadow:var(--shadow-dialog);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-step-active{--tw-shadow:var(--shadow-step-active);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:transition-\\[background-color\\,border-color\\]{transition-property:background-color,border-color;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.clcosdk\\:transition-\\[grid-template-rows\\]{transition-property:grid-template-rows;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.clcosdk\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.clcosdk\\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.clcosdk\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.clcosdk\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.clcosdk\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.clcosdk\\:duration-500{--tw-duration:.5s;transition-duration:.5s}.clcosdk\\:ease-in-out{--tw-ease:var(--clcosdk-ease-in-out);transition-timing-function:var(--clcosdk-ease-in-out)}.clcosdk\\:ease-out{--tw-ease:var(--clcosdk-ease-out);transition-timing-function:var(--clcosdk-ease-out)}.clcosdk\\:outline-none{--tw-outline-style:none;outline-style:none}.clcosdk\\:group-focus-within\\:opacity-100:is(:where(.clcosdk\\:group):focus-within *){opacity:1}@media (hover:hover){.clcosdk\\:group-hover\\:border-sale-card-chrome-emphasis-border:is(:where(.clcosdk\\:group):hover *){border-color:var(--color-sale-card-chrome-emphasis-border)}.clcosdk\\:group-hover\\:bg-sale-card-chrome-emphasis-bg:is(:where(.clcosdk\\:group):hover *){background-color:var(--color-sale-card-chrome-emphasis-bg)}.clcosdk\\:group-hover\\:opacity-100:is(:where(.clcosdk\\:group):hover *){opacity:1}}.clcosdk\\:group-focus-visible\\:border-sale-card-chrome-emphasis-border:is(:where(.clcosdk\\:group):focus-visible *){border-color:var(--color-sale-card-chrome-emphasis-border)}.clcosdk\\:group-focus-visible\\:bg-sale-card-chrome-emphasis-bg:is(:where(.clcosdk\\:group):focus-visible *){background-color:var(--color-sale-card-chrome-emphasis-bg)}.clcosdk\\:placeholder\\:text-text-disabled::placeholder{color:var(--color-text-disabled)}@media (hover:hover){.clcosdk\\:hover\\:scale-\\[1\\.02\\]:hover{scale:1.02}.clcosdk\\:hover\\:border-text-disabled:hover{border-color:var(--color-text-disabled)}.clcosdk\\:hover\\:bg-\\[\\#fcdcd8\\]:hover{background-color:#fcdcd8}.clcosdk\\:hover\\:bg-border:hover{background-color:var(--color-border)}.clcosdk\\:hover\\:bg-brand-primary:hover{background-color:var(--color-brand-primary)}.clcosdk\\:hover\\:bg-brand-primary-hover:hover{background-color:var(--color-brand-primary-hover)}.clcosdk\\:hover\\:bg-section:hover{background-color:var(--color-section)}.clcosdk\\:hover\\:bg-surface:hover{background-color:var(--color-surface)}.clcosdk\\:hover\\:text-\\[\\#8b1a13\\]:hover{color:#8b1a13}.clcosdk\\:hover\\:text-text-primary:hover{color:var(--color-text-primary)}.clcosdk\\:hover\\:underline:hover{text-decoration-line:underline}.clcosdk\\:hover\\:opacity-80:hover{opacity:.8}.clcosdk\\:hover\\:opacity-90:hover{opacity:.9}}.clcosdk\\:focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:focus-visible\\:ring-gray-400:focus-visible{--tw-ring-color:var(--clcosdk-color-gray-400)}.clcosdk\\:focus-visible\\:ring-gray-500:focus-visible{--tw-ring-color:var(--clcosdk-color-gray-500)}.clcosdk\\:focus-visible\\:ring-red-400:focus-visible{--tw-ring-color:var(--clcosdk-color-red-400)}.clcosdk\\:focus-visible\\:ring-red-500:focus-visible{--tw-ring-color:var(--clcosdk-color-red-500)}.clcosdk\\:focus-visible\\:ring-sale-card-focus-ring:focus-visible{--tw-ring-color:var(--color-sale-card-focus-ring)}.clcosdk\\:focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.clcosdk\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.clcosdk\\:active\\:bg-\\[\\#d9d9d9\\]:active{background-color:#d9d9d9}.clcosdk\\:active\\:bg-\\[\\#f9c9c4\\]:active{background-color:#f9c9c4}.clcosdk\\:active\\:bg-border:active{background-color:var(--color-border)}.clcosdk\\:active\\:bg-brand-primary-active:active{background-color:var(--color-brand-primary-active)}.clcosdk\\:active\\:text-\\[\\#6d1510\\]:active{color:#6d1510}.clcosdk\\:active\\:opacity-80:active{opacity:.8}.clcosdk\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.clcosdk\\:disabled\\:cursor-not-allowed:disabled{cursor:not-allowed}.clcosdk\\:disabled\\:opacity-40:disabled{opacity:.4}.clcosdk\\:disabled\\:opacity-50:disabled{opacity:.5}.clcosdk\\:aria-disabled\\:cursor-not-allowed[aria-disabled=true]{cursor:not-allowed}.clcosdk\\:aria-disabled\\:opacity-50[aria-disabled=true]{opacity:.5}@media not all and (min-width:48rem){.clcosdk\\:max-md\\:hidden{display:none}.clcosdk\\:max-md\\:w-full{width:100%}.clcosdk\\:max-md\\:justify-start{justify-content:flex-start}.clcosdk\\:max-md\\:gap-4{gap:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:max-md\\:rounded-none{border-radius:0}.clcosdk\\:max-md\\:border-0{border-style:var(--tw-border-style);border-width:0}.clcosdk\\:max-md\\:bg-transparent{background-color:#0000}.clcosdk\\:max-md\\:p-0{padding:0}@media (hover:hover){.clcosdk\\:max-md\\:hover\\:scale-100:hover{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x) var(--tw-scale-y)}}}@media (min-width:40rem){.clcosdk\\:sm\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:48rem){.clcosdk\\:md\\:right-\\[-10\\%\\]{right:-10%}.clcosdk\\:md\\:order-1{order:1}.clcosdk\\:md\\:order-2{order:2}.clcosdk\\:md\\:hidden{display:none}.clcosdk\\:md\\:size-\\[20rem\\]{width:20rem;height:20rem}.clcosdk\\:md\\:h-9{height:calc(var(--clcosdk-spacing) * 9)}.clcosdk\\:md\\:h-12{height:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:md\\:h-\\[54px\\]{height:54px}.clcosdk\\:md\\:w-9{width:calc(var(--clcosdk-spacing) * 9)}.clcosdk\\:md\\:w-12{width:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:md\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.clcosdk\\:md\\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.clcosdk\\:md\\:grid-cols-\\[minmax\\(0\\,11fr\\)_minmax\\(0\\,8fr\\)\\]{grid-template-columns:minmax(0,11fr) minmax(0,8fr)}.clcosdk\\:md\\:flex-row{flex-direction:row}.clcosdk\\:md\\:items-center{align-items:center}.clcosdk\\:md\\:items-end{align-items:flex-end}.clcosdk\\:md\\:justify-between{justify-content:space-between}.clcosdk\\:md\\:justify-end{justify-content:flex-end}.clcosdk\\:md\\:gap-3{gap:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:md\\:gap-6{gap:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:md\\:gap-x-12{column-gap:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:md\\:self-end{align-self:flex-end}.clcosdk\\:md\\:rounded-\\[40px\\]{border-radius:40px}.clcosdk\\:md\\:rounded-card{border-radius:24px}.clcosdk\\:md\\:rounded-dialog{border-radius:32px}.clcosdk\\:md\\:p-4{padding:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:md\\:p-6{padding:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:md\\:p-8{padding:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:md\\:px-6{padding-inline:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:md\\:px-8{padding-inline:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:md\\:py-2{padding-block:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:md\\:pr-2{padding-right:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:md\\:pr-4{padding-right:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:md\\:pl-4{padding-left:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:md\\:text-base{font-size:var(--clcosdk-text-base);line-height:var(--tw-leading,var(--clcosdk-text-base--line-height))}.clcosdk\\:md\\:text-\\[14px\\]{font-size:14px}.clcosdk\\:md\\:text-\\[16px\\]{font-size:16px}.clcosdk\\:md\\:text-\\[18px\\]{font-size:18px}.clcosdk\\:md\\:text-\\[28px\\]{font-size:28px}.clcosdk\\:md\\:leading-\\[120\\%\\]{--tw-leading:120%;line-height:120%}.clcosdk\\:md\\:leading-\\[160\\%\\]{--tw-leading:160%;line-height:160%}}@media (prefers-color-scheme:dark){@media (hover:hover){.clcosdk\\:dark\\:hover\\:bg-\\[rgba\\(248\\,113\\,113\\,0\\.20\\)\\]:not(:where(.light,.light *)):hover{background-color:#f8717133}}}@media (hover:hover){.clcosdk\\:dark\\:hover\\:bg-\\[rgba\\(248\\,113\\,113\\,0\\.20\\)\\]:where(.dark,.dark *):hover{background-color:#f8717133}}@media (prefers-color-scheme:dark){@media (hover:hover){.clcosdk\\:dark\\:hover\\:text-\\[\\#fca5a5\\]:not(:where(.light,.light *)):hover{color:#fca5a5}}}@media (hover:hover){.clcosdk\\:dark\\:hover\\:text-\\[\\#fca5a5\\]:where(.dark,.dark *):hover{color:#fca5a5}}@media (prefers-color-scheme:dark){.clcosdk\\:dark\\:active\\:bg-\\[rgba\\(248\\,113\\,113\\,0\\.30\\)\\]:not(:where(.light,.light *)):active{background-color:#f871714d}}.clcosdk\\:dark\\:active\\:bg-\\[rgba\\(248\\,113\\,113\\,0\\.30\\)\\]:where(.dark,.dark *):active{background-color:#f871714d}@media (prefers-color-scheme:dark){.clcosdk\\:dark\\:active\\:bg-divider:not(:where(.light,.light *)):active{background-color:var(--color-divider)}}.clcosdk\\:dark\\:active\\:bg-divider:where(.dark,.dark *):active{background-color:var(--color-divider)}@media (prefers-color-scheme:dark){.clcosdk\\:dark\\:active\\:text-\\[\\#f87171\\]:not(:where(.light,.light *)):active{color:#f87171}}.clcosdk\\:dark\\:active\\:text-\\[\\#f87171\\]:where(.dark,.dark *):active{color:#f87171}.clcosdk\\:\\[\\&_circle\\]\\:fill-error-subtle circle{fill:var(--color-error-subtle)}.clcosdk\\:\\[\\&_circle\\]\\:fill-success-subtle circle{fill:var(--color-success-subtle)}.clcosdk\\:\\[\\&_circle\\]\\:fill-warning-subtle circle{fill:var(--color-warning-subtle)}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}';
1099
+ 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}}';
1098
1100
 
1099
1101
  // src/client/CoinListStyleScope.tsx
1100
1102
  import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -1396,7 +1398,7 @@ function AlertBanner({
1396
1398
  "aria-hidden": "true"
1397
1399
  }
1398
1400
  ),
1399
- /* @__PURE__ */ jsx6("p", { className: cn(typeClasses.subhead, text), children: content })
1401
+ /* @__PURE__ */ jsx6("p", { className: cn(typeClasses.bodySm, text), children: content })
1400
1402
  ]
1401
1403
  }
1402
1404
  );
@@ -3621,6 +3623,20 @@ function tokenLogoUrl(logo, minWidth = 40) {
3621
3623
  }
3622
3624
  }
3623
3625
  }
3626
+ function tokenLogoSrcSet(logo) {
3627
+ switch (logo.kind) {
3628
+ case "VECTOR":
3629
+ return null;
3630
+ case "RASTER": {
3631
+ const candidates = logo.variants.length > 0 ? logo.variants : [logo.original];
3632
+ return [...candidates].sort((a, b) => a.width - b.width).map((image) => `${image.url} ${image.width}w`).join(", ");
3633
+ }
3634
+ default: {
3635
+ const exhaustive = logo;
3636
+ return exhaustive;
3637
+ }
3638
+ }
3639
+ }
3624
3640
  function offerAssetIconUrl(offer, tokenMetadata) {
3625
3641
  return (tokenMetadata ? tokenLogoUrl(tokenMetadata.logo) : null) ?? offerIconUrl(offer);
3626
3642
  }
@@ -4852,8 +4868,9 @@ var NO_TOKEN_ADDRESS = EvmContractAddress(
4852
4868
  "0x0000000000000000000000000000000000000000"
4853
4869
  );
4854
4870
  function offerTokenIdentifier(offer, chain) {
4855
- const byChain = offer.tokens.filter((token) => token.chain === chain);
4856
- const asset = byChain.find((token) => token.role === "swap") ?? byChain.find((token) => token.role === "distribution");
4871
+ const asset = offerDisplayTokens(offer).find(
4872
+ (token) => token.chain === chain
4873
+ );
4857
4874
  return asset === void 0 ? null : { chain, address: asset.address };
4858
4875
  }
4859
4876
  function tokenMetadataOf(state) {
@@ -9202,6 +9219,58 @@ function renderOndoSide(side, branches) {
9202
9219
  }
9203
9220
  }
9204
9221
 
9222
+ // src/client/components/design-system/ThemedImage.tsx
9223
+ import { Fragment as Fragment9, jsx as jsx51, jsxs as jsxs37 } from "react/jsx-runtime";
9224
+ function ThemedImage({
9225
+ light,
9226
+ dark,
9227
+ sizes,
9228
+ alt,
9229
+ width,
9230
+ height,
9231
+ className,
9232
+ style
9233
+ }) {
9234
+ const shared = { width, height, style };
9235
+ if (!dark) {
9236
+ return /* @__PURE__ */ jsx51(
9237
+ "img",
9238
+ {
9239
+ src: light.src,
9240
+ srcSet: light.srcSet,
9241
+ sizes: light.srcSet ? sizes : void 0,
9242
+ className,
9243
+ alt,
9244
+ ...shared
9245
+ }
9246
+ );
9247
+ }
9248
+ return /* @__PURE__ */ jsxs37(Fragment9, { children: [
9249
+ /* @__PURE__ */ jsx51(
9250
+ "img",
9251
+ {
9252
+ src: light.src,
9253
+ srcSet: light.srcSet,
9254
+ sizes: light.srcSet ? sizes : void 0,
9255
+ className: cn("clcosdk-on-light", className),
9256
+ alt,
9257
+ ...shared
9258
+ }
9259
+ ),
9260
+ /* @__PURE__ */ jsx51(
9261
+ "img",
9262
+ {
9263
+ src: dark.src,
9264
+ srcSet: dark.srcSet,
9265
+ sizes: dark.srcSet ? sizes : void 0,
9266
+ className: cn("clcosdk-on-dark", className),
9267
+ alt,
9268
+ ...shared
9269
+ }
9270
+ )
9271
+ ] });
9272
+ }
9273
+
9205
9274
  // src/client/components/offers/shared/offer-card-keyboard.ts
9206
9275
  function onOfferCardKeyDown(event, onClick) {
9207
9276
  if (event.key !== "Enter" && event.key !== " ") return;
@@ -9210,7 +9279,8 @@ function onOfferCardKeyDown(event, onClick) {
9210
9279
  }
9211
9280
 
9212
9281
  // src/client/components/offers/shared/OfferAssetCard.tsx
9213
- import { jsx as jsx51, jsxs as jsxs37 } from "react/jsx-runtime";
9282
+ import { jsx as jsx52, jsxs as jsxs38 } from "react/jsx-runtime";
9283
+ var LOGO_SIZES = "(min-width: 768px) 48px, 40px";
9214
9284
  function OfferAssetCard({
9215
9285
  offer,
9216
9286
  onClick,
@@ -9218,7 +9288,7 @@ function OfferAssetCard({
9218
9288
  containerClassName
9219
9289
  }) {
9220
9290
  const interactive = onClick !== void 0;
9221
- const card = /* @__PURE__ */ jsx51(
9291
+ const card = /* @__PURE__ */ jsx52(
9222
9292
  "article",
9223
9293
  {
9224
9294
  className: cn(
@@ -9232,11 +9302,13 @@ function OfferAssetCard({
9232
9302
  tabIndex: interactive ? 0 : void 0,
9233
9303
  onClick,
9234
9304
  onKeyDown: interactive ? (event) => onOfferCardKeyDown(event, onClick) : void 0,
9235
- 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: [
9236
- 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(
9237
- "img",
9305
+ 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: [
9306
+ 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(
9307
+ ThemedImage,
9238
9308
  {
9239
- src: offer.logoUrl,
9309
+ light: offer.logo.light,
9310
+ dark: offer.logo.dark ?? void 0,
9311
+ sizes: LOGO_SIZES,
9240
9312
  alt: "",
9241
9313
  width: 48,
9242
9314
  height: 48,
@@ -9244,8 +9316,8 @@ function OfferAssetCard({
9244
9316
  style: { maxWidth: "none", width: "100%", height: "100%" }
9245
9317
  }
9246
9318
  ) }) : null,
9247
- /* @__PURE__ */ jsxs37("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:flex-1 clcosdk:flex-col clcosdk:items-start clcosdk:justify-center", children: [
9248
- offer.name ? /* @__PURE__ */ jsx51(
9319
+ /* @__PURE__ */ jsxs38("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:flex-1 clcosdk:flex-col clcosdk:items-start clcosdk:justify-center", children: [
9320
+ offer.name ? /* @__PURE__ */ jsx52(
9249
9321
  "h2",
9250
9322
  {
9251
9323
  className: cn(
@@ -9254,13 +9326,13 @@ function OfferAssetCard({
9254
9326
  children: offer.name
9255
9327
  }
9256
9328
  ) : null,
9257
- 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
9329
+ 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
9258
9330
  ] })
9259
9331
  ] })
9260
9332
  }
9261
9333
  );
9262
- const wrapped = containerClassName ? /* @__PURE__ */ jsx51("div", { className: containerClassName, children: card }) : card;
9263
- return /* @__PURE__ */ jsx51(CoinListStyleScope, { children: wrapped });
9334
+ const wrapped = containerClassName ? /* @__PURE__ */ jsx52("div", { className: containerClassName, children: card }) : card;
9335
+ return /* @__PURE__ */ jsx52(CoinListStyleScope, { children: wrapped });
9264
9336
  }
9265
9337
  function cardActionLabel(offer) {
9266
9338
  const parts = [offer.name, offer.symbol].filter(Boolean);
@@ -9268,7 +9340,7 @@ function cardActionLabel(offer) {
9268
9340
  }
9269
9341
 
9270
9342
  // src/client/components/offers/grid/OffersAssetGrid.tsx
9271
- import { jsx as jsx52 } from "react/jsx-runtime";
9343
+ import { jsx as jsx53 } from "react/jsx-runtime";
9272
9344
  var DEFAULT_MAX_COLUMNS = 3;
9273
9345
  function OffersAssetGrid({
9274
9346
  offers,
@@ -9283,14 +9355,14 @@ function OffersAssetGrid({
9283
9355
  );
9284
9356
  const maxGridWidth = `calc(${cols} * 20rem + ${Math.max(cols - 1, 0)} * 1.5rem)`;
9285
9357
  const interactive = onOfferClick !== void 0;
9286
- return /* @__PURE__ */ jsx52(CoinListStyleScope, { children: /* @__PURE__ */ jsx52(
9358
+ return /* @__PURE__ */ jsx53(CoinListStyleScope, { children: /* @__PURE__ */ jsx53(
9287
9359
  "div",
9288
9360
  {
9289
9361
  className: cn(
9290
9362
  "clcosdk:flex clcosdk:w-full clcosdk:justify-center",
9291
9363
  containerClassName
9292
9364
  ),
9293
- children: /* @__PURE__ */ jsx52(
9365
+ children: /* @__PURE__ */ jsx53(
9294
9366
  "div",
9295
9367
  {
9296
9368
  className: cn(
@@ -9300,7 +9372,7 @@ function OffersAssetGrid({
9300
9372
  className
9301
9373
  ),
9302
9374
  style: { maxWidth: maxGridWidth },
9303
- children: offers.map((offer) => /* @__PURE__ */ jsx52(
9375
+ children: offers.map((offer) => /* @__PURE__ */ jsx53(
9304
9376
  OfferAssetCard,
9305
9377
  {
9306
9378
  offer,
@@ -9342,7 +9414,9 @@ function saleCardStatus({
9342
9414
  }
9343
9415
 
9344
9416
  // src/client/components/offers/shared/OfferSaleCard.tsx
9345
- import { jsx as jsx53, jsxs as jsxs38 } from "react/jsx-runtime";
9417
+ import { jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
9418
+ var HEADER_LOGO_SIZES = "(min-width: 768px) 36px, 32px";
9419
+ var WATERMARK_SIZES = "(min-width: 768px) 20rem, 15rem";
9346
9420
  function OfferSaleCard({
9347
9421
  offer,
9348
9422
  onClick,
@@ -9357,7 +9431,8 @@ function OfferSaleCard({
9357
9431
  secondsLeft
9358
9432
  });
9359
9433
  const interactive = onClick !== void 0;
9360
- const card = /* @__PURE__ */ jsxs38(
9434
+ const logo = offer.logo ? offer.logo.dark ?? offer.logo.light : null;
9435
+ const card = /* @__PURE__ */ jsxs39(
9361
9436
  "article",
9362
9437
  {
9363
9438
  className: cn(
@@ -9372,16 +9447,17 @@ function OfferSaleCard({
9372
9447
  onClick,
9373
9448
  onKeyDown: interactive ? (event) => onOfferCardKeyDown(event, onClick) : void 0,
9374
9449
  children: [
9375
- offer.logoUrl ? /* @__PURE__ */ jsx53(
9450
+ logo ? /* @__PURE__ */ jsx54(
9376
9451
  "div",
9377
9452
  {
9378
9453
  "aria-hidden": "true",
9379
9454
  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]",
9380
9455
  style: { mixBlendMode: "overlay" },
9381
- children: /* @__PURE__ */ jsx53(
9382
- "img",
9456
+ children: /* @__PURE__ */ jsx54(
9457
+ ThemedImage,
9383
9458
  {
9384
- src: offer.logoUrl,
9459
+ light: logo,
9460
+ sizes: WATERMARK_SIZES,
9385
9461
  alt: "",
9386
9462
  className: "clcosdk:size-full clcosdk:rounded-full clcosdk:object-cover",
9387
9463
  style: { maxWidth: "none", width: "100%", height: "100%" }
@@ -9389,12 +9465,13 @@ function OfferSaleCard({
9389
9465
  )
9390
9466
  }
9391
9467
  ) : null,
9392
- /* @__PURE__ */ jsxs38("div", { className: "clcosdk:relative clcosdk:z-10 clcosdk:flex clcosdk:flex-col clcosdk:gap-2 clcosdk:md:gap-3", children: [
9393
- /* @__PURE__ */ jsxs38("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:items-center clcosdk:gap-2.5 clcosdk:md:gap-3", children: [
9394
- 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(
9395
- "img",
9468
+ /* @__PURE__ */ jsxs39("div", { className: "clcosdk:relative clcosdk:z-10 clcosdk:flex clcosdk:flex-col clcosdk:gap-2 clcosdk:md:gap-3", children: [
9469
+ /* @__PURE__ */ jsxs39("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:items-center clcosdk:gap-2.5 clcosdk:md:gap-3", children: [
9470
+ 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(
9471
+ ThemedImage,
9396
9472
  {
9397
- src: offer.logoUrl,
9473
+ light: logo,
9474
+ sizes: HEADER_LOGO_SIZES,
9398
9475
  alt: "",
9399
9476
  width: 36,
9400
9477
  height: 36,
@@ -9402,7 +9479,7 @@ function OfferSaleCard({
9402
9479
  style: { maxWidth: "none", width: "100%", height: "100%" }
9403
9480
  }
9404
9481
  ) }) : null,
9405
- offer.name ? /* @__PURE__ */ jsx53(
9482
+ offer.name ? /* @__PURE__ */ jsx54(
9406
9483
  "h2",
9407
9484
  {
9408
9485
  className: cn(
@@ -9412,7 +9489,7 @@ function OfferSaleCard({
9412
9489
  }
9413
9490
  ) : null
9414
9491
  ] }),
9415
- offer.tagline ? /* @__PURE__ */ jsx53(
9492
+ offer.tagline ? /* @__PURE__ */ jsx54(
9416
9493
  "p",
9417
9494
  {
9418
9495
  className: cn(
@@ -9423,20 +9500,20 @@ function OfferSaleCard({
9423
9500
  }
9424
9501
  ) : null
9425
9502
  ] }),
9426
- /* @__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: [
9427
- /* @__PURE__ */ jsxs38("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:items-center clcosdk:gap-2 clcosdk:md:gap-3", children: [
9428
- status.phase === "live" ? /* @__PURE__ */ jsxs38(
9503
+ /* @__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: [
9504
+ /* @__PURE__ */ jsxs39("div", { className: "clcosdk:flex clcosdk:min-w-0 clcosdk:items-center clcosdk:gap-2 clcosdk:md:gap-3", children: [
9505
+ status.phase === "live" ? /* @__PURE__ */ jsxs39(
9429
9506
  "span",
9430
9507
  {
9431
9508
  className: "clcosdk:relative clcosdk:inline-flex clcosdk:size-2 clcosdk:shrink-0",
9432
9509
  "aria-hidden": "true",
9433
9510
  children: [
9434
- /* @__PURE__ */ jsx53("span", { className: "clcosdk-status-dot-ping clcosdk:absolute clcosdk:inset-0 clcosdk:rounded-full clcosdk:bg-positive" }),
9435
- /* @__PURE__ */ jsx53("span", { className: "clcosdk:relative clcosdk:inline-flex clcosdk:size-full clcosdk:rounded-full clcosdk:bg-positive" })
9511
+ /* @__PURE__ */ jsx54("span", { className: "clcosdk-status-dot-ping clcosdk:absolute clcosdk:inset-0 clcosdk:rounded-full clcosdk:bg-positive" }),
9512
+ /* @__PURE__ */ jsx54("span", { className: "clcosdk:relative clcosdk:inline-flex clcosdk:size-full clcosdk:rounded-full clcosdk:bg-positive" })
9436
9513
  ]
9437
9514
  }
9438
9515
  ) : null,
9439
- /* @__PURE__ */ jsx53(
9516
+ /* @__PURE__ */ jsx54(
9440
9517
  "p",
9441
9518
  {
9442
9519
  className: cn(
@@ -9447,7 +9524,7 @@ function OfferSaleCard({
9447
9524
  }
9448
9525
  )
9449
9526
  ] }),
9450
- /* @__PURE__ */ jsxs38(
9527
+ /* @__PURE__ */ jsxs39(
9451
9528
  "span",
9452
9529
  {
9453
9530
  className: cn(
@@ -9457,8 +9534,8 @@ function OfferSaleCard({
9457
9534
  "aria-hidden": "true",
9458
9535
  children: [
9459
9536
  "View",
9460
- /* @__PURE__ */ jsx53("span", { className: "clcosdk:max-md:hidden", children: " offer" }),
9461
- /* @__PURE__ */ jsx53(ArrowRight, { className: "clcosdk:size-4", "aria-hidden": true })
9537
+ /* @__PURE__ */ jsx54("span", { className: "clcosdk:max-md:hidden", children: " offer" }),
9538
+ /* @__PURE__ */ jsx54(ArrowRight, { className: "clcosdk:size-4", "aria-hidden": true })
9462
9539
  ]
9463
9540
  }
9464
9541
  )
@@ -9466,8 +9543,8 @@ function OfferSaleCard({
9466
9543
  ]
9467
9544
  }
9468
9545
  );
9469
- const wrapped = containerClassName ? /* @__PURE__ */ jsx53("div", { className: containerClassName, children: card }) : card;
9470
- return /* @__PURE__ */ jsx53(CoinListStyleScope, { children: wrapped });
9546
+ const wrapped = containerClassName ? /* @__PURE__ */ jsx54("div", { className: containerClassName, children: card }) : card;
9547
+ return /* @__PURE__ */ jsx54(CoinListStyleScope, { children: wrapped });
9471
9548
  }
9472
9549
  var SALE_PHASE_LABEL = {
9473
9550
  upcoming: "Upcoming",
@@ -9480,10 +9557,10 @@ function cardActionLabel2(offer, phase) {
9480
9557
  }
9481
9558
 
9482
9559
  // src/client/components/offers/grid/OffersGridView.tsx
9483
- import { jsx as jsx54, jsxs as jsxs39 } from "react/jsx-runtime";
9560
+ import { jsx as jsx55, jsxs as jsxs40 } from "react/jsx-runtime";
9484
9561
  var DEFAULT_MAX_COLUMNS2 = 2;
9485
9562
  function OffersGridView(props) {
9486
- return /* @__PURE__ */ jsx54(CoinListStyleScope, { children: /* @__PURE__ */ jsx54(OffersGridViewBody, { ...props }) });
9563
+ return /* @__PURE__ */ jsx55(CoinListStyleScope, { children: /* @__PURE__ */ jsx55(OffersGridViewBody, { ...props }) });
9487
9564
  }
9488
9565
  function OffersGridViewBody({
9489
9566
  state,
@@ -9497,13 +9574,13 @@ function OffersGridViewBody({
9497
9574
  }) {
9498
9575
  switch (state.type) {
9499
9576
  case "loading":
9500
- return loading ?? /* @__PURE__ */ jsx54(LoadingState, {});
9577
+ return loading ?? /* @__PURE__ */ jsx55(LoadingState, {});
9501
9578
  case "error":
9502
- return error ?? /* @__PURE__ */ jsx54(ErrorState, { message: state.message });
9579
+ return error ?? /* @__PURE__ */ jsx55(ErrorState, { message: state.message });
9503
9580
  case "empty":
9504
- return emptyState ?? /* @__PURE__ */ jsx54(EmptyState, {});
9581
+ return emptyState ?? /* @__PURE__ */ jsx55(EmptyState, {});
9505
9582
  case "content":
9506
- return /* @__PURE__ */ jsx54(
9583
+ return /* @__PURE__ */ jsx55(
9507
9584
  OffersGridContent,
9508
9585
  {
9509
9586
  offers: state.offers,
@@ -9533,14 +9610,14 @@ function OffersGridContent({
9533
9610
  Math.max(1, maxColumns ?? DEFAULT_MAX_COLUMNS2)
9534
9611
  );
9535
9612
  const maxGridWidth = `calc(${cols} * 28rem + ${Math.max(cols - 1, 0)} * 1.5rem)`;
9536
- return /* @__PURE__ */ jsx54(
9613
+ return /* @__PURE__ */ jsx55(
9537
9614
  "div",
9538
9615
  {
9539
9616
  className: cn(
9540
9617
  "clcosdk:flex clcosdk:w-full clcosdk:justify-center",
9541
9618
  containerClassName
9542
9619
  ),
9543
- children: /* @__PURE__ */ jsx54(
9620
+ children: /* @__PURE__ */ jsx55(
9544
9621
  "div",
9545
9622
  {
9546
9623
  className: cn(
@@ -9549,7 +9626,7 @@ function OffersGridContent({
9549
9626
  className
9550
9627
  ),
9551
9628
  style: { maxWidth: maxGridWidth },
9552
- children: offers.map((offer) => /* @__PURE__ */ jsx54(
9629
+ children: offers.map((offer) => /* @__PURE__ */ jsx55(
9553
9630
  OfferSaleCard,
9554
9631
  {
9555
9632
  offer,
@@ -9563,17 +9640,17 @@ function OffersGridContent({
9563
9640
  );
9564
9641
  }
9565
9642
  function LoadingState() {
9566
- return /* @__PURE__ */ jsx54(
9643
+ return /* @__PURE__ */ jsx55(
9567
9644
  "output",
9568
9645
  {
9569
9646
  "aria-live": "polite",
9570
9647
  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",
9571
- children: /* @__PURE__ */ jsx54("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading offers..." })
9648
+ children: /* @__PURE__ */ jsx55("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading offers..." })
9572
9649
  }
9573
9650
  );
9574
9651
  }
9575
9652
  function ErrorState({ message }) {
9576
- return /* @__PURE__ */ jsx54(
9653
+ return /* @__PURE__ */ jsx55(
9577
9654
  AlertBanner,
9578
9655
  {
9579
9656
  variant: "error",
@@ -9584,13 +9661,13 @@ function ErrorState({ message }) {
9584
9661
  );
9585
9662
  }
9586
9663
  function EmptyState() {
9587
- return /* @__PURE__ */ jsxs39(
9664
+ return /* @__PURE__ */ jsxs40(
9588
9665
  "output",
9589
9666
  {
9590
9667
  "aria-live": "polite",
9591
9668
  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",
9592
9669
  children: [
9593
- /* @__PURE__ */ jsx54(
9670
+ /* @__PURE__ */ jsx55(
9594
9671
  "p",
9595
9672
  {
9596
9673
  className: cn(
@@ -9600,14 +9677,14 @@ function EmptyState() {
9600
9677
  children: "No offers available"
9601
9678
  }
9602
9679
  ),
9603
- /* @__PURE__ */ jsx54("p", { className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"), children: "Check back soon for upcoming opportunities." })
9680
+ /* @__PURE__ */ jsx55("p", { className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"), children: "Check back soon for upcoming opportunities." })
9604
9681
  ]
9605
9682
  }
9606
9683
  );
9607
9684
  }
9608
9685
 
9609
9686
  // src/client/hooks/offers/grid/useOffersGridViewModel.ts
9610
- import { useCallback as useCallback6, useMemo as useMemo6 } from "react";
9687
+ import { useCallback as useCallback7, useMemo as useMemo6 } from "react";
9611
9688
 
9612
9689
  // src/client/hooks/offers/data/useOffers.ts
9613
9690
  import { useEffect as useEffect20, useState as useState24 } from "react";
@@ -9665,19 +9742,56 @@ function useOffers(options = {}) {
9665
9742
  return { offersState };
9666
9743
  }
9667
9744
 
9745
+ // src/client/hooks/offers/shared/offer-logo.types.ts
9746
+ var CARD_LOGO_WIDTH = 96;
9747
+ var OfferLogoUi = {
9748
+ /**
9749
+ * The registry's logo for the token an offer is about, or the offer's own
9750
+ * artwork otherwise, or `null` when neither exists.
9751
+ *
9752
+ * The registry wins when both exist because it is the token's real artwork
9753
+ * where `Offer.logoUrl` is catalogue artwork, and because a swap publishes
9754
+ * without artwork more often than not - which is why `logoUrl` is `null`
9755
+ * on the swap variants.
9756
+ */
9757
+ fromOffer: (offer, tokenMetadata) => {
9758
+ const light = tokenMetadata ? logoImage(tokenMetadata.logo) : null;
9759
+ if (light !== null) {
9760
+ const dark = tokenMetadata?.logoDark ? logoImage(tokenMetadata.logoDark) : null;
9761
+ return { light, dark };
9762
+ }
9763
+ return offer.logoUrl ? { light: { src: offer.logoUrl }, dark: null } : null;
9764
+ }
9765
+ };
9766
+ function logoImage(logo) {
9767
+ const src = tokenLogoUrl(logo, CARD_LOGO_WIDTH);
9768
+ if (src === null) {
9769
+ return null;
9770
+ }
9771
+ const srcSet = tokenLogoSrcSet(logo);
9772
+ return srcSet === null ? { src } : { src, srcSet };
9773
+ }
9774
+
9668
9775
  // src/client/hooks/offers/shared/offer-sale-card.types.ts
9669
9776
  var OfferSaleCardUi = {
9670
- fromOffer: (offer) => ({
9777
+ /**
9778
+ * `tokenMetadata` is the registry's entry for the token the offer is about
9779
+ * (`TokenRegistrySnapshot.forOffer`), or `null` when it lists none. The
9780
+ * registry names win over the offer's own where both exist: they are the
9781
+ * token's canonical name and artwork, where the offer's are catalogue copy.
9782
+ */
9783
+ fromOffer: (offer, tokenMetadata = null) => ({
9671
9784
  id: offer.id,
9785
+ ...tokenMetadata ? { name: tokenMetadata.name } : {},
9672
9786
  ...saleWindow(offer),
9673
- logoUrl: offer.logoUrl,
9787
+ logo: OfferLogoUi.fromOffer(offer, tokenMetadata),
9674
9788
  endsAt: offer.endsAt
9675
9789
  }),
9676
- fromDetail: (detail) => ({
9790
+ fromDetail: (detail, tokenMetadata = null) => ({
9677
9791
  id: detail.id,
9678
- name: detail.name,
9792
+ name: tokenMetadata?.name ?? detail.name,
9679
9793
  ...saleWindow(detail),
9680
- logoUrl: detail.logoUrl,
9794
+ logo: OfferLogoUi.fromOffer(detail, tokenMetadata),
9681
9795
  endsAt: detail.endsAt
9682
9796
  })
9683
9797
  };
@@ -9695,17 +9809,80 @@ function saleWindow(offer) {
9695
9809
  }
9696
9810
  }
9697
9811
 
9812
+ // src/client/hooks/shared/useTokenRegistry.ts
9813
+ import { useCallback as useCallback6, useEffect as useEffect21, useState as useState25 } from "react";
9814
+ var DISABLED_STATE2 = { type: "DISABLED" };
9815
+ var LOADING_STATE4 = { type: "LOADING" };
9816
+ function useTokenRegistry(options = {}) {
9817
+ const { data, enabled = true } = options;
9818
+ const { coinlist, isReady } = useCoinList();
9819
+ const log = useLogger("useTokenRegistry");
9820
+ const [state, setState] = useState25(
9821
+ () => data !== void 0 ? { type: "CONTENT", registry: TokenRegistrySnapshot.fromTokens(data) } : LOADING_STATE4
9822
+ );
9823
+ const [refetchCount, setRefetchCount] = useState25(0);
9824
+ const refetch = useCallback6(() => {
9825
+ setRefetchCount((count) => count + 1);
9826
+ }, []);
9827
+ useEffect21(() => {
9828
+ let isCancelled = false;
9829
+ const seedActive = data !== void 0 && refetchCount === 0;
9830
+ if (!isReady || !enabled || seedActive) {
9831
+ return () => {
9832
+ isCancelled = true;
9833
+ };
9834
+ }
9835
+ setState(LOADING_STATE4);
9836
+ coinlist.tokens.list().then((tokens) => {
9837
+ if (!isCancelled) {
9838
+ log.debug(() => ({
9839
+ msg: "settled",
9840
+ fields: { state: "CONTENT", count: tokens.length }
9841
+ }));
9842
+ setState({
9843
+ type: "CONTENT",
9844
+ registry: TokenRegistrySnapshot.fromTokens(tokens)
9845
+ });
9846
+ }
9847
+ }).catch((error) => {
9848
+ if (!isCancelled) {
9849
+ log.failure(
9850
+ () => ({
9851
+ msg: "settled",
9852
+ fields: { state: "ERROR", reason: "generic-error" }
9853
+ }),
9854
+ error
9855
+ );
9856
+ setState({ type: "ERROR", reason: "generic-error" });
9857
+ }
9858
+ });
9859
+ return () => {
9860
+ isCancelled = true;
9861
+ };
9862
+ }, [coinlist, isReady, enabled, data, refetchCount, log]);
9863
+ return {
9864
+ // LOADING would be a lie while disabled: nothing is in flight and nothing
9865
+ // will replace it. Settled states (a seed, a previous answer) survive.
9866
+ state: !enabled && state.type === "LOADING" ? DISABLED_STATE2 : state,
9867
+ refetch
9868
+ };
9869
+ }
9870
+
9698
9871
  // src/client/hooks/offers/grid/useOffersGridViewModel.ts
9699
9872
  var NOT_AUTHENTICATED_MESSAGE = "Sign in to view available offers.";
9700
9873
  var GENERIC_ERROR_MESSAGE = "Unable to load offers right now. Please try again.";
9701
9874
  function useOffersGridViewModel(options = {}) {
9702
9875
  const { data, onOfferClick, enabled = true } = options;
9703
- const { offersState } = useOffers({ data, enabled });
9876
+ const { offersState } = useOffers({ data: data?.offers, enabled });
9877
+ const { state: registryState } = useTokenRegistry({
9878
+ data: data?.tokens,
9879
+ enabled
9880
+ });
9704
9881
  const state = useMemo6(
9705
- () => toUiState(offersState, onOfferClick !== void 0),
9706
- [offersState, onOfferClick]
9882
+ () => toUiState(offersState, registryState, onOfferClick !== void 0),
9883
+ [offersState, registryState, onOfferClick]
9707
9884
  );
9708
- const onEvent = useCallback6(
9885
+ const onEvent = useCallback7(
9709
9886
  (event) => {
9710
9887
  switch (event.type) {
9711
9888
  case "ON_OFFER_CLICK": {
@@ -9728,7 +9905,7 @@ function useOffersGridViewModel(options = {}) {
9728
9905
  );
9729
9906
  return { state, onEvent };
9730
9907
  }
9731
- function toUiState(offersState, interactive) {
9908
+ function toUiState(offersState, registryState, interactive) {
9732
9909
  switch (offersState.type) {
9733
9910
  case "LOADING":
9734
9911
  return { type: "loading" };
@@ -9741,9 +9918,18 @@ function toUiState(offersState, interactive) {
9741
9918
  if (offersState.offers.length === 0) {
9742
9919
  return { type: "empty" };
9743
9920
  }
9921
+ if (registryState.type === "LOADING") {
9922
+ return { type: "loading" };
9923
+ }
9924
+ const registry = registryState.type === "CONTENT" ? registryState.registry : null;
9744
9925
  return {
9745
9926
  type: "content",
9746
- offers: offersState.offers.map(OfferSaleCardUi.fromOffer),
9927
+ offers: offersState.offers.map(
9928
+ (offer) => OfferSaleCardUi.fromOffer(
9929
+ offer,
9930
+ registry ? TokenRegistrySnapshot.forOffer(registry, offer) : null
9931
+ )
9932
+ ),
9747
9933
  interactive
9748
9934
  };
9749
9935
  }
@@ -9755,7 +9941,7 @@ function toUiState(offersState, interactive) {
9755
9941
  }
9756
9942
 
9757
9943
  // src/client/components/offers/grid/OffersGridContainer.tsx
9758
- import { jsx as jsx55 } from "react/jsx-runtime";
9944
+ import { jsx as jsx56 } from "react/jsx-runtime";
9759
9945
  function OffersGridContainer({
9760
9946
  data,
9761
9947
  onOfferClick,
@@ -9767,17 +9953,17 @@ function OffersGridContainer({
9767
9953
  onOfferClick,
9768
9954
  enabled
9769
9955
  });
9770
- return /* @__PURE__ */ jsx55(OffersGridView, { state, onEvent, ...viewProps });
9956
+ return /* @__PURE__ */ jsx56(OffersGridView, { state, onEvent, ...viewProps });
9771
9957
  }
9772
9958
 
9773
9959
  // src/client/components/requirements/ConnectedWalletList.tsx
9774
- import { useState as useState25 } from "react";
9775
- import { jsx as jsx56, jsxs as jsxs40 } from "react/jsx-runtime";
9960
+ import { useState as useState26 } from "react";
9961
+ import { jsx as jsx57, jsxs as jsxs41 } from "react/jsx-runtime";
9776
9962
  function ConnectedWalletRow({
9777
9963
  wallet,
9778
9964
  onRemove
9779
9965
  }) {
9780
- const [state, setState] = useState25("idle");
9966
+ const [state, setState] = useState26("idle");
9781
9967
  const remove = async () => {
9782
9968
  if (!onRemove) return;
9783
9969
  setState("removing");
@@ -9788,8 +9974,8 @@ function ConnectedWalletRow({
9788
9974
  setState("error");
9789
9975
  }
9790
9976
  };
9791
- return /* @__PURE__ */ jsxs40("div", { className: "clcosdk:flex clcosdk:min-h-9 clcosdk:flex-wrap clcosdk:items-center clcosdk:justify-between clcosdk:gap-2", children: [
9792
- /* @__PURE__ */ jsx56(
9977
+ return /* @__PURE__ */ jsxs41("div", { className: "clcosdk:flex clcosdk:min-h-9 clcosdk:flex-wrap clcosdk:items-center clcosdk:justify-between clcosdk:gap-2", children: [
9978
+ /* @__PURE__ */ jsx57(
9793
9979
  "span",
9794
9980
  {
9795
9981
  title: wallet.address,
@@ -9800,16 +9986,16 @@ function ConnectedWalletRow({
9800
9986
  children: wallet.shortAddress
9801
9987
  }
9802
9988
  ),
9803
- onRemove != null && (state === "confirming" ? /* @__PURE__ */ jsxs40("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
9804
- /* @__PURE__ */ jsx56(
9989
+ onRemove != null && (state === "confirming" ? /* @__PURE__ */ jsxs41("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
9990
+ /* @__PURE__ */ jsx57(
9805
9991
  "span",
9806
9992
  {
9807
9993
  className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"),
9808
9994
  children: "Remove?"
9809
9995
  }
9810
9996
  ),
9811
- /* @__PURE__ */ jsx56(ClButton, { size: "sm", variant: "destructive", onClick: remove, children: "Remove" }),
9812
- /* @__PURE__ */ jsx56(
9997
+ /* @__PURE__ */ jsx57(ClButton, { size: "sm", variant: "destructive", onClick: remove, children: "Remove" }),
9998
+ /* @__PURE__ */ jsx57(
9813
9999
  ClButton,
9814
10000
  {
9815
10001
  size: "sm",
@@ -9818,9 +10004,9 @@ function ConnectedWalletRow({
9818
10004
  children: "Cancel"
9819
10005
  }
9820
10006
  )
9821
- ] }) : state === "error" ? /* @__PURE__ */ jsxs40("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
9822
- /* @__PURE__ */ jsx56("span", { className: cn(typeClasses.subhead, "clcosdk:text-error"), children: "Couldn't remove." }),
9823
- /* @__PURE__ */ jsx56(
10007
+ ] }) : state === "error" ? /* @__PURE__ */ jsxs41("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-2", children: [
10008
+ /* @__PURE__ */ jsx57("span", { className: cn(typeClasses.subhead, "clcosdk:text-error"), children: "Couldn't remove." }),
10009
+ /* @__PURE__ */ jsx57(
9824
10010
  ClButton,
9825
10011
  {
9826
10012
  size: "sm",
@@ -9829,7 +10015,7 @@ function ConnectedWalletRow({
9829
10015
  children: "Try again"
9830
10016
  }
9831
10017
  )
9832
- ] }) : /* @__PURE__ */ jsx56(
10018
+ ] }) : /* @__PURE__ */ jsx57(
9833
10019
  ClButton,
9834
10020
  {
9835
10021
  size: "sm",
@@ -9842,7 +10028,7 @@ function ConnectedWalletRow({
9842
10028
  ] });
9843
10029
  }
9844
10030
  function ConnectedWalletList(props) {
9845
- return /* @__PURE__ */ jsx56(CoinListStyleScope, { children: /* @__PURE__ */ jsx56(ConnectedWalletListBody, { ...props }) });
10031
+ return /* @__PURE__ */ jsx57(CoinListStyleScope, { children: /* @__PURE__ */ jsx57(ConnectedWalletListBody, { ...props }) });
9846
10032
  }
9847
10033
  function ConnectedWalletListBody({
9848
10034
  wallets,
@@ -9852,18 +10038,18 @@ function ConnectedWalletListBody({
9852
10038
  status = "ready",
9853
10039
  className
9854
10040
  }) {
9855
- return /* @__PURE__ */ jsxs40(
10041
+ return /* @__PURE__ */ jsxs41(
9856
10042
  "div",
9857
10043
  {
9858
10044
  className: cn("clcosdk:flex clcosdk:flex-col clcosdk:gap-2", className),
9859
10045
  children: [
9860
- status === "loading" ? /* @__PURE__ */ jsx56(AlertBanner, { variant: "info", content: "Loading your connected wallets\u2026" }) : status === "error" ? /* @__PURE__ */ jsx56(
10046
+ status === "loading" ? /* @__PURE__ */ jsx57(AlertBanner, { variant: "info", content: "Loading your connected wallets\u2026" }) : status === "error" ? /* @__PURE__ */ jsx57(
9861
10047
  AlertBanner,
9862
10048
  {
9863
10049
  variant: "error",
9864
10050
  content: "Couldn't load your connected wallets."
9865
10051
  }
9866
- ) : 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(
10052
+ ) : 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(
9867
10053
  ConnectedWalletRow,
9868
10054
  {
9869
10055
  wallet,
@@ -9871,7 +10057,7 @@ function ConnectedWalletListBody({
9871
10057
  },
9872
10058
  wallet.id
9873
10059
  )) }),
9874
- onAdd != null && status !== "loading" && /* @__PURE__ */ jsx56(
10060
+ onAdd != null && status !== "loading" && /* @__PURE__ */ jsx57(
9875
10061
  ClButton,
9876
10062
  {
9877
10063
  size: "sm",
@@ -9888,9 +10074,9 @@ function ConnectedWalletListBody({
9888
10074
 
9889
10075
  // src/client/components/requirements/identity-verification/IdentityVerificationView.tsx
9890
10076
  import SumsubWebSdk from "@sumsub/websdk-react";
9891
- import { jsx as jsx57, jsxs as jsxs41 } from "react/jsx-runtime";
10077
+ import { jsx as jsx58, jsxs as jsxs42 } from "react/jsx-runtime";
9892
10078
  function IdentityVerificationView(props) {
9893
- return /* @__PURE__ */ jsx57(CoinListStyleScope, { children: /* @__PURE__ */ jsx57(IdentityVerificationViewBody, { ...props }) });
10079
+ return /* @__PURE__ */ jsx58(CoinListStyleScope, { children: /* @__PURE__ */ jsx58(IdentityVerificationViewBody, { ...props }) });
9894
10080
  }
9895
10081
  function IdentityVerificationViewBody({
9896
10082
  state,
@@ -9899,7 +10085,7 @@ function IdentityVerificationViewBody({
9899
10085
  }) {
9900
10086
  switch (state.type) {
9901
10087
  case "loading":
9902
- return /* @__PURE__ */ jsx57(
10088
+ return /* @__PURE__ */ jsx58(
9903
10089
  "output",
9904
10090
  {
9905
10091
  "aria-live": "polite",
@@ -9907,11 +10093,11 @@ function IdentityVerificationViewBody({
9907
10093
  "clcosdk:flex clcosdk:min-h-40 clcosdk:items-center clcosdk:justify-center",
9908
10094
  className
9909
10095
  ),
9910
- children: /* @__PURE__ */ jsx57("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading identity verification..." })
10096
+ children: /* @__PURE__ */ jsx58("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading identity verification..." })
9911
10097
  }
9912
10098
  );
9913
10099
  case "error":
9914
- return /* @__PURE__ */ jsxs41(
10100
+ return /* @__PURE__ */ jsxs42(
9915
10101
  "div",
9916
10102
  {
9917
10103
  className: cn(
@@ -9919,13 +10105,13 @@ function IdentityVerificationViewBody({
9919
10105
  className
9920
10106
  ),
9921
10107
  children: [
9922
- /* @__PURE__ */ jsx57(AlertBanner, { variant: "error", icon: true, content: state.message }),
9923
- state.retryable && /* @__PURE__ */ jsx57(ClButton, { size: "sm", onClick: () => onEvent({ type: "ON_RETRY" }), children: "Try again" })
10108
+ /* @__PURE__ */ jsx58(AlertBanner, { variant: "error", icon: true, content: state.message }),
10109
+ state.retryable && /* @__PURE__ */ jsx58(ClButton, { size: "sm", onClick: () => onEvent({ type: "ON_RETRY" }), children: "Try again" })
9924
10110
  ]
9925
10111
  }
9926
10112
  );
9927
10113
  case "ready":
9928
- return /* @__PURE__ */ jsx57("div", { className: cn("clcosdk:w-full", className), children: /* @__PURE__ */ jsx57(
10114
+ return /* @__PURE__ */ jsx58("div", { className: cn("clcosdk:w-full", className), children: /* @__PURE__ */ jsx58(
9929
10115
  SumsubWebSdk,
9930
10116
  {
9931
10117
  accessToken: state.accessToken,
@@ -9965,25 +10151,25 @@ function toError(error) {
9965
10151
  }
9966
10152
 
9967
10153
  // src/client/hooks/requirements/identity-verification/useIdentityVerificationViewModel.ts
9968
- import { useCallback as useCallback8, useEffect as useEffect22, useMemo as useMemo7, useRef as useRef15 } from "react";
10154
+ import { useCallback as useCallback9, useEffect as useEffect23, useMemo as useMemo7, useRef as useRef15 } from "react";
9969
10155
 
9970
10156
  // src/client/hooks/requirements/data/useKycToken.ts
9971
- import { useCallback as useCallback7, useEffect as useEffect21, useRef as useRef14, useState as useState26 } from "react";
10157
+ import { useCallback as useCallback8, useEffect as useEffect22, useRef as useRef14, useState as useState27 } from "react";
9972
10158
  var IDLE_STATE = { type: "IDLE" };
9973
- var LOADING_STATE4 = { type: "LOADING" };
10159
+ var LOADING_STATE5 = { type: "LOADING" };
9974
10160
  function useKycToken(levelName, reset) {
9975
10161
  const { coinlist } = useCoinList();
9976
10162
  const log = useLogger("useKycToken");
9977
- const [kycTokenState, setKycTokenState] = useState26(IDLE_STATE);
10163
+ const [kycTokenState, setKycTokenState] = useState27(IDLE_STATE);
9978
10164
  const resetPendingRef = useRef14(reset === true);
9979
10165
  const tokenIssuedRef = useRef14(false);
9980
- useEffect21(() => {
10166
+ useEffect22(() => {
9981
10167
  if (!tokenIssuedRef.current) {
9982
10168
  resetPendingRef.current = reset === true;
9983
10169
  }
9984
10170
  }, [reset]);
9985
- const fetchToken = useCallback7(async () => {
9986
- setKycTokenState(LOADING_STATE4);
10171
+ const fetchToken = useCallback8(async () => {
10172
+ setKycTokenState(LOADING_STATE5);
9987
10173
  try {
9988
10174
  const kycToken = await coinlist.requirements.createKycToken({
9989
10175
  levelName,
@@ -10017,7 +10203,7 @@ function useIdentityVerificationViewModel(options = {}) {
10017
10203
  const { levelName, reset, locale, onSubmitted, onError } = options;
10018
10204
  const { kycTokenState, fetchToken } = useKycToken(levelName, reset);
10019
10205
  const fetchedRef = useRef15(false);
10020
- useEffect22(() => {
10206
+ useEffect23(() => {
10021
10207
  if (fetchedRef.current) {
10022
10208
  return;
10023
10209
  }
@@ -10051,7 +10237,7 @@ function useIdentityVerificationViewModel(options = {}) {
10051
10237
  }
10052
10238
  }
10053
10239
  }, [kycTokenState, locale, fetchToken]);
10054
- const onEvent = useCallback8(
10240
+ const onEvent = useCallback9(
10055
10241
  (event) => {
10056
10242
  switch (event.type) {
10057
10243
  case "ON_RETRY":
@@ -10076,7 +10262,7 @@ function useIdentityVerificationViewModel(options = {}) {
10076
10262
  }
10077
10263
 
10078
10264
  // src/client/components/requirements/identity-verification/IdentityVerificationContainer.tsx
10079
- import { jsx as jsx58 } from "react/jsx-runtime";
10265
+ import { jsx as jsx59 } from "react/jsx-runtime";
10080
10266
  function IdentityVerificationContainer({
10081
10267
  levelName,
10082
10268
  reset,
@@ -10092,7 +10278,7 @@ function IdentityVerificationContainer({
10092
10278
  onSubmitted,
10093
10279
  onError
10094
10280
  });
10095
- return /* @__PURE__ */ jsx58(
10281
+ return /* @__PURE__ */ jsx59(
10096
10282
  IdentityVerificationView,
10097
10283
  {
10098
10284
  state,
@@ -10107,7 +10293,7 @@ import { ChevronRight } from "lucide-react";
10107
10293
 
10108
10294
  // src/client/components/design-system/StepStatusIcon.tsx
10109
10295
  import { CircleCheck as CircleCheck2, CircleX, Info as Info5 } from "lucide-react";
10110
- import { jsx as jsx59 } from "react/jsx-runtime";
10296
+ import { jsx as jsx60 } from "react/jsx-runtime";
10111
10297
  var statusConfig = {
10112
10298
  required: {
10113
10299
  Icon: Info5,
@@ -10132,7 +10318,7 @@ var statusConfig = {
10132
10318
  };
10133
10319
  function StepStatusIcon({ status, className }) {
10134
10320
  const { Icon, colorClass, fillClass } = statusConfig[status];
10135
- return /* @__PURE__ */ jsx59(
10321
+ return /* @__PURE__ */ jsx60(
10136
10322
  Icon,
10137
10323
  {
10138
10324
  className: cn(
@@ -10147,49 +10333,90 @@ function StepStatusIcon({ status, className }) {
10147
10333
  }
10148
10334
 
10149
10335
  // src/client/components/requirements/RequirementItem.tsx
10150
- import { Fragment as Fragment9, jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
10336
+ import { Fragment as Fragment10, jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
10337
+ var DEFAULT_PENDING = "Under review. We'll notify you when complete.";
10338
+ var DEFAULT_REJECTED = "Verification rejected.";
10339
+ var SUPPORT_LINK = "Contact support";
10151
10340
  function VerificationActionZone({
10152
10341
  status,
10342
+ statusMessages,
10153
10343
  onAction,
10154
10344
  onContactSupport
10155
10345
  }) {
10156
10346
  switch (status) {
10157
10347
  case "required":
10158
10348
  if (onAction === null) return null;
10159
- return /* @__PURE__ */ jsx60(ClButton, { size: "sm", onClick: onAction, children: "Continue" });
10349
+ return /* @__PURE__ */ jsx61(ClButton, { size: "sm", className: "clcosdk:self-start", onClick: onAction, children: "Continue" });
10160
10350
  case "pending":
10161
- return /* @__PURE__ */ jsx60(
10351
+ return /* @__PURE__ */ jsx61(
10162
10352
  AlertBanner,
10163
10353
  {
10164
10354
  variant: "warning",
10165
- content: "Under review. We'll notify you when complete."
10355
+ content: statusMessages?.pending ?? DEFAULT_PENDING
10166
10356
  }
10167
10357
  );
10168
10358
  case "completed":
10169
- return /* @__PURE__ */ jsx60(AlertBanner, { variant: "success", content: "Identity verified." });
10359
+ return /* @__PURE__ */ jsx61(
10360
+ AlertBanner,
10361
+ {
10362
+ variant: "success",
10363
+ content: statusMessages?.completed ?? "Identity verified."
10364
+ }
10365
+ );
10170
10366
  case "rejected":
10171
- return /* @__PURE__ */ jsx60(
10367
+ return /* @__PURE__ */ jsx61(
10172
10368
  AlertBanner,
10173
10369
  {
10174
10370
  variant: "error",
10175
- content: onContactSupport === null ? "Verification rejected." : /* @__PURE__ */ jsxs42(Fragment9, { children: [
10176
- "Verification rejected.",
10177
- " ",
10178
- /* @__PURE__ */ jsx60(
10179
- "button",
10180
- {
10181
- type: "button",
10182
- onClick: onContactSupport,
10183
- className: "clcosdk:underline",
10184
- children: "Contact support"
10185
- }
10186
- ),
10187
- "."
10188
- ] })
10371
+ content: /* @__PURE__ */ jsx61(
10372
+ RejectedMessage,
10373
+ {
10374
+ message: statusMessages?.rejected ?? DEFAULT_REJECTED,
10375
+ onContactSupport
10376
+ }
10377
+ )
10189
10378
  }
10190
10379
  );
10191
10380
  }
10192
10381
  }
10382
+ function RejectedMessage({
10383
+ message,
10384
+ onContactSupport
10385
+ }) {
10386
+ const linkAt = message.indexOf(SUPPORT_LINK);
10387
+ if (onContactSupport == null) {
10388
+ return message;
10389
+ }
10390
+ if (linkAt === -1) {
10391
+ return /* @__PURE__ */ jsxs43(Fragment10, { children: [
10392
+ message,
10393
+ " ",
10394
+ /* @__PURE__ */ jsx61(
10395
+ "button",
10396
+ {
10397
+ type: "button",
10398
+ onClick: onContactSupport,
10399
+ className: "clcosdk:underline",
10400
+ children: SUPPORT_LINK
10401
+ }
10402
+ ),
10403
+ "."
10404
+ ] });
10405
+ }
10406
+ return /* @__PURE__ */ jsxs43(Fragment10, { children: [
10407
+ message.slice(0, linkAt),
10408
+ /* @__PURE__ */ jsx61(
10409
+ "button",
10410
+ {
10411
+ type: "button",
10412
+ onClick: onContactSupport,
10413
+ className: "clcosdk:underline",
10414
+ children: SUPPORT_LINK
10415
+ }
10416
+ ),
10417
+ message.slice(linkAt + SUPPORT_LINK.length)
10418
+ ] });
10419
+ }
10193
10420
  function WalletActionZone({
10194
10421
  status,
10195
10422
  multiWallet,
@@ -10199,8 +10426,8 @@ function WalletActionZone({
10199
10426
  onRemoveWallet
10200
10427
  }) {
10201
10428
  if (multiWallet) {
10202
- return /* @__PURE__ */ jsxs42(Fragment9, { children: [
10203
- /* @__PURE__ */ jsx60(
10429
+ return /* @__PURE__ */ jsxs43(Fragment10, { children: [
10430
+ /* @__PURE__ */ jsx61(
10204
10431
  ConnectedWalletList,
10205
10432
  {
10206
10433
  wallets: connectedWallets,
@@ -10209,7 +10436,7 @@ function WalletActionZone({
10209
10436
  status: walletsStatus
10210
10437
  }
10211
10438
  ),
10212
- status === "rejected" && /* @__PURE__ */ jsx60(
10439
+ status === "rejected" && /* @__PURE__ */ jsx61(
10213
10440
  AlertBanner,
10214
10441
  {
10215
10442
  variant: "error",
@@ -10220,21 +10447,30 @@ function WalletActionZone({
10220
10447
  }
10221
10448
  if (status === "completed") {
10222
10449
  const connected = connectedWallets[0];
10223
- return /* @__PURE__ */ jsxs42(Fragment9, { children: [
10224
- onAction !== null && /* @__PURE__ */ jsx60(ClButton, { size: "sm", variant: "secondary", onClick: onAction, children: "Change wallet" }),
10225
- walletsStatus === "loading" ? /* @__PURE__ */ jsx60(
10450
+ return /* @__PURE__ */ jsxs43(Fragment10, { children: [
10451
+ onAction !== null && /* @__PURE__ */ jsx61(
10452
+ ClButton,
10453
+ {
10454
+ size: "sm",
10455
+ variant: "secondary",
10456
+ className: "clcosdk:self-start",
10457
+ onClick: onAction,
10458
+ children: "Change wallet"
10459
+ }
10460
+ ),
10461
+ walletsStatus === "loading" ? /* @__PURE__ */ jsx61(
10226
10462
  AlertBanner,
10227
10463
  {
10228
10464
  variant: "info",
10229
10465
  content: "Loading your connected wallet\u2026"
10230
10466
  }
10231
- ) : walletsStatus === "error" ? /* @__PURE__ */ jsx60(
10467
+ ) : walletsStatus === "error" ? /* @__PURE__ */ jsx61(
10232
10468
  AlertBanner,
10233
10469
  {
10234
10470
  variant: "error",
10235
10471
  content: "Couldn't load your connected wallet."
10236
10472
  }
10237
- ) : /* @__PURE__ */ jsx60(
10473
+ ) : /* @__PURE__ */ jsx61(
10238
10474
  AlertBanner,
10239
10475
  {
10240
10476
  variant: "success",
@@ -10244,9 +10480,9 @@ function WalletActionZone({
10244
10480
  ] });
10245
10481
  }
10246
10482
  if (status === "rejected") {
10247
- return /* @__PURE__ */ jsxs42(Fragment9, { children: [
10248
- onAction !== null && /* @__PURE__ */ jsx60(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" }),
10249
- /* @__PURE__ */ jsx60(
10483
+ return /* @__PURE__ */ jsxs43(Fragment10, { children: [
10484
+ onAction !== null && /* @__PURE__ */ jsx61(ClButton, { size: "sm", className: "clcosdk:self-start", onClick: onAction, children: "Connect wallet" }),
10485
+ /* @__PURE__ */ jsx61(
10250
10486
  AlertBanner,
10251
10487
  {
10252
10488
  variant: "error",
@@ -10256,7 +10492,7 @@ function WalletActionZone({
10256
10492
  ] });
10257
10493
  }
10258
10494
  if (onAction === null) return null;
10259
- return /* @__PURE__ */ jsx60(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" });
10495
+ return /* @__PURE__ */ jsx61(ClButton, { size: "sm", className: "clcosdk:self-start", onClick: onAction, children: "Connect wallet" });
10260
10496
  }
10261
10497
  function RequirementItem({
10262
10498
  ui,
@@ -10266,9 +10502,10 @@ function RequirementItem({
10266
10502
  onAction,
10267
10503
  onRemoveWallet,
10268
10504
  walletsStatus,
10269
- onContactSupport
10505
+ onContactSupport,
10506
+ spaceBeforeNextRow = true
10270
10507
  }) {
10271
- return /* @__PURE__ */ jsx60(CoinListStyleScope, { children: /* @__PURE__ */ jsxs42(
10508
+ return /* @__PURE__ */ jsx61(CoinListStyleScope, { children: /* @__PURE__ */ jsxs43(
10272
10509
  "div",
10273
10510
  {
10274
10511
  className: cn(
@@ -10276,17 +10513,17 @@ function RequirementItem({
10276
10513
  className
10277
10514
  ),
10278
10515
  children: [
10279
- /* @__PURE__ */ jsxs42(
10516
+ /* @__PURE__ */ jsxs43(
10280
10517
  "button",
10281
10518
  {
10282
10519
  type: "button",
10283
10520
  onClick: onToggle,
10284
10521
  "aria-expanded": expanded,
10285
- 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",
10522
+ 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",
10286
10523
  children: [
10287
- /* @__PURE__ */ jsxs42("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-3", children: [
10288
- /* @__PURE__ */ jsx60(StepStatusIcon, { status: ui.status }),
10289
- /* @__PURE__ */ jsx60(
10524
+ /* @__PURE__ */ jsxs43("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-3", children: [
10525
+ /* @__PURE__ */ jsx61(StepStatusIcon, { status: ui.status }),
10526
+ /* @__PURE__ */ jsx61(
10290
10527
  "span",
10291
10528
  {
10292
10529
  className: cn(
@@ -10297,7 +10534,7 @@ function RequirementItem({
10297
10534
  }
10298
10535
  )
10299
10536
  ] }),
10300
- /* @__PURE__ */ jsx60(
10537
+ /* @__PURE__ */ jsx61(
10301
10538
  ChevronRight,
10302
10539
  {
10303
10540
  className: cn(
@@ -10310,43 +10547,53 @@ function RequirementItem({
10310
10547
  ]
10311
10548
  }
10312
10549
  ),
10313
- /* @__PURE__ */ jsx60(
10550
+ /* @__PURE__ */ jsx61(
10314
10551
  "div",
10315
10552
  {
10316
10553
  className: cn(
10317
10554
  "clcosdk:grid clcosdk:transition-[grid-template-rows] clcosdk:duration-300 clcosdk:ease-in-out",
10318
10555
  expanded ? "clcosdk:grid-rows-[1fr]" : "clcosdk:grid-rows-[0fr]"
10319
10556
  ),
10320
- 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: [
10321
- /* @__PURE__ */ jsx60(
10322
- "p",
10323
- {
10324
- className: cn(
10325
- typeClasses.subhead,
10326
- "clcosdk:text-text-secondary"
10557
+ children: /* @__PURE__ */ jsx61("div", { className: "clcosdk:min-h-0 clcosdk:overflow-hidden", children: /* @__PURE__ */ jsxs43(
10558
+ "div",
10559
+ {
10560
+ className: cn(
10561
+ "clcosdk:flex clcosdk:flex-col clcosdk:gap-4",
10562
+ spaceBeforeNextRow && "clcosdk:pb-4"
10563
+ ),
10564
+ children: [
10565
+ /* @__PURE__ */ jsx61(
10566
+ "p",
10567
+ {
10568
+ className: cn(
10569
+ typeClasses.bodySm,
10570
+ "clcosdk:text-text-secondary"
10571
+ ),
10572
+ children: ui.description
10573
+ }
10327
10574
  ),
10328
- children: ui.description
10329
- }
10330
- ),
10331
- ui.variant === "verification" ? /* @__PURE__ */ jsx60(
10332
- VerificationActionZone,
10333
- {
10334
- status: ui.status,
10335
- onAction,
10336
- onContactSupport
10337
- }
10338
- ) : /* @__PURE__ */ jsx60(
10339
- WalletActionZone,
10340
- {
10341
- status: ui.status,
10342
- multiWallet: ui.multiWallet,
10343
- connectedWallets: ui.connectedWallets,
10344
- walletsStatus,
10345
- onAction,
10346
- onRemoveWallet
10347
- }
10348
- )
10349
- ] }) })
10575
+ ui.variant === "verification" ? /* @__PURE__ */ jsx61(
10576
+ VerificationActionZone,
10577
+ {
10578
+ status: ui.status,
10579
+ statusMessages: ui.statusMessages,
10580
+ onAction,
10581
+ onContactSupport
10582
+ }
10583
+ ) : /* @__PURE__ */ jsx61(
10584
+ WalletActionZone,
10585
+ {
10586
+ status: ui.status,
10587
+ multiWallet: ui.multiWallet,
10588
+ connectedWallets: ui.connectedWallets,
10589
+ walletsStatus,
10590
+ onAction,
10591
+ onRemoveWallet
10592
+ }
10593
+ )
10594
+ ]
10595
+ }
10596
+ ) })
10350
10597
  }
10351
10598
  )
10352
10599
  ]
@@ -10355,35 +10602,29 @@ function RequirementItem({
10355
10602
  }
10356
10603
 
10357
10604
  // src/client/components/requirements/RequirementsChecklistView.tsx
10358
- import { jsx as jsx61, jsxs as jsxs43 } from "react/jsx-runtime";
10605
+ import { Fragment as Fragment11, jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
10359
10606
  function RequirementsChecklistView(props) {
10360
- return /* @__PURE__ */ jsx61(CoinListStyleScope, { children: /* @__PURE__ */ jsx61(RequirementsChecklistViewBody, { ...props }) });
10607
+ return /* @__PURE__ */ jsx62(CoinListStyleScope, { children: /* @__PURE__ */ jsx62(RequirementsChecklistViewBody, { ...props }) });
10361
10608
  }
10362
10609
  function RequirementsChecklistViewBody({
10363
10610
  state,
10364
10611
  onEvent,
10365
10612
  loading,
10366
10613
  error,
10367
- unauthenticatedState,
10368
10614
  className
10369
10615
  }) {
10370
10616
  switch (state.type) {
10371
10617
  case "loading":
10372
- return loading ?? /* @__PURE__ */ jsx61(LoadingState2, {});
10373
- case "not-authenticated":
10374
- return unauthenticatedState ?? null;
10375
- case "error":
10376
- return error ?? /* @__PURE__ */ jsx61(
10377
- AlertBanner,
10618
+ return loading ?? /* @__PURE__ */ jsx62(
10619
+ LoadingState2,
10378
10620
  {
10379
- variant: "error",
10380
- icon: true,
10381
- content: "Unable to load requirements right now. Please try again.",
10382
- className: "clcosdk:w-full clcosdk:max-w-[28rem]"
10621
+ title: state.title,
10622
+ description: state.description,
10623
+ className
10383
10624
  }
10384
10625
  );
10385
- case "content":
10386
- return /* @__PURE__ */ jsxs43(
10626
+ case "error":
10627
+ return /* @__PURE__ */ jsxs44(
10387
10628
  "div",
10388
10629
  {
10389
10630
  className: cn(
@@ -10391,46 +10632,91 @@ function RequirementsChecklistViewBody({
10391
10632
  className
10392
10633
  ),
10393
10634
  children: [
10394
- /* @__PURE__ */ jsxs43("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
10395
- /* @__PURE__ */ jsx61("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
10396
- /* @__PURE__ */ jsx61("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: state.description })
10397
- ] }),
10398
- /* @__PURE__ */ jsx61("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:divide-y clcosdk:divide-divider", children: state.items.map((row) => /* @__PURE__ */ jsx61(
10399
- RequirementItem,
10400
- {
10401
- ui: row.item,
10402
- expanded: row.expanded,
10403
- onToggle: () => onEvent({ type: "ON_TOGGLE_ITEM", requirementId: row.id }),
10404
- onAction: row.actionEnabled ? () => onEvent({
10405
- type: "ON_REQUIREMENT_ACTION",
10406
- requirementId: row.id
10407
- }) : null,
10408
- onRemoveWallet: row.wallets ? (id) => state.removeWallet(id) : void 0,
10409
- walletsStatus: row.wallets?.status,
10410
- onContactSupport: row.contactSupportEnabled ? () => onEvent({
10411
- type: "ON_CONTACT_SUPPORT",
10412
- requirementId: row.id
10413
- }) : null
10414
- },
10415
- row.id
10416
- )) }),
10417
- state.ineligible && /* @__PURE__ */ jsx61(
10635
+ /* @__PURE__ */ jsx62("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
10636
+ error ?? /* @__PURE__ */ jsx62(
10418
10637
  AlertBanner,
10419
10638
  {
10420
10639
  variant: "error",
10421
10640
  icon: true,
10422
- content: "You are not eligible to participate."
10641
+ content: "Unable to load requirements. Refresh the page to try again."
10423
10642
  }
10424
- ),
10425
- state.continueAction && /* @__PURE__ */ jsx61(
10643
+ )
10644
+ ]
10645
+ }
10646
+ );
10647
+ case "content":
10648
+ return /* @__PURE__ */ jsxs44(
10649
+ "div",
10650
+ {
10651
+ className: cn(
10652
+ "clcosdk:flex clcosdk:w-full clcosdk:flex-col clcosdk:gap-4",
10653
+ className
10654
+ ),
10655
+ children: [
10656
+ /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
10657
+ /* @__PURE__ */ jsx62("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
10658
+ state.blockedMessage == null && /* @__PURE__ */ jsx62(
10659
+ "p",
10660
+ {
10661
+ className: cn(typeClasses.body, "clcosdk:text-text-secondary"),
10662
+ children: state.items.length === 0 ? "No requirements to complete." : state.description
10663
+ }
10664
+ )
10665
+ ] }),
10666
+ state.blockedMessage != null ? /* @__PURE__ */ jsx62(AlertBanner, { variant: "info", icon: true, content: state.blockedMessage }) : state.items.length === 0 ? state.continueAction && /* @__PURE__ */ jsx62(
10426
10667
  ClButton,
10427
10668
  {
10669
+ variant: "primary",
10428
10670
  fullWidth: true,
10429
10671
  disabled: !state.continueAction.enabled,
10430
10672
  onClick: () => onEvent({ type: "ON_CONTINUE" }),
10431
10673
  children: "Continue"
10432
10674
  }
10433
- )
10675
+ ) : /* @__PURE__ */ jsxs44(Fragment11, { children: [
10676
+ /* @__PURE__ */ jsx62("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:divide-y clcosdk:divide-divider", children: state.items.map((row, index) => /* @__PURE__ */ jsx62(
10677
+ RequirementItem,
10678
+ {
10679
+ ui: row.item,
10680
+ expanded: row.expanded,
10681
+ spaceBeforeNextRow: index < state.items.length - 1,
10682
+ onToggle: () => onEvent({ type: "ON_TOGGLE_ITEM", requirementId: row.id }),
10683
+ onAction: row.actionEnabled ? () => onEvent({
10684
+ type: "ON_REQUIREMENT_ACTION",
10685
+ requirementId: row.id
10686
+ }) : null,
10687
+ onRemoveWallet: row.wallets ? (id) => state.removeWallet(id) : void 0,
10688
+ walletsStatus: row.wallets?.status,
10689
+ onContactSupport: row.contactSupportEnabled ? () => onEvent({
10690
+ type: "ON_CONTACT_SUPPORT",
10691
+ requirementId: row.id
10692
+ }) : null
10693
+ },
10694
+ row.id
10695
+ )) }),
10696
+ /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-row clcosdk:items-center clcosdk:justify-between clcosdk:gap-6", children: [
10697
+ /* @__PURE__ */ jsx62(
10698
+ "span",
10699
+ {
10700
+ className: cn(
10701
+ typeClasses.subhead,
10702
+ "clcosdk:min-w-0",
10703
+ state.ineligible ? "clcosdk:text-error" : "clcosdk:text-text-secondary"
10704
+ ),
10705
+ children: state.ineligible ? "You are not eligible to invest." : completedLabel(state.items)
10706
+ }
10707
+ ),
10708
+ state.continueAction && /* @__PURE__ */ jsx62(
10709
+ ClButton,
10710
+ {
10711
+ variant: "primary",
10712
+ disabled: !state.continueAction.enabled,
10713
+ onClick: () => onEvent({ type: "ON_CONTINUE" }),
10714
+ className: "clcosdk:shrink-0",
10715
+ children: "Continue"
10716
+ }
10717
+ )
10718
+ ] })
10719
+ ] })
10434
10720
  ]
10435
10721
  }
10436
10722
  );
@@ -10440,19 +10726,43 @@ function RequirementsChecklistViewBody({
10440
10726
  }
10441
10727
  }
10442
10728
  }
10443
- function LoadingState2() {
10444
- return /* @__PURE__ */ jsx61(
10445
- "output",
10729
+ function completedLabel(items) {
10730
+ const completed = items.filter(
10731
+ (row) => row.item.status === "completed"
10732
+ ).length;
10733
+ return `${completed}/${items.length} completed`;
10734
+ }
10735
+ var LOADING_ROW_WIDTHS = [
10736
+ "clcosdk:w-3/5",
10737
+ "clcosdk:w-2/5",
10738
+ "clcosdk:w-1/2"
10739
+ ];
10740
+ function LoadingState2({
10741
+ title: title2,
10742
+ description: description2,
10743
+ className
10744
+ }) {
10745
+ return /* @__PURE__ */ jsxs44(
10746
+ "div",
10446
10747
  {
10447
- "aria-live": "polite",
10448
- 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",
10449
- children: /* @__PURE__ */ jsx61("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading requirements..." })
10748
+ className: cn(
10749
+ "clcosdk:flex clcosdk:w-full clcosdk:flex-col clcosdk:gap-4",
10750
+ className
10751
+ ),
10752
+ children: [
10753
+ /* @__PURE__ */ jsx62("output", { className: "clcosdk:sr-only", children: "Loading requirements..." }),
10754
+ /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
10755
+ /* @__PURE__ */ jsx62("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: title2 }),
10756
+ /* @__PURE__ */ jsx62("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: description2 })
10757
+ ] }),
10758
+ /* @__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)) })
10759
+ ]
10450
10760
  }
10451
10761
  );
10452
10762
  }
10453
10763
 
10454
10764
  // src/client/components/requirements/tax-document/TaxDocumentModalView.tsx
10455
- import { jsx as jsx62, jsxs as jsxs44 } from "react/jsx-runtime";
10765
+ import { jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
10456
10766
  function TaxDocumentModalView({
10457
10767
  state,
10458
10768
  onEvent,
@@ -10461,7 +10771,7 @@ function TaxDocumentModalView({
10461
10771
  if (state.type === "hidden") {
10462
10772
  return null;
10463
10773
  }
10464
- 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(
10774
+ 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(
10465
10775
  "div",
10466
10776
  {
10467
10777
  className: cn(
@@ -10469,11 +10779,11 @@ function TaxDocumentModalView({
10469
10779
  className
10470
10780
  ),
10471
10781
  children: [
10472
- /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
10473
- /* @__PURE__ */ jsx62("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
10474
- /* @__PURE__ */ jsx62(CloseButton, { onClick: () => onEvent({ type: "ON_CLOSE" }) })
10782
+ /* @__PURE__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
10783
+ /* @__PURE__ */ jsx63("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: state.title }),
10784
+ /* @__PURE__ */ jsx63(CloseButton, { onClick: () => onEvent({ type: "ON_CLOSE" }) })
10475
10785
  ] }),
10476
- /* @__PURE__ */ jsx62(Screen, { screen: state.screen, onEvent })
10786
+ /* @__PURE__ */ jsx63(Screen, { screen: state.screen, onEvent })
10477
10787
  ]
10478
10788
  }
10479
10789
  ) }) });
@@ -10484,11 +10794,11 @@ function Screen({
10484
10794
  }) {
10485
10795
  switch (screen.type) {
10486
10796
  case "loading":
10487
- return /* @__PURE__ */ jsx62(LoadingScreen, {});
10797
+ return /* @__PURE__ */ jsx63(LoadingScreen, {});
10488
10798
  case "error":
10489
- return /* @__PURE__ */ jsx62(AlertBanner, { variant: "error", icon: true, content: screen.message });
10799
+ return /* @__PURE__ */ jsx63(AlertBanner, { variant: "error", icon: true, content: screen.message });
10490
10800
  case "review":
10491
- return /* @__PURE__ */ jsx62(
10801
+ return /* @__PURE__ */ jsx63(
10492
10802
  ReviewScreen,
10493
10803
  {
10494
10804
  fields: screen.fields,
@@ -10499,9 +10809,9 @@ function Screen({
10499
10809
  }
10500
10810
  );
10501
10811
  case "editing":
10502
- return /* @__PURE__ */ jsx62(EditScreen, { fields: screen.fields, onEvent });
10812
+ return /* @__PURE__ */ jsx63(EditScreen, { fields: screen.fields, onEvent });
10503
10813
  case "sign-only":
10504
- return /* @__PURE__ */ jsx62(
10814
+ return /* @__PURE__ */ jsx63(
10505
10815
  SignOnlyScreen,
10506
10816
  {
10507
10817
  signing: screen.signing,
@@ -10516,14 +10826,14 @@ function Screen({
10516
10826
  }
10517
10827
  }
10518
10828
  function LoadingScreen() {
10519
- return /* @__PURE__ */ jsx62(
10829
+ return /* @__PURE__ */ jsx63(
10520
10830
  "output",
10521
10831
  {
10522
10832
  "aria-live": "polite",
10523
10833
  className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4",
10524
- children: [0, 1, 2, 3, 4].map((row) => /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1", children: [
10525
- /* @__PURE__ */ jsx62("div", { className: "clcosdk:h-3 clcosdk:w-28 clcosdk:animate-pulse clcosdk:rounded clcosdk:bg-surface" }),
10526
- /* @__PURE__ */ jsx62("div", { className: "clcosdk:h-5 clcosdk:w-48 clcosdk:animate-pulse clcosdk:rounded clcosdk:bg-surface" })
10834
+ children: [0, 1, 2, 3, 4].map((row) => /* @__PURE__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1", children: [
10835
+ /* @__PURE__ */ jsx63("div", { className: "clcosdk:h-3 clcosdk:w-28 clcosdk:animate-pulse clcosdk:rounded clcosdk:bg-surface" }),
10836
+ /* @__PURE__ */ jsx63("div", { className: "clcosdk:h-5 clcosdk:w-48 clcosdk:animate-pulse clcosdk:rounded clcosdk:bg-surface" })
10527
10837
  ] }, row))
10528
10838
  }
10529
10839
  );
@@ -10535,9 +10845,9 @@ function ReviewScreen({
10535
10845
  signError,
10536
10846
  onEvent
10537
10847
  }) {
10538
- return /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
10539
- /* @__PURE__ */ jsx62("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Review your information below. If anything looks incorrect, edit before signing." }),
10540
- piiUnavailable && /* @__PURE__ */ jsx62(
10848
+ return /* @__PURE__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
10849
+ /* @__PURE__ */ jsx63("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Review your information below. If anything looks incorrect, edit before signing." }),
10850
+ piiUnavailable && /* @__PURE__ */ jsx63(
10541
10851
  AlertBanner,
10542
10852
  {
10543
10853
  variant: "info",
@@ -10545,27 +10855,27 @@ function ReviewScreen({
10545
10855
  content: "We don't have this information on file yet \u2014 please fill it in below."
10546
10856
  }
10547
10857
  ),
10548
- /* @__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(
10858
+ /* @__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(
10549
10859
  "div",
10550
10860
  {
10551
10861
  className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1",
10552
10862
  children: [
10553
- /* @__PURE__ */ jsx62(
10863
+ /* @__PURE__ */ jsx63(
10554
10864
  "span",
10555
10865
  {
10556
10866
  className: cn(typeClasses.label, "clcosdk:text-text-secondary"),
10557
10867
  children: label
10558
10868
  }
10559
10869
  ),
10560
- /* @__PURE__ */ jsx62("span", { className: cn(typeClasses.body, "clcosdk:text-text-primary"), children: displayValue })
10870
+ /* @__PURE__ */ jsx63("span", { className: cn(typeClasses.body, "clcosdk:text-text-primary"), children: displayValue })
10561
10871
  ]
10562
10872
  },
10563
10873
  field
10564
10874
  )) }),
10565
- /* @__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." }),
10566
- signError && /* @__PURE__ */ jsx62(AlertBanner, { variant: "error", icon: true, content: signError }),
10567
- /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
10568
- /* @__PURE__ */ jsx62(
10875
+ /* @__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." }),
10876
+ signError && /* @__PURE__ */ jsx63(AlertBanner, { variant: "error", icon: true, content: signError }),
10877
+ /* @__PURE__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
10878
+ /* @__PURE__ */ jsx63(
10569
10879
  ClButton,
10570
10880
  {
10571
10881
  fullWidth: true,
@@ -10575,7 +10885,7 @@ function ReviewScreen({
10575
10885
  children: "Sign W-8BEN"
10576
10886
  }
10577
10887
  ),
10578
- /* @__PURE__ */ jsx62(
10888
+ /* @__PURE__ */ jsx63(
10579
10889
  ClButton,
10580
10890
  {
10581
10891
  fullWidth: true,
@@ -10592,20 +10902,20 @@ function EditScreen({
10592
10902
  fields,
10593
10903
  onEvent
10594
10904
  }) {
10595
- return /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
10596
- /* @__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(
10905
+ return /* @__PURE__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
10906
+ /* @__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(
10597
10907
  "label",
10598
10908
  {
10599
10909
  className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1",
10600
10910
  children: [
10601
- /* @__PURE__ */ jsx62(
10911
+ /* @__PURE__ */ jsx63(
10602
10912
  "span",
10603
10913
  {
10604
10914
  className: cn(typeClasses.label, "clcosdk:text-text-secondary"),
10605
10915
  children: label
10606
10916
  }
10607
10917
  ),
10608
- /* @__PURE__ */ jsx62(
10918
+ /* @__PURE__ */ jsx63(
10609
10919
  "input",
10610
10920
  {
10611
10921
  type: "text",
@@ -10626,9 +10936,9 @@ function EditScreen({
10626
10936
  },
10627
10937
  field
10628
10938
  )) }),
10629
- /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
10630
- /* @__PURE__ */ jsx62(ClButton, { fullWidth: true, onClick: () => onEvent({ type: "ON_SAVE_EDIT" }), children: "Save & review" }),
10631
- /* @__PURE__ */ jsx62(
10939
+ /* @__PURE__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
10940
+ /* @__PURE__ */ jsx63(ClButton, { fullWidth: true, onClick: () => onEvent({ type: "ON_SAVE_EDIT" }), children: "Save & review" }),
10941
+ /* @__PURE__ */ jsx63(
10632
10942
  ClButton,
10633
10943
  {
10634
10944
  fullWidth: true,
@@ -10645,10 +10955,10 @@ function SignOnlyScreen({
10645
10955
  signError,
10646
10956
  onEvent
10647
10957
  }) {
10648
- return /* @__PURE__ */ jsxs44("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
10649
- /* @__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." }),
10650
- signError && /* @__PURE__ */ jsx62(AlertBanner, { variant: "error", icon: true, content: signError }),
10651
- /* @__PURE__ */ jsx62(
10958
+ return /* @__PURE__ */ jsxs45("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
10959
+ /* @__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." }),
10960
+ signError && /* @__PURE__ */ jsx63(AlertBanner, { variant: "error", icon: true, content: signError }),
10961
+ /* @__PURE__ */ jsx63(
10652
10962
  ClButton,
10653
10963
  {
10654
10964
  fullWidth: true,
@@ -10662,12 +10972,12 @@ function SignOnlyScreen({
10662
10972
  }
10663
10973
 
10664
10974
  // src/client/hooks/requirements/tax-document/useTaxDocumentModalViewModel.ts
10665
- import { useCallback as useCallback10, useEffect as useEffect24, useMemo as useMemo8 } from "react";
10975
+ import { useCallback as useCallback11, useEffect as useEffect25, useMemo as useMemo8 } from "react";
10666
10976
 
10667
10977
  // src/client/hooks/requirements/data/useTaxDocument.ts
10668
- import { useCallback as useCallback9, useEffect as useEffect23, useState as useState27 } from "react";
10978
+ import { useCallback as useCallback10, useEffect as useEffect24, useState as useState28 } from "react";
10669
10979
  var IDLE_SIGN = { type: "idle", error: null };
10670
- var LOADING_STATE5 = { type: "LOADING" };
10980
+ var LOADING_STATE6 = { type: "LOADING" };
10671
10981
  var SIGN_FAILED_MESSAGE = "Unable to sign document. Please try again.";
10672
10982
  var DOB_INVALID_MESSAGE = "Enter your date of birth as MM/DD/YYYY.";
10673
10983
  var FIELD_KEYS = {
@@ -10740,8 +11050,8 @@ function useTaxDocument({
10740
11050
  }) {
10741
11051
  const { coinlist, isReady } = useCoinList();
10742
11052
  const log = useLogger("useTaxDocument");
10743
- const [state, setState] = useState27(LOADING_STATE5);
10744
- useEffect23(() => {
11053
+ const [state, setState] = useState28(LOADING_STATE6);
11054
+ useEffect24(() => {
10745
11055
  let isCancelled = false;
10746
11056
  if (!isOpen) {
10747
11057
  return () => {
@@ -10749,12 +11059,12 @@ function useTaxDocument({
10749
11059
  };
10750
11060
  }
10751
11061
  if (!isReady) {
10752
- setState(LOADING_STATE5);
11062
+ setState(LOADING_STATE6);
10753
11063
  return () => {
10754
11064
  isCancelled = true;
10755
11065
  };
10756
11066
  }
10757
- setState(LOADING_STATE5);
11067
+ setState(LOADING_STATE6);
10758
11068
  coinlist.requirements.getPii().then((pii) => {
10759
11069
  if (isCancelled) return;
10760
11070
  if (pii.kind === "company") {
@@ -10782,7 +11092,7 @@ function useTaxDocument({
10782
11092
  isCancelled = true;
10783
11093
  };
10784
11094
  }, [coinlist, isReady, isOpen, log]);
10785
- const onEditField = useCallback9(
11095
+ const onEditField = useCallback10(
10786
11096
  (field, value) => {
10787
11097
  setState(
10788
11098
  (prev) => prev.type === "EDITING" ? { ...prev, fields: { ...prev.fields, [field]: value } } : prev
@@ -10790,7 +11100,7 @@ function useTaxDocument({
10790
11100
  },
10791
11101
  []
10792
11102
  );
10793
- const onStartEdit = useCallback9(() => {
11103
+ const onStartEdit = useCallback10(() => {
10794
11104
  setState(
10795
11105
  (prev) => prev.type === "REVIEW" ? {
10796
11106
  type: "EDITING",
@@ -10801,7 +11111,7 @@ function useTaxDocument({
10801
11111
  } : prev
10802
11112
  );
10803
11113
  }, []);
10804
- const onSaveEdit = useCallback9(() => {
11114
+ const onSaveEdit = useCallback10(() => {
10805
11115
  setState(
10806
11116
  (prev) => prev.type === "EDITING" ? {
10807
11117
  type: "REVIEW",
@@ -10812,7 +11122,7 @@ function useTaxDocument({
10812
11122
  } : prev
10813
11123
  );
10814
11124
  }, []);
10815
- const onCancelEdit = useCallback9(() => {
11125
+ const onCancelEdit = useCallback10(() => {
10816
11126
  setState(
10817
11127
  (prev) => prev.type === "EDITING" ? {
10818
11128
  type: "REVIEW",
@@ -10823,7 +11133,7 @@ function useTaxDocument({
10823
11133
  } : prev
10824
11134
  );
10825
11135
  }, []);
10826
- const onSign = useCallback9(() => {
11136
+ const onSign = useCallback10(() => {
10827
11137
  if (state.type !== "REVIEW" && state.type !== "SIGN_ONLY") return;
10828
11138
  if (state.type === "REVIEW" && state.fields.dob.trim() !== "" && !isValidUsDate(state.fields.dob)) {
10829
11139
  setState({
@@ -10865,7 +11175,7 @@ function useTaxDocumentModalViewModel({
10865
11175
  onSubmitted
10866
11176
  }) {
10867
11177
  const { state, onEditField, onStartEdit, onSaveEdit, onCancelEdit, onSign } = useTaxDocument({ isOpen });
10868
- useEffect24(() => {
11178
+ useEffect25(() => {
10869
11179
  if (state.type === "SUBMITTED") {
10870
11180
  onSubmitted?.(state.submission);
10871
11181
  onClose();
@@ -10877,7 +11187,7 @@ function useTaxDocumentModalViewModel({
10877
11187
  }
10878
11188
  return { type: "content", title: toTitle(state), screen: toScreen(state) };
10879
11189
  }, [isOpen, state]);
10880
- const onEvent = useCallback10(
11190
+ const onEvent = useCallback11(
10881
11191
  (event) => {
10882
11192
  switch (event.type) {
10883
11193
  case "ON_CLOSE":
@@ -10960,7 +11270,7 @@ function toFieldsUi(fields) {
10960
11270
  }
10961
11271
 
10962
11272
  // src/client/components/requirements/tax-document/TaxDocumentModalContainer.tsx
10963
- import { jsx as jsx63 } from "react/jsx-runtime";
11273
+ import { jsx as jsx64 } from "react/jsx-runtime";
10964
11274
  function TaxDocumentModalContainer({
10965
11275
  isOpen,
10966
11276
  onClose,
@@ -10972,7 +11282,7 @@ function TaxDocumentModalContainer({
10972
11282
  onClose,
10973
11283
  onSubmitted
10974
11284
  });
10975
- return /* @__PURE__ */ jsx63(
11285
+ return /* @__PURE__ */ jsx64(
10976
11286
  TaxDocumentModalView,
10977
11287
  {
10978
11288
  state,
@@ -10983,26 +11293,26 @@ function TaxDocumentModalContainer({
10983
11293
  }
10984
11294
 
10985
11295
  // src/client/components/requirements/VerificationOverlay.tsx
10986
- import { jsx as jsx64, jsxs as jsxs45 } from "react/jsx-runtime";
11296
+ import { jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
10987
11297
  function VerificationOverlay({
10988
11298
  onClose,
10989
11299
  children
10990
11300
  }) {
10991
- return /* @__PURE__ */ jsx64(CoinListStyleScope, { children: /* @__PURE__ */ jsx64(VerificationOverlayBody, { onClose, children }) });
11301
+ return /* @__PURE__ */ jsx65(CoinListStyleScope, { children: /* @__PURE__ */ jsx65(VerificationOverlayBody, { onClose, children }) });
10992
11302
  }
10993
11303
  function VerificationOverlayBody({
10994
11304
  onClose,
10995
11305
  children
10996
11306
  }) {
10997
- return /* @__PURE__ */ jsx64(
11307
+ return /* @__PURE__ */ jsx65(
10998
11308
  "div",
10999
11309
  {
11000
11310
  role: "dialog",
11001
11311
  "aria-modal": "true",
11002
11312
  "aria-label": "Identity verification",
11003
11313
  className: "clcosdk:fixed clcosdk:inset-0 clcosdk:z-50 clcosdk:flex clcosdk:items-center clcosdk:justify-center clcosdk:bg-overlay clcosdk:p-4",
11004
- 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: [
11005
- /* @__PURE__ */ jsx64(
11314
+ 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: [
11315
+ /* @__PURE__ */ jsx65(
11006
11316
  CloseButton,
11007
11317
  {
11008
11318
  onClick: onClose,
@@ -11017,7 +11327,7 @@ function VerificationOverlayBody({
11017
11327
 
11018
11328
  // src/client/components/requirements/wallet/ConnectWalletModalView.tsx
11019
11329
  import { useId as useId5 } from "react";
11020
- import { jsx as jsx65, jsxs as jsxs46 } from "react/jsx-runtime";
11330
+ import { jsx as jsx66, jsxs as jsxs47 } from "react/jsx-runtime";
11021
11331
  function ConnectWalletModalView({
11022
11332
  state,
11023
11333
  onEvent,
@@ -11027,7 +11337,7 @@ function ConnectWalletModalView({
11027
11337
  if (state.type === "hidden") {
11028
11338
  return null;
11029
11339
  }
11030
- 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(
11340
+ 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(
11031
11341
  "div",
11032
11342
  {
11033
11343
  role: "dialog",
@@ -11038,8 +11348,8 @@ function ConnectWalletModalView({
11038
11348
  className
11039
11349
  ),
11040
11350
  children: [
11041
- /* @__PURE__ */ jsxs46("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
11042
- /* @__PURE__ */ jsx65(
11351
+ /* @__PURE__ */ jsxs47("div", { className: "clcosdk:flex clcosdk:items-start clcosdk:justify-between clcosdk:gap-4", children: [
11352
+ /* @__PURE__ */ jsx66(
11043
11353
  "h3",
11044
11354
  {
11045
11355
  id: titleId,
@@ -11047,9 +11357,9 @@ function ConnectWalletModalView({
11047
11357
  children: "Connect your wallet"
11048
11358
  }
11049
11359
  ),
11050
- /* @__PURE__ */ jsx65(CloseButton, { onClick: () => onEvent({ type: "ON_CLOSE" }) })
11360
+ /* @__PURE__ */ jsx66(CloseButton, { onClick: () => onEvent({ type: "ON_CLOSE" }) })
11051
11361
  ] }),
11052
- /* @__PURE__ */ jsx65(
11362
+ /* @__PURE__ */ jsx66(
11053
11363
  Screen2,
11054
11364
  {
11055
11365
  screen: state.screen,
@@ -11068,9 +11378,9 @@ function Screen2({
11068
11378
  }) {
11069
11379
  switch (screen.type) {
11070
11380
  case "needs-wallet":
11071
- return /* @__PURE__ */ jsxs46("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
11072
- /* @__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." }),
11073
- canRequestConnect && /* @__PURE__ */ jsx65(
11381
+ return /* @__PURE__ */ jsxs47("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
11382
+ /* @__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." }),
11383
+ canRequestConnect && /* @__PURE__ */ jsx66(
11074
11384
  ClButton,
11075
11385
  {
11076
11386
  fullWidth: true,
@@ -11080,23 +11390,23 @@ function Screen2({
11080
11390
  )
11081
11391
  ] });
11082
11392
  case "ready":
11083
- return /* @__PURE__ */ jsxs46("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
11084
- /* @__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." }),
11085
- /* @__PURE__ */ jsxs46("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: [
11086
- /* @__PURE__ */ jsx65(
11393
+ return /* @__PURE__ */ jsxs47("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-6", children: [
11394
+ /* @__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." }),
11395
+ /* @__PURE__ */ jsxs47("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: [
11396
+ /* @__PURE__ */ jsx66(
11087
11397
  "span",
11088
11398
  {
11089
11399
  className: cn(typeClasses.label, "clcosdk:text-text-secondary"),
11090
11400
  children: "Wallet address"
11091
11401
  }
11092
11402
  ),
11093
- /* @__PURE__ */ jsx65("span", { className: cn(typeClasses.body, "clcosdk:text-text-primary"), children: screen.shortAddress })
11403
+ /* @__PURE__ */ jsx66("span", { className: cn(typeClasses.body, "clcosdk:text-text-primary"), children: screen.shortAddress })
11094
11404
  ] }),
11095
11405
  screen.signError && // Live region: the error is inserted async after a failed attempt,
11096
11406
  // so screen readers need it announced rather than silently
11097
11407
  // rendered.
11098
- /* @__PURE__ */ jsx65("div", { role: "alert", children: /* @__PURE__ */ jsx65(AlertBanner, { variant: "error", icon: true, content: screen.signError }) }),
11099
- /* @__PURE__ */ jsx65(
11408
+ /* @__PURE__ */ jsx66("div", { role: "alert", children: /* @__PURE__ */ jsx66(AlertBanner, { variant: "error", icon: true, content: screen.signError }) }),
11409
+ /* @__PURE__ */ jsx66(
11100
11410
  ClButton,
11101
11411
  {
11102
11412
  fullWidth: true,
@@ -11107,7 +11417,7 @@ function Screen2({
11107
11417
  children: "Sign & connect"
11108
11418
  }
11109
11419
  ),
11110
- canRequestConnect && /* @__PURE__ */ jsx65(
11420
+ canRequestConnect && /* @__PURE__ */ jsx66(
11111
11421
  ClButton,
11112
11422
  {
11113
11423
  fullWidth: true,
@@ -11126,10 +11436,10 @@ function Screen2({
11126
11436
  }
11127
11437
 
11128
11438
  // src/client/hooks/requirements/wallet/useConnectWalletModalViewModel.ts
11129
- import { useCallback as useCallback12, useEffect as useEffect26, useMemo as useMemo9 } from "react";
11439
+ import { useCallback as useCallback13, useEffect as useEffect27, useMemo as useMemo9 } from "react";
11130
11440
 
11131
11441
  // src/client/hooks/requirements/data/useConnectWallet.ts
11132
- import { useCallback as useCallback11, useEffect as useEffect25, useRef as useRef16, useState as useState28 } from "react";
11442
+ import { useCallback as useCallback12, useEffect as useEffect26, useRef as useRef16, useState as useState29 } from "react";
11133
11443
 
11134
11444
  // src/client/core/wallets/connect-external-wallet.ts
11135
11445
  var DEFAULT_STATEMENT = "Sign this message to prove you own this wallet. This does not cost gas or move funds.";
@@ -11260,24 +11570,24 @@ function useConnectWallet({
11260
11570
  statement
11261
11571
  }) {
11262
11572
  const { coinlist } = useCoinList();
11263
- const [state, setState] = useState28(
11573
+ const [state, setState] = useState29(
11264
11574
  () => wallet ? { type: "READY", address: wallet.address, sign: IDLE_SIGN2 } : { type: "NEEDS_WALLET" }
11265
11575
  );
11266
11576
  const attempt = useRef16(0);
11267
- useEffect25(() => {
11577
+ useEffect26(() => {
11268
11578
  attempt.current += 1;
11269
11579
  if (!isOpen) return;
11270
11580
  setState(
11271
11581
  wallet ? { type: "READY", address: wallet.address, sign: IDLE_SIGN2 } : { type: "NEEDS_WALLET" }
11272
11582
  );
11273
11583
  }, [isOpen, wallet?.address]);
11274
- useEffect25(
11584
+ useEffect26(
11275
11585
  () => () => {
11276
11586
  attempt.current += 1;
11277
11587
  },
11278
11588
  []
11279
11589
  );
11280
- const onSign = useCallback11(() => {
11590
+ const onSign = useCallback12(() => {
11281
11591
  if (!wallet || state.type !== "READY") return;
11282
11592
  attempt.current += 1;
11283
11593
  const gen = attempt.current;
@@ -11339,7 +11649,7 @@ function useConnectWalletModalViewModel({
11339
11649
  challengeType,
11340
11650
  statement
11341
11651
  });
11342
- useEffect26(() => {
11652
+ useEffect27(() => {
11343
11653
  if (state.type === "CONNECTED") {
11344
11654
  onConnected?.(state.binding);
11345
11655
  onClose();
@@ -11370,7 +11680,7 @@ function useConnectWalletModalViewModel({
11370
11680
  canRequestConnect
11371
11681
  };
11372
11682
  }, [isOpen, state, onRequestConnect]);
11373
- const onEvent = useCallback12(
11683
+ const onEvent = useCallback13(
11374
11684
  (event) => {
11375
11685
  switch (event.type) {
11376
11686
  case "ON_CLOSE":
@@ -11394,13 +11704,13 @@ function useConnectWalletModalViewModel({
11394
11704
  }
11395
11705
 
11396
11706
  // src/client/components/requirements/wallet/ConnectWalletModalContainer.tsx
11397
- import { jsx as jsx66 } from "react/jsx-runtime";
11707
+ import { jsx as jsx67 } from "react/jsx-runtime";
11398
11708
  function ConnectWalletModalContainer({
11399
11709
  className,
11400
11710
  ...options
11401
11711
  }) {
11402
11712
  const { state, onEvent } = useConnectWalletModalViewModel(options);
11403
- return /* @__PURE__ */ jsx66(
11713
+ return /* @__PURE__ */ jsx67(
11404
11714
  ConnectWalletModalView,
11405
11715
  {
11406
11716
  state,
@@ -11411,11 +11721,11 @@ function ConnectWalletModalContainer({
11411
11721
  }
11412
11722
 
11413
11723
  // src/client/hooks/requirements/useRequirementsChecklistViewModel.ts
11414
- import { useCallback as useCallback15, useEffect as useEffect29, useMemo as useMemo10, useRef as useRef17, useState as useState31 } from "react";
11724
+ import { useCallback as useCallback16, useEffect as useEffect30, useMemo as useMemo10, useRef as useRef17, useState as useState32 } from "react";
11415
11725
 
11416
11726
  // src/client/hooks/requirements/data/useOptionAddresses.ts
11417
- import { useCallback as useCallback13, useEffect as useEffect27, useState as useState29 } from "react";
11418
- var LOADING_STATE6 = { type: "LOADING" };
11727
+ import { useCallback as useCallback14, useEffect as useEffect28, useState as useState30 } from "react";
11728
+ var LOADING_STATE7 = { type: "LOADING" };
11419
11729
  var EMPTY_STATE = {
11420
11730
  type: "CONTENT",
11421
11731
  addresses: []
@@ -11424,19 +11734,19 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
11424
11734
  const { coinlist, isReady } = useCoinList();
11425
11735
  const log = useLogger("useOptionAddresses");
11426
11736
  const { data, enabled = true } = options;
11427
- const [addressesState, setAddressesState] = useState29(
11428
- data !== void 0 ? { type: "CONTENT", addresses: data } : LOADING_STATE6
11737
+ const [addressesState, setAddressesState] = useState30(
11738
+ data !== void 0 ? { type: "CONTENT", addresses: data } : LOADING_STATE7
11429
11739
  );
11430
- const [fetchKey, setFetchKey] = useState29(0);
11431
- const refetch = useCallback13(() => setFetchKey((k) => k + 1), []);
11432
- const disconnect = useCallback13(
11740
+ const [fetchKey, setFetchKey] = useState30(0);
11741
+ const refetch = useCallback14(() => setFetchKey((k) => k + 1), []);
11742
+ const disconnect = useCallback14(
11433
11743
  async (addressId) => {
11434
11744
  await coinlist.wallets.remove({ offerId, addressId });
11435
11745
  refetch();
11436
11746
  },
11437
11747
  [coinlist, offerId, refetch]
11438
11748
  );
11439
- useEffect27(() => {
11749
+ useEffect28(() => {
11440
11750
  let isCancelled = false;
11441
11751
  if (!enabled) {
11442
11752
  setAddressesState(
@@ -11448,7 +11758,7 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
11448
11758
  }
11449
11759
  if (!isReady) {
11450
11760
  if (data === void 0) {
11451
- setAddressesState(LOADING_STATE6);
11761
+ setAddressesState(LOADING_STATE7);
11452
11762
  }
11453
11763
  return () => {
11454
11764
  isCancelled = true;
@@ -11465,7 +11775,7 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
11465
11775
  isCancelled = true;
11466
11776
  };
11467
11777
  }
11468
- setAddressesState(LOADING_STATE6);
11778
+ setAddressesState(LOADING_STATE7);
11469
11779
  coinlist.wallets.list({ offerId, offerOptionId }).then((addresses) => {
11470
11780
  if (!isCancelled) {
11471
11781
  log.debug(() => ({
@@ -11492,18 +11802,18 @@ function useOptionAddresses(offerId, offerOptionId, options = {}) {
11492
11802
  }
11493
11803
 
11494
11804
  // src/client/hooks/requirements/data/useRequirements.ts
11495
- import { useCallback as useCallback14, useEffect as useEffect28, useState as useState30 } from "react";
11496
- var LOADING_STATE7 = { type: "LOADING" };
11805
+ import { useCallback as useCallback15, useEffect as useEffect29, useState as useState31 } from "react";
11806
+ var LOADING_STATE8 = { type: "LOADING" };
11497
11807
  function useRequirements(offerId, options = {}) {
11498
11808
  const { coinlist, isReady } = useCoinList();
11499
11809
  const log = useLogger("useRequirements");
11500
11810
  const { data, enabled = true } = options;
11501
- const [requirementsState, setRequirementsState] = useState30(
11502
- data !== void 0 ? { type: "CONTENT", ...data } : LOADING_STATE7
11811
+ const [requirementsState, setRequirementsState] = useState31(
11812
+ data !== void 0 ? { type: "CONTENT", ...data } : LOADING_STATE8
11503
11813
  );
11504
- const [fetchKey, setFetchKey] = useState30(0);
11505
- const refetch = useCallback14(() => setFetchKey((k) => k + 1), []);
11506
- useEffect28(() => {
11814
+ const [fetchKey, setFetchKey] = useState31(0);
11815
+ const refetch = useCallback15(() => setFetchKey((k) => k + 1), []);
11816
+ useEffect29(() => {
11507
11817
  let isCancelled = false;
11508
11818
  if (!enabled) {
11509
11819
  return () => {
@@ -11512,7 +11822,7 @@ function useRequirements(offerId, options = {}) {
11512
11822
  }
11513
11823
  if (!isReady) {
11514
11824
  if (data === void 0) {
11515
- setRequirementsState(LOADING_STATE7);
11825
+ setRequirementsState(LOADING_STATE8);
11516
11826
  }
11517
11827
  return () => {
11518
11828
  isCancelled = true;
@@ -11529,7 +11839,7 @@ function useRequirements(offerId, options = {}) {
11529
11839
  isCancelled = true;
11530
11840
  };
11531
11841
  }
11532
- setRequirementsState(LOADING_STATE7);
11842
+ setRequirementsState(LOADING_STATE8);
11533
11843
  Promise.all([
11534
11844
  coinlist.requirements.forOffer(offerId),
11535
11845
  coinlist.requirements.statuses(offerId)
@@ -11571,7 +11881,7 @@ var RequirementItemUi = {
11571
11881
  fromDomain(req, statusInfo, label, description2, addresses = []) {
11572
11882
  return {
11573
11883
  variant: RequirementVariant.fromType(req.type),
11574
- status: statusInfo ? RequirementStatus.fromStatusValue(statusInfo.status) : "required",
11884
+ status: requirementStatus(req, statusInfo),
11575
11885
  label,
11576
11886
  description: description2,
11577
11887
  multiWallet: req.type === "whitelisted_wallet",
@@ -11579,10 +11889,44 @@ var RequirementItemUi = {
11579
11889
  id: address.id,
11580
11890
  address: address.address,
11581
11891
  shortAddress: shortenAddress(address.address)
11582
- }))
11892
+ })),
11893
+ statusMessages: statusMessagesFor(req.type)
11583
11894
  };
11584
11895
  }
11585
11896
  };
11897
+ var IDENTITY_STATUS_MESSAGES = {
11898
+ pending: "Verification under review. We'll notify you when it's complete.",
11899
+ completed: "Identity verified.",
11900
+ rejected: "We couldn't verify your identity. Contact support for help."
11901
+ };
11902
+ var ACCREDITATION_STATUS_MESSAGES = {
11903
+ pending: "Accreditation under review. We'll notify you when it's complete.",
11904
+ completed: "Accreditation verified.",
11905
+ rejected: "We couldn't verify your accreditation. Contact support for help."
11906
+ };
11907
+ var TAX_DOCUMENTATION_STATUS_MESSAGES = {
11908
+ completed: "Tax documentation completed.",
11909
+ rejected: "We couldn't accept your tax documentation. Contact support for help."
11910
+ };
11911
+ function statusMessagesFor(type) {
11912
+ switch (type) {
11913
+ case "kyc_approved":
11914
+ return IDENTITY_STATUS_MESSAGES;
11915
+ case "accreditation":
11916
+ return ACCREDITATION_STATUS_MESSAGES;
11917
+ case "document":
11918
+ return TAX_DOCUMENTATION_STATUS_MESSAGES;
11919
+ default:
11920
+ return void 0;
11921
+ }
11922
+ }
11923
+ function requirementStatus(req, statusInfo) {
11924
+ if (!statusInfo) return "required";
11925
+ if (req.type === "document" && statusInfo.status === "in_progress") {
11926
+ return "required";
11927
+ }
11928
+ return RequirementStatus.fromStatusValue(statusInfo.status);
11929
+ }
11586
11930
  var RequirementVariant = {
11587
11931
  fromType(type) {
11588
11932
  switch (type) {
@@ -11619,20 +11963,20 @@ var ChecklistStatus = {
11619
11963
 
11620
11964
  // src/client/hooks/requirements/useRequirementsChecklistViewModel.ts
11621
11965
  var DEFAULT_LABELS = {
11622
- kyc_approved: "KYC Verification",
11966
+ kyc_approved: "Identity Verification",
11623
11967
  external_wallet: "External Wallet",
11624
11968
  whitelisted_wallet: "Whitelisted Wallet",
11625
11969
  jurisdiction: "Jurisdiction Check",
11626
11970
  accreditation: "Accreditation",
11627
- document: "Document"
11971
+ document: "Tax Documentation"
11628
11972
  };
11629
11973
  var DEFAULT_DESCRIPTIONS = {
11630
- kyc_approved: "Complete Know Your Customer verification.",
11974
+ kyc_approved: "Complete Know Your Customer (KYC) verification.",
11631
11975
  external_wallet: "Connect an external wallet.",
11632
11976
  whitelisted_wallet: "Connect a whitelisted wallet.",
11633
11977
  jurisdiction: "Confirm your jurisdiction eligibility.",
11634
- accreditation: "Verify your accreditation status.",
11635
- document: "Confirm your Tax Documents."
11978
+ accreditation: "Confirm that you meet accredited investor requirements.",
11979
+ document: "Review and sign the required tax documentation."
11636
11980
  };
11637
11981
  var VERIFICATION_POLL_INTERVAL_MS = 5e3;
11638
11982
  var VERIFICATION_POLL_TIMEOUT_MS = 12e4;
@@ -11663,19 +12007,19 @@ function useRequirementsChecklistViewModel(options) {
11663
12007
  data,
11664
12008
  enabled
11665
12009
  });
11666
- const [expandedId, setExpandedId] = useState31(null);
11667
- const [taxDocumentOpen, setTaxDocumentOpen] = useState31(false);
11668
- const [connectWalletOpen, setConnectWalletOpen] = useState31(false);
11669
- const [verifyingRequirementId, setVerifyingRequirementId] = useState31(null);
12010
+ const [expandedId, setExpandedId] = useState32(null);
12011
+ const [taxDocumentOpen, setTaxDocumentOpen] = useState32(false);
12012
+ const [connectWalletOpen, setConnectWalletOpen] = useState32(false);
12013
+ const [verifyingRequirementId, setVerifyingRequirementId] = useState32(null);
11670
12014
  const isMountedRef = useRef17(true);
11671
- useEffect29(() => {
12015
+ useEffect30(() => {
11672
12016
  isMountedRef.current = true;
11673
12017
  return () => {
11674
12018
  isMountedRef.current = false;
11675
12019
  };
11676
12020
  }, []);
11677
- const [hasWalletRequirement, setHasWalletRequirement] = useState31(false);
11678
- useEffect29(() => {
12021
+ const [hasWalletRequirement, setHasWalletRequirement] = useState32(false);
12022
+ useEffect30(() => {
11679
12023
  if (requirementsState.type === "CONTENT") {
11680
12024
  setHasWalletRequirement(
11681
12025
  (requirementsState.requirements[optionId] ?? []).some(
@@ -11691,14 +12035,14 @@ function useRequirementsChecklistViewModel(options) {
11691
12035
  } = useOptionAddresses(offerId, optionId, {
11692
12036
  enabled: enabled && hasWalletRequirement
11693
12037
  });
11694
- const removeWallet = useCallback15(
12038
+ const removeWallet = useCallback16(
11695
12039
  async (addressId) => {
11696
12040
  await disconnect(OfferOptionAddressId(addressId));
11697
12041
  refetch();
11698
12042
  },
11699
12043
  [disconnect, refetch]
11700
12044
  );
11701
- const awaitVerificationResult = useCallback15(
12045
+ const awaitVerificationResult = useCallback16(
11702
12046
  (requirementId, statusBeforeSubmit) => {
11703
12047
  void (async () => {
11704
12048
  const deadline = Date.now() + VERIFICATION_POLL_TIMEOUT_MS;
@@ -11741,9 +12085,9 @@ function useRequirementsChecklistViewModel(options) {
11741
12085
  const state = useMemo10(() => {
11742
12086
  switch (requirementsState.type) {
11743
12087
  case "LOADING":
11744
- return { type: "loading" };
12088
+ return { type: "loading", title: title2, description: description2 };
11745
12089
  case "ERROR":
11746
- return requirementsState.reason === "not-authenticated" ? { type: "not-authenticated" } : { type: "error" };
12090
+ return { type: "error", title: title2 };
11747
12091
  case "CONTENT": {
11748
12092
  const optionStatuses = [...statusById.values()];
11749
12093
  const checklistStatus = ChecklistStatus.derive(optionStatuses);
@@ -11807,7 +12151,7 @@ function useRequirementsChecklistViewModel(options) {
11807
12151
  identityVerificationOptions,
11808
12152
  removeWallet
11809
12153
  ]);
11810
- const handleRequirementAction = useCallback15(
12154
+ const handleRequirementAction = useCallback16(
11811
12155
  (requirement) => {
11812
12156
  const inlineVerification = statusById.get(requirement.id)?.kycLevel !== void 0 && onRequirementActionOverride === void 0;
11813
12157
  if (inlineVerification) {
@@ -11839,7 +12183,7 @@ function useRequirementsChecklistViewModel(options) {
11839
12183
  coinlist
11840
12184
  ]
11841
12185
  );
11842
- const onEvent = useCallback15(
12186
+ const onEvent = useCallback16(
11843
12187
  (event) => {
11844
12188
  switch (event.type) {
11845
12189
  case "ON_TOGGLE_ITEM":
@@ -11937,11 +12281,10 @@ function toVerificationUi(verifyingRequirementId, statusById, identityVerificati
11937
12281
  }
11938
12282
 
11939
12283
  // src/client/components/requirements/RequirementsChecklistContainer.tsx
11940
- import { Fragment as Fragment10, jsx as jsx67, jsxs as jsxs47 } from "react/jsx-runtime";
12284
+ import { Fragment as Fragment12, jsx as jsx68, jsxs as jsxs48 } from "react/jsx-runtime";
11941
12285
  function RequirementsChecklistContainer({
11942
12286
  loading,
11943
12287
  error,
11944
- unauthenticatedState,
11945
12288
  className,
11946
12289
  enabled = true,
11947
12290
  ...options
@@ -11950,24 +12293,19 @@ function RequirementsChecklistContainer({
11950
12293
  ...options,
11951
12294
  enabled
11952
12295
  });
11953
- return /* @__PURE__ */ jsxs47(Fragment10, { children: [
11954
- /* @__PURE__ */ jsx67(
12296
+ return /* @__PURE__ */ jsxs48(Fragment12, { children: [
12297
+ /* @__PURE__ */ jsx68(
11955
12298
  RequirementsChecklistView,
11956
12299
  {
11957
12300
  state,
11958
12301
  onEvent,
11959
12302
  loading,
11960
12303
  error,
11961
- unauthenticatedState: (
11962
- // The sign-in default lives here, not in the View: it is a connected
11963
- // component, and a View must render from what it is handed.
11964
- unauthenticatedState !== void 0 ? unauthenticatedState : /* @__PURE__ */ jsx67(CoinListSignInCardContainer, {})
11965
- ),
11966
12304
  className
11967
12305
  }
11968
12306
  ),
11969
- state.type === "content" && /* @__PURE__ */ jsxs47(Fragment10, { children: [
11970
- /* @__PURE__ */ jsx67(
12307
+ state.type === "content" && /* @__PURE__ */ jsxs48(Fragment12, { children: [
12308
+ /* @__PURE__ */ jsx68(
11971
12309
  TaxDocumentModalContainer,
11972
12310
  {
11973
12311
  isOpen: state.taxDocumentOpen,
@@ -11975,11 +12313,11 @@ function RequirementsChecklistContainer({
11975
12313
  onSubmitted: () => onEvent({ type: "ON_TAX_DOCUMENT_SUBMITTED" })
11976
12314
  }
11977
12315
  ),
11978
- state.verification && /* @__PURE__ */ jsx67(
12316
+ state.verification && /* @__PURE__ */ jsx68(
11979
12317
  VerificationOverlay,
11980
12318
  {
11981
12319
  onClose: () => onEvent({ type: "ON_CLOSE_VERIFICATION" }),
11982
- children: /* @__PURE__ */ jsx67(
12320
+ children: /* @__PURE__ */ jsx68(
11983
12321
  IdentityVerificationContainer,
11984
12322
  {
11985
12323
  levelName: state.verification.levelName,
@@ -11990,7 +12328,7 @@ function RequirementsChecklistContainer({
11990
12328
  )
11991
12329
  }
11992
12330
  ),
11993
- /* @__PURE__ */ jsx67(
12331
+ /* @__PURE__ */ jsx68(
11994
12332
  ConnectWalletModalContainer,
11995
12333
  {
11996
12334
  isOpen: state.connectWalletOpen,
@@ -12023,7 +12361,7 @@ function pinoClientLogger(options) {
12023
12361
  }
12024
12362
 
12025
12363
  // src/client/hooks/auth/useCompleteOAuth.ts
12026
- import { useEffect as useEffect30, useRef as useRef18 } from "react";
12364
+ import { useEffect as useEffect31, useRef as useRef18 } from "react";
12027
12365
  function useCompleteOAuth(options) {
12028
12366
  const { coinlist } = useCoinList();
12029
12367
  const log = useLogger("useCompleteOAuth");
@@ -12034,7 +12372,7 @@ function useCompleteOAuth(options) {
12034
12372
  onFailureRef.current = options.onFailure;
12035
12373
  onSuccessRef.current = options.onSuccess;
12036
12374
  const hasStartedExchangeRef = useRef18(false);
12037
- useEffect30(() => {
12375
+ useEffect31(() => {
12038
12376
  if (typeof window === "undefined") return;
12039
12377
  const params = new URLSearchParams(window.location.search);
12040
12378
  if (!params.has("code") && !params.has("error")) return;
@@ -12098,16 +12436,16 @@ function useCompleteOAuth(options) {
12098
12436
  }
12099
12437
 
12100
12438
  // src/client/hooks/checkout/coin-list/token-sale/data/useParticipations.ts
12101
- import { useEffect as useEffect31, useState as useState32 } from "react";
12102
- var LOADING_STATE8 = { type: "LOADING" };
12439
+ import { useEffect as useEffect32, useState as useState33 } from "react";
12440
+ var LOADING_STATE9 = { type: "LOADING" };
12103
12441
  function useParticipations(offerId, options = {}) {
12104
12442
  const { coinlist, isReady } = useCoinList();
12105
12443
  const log = useLogger("useParticipations");
12106
12444
  const { data, enabled = true } = options;
12107
- const [participationsState, setParticipationsState] = useState32(
12108
- data !== void 0 ? { type: "CONTENT", participations: data } : LOADING_STATE8
12445
+ const [participationsState, setParticipationsState] = useState33(
12446
+ data !== void 0 ? { type: "CONTENT", participations: data } : LOADING_STATE9
12109
12447
  );
12110
- useEffect31(() => {
12448
+ useEffect32(() => {
12111
12449
  let isCancelled = false;
12112
12450
  if (!enabled) {
12113
12451
  return () => {
@@ -12116,7 +12454,7 @@ function useParticipations(offerId, options = {}) {
12116
12454
  }
12117
12455
  if (!isReady) {
12118
12456
  if (data === void 0) {
12119
- setParticipationsState(LOADING_STATE8);
12457
+ setParticipationsState(LOADING_STATE9);
12120
12458
  }
12121
12459
  return () => {
12122
12460
  isCancelled = true;
@@ -12127,7 +12465,7 @@ function useParticipations(offerId, options = {}) {
12127
12465
  isCancelled = true;
12128
12466
  };
12129
12467
  }
12130
- setParticipationsState(LOADING_STATE8);
12468
+ setParticipationsState(LOADING_STATE9);
12131
12469
  coinlist.tokenSale.list(offerId).then((participations) => {
12132
12470
  if (!isCancelled) {
12133
12471
  log.debug(() => ({
@@ -12154,16 +12492,16 @@ function useParticipations(offerId, options = {}) {
12154
12492
  }
12155
12493
 
12156
12494
  // src/client/hooks/offers/data/useOfferDetails.ts
12157
- import { useEffect as useEffect32, useState as useState33 } from "react";
12158
- var LOADING_STATE9 = { type: "LOADING" };
12495
+ import { useEffect as useEffect33, useState as useState34 } from "react";
12496
+ var LOADING_STATE10 = { type: "LOADING" };
12159
12497
  function useOfferDetails(offerId, options = {}) {
12160
12498
  const { coinlist, isReady } = useCoinList();
12161
12499
  const log = useLogger("useOfferDetails");
12162
12500
  const { data, enabled = true } = options;
12163
- const [offerDetailsState, setOfferDetailsState] = useState33(
12164
- data !== void 0 ? { type: "CONTENT", offerDetail: data } : LOADING_STATE9
12501
+ const [offerDetailsState, setOfferDetailsState] = useState34(
12502
+ data !== void 0 ? { type: "CONTENT", offerDetail: data } : LOADING_STATE10
12165
12503
  );
12166
- useEffect32(() => {
12504
+ useEffect33(() => {
12167
12505
  let isCancelled = false;
12168
12506
  if (!enabled) {
12169
12507
  return () => {
@@ -12172,7 +12510,7 @@ function useOfferDetails(offerId, options = {}) {
12172
12510
  }
12173
12511
  if (!isReady) {
12174
12512
  if (data === void 0) {
12175
- setOfferDetailsState(LOADING_STATE9);
12513
+ setOfferDetailsState(LOADING_STATE10);
12176
12514
  }
12177
12515
  return () => {
12178
12516
  isCancelled = true;
@@ -12183,7 +12521,7 @@ function useOfferDetails(offerId, options = {}) {
12183
12521
  isCancelled = true;
12184
12522
  };
12185
12523
  }
12186
- setOfferDetailsState(LOADING_STATE9);
12524
+ setOfferDetailsState(LOADING_STATE10);
12187
12525
  coinlist.offers.get(offerId).then((offerDetail) => {
12188
12526
  if (!isCancelled) {
12189
12527
  log.debug(() => ({
@@ -12211,15 +12549,23 @@ function useOfferDetails(offerId, options = {}) {
12211
12549
 
12212
12550
  // src/client/hooks/offers/shared/offer-asset-card.types.ts
12213
12551
  var OfferAssetCardUi = {
12214
- fromOffer: (offer) => ({
12552
+ /**
12553
+ * `tokenMetadata` is the registry's entry for the token the offer is about
12554
+ * (`TokenRegistrySnapshot.forOffer`), or `null` when it lists none. The
12555
+ * registry names win over the offer's own where both exist: they are the
12556
+ * token's canonical name, ticker and artwork, where the offer's are
12557
+ * catalogue copy.
12558
+ */
12559
+ fromOffer: (offer, tokenMetadata = null) => ({
12215
12560
  id: offer.id,
12216
- logoUrl: offer.logoUrl
12561
+ ...tokenMetadata ? { name: tokenMetadata.name, symbol: String(tokenMetadata.symbol) } : {},
12562
+ logo: OfferLogoUi.fromOffer(offer, tokenMetadata)
12217
12563
  }),
12218
- fromDetail: (detail) => ({
12564
+ fromDetail: (detail, tokenMetadata = null) => ({
12219
12565
  id: detail.id,
12220
- name: detail.name,
12221
- symbol: detail.asset.code,
12222
- logoUrl: detail.logoUrl
12566
+ name: tokenMetadata?.name ?? detail.name,
12567
+ symbol: tokenMetadata ? String(tokenMetadata.symbol) : detail.asset.code,
12568
+ logo: OfferLogoUi.fromOffer(detail, tokenMetadata)
12223
12569
  })
12224
12570
  };
12225
12571
 
@@ -12261,6 +12607,7 @@ export {
12261
12607
  OAUTH_STATE_KEY,
12262
12608
  OfferAssetCard,
12263
12609
  OfferAssetCardUi,
12610
+ OfferLogoUi,
12264
12611
  OfferSaleCard,
12265
12612
  OfferSaleCardUi,
12266
12613
  OffersAssetGrid,
@@ -12322,6 +12669,7 @@ export {
12322
12669
  quoteOverAsks,
12323
12670
  stablecoinIconUrl,
12324
12671
  submitErc20Approval,
12672
+ tokenLogoSrcSet,
12325
12673
  tokenLogoUrl,
12326
12674
  tokenMetadataOf,
12327
12675
  useCheckoutOfferTokenMetadata,
@@ -12364,6 +12712,7 @@ export {
12364
12712
  useTaxDocument,
12365
12713
  useTaxDocumentModalViewModel,
12366
12714
  useTokenMetadata,
12715
+ useTokenRegistry,
12367
12716
  validateAmount,
12368
12717
  validateSellAmount,
12369
12718
  validateSuperstateAmount