@medialane/ui 0.139.0 → 0.140.1

package/dist/components/asset-picker.cjs

@@ -27,6 +27,38 @@ var import_react = require("react");
 var import_lucide_react = require("lucide-react");
 var import_cn = require("../utils/cn.js");
 var import_asset_picker_cell = require("./asset-picker-cell.js");
+function MintPromoCard({ onMintClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-2xl p-[1.5px] bg-gradient-to-br from-brand-purple to-brand-orange", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-[15px] bg-card p-5 flex flex-col sm:flex-row sm:items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-11 w-11 rounded-xl bg-gradient-to-br from-brand-purple to-brand-orange flex items-center justify-center shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Sparkles, { className: "h-5 w-5 text-white" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-bold text-foreground", children: "Mint your first asset" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground mt-0.5", children: "It becomes your avatar and app theme \u2014 ready in seconds." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "btn-border-animated shrink-0 p-[1px] rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onMintClick,
+        className: "h-10 px-4 rounded-[11px] bg-card text-sm font-semibold text-foreground hover:brightness-110 active:scale-[0.98] transition-all whitespace-nowrap",
+        children: "Mint an asset"
+      }
+    ) })
+  ] }) });
+}
+function MintTile({ onMintClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "button",
+    {
+      type: "button",
+      onClick: onMintClick,
+      className: "aspect-square rounded-xl border-2 border-dashed border-brand-purple/40 hover:border-brand-purple/70 hover:bg-brand-purple/5 transition-colors flex flex-col items-center justify-center gap-1 text-brand-purple",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Plus, { className: "h-4 w-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-2xs font-semibold", children: "New" })
+      ]
+    }
+  );
+}
 function AssetPicker({
   assets,
   isLoading,
@@ -34,6 +66,7 @@ function AssetPicker({
   onSelect,
   emptyStateHref,
   emptyStateLabel,
+  onMintClick,
   className
 }) {
   const [query, setQuery] = (0, import_react.useState)("");
@@ -42,6 +75,7 @@ function AssetPicker({
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("grid grid-cols-3 sm:grid-cols-4 gap-2.5", className), children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "aspect-square rounded-xl bg-muted/60 animate-pulse" }, i)) });
   }
   if (assets.length === 0) {
+    if (onMintClick) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MintPromoCard, { onMintClick });
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_cn.cn)("rounded-xl border border-dashed border-border/60 p-6 text-center text-sm text-muted-foreground", className), children: [
       "You don't own any assets yet.",
       emptyStateHref ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: emptyStateHref, className: "ml-1 font-semibold text-foreground underline underline-offset-2", children: emptyStateLabel ?? "Create one" }) : null
@@ -61,15 +95,18 @@ function AssetPicker({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5", children: filtered.map((asset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_asset_picker_cell.AssetPickerCell,
-      {
-        asset,
-        active: (0, import_asset_picker_cell.isSameAsset)(asset, selected),
-        onSelect
-      },
-      `${asset.contractAddress}-${asset.tokenId}`
-    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5", children: [
+      filtered.map((asset) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_asset_picker_cell.AssetPickerCell,
+        {
+          asset,
+          active: (0, import_asset_picker_cell.isSameAsset)(asset, selected),
+          onSelect
+        },
+        `${asset.contractAddress}-${asset.tokenId}`
+      )),
+      onMintClick && !query ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MintTile, { onMintClick }) : null
+    ] }),
     query && filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-xs text-muted-foreground text-center py-4", children: [
       'No assets match "',
       query,

package/dist/components/asset-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/asset-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Search } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { AssetPickerCell, isSameAsset } from \"./asset-picker-cell.js\";\n\nexport interface OwnedAsset {\n  contractAddress: string;\n  tokenId: string;\n  name: string;\n  image: string | null;\n}\n\nexport interface AssetPickerProps {\n\n  assets: OwnedAsset[];\n  isLoading: boolean;\n  selected: OwnedAsset | null;\n  onSelect: (asset: OwnedAsset) => void;\n\n  emptyStateHref?: string;\n  emptyStateLabel?: string;\n  className?: string;\n}\n\nexport function AssetPicker({\n  assets, isLoading, selected, onSelect, emptyStateHref, emptyStateLabel, className,\n}: AssetPickerProps) {\n  const [query, setQuery] = useState(\"\");\n  const filtered = query\n    ? assets.filter((a) => a.name.toLowerCase().includes(query.toLowerCase()))\n    : assets;\n\n  if (isLoading) {\n    return (\n      <div className={cn(\"grid grid-cols-3 sm:grid-cols-4 gap-2.5\", className)}>\n        {Array.from({ length: 8 }).map((_, i) => (\n          <div key={i} className=\"aspect-square rounded-xl bg-muted/60 animate-pulse\" />\n        ))}\n      </div>\n    );\n  }\n\n  if (assets.length === 0) {\n    return (\n      <div className={cn(\"rounded-xl border border-dashed border-border/60 p-6 text-center text-sm text-muted-foreground\", className)}>\n        You don&apos;t own any assets yet.\n        {emptyStateHref ? (\n          <a href={emptyStateHref} className=\"ml-1 font-semibold text-foreground underline underline-offset-2\">\n            {emptyStateLabel ?? \"Create one\"}\n          </a>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      {assets.length > 8 ? (\n        <div className=\"relative\">\n          <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n          <input\n            type=\"text\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search your assets\"\n            className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n          />\n        </div>\n      ) : null}\n\n      <div className=\"grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5\">\n        {filtered.map((asset) => (\n          <AssetPickerCell\n            key={`${asset.contractAddress}-${asset.tokenId}`}\n            asset={asset}\n            active={isSameAsset(asset, selected)}\n            onSelect={onSelect}\n          />\n        ))}\n      </div>\n\n      {query && filtered.length === 0 ? (\n        <p className=\"text-xs text-muted-foreground text-center py-4\">No assets match &quot;{query}&quot;.</p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsCU;AApCV,mBAAyB;AACzB,0BAAuB;AACvB,gBAAmB;AACnB,+BAA6C;AAqBtC,SAAS,YAAY;AAAA,EAC1B;AAAA,EAAQ;AAAA,EAAW;AAAA,EAAU;AAAA,EAAU;AAAA,EAAgB;AAAA,EAAiB;AAC1E,GAAqB;AACnB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,WAAW,QACb,OAAO,OAAO,CAAC,MAAM,EAAE,KAAK,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC,CAAC,IACvE;AAEJ,MAAI,WAAW;AACb,WACE,4CAAC,SAAI,eAAW,cAAG,2CAA2C,SAAS,GACpE,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,4CAAC,SAAY,WAAU,wDAAb,CAAkE,CAC7E,GACH;AAAA,EAEJ;AAEA,MAAI,OAAO,WAAW,GAAG;AACvB,WACE,6CAAC,SAAI,eAAW,cAAG,kGAAkG,SAAS,GAAG;AAAA;AAAA,MAE9H,iBACC,4CAAC,OAAE,MAAM,gBAAgB,WAAU,mEAChC,6BAAmB,cACtB,IACE;AAAA,OACN;AAAA,EAEJ;AAEA,SACE,6CAAC,SAAI,eAAW,cAAG,aAAa,SAAS,GACtC;AAAA,WAAO,SAAS,IACf,6CAAC,SAAI,WAAU,YACb;AAAA,kDAAC,8BAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,OACF,IACE;AAAA,IAEJ,4CAAC,SAAI,WAAU,2EACZ,mBAAS,IAAI,CAAC,UACb;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,YAAQ,sCAAY,OAAO,QAAQ;AAAA,QACnC;AAAA;AAAA,MAHK,GAAG,MAAM,eAAe,IAAI,MAAM,OAAO;AAAA,IAIhD,CACD,GACH;AAAA,IAEC,SAAS,SAAS,WAAW,IAC5B,6CAAC,OAAE,WAAU,kDAAiD;AAAA;AAAA,MAAuB;AAAA,MAAM;AAAA,OAAO,IAChG;AAAA,KACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/asset-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Search, Plus, Sparkles } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { AssetPickerCell, isSameAsset } from \"./asset-picker-cell.js\";\n\nexport interface OwnedAsset {\n  contractAddress: string;\n  tokenId: string;\n  name: string;\n  image: string | null;\n}\n\nexport interface AssetPickerProps {\n\n  assets: OwnedAsset[];\n  isLoading: boolean;\n  selected: OwnedAsset | null;\n  onSelect: (asset: OwnedAsset) => void;\n\n  emptyStateHref?: string;\n  emptyStateLabel?: string;\n  onMintClick?: () => void;\n  className?: string;\n}\n\nfunction MintPromoCard({ onMintClick }: { onMintClick: () => void }) {\n  return (\n    <div className=\"rounded-2xl p-[1.5px] bg-gradient-to-br from-brand-purple to-brand-orange\">\n      <div className=\"rounded-[15px] bg-card p-5 flex flex-col sm:flex-row sm:items-center gap-4\">\n        <div className=\"h-11 w-11 rounded-xl bg-gradient-to-br from-brand-purple to-brand-orange flex items-center justify-center shrink-0\">\n          <Sparkles className=\"h-5 w-5 text-white\" />\n        </div>\n        <div className=\"flex-1 min-w-0\">\n          <p className=\"text-sm font-bold text-foreground\">Mint your first asset</p>\n          <p className=\"text-xs text-muted-foreground mt-0.5\">It becomes your avatar and app theme — ready in seconds.</p>\n        </div>\n        <div className=\"btn-border-animated shrink-0 p-[1px] rounded-xl\">\n          <button\n            type=\"button\"\n            onClick={onMintClick}\n            className=\"h-10 px-4 rounded-[11px] bg-card text-sm font-semibold text-foreground hover:brightness-110 active:scale-[0.98] transition-all whitespace-nowrap\"\n          >\n            Mint an asset\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction MintTile({ onMintClick }: { onMintClick: () => void }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onMintClick}\n      className=\"aspect-square rounded-xl border-2 border-dashed border-brand-purple/40 hover:border-brand-purple/70 hover:bg-brand-purple/5 transition-colors flex flex-col items-center justify-center gap-1 text-brand-purple\"\n    >\n      <Plus className=\"h-4 w-4\" />\n      <span className=\"text-2xs font-semibold\">New</span>\n    </button>\n  );\n}\n\nexport function AssetPicker({\n  assets, isLoading, selected, onSelect, emptyStateHref, emptyStateLabel, onMintClick, className,\n}: AssetPickerProps) {\n  const [query, setQuery] = useState(\"\");\n  const filtered = query\n    ? assets.filter((a) => a.name.toLowerCase().includes(query.toLowerCase()))\n    : assets;\n\n  if (isLoading) {\n    return (\n      <div className={cn(\"grid grid-cols-3 sm:grid-cols-4 gap-2.5\", className)}>\n        {Array.from({ length: 8 }).map((_, i) => (\n          <div key={i} className=\"aspect-square rounded-xl bg-muted/60 animate-pulse\" />\n        ))}\n      </div>\n    );\n  }\n\n  if (assets.length === 0) {\n    if (onMintClick) return <MintPromoCard onMintClick={onMintClick} />;\n    return (\n      <div className={cn(\"rounded-xl border border-dashed border-border/60 p-6 text-center text-sm text-muted-foreground\", className)}>\n        You don&apos;t own any assets yet.\n        {emptyStateHref ? (\n          <a href={emptyStateHref} className=\"ml-1 font-semibold text-foreground underline underline-offset-2\">\n            {emptyStateLabel ?? \"Create one\"}\n          </a>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      {assets.length > 8 ? (\n        <div className=\"relative\">\n          <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n          <input\n            type=\"text\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search your assets\"\n            className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n          />\n        </div>\n      ) : null}\n\n      <div className=\"grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5\">\n        {filtered.map((asset) => (\n          <AssetPickerCell\n            key={`${asset.contractAddress}-${asset.tokenId}`}\n            asset={asset}\n            active={isSameAsset(asset, selected)}\n            onSelect={onSelect}\n          />\n        ))}\n        {onMintClick && !query ? <MintTile onMintClick={onMintClick} /> : null}\n      </div>\n\n      {query && filtered.length === 0 ? (\n        <p className=\"text-xs text-muted-foreground text-center py-4\">No assets match &quot;{query}&quot;.</p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgCU;AA9BV,mBAAyB;AACzB,0BAAuC;AACvC,gBAAmB;AACnB,+BAA6C;AAsB7C,SAAS,cAAc,EAAE,YAAY,GAAgC;AACnE,SACE,4CAAC,SAAI,WAAU,6EACb,uDAAC,SAAI,WAAU,8EACb;AAAA,gDAAC,SAAI,WAAU,sHACb,sDAAC,gCAAS,WAAU,sBAAqB,GAC3C;AAAA,IACA,6CAAC,SAAI,WAAU,kBACb;AAAA,kDAAC,OAAE,WAAU,qCAAoC,mCAAqB;AAAA,MACtE,4CAAC,OAAE,WAAU,wCAAuC,2EAAwD;AAAA,OAC9G;AAAA,IACA,4CAAC,SAAI,WAAU,mDACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAU;AAAA,QACX;AAAA;AAAA,IAED,GACF;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,SAAS,EAAE,YAAY,GAAgC;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAU;AAAA,MAEV;AAAA,oDAAC,4BAAK,WAAU,WAAU;AAAA,QAC1B,4CAAC,UAAK,WAAU,0BAAyB,iBAAG;AAAA;AAAA;AAAA,EAC9C;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EAAQ;AAAA,EAAW;AAAA,EAAU;AAAA,EAAU;AAAA,EAAgB;AAAA,EAAiB;AAAA,EAAa;AACvF,GAAqB;AACnB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,QAAM,WAAW,QACb,OAAO,OAAO,CAAC,MAAM,EAAE,KAAK,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC,CAAC,IACvE;AAEJ,MAAI,WAAW;AACb,WACE,4CAAC,SAAI,eAAW,cAAG,2CAA2C,SAAS,GACpE,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,4CAAC,SAAY,WAAU,wDAAb,CAAkE,CAC7E,GACH;AAAA,EAEJ;AAEA,MAAI,OAAO,WAAW,GAAG;AACvB,QAAI,YAAa,QAAO,4CAAC,iBAAc,aAA0B;AACjE,WACE,6CAAC,SAAI,eAAW,cAAG,kGAAkG,SAAS,GAAG;AAAA;AAAA,MAE9H,iBACC,4CAAC,OAAE,MAAM,gBAAgB,WAAU,mEAChC,6BAAmB,cACtB,IACE;AAAA,OACN;AAAA,EAEJ;AAEA,SACE,6CAAC,SAAI,eAAW,cAAG,aAAa,SAAS,GACtC;AAAA,WAAO,SAAS,IACf,6CAAC,SAAI,WAAU,YACb;AAAA,kDAAC,8BAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,OACF,IACE;AAAA,IAEJ,6CAAC,SAAI,WAAU,2EACZ;AAAA,eAAS,IAAI,CAAC,UACb;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,YAAQ,sCAAY,OAAO,QAAQ;AAAA,UACnC;AAAA;AAAA,QAHK,GAAG,MAAM,eAAe,IAAI,MAAM,OAAO;AAAA,MAIhD,CACD;AAAA,MACA,eAAe,CAAC,QAAQ,4CAAC,YAAS,aAA0B,IAAK;AAAA,OACpE;AAAA,IAEC,SAAS,SAAS,WAAW,IAC5B,6CAAC,OAAE,WAAU,kDAAiD;AAAA;AAAA,MAAuB;AAAA,MAAM;AAAA,OAAO,IAChG;AAAA,KACN;AAEJ;","names":[]}

