@coinlist-co/react 0.5.0 → 0.6.0

package/dist/client/index.cjs

@@ -23,8 +23,10 @@ __export(client_exports, {
   ChecklistStatus: () => ChecklistStatus,
   CoinListClientInitializationError: () => CoinListClientInitializationError,
   CoinListContext: () => CoinListContext,
+  CoinListContextProvider: () => CoinListContextProvider,
   CoinListProvider: () => CoinListProvider,
   CoinListSignInCard: () => CoinListSignInCard,
+  CoinListStyleScope: () => CoinListStyleScope,
   OAUTH_CODE_VERIFIER_KEY: () => OAUTH_CODE_VERIFIER_KEY,
   OAUTH_STATE_KEY: () => OAUTH_STATE_KEY,
   OfferCard: () => OfferCard,
@@ -44,11 +46,40 @@ __export(client_exports, {
   useRequirements: () => useRequirements
 });
 module.exports = __toCommonJS(client_exports);
-var import_styles = require("./styles.css");
 
 // src/client/CoinListProvider.tsx
 var import_react = require("react");
 
+// src/client/generated/sdk-styles.gen.ts
+var sdkStyles = '/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0}}}@layer theme{:root,:host{--clcosdk-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-spacing:.25rem;--clcosdk-container-md:28rem;--clcosdk-text-xs:.75rem;--clcosdk-text-xs--line-height:calc(1 / .75);--clcosdk-text-sm:.875rem;--clcosdk-text-sm--line-height:calc(1.25 / .875);--clcosdk-text-base:1rem;--clcosdk-text-base--line-height:calc(1.5 / 1);--clcosdk-font-weight-normal:400;--clcosdk-font-weight-medium:500;--clcosdk-font-weight-semibold:600;--clcosdk-radius-md:.375rem;--clcosdk-radius-lg:.5rem;--clcosdk-radius-2xl:1rem;--clcosdk-ease-in-out:cubic-bezier(.4, 0, .2, 1);--clcosdk-animate-spin:spin 1s linear infinite;--clcosdk-color-brand-primary:var(--color-brand-primary)}}@layer base{.clco-sdk-root{--color-brand-primary:#171717;--color-brand-primary-hover:#000;--color-brand-primary-active:#262626;--color-accent:#2b3a67;--color-accent-hover:#243057;--color-accent-active:#1d2647;--color-accent-focus:#c7d2fe;--color-accent-subtle:#eef1f8;--color-text-primary:#171717;--color-text-secondary:#8c8c8c;--color-text-disabled:#d1d1d1;--color-text-inverse:#fff;--color-background:#fff;--color-surface:#fafafa;--color-section:#f3f3f3;--color-border:#e5e5e5;--color-divider:#ececec;--color-overlay:#00000080;--color-positive:#15803d;--color-positive-subtle:#dcfce7;--color-negative:#dc2626;--color-negative-subtle:#fee2e2;--color-success:#2c8c5e;--color-success-subtle:#e6f4ec;--color-success-border:#cfe9db;--color-warning:#e08a1a;--color-warning-subtle:#fff7ed;--color-warning-border:#fdead7;--color-error:#b42318;--color-error-subtle:#feeceb;--color-error-border:#fbd5d2}@media (prefers-color-scheme:dark){.clco-sdk-root:not(:where(.light,.light *)){--color-brand-primary:#f4f4f5;--color-brand-primary-hover:#fff;--color-brand-primary-active:#e4e4e7;--color-accent:#6f82c9;--color-accent-hover:#8799e4;--color-accent-active:#5b6fcf;--color-accent-focus:#6f82c959;--color-accent-subtle:#6f82c91f;--color-text-primary:#f4f4f5;--color-text-secondary:#a1a1aa;--color-text-disabled:#71717a;--color-text-inverse:#171717;--color-background:#0f1115;--color-surface:#161a20;--color-section:#20242c;--color-border:#2a2e35;--color-divider:#323741;--color-overlay:#000000b3;--color-positive:#22c55e;--color-positive-subtle:#22c55e1f;--color-negative:#ef4444;--color-negative-subtle:#ef44441f;--color-success:#34d399;--color-success-subtle:#34d3991f;--color-success-border:#34d39940;--color-warning:#f59e0b;--color-warning-subtle:#f59e0b1f;--color-warning-border:#f59e0b40;--color-error:#f87171;--color-error-subtle:#f871711f;--color-error-border:#f8717140}}:where(.dark,.dark *) .clco-sdk-root{--color-brand-primary:#f4f4f5;--color-brand-primary-hover:#fff;--color-brand-primary-active:#e4e4e7;--color-accent:#6f82c9;--color-accent-hover:#8799e4;--color-accent-active:#5b6fcf;--color-accent-focus:#6f82c959;--color-accent-subtle:#6f82c91f;--color-text-primary:#f4f4f5;--color-text-secondary:#a1a1aa;--color-text-disabled:#71717a;--color-text-inverse:#171717;--color-background:#0f1115;--color-surface:#161a20;--color-section:#20242c;--color-border:#2a2e35;--color-divider:#323741;--color-overlay:#000000b3;--color-positive:#22c55e;--color-positive-subtle:#22c55e1f;--color-negative:#ef4444;--color-negative-subtle:#ef44441f;--color-success:#34d399;--color-success-subtle:#34d3991f;--color-success-border:#34d39940;--color-warning:#f59e0b;--color-warning-subtle:#f59e0b1f;--color-warning-border:#f59e0b40;--color-error:#f87171;--color-error-subtle:#f871711f;--color-error-border:#f8717140}.clco-sdk-root{color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.clco-sdk-root *,.clco-sdk-root :before,.clco-sdk-root :after{box-sizing:border-box}.clco-sdk-root button{appearance:none;cursor:pointer;font:inherit;color:inherit;background:0 0;border:none;padding:0}.clco-sdk-root a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}.clco-sdk-root ul,.clco-sdk-root ol{margin:0;padding:0;list-style:none}.clco-sdk-root img,.clco-sdk-root svg{max-width:100%;display:block}}@layer components;@layer utilities{.clcosdk\\:absolute{position:absolute}.clcosdk\\:relative{position:relative}.clcosdk\\:inset-0{inset:calc(var(--clcosdk-spacing) * 0)}.clcosdk\\:top-4{top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:right-4{right:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:mt-4{margin-top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:mb-6{margin-bottom:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:flex{display:flex}.clcosdk\\:grid{display:grid}.clcosdk\\:inline-flex{display:inline-flex}.clcosdk\\:h-3{height:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:h-4{height:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:h-5{height:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:h-6{height:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:h-9{height:calc(var(--clcosdk-spacing) * 9)}.clcosdk\\:h-11{height:calc(var(--clcosdk-spacing) * 11)}.clcosdk\\:h-12{height:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:h-14{height:calc(var(--clcosdk-spacing) * 14)}.clcosdk\\:h-28{height:calc(var(--clcosdk-spacing) * 28)}.clcosdk\\:h-52{height:calc(var(--clcosdk-spacing) * 52)}.clcosdk\\:h-\\[18px\\]{height:18px}.clcosdk\\:h-auto{height:auto}.clcosdk\\:h-full{height:100%}.clcosdk\\:min-h-0{min-height:calc(var(--clcosdk-spacing) * 0)}.clcosdk\\:min-h-40{min-height:calc(var(--clcosdk-spacing) * 40)}.clcosdk\\:min-h-\\[2\\.4rem\\]{min-height:2.4rem}.clcosdk\\:w-4{width:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:w-5{width:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:w-6{width:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:w-12{width:calc(var(--clcosdk-spacing) * 12)}.clcosdk\\:w-16{width:calc(var(--clcosdk-spacing) * 16)}.clcosdk\\:w-28{width:calc(var(--clcosdk-spacing) * 28)}.clcosdk\\:w-80{width:calc(var(--clcosdk-spacing) * 80)}.clcosdk\\:w-96{width:calc(var(--clcosdk-spacing) * 96)}.clcosdk\\:w-\\[16px\\]{width:16px}.clcosdk\\:w-\\[448px\\]{width:448px}.clcosdk\\:w-auto{width:auto}.clcosdk\\:w-full{width:100%}.clcosdk\\:max-w-\\[22rem\\]{max-width:22rem}.clcosdk\\:max-w-\\[28rem\\]{max-width:28rem}.clcosdk\\:max-w-\\[30rem\\]{max-width:30rem}.clcosdk\\:max-w-\\[1200px\\]{max-width:1200px}.clcosdk\\:max-w-md{max-width:var(--clcosdk-container-md)}.clcosdk\\:shrink-0{flex-shrink:0}.clcosdk\\:rotate-90{rotate:90deg}.clcosdk\\:animate-spin{animation:var(--clcosdk-animate-spin)}.clcosdk\\:cursor-pointer{cursor:pointer}.clcosdk\\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.clcosdk\\:grid-rows-\\[0fr\\]{grid-template-rows:0fr}.clcosdk\\:grid-rows-\\[1fr\\]{grid-template-rows:1fr}.clcosdk\\:flex-col{flex-direction:column}.clcosdk\\:flex-wrap{flex-wrap:wrap}.clcosdk\\:items-center{align-items:center}.clcosdk\\:items-start{align-items:flex-start}.clcosdk\\:justify-between{justify-content:space-between}.clcosdk\\:justify-center{justify-content:center}.clcosdk\\:gap-1{gap:calc(var(--clcosdk-spacing) * 1)}.clcosdk\\:gap-2{gap:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:gap-3{gap:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:gap-4{gap:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:gap-5{gap:calc(var(--clcosdk-spacing) * 5)}.clcosdk\\:gap-6{gap:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:gap-8{gap:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:gap-\\[5px\\]{gap:5px}:where(.clcosdk\\:space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--clcosdk-spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--clcosdk-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.clcosdk\\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--clcosdk-spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--clcosdk-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.clcosdk\\:divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.clcosdk\\:divide-border>:not(:last-child)){border-color:var(--color-border)}:where(.clcosdk\\:divide-divider>:not(:last-child)){border-color:var(--color-divider)}.clcosdk\\:overflow-hidden{overflow:hidden}.clcosdk\\:rounded-2xl{border-radius:var(--clcosdk-radius-2xl)}.clcosdk\\:rounded-btn{border-radius:12px}.clcosdk\\:rounded-card{border-radius:24px}.clcosdk\\:rounded-full{border-radius:3.40282e38px}.clcosdk\\:rounded-lg{border-radius:var(--clcosdk-radius-lg)}.clcosdk\\:rounded-md{border-radius:var(--clcosdk-radius-md)}.clcosdk\\:border{border-style:var(--tw-border-style);border-width:1px}.clcosdk\\:border-2{border-style:var(--tw-border-style);border-width:2px}.clcosdk\\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.clcosdk\\:border-dashed{--tw-border-style:dashed;border-style:dashed}.clcosdk\\:border-accent\\/50{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.clcosdk\\:border-accent\\/50{border-color:color-mix(in oklab, var(--color-accent) 50%, transparent)}}.clcosdk\\:border-accent\\/60{border-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.clcosdk\\:border-accent\\/60{border-color:color-mix(in oklab, var(--color-accent) 60%, transparent)}}.clcosdk\\:border-amber-500{border-color:var(--clcosdk-color-amber-500)}.clcosdk\\:border-border,.clcosdk\\:border-border\\/60{border-color:var(--color-border)}@supports (color:color-mix(in lab, red, red)){.clcosdk\\:border-border\\/60{border-color:color-mix(in oklab, var(--color-border) 60%, transparent)}}.clcosdk\\:border-current{border-color:currentColor}.clcosdk\\:border-divider{border-color:var(--color-divider)}.clcosdk\\:border-error-border{border-color:var(--color-error-border)}.clcosdk\\:border-success-border{border-color:var(--color-success-border)}.clcosdk\\:border-warning-border{border-color:var(--color-warning-border)}.clcosdk\\:border-t-transparent{border-top-color:#0000}.clcosdk\\:bg-accent\\/10{background-color:var(--color-accent)}@supports (color:color-mix(in lab, red, red)){.clcosdk\\:bg-accent\\/10{background-color:color-mix(in oklab, var(--color-accent) 10%, transparent)}}.clcosdk\\:bg-background{background-color:var(--color-background)}.clcosdk\\:bg-brand-primary{background-color:var(--color-brand-primary)}.clcosdk\\:bg-error-subtle{background-color:var(--color-error-subtle)}.clcosdk\\:bg-section{background-color:var(--color-section)}.clcosdk\\:bg-success-subtle{background-color:var(--color-success-subtle)}.clcosdk\\:bg-surface{background-color:var(--color-surface)}.clcosdk\\:bg-transparent{background-color:#0000}.clcosdk\\:bg-warning-subtle{background-color:var(--color-warning-subtle)}.clcosdk\\:bg-gradient-to-b{--tw-gradient-position:to bottom in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.clcosdk\\:bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.clcosdk\\:from-surface{--tw-gradient-from:var(--color-surface);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.clcosdk\\:from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.clcosdk\\:via-section{--tw-gradient-via:var(--color-section);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.clcosdk\\:via-transparent{--tw-gradient-via:transparent;--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.clcosdk\\:to-background{--tw-gradient-to:var(--color-background);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.clcosdk\\:to-overlay\\/35{--tw-gradient-to:var(--color-overlay)}@supports (color:color-mix(in lab, red, red)){.clcosdk\\:to-overlay\\/35{--tw-gradient-to:color-mix(in oklab, var(--color-overlay) 35%, transparent)}}.clcosdk\\:to-overlay\\/35{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.clcosdk\\:object-cover{object-fit:cover}.clcosdk\\:p-0{padding:calc(var(--clcosdk-spacing) * 0)}.clcosdk\\:p-1\\.5{padding:calc(var(--clcosdk-spacing) * 1.5)}.clcosdk\\:p-3{padding:calc(var(--clcosdk-spacing) * 3)}.clcosdk\\:p-6{padding:calc(var(--clcosdk-spacing) * 6)}.clcosdk\\:p-8{padding:calc(var(--clcosdk-spacing) * 8)}.clcosdk\\:px-2{padding-inline:calc(var(--clcosdk-spacing) * 2)}.clcosdk\\:px-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\\:pt-4{padding-top:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:pb-4{padding-bottom:calc(var(--clcosdk-spacing) * 4)}.clcosdk\\:text-center{text-align:center}.clcosdk\\:text-left{text-align:left}.clcosdk\\:text-base{font-size:var(--clcosdk-text-base);line-height:var(--tw-leading,var(--clcosdk-text-base--line-height))}.clcosdk\\:text-sm{font-size:var(--clcosdk-text-sm);line-height:var(--tw-leading,var(--clcosdk-text-sm--line-height))}.clcosdk\\:text-xs{font-size:var(--clcosdk-text-xs);line-height:var(--tw-leading,var(--clcosdk-text-xs--line-height))}.clcosdk\\:text-\\[11px\\]{font-size:11px}.clcosdk\\:text-\\[12px\\]{font-size:12px}.clcosdk\\:text-\\[14px\\]{font-size:14px}.clcosdk\\:text-\\[16px\\]{font-size:16px}.clcosdk\\:text-\\[18px\\]{font-size:18px}.clcosdk\\:text-\\[22px\\]{font-size:22px}.clcosdk\\:text-\\[28px\\]{font-size:28px}.clcosdk\\:text-\\[36px\\]{font-size:36px}.clcosdk\\:text-\\[48px\\]{font-size:48px}.clcosdk\\:text-\\[64px\\]{font-size:64px}.clcosdk\\:leading-\\[110\\%\\]{--tw-leading:110%;line-height:110%}.clcosdk\\:leading-\\[120\\%\\]{--tw-leading:120%;line-height:120%}.clcosdk\\:leading-\\[125\\%\\]{--tw-leading:125%;line-height:125%}.clcosdk\\:leading-\\[130\\%\\]{--tw-leading:130%;line-height:130%}.clcosdk\\:leading-\\[135\\%\\]{--tw-leading:135%;line-height:135%}.clcosdk\\:leading-\\[140\\%\\]{--tw-leading:140%;line-height:140%}.clcosdk\\:leading-\\[150\\%\\]{--tw-leading:150%;line-height:150%}.clcosdk\\:font-medium{--tw-font-weight:var(--clcosdk-font-weight-medium);font-weight:var(--clcosdk-font-weight-medium)}.clcosdk\\:font-normal{--tw-font-weight:var(--clcosdk-font-weight-normal);font-weight:var(--clcosdk-font-weight-normal)}.clcosdk\\:font-semibold{--tw-font-weight:var(--clcosdk-font-weight-semibold);font-weight:var(--clcosdk-font-weight-semibold)}.clcosdk\\:tracking-\\[0\\.12px\\]{--tw-tracking:.12px;letter-spacing:.12px}.clcosdk\\:tracking-\\[0\\.28px\\]{--tw-tracking:.28px;letter-spacing:.28px}.clcosdk\\:whitespace-nowrap{white-space:nowrap}.clcosdk\\:text-error{color:var(--color-error)}.clcosdk\\:text-success{color:var(--color-success)}.clcosdk\\:text-text-inverse{color:var(--color-text-inverse)}.clcosdk\\:text-text-primary{color:var(--color-text-primary)}.clcosdk\\:text-text-secondary{color:var(--color-text-secondary)}.clcosdk\\:text-warning{color:var(--color-warning)}.clcosdk\\:capitalize{text-transform:capitalize}.clcosdk\\:underline{text-decoration-line:underline}.clcosdk\\:underline-offset-2{text-underline-offset:2px}.clcosdk\\:underline-offset-4{text-underline-offset:4px}.clcosdk\\:opacity-60{opacity:.6}.clcosdk\\:shadow-\\[0_0_0_3px_rgba\\(59\\,130\\,246\\,0\\.2\\)\\]{--tw-shadow:0 0 0 3px var(--tw-shadow-color,#3b82f633);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-\\[0_0_0_3px_rgba\\(59\\,130\\,246\\,0\\.18\\)\\]{--tw-shadow:0 0 0 3px var(--tw-shadow-color,#3b82f62e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-\\[0_0_0_3px_rgba\\(59\\,130\\,246\\,0\\.25\\)\\]{--tw-shadow:0 0 0 3px var(--tw-shadow-color,#3b82f640);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-\\[0_10px_24px_rgba\\(0\\,0\\,0\\,0\\.18\\)\\]{--tw-shadow:0 10px 24px var(--tw-shadow-color,#0000002e);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-\\[0_10px_24px_rgba\\(0\\,0\\,0\\,0\\.25\\)\\]{--tw-shadow:0 10px 24px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:shadow-card{--tw-shadow:0px 4px 6px -2px var(--tw-shadow-color,#0000000d), 0px 12px 24px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:transition-\\[grid-template-rows\\]{transition-property:grid-template-rows;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.clcosdk\\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.clcosdk\\:transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.clcosdk\\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.clcosdk\\:duration-200{--tw-duration:.2s;transition-duration:.2s}.clcosdk\\:duration-300{--tw-duration:.3s;transition-duration:.3s}.clcosdk\\:ease-in-out{--tw-ease:var(--clcosdk-ease-in-out);transition-timing-function:var(--clcosdk-ease-in-out)}@media (hover:hover){.clcosdk\\:hover\\:-translate-y-0\\.5:hover{--tw-translate-y:calc(var(--clcosdk-spacing) * -.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.clcosdk\\:hover\\:border-divider:hover{border-color:var(--color-divider)}.clcosdk\\:hover\\:bg-\\[\\#fcdcd8\\]:hover{background-color:#fcdcd8}.clcosdk\\:hover\\:bg-border:hover{background-color:var(--color-border)}.clcosdk\\:hover\\:bg-brand-primary:hover{background-color:var(--color-brand-primary)}.clcosdk\\:hover\\:bg-brand-primary-hover:hover{background-color:var(--color-brand-primary-hover)}.clcosdk\\:hover\\:bg-section:hover{background-color:var(--color-section)}.clcosdk\\:hover\\:bg-surface:hover{background-color:var(--color-surface)}.clcosdk\\:hover\\:text-\\[\\#8b1a13\\]:hover{color:#8b1a13}.clcosdk\\:hover\\:text-text-primary:hover{color:var(--color-text-primary)}.clcosdk\\:hover\\:underline:hover{text-decoration-line:underline}.clcosdk\\:hover\\:shadow-\\[0px_14px_32px_-10px_rgba\\(0\\,0\\,0\\,0\\.35\\)\\]:hover{--tw-shadow:0px 14px 32px -10px var(--tw-shadow-color,#00000059);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.clcosdk\\:focus-visible\\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.clcosdk\\:focus-visible\\:ring-accent-focus:focus-visible{--tw-ring-color:var(--color-accent-focus)}.clcosdk\\:focus-visible\\:ring-gray-400:focus-visible{--tw-ring-color:var(--clcosdk-color-gray-400)}.clcosdk\\:focus-visible\\:ring-gray-500:focus-visible{--tw-ring-color:var(--clcosdk-color-gray-500)}.clcosdk\\:focus-visible\\:ring-red-400:focus-visible{--tw-ring-color:var(--clcosdk-color-red-400)}.clcosdk\\:focus-visible\\:ring-red-500:focus-visible{--tw-ring-color:var(--clcosdk-color-red-500)}.clcosdk\\:focus-visible\\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.clcosdk\\:focus-visible\\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.clcosdk\\:active\\:bg-\\[\\#d9d9d9\\]:active{background-color:#d9d9d9}.clcosdk\\:active\\:bg-\\[\\#f9c9c4\\]:active{background-color:#f9c9c4}.clcosdk\\:active\\:bg-border:active{background-color:var(--color-border)}.clcosdk\\:active\\:bg-brand-primary-active:active{background-color:var(--color-brand-primary-active)}.clcosdk\\:active\\:text-\\[\\#6d1510\\]:active{color:#6d1510}.clcosdk\\:disabled\\:pointer-events-none:disabled{pointer-events:none}.clcosdk\\:disabled\\:opacity-40:disabled{opacity:.4}@media (prefers-color-scheme:dark){@media (hover:hover){.clcosdk\\:dark\\:hover\\:bg-\\[rgba\\(248\\,113\\,113\\,0\\.20\\)\\]:not(:where(.light,.light *)):hover{background-color:#f8717133}}}@media (hover:hover){.clcosdk\\:dark\\:hover\\:bg-\\[rgba\\(248\\,113\\,113\\,0\\.20\\)\\]:where(.dark,.dark *):hover{background-color:#f8717133}}@media (prefers-color-scheme:dark){@media (hover:hover){.clcosdk\\:dark\\:hover\\:text-\\[\\#fca5a5\\]:not(:where(.light,.light *)):hover{color:#fca5a5}}}@media (hover:hover){.clcosdk\\:dark\\:hover\\:text-\\[\\#fca5a5\\]:where(.dark,.dark *):hover{color:#fca5a5}}@media (prefers-color-scheme:dark){.clcosdk\\:dark\\:active\\:bg-\\[rgba\\(248\\,113\\,113\\,0\\.30\\)\\]:not(:where(.light,.light *)):active{background-color:#f871714d}}.clcosdk\\:dark\\:active\\:bg-\\[rgba\\(248\\,113\\,113\\,0\\.30\\)\\]:where(.dark,.dark *):active{background-color:#f871714d}@media (prefers-color-scheme:dark){.clcosdk\\:dark\\:active\\:bg-divider:not(:where(.light,.light *)):active{background-color:var(--color-divider)}}.clcosdk\\:dark\\:active\\:bg-divider:where(.dark,.dark *):active{background-color:var(--color-divider)}@media (prefers-color-scheme:dark){.clcosdk\\:dark\\:active\\:text-\\[\\#f87171\\]:not(:where(.light,.light *)):active{color:#f87171}}.clcosdk\\:dark\\:active\\:text-\\[\\#f87171\\]:where(.dark,.dark *):active{color:#f87171}.clcosdk\\:\\[\\&_circle\\]\\:fill-error-subtle circle{fill:var(--color-error-subtle)}.clcosdk\\:\\[\\&_circle\\]\\:fill-success-subtle circle{fill:var(--color-success-subtle)}.clcosdk\\:\\[\\&_circle\\]\\:fill-warning-subtle circle{fill:var(--color-warning-subtle)}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@keyframes spin{to{transform:rotate(360deg)}}';
+
+// src/client/CoinListStyleScope.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function CoinListStyleScope({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "link",
+      {
+        rel: "preconnect",
+        href: "https://fonts.gstatic.com",
+        crossOrigin: "anonymous"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "link",
+      {
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "clco-sdk-root", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: sdkStyles } }),
+      children
+    ] })
+  ] });
+}
+
 // src/shared/utils.ts
 async function sha256(data) {
   const bytes = typeof data === "string" ? new TextEncoder().encode(data) : data;
@@ -788,6 +819,29 @@ async function fetchRequirementStatuses(api, offerId) {
   return RequirementStatusInfo.fromStatusesDto(response);
 }
 
+// src/shared/types/oauth.ts
+var AuthorizationCode = (value) => value;
+var CodeVerifier = (value) => value;
+var CodeChallenge = (value) => value;
+var PKCEState = (value) => value;
+
+// src/shared/pkce.ts
+async function generatePKCEParams(config) {
+  const state = generateSecureRandomBase64Url(32);
+  const codeVerifier = generateSecureRandomBase64Url(32);
+  const codeChallengeRaw = await sha256(codeVerifier);
+  const codeChallenge = arrayBufferToBase64Url(codeChallengeRaw, false);
+  return {
+    clientId: config.clientId,
+    responseType: "code",
+    redirectUri: config.redirectUri,
+    codeChallenge: CodeChallenge(codeChallenge),
+    codeChallengeMethod: "S256",
+    state: PKCEState(state),
+    codeVerifier: CodeVerifier(codeVerifier)
+  };
+}
+
 // src/shared/types/errors.ts
 var NotAuthenticatedError = class extends Error {
   constructor(message = "The user is not authenticated. Go through the OAuth flow first!") {
@@ -796,10 +850,6 @@ var NotAuthenticatedError = class extends Error {
   }
 };
 
-// src/shared/types/oauth.ts
-var AuthorizationCode = (value) => value;
-var CodeVerifier = (value) => value;
-
 // src/client/core/coinlist-client.ts
 var OAUTH_STATE_KEY = "coinlist.oauth_state";
 var OAUTH_CODE_VERIFIER_KEY = "coinlist.oauth_code_verifier";
@@ -838,19 +888,16 @@ var CoinListClientImpl = class {
     return this._accessToken !== null ? "logged-in" : "logged-out";
   }
   async startOAuth() {
-    const state = generateSecureRandomBase64Url(32);
-    const codeVerifier = generateSecureRandomBase64Url(32);
-    const codeChallengeRaw = await sha256(codeVerifier);
-    const codeChallenge = arrayBufferToBase64Url(codeChallengeRaw, false);
-    sessionStorage.setItem(OAUTH_STATE_KEY, state);
-    sessionStorage.setItem(OAUTH_CODE_VERIFIER_KEY, codeVerifier);
+    const pkceParams = await generatePKCEParams(this._config);
+    sessionStorage.setItem(OAUTH_STATE_KEY, pkceParams.state);
+    sessionStorage.setItem(OAUTH_CODE_VERIFIER_KEY, pkceParams.codeVerifier);
     const params = new URLSearchParams({
-      client_id: this._config.clientId,
-      response_type: "code",
-      redirect_uri: this._config.redirectUri,
-      code_challenge: codeChallenge,
-      code_challenge_method: "S256",
-      state
+      client_id: pkceParams.clientId,
+      response_type: pkceParams.responseType,
+      redirect_uri: pkceParams.redirectUri,
+      code_challenge: pkceParams.codeChallenge,
+      code_challenge_method: pkceParams.codeChallengeMethod,
+      state: pkceParams.state
     });
     const baseUrl = this._config.coinlistBaseUrl ?? COINLIST_BASE_URL;
     const url = `${baseUrl}${OAUTH_PAGE_PATH}?${params.toString()}`;
@@ -974,9 +1021,12 @@ function createCoinListClient(config) {
 }
 
 // src/client/CoinListProvider.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var CoinListContext = (0, import_react.createContext)(null);
-function CoinListProvider({ config, children }) {
+function CoinListContextProvider({
+  config,
+  children
+}) {
   const [isReady, setIsReady] = (0, import_react.useState)(false);
   const coinlist = (0, import_react.useMemo)(() => createCoinListClient(config), [config]);
   (0, import_react.useEffect)(() => {
@@ -999,7 +1049,10 @@ function CoinListProvider({ config, children }) {
     };
   }, [coinlist]);
   const value = (0, import_react.useMemo)(() => ({ coinlist, isReady }), [coinlist, isReady]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CoinListContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CoinListContext.Provider, { value, children });
+}
+function CoinListProvider({ config, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CoinListContextProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CoinListStyleScope, { children }) });
 }
 
 // src/client/components/design-system/AlertBanner.tsx
@@ -1007,17 +1060,17 @@ var import_lucide_react = require("lucide-react");
 
 // src/client/components/design-system/tokens/typography.ts
 var typeClasses = {
-  hero: "text-[64px] leading-[110%] font-semibold",
-  display: "text-[48px] leading-[110%] font-semibold",
-  h1: "text-[36px] leading-[120%] font-semibold",
-  h2: "text-[28px] leading-[125%] font-semibold",
-  h3: "text-[22px] leading-[130%] font-semibold",
-  h4: "text-[18px] leading-[135%] font-medium",
-  body: "text-[16px] leading-[150%] font-normal",
-  subhead: "text-[14px] leading-[150%] font-normal",
-  caption: "text-[12px] leading-[140%] font-normal",
-  label: "text-[14px] leading-[140%] font-medium",
-  data: "text-[14px] leading-[140%] font-normal"
+  hero: "clcosdk:text-[64px] clcosdk:leading-[110%] clcosdk:font-semibold",
+  display: "clcosdk:text-[48px] clcosdk:leading-[110%] clcosdk:font-semibold",
+  h1: "clcosdk:text-[36px] clcosdk:leading-[120%] clcosdk:font-semibold",
+  h2: "clcosdk:text-[28px] clcosdk:leading-[125%] clcosdk:font-semibold",
+  h3: "clcosdk:text-[22px] clcosdk:leading-[130%] clcosdk:font-semibold",
+  h4: "clcosdk:text-[18px] clcosdk:leading-[135%] clcosdk:font-medium",
+  body: "clcosdk:text-[16px] clcosdk:leading-[150%] clcosdk:font-normal",
+  subhead: "clcosdk:text-[14px] clcosdk:leading-[150%] clcosdk:font-normal",
+  caption: "clcosdk:text-[12px] clcosdk:leading-[140%] clcosdk:font-normal",
+  label: "clcosdk:text-[14px] clcosdk:leading-[140%] clcosdk:font-medium",
+  data: "clcosdk:text-[14px] clcosdk:leading-[140%] clcosdk:font-normal"
 };
 
 // src/client/components/design-system/utils.ts
@@ -1027,26 +1080,26 @@ function cn(...inputs) {
 }
 
 // src/client/components/design-system/AlertBanner.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var variantConfig = {
   info: {
-    container: "bg-surface border-border",
-    text: "text-text-secondary",
+    container: "clcosdk:bg-surface clcosdk:border-border",
+    text: "clcosdk:text-text-secondary",
     Icon: import_lucide_react.Info
   },
   success: {
-    container: "bg-success-subtle border-success-border",
-    text: "text-success",
+    container: "clcosdk:bg-success-subtle clcosdk:border-success-border",
+    text: "clcosdk:text-success",
     Icon: import_lucide_react.CircleCheck
   },
   warning: {
-    container: "bg-warning-subtle border-warning-border",
-    text: "text-warning",
+    container: "clcosdk:bg-warning-subtle clcosdk:border-warning-border",
+    text: "clcosdk:text-warning",
     Icon: import_lucide_react.Info
   },
   error: {
-    container: "bg-error-subtle border-error-border",
-    text: "text-error",
+    container: "clcosdk:bg-error-subtle clcosdk:border-error-border",
+    text: "clcosdk:text-error",
     Icon: import_lucide_react.Info
   }
 };
@@ -1057,18 +1110,24 @@ function AlertBanner({
   className
 }) {
   const { container, text, Icon } = variantConfig[variant];
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: cn(
-        "flex items-center rounded-btn border p-3",
-        icon && "gap-2",
+        "clcosdk:flex clcosdk:items-center clcosdk:rounded-btn clcosdk:border clcosdk:p-3",
+        icon && "clcosdk:gap-2",
         container,
         className
       ),
       children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon, { className: cn("h-4 w-4 shrink-0", text), "aria-hidden": "true" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: cn(typeClasses.subhead, text), children: content })
+        icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          Icon,
+          {
+            className: cn("clcosdk:h-4 clcosdk:w-4 clcosdk:shrink-0", text),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cn(typeClasses.subhead, text), children: content })
       ]
     }
   );