package/dist/components/asset-picker.d.cts

@@ -13,8 +13,9 @@ interface AssetPickerProps {
     onSelect: (asset: OwnedAsset) => void;
     emptyStateHref?: string;
     emptyStateLabel?: string;
+    onMintClick?: () => void;
     className?: string;
 }
-declare function AssetPicker({ assets, isLoading, selected, onSelect, emptyStateHref, emptyStateLabel, className, }: AssetPickerProps): react_jsx_runtime.JSX.Element;
+declare function AssetPicker({ assets, isLoading, selected, onSelect, emptyStateHref, emptyStateLabel, onMintClick, className, }: AssetPickerProps): react_jsx_runtime.JSX.Element;
 
 export { AssetPicker, type AssetPickerProps, type OwnedAsset };

package/dist/components/asset-picker.d.ts

@@ -13,8 +13,9 @@ interface AssetPickerProps {
     onSelect: (asset: OwnedAsset) => void;
     emptyStateHref?: string;
     emptyStateLabel?: string;
+    onMintClick?: () => void;
     className?: string;
 }
-declare function AssetPicker({ assets, isLoading, selected, onSelect, emptyStateHref, emptyStateLabel, className, }: AssetPickerProps): react_jsx_runtime.JSX.Element;
+declare function AssetPicker({ assets, isLoading, selected, onSelect, emptyStateHref, emptyStateLabel, onMintClick, className, }: AssetPickerProps): react_jsx_runtime.JSX.Element;
 
 export { AssetPicker, type AssetPickerProps, type OwnedAsset };

package/dist/components/asset-picker.js

@@ -1,9 +1,41 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { Search } from "lucide-react";
+import { Search, Plus, Sparkles } from "lucide-react";
 import { cn } from "../utils/cn.js";
 import { AssetPickerCell, isSameAsset } from "./asset-picker-cell.js";
+function MintPromoCard({ onMintClick }) {
+  return /* @__PURE__ */ jsx("div", { className: "rounded-2xl p-[1.5px] bg-gradient-to-br from-brand-purple to-brand-orange", children: /* @__PURE__ */ jsxs("div", { className: "rounded-[15px] bg-card p-5 flex flex-col sm:flex-row sm:items-center gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "h-11 w-11 rounded-xl bg-gradient-to-br from-brand-purple to-brand-orange flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(Sparkles, { className: "h-5 w-5 text-white" }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-bold text-foreground", children: "Mint your first asset" }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: "It becomes your avatar and app theme \u2014 ready in seconds." })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "btn-border-animated shrink-0 p-[1px] rounded-xl", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onMintClick,
+        className: "h-10 px-4 rounded-[11px] bg-card text-sm font-semibold text-foreground hover:brightness-110 active:scale-[0.98] transition-all whitespace-nowrap",
+        children: "Mint an asset"
+      }
+    ) })
+  ] }) });
+}
+function MintTile({ onMintClick }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onMintClick,
+      className: "aspect-square rounded-xl border-2 border-dashed border-brand-purple/40 hover:border-brand-purple/70 hover:bg-brand-purple/5 transition-colors flex flex-col items-center justify-center gap-1 text-brand-purple",
+      children: [
+        /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx("span", { className: "text-2xs font-semibold", children: "New" })
+      ]
+    }
+  );
+}
 function AssetPicker({
   assets,
   isLoading,
@@ -11,6 +43,7 @@ function AssetPicker({
   onSelect,
   emptyStateHref,
   emptyStateLabel,
+  onMintClick,
   className
 }) {
   const [query, setQuery] = useState("");
@@ -19,6 +52,7 @@ function AssetPicker({
     return /* @__PURE__ */ jsx("div", { className: cn("grid grid-cols-3 sm:grid-cols-4 gap-2.5", className), children: Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx("div", { className: "aspect-square rounded-xl bg-muted/60 animate-pulse" }, i)) });
   }
   if (assets.length === 0) {
+    if (onMintClick) return /* @__PURE__ */ jsx(MintPromoCard, { onMintClick });
     return /* @__PURE__ */ jsxs("div", { className: cn("rounded-xl border border-dashed border-border/60 p-6 text-center text-sm text-muted-foreground", className), children: [
       "You don't own any assets yet.",
       emptyStateHref ? /* @__PURE__ */ jsx("a", { href: emptyStateHref, className: "ml-1 font-semibold text-foreground underline underline-offset-2", children: emptyStateLabel ?? "Create one" }) : null
@@ -38,15 +72,18 @@ function AssetPicker({
         }
       )
     ] }) : null,
-    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5", children: filtered.map((asset) => /* @__PURE__ */ jsx(
-      AssetPickerCell,
-      {
-        asset,
-        active: isSameAsset(asset, selected),
-        onSelect
-      },
-      `${asset.contractAddress}-${asset.tokenId}`
-    )) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5", children: [
+      filtered.map((asset) => /* @__PURE__ */ jsx(
+        AssetPickerCell,
+        {
+          asset,
+          active: isSameAsset(asset, selected),
+          onSelect
+        },
+        `${asset.contractAddress}-${asset.tokenId}`
+      )),
+      onMintClick && !query ? /* @__PURE__ */ jsx(MintTile, { onMintClick }) : null
+    ] }),
     query && filtered.length === 0 ? /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground text-center py-4", children: [
       'No assets match "',
       query,

package/dist/components/asset-picker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/asset-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Search } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { AssetPickerCell, isSameAsset } from \"./asset-picker-cell.js\";\n\nexport interface OwnedAsset {\n  contractAddress: string;\n  tokenId: string;\n  name: string;\n  image: string | null;\n}\n\nexport interface AssetPickerProps {\n\n  assets: OwnedAsset[];\n  isLoading: boolean;\n  selected: OwnedAsset | null;\n  onSelect: (asset: OwnedAsset) => void;\n\n  emptyStateHref?: string;\n  emptyStateLabel?: string;\n  className?: string;\n}\n\nexport function AssetPicker({\n  assets, isLoading, selected, onSelect, emptyStateHref, emptyStateLabel, className,\n}: AssetPickerProps) {\n  const [query, setQuery] = useState(\"\");\n  const filtered = query\n    ? assets.filter((a) => a.name.toLowerCase().includes(query.toLowerCase()))\n    : assets;\n\n  if (isLoading) {\n    return (\n      <div className={cn(\"grid grid-cols-3 sm:grid-cols-4 gap-2.5\", className)}>\n        {Array.from({ length: 8 }).map((_, i) => (\n          <div key={i} className=\"aspect-square rounded-xl bg-muted/60 animate-pulse\" />\n        ))}\n      </div>\n    );\n  }\n\n  if (assets.length === 0) {\n    return (\n      <div className={cn(\"rounded-xl border border-dashed border-border/60 p-6 text-center text-sm text-muted-foreground\", className)}>\n        You don&apos;t own any assets yet.\n        {emptyStateHref ? (\n          <a href={emptyStateHref} className=\"ml-1 font-semibold text-foreground underline underline-offset-2\">\n            {emptyStateLabel ?? \"Create one\"}\n          </a>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      {assets.length > 8 ? (\n        <div className=\"relative\">\n          <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n          <input\n            type=\"text\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search your assets\"\n            className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n          />\n        </div>\n      ) : null}\n\n      <div className=\"grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5\">\n        {filtered.map((asset) => (\n          <AssetPickerCell\n            key={`${asset.contractAddress}-${asset.tokenId}`}\n            asset={asset}\n            active={isSameAsset(asset, selected)}\n            onSelect={onSelect}\n          />\n        ))}\n      </div>\n\n      {query && filtered.length === 0 ? (\n        <p className=\"text-xs text-muted-foreground text-center py-4\">No assets match &quot;{query}&quot;.</p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";AAsCU,cAQJ,YARI;AApCV,SAAS,gBAAgB;AACzB,SAAS,cAAc;AACvB,SAAS,UAAU;AACnB,SAAS,iBAAiB,mBAAmB;AAqBtC,SAAS,YAAY;AAAA,EAC1B;AAAA,EAAQ;AAAA,EAAW;AAAA,EAAU;AAAA,EAAU;AAAA,EAAgB;AAAA,EAAiB;AAC1E,GAAqB;AACnB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,WAAW,QACb,OAAO,OAAO,CAAC,MAAM,EAAE,KAAK,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC,CAAC,IACvE;AAEJ,MAAI,WAAW;AACb,WACE,oBAAC,SAAI,WAAW,GAAG,2CAA2C,SAAS,GACpE,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,oBAAC,SAAY,WAAU,wDAAb,CAAkE,CAC7E,GACH;AAAA,EAEJ;AAEA,MAAI,OAAO,WAAW,GAAG;AACvB,WACE,qBAAC,SAAI,WAAW,GAAG,kGAAkG,SAAS,GAAG;AAAA;AAAA,MAE9H,iBACC,oBAAC,OAAE,MAAM,gBAAgB,WAAU,mEAChC,6BAAmB,cACtB,IACE;AAAA,OACN;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACtC;AAAA,WAAO,SAAS,IACf,qBAAC,SAAI,WAAU,YACb;AAAA,0BAAC,UAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,OACF,IACE;AAAA,IAEJ,oBAAC,SAAI,WAAU,2EACZ,mBAAS,IAAI,CAAC,UACb;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,QAAQ,YAAY,OAAO,QAAQ;AAAA,QACnC;AAAA;AAAA,MAHK,GAAG,MAAM,eAAe,IAAI,MAAM,OAAO;AAAA,IAIhD,CACD,GACH;AAAA,IAEC,SAAS,SAAS,WAAW,IAC5B,qBAAC,OAAE,WAAU,kDAAiD;AAAA;AAAA,MAAuB;AAAA,MAAM;AAAA,OAAO,IAChG;AAAA,KACN;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/asset-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { Search, Plus, Sparkles } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { AssetPickerCell, isSameAsset } from \"./asset-picker-cell.js\";\n\nexport interface OwnedAsset {\n  contractAddress: string;\n  tokenId: string;\n  name: string;\n  image: string | null;\n}\n\nexport interface AssetPickerProps {\n\n  assets: OwnedAsset[];\n  isLoading: boolean;\n  selected: OwnedAsset | null;\n  onSelect: (asset: OwnedAsset) => void;\n\n  emptyStateHref?: string;\n  emptyStateLabel?: string;\n  onMintClick?: () => void;\n  className?: string;\n}\n\nfunction MintPromoCard({ onMintClick }: { onMintClick: () => void }) {\n  return (\n    <div className=\"rounded-2xl p-[1.5px] bg-gradient-to-br from-brand-purple to-brand-orange\">\n      <div className=\"rounded-[15px] bg-card p-5 flex flex-col sm:flex-row sm:items-center gap-4\">\n        <div className=\"h-11 w-11 rounded-xl bg-gradient-to-br from-brand-purple to-brand-orange flex items-center justify-center shrink-0\">\n          <Sparkles className=\"h-5 w-5 text-white\" />\n        </div>\n        <div className=\"flex-1 min-w-0\">\n          <p className=\"text-sm font-bold text-foreground\">Mint your first asset</p>\n          <p className=\"text-xs text-muted-foreground mt-0.5\">It becomes your avatar and app theme — ready in seconds.</p>\n        </div>\n        <div className=\"btn-border-animated shrink-0 p-[1px] rounded-xl\">\n          <button\n            type=\"button\"\n            onClick={onMintClick}\n            className=\"h-10 px-4 rounded-[11px] bg-card text-sm font-semibold text-foreground hover:brightness-110 active:scale-[0.98] transition-all whitespace-nowrap\"\n          >\n            Mint an asset\n          </button>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nfunction MintTile({ onMintClick }: { onMintClick: () => void }) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onMintClick}\n      className=\"aspect-square rounded-xl border-2 border-dashed border-brand-purple/40 hover:border-brand-purple/70 hover:bg-brand-purple/5 transition-colors flex flex-col items-center justify-center gap-1 text-brand-purple\"\n    >\n      <Plus className=\"h-4 w-4\" />\n      <span className=\"text-2xs font-semibold\">New</span>\n    </button>\n  );\n}\n\nexport function AssetPicker({\n  assets, isLoading, selected, onSelect, emptyStateHref, emptyStateLabel, onMintClick, className,\n}: AssetPickerProps) {\n  const [query, setQuery] = useState(\"\");\n  const filtered = query\n    ? assets.filter((a) => a.name.toLowerCase().includes(query.toLowerCase()))\n    : assets;\n\n  if (isLoading) {\n    return (\n      <div className={cn(\"grid grid-cols-3 sm:grid-cols-4 gap-2.5\", className)}>\n        {Array.from({ length: 8 }).map((_, i) => (\n          <div key={i} className=\"aspect-square rounded-xl bg-muted/60 animate-pulse\" />\n        ))}\n      </div>\n    );\n  }\n\n  if (assets.length === 0) {\n    if (onMintClick) return <MintPromoCard onMintClick={onMintClick} />;\n    return (\n      <div className={cn(\"rounded-xl border border-dashed border-border/60 p-6 text-center text-sm text-muted-foreground\", className)}>\n        You don&apos;t own any assets yet.\n        {emptyStateHref ? (\n          <a href={emptyStateHref} className=\"ml-1 font-semibold text-foreground underline underline-offset-2\">\n            {emptyStateLabel ?? \"Create one\"}\n          </a>\n        ) : null}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(\"space-y-3\", className)}>\n      {assets.length > 8 ? (\n        <div className=\"relative\">\n          <Search className=\"absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none\" />\n          <input\n            type=\"text\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            placeholder=\"Search your assets\"\n            className=\"w-full h-10 rounded-full border border-border bg-card pl-9 pr-4 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-brand-purple/40 focus:border-brand-purple/40\"\n          />\n        </div>\n      ) : null}\n\n      <div className=\"grid grid-cols-3 sm:grid-cols-4 gap-2.5 max-h-80 overflow-y-auto pr-0.5\">\n        {filtered.map((asset) => (\n          <AssetPickerCell\n            key={`${asset.contractAddress}-${asset.tokenId}`}\n            asset={asset}\n            active={isSameAsset(asset, selected)}\n            onSelect={onSelect}\n          />\n        ))}\n        {onMintClick && !query ? <MintTile onMintClick={onMintClick} /> : null}\n      </div>\n\n      {query && filtered.length === 0 ? (\n        <p className=\"text-xs text-muted-foreground text-center py-4\">No assets match &quot;{query}&quot;.</p>\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";AAgCU,cAEF,YAFE;AA9BV,SAAS,gBAAgB;AACzB,SAAS,QAAQ,MAAM,gBAAgB;AACvC,SAAS,UAAU;AACnB,SAAS,iBAAiB,mBAAmB;AAsB7C,SAAS,cAAc,EAAE,YAAY,GAAgC;AACnE,SACE,oBAAC,SAAI,WAAU,6EACb,+BAAC,SAAI,WAAU,8EACb;AAAA,wBAAC,SAAI,WAAU,sHACb,8BAAC,YAAS,WAAU,sBAAqB,GAC3C;AAAA,IACA,qBAAC,SAAI,WAAU,kBACb;AAAA,0BAAC,OAAE,WAAU,qCAAoC,mCAAqB;AAAA,MACtE,oBAAC,OAAE,WAAU,wCAAuC,2EAAwD;AAAA,OAC9G;AAAA,IACA,oBAAC,SAAI,WAAU,mDACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAU;AAAA,QACX;AAAA;AAAA,IAED,GACF;AAAA,KACF,GACF;AAEJ;AAEA,SAAS,SAAS,EAAE,YAAY,GAAgC;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAU;AAAA,MAEV;AAAA,4BAAC,QAAK,WAAU,WAAU;AAAA,QAC1B,oBAAC,UAAK,WAAU,0BAAyB,iBAAG;AAAA;AAAA;AAAA,EAC9C;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EAAQ;AAAA,EAAW;AAAA,EAAU;AAAA,EAAU;AAAA,EAAgB;AAAA,EAAiB;AAAA,EAAa;AACvF,GAAqB;AACnB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,WAAW,QACb,OAAO,OAAO,CAAC,MAAM,EAAE,KAAK,YAAY,EAAE,SAAS,MAAM,YAAY,CAAC,CAAC,IACvE;AAEJ,MAAI,WAAW;AACb,WACE,oBAAC,SAAI,WAAW,GAAG,2CAA2C,SAAS,GACpE,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,oBAAC,SAAY,WAAU,wDAAb,CAAkE,CAC7E,GACH;AAAA,EAEJ;AAEA,MAAI,OAAO,WAAW,GAAG;AACvB,QAAI,YAAa,QAAO,oBAAC,iBAAc,aAA0B;AACjE,WACE,qBAAC,SAAI,WAAW,GAAG,kGAAkG,SAAS,GAAG;AAAA;AAAA,MAE9H,iBACC,oBAAC,OAAE,MAAM,gBAAgB,WAAU,mEAChC,6BAAmB,cACtB,IACE;AAAA,OACN;AAAA,EAEJ;AAEA,SACE,qBAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACtC;AAAA,WAAO,SAAS,IACf,qBAAC,SAAI,WAAU,YACb;AAAA,0BAAC,UAAO,WAAU,8FAA6F;AAAA,MAC/G;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,OAAO;AAAA,UACP,UAAU,CAAC,MAAM,SAAS,EAAE,OAAO,KAAK;AAAA,UACxC,aAAY;AAAA,UACZ,WAAU;AAAA;AAAA,MACZ;AAAA,OACF,IACE;AAAA,IAEJ,qBAAC,SAAI,WAAU,2EACZ;AAAA,eAAS,IAAI,CAAC,UACb;AAAA,QAAC;AAAA;AAAA,UAEC;AAAA,UACA,QAAQ,YAAY,OAAO,QAAQ;AAAA,UACnC;AAAA;AAAA,QAHK,GAAG,MAAM,eAAe,IAAI,MAAM,OAAO;AAAA,MAIhD,CACD;AAAA,MACA,eAAe,CAAC,QAAQ,oBAAC,YAAS,aAA0B,IAAK;AAAA,OACpE;AAAA,IAEC,SAAS,SAAS,WAAW,IAC5B,qBAAC,OAAE,WAAU,kDAAiD;AAAA;AAAA,MAAuB;AAAA,MAAM;AAAA,OAAO,IAChG;AAAA,KACN;AAEJ;","names":[]}

package/dist/components/claim-rail.cjs

@@ -23,12 +23,22 @@ __export(claim_rail_exports, {
 module.exports = __toCommonJS(claim_rail_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lucide_react = require("lucide-react");
-function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = import_lucide_react.ShieldCheck }) {
+var import_cn = require("../utils/cn.js");
+function ClaimRail({
+  included,
+  steps,
+  trustLead,
+  trust,
+  trustIcon: TrustIcon = import_lucide_react.ShieldCheck,
+  includedAccentClass = "bg-brand-blue/10 text-brand-blue",
+  stepAccentClass = "bg-brand-purple/10 text-brand-purple",
+  trustAccentClass = "text-brand-orange"
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl bg-muted/50 dark:bg-card divide-y divide-border/60 overflow-hidden", children: [
     included && included.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "p-5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "section-label", children: "What's included" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "mt-4 space-y-4", children: included.map(({ icon: Icon, title, desc }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-8 w-8 rounded-lg bg-brand-blue/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-4 w-4 text-brand-blue" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("h-8 w-8 rounded-lg flex items-center justify-center shrink-0", includedAccentClass), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-semibold text-foreground", children: title }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground leading-relaxed mt-0.5", children: desc })
@@ -38,12 +48,12 @@ function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = i
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "p-5", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "section-label", children: "How it works" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ol", { className: "mt-4 space-y-3", children: steps.map((label, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-sm font-bold tabular-nums", children: i + 1 }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_cn.cn)("h-8 w-8 rounded-lg flex items-center justify-center shrink-0 text-sm font-bold tabular-nums", stepAccentClass), children: i + 1 }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-foreground/90", children: label })
       ] }, label)) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "p-5 bg-muted/40 flex items-start gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TrustIcon, { className: "h-5 w-5 text-brand-orange shrink-0 mt-0.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TrustIcon, { className: (0, import_cn.cn)("h-5 w-5 shrink-0 mt-0.5", trustAccentClass) }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-sm text-muted-foreground leading-relaxed", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-foreground", children: trustLead }),
         " ",