@@ -1076,31 +1135,31 @@ function AlertBanner({
 
 // src/client/components/design-system/CloseButton.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function CloseButton({
   onClick,
   "aria-label": ariaLabel = "Close",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "button",
     {
       type: "button",
       onClick,
       "aria-label": ariaLabel,
       className: cn(
-        "cursor-pointer rounded-full p-1.5 text-text-secondary transition-colors hover:bg-surface hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2",
+        "clcosdk:cursor-pointer clcosdk:rounded-full clcosdk:p-1.5 clcosdk:text-text-secondary clcosdk:transition-colors clcosdk:hover:bg-surface clcosdk:hover:text-text-primary clcosdk:focus-visible:outline-none clcosdk:focus-visible:ring-2 clcosdk:focus-visible:ring-gray-400 clcosdk:focus-visible:ring-offset-2",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.X, { className: "h-5 w-5" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { className: "clcosdk:h-5 clcosdk:w-5" })
     }
   );
 }
 
 // src/client/components/design-system/logos/CoinListWordmark.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function CoinListWordmark(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "svg",
     {
       width: "638",
@@ -1111,35 +1170,35 @@ function CoinListWordmark(props) {
       "aria-hidden": "true",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "path",
           {
             d: "M68.7724 123.966C74.8226 124.172 80.7696 123.519 86.5104 121.799C97.4076 118.531 106.551 112.58 113.942 103.947C113.942 103.947 113.942 103.947 113.908 103.912C111.879 102.193 109.851 100.507 107.857 98.8218L105.829 97.1363C105.451 96.8268 105.107 96.5172 104.729 96.2076C103.939 95.5197 103.148 94.8662 102.323 94.2126C95.3107 98.8562 87.6104 101.539 79.1196 101.883C74.8569 102.055 70.6287 101.642 66.5036 100.507C59.5252 98.6154 53.2688 95.1757 48.2499 89.7755C39.1059 79.938 35.8745 68.1743 38.2465 55.0348C39.7246 46.9172 43.4373 40.0723 49.1093 34.5C47.9061 34.7408 46.703 35.016 45.5342 35.3943C36.5277 38.2148 29.6181 43.6839 24.6336 51.6639C20.6803 58.0273 18.5834 64.9411 18.3428 72.4739C18.2053 76.7047 18.4803 80.7979 19.4428 84.7879C22.5023 97.2395 29.3087 107.043 39.6903 114.335H39.7934V114.403C40.1372 114.644 40.4809 114.919 40.8247 115.16C49.2812 120.801 58.5971 123.691 68.7724 124.035V123.966Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "path",
           {
             d: "M72.2101 89.052C68.1881 90.8406 64.0286 91.8725 59.6973 92.2165C64.9912 95.209 70.8007 96.688 77.1259 96.8256C79.1885 96.86 81.251 96.6536 83.4167 96.3097C88.745 95.4841 93.6951 93.5579 98.3015 90.7374C93.9358 87.057 89.6044 83.4109 85.2386 79.7305C81.526 83.6861 77.1946 86.8506 72.2101 89.052Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "path",
           {
             d: "M66.9848 0.241609C66.4348 0.276006 65.8848 0.344799 65.3691 0.413592C70.663 1.4111 75.7851 3.13093 80.6321 5.71068C90.0511 10.7326 97.3732 17.9215 102.289 27.4494L104.936 25.1448C107.652 22.7714 110.368 20.3981 113.084 18.0247C106.655 11.1797 99.092 6.15784 90.223 3.06214C84.3103 0.998336 78.2601 -0.0335643 72.0381 0.000832319C70.388 0.000832319 68.7036 0.138419 66.9848 0.241609Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "path",
           {
             d: "M25.4242 107.871C17.4833 97.9988 13.1519 86.7167 13.2207 73.818C13.2207 67.317 14.5614 61.0568 17.1396 55.1062C20.9553 46.2662 26.9711 39.1805 35.4276 34.2962C43.3685 29.687 51.9968 27.8984 61.1752 29.2743C70.5943 30.7189 78.3976 35.2249 84.6541 42.2762C84.6541 42.2762 84.8603 42.5514 84.9634 42.6546C85.8916 41.8291 86.8541 41.0035 87.7823 40.178L88.9167 39.1805C89.8792 38.355 90.8417 37.4951 91.8043 36.6696C94.0043 34.7434 96.17 32.8515 98.3357 30.9253C94.1075 22.223 87.7479 15.55 79.3258 10.8377C69.3911 5.26541 58.7002 3.54557 47.3904 5.02463C41.7528 5.78136 36.3557 7.50119 31.1993 10.0465C13.702 18.7145 1.08597 36.532 0.0546833 58.4771C-0.117196 62.0887 0.123436 65.7348 0.673452 69.3464C2.04849 78.3239 5.34859 86.4759 10.6425 93.8368C14.7676 99.5123 19.6834 104.19 25.3898 107.871H25.4242Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "path",
           {
             fillRule: "evenodd",
@@ -1154,18 +1213,18 @@ function CoinListWordmark(props) {
 }
 
 // src/client/components/design-system/PoweredByCoinList.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function PoweredByCoinList({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: cn(
-        "flex items-center justify-center gap-[5px] text-text-secondary",
+        "clcosdk:flex clcosdk:items-center clcosdk:justify-center clcosdk:gap-[5px] clcosdk:text-text-secondary",
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: cn(typeClasses.caption, "tracking-[0.12px]"), children: "Powered by" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CoinListWordmark, { className: "h-3 w-auto" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn(typeClasses.caption, "clcosdk:tracking-[0.12px]"), children: "Powered by" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CoinListWordmark, { className: "clcosdk:h-3 clcosdk:w-auto" })
       ]
     }
   );
@@ -1174,48 +1233,48 @@ function PoweredByCoinList({ className }) {
 // src/client/components/design-system/ClButton.tsx
 var import_class_variance_authority = require("class-variance-authority");
 var import_react2 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-3 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40 cursor-pointer",
+  "clcosdk:inline-flex clcosdk:items-center clcosdk:justify-center clcosdk:gap-3 clcosdk:whitespace-nowrap clcosdk:transition-colors clcosdk:focus-visible:outline-none clcosdk:focus-visible:ring-2 clcosdk:focus-visible:ring-offset-2 clcosdk:disabled:pointer-events-none clcosdk:disabled:opacity-40 clcosdk:cursor-pointer",
   {
     variants: {
       variant: {
         // Primary — tokens auto-switch: dark bg (#171717) → light bg (#f4f4f5) in dark mode
-        primary: "bg-brand-primary text-text-inverse font-semibold hover:bg-brand-primary-hover active:bg-brand-primary-active focus-visible:ring-gray-500",
+        primary: "clcosdk:bg-brand-primary clcosdk:text-text-inverse clcosdk:font-semibold clcosdk:hover:bg-brand-primary-hover clcosdk:active:bg-brand-primary-active clcosdk:focus-visible:ring-gray-500",
         // Secondary — bg-section, border-border, text-text-primary all auto-switch
         // hover maps to border token value; active has no token so uses dark: override
-        secondary: "bg-section border border-border text-text-primary font-medium hover:bg-border active:bg-[#d9d9d9] dark:active:bg-divider focus-visible:ring-gray-400",
+        secondary: "clcosdk:bg-section clcosdk:border clcosdk:border-border clcosdk:text-text-primary clcosdk:font-medium clcosdk:hover:bg-border clcosdk:active:bg-[#d9d9d9] clcosdk:dark:active:bg-divider clcosdk:focus-visible:ring-gray-400",
         // Destructive — error tokens auto-switch to translucent dark equivalents
         // hover/active have no tokens so use dark: overrides
-        destructive: "bg-error-subtle border border-error-border text-error font-semibold hover:bg-[#fcdcd8] active:bg-[#f9c9c4] dark:hover:bg-[rgba(248,113,113,0.20)] dark:active:bg-[rgba(248,113,113,0.30)] focus-visible:ring-red-400",
+        destructive: "clcosdk:bg-error-subtle clcosdk:border clcosdk:border-error-border clcosdk:text-error clcosdk:font-semibold clcosdk:hover:bg-[#fcdcd8] clcosdk:active:bg-[#f9c9c4] clcosdk:dark:hover:bg-[rgba(248,113,113,0.20)] clcosdk:dark:active:bg-[rgba(248,113,113,0.30)] clcosdk:focus-visible:ring-red-400",
         // Ghost — transparent base; hover/active use section/border tokens (auto-switch)
-        ghost: "bg-transparent text-text-primary font-medium hover:bg-section active:bg-border focus-visible:ring-gray-400",
+        ghost: "clcosdk:bg-transparent clcosdk:text-text-primary clcosdk:font-medium clcosdk:hover:bg-section clcosdk:active:bg-border clcosdk:focus-visible:ring-gray-400",
         // Link — text-text-primary auto-switches light/dark
-        link: "h-auto p-0 text-text-primary font-medium underline-offset-4 hover:underline focus-visible:ring-gray-500",
+        link: "clcosdk:h-auto clcosdk:p-0 clcosdk:text-text-primary clcosdk:font-medium clcosdk:underline-offset-4 clcosdk:hover:underline clcosdk:focus-visible:ring-gray-500",
         // Destructive link — text-error auto-switches (#b42318 → #f87171 in dark)
-        destructiveLink: "h-auto p-0 text-error font-medium hover:text-[#8b1a13] active:text-[#6d1510] dark:hover:text-[#fca5a5] dark:active:text-[#f87171] focus-visible:ring-red-500"
+        destructiveLink: "clcosdk:h-auto clcosdk:p-0 clcosdk:text-error clcosdk:font-medium clcosdk:hover:text-[#8b1a13] clcosdk:active:text-[#6d1510] clcosdk:dark:hover:text-[#fca5a5] clcosdk:dark:active:text-[#f87171] clcosdk:focus-visible:ring-red-500"
       },
       size: {
-        sm: "h-9 px-4 text-sm tracking-[0.28px]",
-        default: "h-11 px-5 text-sm tracking-[0.28px]",
-        lg: "h-14 px-6 text-base",
-        icon: "h-12 w-12"
+        sm: "clcosdk:h-9 clcosdk:px-4 clcosdk:text-sm clcosdk:tracking-[0.28px]",
+        default: "clcosdk:h-11 clcosdk:px-5 clcosdk:text-sm clcosdk:tracking-[0.28px]",
+        lg: "clcosdk:h-14 clcosdk:px-6 clcosdk:text-base",
+        icon: "clcosdk:h-12 clcosdk:w-12"
       },
       radius: {
-        pill: "rounded-full",
+        pill: "clcosdk:rounded-full",
         // compound variants below handle size-specific radii
         rounded: ""
       },
       fullWidth: {
-        true: "w-full",
+        true: "clcosdk:w-full",
         false: ""
       }
     },
     compoundVariants: [
-      { size: "sm", radius: "rounded", className: "rounded-lg" },
-      { size: "default", radius: "rounded", className: "rounded-2xl" },
-      { size: "lg", radius: "rounded", className: "rounded-2xl" },
-      { size: "icon", radius: "rounded", className: "rounded-md" }
+      { size: "sm", radius: "rounded", className: "clcosdk:rounded-lg" },
+      { size: "default", radius: "rounded", className: "clcosdk:rounded-2xl" },
+      { size: "lg", radius: "rounded", className: "clcosdk:rounded-2xl" },
+      { size: "icon", radius: "rounded", className: "clcosdk:rounded-md" }
     ],
     defaultVariants: {
       variant: "primary",
@@ -1241,7 +1300,7 @@ var ClButton = (0, import_react2.forwardRef)(
     ...props
   }, ref) => {
     const isDisabled = disabled || isLoading;
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "button",
       {
         className: cn(
@@ -1252,16 +1311,16 @@ var ClButton = (0, import_react2.forwardRef)(
         disabled: isDisabled,
         ...props,
         children: [
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             "span",
             {
-              className: "h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-60",
+              className: "clcosdk:h-4 clcosdk:w-4 clcosdk:shrink-0 clcosdk:animate-spin clcosdk:rounded-full clcosdk:border-2 clcosdk:border-current clcosdk:border-t-transparent clcosdk:opacity-60",
               "aria-hidden": "true"
             }
           ),
-          startIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "shrink-0", children: startIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn(isLoading && "opacity-60"), children: isLoading && loadingText ? loadingText : children }),
-          endIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "shrink-0", children: endIcon })
+          startIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "clcosdk:shrink-0", children: startIcon }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: cn(isLoading && "clcosdk:opacity-60"), children: isLoading && loadingText ? loadingText : children }),
+          endIcon && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "clcosdk:shrink-0", children: endIcon })
         ]
       }
     );