package/dist/components/claim-rail.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/claim-rail.tsx"],"sourcesContent":["import { ShieldCheck, type LucideIcon } from \"lucide-react\";\n\nexport interface ClaimRailProps {\n\n  included?: { icon: LucideIcon; title: string; desc: string }[];\n\n  steps: string[];\n\n  trustLead: string;\n  trust: string;\n\n  trustIcon?: LucideIcon;\n}\n\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n  return (\n    <div className=\"rounded-2xl bg-muted/50 dark:bg-card divide-y divide-border/60 overflow-hidden\">\n      {included && included.length > 0 && (\n        <section className=\"p-5\">\n          <p className=\"section-label\">What&apos;s included</p>\n          <ul className=\"mt-4 space-y-4\">\n            {included.map(({ icon: Icon, title, desc }) => (\n              <li key={title} className=\"flex items-start gap-3\">\n                <div className=\"h-8 w-8 rounded-lg bg-brand-blue/10 flex items-center justify-center shrink-0\">\n                  <Icon className=\"h-4 w-4 text-brand-blue\" />\n                </div>\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-semibold text-foreground\">{title}</p>\n                  <p className=\"text-sm text-muted-foreground leading-relaxed mt-0.5\">{desc}</p>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </section>\n      )}\n\n      <section className=\"p-5\">\n        <p className=\"section-label\">How it works</p>\n        <ol className=\"mt-4 space-y-3\">\n          {steps.map((label, i) => (\n            <li key={label} className=\"flex items-center gap-3\">\n              <span className=\"h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-sm font-bold tabular-nums\">\n                {i + 1}\n              </span>\n              <span className=\"text-sm text-foreground/90\">{label}</span>\n            </li>\n          ))}\n        </ol>\n      </section>\n\n      <section className=\"p-5 bg-muted/40 flex items-start gap-3\">\n        <TrustIcon className=\"h-5 w-5 text-brand-orange shrink-0 mt-0.5\" />\n        <p className=\"text-sm text-muted-foreground leading-relaxed\">\n          <span className=\"font-semibold text-foreground\">{trustLead}</span> {trust}\n        </p>\n      </section>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBU;AAnBV,0BAA6C;AActC,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,gCAAY,GAAmB;AACnH,SACE,6CAAC,SAAI,WAAU,kFACZ;AAAA,gBAAY,SAAS,SAAS,KAC7B,6CAAC,aAAQ,WAAU,OACjB;AAAA,kDAAC,OAAE,WAAU,iBAAgB,6BAAoB;AAAA,MACjD,4CAAC,QAAG,WAAU,kBACX,mBAAS,IAAI,CAAC,EAAE,MAAM,MAAM,OAAO,KAAK,MACvC,6CAAC,QAAe,WAAU,0BACxB;AAAA,oDAAC,SAAI,WAAU,iFACb,sDAAC,QAAK,WAAU,2BAA0B,GAC5C;AAAA,QACA,6CAAC,SAAI,WAAU,WACb;AAAA,sDAAC,OAAE,WAAU,yCAAyC,iBAAM;AAAA,UAC5D,4CAAC,OAAE,WAAU,wDAAwD,gBAAK;AAAA,WAC5E;AAAA,WAPO,KAQT,CACD,GACH;AAAA,OACF;AAAA,IAGF,6CAAC,aAAQ,WAAU,OACjB;AAAA,kDAAC,OAAE,WAAU,iBAAgB,0BAAY;AAAA,MACzC,4CAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,OAAO,MACjB,6CAAC,QAAe,WAAU,2BACxB;AAAA,oDAAC,UAAK,WAAU,oIACb,cAAI,GACP;AAAA,QACA,4CAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,WAJ7C,KAKT,CACD,GACH;AAAA,OACF;AAAA,IAEA,6CAAC,aAAQ,WAAU,0CACjB;AAAA,kDAAC,aAAU,WAAU,6CAA4C;AAAA,MACjE,6CAAC,OAAE,WAAU,iDACX;AAAA,oDAAC,UAAK,WAAU,iCAAiC,qBAAU;AAAA,QAAO;AAAA,QAAE;AAAA,SACtE;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/claim-rail.tsx"],"sourcesContent":["import { ShieldCheck, type LucideIcon } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface ClaimRailProps {\n\n  included?: { icon: LucideIcon; title: string; desc: string }[];\n\n  steps: string[];\n\n  trustLead: string;\n  trust: string;\n\n  trustIcon?: LucideIcon;\n\n  includedAccentClass?: string;\n  stepAccentClass?: string;\n  trustAccentClass?: string;\n}\n\nexport function ClaimRail({\n  included,\n  steps,\n  trustLead,\n  trust,\n  trustIcon: TrustIcon = ShieldCheck,\n  includedAccentClass = \"bg-brand-blue/10 text-brand-blue\",\n  stepAccentClass = \"bg-brand-purple/10 text-brand-purple\",\n  trustAccentClass = \"text-brand-orange\",\n}: ClaimRailProps) {\n  return (\n    <div className=\"rounded-2xl bg-muted/50 dark:bg-card divide-y divide-border/60 overflow-hidden\">\n      {included && included.length > 0 && (\n        <section className=\"p-5\">\n          <p className=\"section-label\">What&apos;s included</p>\n          <ul className=\"mt-4 space-y-4\">\n            {included.map(({ icon: Icon, title, desc }) => (\n              <li key={title} className=\"flex items-start gap-3\">\n                <div className={cn(\"h-8 w-8 rounded-lg flex items-center justify-center shrink-0\", includedAccentClass)}>\n                  <Icon className=\"h-4 w-4\" />\n                </div>\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-semibold text-foreground\">{title}</p>\n                  <p className=\"text-sm text-muted-foreground leading-relaxed mt-0.5\">{desc}</p>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </section>\n      )}\n\n      <section className=\"p-5\">\n        <p className=\"section-label\">How it works</p>\n        <ol className=\"mt-4 space-y-3\">\n          {steps.map((label, i) => (\n            <li key={label} className=\"flex items-center gap-3\">\n              <span className={cn(\"h-8 w-8 rounded-lg flex items-center justify-center shrink-0 text-sm font-bold tabular-nums\", stepAccentClass)}>\n                {i + 1}\n              </span>\n              <span className=\"text-sm text-foreground/90\">{label}</span>\n            </li>\n          ))}\n        </ol>\n      </section>\n\n      <section className=\"p-5 bg-muted/40 flex items-start gap-3\">\n        <TrustIcon className={cn(\"h-5 w-5 shrink-0 mt-0.5\", trustAccentClass)} />\n        <p className=\"text-sm text-muted-foreground leading-relaxed\">\n          <span className=\"font-semibold text-foreground\">{trustLead}</span> {trust}\n        </p>\n      </section>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCU;AAjCV,0BAA6C;AAC7C,gBAAmB;AAkBZ,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,YAAY;AAAA,EACvB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,mBAAmB;AACrB,GAAmB;AACjB,SACE,6CAAC,SAAI,WAAU,kFACZ;AAAA,gBAAY,SAAS,SAAS,KAC7B,6CAAC,aAAQ,WAAU,OACjB;AAAA,kDAAC,OAAE,WAAU,iBAAgB,6BAAoB;AAAA,MACjD,4CAAC,QAAG,WAAU,kBACX,mBAAS,IAAI,CAAC,EAAE,MAAM,MAAM,OAAO,KAAK,MACvC,6CAAC,QAAe,WAAU,0BACxB;AAAA,oDAAC,SAAI,eAAW,cAAG,gEAAgE,mBAAmB,GACpG,sDAAC,QAAK,WAAU,WAAU,GAC5B;AAAA,QACA,6CAAC,SAAI,WAAU,WACb;AAAA,sDAAC,OAAE,WAAU,yCAAyC,iBAAM;AAAA,UAC5D,4CAAC,OAAE,WAAU,wDAAwD,gBAAK;AAAA,WAC5E;AAAA,WAPO,KAQT,CACD,GACH;AAAA,OACF;AAAA,IAGF,6CAAC,aAAQ,WAAU,OACjB;AAAA,kDAAC,OAAE,WAAU,iBAAgB,0BAAY;AAAA,MACzC,4CAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,OAAO,MACjB,6CAAC,QAAe,WAAU,2BACxB;AAAA,oDAAC,UAAK,eAAW,cAAG,+FAA+F,eAAe,GAC/H,cAAI,GACP;AAAA,QACA,4CAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,WAJ7C,KAKT,CACD,GACH;AAAA,OACF;AAAA,IAEA,6CAAC,aAAQ,WAAU,0CACjB;AAAA,kDAAC,aAAU,eAAW,cAAG,2BAA2B,gBAAgB,GAAG;AAAA,MACvE,6CAAC,OAAE,WAAU,iDACX;AAAA,oDAAC,UAAK,WAAU,iCAAiC,qBAAU;AAAA,QAAO;AAAA,QAAE;AAAA,SACtE;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/claim-rail.d.cts

@@ -11,7 +11,10 @@ interface ClaimRailProps {
     trustLead: string;
     trust: string;
     trustIcon?: LucideIcon;
+    includedAccentClass?: string;
+    stepAccentClass?: string;
+    trustAccentClass?: string;
 }
-declare function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon }: ClaimRailProps): react_jsx_runtime.JSX.Element;
+declare function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon, includedAccentClass, stepAccentClass, trustAccentClass, }: ClaimRailProps): react_jsx_runtime.JSX.Element;
 
 export { ClaimRail, type ClaimRailProps };

package/dist/components/claim-rail.d.ts

@@ -11,7 +11,10 @@ interface ClaimRailProps {
     trustLead: string;
     trust: string;
     trustIcon?: LucideIcon;
+    includedAccentClass?: string;
+    stepAccentClass?: string;
+    trustAccentClass?: string;
 }
-declare function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon }: ClaimRailProps): react_jsx_runtime.JSX.Element;
+declare function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon, includedAccentClass, stepAccentClass, trustAccentClass, }: ClaimRailProps): react_jsx_runtime.JSX.Element;
 
 export { ClaimRail, type ClaimRailProps };

package/dist/components/claim-rail.js

@@ -1,11 +1,21 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ShieldCheck } from "lucide-react";
-function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }) {
+import { cn } from "../utils/cn.js";
+function ClaimRail({
+  included,
+  steps,
+  trustLead,
+  trust,
+  trustIcon: TrustIcon = ShieldCheck,
+  includedAccentClass = "bg-brand-blue/10 text-brand-blue",
+  stepAccentClass = "bg-brand-purple/10 text-brand-purple",
+  trustAccentClass = "text-brand-orange"
+}) {
   return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl bg-muted/50 dark:bg-card divide-y divide-border/60 overflow-hidden", children: [
     included && included.length > 0 && /* @__PURE__ */ jsxs("section", { className: "p-5", children: [
       /* @__PURE__ */ jsx("p", { className: "section-label", children: "What's included" }),
       /* @__PURE__ */ jsx("ul", { className: "mt-4 space-y-4", children: included.map(({ icon: Icon, title, desc }) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "h-8 w-8 rounded-lg bg-brand-blue/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-brand-blue" }) }),
+        /* @__PURE__ */ jsx("div", { className: cn("h-8 w-8 rounded-lg flex items-center justify-center shrink-0", includedAccentClass), children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }) }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: title }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground leading-relaxed mt-0.5", children: desc })
@@ -15,12 +25,12 @@ function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = S
     /* @__PURE__ */ jsxs("section", { className: "p-5", children: [
       /* @__PURE__ */ jsx("p", { className: "section-label", children: "How it works" }),
       /* @__PURE__ */ jsx("ol", { className: "mt-4 space-y-3", children: steps.map((label, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("span", { className: "h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-sm font-bold tabular-nums", children: i + 1 }),
+        /* @__PURE__ */ jsx("span", { className: cn("h-8 w-8 rounded-lg flex items-center justify-center shrink-0 text-sm font-bold tabular-nums", stepAccentClass), children: i + 1 }),
         /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground/90", children: label })
       ] }, label)) })
     ] }),
     /* @__PURE__ */ jsxs("section", { className: "p-5 bg-muted/40 flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx(TrustIcon, { className: "h-5 w-5 text-brand-orange shrink-0 mt-0.5" }),
+      /* @__PURE__ */ jsx(TrustIcon, { className: cn("h-5 w-5 shrink-0 mt-0.5", trustAccentClass) }),
       /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground leading-relaxed", children: [
         /* @__PURE__ */ jsx("span", { className: "font-semibold text-foreground", children: trustLead }),
         " ",

package/dist/components/claim-rail.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/claim-rail.tsx"],"sourcesContent":["import { ShieldCheck, type LucideIcon } from \"lucide-react\";\n\nexport interface ClaimRailProps {\n\n  included?: { icon: LucideIcon; title: string; desc: string }[];\n\n  steps: string[];\n\n  trustLead: string;\n  trust: string;\n\n  trustIcon?: LucideIcon;\n}\n\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n  return (\n    <div className=\"rounded-2xl bg-muted/50 dark:bg-card divide-y divide-border/60 overflow-hidden\">\n      {included && included.length > 0 && (\n        <section className=\"p-5\">\n          <p className=\"section-label\">What&apos;s included</p>\n          <ul className=\"mt-4 space-y-4\">\n            {included.map(({ icon: Icon, title, desc }) => (\n              <li key={title} className=\"flex items-start gap-3\">\n                <div className=\"h-8 w-8 rounded-lg bg-brand-blue/10 flex items-center justify-center shrink-0\">\n                  <Icon className=\"h-4 w-4 text-brand-blue\" />\n                </div>\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-semibold text-foreground\">{title}</p>\n                  <p className=\"text-sm text-muted-foreground leading-relaxed mt-0.5\">{desc}</p>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </section>\n      )}\n\n      <section className=\"p-5\">\n        <p className=\"section-label\">How it works</p>\n        <ol className=\"mt-4 space-y-3\">\n          {steps.map((label, i) => (\n            <li key={label} className=\"flex items-center gap-3\">\n              <span className=\"h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-sm font-bold tabular-nums\">\n                {i + 1}\n              </span>\n              <span className=\"text-sm text-foreground/90\">{label}</span>\n            </li>\n          ))}\n        </ol>\n      </section>\n\n      <section className=\"p-5 bg-muted/40 flex items-start gap-3\">\n        <TrustIcon className=\"h-5 w-5 text-brand-orange shrink-0 mt-0.5\" />\n        <p className=\"text-sm text-muted-foreground leading-relaxed\">\n          <span className=\"font-semibold text-foreground\">{trustLead}</span> {trust}\n        </p>\n      </section>\n    </div>\n  );\n}\n"],"mappings":"AAmBU,cAOM,YAPN;AAnBV,SAAS,mBAAoC;AActC,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,YAAY,GAAmB;AACnH,SACE,qBAAC,SAAI,WAAU,kFACZ;AAAA,gBAAY,SAAS,SAAS,KAC7B,qBAAC,aAAQ,WAAU,OACjB;AAAA,0BAAC,OAAE,WAAU,iBAAgB,6BAAoB;AAAA,MACjD,oBAAC,QAAG,WAAU,kBACX,mBAAS,IAAI,CAAC,EAAE,MAAM,MAAM,OAAO,KAAK,MACvC,qBAAC,QAAe,WAAU,0BACxB;AAAA,4BAAC,SAAI,WAAU,iFACb,8BAAC,QAAK,WAAU,2BAA0B,GAC5C;AAAA,QACA,qBAAC,SAAI,WAAU,WACb;AAAA,8BAAC,OAAE,WAAU,yCAAyC,iBAAM;AAAA,UAC5D,oBAAC,OAAE,WAAU,wDAAwD,gBAAK;AAAA,WAC5E;AAAA,WAPO,KAQT,CACD,GACH;AAAA,OACF;AAAA,IAGF,qBAAC,aAAQ,WAAU,OACjB;AAAA,0BAAC,OAAE,WAAU,iBAAgB,0BAAY;AAAA,MACzC,oBAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,OAAO,MACjB,qBAAC,QAAe,WAAU,2BACxB;AAAA,4BAAC,UAAK,WAAU,oIACb,cAAI,GACP;AAAA,QACA,oBAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,WAJ7C,KAKT,CACD,GACH;AAAA,OACF;AAAA,IAEA,qBAAC,aAAQ,WAAU,0CACjB;AAAA,0BAAC,aAAU,WAAU,6CAA4C;AAAA,MACjE,qBAAC,OAAE,WAAU,iDACX;AAAA,4BAAC,UAAK,WAAU,iCAAiC,qBAAU;AAAA,QAAO;AAAA,QAAE;AAAA,SACtE;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/claim-rail.tsx"],"sourcesContent":["import { ShieldCheck, type LucideIcon } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\n\nexport interface ClaimRailProps {\n\n  included?: { icon: LucideIcon; title: string; desc: string }[];\n\n  steps: string[];\n\n  trustLead: string;\n  trust: string;\n\n  trustIcon?: LucideIcon;\n\n  includedAccentClass?: string;\n  stepAccentClass?: string;\n  trustAccentClass?: string;\n}\n\nexport function ClaimRail({\n  included,\n  steps,\n  trustLead,\n  trust,\n  trustIcon: TrustIcon = ShieldCheck,\n  includedAccentClass = \"bg-brand-blue/10 text-brand-blue\",\n  stepAccentClass = \"bg-brand-purple/10 text-brand-purple\",\n  trustAccentClass = \"text-brand-orange\",\n}: ClaimRailProps) {\n  return (\n    <div className=\"rounded-2xl bg-muted/50 dark:bg-card divide-y divide-border/60 overflow-hidden\">\n      {included && included.length > 0 && (\n        <section className=\"p-5\">\n          <p className=\"section-label\">What&apos;s included</p>\n          <ul className=\"mt-4 space-y-4\">\n            {included.map(({ icon: Icon, title, desc }) => (\n              <li key={title} className=\"flex items-start gap-3\">\n                <div className={cn(\"h-8 w-8 rounded-lg flex items-center justify-center shrink-0\", includedAccentClass)}>\n                  <Icon className=\"h-4 w-4\" />\n                </div>\n                <div className=\"min-w-0\">\n                  <p className=\"text-sm font-semibold text-foreground\">{title}</p>\n                  <p className=\"text-sm text-muted-foreground leading-relaxed mt-0.5\">{desc}</p>\n                </div>\n              </li>\n            ))}\n          </ul>\n        </section>\n      )}\n\n      <section className=\"p-5\">\n        <p className=\"section-label\">How it works</p>\n        <ol className=\"mt-4 space-y-3\">\n          {steps.map((label, i) => (\n            <li key={label} className=\"flex items-center gap-3\">\n              <span className={cn(\"h-8 w-8 rounded-lg flex items-center justify-center shrink-0 text-sm font-bold tabular-nums\", stepAccentClass)}>\n                {i + 1}\n              </span>\n              <span className=\"text-sm text-foreground/90\">{label}</span>\n            </li>\n          ))}\n        </ol>\n      </section>\n\n      <section className=\"p-5 bg-muted/40 flex items-start gap-3\">\n        <TrustIcon className={cn(\"h-5 w-5 shrink-0 mt-0.5\", trustAccentClass)} />\n        <p className=\"text-sm text-muted-foreground leading-relaxed\">\n          <span className=\"font-semibold text-foreground\">{trustLead}</span> {trust}\n        </p>\n      </section>\n    </div>\n  );\n}\n"],"mappings":"AAiCU,cAOM,YAPN;AAjCV,SAAS,mBAAoC;AAC7C,SAAS,UAAU;AAkBZ,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,YAAY;AAAA,EACvB,sBAAsB;AAAA,EACtB,kBAAkB;AAAA,EAClB,mBAAmB;AACrB,GAAmB;AACjB,SACE,qBAAC,SAAI,WAAU,kFACZ;AAAA,gBAAY,SAAS,SAAS,KAC7B,qBAAC,aAAQ,WAAU,OACjB;AAAA,0BAAC,OAAE,WAAU,iBAAgB,6BAAoB;AAAA,MACjD,oBAAC,QAAG,WAAU,kBACX,mBAAS,IAAI,CAAC,EAAE,MAAM,MAAM,OAAO,KAAK,MACvC,qBAAC,QAAe,WAAU,0BACxB;AAAA,4BAAC,SAAI,WAAW,GAAG,gEAAgE,mBAAmB,GACpG,8BAAC,QAAK,WAAU,WAAU,GAC5B;AAAA,QACA,qBAAC,SAAI,WAAU,WACb;AAAA,8BAAC,OAAE,WAAU,yCAAyC,iBAAM;AAAA,UAC5D,oBAAC,OAAE,WAAU,wDAAwD,gBAAK;AAAA,WAC5E;AAAA,WAPO,KAQT,CACD,GACH;AAAA,OACF;AAAA,IAGF,qBAAC,aAAQ,WAAU,OACjB;AAAA,0BAAC,OAAE,WAAU,iBAAgB,0BAAY;AAAA,MACzC,oBAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,OAAO,MACjB,qBAAC,QAAe,WAAU,2BACxB;AAAA,4BAAC,UAAK,WAAW,GAAG,+FAA+F,eAAe,GAC/H,cAAI,GACP;AAAA,QACA,oBAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,WAJ7C,KAKT,CACD,GACH;AAAA,OACF;AAAA,IAEA,qBAAC,aAAQ,WAAU,0CACjB;AAAA,0BAAC,aAAU,WAAW,GAAG,2BAA2B,gBAAgB,GAAG;AAAA,MACvE,qBAAC,OAAE,WAAU,iDACX;AAAA,4BAAC,UAAK,WAAU,iCAAiC,qBAAU;AAAA,QAAO;AAAA,QAAE;AAAA,SACtE;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/coin-launch-preview.cjs

@@ -37,7 +37,7 @@ var import_image = __toESM(require("./image.js"), 1);
 var import_lucide_react = require("lucide-react");
 var import_cn = require("../utils/cn.js");
 var import_currency_icon = require("./currency-icon.js");
-const COIN_GRADIENT = "linear-gradient(135deg, #f6608f, #fb8b46)";
+const COIN_GRADIENT = "linear-gradient(135deg, #d5520b, #e175b0)";
 function StatValue({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "inline-flex items-center gap-1 font-bold tabular-nums text-brand-maeve", children });
 }
@@ -49,7 +49,7 @@ function CoinLaunchPreview({ data, className }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "px-5 pt-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "section-label", children: "Live preview" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-5 space-y-4", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 rounded-full p-[2px]", style: { background: COIN_GRADIENT }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center", children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: imageUrl, alt: "", fill: true, sizes: "56px", className: "object-cover", unoptimized: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.TrendingUp, { className: "h-6 w-6 text-brand-rose/70" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "shrink-0 rounded-full p-[2px]", style: { background: COIN_GRADIENT }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center", children: imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_image.default, { src: imageUrl, alt: "", fill: true, sizes: "56px", className: "object-cover", unoptimized: true }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.TrendingUp, { className: "h-6 w-6 text-brand-orange/70" }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_cn.cn)("font-bold text-lg leading-snug truncate", !name && "text-muted-foreground/50"), children: name || "Your coin" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-muted-foreground tabular-nums", children: symbol ? `$${symbol}` : "$SYMBOL" })
@@ -79,7 +79,7 @@ function CoinLaunchPreview({ data, className }) {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between text-sm", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-medium text-brand-rose", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-medium text-brand-orange", children: [
             "You keep ",
             teamPct,
             "%",
@@ -96,7 +96,7 @@ function CoinLaunchPreview({ data, className }) {
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1" })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-2xs text-muted-foreground/70", children: "Liquidity is locked forever \u2014 nobody can pull it, including us." })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-2xs text-muted-foreground/70", children: "Liquidity locks permanently at launch." })
     ] })
   ] });
 }