@@ -1270,9 +1329,9 @@ var ClButton = (0, import_react2.forwardRef)(
 ClButton.displayName = "ClButton";
 
 // src/client/components/design-system/logos/CoinListLogomark.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function CoinListLogomark(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "svg",
     {
       width: "115",
@@ -1283,28 +1342,28 @@ function CoinListLogomark(props) {
       "aria-hidden": "true",
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "path",
           {
             d: "M69.7519 123.966C75.8021 124.172 81.7491 123.519 87.4899 121.799C98.3871 118.531 107.531 112.58 114.922 103.947C114.922 103.947 114.922 103.947 114.888 103.912C112.859 102.193 110.831 100.507 108.837 98.8218L106.809 97.1363C106.431 96.8268 106.087 96.5172 105.709 96.2076C104.919 95.5197 104.128 94.8662 103.303 94.2126C96.2902 98.8562 88.5899 101.539 80.0991 101.883C75.8364 102.055 71.6082 101.642 67.4831 100.507C60.5047 98.6154 54.2483 95.1757 49.2294 89.7755C40.0854 79.938 36.854 68.1743 39.226 55.0348C40.7041 46.9172 44.4168 40.0723 50.0888 34.5C48.8856 34.7408 47.6825 35.016 46.5137 35.3943C37.5072 38.2148 30.5976 43.6839 25.6131 51.6639C21.6598 58.0273 19.5629 64.9411 19.3223 72.4739C19.1848 76.7047 19.4598 80.7979 20.4223 84.7879C23.4818 97.2395 30.2882 107.043 40.6698 114.335H40.7729V114.403C41.1167 114.644 41.4604 114.919 41.8042 115.16C50.2607 120.801 59.5766 123.691 69.7519 124.035V123.966Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "path",
           {
             d: "M73.1896 89.052C69.1676 90.8406 65.0081 91.8725 60.6768 92.2165C65.9707 95.209 71.7802 96.688 78.1054 96.8256C80.168 96.86 82.2305 96.6536 84.3962 96.3097C89.7245 95.4841 94.6746 93.5579 99.281 90.7374C94.9153 87.057 90.5839 83.4109 86.2181 79.7305C82.5055 83.6861 78.1741 86.8506 73.1896 89.052Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "path",
           {
             d: "M67.9643 0.241609C67.4143 0.276006 66.8643 0.344799 66.3486 0.413592C71.6425 1.4111 76.7646 3.13093 81.6116 5.71068C91.0306 10.7326 98.3527 17.9215 103.268 27.4494L105.915 25.1448C108.631 22.7714 111.347 20.3981 114.063 18.0247C107.634 11.1797 100.072 6.15784 91.2025 3.06214C85.2898 0.998336 79.2396 -0.0335643 73.0176 0.000832322C71.3675 0.000832322 69.6831 0.138419 67.9643 0.241609Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "path",
           {
             d: "M26.4037 107.871C18.4628 97.9988 14.1314 86.7167 14.2002 73.818C14.2002 67.317 15.5409 61.0568 18.1191 55.1062C21.9348 46.2662 27.9506 39.1805 36.4071 34.2962C44.348 29.687 52.9763 27.8984 62.1547 29.2743C71.5738 30.7189 79.3771 35.2249 85.6336 42.2762C85.6336 42.2762 85.8398 42.5514 85.9429 42.6546C86.8711 41.8291 87.8336 41.0035 88.7618 40.178L89.8962 39.1805C90.8587 38.355 91.8212 37.4951 92.7838 36.6696C94.9838 34.7434 97.1495 32.8515 99.3152 30.9253C95.087 22.223 88.7274 15.55 80.3053 10.8377C70.3706 5.26541 59.6797 3.54557 48.37 5.02463C42.7323 5.78136 37.3352 7.50119 32.1788 10.0465C14.6815 18.7145 2.06546 36.532 1.03418 58.4771C0.862296 62.0887 1.10293 65.7348 1.65294 69.3464C3.02798 78.3239 6.32808 86.4759 11.622 93.8368C15.7471 99.5123 20.6629 104.19 26.3693 107.871H26.4037Z",
@@ -1317,7 +1376,7 @@ function CoinListLogomark(props) {
 }
 
 // src/client/components/oauth/CoinListSignInButton.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 function CoinListSignInButton({
   onClick,
   disabled = false,
@@ -1325,7 +1384,7 @@ function CoinListSignInButton({
   isLoading = false,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     ClButton,
     {
       variant: "primary",
@@ -1335,7 +1394,7 @@ function CoinListSignInButton({
       disabled,
       isLoading,
       loadingText: "Signing in...",
-      startIcon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CoinListLogomark, { className: "h-[18px] w-[16px] shrink-0" }),
+      startIcon: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CoinListLogomark, { className: "clcosdk:h-[18px] clcosdk:w-[16px] clcosdk:shrink-0" }),
       className,
       children: "Continue with CoinList"
     }
@@ -1362,7 +1421,7 @@ var CoinListClientInitializationError = class extends Error {
 };
 
 // src/client/components/oauth/CoinListSignInCard.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function CoinListSignInCard({
   state = "idle",
   onSignIn,
@@ -1373,37 +1432,50 @@ function CoinListSignInCard({
   const handleSignIn = onSignIn ?? (() => {
     void coinlist.startOAuth();
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "div",
     {
       className: cn(
-        "relative flex w-full max-w-md flex-col rounded-card border border-border bg-background p-6 shadow-card",
+        "clcosdk:relative clcosdk:flex clcosdk:w-full clcosdk:max-w-md clcosdk:flex-col clcosdk:rounded-card clcosdk:border clcosdk:border-border clcosdk:bg-background clcosdk:p-6 clcosdk:shadow-card",
         className
       ),
       children: [
-        onClose && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CloseButton, { onClick: onClose, className: "absolute right-4 top-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: cn(typeClasses.h3, "text-text-primary"), children: "Sign in to participate" }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "A CoinList account is required to participate in this sale." })
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          CloseButton,
+          {
+            onClick: onClose,
+            className: "clcosdk:absolute clcosdk:right-4 clcosdk:top-4"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: "Sign in to participate" }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "A CoinList account is required to participate in this sale." })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CoinListSignInButton, { onClick: handleSignIn, fullWidth: true, className: "mt-4" }),
-        state === "error" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          CoinListSignInButton,
+          {
+            onClick: handleSignIn,
+            fullWidth: true,
+            className: "clcosdk:mt-4"
+          }
+        ),
+        state === "error" && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           AlertBanner,
           {
             variant: "error",
             icon: true,
             content: "Error signing in. Please try again.",
-            className: "mt-4"
+            className: "clcosdk:mt-4"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PoweredByCoinList, { className: "mt-4" })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PoweredByCoinList, { className: "clcosdk:mt-4" })
       ]
     }
   );
 }
 
 // src/client/components/offers/OfferCard.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var monthYearFormatter = new Intl.DateTimeFormat("en-US", {
   month: "short",
   year: "numeric"
@@ -1424,46 +1496,67 @@ function OfferCard({
   containerClassName
 }) {
   const cardLabel = "Open offer details";
-  const cardContent = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative mb-6 h-52 w-full overflow-hidden rounded-2xl border border-border/60 bg-section", children: [
-      offer.bannerUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const cardContent = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "clcosdk:relative clcosdk:mb-6 clcosdk:h-52 clcosdk:w-full clcosdk:overflow-hidden clcosdk:rounded-2xl clcosdk:border clcosdk:border-border/60 clcosdk:bg-section", children: [
+      offer.bannerUrl ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "img",
         {
           src: offer.bannerUrl,
           alt: "Offer banner",
-          className: "h-full w-full object-cover"
+          className: "clcosdk:h-full clcosdk:w-full clcosdk:object-cover"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-full w-full bg-gradient-to-br from-surface via-section to-background" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-overlay/35" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 flex items-center justify-center p-6", children: offer.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "clcosdk:h-full clcosdk:w-full clcosdk:bg-gradient-to-br clcosdk:from-surface clcosdk:via-section clcosdk:to-background" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "clcosdk:absolute clcosdk:inset-0 clcosdk:bg-gradient-to-b clcosdk:from-transparent clcosdk:via-transparent clcosdk:to-overlay/35" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "clcosdk:absolute clcosdk:inset-0 clcosdk:flex clcosdk:items-center clcosdk:justify-center clcosdk:p-6", children: offer.logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "img",
         {
           src: offer.logoUrl,
           alt: "Offer logo",
-          className: "h-28 w-28 rounded-full border border-border bg-surface object-cover shadow-[0_10px_24px_rgba(0,0,0,0.25)]"
+          className: "clcosdk:h-28 clcosdk:w-28 clcosdk:rounded-full clcosdk:border clcosdk:border-border clcosdk:bg-surface clcosdk:object-cover clcosdk:shadow-[0_10px_24px_rgba(0,0,0,0.25)]"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "h-28 w-28 rounded-full border border-border bg-surface shadow-[0_10px_24px_rgba(0,0,0,0.18)]" }) })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "clcosdk:h-28 clcosdk:w-28 clcosdk:rounded-full clcosdk:border clcosdk:border-border clcosdk:bg-surface clcosdk:shadow-[0_10px_24px_rgba(0,0,0,0.18)]" }) })
     ] }),