package/dist/components/coin-launch-preview.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/coin-launch-preview.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"./image.js\";\nimport { TrendingUp } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\n\nexport interface CoinPreviewData {\n  name: string;\n  symbol: string;\n  description: string;\n\n  imageUrl: string | null;\n\n  supplyHuman: number | null;\n  price: number;\n  quoteSymbol: string;\n  teamPct: number;\n}\n\nconst COIN_GRADIENT = \"linear-gradient(135deg, #f6608f, #fb8b46)\";\n\nfunction StatValue({ children }: { children: React.ReactNode }) {\n  return (\n    <span className=\"inline-flex items-center gap-1 font-bold tabular-nums text-brand-maeve\">\n      {children}\n    </span>\n  );\n}\n\nexport function CoinLaunchPreview({ data, className }: { data: CoinPreviewData; className?: string }) {\n  const { name, symbol, description, imageUrl, supplyHuman, price, quoteSymbol, teamPct } = data;\n  const marketCap = supplyHuman != null ? supplyHuman * price : null;\n  const yourCoins = supplyHuman != null ? supplyHuman * (teamPct / 100) : null;\n\n  return (\n    <div className={cn(\"rounded-2xl bg-muted/50 dark:bg-card overflow-hidden\", className)}>\n      <div className=\"px-5 pt-4\">\n        <p className=\"section-label\">Live preview</p>\n      </div>\n\n      <div className=\"p-5 space-y-4\">\n\n        <div className=\"flex items-center gap-3\">\n          <div className=\"shrink-0 rounded-full p-[2px]\" style={{ background: COIN_GRADIENT }}>\n            <div className=\"relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center\">\n              {imageUrl ? (\n                <Image src={imageUrl} alt=\"\" fill sizes=\"56px\" className=\"object-cover\" unoptimized />\n              ) : (\n                <TrendingUp className=\"h-6 w-6 text-brand-rose/70\" />\n              )}\n            </div>\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <p className={cn(\"font-bold text-lg leading-snug truncate\", !name && \"text-muted-foreground/50\")}>\n              {name || \"Your coin\"}\n            </p>\n            <p className=\"text-sm text-muted-foreground tabular-nums\">{symbol ? `$${symbol}` : \"$SYMBOL\"}</p>\n          </div>\n        </div>\n\n        {description ? (\n          <p className=\"text-sm text-muted-foreground leading-relaxed line-clamp-3\">{description}</p>\n        ) : null}\n\n        <div className=\"rounded-xl bg-muted/50 dark:bg-muted/30 p-4 space-y-3\">\n          <div>\n            <p className=\"text-2xs uppercase tracking-wide text-muted-foreground\">Market cap</p>\n            <p className=\"text-2xl\">\n              {marketCap != null ? (\n                <StatValue>\n                  <CurrencyIcon symbol={quoteSymbol} size={18} />\n                  {marketCap.toLocaleString()} {quoteSymbol}\n                </StatValue>\n              ) : (\n                <span className=\"text-muted-foreground\">—</span>\n              )}\n            </p>\n          </div>\n          <div className=\"flex items-center justify-between text-sm border-t border-border/60 pt-3\">\n            <span className=\"text-muted-foreground\">Launch price</span>\n            <span className=\"inline-flex items-center gap-1 font-semibold tabular-nums\">\n              <CurrencyIcon symbol={quoteSymbol} size={14} />\n              {price} {quoteSymbol} / coin\n            </span>\n          </div>\n        </div>\n\n        <div className=\"space-y-1.5\">\n          <div className=\"flex items-center justify-between text-sm\">\n            <span className=\"font-medium text-brand-rose\">\n              You keep {teamPct}%{yourCoins != null ? ` · ${yourCoins.toLocaleString()} ${symbol || \"coins\"}` : \"\"}\n            </span>\n            <span className=\"text-muted-foreground\">Community {100 - teamPct}%</span>\n          </div>\n          <div className=\"flex h-2.5 rounded-full overflow-hidden bg-muted-foreground/15\">\n            {teamPct > 0 && <div style={{ width: `${teamPct}%`, background: COIN_GRADIENT }} />}\n            <div className=\"flex-1\" />\n          </div>\n        </div>\n\n        <p className=\"text-2xs text-muted-foreground/70\">\n          Liquidity is locked forever — nobody can pull it, including us.\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBI;AAtBJ,mBAAkB;AAClB,0BAA2B;AAC3B,gBAAmB;AACnB,2BAA6B;AAe7B,MAAM,gBAAgB;AAEtB,SAAS,UAAU,EAAE,SAAS,GAAkC;AAC9D,SACE,4CAAC,UAAK,WAAU,0EACb,UACH;AAEJ;AAEO,SAAS,kBAAkB,EAAE,MAAM,UAAU,GAAkD;AACpG,QAAM,EAAE,MAAM,QAAQ,aAAa,UAAU,aAAa,OAAO,aAAa,QAAQ,IAAI;AAC1F,QAAM,YAAY,eAAe,OAAO,cAAc,QAAQ;AAC9D,QAAM,YAAY,eAAe,OAAO,eAAe,UAAU,OAAO;AAExE,SACE,6CAAC,SAAI,eAAW,cAAG,wDAAwD,SAAS,GAClF;AAAA,gDAAC,SAAI,WAAU,aACb,sDAAC,OAAE,WAAU,iBAAgB,0BAAY,GAC3C;AAAA,IAEA,6CAAC,SAAI,WAAU,iBAEb;AAAA,mDAAC,SAAI,WAAU,2BACb;AAAA,oDAAC,SAAI,WAAU,iCAAgC,OAAO,EAAE,YAAY,cAAc,GAChF,sDAAC,SAAI,WAAU,4FACZ,qBACC,4CAAC,aAAAA,SAAA,EAAM,KAAK,UAAU,KAAI,IAAG,MAAI,MAAC,OAAM,QAAO,WAAU,gBAAe,aAAW,MAAC,IAEpF,4CAAC,kCAAW,WAAU,8BAA6B,GAEvD,GACF;AAAA,QACA,6CAAC,SAAI,WAAU,kBACb;AAAA,sDAAC,OAAE,eAAW,cAAG,2CAA2C,CAAC,QAAQ,0BAA0B,GAC5F,kBAAQ,aACX;AAAA,UACA,4CAAC,OAAE,WAAU,8CAA8C,mBAAS,IAAI,MAAM,KAAK,WAAU;AAAA,WAC/F;AAAA,SACF;AAAA,MAEC,cACC,4CAAC,OAAE,WAAU,8DAA8D,uBAAY,IACrF;AAAA,MAEJ,6CAAC,SAAI,WAAU,yDACb;AAAA,qDAAC,SACC;AAAA,sDAAC,OAAE,WAAU,0DAAyD,wBAAU;AAAA,UAChF,4CAAC,OAAE,WAAU,YACV,uBAAa,OACZ,6CAAC,aACC;AAAA,wDAAC,qCAAa,QAAQ,aAAa,MAAM,IAAI;AAAA,YAC5C,UAAU,eAAe;AAAA,YAAE;AAAA,YAAE;AAAA,aAChC,IAEA,4CAAC,UAAK,WAAU,yBAAwB,oBAAC,GAE7C;AAAA,WACF;AAAA,QACA,6CAAC,SAAI,WAAU,4EACb;AAAA,sDAAC,UAAK,WAAU,yBAAwB,0BAAY;AAAA,UACpD,6CAAC,UAAK,WAAU,6DACd;AAAA,wDAAC,qCAAa,QAAQ,aAAa,MAAM,IAAI;AAAA,YAC5C;AAAA,YAAM;AAAA,YAAE;AAAA,YAAY;AAAA,aACvB;AAAA,WACF;AAAA,SACF;AAAA,MAEA,6CAAC,SAAI,WAAU,eACb;AAAA,qDAAC,SAAI,WAAU,6CACb;AAAA,uDAAC,UAAK,WAAU,+BAA8B;AAAA;AAAA,YAClC;AAAA,YAAQ;AAAA,YAAE,aAAa,OAAO,SAAM,UAAU,eAAe,CAAC,IAAI,UAAU,OAAO,KAAK;AAAA,aACpG;AAAA,UACA,6CAAC,UAAK,WAAU,yBAAwB;AAAA;AAAA,YAAW,MAAM;AAAA,YAAQ;AAAA,aAAC;AAAA,WACpE;AAAA,QACA,6CAAC,SAAI,WAAU,kEACZ;AAAA,oBAAU,KAAK,4CAAC,SAAI,OAAO,EAAE,OAAO,GAAG,OAAO,KAAK,YAAY,cAAc,GAAG;AAAA,UACjF,4CAAC,SAAI,WAAU,UAAS;AAAA,WAC1B;AAAA,SACF;AAAA,MAEA,4CAAC,OAAE,WAAU,qCAAoC,kFAEjD;AAAA,OACF;AAAA,KACF;AAEJ;","names":["Image"]}
+{"version":3,"sources":["../../src/components/coin-launch-preview.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"./image.js\";\nimport { TrendingUp } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\n\nexport interface CoinPreviewData {\n  name: string;\n  symbol: string;\n  description: string;\n\n  imageUrl: string | null;\n\n  supplyHuman: number | null;\n  price: number;\n  quoteSymbol: string;\n  teamPct: number;\n}\n\nconst COIN_GRADIENT = \"linear-gradient(135deg, #d5520b, #e175b0)\";\n\nfunction StatValue({ children }: { children: React.ReactNode }) {\n  return (\n    <span className=\"inline-flex items-center gap-1 font-bold tabular-nums text-brand-maeve\">\n      {children}\n    </span>\n  );\n}\n\nexport function CoinLaunchPreview({ data, className }: { data: CoinPreviewData; className?: string }) {\n  const { name, symbol, description, imageUrl, supplyHuman, price, quoteSymbol, teamPct } = data;\n  const marketCap = supplyHuman != null ? supplyHuman * price : null;\n  const yourCoins = supplyHuman != null ? supplyHuman * (teamPct / 100) : null;\n\n  return (\n    <div className={cn(\"rounded-2xl bg-muted/50 dark:bg-card overflow-hidden\", className)}>\n      <div className=\"px-5 pt-4\">\n        <p className=\"section-label\">Live preview</p>\n      </div>\n\n      <div className=\"p-5 space-y-4\">\n\n        <div className=\"flex items-center gap-3\">\n          <div className=\"shrink-0 rounded-full p-[2px]\" style={{ background: COIN_GRADIENT }}>\n            <div className=\"relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center\">\n              {imageUrl ? (\n                <Image src={imageUrl} alt=\"\" fill sizes=\"56px\" className=\"object-cover\" unoptimized />\n              ) : (\n                <TrendingUp className=\"h-6 w-6 text-brand-orange/70\" />\n              )}\n            </div>\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <p className={cn(\"font-bold text-lg leading-snug truncate\", !name && \"text-muted-foreground/50\")}>\n              {name || \"Your coin\"}\n            </p>\n            <p className=\"text-sm text-muted-foreground tabular-nums\">{symbol ? `$${symbol}` : \"$SYMBOL\"}</p>\n          </div>\n        </div>\n\n        {description ? (\n          <p className=\"text-sm text-muted-foreground leading-relaxed line-clamp-3\">{description}</p>\n        ) : null}\n\n        <div className=\"rounded-xl bg-muted/50 dark:bg-muted/30 p-4 space-y-3\">\n          <div>\n            <p className=\"text-2xs uppercase tracking-wide text-muted-foreground\">Market cap</p>\n            <p className=\"text-2xl\">\n              {marketCap != null ? (\n                <StatValue>\n                  <CurrencyIcon symbol={quoteSymbol} size={18} />\n                  {marketCap.toLocaleString()} {quoteSymbol}\n                </StatValue>\n              ) : (\n                <span className=\"text-muted-foreground\">—</span>\n              )}\n            </p>\n          </div>\n          <div className=\"flex items-center justify-between text-sm border-t border-border/60 pt-3\">\n            <span className=\"text-muted-foreground\">Launch price</span>\n            <span className=\"inline-flex items-center gap-1 font-semibold tabular-nums\">\n              <CurrencyIcon symbol={quoteSymbol} size={14} />\n              {price} {quoteSymbol} / coin\n            </span>\n          </div>\n        </div>\n\n        <div className=\"space-y-1.5\">\n          <div className=\"flex items-center justify-between text-sm\">\n            <span className=\"font-medium text-brand-orange\">\n              You keep {teamPct}%{yourCoins != null ? ` · ${yourCoins.toLocaleString()} ${symbol || \"coins\"}` : \"\"}\n            </span>\n            <span className=\"text-muted-foreground\">Community {100 - teamPct}%</span>\n          </div>\n          <div className=\"flex h-2.5 rounded-full overflow-hidden bg-muted-foreground/15\">\n            {teamPct > 0 && <div style={{ width: `${teamPct}%`, background: COIN_GRADIENT }} />}\n            <div className=\"flex-1\" />\n          </div>\n        </div>\n\n        <p className=\"text-2xs text-muted-foreground/70\">\n          Liquidity locks permanently at launch.\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBI;AAtBJ,mBAAkB;AAClB,0BAA2B;AAC3B,gBAAmB;AACnB,2BAA6B;AAe7B,MAAM,gBAAgB;AAEtB,SAAS,UAAU,EAAE,SAAS,GAAkC;AAC9D,SACE,4CAAC,UAAK,WAAU,0EACb,UACH;AAEJ;AAEO,SAAS,kBAAkB,EAAE,MAAM,UAAU,GAAkD;AACpG,QAAM,EAAE,MAAM,QAAQ,aAAa,UAAU,aAAa,OAAO,aAAa,QAAQ,IAAI;AAC1F,QAAM,YAAY,eAAe,OAAO,cAAc,QAAQ;AAC9D,QAAM,YAAY,eAAe,OAAO,eAAe,UAAU,OAAO;AAExE,SACE,6CAAC,SAAI,eAAW,cAAG,wDAAwD,SAAS,GAClF;AAAA,gDAAC,SAAI,WAAU,aACb,sDAAC,OAAE,WAAU,iBAAgB,0BAAY,GAC3C;AAAA,IAEA,6CAAC,SAAI,WAAU,iBAEb;AAAA,mDAAC,SAAI,WAAU,2BACb;AAAA,oDAAC,SAAI,WAAU,iCAAgC,OAAO,EAAE,YAAY,cAAc,GAChF,sDAAC,SAAI,WAAU,4FACZ,qBACC,4CAAC,aAAAA,SAAA,EAAM,KAAK,UAAU,KAAI,IAAG,MAAI,MAAC,OAAM,QAAO,WAAU,gBAAe,aAAW,MAAC,IAEpF,4CAAC,kCAAW,WAAU,gCAA+B,GAEzD,GACF;AAAA,QACA,6CAAC,SAAI,WAAU,kBACb;AAAA,sDAAC,OAAE,eAAW,cAAG,2CAA2C,CAAC,QAAQ,0BAA0B,GAC5F,kBAAQ,aACX;AAAA,UACA,4CAAC,OAAE,WAAU,8CAA8C,mBAAS,IAAI,MAAM,KAAK,WAAU;AAAA,WAC/F;AAAA,SACF;AAAA,MAEC,cACC,4CAAC,OAAE,WAAU,8DAA8D,uBAAY,IACrF;AAAA,MAEJ,6CAAC,SAAI,WAAU,yDACb;AAAA,qDAAC,SACC;AAAA,sDAAC,OAAE,WAAU,0DAAyD,wBAAU;AAAA,UAChF,4CAAC,OAAE,WAAU,YACV,uBAAa,OACZ,6CAAC,aACC;AAAA,wDAAC,qCAAa,QAAQ,aAAa,MAAM,IAAI;AAAA,YAC5C,UAAU,eAAe;AAAA,YAAE;AAAA,YAAE;AAAA,aAChC,IAEA,4CAAC,UAAK,WAAU,yBAAwB,oBAAC,GAE7C;AAAA,WACF;AAAA,QACA,6CAAC,SAAI,WAAU,4EACb;AAAA,sDAAC,UAAK,WAAU,yBAAwB,0BAAY;AAAA,UACpD,6CAAC,UAAK,WAAU,6DACd;AAAA,wDAAC,qCAAa,QAAQ,aAAa,MAAM,IAAI;AAAA,YAC5C;AAAA,YAAM;AAAA,YAAE;AAAA,YAAY;AAAA,aACvB;AAAA,WACF;AAAA,SACF;AAAA,MAEA,6CAAC,SAAI,WAAU,eACb;AAAA,qDAAC,SAAI,WAAU,6CACb;AAAA,uDAAC,UAAK,WAAU,iCAAgC;AAAA;AAAA,YACpC;AAAA,YAAQ;AAAA,YAAE,aAAa,OAAO,SAAM,UAAU,eAAe,CAAC,IAAI,UAAU,OAAO,KAAK;AAAA,aACpG;AAAA,UACA,6CAAC,UAAK,WAAU,yBAAwB;AAAA;AAAA,YAAW,MAAM;AAAA,YAAQ;AAAA,aAAC;AAAA,WACpE;AAAA,QACA,6CAAC,SAAI,WAAU,kEACZ;AAAA,oBAAU,KAAK,4CAAC,SAAI,OAAO,EAAE,OAAO,GAAG,OAAO,KAAK,YAAY,cAAc,GAAG;AAAA,UACjF,4CAAC,SAAI,WAAU,UAAS;AAAA,WAC1B;AAAA,SACF;AAAA,MAEA,4CAAC,OAAE,WAAU,qCAAoC,oDAEjD;AAAA,OACF;AAAA,KACF;AAEJ;","names":["Image"]}

package/dist/components/coin-launch-preview.js

@@ -4,7 +4,7 @@ import Image from "./image.js";
 import { TrendingUp } from "lucide-react";
 import { cn } from "../utils/cn.js";
 import { CurrencyIcon } from "./currency-icon.js";
-const COIN_GRADIENT = "linear-gradient(135deg, #f6608f, #fb8b46)";
+const COIN_GRADIENT = "linear-gradient(135deg, #d5520b, #e175b0)";
 function StatValue({ children }) {
   return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1 font-bold tabular-nums text-brand-maeve", children });
 }
@@ -16,7 +16,7 @@ function CoinLaunchPreview({ data, className }) {
     /* @__PURE__ */ jsx("div", { className: "px-5 pt-4", children: /* @__PURE__ */ jsx("p", { className: "section-label", children: "Live preview" }) }),
     /* @__PURE__ */ jsxs("div", { className: "p-5 space-y-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-full p-[2px]", style: { background: COIN_GRADIENT }, children: /* @__PURE__ */ jsx("div", { className: "relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center", children: imageUrl ? /* @__PURE__ */ jsx(Image, { src: imageUrl, alt: "", fill: true, sizes: "56px", className: "object-cover", unoptimized: true }) : /* @__PURE__ */ jsx(TrendingUp, { className: "h-6 w-6 text-brand-rose/70" }) }) }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-full p-[2px]", style: { background: COIN_GRADIENT }, children: /* @__PURE__ */ jsx("div", { className: "relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center", children: imageUrl ? /* @__PURE__ */ jsx(Image, { src: imageUrl, alt: "", fill: true, sizes: "56px", className: "object-cover", unoptimized: true }) : /* @__PURE__ */ jsx(TrendingUp, { className: "h-6 w-6 text-brand-orange/70" }) }) }),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx("p", { className: cn("font-bold text-lg leading-snug truncate", !name && "text-muted-foreground/50"), children: name || "Your coin" }),
           /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground tabular-nums", children: symbol ? `$${symbol}` : "$SYMBOL" })
@@ -46,7 +46,7 @@ function CoinLaunchPreview({ data, className }) {
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm", children: [
-          /* @__PURE__ */ jsxs("span", { className: "font-medium text-brand-rose", children: [
+          /* @__PURE__ */ jsxs("span", { className: "font-medium text-brand-orange", children: [
             "You keep ",
             teamPct,
             "%",
@@ -63,7 +63,7 @@ function CoinLaunchPreview({ data, className }) {
           /* @__PURE__ */ jsx("div", { className: "flex-1" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx("p", { className: "text-2xs text-muted-foreground/70", children: "Liquidity is locked forever \u2014 nobody can pull it, including us." })
+      /* @__PURE__ */ jsx("p", { className: "text-2xs text-muted-foreground/70", children: "Liquidity locks permanently at launch." })
     ] })
   ] });
 }

package/dist/components/coin-launch-preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/coin-launch-preview.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"./image.js\";\nimport { TrendingUp } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\n\nexport interface CoinPreviewData {\n  name: string;\n  symbol: string;\n  description: string;\n\n  imageUrl: string | null;\n\n  supplyHuman: number | null;\n  price: number;\n  quoteSymbol: string;\n  teamPct: number;\n}\n\nconst COIN_GRADIENT = \"linear-gradient(135deg, #f6608f, #fb8b46)\";\n\nfunction StatValue({ children }: { children: React.ReactNode }) {\n  return (\n    <span className=\"inline-flex items-center gap-1 font-bold tabular-nums text-brand-maeve\">\n      {children}\n    </span>\n  );\n}\n\nexport function CoinLaunchPreview({ data, className }: { data: CoinPreviewData; className?: string }) {\n  const { name, symbol, description, imageUrl, supplyHuman, price, quoteSymbol, teamPct } = data;\n  const marketCap = supplyHuman != null ? supplyHuman * price : null;\n  const yourCoins = supplyHuman != null ? supplyHuman * (teamPct / 100) : null;\n\n  return (\n    <div className={cn(\"rounded-2xl bg-muted/50 dark:bg-card overflow-hidden\", className)}>\n      <div className=\"px-5 pt-4\">\n        <p className=\"section-label\">Live preview</p>\n      </div>\n\n      <div className=\"p-5 space-y-4\">\n\n        <div className=\"flex items-center gap-3\">\n          <div className=\"shrink-0 rounded-full p-[2px]\" style={{ background: COIN_GRADIENT }}>\n            <div className=\"relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center\">\n              {imageUrl ? (\n                <Image src={imageUrl} alt=\"\" fill sizes=\"56px\" className=\"object-cover\" unoptimized />\n              ) : (\n                <TrendingUp className=\"h-6 w-6 text-brand-rose/70\" />\n              )}\n            </div>\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <p className={cn(\"font-bold text-lg leading-snug truncate\", !name && \"text-muted-foreground/50\")}>\n              {name || \"Your coin\"}\n            </p>\n            <p className=\"text-sm text-muted-foreground tabular-nums\">{symbol ? `$${symbol}` : \"$SYMBOL\"}</p>\n          </div>\n        </div>\n\n        {description ? (\n          <p className=\"text-sm text-muted-foreground leading-relaxed line-clamp-3\">{description}</p>\n        ) : null}\n\n        <div className=\"rounded-xl bg-muted/50 dark:bg-muted/30 p-4 space-y-3\">\n          <div>\n            <p className=\"text-2xs uppercase tracking-wide text-muted-foreground\">Market cap</p>\n            <p className=\"text-2xl\">\n              {marketCap != null ? (\n                <StatValue>\n                  <CurrencyIcon symbol={quoteSymbol} size={18} />\n                  {marketCap.toLocaleString()} {quoteSymbol}\n                </StatValue>\n              ) : (\n                <span className=\"text-muted-foreground\">—</span>\n              )}\n            </p>\n          </div>\n          <div className=\"flex items-center justify-between text-sm border-t border-border/60 pt-3\">\n            <span className=\"text-muted-foreground\">Launch price</span>\n            <span className=\"inline-flex items-center gap-1 font-semibold tabular-nums\">\n              <CurrencyIcon symbol={quoteSymbol} size={14} />\n              {price} {quoteSymbol} / coin\n            </span>\n          </div>\n        </div>\n\n        <div className=\"space-y-1.5\">\n          <div className=\"flex items-center justify-between text-sm\">\n            <span className=\"font-medium text-brand-rose\">\n              You keep {teamPct}%{yourCoins != null ? ` · ${yourCoins.toLocaleString()} ${symbol || \"coins\"}` : \"\"}\n            </span>\n            <span className=\"text-muted-foreground\">Community {100 - teamPct}%</span>\n          </div>\n          <div className=\"flex h-2.5 rounded-full overflow-hidden bg-muted-foreground/15\">\n            {teamPct > 0 && <div style={{ width: `${teamPct}%`, background: COIN_GRADIENT }} />}\n            <div className=\"flex-1\" />\n          </div>\n        </div>\n\n        <p className=\"text-2xs text-muted-foreground/70\">\n          Liquidity is locked forever — nobody can pull it, including us.\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAwBI,cA6BM,YA7BN;AAtBJ,OAAO,WAAW;AAClB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAe7B,MAAM,gBAAgB;AAEtB,SAAS,UAAU,EAAE,SAAS,GAAkC;AAC9D,SACE,oBAAC,UAAK,WAAU,0EACb,UACH;AAEJ;AAEO,SAAS,kBAAkB,EAAE,MAAM,UAAU,GAAkD;AACpG,QAAM,EAAE,MAAM,QAAQ,aAAa,UAAU,aAAa,OAAO,aAAa,QAAQ,IAAI;AAC1F,QAAM,YAAY,eAAe,OAAO,cAAc,QAAQ;AAC9D,QAAM,YAAY,eAAe,OAAO,eAAe,UAAU,OAAO;AAExE,SACE,qBAAC,SAAI,WAAW,GAAG,wDAAwD,SAAS,GAClF;AAAA,wBAAC,SAAI,WAAU,aACb,8BAAC,OAAE,WAAU,iBAAgB,0BAAY,GAC3C;AAAA,IAEA,qBAAC,SAAI,WAAU,iBAEb;AAAA,2BAAC,SAAI,WAAU,2BACb;AAAA,4BAAC,SAAI,WAAU,iCAAgC,OAAO,EAAE,YAAY,cAAc,GAChF,8BAAC,SAAI,WAAU,4FACZ,qBACC,oBAAC,SAAM,KAAK,UAAU,KAAI,IAAG,MAAI,MAAC,OAAM,QAAO,WAAU,gBAAe,aAAW,MAAC,IAEpF,oBAAC,cAAW,WAAU,8BAA6B,GAEvD,GACF;AAAA,QACA,qBAAC,SAAI,WAAU,kBACb;AAAA,8BAAC,OAAE,WAAW,GAAG,2CAA2C,CAAC,QAAQ,0BAA0B,GAC5F,kBAAQ,aACX;AAAA,UACA,oBAAC,OAAE,WAAU,8CAA8C,mBAAS,IAAI,MAAM,KAAK,WAAU;AAAA,WAC/F;AAAA,SACF;AAAA,MAEC,cACC,oBAAC,OAAE,WAAU,8DAA8D,uBAAY,IACrF;AAAA,MAEJ,qBAAC,SAAI,WAAU,yDACb;AAAA,6BAAC,SACC;AAAA,8BAAC,OAAE,WAAU,0DAAyD,wBAAU;AAAA,UAChF,oBAAC,OAAE,WAAU,YACV,uBAAa,OACZ,qBAAC,aACC;AAAA,gCAAC,gBAAa,QAAQ,aAAa,MAAM,IAAI;AAAA,YAC5C,UAAU,eAAe;AAAA,YAAE;AAAA,YAAE;AAAA,aAChC,IAEA,oBAAC,UAAK,WAAU,yBAAwB,oBAAC,GAE7C;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,4EACb;AAAA,8BAAC,UAAK,WAAU,yBAAwB,0BAAY;AAAA,UACpD,qBAAC,UAAK,WAAU,6DACd;AAAA,gCAAC,gBAAa,QAAQ,aAAa,MAAM,IAAI;AAAA,YAC5C;AAAA,YAAM;AAAA,YAAE;AAAA,YAAY;AAAA,aACvB;AAAA,WACF;AAAA,SACF;AAAA,MAEA,qBAAC,SAAI,WAAU,eACb;AAAA,6BAAC,SAAI,WAAU,6CACb;AAAA,+BAAC,UAAK,WAAU,+BAA8B;AAAA;AAAA,YAClC;AAAA,YAAQ;AAAA,YAAE,aAAa,OAAO,SAAM,UAAU,eAAe,CAAC,IAAI,UAAU,OAAO,KAAK;AAAA,aACpG;AAAA,UACA,qBAAC,UAAK,WAAU,yBAAwB;AAAA;AAAA,YAAW,MAAM;AAAA,YAAQ;AAAA,aAAC;AAAA,WACpE;AAAA,QACA,qBAAC,SAAI,WAAU,kEACZ;AAAA,oBAAU,KAAK,oBAAC,SAAI,OAAO,EAAE,OAAO,GAAG,OAAO,KAAK,YAAY,cAAc,GAAG;AAAA,UACjF,oBAAC,SAAI,WAAU,UAAS;AAAA,WAC1B;AAAA,SACF;AAAA,MAEA,oBAAC,OAAE,WAAU,qCAAoC,kFAEjD;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/coin-launch-preview.tsx"],"sourcesContent":["\"use client\";\n\nimport Image from \"./image.js\";\nimport { TrendingUp } from \"lucide-react\";\nimport { cn } from \"../utils/cn.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\n\nexport interface CoinPreviewData {\n  name: string;\n  symbol: string;\n  description: string;\n\n  imageUrl: string | null;\n\n  supplyHuman: number | null;\n  price: number;\n  quoteSymbol: string;\n  teamPct: number;\n}\n\nconst COIN_GRADIENT = \"linear-gradient(135deg, #d5520b, #e175b0)\";\n\nfunction StatValue({ children }: { children: React.ReactNode }) {\n  return (\n    <span className=\"inline-flex items-center gap-1 font-bold tabular-nums text-brand-maeve\">\n      {children}\n    </span>\n  );\n}\n\nexport function CoinLaunchPreview({ data, className }: { data: CoinPreviewData; className?: string }) {\n  const { name, symbol, description, imageUrl, supplyHuman, price, quoteSymbol, teamPct } = data;\n  const marketCap = supplyHuman != null ? supplyHuman * price : null;\n  const yourCoins = supplyHuman != null ? supplyHuman * (teamPct / 100) : null;\n\n  return (\n    <div className={cn(\"rounded-2xl bg-muted/50 dark:bg-card overflow-hidden\", className)}>\n      <div className=\"px-5 pt-4\">\n        <p className=\"section-label\">Live preview</p>\n      </div>\n\n      <div className=\"p-5 space-y-4\">\n\n        <div className=\"flex items-center gap-3\">\n          <div className=\"shrink-0 rounded-full p-[2px]\" style={{ background: COIN_GRADIENT }}>\n            <div className=\"relative h-14 w-14 rounded-full overflow-hidden bg-card flex items-center justify-center\">\n              {imageUrl ? (\n                <Image src={imageUrl} alt=\"\" fill sizes=\"56px\" className=\"object-cover\" unoptimized />\n              ) : (\n                <TrendingUp className=\"h-6 w-6 text-brand-orange/70\" />\n              )}\n            </div>\n          </div>\n          <div className=\"min-w-0 flex-1\">\n            <p className={cn(\"font-bold text-lg leading-snug truncate\", !name && \"text-muted-foreground/50\")}>\n              {name || \"Your coin\"}\n            </p>\n            <p className=\"text-sm text-muted-foreground tabular-nums\">{symbol ? `$${symbol}` : \"$SYMBOL\"}</p>\n          </div>\n        </div>\n\n        {description ? (\n          <p className=\"text-sm text-muted-foreground leading-relaxed line-clamp-3\">{description}</p>\n        ) : null}\n\n        <div className=\"rounded-xl bg-muted/50 dark:bg-muted/30 p-4 space-y-3\">\n          <div>\n            <p className=\"text-2xs uppercase tracking-wide text-muted-foreground\">Market cap</p>\n            <p className=\"text-2xl\">\n              {marketCap != null ? (\n                <StatValue>\n                  <CurrencyIcon symbol={quoteSymbol} size={18} />\n                  {marketCap.toLocaleString()} {quoteSymbol}\n                </StatValue>\n              ) : (\n                <span className=\"text-muted-foreground\">—</span>\n              )}\n            </p>\n          </div>\n          <div className=\"flex items-center justify-between text-sm border-t border-border/60 pt-3\">\n            <span className=\"text-muted-foreground\">Launch price</span>\n            <span className=\"inline-flex items-center gap-1 font-semibold tabular-nums\">\n              <CurrencyIcon symbol={quoteSymbol} size={14} />\n              {price} {quoteSymbol} / coin\n            </span>\n          </div>\n        </div>\n\n        <div className=\"space-y-1.5\">\n          <div className=\"flex items-center justify-between text-sm\">\n            <span className=\"font-medium text-brand-orange\">\n              You keep {teamPct}%{yourCoins != null ? ` · ${yourCoins.toLocaleString()} ${symbol || \"coins\"}` : \"\"}\n            </span>\n            <span className=\"text-muted-foreground\">Community {100 - teamPct}%</span>\n          </div>\n          <div className=\"flex h-2.5 rounded-full overflow-hidden bg-muted-foreground/15\">\n            {teamPct > 0 && <div style={{ width: `${teamPct}%`, background: COIN_GRADIENT }} />}\n            <div className=\"flex-1\" />\n          </div>\n        </div>\n\n        <p className=\"text-2xs text-muted-foreground/70\">\n          Liquidity locks permanently at launch.\n        </p>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AAwBI,cA6BM,YA7BN;AAtBJ,OAAO,WAAW;AAClB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAe7B,MAAM,gBAAgB;AAEtB,SAAS,UAAU,EAAE,SAAS,GAAkC;AAC9D,SACE,oBAAC,UAAK,WAAU,0EACb,UACH;AAEJ;AAEO,SAAS,kBAAkB,EAAE,MAAM,UAAU,GAAkD;AACpG,QAAM,EAAE,MAAM,QAAQ,aAAa,UAAU,aAAa,OAAO,aAAa,QAAQ,IAAI;AAC1F,QAAM,YAAY,eAAe,OAAO,cAAc,QAAQ;AAC9D,QAAM,YAAY,eAAe,OAAO,eAAe,UAAU,OAAO;AAExE,SACE,qBAAC,SAAI,WAAW,GAAG,wDAAwD,SAAS,GAClF;AAAA,wBAAC,SAAI,WAAU,aACb,8BAAC,OAAE,WAAU,iBAAgB,0BAAY,GAC3C;AAAA,IAEA,qBAAC,SAAI,WAAU,iBAEb;AAAA,2BAAC,SAAI,WAAU,2BACb;AAAA,4BAAC,SAAI,WAAU,iCAAgC,OAAO,EAAE,YAAY,cAAc,GAChF,8BAAC,SAAI,WAAU,4FACZ,qBACC,oBAAC,SAAM,KAAK,UAAU,KAAI,IAAG,MAAI,MAAC,OAAM,QAAO,WAAU,gBAAe,aAAW,MAAC,IAEpF,oBAAC,cAAW,WAAU,gCAA+B,GAEzD,GACF;AAAA,QACA,qBAAC,SAAI,WAAU,kBACb;AAAA,8BAAC,OAAE,WAAW,GAAG,2CAA2C,CAAC,QAAQ,0BAA0B,GAC5F,kBAAQ,aACX;AAAA,UACA,oBAAC,OAAE,WAAU,8CAA8C,mBAAS,IAAI,MAAM,KAAK,WAAU;AAAA,WAC/F;AAAA,SACF;AAAA,MAEC,cACC,oBAAC,OAAE,WAAU,8DAA8D,uBAAY,IACrF;AAAA,MAEJ,qBAAC,SAAI,WAAU,yDACb;AAAA,6BAAC,SACC;AAAA,8BAAC,OAAE,WAAU,0DAAyD,wBAAU;AAAA,UAChF,oBAAC,OAAE,WAAU,YACV,uBAAa,OACZ,qBAAC,aACC;AAAA,gCAAC,gBAAa,QAAQ,aAAa,MAAM,IAAI;AAAA,YAC5C,UAAU,eAAe;AAAA,YAAE;AAAA,YAAE;AAAA,aAChC,IAEA,oBAAC,UAAK,WAAU,yBAAwB,oBAAC,GAE7C;AAAA,WACF;AAAA,QACA,qBAAC,SAAI,WAAU,4EACb;AAAA,8BAAC,UAAK,WAAU,yBAAwB,0BAAY;AAAA,UACpD,qBAAC,UAAK,WAAU,6DACd;AAAA,gCAAC,gBAAa,QAAQ,aAAa,MAAM,IAAI;AAAA,YAC5C;AAAA,YAAM;AAAA,YAAE;AAAA,YAAY;AAAA,aACvB;AAAA,WACF;AAAA,SACF;AAAA,MAEA,qBAAC,SAAI,WAAU,eACb;AAAA,6BAAC,SAAI,WAAU,6CACb;AAAA,+BAAC,UAAK,WAAU,iCAAgC;AAAA;AAAA,YACpC;AAAA,YAAQ;AAAA,YAAE,aAAa,OAAO,SAAM,UAAU,eAAe,CAAC,IAAI,UAAU,OAAO,KAAK;AAAA,aACpG;AAAA,UACA,qBAAC,UAAK,WAAU,yBAAwB;AAAA;AAAA,YAAW,MAAM;AAAA,YAAQ;AAAA,aAAC;AAAA,WACpE;AAAA,QACA,qBAAC,SAAI,WAAU,kEACZ;AAAA,oBAAU,KAAK,oBAAC,SAAI,OAAO,EAAE,OAAO,GAAG,OAAO,KAAK,YAAY,cAAc,GAAG;AAAA,UACjF,oBAAC,SAAI,WAAU,UAAS;AAAA,WAC1B;AAAA,SACF;AAAA,MAEA,oBAAC,OAAE,WAAU,qCAAoC,oDAEjD;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medialane/ui",
-  "version": "0.139.0",
+  "version": "0.140.1",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "sideEffects": false,