-    offer.tagline && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: cn(typeClasses.h3, "min-h-[2.4rem] text-text-primary"), children: offer.tagline }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mt-4 grid grid-cols-2 gap-5 border-t border-divider pt-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Starts" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.label, "text-text-primary"), children: offer.formattedStartsAt })
+    offer.tagline && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "p",
+      {
+        className: cn(
+          typeClasses.h3,
+          "clcosdk:min-h-[2.4rem] clcosdk:text-text-primary"
+        ),
+        children: offer.tagline
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "clcosdk:mt-4 clcosdk:grid clcosdk:grid-cols-2 clcosdk:gap-5 clcosdk:border-t clcosdk:border-divider clcosdk:pt-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "span",
+          {
+            className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"),
+            children: "Starts"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn(typeClasses.label, "clcosdk:text-text-primary"), children: offer.formattedStartsAt })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Ends" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(typeClasses.label, "text-text-primary"), children: offer.formattedEndsAt })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "span",
+          {
+            className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"),
+            children: "Ends"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn(typeClasses.label, "clcosdk:text-text-primary"), children: offer.formattedEndsAt })
       ] })
     ] })
   ] });
   const baseClasses = cn(
-    "relative flex w-full max-w-[28rem] flex-col rounded-card border border-border bg-background p-6 text-left shadow-card transition-all duration-200",
+    "clcosdk:relative clcosdk:flex clcosdk:w-full clcosdk:max-w-[28rem] clcosdk:flex-col clcosdk:rounded-card clcosdk:border clcosdk:border-border clcosdk:bg-background clcosdk:p-6 clcosdk:text-left clcosdk:shadow-card clcosdk:transition-all clcosdk:duration-200",
     className,
-    onClick && "cursor-pointer hover:-translate-y-0.5 hover:border-divider hover:shadow-[0px_14px_32px_-10px_rgba(0,0,0,0.35)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-focus focus-visible:ring-offset-2"
+    onClick && "clcosdk:cursor-pointer clcosdk:hover:-translate-y-0.5 clcosdk:hover:border-divider clcosdk:hover:shadow-[0px_14px_32px_-10px_rgba(0,0,0,0.35)] clcosdk:focus-visible:outline-none clcosdk:focus-visible:ring-2 clcosdk:focus-visible:ring-accent-focus clcosdk:focus-visible:ring-offset-2"
   );
   let cardNode;
   if (onClick) {
-    cardNode = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    cardNode = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "button",
       {
         type: "button",
@@ -1474,12 +1567,12 @@ function OfferCard({
       }
     );
   } else {
-    cardNode = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: baseClasses, children: cardContent });
+    cardNode = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: baseClasses, children: cardContent });
   }
   if (!containerClassName) {
     return cardNode;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: containerClassName, children: cardNode });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: containerClassName, children: cardNode });
 }
 
 // src/client/hooks/useOffers.ts
@@ -1525,7 +1618,7 @@ function useOffers(options = {}) {
 }
 
 // src/client/components/offers/OffersGrid.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var DEFAULT_MAX_COLUMNS = 3;
 function OffersGrid({
   data,
@@ -1543,12 +1636,12 @@ function OffersGrid({
     if (loading) {
       return loading;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "output",
       {
         "aria-live": "polite",
-        className: "flex min-h-40 items-center justify-center rounded-2xl border border-border bg-background p-6",
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "Loading offers..." })
+        className: "clcosdk:flex clcosdk:min-h-40 clcosdk:items-center clcosdk:justify-center clcosdk:rounded-2xl clcosdk:border clcosdk:border-border clcosdk:bg-background clcosdk:p-6",
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading offers..." })
       }
     );
   }
@@ -1557,13 +1650,13 @@ function OffersGrid({
       return error;
     }
     const errorMessage = offersState.reason === "not-authenticated" ? "Sign in to view available offers." : "Unable to load offers right now. Please try again.";
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       AlertBanner,
       {
         variant: "error",
         icon: true,
         content: errorMessage,
-        className: "w-full max-w-[28rem]"
+        className: "clcosdk:w-full clcosdk:max-w-[28rem]"
       }
     );
   }
@@ -1571,37 +1664,55 @@ function OffersGrid({
     if (emptyState) {
       return emptyState;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "output",
       {
         "aria-live": "polite",
-        className: "flex min-h-40 flex-col items-center justify-center rounded-2xl border border-border bg-background p-6 text-center",
+        className: "clcosdk:flex clcosdk:min-h-40 clcosdk:flex-col clcosdk:items-center clcosdk:justify-center clcosdk:rounded-2xl clcosdk:border clcosdk:border-border clcosdk:bg-background clcosdk:p-6 clcosdk:text-center",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: cn(typeClasses.body, "font-medium text-text-primary"), children: "No offers available" }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Check back soon for upcoming opportunities." })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "p",
+            {
+              className: cn(
+                typeClasses.body,
+                "clcosdk:font-medium clcosdk:text-text-primary"
+              ),
+              children: "No offers available"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"), children: "Check back soon for upcoming opportunities." })
         ]
       }
     );
   }
   const maxGridWidth = `calc(${cols} * 28rem + ${Math.max(cols - 1, 0)} * 1.5rem)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("flex w-full justify-center", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
-      className: cn("grid w-full gap-6", className),
-      style: {
-        gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 20rem), 1fr))",
-        maxWidth: maxGridWidth
-      },
-      children: offersState.offers.map((offer) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-        OfferCard,
+      className: cn(
+        "clcosdk:flex clcosdk:w-full clcosdk:justify-center",
+        containerClassName
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "div",
         {
-          offer: OfferCardUi.fromDomain(offer),
-          onClick: onOfferClick ? () => onOfferClick(offer) : void 0
-        },
-        offer.id
-      ))
+          className: cn("clcosdk:grid clcosdk:w-full clcosdk:gap-6", className),
+          style: {
+            gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 20rem), 1fr))",
+            maxWidth: maxGridWidth
+          },
+          children: offersState.offers.map((offer) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            OfferCard,
+            {
+              offer: OfferCardUi.fromDomain(offer),
+              onClick: onOfferClick ? () => onOfferClick(offer) : void 0
+            },
+            offer.id
+          ))
+        }
+      )
     }
-  ) });
+  );
 }
 
 // src/client/components/requirements/RequirementItem.tsx
@@ -1609,42 +1720,47 @@ var import_lucide_react4 = require("lucide-react");
 
 // src/client/components/design-system/StepStatusIcon.tsx
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var statusConfig = {
   required: {
     Icon: import_lucide_react3.Info,
-    colorClass: "text-warning",
-    fillClass: "[&_circle]:fill-warning-subtle"
+    colorClass: "clcosdk:text-warning",
+    fillClass: "clcosdk:[&_circle]:fill-warning-subtle"
   },
   pending: {
     Icon: import_lucide_react3.Info,
-    colorClass: "text-warning",
-    fillClass: "[&_circle]:fill-warning-subtle"
+    colorClass: "clcosdk:text-warning",
+    fillClass: "clcosdk:[&_circle]:fill-warning-subtle"
   },
   completed: {
     Icon: import_lucide_react3.CircleCheck,
-    colorClass: "text-success",
-    fillClass: "[&_circle]:fill-success-subtle"
+    colorClass: "clcosdk:text-success",
+    fillClass: "clcosdk:[&_circle]:fill-success-subtle"
   },
   rejected: {
     Icon: import_lucide_react3.CircleX,
-    colorClass: "text-error",
-    fillClass: "[&_circle]:fill-error-subtle"
+    colorClass: "clcosdk:text-error",
+    fillClass: "clcosdk:[&_circle]:fill-error-subtle"
   }
 };
 function StepStatusIcon({ status, className }) {
   const { Icon, colorClass, fillClass } = statusConfig[status];
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Icon,
     {
-      className: cn("h-6 w-6 shrink-0", colorClass, fillClass, className),
+      className: cn(
+        "clcosdk:h-6 clcosdk:w-6 clcosdk:shrink-0",
+        colorClass,
+        fillClass,
+        className
+      ),
       "aria-hidden": "true"
     }
   );
 }
 
 // src/client/components/requirements/RequirementItem.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var RequirementVariant = {
   fromType(type) {
     switch (type) {
@@ -1697,9 +1813,9 @@ function VerificationActionZone({
   switch (status) {
     case "required":
       if (onAction === null) return null;
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Continue" });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Continue" });
     case "pending":
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         AlertBanner,
         {
           variant: "warning",
@@ -1707,21 +1823,21 @@ function VerificationActionZone({
         }
       );
     case "completed":
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AlertBanner, { variant: "success", content: "Identity verified." });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AlertBanner, { variant: "success", content: "Identity verified." });
     case "rejected":
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         AlertBanner,
         {
           variant: "error",
-          content: onContactSupport === null ? "Verification rejected." : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          content: onContactSupport === null ? "Verification rejected." : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
             "Verification rejected.",
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "button",
               {
                 type: "button",
                 onClick: onContactSupport,
-                className: "underline",
+                className: "clcosdk:underline",
                 children: "Contact support"
               }
             ),
@@ -1737,9 +1853,9 @@ function WalletActionZone({
   onAction
 }) {
   if (status === "completed") {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-      onAction !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClButton, { size: "sm", variant: "secondary", onClick: onAction, children: "Change wallet" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      onAction !== null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ClButton, { size: "sm", variant: "secondary", onClick: onAction, children: "Change wallet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         AlertBanner,
         {
           variant: "success",
@@ -1749,9 +1865,9 @@ function WalletActionZone({
     ] });
   }
   if (status === "rejected") {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-      onAction !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+      onAction !== null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         AlertBanner,
         {
           variant: "error",
@@ -1761,7 +1877,7 @@ function WalletActionZone({
     ] });
   }
   if (onAction === null) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ClButton, { size: "sm", onClick: onAction, children: "Connect wallet" });
 }
 function RequirementItem({
   ui,
@@ -1771,69 +1887,81 @@ function RequirementItem({
   onAction,
   onContactSupport
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex w-full flex-col", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-      "button",
-      {
-        type: "button",
-        onClick: onToggle,
-        "aria-expanded": expanded,
-        className: "flex h-14 w-full cursor-pointer items-center justify-between rounded-2xl px-2 transition-colors hover:bg-surface",
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(StepStatusIcon, { status: ui.status }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-              "span",
-              {
-                className: cn(
-                  typeClasses.body,
-                  "whitespace-nowrap font-medium text-text-primary"
-                ),
-                children: ui.label
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            import_lucide_react4.ChevronRight,
-            {
-              className: cn(
-                "h-6 w-6 shrink-0 text-text-secondary transition-transform duration-300",
-                expanded && "rotate-90"
-              ),
-              "aria-hidden": "true"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      "div",
-      {
-        className: cn(
-          "grid transition-[grid-template-rows] duration-300 ease-in-out",
-          expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: cn("clcosdk:flex clcosdk:w-full clcosdk:flex-col", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: onToggle,
+            "aria-expanded": expanded,
+            className: "clcosdk:flex clcosdk:h-14 clcosdk:w-full clcosdk:cursor-pointer clcosdk:items-center clcosdk:justify-between clcosdk:rounded-2xl clcosdk:px-2 clcosdk:transition-colors clcosdk:hover:bg-surface",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "clcosdk:flex clcosdk:items-center clcosdk:gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StepStatusIcon, { status: ui.status }),
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "span",
+                  {
+                    className: cn(
+                      typeClasses.body,
+                      "clcosdk:whitespace-nowrap clcosdk:font-medium clcosdk:text-text-primary"
+                    ),
+                    children: ui.label
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_lucide_react4.ChevronRight,
+                {
+                  className: cn(
+                    "clcosdk:h-6 clcosdk:w-6 clcosdk:shrink-0 clcosdk:text-text-secondary clcosdk:transition-transform clcosdk:duration-300",
+                    expanded && "clcosdk:rotate-90"
+                  ),
+                  "aria-hidden": "true"
+                }
+              )
+            ]
+          }
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-4 px-2 pb-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: cn(typeClasses.subhead, "text-text-secondary"), children: ui.description }),
-          ui.variant === "verification" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            VerificationActionZone,
-            {
-              status: ui.status,
-              onAction,
-              onContactSupport
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            WalletActionZone,
-            {
-              status: ui.status,
-              walletAddress: ui.walletAddress,
-              onAction
-            }
-          )
-        ] }) })
-      }
-    )
-  ] });
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "div",
+          {
+            className: cn(
+              "clcosdk:grid clcosdk:transition-[grid-template-rows] clcosdk:duration-300 clcosdk:ease-in-out",
+              expanded ? "clcosdk:grid-rows-[1fr]" : "clcosdk:grid-rows-[0fr]"
+            ),
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "clcosdk:min-h-0 clcosdk:overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-4 clcosdk:px-2 clcosdk:pb-4", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "p",
+                {
+                  className: cn(typeClasses.subhead, "clcosdk:text-text-secondary"),
+                  children: ui.description
+                }
+              ),
+              ui.variant === "verification" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                VerificationActionZone,
+                {
+                  status: ui.status,
+                  onAction,
+                  onContactSupport
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                WalletActionZone,
+                {
+                  status: ui.status,
+                  walletAddress: ui.walletAddress,
+                  onAction
+                }
+              )
+            ] }) })
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/client/components/requirements/RequirementsChecklist.tsx
@@ -1891,7 +2019,7 @@ function useRequirements(offerId, options = {}) {
 }
 
 // src/client/components/requirements/RequirementsChecklist.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var DEFAULT_LABELS = {
   kyc_approved: "KYC Verification",
   identity_verified: "Identity Verification",
@@ -1934,25 +2062,25 @@ function RequirementsChecklist({
   const onContactSupport = onContactSupportOverride !== void 0 ? onContactSupportOverride : () => coinlist.contactSupport();
   if (requirementsState.type === "LOADING") {
     if (loading) return loading;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "output",
       {
         "aria-live": "polite",
-        className: "flex min-h-40 items-center justify-center rounded-2xl border border-border bg-background p-6",
-        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "Loading requirements..." })
+        className: "clcosdk:flex clcosdk:min-h-40 clcosdk:items-center clcosdk:justify-center clcosdk:rounded-2xl clcosdk:border clcosdk:border-border clcosdk:bg-background clcosdk:p-6",
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: "Loading requirements..." })
       }
     );
   }
   if (requirementsState.type === "ERROR") {
     if (error) return error;
     const errorMessage = requirementsState.reason === "not-authenticated" ? "Sign in to view requirements." : "Unable to load requirements right now. Please try again.";
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       AlertBanner,
       {
         variant: "error",
         icon: true,
         content: errorMessage,
-        className: "w-full max-w-[28rem]"
+        className: "clcosdk:w-full clcosdk:max-w-[28rem]"
       }
     );
   }
@@ -1962,62 +2090,71 @@ function RequirementsChecklist({
   const optionStatuses = statuses.filter((s) => requirementIds.has(s.id));
   const statusByRequirementId = new Map(optionStatuses.map((s) => [s.id, s]));
   const checklistStatus = ChecklistStatus.derive(optionStatuses);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("flex w-full flex-col gap-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: cn(typeClasses.h3, "text-text-primary"), children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: cn(typeClasses.body, "text-text-secondary"), children: description })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col divide-y divide-divider", children: requirements.map((req, index) => {
-      const statusInfo = statusByRequirementId.get(req.id);
-      const label = getLabel ? getLabel(req) : DEFAULT_LABELS[req.type];
-      const itemDescription = (getDescription ? getDescription(req) : null) ?? DEFAULT_DESCRIPTIONS[req.type];
-      let onActionBound;
-      if (onRequirementAction === null) {
-        onActionBound = null;
-      } else if (onRequirementAction) {
-        onActionBound = () => onRequirementAction(req);
-      }
-      let onContactSupportBound;
-      if (onContactSupport === null) {
-        onContactSupportBound = null;
-      } else if (onContactSupport) {
-        onContactSupportBound = () => onContactSupport(req);
-      }
-      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-        RequirementItem,
-        {
-          ui: RequirementItemUi.fromDomain(
-            req,
-            statusInfo,
-            label,
-            itemDescription
-          ),
-          expanded: expandedIndex === index,
-          onToggle: () => setExpandedIndex((prev) => prev === index ? null : index),
-          onAction: onActionBound,
-          onContactSupport: onContactSupportBound
-        },
-        req.id
-      );
-    }) }),
-    checklistStatus === "ineligible" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      AlertBanner,
-      {
-        variant: "error",
-        icon: true,
-        content: "You are not eligible to participate."
-      }
-    ),
-    onContinue && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-      ClButton,
-      {
-        fullWidth: true,
-        disabled: checklistStatus !== "eligible",
-        onClick: onContinue,
-        children: "Continue"
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: cn(
+        "clcosdk:flex clcosdk:w-full clcosdk:flex-col clcosdk:gap-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: cn(typeClasses.h3, "clcosdk:text-text-primary"), children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: cn(typeClasses.body, "clcosdk:text-text-secondary"), children: description })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "clcosdk:flex clcosdk:flex-col clcosdk:divide-y clcosdk:divide-divider", children: requirements.map((req, index) => {
+          const statusInfo = statusByRequirementId.get(req.id);
+          const label = getLabel ? getLabel(req) : DEFAULT_LABELS[req.type];
+          const itemDescription = (getDescription ? getDescription(req) : null) ?? DEFAULT_DESCRIPTIONS[req.type];
+          let onActionBound;
+          if (onRequirementAction === null) {
+            onActionBound = null;
+          } else if (onRequirementAction) {
+            onActionBound = () => onRequirementAction(req);
+          }
+          let onContactSupportBound;
+          if (onContactSupport === null) {
+            onContactSupportBound = null;
+          } else if (onContactSupport) {
+            onContactSupportBound = () => onContactSupport(req);
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+            RequirementItem,
+            {
+              ui: RequirementItemUi.fromDomain(
+                req,
+                statusInfo,
+                label,
+                itemDescription
+              ),
+              expanded: expandedIndex === index,
+              onToggle: () => setExpandedIndex((prev) => prev === index ? null : index),
+              onAction: onActionBound,
+              onContactSupport: onContactSupportBound
+            },
+            req.id
+          );
+        }) }),
+        checklistStatus === "ineligible" && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          AlertBanner,
+          {
+            variant: "error",
+            icon: true,
+            content: "You are not eligible to participate."
+          }
+        ),
+        onContinue && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          ClButton,
+          {
+            fullWidth: true,
+            disabled: checklistStatus !== "eligible",
+            onClick: onContinue,
+            children: "Continue"
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/client/hooks/useCompleteOAuth.ts
@@ -2162,8 +2299,10 @@ function useParticipations(offerId, options = {}) {
   ChecklistStatus,
   CoinListClientInitializationError,
   CoinListContext,
+  CoinListContextProvider,
   CoinListProvider,
   CoinListSignInCard,
+  CoinListStyleScope,
   OAUTH_CODE_VERIFIER_KEY,
   OAUTH_STATE_KEY,
   OfferCard,