@medialane/ui 0.48.0 → 0.50.0

package/dist/components/community-rewards-section.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/community-rewards-section.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { Sparkles, ArrowRight, Zap, Palette, ShoppingBag, MessageSquare } from \"lucide-react\";\nimport { AddressDisplay } from \"./address-display.js\";\n\nexport interface CommunityRewardsEntry {\n  address: string;\n  totalXp: number;\n}\n\nexport interface CommunityRewardsSectionProps {\n  entries: CommunityRewardsEntry[];\n  isLoading?: boolean;\n  rewardsHref: string;\n  creatorHref: (address: string) => string;\n}\n\nconst EARN_ACTIONS = [\n  { icon: Zap, label: \"Mint\" },\n  { icon: Palette, label: \"Create\" },\n  { icon: ShoppingBag, label: \"Trade\" },\n  { icon: MessageSquare, label: \"Engage\" },\n];\n\nconst INFO_TILES = [\n  { value: \"50\", label: \"Levels\" },\n  { value: \"XP\", label: \"Every action\" },\n  { value: \"Fund\", label: \"Distribution\" },\n];\n\nexport function CommunityRewardsSection({\n  entries,\n  isLoading = false,\n  rewardsHref,\n  creatorHref,\n}: CommunityRewardsSectionProps) {\n  return (\n    <section className=\"grid lg:grid-cols-2 gap-px bg-border/40 rounded-2xl overflow-hidden\">\n\n      {/* Left — info panel */}\n      <div className=\"bg-card px-7 py-8 flex flex-col gap-6\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-brand-blue to-brand-purple text-white shrink-0\">\n            <Sparkles className=\"h-4 w-4\" />\n          </div>\n          <h2 className=\"text-base font-black\">Community Rewards</h2>\n        </div>\n\n        <p className=\"text-sm font-semibold text-muted-foreground leading-snug\">\n          Earn XP. Share the Creator&apos;s Fund.\n        </p>\n\n        {/* Visual info tiles */}\n        <div className=\"grid grid-cols-3 gap-2\">\n          {INFO_TILES.map(({ value, label }) => (\n            <div\n              key={label}\n              className=\"rounded-xl border border-border/50 bg-muted/30 px-3 py-3.5 flex flex-col items-center text-center gap-1\"\n            >\n              <span className=\"text-xl font-black\">{value}</span>\n              <span className=\"text-[10px] text-muted-foreground leading-tight\">{label}</span>\n            </div>\n          ))}\n        </div>\n\n        {/* Earn action pills */}\n        <div className=\"flex flex-wrap gap-2\">\n          {EARN_ACTIONS.map(({ icon: Icon, label }) => (\n            <div\n              key={label}\n              className=\"flex items-center gap-1.5 rounded-full border border-border/50 bg-muted/40 px-3 py-1 text-xs font-medium text-muted-foreground\"\n            >\n              <Icon className=\"h-3 w-3\" />\n              {label}\n            </div>\n          ))}\n        </div>\n\n        <Link\n          href={rewardsHref}\n          className=\"mt-auto inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-brand-blue to-brand-purple px-5 py-2.5 text-sm font-semibold text-white hover:opacity-90 transition-opacity\"\n        >\n          Start earning XP\n          <ArrowRight className=\"h-3.5 w-3.5\" />\n        </Link>\n      </div>\n\n      {/* Right — member cards */}\n      <div className=\"bg-card p-5\">\n        {!isLoading && entries.length > 0 ? (\n          <div className=\"grid grid-cols-2 gap-3 h-full\">\n            {entries.slice(0, 4).map((entry) => (\n              <Link\n                key={entry.address}\n                href={creatorHref(entry.address)}\n                className=\"group relative rounded-xl border border-border/40 bg-muted/20 hover:bg-muted/40 hover:border-border/70 overflow-hidden transition-all flex flex-col justify-between p-4\"\n              >\n                {/* Brand gradient top rule */}\n                <div className=\"absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-brand-blue to-brand-purple\" />\n\n                {/* XP — hero number */}\n                <div className=\"space-y-0.5 pt-1\">\n                  <p className=\"text-2xl font-black tabular-nums leading-none\">\n                    {entry.totalXp.toLocaleString()}\n                  </p>\n                  <p className=\"text-[11px] text-muted-foreground\">XP earned</p>\n                </div>\n\n                {/* Address */}\n                <AddressDisplay\n                  address={entry.address}\n                  chars={4}\n                  showCopy={false}\n                  className=\"text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors\"\n                />\n              </Link>\n            ))}\n          </div>\n        ) : (\n          <div className=\"grid grid-cols-2 gap-3 h-full\">\n            {Array.from({ length: 4 }).map((_, i) => (\n              <div key={i} className=\"min-h-[100px] rounded-xl bg-muted/20 animate-pulse\" />\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CQ;AAxCR,kBAAiB;AACjB,0BAA+E;AAC/E,6BAA+B;AAc/B,MAAM,eAAe;AAAA,EACnB,EAAE,MAAM,yBAAK,OAAO,OAAO;AAAA,EAC3B,EAAE,MAAM,6BAAS,OAAO,SAAS;AAAA,EACjC,EAAE,MAAM,iCAAa,OAAO,QAAQ;AAAA,EACpC,EAAE,MAAM,mCAAe,OAAO,SAAS;AACzC;AAEA,MAAM,aAAa;AAAA,EACjB,EAAE,OAAO,MAAM,OAAO,SAAS;AAAA,EAC/B,EAAE,OAAO,MAAM,OAAO,eAAe;AAAA,EACrC,EAAE,OAAO,QAAQ,OAAO,eAAe;AACzC;AAEO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAiC;AAC/B,SACE,6CAAC,aAAQ,WAAU,uEAGjB;AAAA,iDAAC,SAAI,WAAU,yCACb;AAAA,mDAAC,SAAI,WAAU,6BACb;AAAA,oDAAC,SAAI,WAAU,6HACb,sDAAC,gCAAS,WAAU,WAAU,GAChC;AAAA,QACA,4CAAC,QAAG,WAAU,wBAAuB,+BAAiB;AAAA,SACxD;AAAA,MAEA,4CAAC,OAAE,WAAU,4DAA2D,gDAExE;AAAA,MAGA,4CAAC,SAAI,WAAU,0BACZ,qBAAW,IAAI,CAAC,EAAE,OAAO,MAAM,MAC9B;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA,wDAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA,YAC5C,4CAAC,UAAK,WAAU,mDAAmD,iBAAM;AAAA;AAAA;AAAA,QAJpE;AAAA,MAKP,CACD,GACH;AAAA,MAGA,4CAAC,SAAI,WAAU,wBACZ,uBAAa,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,MACrC;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA,wDAAC,QAAK,WAAU,WAAU;AAAA,YACzB;AAAA;AAAA;AAAA,QAJI;AAAA,MAKP,CACD,GACH;AAAA,MAEA;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACX;AAAA;AAAA,YAEC,4CAAC,kCAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MACtC;AAAA,OACF;AAAA,IAGA,4CAAC,SAAI,WAAU,eACZ,WAAC,aAAa,QAAQ,SAAS,IAC9B,4CAAC,SAAI,WAAU,iCACZ,kBAAQ,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,UACxB;AAAA,MAAC,YAAAA;AAAA,MAAA;AAAA,QAEC,MAAM,YAAY,MAAM,OAAO;AAAA,QAC/B,WAAU;AAAA,QAGV;AAAA,sDAAC,SAAI,WAAU,qFAAoF;AAAA,UAGnG,6CAAC,SAAI,WAAU,oBACb;AAAA,wDAAC,OAAE,WAAU,iDACV,gBAAM,QAAQ,eAAe,GAChC;AAAA,YACA,4CAAC,OAAE,WAAU,qCAAoC,uBAAS;AAAA,aAC5D;AAAA,UAGA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM;AAAA,cACf,OAAO;AAAA,cACP,UAAU;AAAA,cACV,WAAU;AAAA;AAAA,UACZ;AAAA;AAAA;AAAA,MArBK,MAAM;AAAA,IAsBb,CACD,GACH,IAEA,4CAAC,SAAI,WAAU,iCACZ,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,4CAAC,SAAY,WAAU,wDAAb,CAAkE,CAC7E,GACH,GAEJ;AAAA,KACF;AAEJ;","names":["Link"]}
+{"version":3,"sources":["../../src/components/community-rewards-section.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { Sparkles, ArrowRight, Zap, Palette, ShoppingBag, MessageSquare } from \"lucide-react\";\nimport { AddressDisplay } from \"./address-display.js\";\n\nexport interface CommunityRewardsEntry {\n  address: string;\n  totalXp: number;\n}\n\nexport interface CommunityRewardsSectionProps {\n  entries: CommunityRewardsEntry[];\n  isLoading?: boolean;\n  rewardsHref: string;\n  creatorHref: (address: string) => string;\n}\n\nconst EARN_ACTIONS = [\n  { icon: Zap, label: \"Mint\" },\n  { icon: Palette, label: \"Create\" },\n  { icon: ShoppingBag, label: \"Trade\" },\n  { icon: MessageSquare, label: \"Engage\" },\n];\n\nconst INFO_TILES = [\n  { value: \"50\", label: \"Levels\" },\n  { value: \"XP\", label: \"Every action\" },\n  { value: \"Fund\", label: \"Distribution\" },\n];\n\nexport function CommunityRewardsSection({\n  entries,\n  isLoading = false,\n  rewardsHref,\n  creatorHref,\n}: CommunityRewardsSectionProps) {\n  return (\n    <section className=\"grid lg:grid-cols-2 gap-px bg-border/40 rounded-2xl overflow-hidden\">\n\n      {/* Left — info panel */}\n      <div className=\"bg-card px-7 py-8 flex flex-col gap-6\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-brand-rose to-brand-orange text-white shrink-0\">\n            <Sparkles className=\"h-4 w-4\" />\n          </div>\n          <h2 className=\"text-base font-black\">Community Rewards</h2>\n        </div>\n\n        <p className=\"text-sm font-semibold text-muted-foreground leading-snug\">\n          Earn XP. Share the Creator&apos;s Fund.\n        </p>\n\n        {/* Visual info tiles */}\n        <div className=\"grid grid-cols-3 gap-2\">\n          {INFO_TILES.map(({ value, label }) => (\n            <div\n              key={label}\n              className=\"rounded-xl border border-border/50 bg-muted/30 px-3 py-3.5 flex flex-col items-center text-center gap-1\"\n            >\n              <span className=\"text-xl font-black\">{value}</span>\n              <span className=\"text-[10px] text-muted-foreground leading-tight\">{label}</span>\n            </div>\n          ))}\n        </div>\n\n        {/* Earn action pills */}\n        <div className=\"flex flex-wrap gap-2\">\n          {EARN_ACTIONS.map(({ icon: Icon, label }) => (\n            <div\n              key={label}\n              className=\"flex items-center gap-1.5 rounded-full border border-border/50 bg-muted/40 px-3 py-1 text-xs font-medium text-muted-foreground\"\n            >\n              <Icon className=\"h-3 w-3\" />\n              {label}\n            </div>\n          ))}\n        </div>\n\n        <Link\n          href={rewardsHref}\n          className=\"mt-auto inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-brand-rose to-brand-orange px-5 py-2.5 text-sm font-semibold text-white hover:opacity-90 transition-opacity\"\n        >\n          Start earning XP\n          <ArrowRight className=\"h-3.5 w-3.5\" />\n        </Link>\n      </div>\n\n      {/* Right — member cards */}\n      <div className=\"bg-card p-5\">\n        {!isLoading && entries.length > 0 ? (\n          <div className=\"grid grid-cols-2 gap-3 h-full\">\n            {entries.slice(0, 4).map((entry) => (\n              <Link\n                key={entry.address}\n                href={creatorHref(entry.address)}\n                className=\"group relative rounded-xl border border-border/40 bg-muted/20 hover:bg-muted/40 hover:border-border/70 overflow-hidden transition-all flex flex-col justify-between p-4\"\n              >\n                {/* Brand gradient top rule */}\n                <div className=\"absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-brand-rose to-brand-orange\" />\n\n                {/* XP — hero number */}\n                <div className=\"space-y-0.5 pt-1\">\n                  <p className=\"text-2xl font-black tabular-nums leading-none\">\n                    {entry.totalXp.toLocaleString()}\n                  </p>\n                  <p className=\"text-[11px] text-muted-foreground\">XP earned</p>\n                </div>\n\n                {/* Address */}\n                <AddressDisplay\n                  address={entry.address}\n                  chars={4}\n                  showCopy={false}\n                  className=\"text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors\"\n                />\n              </Link>\n            ))}\n          </div>\n        ) : (\n          <div className=\"grid grid-cols-2 gap-3 h-full\">\n            {Array.from({ length: 4 }).map((_, i) => (\n              <div key={i} className=\"min-h-[100px] rounded-xl bg-muted/20 animate-pulse\" />\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CQ;AAxCR,kBAAiB;AACjB,0BAA+E;AAC/E,6BAA+B;AAc/B,MAAM,eAAe;AAAA,EACnB,EAAE,MAAM,yBAAK,OAAO,OAAO;AAAA,EAC3B,EAAE,MAAM,6BAAS,OAAO,SAAS;AAAA,EACjC,EAAE,MAAM,iCAAa,OAAO,QAAQ;AAAA,EACpC,EAAE,MAAM,mCAAe,OAAO,SAAS;AACzC;AAEA,MAAM,aAAa;AAAA,EACjB,EAAE,OAAO,MAAM,OAAO,SAAS;AAAA,EAC/B,EAAE,OAAO,MAAM,OAAO,eAAe;AAAA,EACrC,EAAE,OAAO,QAAQ,OAAO,eAAe;AACzC;AAEO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAiC;AAC/B,SACE,6CAAC,aAAQ,WAAU,uEAGjB;AAAA,iDAAC,SAAI,WAAU,yCACb;AAAA,mDAAC,SAAI,WAAU,6BACb;AAAA,oDAAC,SAAI,WAAU,6HACb,sDAAC,gCAAS,WAAU,WAAU,GAChC;AAAA,QACA,4CAAC,QAAG,WAAU,wBAAuB,+BAAiB;AAAA,SACxD;AAAA,MAEA,4CAAC,OAAE,WAAU,4DAA2D,gDAExE;AAAA,MAGA,4CAAC,SAAI,WAAU,0BACZ,qBAAW,IAAI,CAAC,EAAE,OAAO,MAAM,MAC9B;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA,wDAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA,YAC5C,4CAAC,UAAK,WAAU,mDAAmD,iBAAM;AAAA;AAAA;AAAA,QAJpE;AAAA,MAKP,CACD,GACH;AAAA,MAGA,4CAAC,SAAI,WAAU,wBACZ,uBAAa,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,MACrC;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA,wDAAC,QAAK,WAAU,WAAU;AAAA,YACzB;AAAA;AAAA;AAAA,QAJI;AAAA,MAKP,CACD,GACH;AAAA,MAEA;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACX;AAAA;AAAA,YAEC,4CAAC,kCAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MACtC;AAAA,OACF;AAAA,IAGA,4CAAC,SAAI,WAAU,eACZ,WAAC,aAAa,QAAQ,SAAS,IAC9B,4CAAC,SAAI,WAAU,iCACZ,kBAAQ,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,UACxB;AAAA,MAAC,YAAAA;AAAA,MAAA;AAAA,QAEC,MAAM,YAAY,MAAM,OAAO;AAAA,QAC/B,WAAU;AAAA,QAGV;AAAA,sDAAC,SAAI,WAAU,qFAAoF;AAAA,UAGnG,6CAAC,SAAI,WAAU,oBACb;AAAA,wDAAC,OAAE,WAAU,iDACV,gBAAM,QAAQ,eAAe,GAChC;AAAA,YACA,4CAAC,OAAE,WAAU,qCAAoC,uBAAS;AAAA,aAC5D;AAAA,UAGA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM;AAAA,cACf,OAAO;AAAA,cACP,UAAU;AAAA,cACV,WAAU;AAAA;AAAA,UACZ;AAAA;AAAA;AAAA,MArBK,MAAM;AAAA,IAsBb,CACD,GACH,IAEA,4CAAC,SAAI,WAAU,iCACZ,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,4CAAC,SAAY,WAAU,wDAAb,CAAkE,CAC7E,GACH,GAEJ;AAAA,KACF;AAEJ;","names":["Link"]}

package/dist/components/community-rewards-section.js

@@ -23,7 +23,7 @@ function CommunityRewardsSection({
   return /* @__PURE__ */ jsxs("section", { className: "grid lg:grid-cols-2 gap-px bg-border/40 rounded-2xl overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "bg-card px-7 py-8 flex flex-col gap-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-brand-blue to-brand-purple text-white shrink-0", children: /* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-brand-rose to-brand-orange text-white shrink-0", children: /* @__PURE__ */ jsx(Sparkles, { className: "h-4 w-4" }) }),
         /* @__PURE__ */ jsx("h2", { className: "text-base font-black", children: "Community Rewards" })
       ] }),
       /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-muted-foreground leading-snug", children: "Earn XP. Share the Creator's Fund." }),
@@ -53,7 +53,7 @@ function CommunityRewardsSection({
         Link,
         {
           href: rewardsHref,
-          className: "mt-auto inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-brand-blue to-brand-purple px-5 py-2.5 text-sm font-semibold text-white hover:opacity-90 transition-opacity",
+          className: "mt-auto inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-brand-rose to-brand-orange px-5 py-2.5 text-sm font-semibold text-white hover:opacity-90 transition-opacity",
           children: [
             "Start earning XP",
             /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5" })
@@ -67,7 +67,7 @@ function CommunityRewardsSection({
         href: creatorHref(entry.address),
         className: "group relative rounded-xl border border-border/40 bg-muted/20 hover:bg-muted/40 hover:border-border/70 overflow-hidden transition-all flex flex-col justify-between p-4",
         children: [
-          /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-brand-blue to-brand-purple" }),
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-brand-rose to-brand-orange" }),
           /* @__PURE__ */ jsxs("div", { className: "space-y-0.5 pt-1", children: [
             /* @__PURE__ */ jsx("p", { className: "text-2xl font-black tabular-nums leading-none", children: entry.totalXp.toLocaleString() }),
             /* @__PURE__ */ jsx("p", { className: "text-[11px] text-muted-foreground", children: "XP earned" })

package/dist/components/community-rewards-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/community-rewards-section.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { Sparkles, ArrowRight, Zap, Palette, ShoppingBag, MessageSquare } from \"lucide-react\";\nimport { AddressDisplay } from \"./address-display.js\";\n\nexport interface CommunityRewardsEntry {\n  address: string;\n  totalXp: number;\n}\n\nexport interface CommunityRewardsSectionProps {\n  entries: CommunityRewardsEntry[];\n  isLoading?: boolean;\n  rewardsHref: string;\n  creatorHref: (address: string) => string;\n}\n\nconst EARN_ACTIONS = [\n  { icon: Zap, label: \"Mint\" },\n  { icon: Palette, label: \"Create\" },\n  { icon: ShoppingBag, label: \"Trade\" },\n  { icon: MessageSquare, label: \"Engage\" },\n];\n\nconst INFO_TILES = [\n  { value: \"50\", label: \"Levels\" },\n  { value: \"XP\", label: \"Every action\" },\n  { value: \"Fund\", label: \"Distribution\" },\n];\n\nexport function CommunityRewardsSection({\n  entries,\n  isLoading = false,\n  rewardsHref,\n  creatorHref,\n}: CommunityRewardsSectionProps) {\n  return (\n    <section className=\"grid lg:grid-cols-2 gap-px bg-border/40 rounded-2xl overflow-hidden\">\n\n      {/* Left — info panel */}\n      <div className=\"bg-card px-7 py-8 flex flex-col gap-6\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-brand-blue to-brand-purple text-white shrink-0\">\n            <Sparkles className=\"h-4 w-4\" />\n          </div>\n          <h2 className=\"text-base font-black\">Community Rewards</h2>\n        </div>\n\n        <p className=\"text-sm font-semibold text-muted-foreground leading-snug\">\n          Earn XP. Share the Creator&apos;s Fund.\n        </p>\n\n        {/* Visual info tiles */}\n        <div className=\"grid grid-cols-3 gap-2\">\n          {INFO_TILES.map(({ value, label }) => (\n            <div\n              key={label}\n              className=\"rounded-xl border border-border/50 bg-muted/30 px-3 py-3.5 flex flex-col items-center text-center gap-1\"\n            >\n              <span className=\"text-xl font-black\">{value}</span>\n              <span className=\"text-[10px] text-muted-foreground leading-tight\">{label}</span>\n            </div>\n          ))}\n        </div>\n\n        {/* Earn action pills */}\n        <div className=\"flex flex-wrap gap-2\">\n          {EARN_ACTIONS.map(({ icon: Icon, label }) => (\n            <div\n              key={label}\n              className=\"flex items-center gap-1.5 rounded-full border border-border/50 bg-muted/40 px-3 py-1 text-xs font-medium text-muted-foreground\"\n            >\n              <Icon className=\"h-3 w-3\" />\n              {label}\n            </div>\n          ))}\n        </div>\n\n        <Link\n          href={rewardsHref}\n          className=\"mt-auto inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-brand-blue to-brand-purple px-5 py-2.5 text-sm font-semibold text-white hover:opacity-90 transition-opacity\"\n        >\n          Start earning XP\n          <ArrowRight className=\"h-3.5 w-3.5\" />\n        </Link>\n      </div>\n\n      {/* Right — member cards */}\n      <div className=\"bg-card p-5\">\n        {!isLoading && entries.length > 0 ? (\n          <div className=\"grid grid-cols-2 gap-3 h-full\">\n            {entries.slice(0, 4).map((entry) => (\n              <Link\n                key={entry.address}\n                href={creatorHref(entry.address)}\n                className=\"group relative rounded-xl border border-border/40 bg-muted/20 hover:bg-muted/40 hover:border-border/70 overflow-hidden transition-all flex flex-col justify-between p-4\"\n              >\n                {/* Brand gradient top rule */}\n                <div className=\"absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-brand-blue to-brand-purple\" />\n\n                {/* XP — hero number */}\n                <div className=\"space-y-0.5 pt-1\">\n                  <p className=\"text-2xl font-black tabular-nums leading-none\">\n                    {entry.totalXp.toLocaleString()}\n                  </p>\n                  <p className=\"text-[11px] text-muted-foreground\">XP earned</p>\n                </div>\n\n                {/* Address */}\n                <AddressDisplay\n                  address={entry.address}\n                  chars={4}\n                  showCopy={false}\n                  className=\"text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors\"\n                />\n              </Link>\n            ))}\n          </div>\n        ) : (\n          <div className=\"grid grid-cols-2 gap-3 h-full\">\n            {Array.from({ length: 4 }).map((_, i) => (\n              <div key={i} className=\"min-h-[100px] rounded-xl bg-muted/20 animate-pulse\" />\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AA0CQ,SAEI,KAFJ;AAxCR,OAAO,UAAU;AACjB,SAAS,UAAU,YAAY,KAAK,SAAS,aAAa,qBAAqB;AAC/E,SAAS,sBAAsB;AAc/B,MAAM,eAAe;AAAA,EACnB,EAAE,MAAM,KAAK,OAAO,OAAO;AAAA,EAC3B,EAAE,MAAM,SAAS,OAAO,SAAS;AAAA,EACjC,EAAE,MAAM,aAAa,OAAO,QAAQ;AAAA,EACpC,EAAE,MAAM,eAAe,OAAO,SAAS;AACzC;AAEA,MAAM,aAAa;AAAA,EACjB,EAAE,OAAO,MAAM,OAAO,SAAS;AAAA,EAC/B,EAAE,OAAO,MAAM,OAAO,eAAe;AAAA,EACrC,EAAE,OAAO,QAAQ,OAAO,eAAe;AACzC;AAEO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAiC;AAC/B,SACE,qBAAC,aAAQ,WAAU,uEAGjB;AAAA,yBAAC,SAAI,WAAU,yCACb;AAAA,2BAAC,SAAI,WAAU,6BACb;AAAA,4BAAC,SAAI,WAAU,6HACb,8BAAC,YAAS,WAAU,WAAU,GAChC;AAAA,QACA,oBAAC,QAAG,WAAU,wBAAuB,+BAAiB;AAAA,SACxD;AAAA,MAEA,oBAAC,OAAE,WAAU,4DAA2D,gDAExE;AAAA,MAGA,oBAAC,SAAI,WAAU,0BACZ,qBAAW,IAAI,CAAC,EAAE,OAAO,MAAM,MAC9B;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA,gCAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA,YAC5C,oBAAC,UAAK,WAAU,mDAAmD,iBAAM;AAAA;AAAA;AAAA,QAJpE;AAAA,MAKP,CACD,GACH;AAAA,MAGA,oBAAC,SAAI,WAAU,wBACZ,uBAAa,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,MACrC;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA,gCAAC,QAAK,WAAU,WAAU;AAAA,YACzB;AAAA;AAAA;AAAA,QAJI;AAAA,MAKP,CACD,GACH;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACX;AAAA;AAAA,YAEC,oBAAC,cAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MACtC;AAAA,OACF;AAAA,IAGA,oBAAC,SAAI,WAAU,eACZ,WAAC,aAAa,QAAQ,SAAS,IAC9B,oBAAC,SAAI,WAAU,iCACZ,kBAAQ,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,UACxB;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,YAAY,MAAM,OAAO;AAAA,QAC/B,WAAU;AAAA,QAGV;AAAA,8BAAC,SAAI,WAAU,qFAAoF;AAAA,UAGnG,qBAAC,SAAI,WAAU,oBACb;AAAA,gCAAC,OAAE,WAAU,iDACV,gBAAM,QAAQ,eAAe,GAChC;AAAA,YACA,oBAAC,OAAE,WAAU,qCAAoC,uBAAS;AAAA,aAC5D;AAAA,UAGA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM;AAAA,cACf,OAAO;AAAA,cACP,UAAU;AAAA,cACV,WAAU;AAAA;AAAA,UACZ;AAAA;AAAA;AAAA,MArBK,MAAM;AAAA,IAsBb,CACD,GACH,IAEA,oBAAC,SAAI,WAAU,iCACZ,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,oBAAC,SAAY,WAAU,wDAAb,CAAkE,CAC7E,GACH,GAEJ;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/community-rewards-section.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"next/link\";\nimport { Sparkles, ArrowRight, Zap, Palette, ShoppingBag, MessageSquare } from \"lucide-react\";\nimport { AddressDisplay } from \"./address-display.js\";\n\nexport interface CommunityRewardsEntry {\n  address: string;\n  totalXp: number;\n}\n\nexport interface CommunityRewardsSectionProps {\n  entries: CommunityRewardsEntry[];\n  isLoading?: boolean;\n  rewardsHref: string;\n  creatorHref: (address: string) => string;\n}\n\nconst EARN_ACTIONS = [\n  { icon: Zap, label: \"Mint\" },\n  { icon: Palette, label: \"Create\" },\n  { icon: ShoppingBag, label: \"Trade\" },\n  { icon: MessageSquare, label: \"Engage\" },\n];\n\nconst INFO_TILES = [\n  { value: \"50\", label: \"Levels\" },\n  { value: \"XP\", label: \"Every action\" },\n  { value: \"Fund\", label: \"Distribution\" },\n];\n\nexport function CommunityRewardsSection({\n  entries,\n  isLoading = false,\n  rewardsHref,\n  creatorHref,\n}: CommunityRewardsSectionProps) {\n  return (\n    <section className=\"grid lg:grid-cols-2 gap-px bg-border/40 rounded-2xl overflow-hidden\">\n\n      {/* Left — info panel */}\n      <div className=\"bg-card px-7 py-8 flex flex-col gap-6\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-lg bg-gradient-to-br from-brand-rose to-brand-orange text-white shrink-0\">\n            <Sparkles className=\"h-4 w-4\" />\n          </div>\n          <h2 className=\"text-base font-black\">Community Rewards</h2>\n        </div>\n\n        <p className=\"text-sm font-semibold text-muted-foreground leading-snug\">\n          Earn XP. Share the Creator&apos;s Fund.\n        </p>\n\n        {/* Visual info tiles */}\n        <div className=\"grid grid-cols-3 gap-2\">\n          {INFO_TILES.map(({ value, label }) => (\n            <div\n              key={label}\n              className=\"rounded-xl border border-border/50 bg-muted/30 px-3 py-3.5 flex flex-col items-center text-center gap-1\"\n            >\n              <span className=\"text-xl font-black\">{value}</span>\n              <span className=\"text-[10px] text-muted-foreground leading-tight\">{label}</span>\n            </div>\n          ))}\n        </div>\n\n        {/* Earn action pills */}\n        <div className=\"flex flex-wrap gap-2\">\n          {EARN_ACTIONS.map(({ icon: Icon, label }) => (\n            <div\n              key={label}\n              className=\"flex items-center gap-1.5 rounded-full border border-border/50 bg-muted/40 px-3 py-1 text-xs font-medium text-muted-foreground\"\n            >\n              <Icon className=\"h-3 w-3\" />\n              {label}\n            </div>\n          ))}\n        </div>\n\n        <Link\n          href={rewardsHref}\n          className=\"mt-auto inline-flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-brand-rose to-brand-orange px-5 py-2.5 text-sm font-semibold text-white hover:opacity-90 transition-opacity\"\n        >\n          Start earning XP\n          <ArrowRight className=\"h-3.5 w-3.5\" />\n        </Link>\n      </div>\n\n      {/* Right — member cards */}\n      <div className=\"bg-card p-5\">\n        {!isLoading && entries.length > 0 ? (\n          <div className=\"grid grid-cols-2 gap-3 h-full\">\n            {entries.slice(0, 4).map((entry) => (\n              <Link\n                key={entry.address}\n                href={creatorHref(entry.address)}\n                className=\"group relative rounded-xl border border-border/40 bg-muted/20 hover:bg-muted/40 hover:border-border/70 overflow-hidden transition-all flex flex-col justify-between p-4\"\n              >\n                {/* Brand gradient top rule */}\n                <div className=\"absolute inset-x-0 top-0 h-[3px] bg-gradient-to-r from-brand-rose to-brand-orange\" />\n\n                {/* XP — hero number */}\n                <div className=\"space-y-0.5 pt-1\">\n                  <p className=\"text-2xl font-black tabular-nums leading-none\">\n                    {entry.totalXp.toLocaleString()}\n                  </p>\n                  <p className=\"text-[11px] text-muted-foreground\">XP earned</p>\n                </div>\n\n                {/* Address */}\n                <AddressDisplay\n                  address={entry.address}\n                  chars={4}\n                  showCopy={false}\n                  className=\"text-xs font-medium text-muted-foreground group-hover:text-foreground transition-colors\"\n                />\n              </Link>\n            ))}\n          </div>\n        ) : (\n          <div className=\"grid grid-cols-2 gap-3 h-full\">\n            {Array.from({ length: 4 }).map((_, i) => (\n              <div key={i} className=\"min-h-[100px] rounded-xl bg-muted/20 animate-pulse\" />\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AA0CQ,SAEI,KAFJ;AAxCR,OAAO,UAAU;AACjB,SAAS,UAAU,YAAY,KAAK,SAAS,aAAa,qBAAqB;AAC/E,SAAS,sBAAsB;AAc/B,MAAM,eAAe;AAAA,EACnB,EAAE,MAAM,KAAK,OAAO,OAAO;AAAA,EAC3B,EAAE,MAAM,SAAS,OAAO,SAAS;AAAA,EACjC,EAAE,MAAM,aAAa,OAAO,QAAQ;AAAA,EACpC,EAAE,MAAM,eAAe,OAAO,SAAS;AACzC;AAEA,MAAM,aAAa;AAAA,EACjB,EAAE,OAAO,MAAM,OAAO,SAAS;AAAA,EAC/B,EAAE,OAAO,MAAM,OAAO,eAAe;AAAA,EACrC,EAAE,OAAO,QAAQ,OAAO,eAAe;AACzC;AAEO,SAAS,wBAAwB;AAAA,EACtC;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AACF,GAAiC;AAC/B,SACE,qBAAC,aAAQ,WAAU,uEAGjB;AAAA,yBAAC,SAAI,WAAU,yCACb;AAAA,2BAAC,SAAI,WAAU,6BACb;AAAA,4BAAC,SAAI,WAAU,6HACb,8BAAC,YAAS,WAAU,WAAU,GAChC;AAAA,QACA,oBAAC,QAAG,WAAU,wBAAuB,+BAAiB;AAAA,SACxD;AAAA,MAEA,oBAAC,OAAE,WAAU,4DAA2D,gDAExE;AAAA,MAGA,oBAAC,SAAI,WAAU,0BACZ,qBAAW,IAAI,CAAC,EAAE,OAAO,MAAM,MAC9B;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA,gCAAC,UAAK,WAAU,sBAAsB,iBAAM;AAAA,YAC5C,oBAAC,UAAK,WAAU,mDAAmD,iBAAM;AAAA;AAAA;AAAA,QAJpE;AAAA,MAKP,CACD,GACH;AAAA,MAGA,oBAAC,SAAI,WAAU,wBACZ,uBAAa,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,MACrC;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA,gCAAC,QAAK,WAAU,WAAU;AAAA,YACzB;AAAA;AAAA;AAAA,QAJI;AAAA,MAKP,CACD,GACH;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACX;AAAA;AAAA,YAEC,oBAAC,cAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MACtC;AAAA,OACF;AAAA,IAGA,oBAAC,SAAI,WAAU,eACZ,WAAC,aAAa,QAAQ,SAAS,IAC9B,oBAAC,SAAI,WAAU,iCACZ,kBAAQ,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,UACxB;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,YAAY,MAAM,OAAO;AAAA,QAC/B,WAAU;AAAA,QAGV;AAAA,8BAAC,SAAI,WAAU,qFAAoF;AAAA,UAGnG,qBAAC,SAAI,WAAU,oBACb;AAAA,gCAAC,OAAE,WAAU,iDACV,gBAAM,QAAQ,eAAe,GAChC;AAAA,YACA,oBAAC,OAAE,WAAU,qCAAoC,uBAAS;AAAA,aAC5D;AAAA,UAGA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS,MAAM;AAAA,cACf,OAAO;AAAA,cACP,UAAU;AAAA,cACV,WAAU;AAAA;AAAA,UACZ;AAAA;AAAA;AAAA,MArBK,MAAM;AAAA,IAsBb,CACD,GACH,IAEA,oBAAC,SAAI,WAAU,iCACZ,gBAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG,MACjC,oBAAC,SAAY,WAAU,wDAAb,CAAkE,CAC7E,GACH,GAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/stat-tile.cjs

@@ -0,0 +1,85 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var stat_tile_exports = {};
+__export(stat_tile_exports, {
+  StatPill: () => StatPill,
+  StatTile: () => StatTile
+});
+module.exports = __toCommonJS(stat_tile_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function StatTile({
+  label,
+  value,
+  sub,
+  accent,
+  big,
+  radius = 16,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: `bg-muted border border-border flex flex-col gap-1 min-w-0 ${className ?? ""}`,
+      style: { borderRadius: radius, padding: "12px 14px" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[10.5px] font-semibold tracking-[0.06em] uppercase text-muted-foreground", children: label }),
+        value != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: "font-semibold leading-none tracking-tight",
+            style: {
+              fontSize: big ? 22 : 16,
+              fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, monospace',
+              color: accent
+            },
+            children: value
+          }
+        ),
+        sub && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[11px] text-muted-foreground", children: sub }),
+        children
+      ]
+    }
+  );
+}
+function StatPill({ value, label, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: `inline-flex items-baseline gap-2 px-4 py-2 rounded-full bg-muted ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: "text-[15px] font-bold text-foreground",
+            style: { fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, monospace' },
+            children: value
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[13px] text-muted-foreground", children: label })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StatPill,
+  StatTile
+});
+//# sourceMappingURL=stat-tile.cjs.map

package/dist/components/stat-tile.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["// Bento stat tile and header stat pill — the design system's data-display primitives.\n\nexport interface StatTileProps {\n  label: string;\n  /** Shown as the primary value. Pass \"—\" (em dash) for unknown, never zero. */\n  value?: string | number | null;\n  /** Secondary line below the value. */\n  sub?: string;\n  /** Override color for the value text (e.g. brand-blue for positive deltas). */\n  accent?: string;\n  /** Large 22px value variant. */\n  big?: boolean;\n  radius?: number;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport function StatTile({\n  label,\n  value,\n  sub,\n  accent,\n  big,\n  radius = 16,\n  children,\n  className,\n}: StatTileProps) {\n  return (\n    <div\n      className={`bg-muted border border-border flex flex-col gap-1 min-w-0 ${className ?? ''}`}\n      style={{ borderRadius: radius, padding: '12px 14px' }}\n    >\n      <span className=\"text-[10.5px] font-semibold tracking-[0.06em] uppercase text-muted-foreground\">\n        {label}\n      </span>\n      {value != null && (\n        <span\n          className=\"font-semibold leading-none tracking-tight\"\n          style={{\n            fontSize: big ? 22 : 16,\n            fontFamily: '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace',\n            color: accent,\n          }}\n        >\n          {value}\n        </span>\n      )}\n      {sub && (\n        <span className=\"text-[11px] text-muted-foreground\">{sub}</span>\n      )}\n      {children}\n    </div>\n  );\n}\n\nexport interface StatPillProps {\n  value: string | number;\n  label: string;\n  className?: string;\n}\n\nexport function StatPill({ value, label, className }: StatPillProps) {\n  return (\n    <div\n      className={`inline-flex items-baseline gap-2 px-4 py-2 rounded-full bg-muted ${className ?? ''}`}\n    >\n      <span\n        className=\"text-[15px] font-bold text-foreground\"\n        style={{ fontFamily: '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace' }}\n      >\n        {value}\n      </span>\n      <span className=\"text-[13px] text-muted-foreground\">{label}</span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BI;AAXG,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAkB;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,6DAA6D,aAAa,EAAE;AAAA,MACvF,OAAO,EAAE,cAAc,QAAQ,SAAS,YAAY;AAAA,MAEpD;AAAA,oDAAC,UAAK,WAAU,iFACb,iBACH;AAAA,QACC,SAAS,QACR;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UAAU,MAAM,KAAK;AAAA,cACrB,YAAY;AAAA,cACZ,OAAO;AAAA,YACT;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAED,OACC,4CAAC,UAAK,WAAU,qCAAqC,eAAI;AAAA,QAE1D;AAAA;AAAA;AAAA,EACH;AAEJ;AAQO,SAAS,SAAS,EAAE,OAAO,OAAO,UAAU,GAAkB;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,oEAAoE,aAAa,EAAE;AAAA,MAE9F;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,wDAAwD;AAAA,YAE5E;AAAA;AAAA,QACH;AAAA,QACA,4CAAC,UAAK,WAAU,qCAAqC,iBAAM;AAAA;AAAA;AAAA,EAC7D;AAEJ;","names":[]}

package/dist/components/stat-tile.d.cts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface StatTileProps {
+    label: string;
+    /** Shown as the primary value. Pass "—" (em dash) for unknown, never zero. */
+    value?: string | number | null;
+    /** Secondary line below the value. */
+    sub?: string;
+    /** Override color for the value text (e.g. brand-blue for positive deltas). */
+    accent?: string;
+    /** Large 22px value variant. */
+    big?: boolean;
+    radius?: number;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function StatTile({ label, value, sub, accent, big, radius, children, className, }: StatTileProps): react_jsx_runtime.JSX.Element;
+interface StatPillProps {
+    value: string | number;
+    label: string;
+    className?: string;
+}
+declare function StatPill({ value, label, className }: StatPillProps): react_jsx_runtime.JSX.Element;
+
+export { StatPill, type StatPillProps, StatTile, type StatTileProps };

package/dist/components/stat-tile.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface StatTileProps {
+    label: string;
+    /** Shown as the primary value. Pass "—" (em dash) for unknown, never zero. */
+    value?: string | number | null;
+    /** Secondary line below the value. */
+    sub?: string;
+    /** Override color for the value text (e.g. brand-blue for positive deltas). */
+    accent?: string;
+    /** Large 22px value variant. */
+    big?: boolean;
+    radius?: number;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function StatTile({ label, value, sub, accent, big, radius, children, className, }: StatTileProps): react_jsx_runtime.JSX.Element;
+interface StatPillProps {
+    value: string | number;
+    label: string;
+    className?: string;
+}
+declare function StatPill({ value, label, className }: StatPillProps): react_jsx_runtime.JSX.Element;
+
+export { StatPill, type StatPillProps, StatTile, type StatTileProps };

package/dist/components/stat-tile.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function StatTile({
+  label,
+  value,
+  sub,
+  accent,
+  big,
+  radius = 16,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `bg-muted border border-border flex flex-col gap-1 min-w-0 ${className ?? ""}`,
+      style: { borderRadius: radius, padding: "12px 14px" },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[10.5px] font-semibold tracking-[0.06em] uppercase text-muted-foreground", children: label }),
+        value != null && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "font-semibold leading-none tracking-tight",
+            style: {
+              fontSize: big ? 22 : 16,
+              fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, monospace',
+              color: accent
+            },
+            children: value
+          }
+        ),
+        sub && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground", children: sub }),
+        children
+      ]
+    }
+  );
+}
+function StatPill({ value, label, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `inline-flex items-baseline gap-2 px-4 py-2 rounded-full bg-muted ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "text-[15px] font-bold text-foreground",
+            style: { fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, monospace' },
+            children: value
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "text-[13px] text-muted-foreground", children: label })
+      ]
+    }
+  );
+}
+export {
+  StatPill,
+  StatTile
+};
+//# sourceMappingURL=stat-tile.js.map

package/dist/components/stat-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/stat-tile.tsx"],"sourcesContent":["// Bento stat tile and header stat pill — the design system's data-display primitives.\n\nexport interface StatTileProps {\n  label: string;\n  /** Shown as the primary value. Pass \"—\" (em dash) for unknown, never zero. */\n  value?: string | number | null;\n  /** Secondary line below the value. */\n  sub?: string;\n  /** Override color for the value text (e.g. brand-blue for positive deltas). */\n  accent?: string;\n  /** Large 22px value variant. */\n  big?: boolean;\n  radius?: number;\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport function StatTile({\n  label,\n  value,\n  sub,\n  accent,\n  big,\n  radius = 16,\n  children,\n  className,\n}: StatTileProps) {\n  return (\n    <div\n      className={`bg-muted border border-border flex flex-col gap-1 min-w-0 ${className ?? ''}`}\n      style={{ borderRadius: radius, padding: '12px 14px' }}\n    >\n      <span className=\"text-[10.5px] font-semibold tracking-[0.06em] uppercase text-muted-foreground\">\n        {label}\n      </span>\n      {value != null && (\n        <span\n          className=\"font-semibold leading-none tracking-tight\"\n          style={{\n            fontSize: big ? 22 : 16,\n            fontFamily: '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace',\n            color: accent,\n          }}\n        >\n          {value}\n        </span>\n      )}\n      {sub && (\n        <span className=\"text-[11px] text-muted-foreground\">{sub}</span>\n      )}\n      {children}\n    </div>\n  );\n}\n\nexport interface StatPillProps {\n  value: string | number;\n  label: string;\n  className?: string;\n}\n\nexport function StatPill({ value, label, className }: StatPillProps) {\n  return (\n    <div\n      className={`inline-flex items-baseline gap-2 px-4 py-2 rounded-full bg-muted ${className ?? ''}`}\n    >\n      <span\n        className=\"text-[15px] font-bold text-foreground\"\n        style={{ fontFamily: '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace' }}\n      >\n        {value}\n      </span>\n      <span className=\"text-[13px] text-muted-foreground\">{label}</span>\n    </div>\n  );\n}\n"],"mappings":"AA4BI,SAIE,KAJF;AAXG,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAkB;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,6DAA6D,aAAa,EAAE;AAAA,MACvF,OAAO,EAAE,cAAc,QAAQ,SAAS,YAAY;AAAA,MAEpD;AAAA,4BAAC,UAAK,WAAU,iFACb,iBACH;AAAA,QACC,SAAS,QACR;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,UAAU,MAAM,KAAK;AAAA,cACrB,YAAY;AAAA,cACZ,OAAO;AAAA,YACT;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QAED,OACC,oBAAC,UAAK,WAAU,qCAAqC,eAAI;AAAA,QAE1D;AAAA;AAAA;AAAA,EACH;AAEJ;AAQO,SAAS,SAAS,EAAE,OAAO,OAAO,UAAU,GAAkB;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,oEAAoE,aAAa,EAAE;AAAA,MAE9F;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,wDAAwD;AAAA,YAE5E;AAAA;AAAA,QACH;AAAA,QACA,oBAAC,UAAK,WAAU,qCAAqC,iBAAM;AAAA;AAAA;AAAA,EAC7D;AAEJ;","names":[]}

package/dist/components/token-glyph.cjs

@@ -0,0 +1,93 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var token_glyph_exports = {};
+__export(token_glyph_exports, {
+  TokenAmount: () => TokenAmount,
+  TokenGlyph: () => TokenGlyph
+});
+module.exports = __toCommonJS(token_glyph_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+const PRICE_FONT = '"Geist Mono", ui-monospace, SFMono-Regular, monospace';
+function TokenGlyph({ token = "strk", size = 20 }) {
+  const gradId = `ml-tg-strk-${size}`;
+  switch (token) {
+    case "eth":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#2b2f3a" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 4 7 12.2l5 3 5-3L12 4Z", fill: "#e6e8f0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 13.3 12 20l5-6.7-5 3-5-3Z", fill: "#b9bdcc" })
+      ] });
+    case "usdc":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#2775ca" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: "12", y: "16.5", textAnchor: "middle", fontSize: "13", fontWeight: "700", fill: "#fff", fontFamily: "system-ui", children: "$" })
+      ] });
+    case "usdt":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#26a17b" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: "12", y: "16.5", textAnchor: "middle", fontSize: "12", fontWeight: "700", fill: "#fff", fontFamily: "system-ui", children: "\u20AE" })
+      ] });
+    case "wbtc":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: "#f09242" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("text", { x: "12", y: "16.5", textAnchor: "middle", fontSize: "12", fontWeight: "700", fill: "#fff", fontFamily: "system-ui", children: "\u20BF" })
+      ] });
+    default:
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: gradId, x1: "3", y1: "3", x2: "21", y2: "21", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0", stopColor: "#f6608f" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "1", stopColor: "#fb8b46" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "11", fill: `url(#${gradId})` }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M5.5 14.5c3.2-5 9.8-5 13 0", fill: "none", stroke: "#fff", strokeWidth: "1.8", strokeLinecap: "round" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "9", cy: "10.5", r: "0.9", fill: "#fff" })
+      ] });
+  }
+}
+function TokenAmount({
+  token = "strk",
+  amount,
+  size = 20,
+  color,
+  bold = true,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `inline-flex items-center gap-1.5 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TokenGlyph, { token, size }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        style: {
+          fontFamily: PRICE_FONT,
+          fontWeight: bold ? 700 : 500,
+          fontSize: size * 0.92,
+          color: color ?? "#f97316",
+          letterSpacing: "-0.01em"
+        },
+        children: amount
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TokenAmount,
+  TokenGlyph
+});
+//# sourceMappingURL=token-glyph.cjs.map

package/dist/components/token-glyph.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/token-glyph.tsx"],"sourcesContent":["// Inline SVG token glyphs — self-contained, no external asset dependency.\n// Covers the five tokens active on the platform: STRK, ETH, USDC, USDT, WBTC.\n\nconst PRICE_FONT = '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace';\n\nexport type TokenSymbol = 'strk' | 'eth' | 'usdc' | 'usdt' | 'wbtc';\n\nexport interface TokenGlyphProps {\n  token?: TokenSymbol | string;\n  size?: number;\n}\n\nexport function TokenGlyph({ token = 'strk', size = 20 }: TokenGlyphProps) {\n  const gradId = `ml-tg-strk-${size}`;\n\n  switch (token) {\n    case 'eth':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#2b2f3a\"/>\n          <path d=\"M12 4 7 12.2l5 3 5-3L12 4Z\" fill=\"#e6e8f0\"/>\n          <path d=\"M7 13.3 12 20l5-6.7-5 3-5-3Z\" fill=\"#b9bdcc\"/>\n        </svg>\n      );\n    case 'usdc':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#2775ca\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"13\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">$</text>\n        </svg>\n      );\n    case 'usdt':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#26a17b\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"12\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">₮</text>\n        </svg>\n      );\n    case 'wbtc':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#f09242\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"12\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">₿</text>\n        </svg>\n      );\n    default:\n      // STRK — magenta→orange gradient coin with swoosh\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <defs>\n            <linearGradient id={gradId} x1=\"3\" y1=\"3\" x2=\"21\" y2=\"21\">\n              <stop offset=\"0\" stopColor=\"#f6608f\"/>\n              <stop offset=\"1\" stopColor=\"#fb8b46\"/>\n            </linearGradient>\n          </defs>\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill={`url(#${gradId})`}/>\n          <path d=\"M5.5 14.5c3.2-5 9.8-5 13 0\" fill=\"none\" stroke=\"#fff\" strokeWidth=\"1.8\" strokeLinecap=\"round\"/>\n          <circle cx=\"9\" cy=\"10.5\" r=\"0.9\" fill=\"#fff\"/>\n        </svg>\n      );\n  }\n}\n\nexport interface TokenAmountProps {\n  token?: TokenSymbol | string;\n  amount: string;\n  /** Icon size in px. Text size scales proportionally. */\n  size?: number;\n  /** Override the amount text color. Defaults to brand-price orange. */\n  color?: string;\n  bold?: boolean;\n  className?: string;\n}\n\nexport function TokenAmount({\n  token = 'strk',\n  amount,\n  size = 20,\n  color,\n  bold = true,\n  className,\n}: TokenAmountProps) {\n  return (\n    <span className={`inline-flex items-center gap-1.5 ${className ?? ''}`}>\n      <TokenGlyph token={token} size={size} />\n      <span\n        style={{\n          fontFamily: PRICE_FONT,\n          fontWeight: bold ? 700 : 500,\n          fontSize: size * 0.92,\n          color: color ?? '#f97316',\n          letterSpacing: '-0.01em',\n        }}\n      >\n        {amount}\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBQ;AAfR,MAAM,aAAa;AASZ,SAAS,WAAW,EAAE,QAAQ,QAAQ,OAAO,GAAG,GAAoB;AACzE,QAAM,SAAS,cAAc,IAAI;AAEjC,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,4CAAC,UAAK,GAAE,8BAA6B,MAAK,WAAS;AAAA,QACnD,4CAAC,UAAK,GAAE,gCAA+B,MAAK,WAAS;AAAA,SACvD;AAAA,IAEJ,KAAK;AACH,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,4CAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,eAAC;AAAA,SAC/G;AAAA,IAEJ,KAAK;AACH,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,4CAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,oBAAC;AAAA,SAC/G;AAAA,IAEJ,KAAK;AACH,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,4CAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,oBAAC;AAAA,SAC/G;AAAA,IAEJ;AAEE,aACE,6CAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,oDAAC,UACC,uDAAC,oBAAe,IAAI,QAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,MACnD;AAAA,sDAAC,UAAK,QAAO,KAAI,WAAU,WAAS;AAAA,UACpC,4CAAC,UAAK,QAAO,KAAI,WAAU,WAAS;AAAA,WACtC,GACF;AAAA,QACA,4CAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAM,QAAQ,MAAM,KAAI;AAAA,QACvD,4CAAC,UAAK,GAAE,8BAA6B,MAAK,QAAO,QAAO,QAAO,aAAY,OAAM,eAAc,SAAO;AAAA,QACtG,4CAAC,YAAO,IAAG,KAAI,IAAG,QAAO,GAAE,OAAM,MAAK,QAAM;AAAA,SAC9C;AAAA,EAEN;AACF;AAaO,SAAS,YAAY;AAAA,EAC1B,QAAQ;AAAA,EACR;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAAqB;AACnB,SACE,6CAAC,UAAK,WAAW,oCAAoC,aAAa,EAAE,IAClE;AAAA,gDAAC,cAAW,OAAc,MAAY;AAAA,IACtC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,YAAY,OAAO,MAAM;AAAA,UACzB,UAAU,OAAO;AAAA,UACjB,OAAO,SAAS;AAAA,UAChB,eAAe;AAAA,QACjB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/token-glyph.d.cts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type TokenSymbol = 'strk' | 'eth' | 'usdc' | 'usdt' | 'wbtc';
+interface TokenGlyphProps {
+    token?: TokenSymbol | string;
+    size?: number;
+}
+declare function TokenGlyph({ token, size }: TokenGlyphProps): react_jsx_runtime.JSX.Element;
+interface TokenAmountProps {
+    token?: TokenSymbol | string;
+    amount: string;
+    /** Icon size in px. Text size scales proportionally. */
+    size?: number;
+    /** Override the amount text color. Defaults to brand-price orange. */
+    color?: string;
+    bold?: boolean;
+    className?: string;
+}
+declare function TokenAmount({ token, amount, size, color, bold, className, }: TokenAmountProps): react_jsx_runtime.JSX.Element;
+
+export { TokenAmount, type TokenAmountProps, TokenGlyph, type TokenGlyphProps, type TokenSymbol };

package/dist/components/token-glyph.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type TokenSymbol = 'strk' | 'eth' | 'usdc' | 'usdt' | 'wbtc';
+interface TokenGlyphProps {
+    token?: TokenSymbol | string;
+    size?: number;
+}
+declare function TokenGlyph({ token, size }: TokenGlyphProps): react_jsx_runtime.JSX.Element;
+interface TokenAmountProps {
+    token?: TokenSymbol | string;
+    amount: string;
+    /** Icon size in px. Text size scales proportionally. */
+    size?: number;
+    /** Override the amount text color. Defaults to brand-price orange. */
+    color?: string;
+    bold?: boolean;
+    className?: string;
+}
+declare function TokenAmount({ token, amount, size, color, bold, className, }: TokenAmountProps): react_jsx_runtime.JSX.Element;
+
+export { TokenAmount, type TokenAmountProps, TokenGlyph, type TokenGlyphProps, type TokenSymbol };

package/dist/components/token-glyph.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+const PRICE_FONT = '"Geist Mono", ui-monospace, SFMono-Regular, monospace';
+function TokenGlyph({ token = "strk", size = 20 }) {
+  const gradId = `ml-tg-strk-${size}`;
+  switch (token) {
+    case "eth":
+      return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "11", fill: "#2b2f3a" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 4 7 12.2l5 3 5-3L12 4Z", fill: "#e6e8f0" }),
+        /* @__PURE__ */ jsx("path", { d: "M7 13.3 12 20l5-6.7-5 3-5-3Z", fill: "#b9bdcc" })
+      ] });
+    case "usdc":
+      return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "11", fill: "#2775ca" }),
+        /* @__PURE__ */ jsx("text", { x: "12", y: "16.5", textAnchor: "middle", fontSize: "13", fontWeight: "700", fill: "#fff", fontFamily: "system-ui", children: "$" })
+      ] });
+    case "usdt":
+      return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "11", fill: "#26a17b" }),
+        /* @__PURE__ */ jsx("text", { x: "12", y: "16.5", textAnchor: "middle", fontSize: "12", fontWeight: "700", fill: "#fff", fontFamily: "system-ui", children: "\u20AE" })
+      ] });
+    case "wbtc":
+      return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "11", fill: "#f09242" }),
+        /* @__PURE__ */ jsx("text", { x: "12", y: "16.5", textAnchor: "middle", fontSize: "12", fontWeight: "700", fill: "#fff", fontFamily: "system-ui", children: "\u20BF" })
+      ] });
+    default:
+      return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: gradId, x1: "3", y1: "3", x2: "21", y2: "21", children: [
+          /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "#f6608f" }),
+          /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#fb8b46" })
+        ] }) }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "11", fill: `url(#${gradId})` }),
+        /* @__PURE__ */ jsx("path", { d: "M5.5 14.5c3.2-5 9.8-5 13 0", fill: "none", stroke: "#fff", strokeWidth: "1.8", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("circle", { cx: "9", cy: "10.5", r: "0.9", fill: "#fff" })
+      ] });
+  }
+}
+function TokenAmount({
+  token = "strk",
+  amount,
+  size = 20,
+  color,
+  bold = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1.5 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx(TokenGlyph, { token, size }),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        style: {
+          fontFamily: PRICE_FONT,
+          fontWeight: bold ? 700 : 500,
+          fontSize: size * 0.92,
+          color: color ?? "#f97316",
+          letterSpacing: "-0.01em"
+        },
+        children: amount
+      }
+    )
+  ] });
+}
+export {
+  TokenAmount,
+  TokenGlyph
+};
+//# sourceMappingURL=token-glyph.js.map

package/dist/components/token-glyph.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/token-glyph.tsx"],"sourcesContent":["// Inline SVG token glyphs — self-contained, no external asset dependency.\n// Covers the five tokens active on the platform: STRK, ETH, USDC, USDT, WBTC.\n\nconst PRICE_FONT = '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace';\n\nexport type TokenSymbol = 'strk' | 'eth' | 'usdc' | 'usdt' | 'wbtc';\n\nexport interface TokenGlyphProps {\n  token?: TokenSymbol | string;\n  size?: number;\n}\n\nexport function TokenGlyph({ token = 'strk', size = 20 }: TokenGlyphProps) {\n  const gradId = `ml-tg-strk-${size}`;\n\n  switch (token) {\n    case 'eth':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#2b2f3a\"/>\n          <path d=\"M12 4 7 12.2l5 3 5-3L12 4Z\" fill=\"#e6e8f0\"/>\n          <path d=\"M7 13.3 12 20l5-6.7-5 3-5-3Z\" fill=\"#b9bdcc\"/>\n        </svg>\n      );\n    case 'usdc':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#2775ca\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"13\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">$</text>\n        </svg>\n      );\n    case 'usdt':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#26a17b\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"12\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">₮</text>\n        </svg>\n      );\n    case 'wbtc':\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill=\"#f09242\"/>\n          <text x=\"12\" y=\"16.5\" textAnchor=\"middle\" fontSize=\"12\" fontWeight=\"700\" fill=\"#fff\" fontFamily=\"system-ui\">₿</text>\n        </svg>\n      );\n    default:\n      // STRK — magenta→orange gradient coin with swoosh\n      return (\n        <svg width={size} height={size} viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n          <defs>\n            <linearGradient id={gradId} x1=\"3\" y1=\"3\" x2=\"21\" y2=\"21\">\n              <stop offset=\"0\" stopColor=\"#f6608f\"/>\n              <stop offset=\"1\" stopColor=\"#fb8b46\"/>\n            </linearGradient>\n          </defs>\n          <circle cx=\"12\" cy=\"12\" r=\"11\" fill={`url(#${gradId})`}/>\n          <path d=\"M5.5 14.5c3.2-5 9.8-5 13 0\" fill=\"none\" stroke=\"#fff\" strokeWidth=\"1.8\" strokeLinecap=\"round\"/>\n          <circle cx=\"9\" cy=\"10.5\" r=\"0.9\" fill=\"#fff\"/>\n        </svg>\n      );\n  }\n}\n\nexport interface TokenAmountProps {\n  token?: TokenSymbol | string;\n  amount: string;\n  /** Icon size in px. Text size scales proportionally. */\n  size?: number;\n  /** Override the amount text color. Defaults to brand-price orange. */\n  color?: string;\n  bold?: boolean;\n  className?: string;\n}\n\nexport function TokenAmount({\n  token = 'strk',\n  amount,\n  size = 20,\n  color,\n  bold = true,\n  className,\n}: TokenAmountProps) {\n  return (\n    <span className={`inline-flex items-center gap-1.5 ${className ?? ''}`}>\n      <TokenGlyph token={token} size={size} />\n      <span\n        style={{\n          fontFamily: PRICE_FONT,\n          fontWeight: bold ? 700 : 500,\n          fontSize: size * 0.92,\n          color: color ?? '#f97316',\n          letterSpacing: '-0.01em',\n        }}\n      >\n        {amount}\n      </span>\n    </span>\n  );\n}\n"],"mappings":"AAkBQ,SACE,KADF;AAfR,MAAM,aAAa;AASZ,SAAS,WAAW,EAAE,QAAQ,QAAQ,OAAO,GAAG,GAAoB;AACzE,QAAM,SAAS,cAAc,IAAI;AAEjC,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,oBAAC,UAAK,GAAE,8BAA6B,MAAK,WAAS;AAAA,QACnD,oBAAC,UAAK,GAAE,gCAA+B,MAAK,WAAS;AAAA,SACvD;AAAA,IAEJ,KAAK;AACH,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,oBAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,eAAC;AAAA,SAC/G;AAAA,IAEJ,KAAK;AACH,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,oBAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,oBAAC;AAAA,SAC/G;AAAA,IAEJ,KAAK;AACH,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAK,WAAS;AAAA,QAC7C,oBAAC,UAAK,GAAE,MAAK,GAAE,QAAO,YAAW,UAAS,UAAS,MAAK,YAAW,OAAM,MAAK,QAAO,YAAW,aAAY,oBAAC;AAAA,SAC/G;AAAA,IAEJ;AAEE,aACE,qBAAC,SAAI,OAAO,MAAM,QAAQ,MAAM,SAAQ,aAAY,eAAY,QAC9D;AAAA,4BAAC,UACC,+BAAC,oBAAe,IAAI,QAAQ,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,MACnD;AAAA,8BAAC,UAAK,QAAO,KAAI,WAAU,WAAS;AAAA,UACpC,oBAAC,UAAK,QAAO,KAAI,WAAU,WAAS;AAAA,WACtC,GACF;AAAA,QACA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,MAAM,QAAQ,MAAM,KAAI;AAAA,QACvD,oBAAC,UAAK,GAAE,8BAA6B,MAAK,QAAO,QAAO,QAAO,aAAY,OAAM,eAAc,SAAO;AAAA,QACtG,oBAAC,YAAO,IAAG,KAAI,IAAG,QAAO,GAAE,OAAM,MAAK,QAAM;AAAA,SAC9C;AAAA,EAEN;AACF;AAaO,SAAS,YAAY;AAAA,EAC1B,QAAQ;AAAA,EACR;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,OAAO;AAAA,EACP;AACF,GAAqB;AACnB,SACE,qBAAC,UAAK,WAAW,oCAAoC,aAAa,EAAE,IAClE;AAAA,wBAAC,cAAW,OAAc,MAAY;AAAA,IACtC;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,YAAY,OAAO,MAAM;AAAA,UACzB,UAAU,OAAO;AAAA,UACjB,OAAO,SAAS;AAAA,UAChB,eAAe;AAAA,QACjB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/data/brand.cjs

@@ -22,13 +22,6 @@ __export(brand_exports, {
 });
 module.exports = __toCommonJS(brand_exports);
 const BRAND = {
-  purple: {
-    text: "text-brand-purple",
-    bg: "bg-brand-purple/10",
-    bgSolid: "bg-brand-purple/15",
-    from: "from-brand-purple/20",
-    to: "to-brand-purple/20"
-  },
   blue: {
     text: "text-brand-blue",
     bg: "bg-brand-blue/10",
@@ -36,6 +29,27 @@ const BRAND = {
     from: "from-brand-blue/20",
     to: "to-brand-blue/20"
   },
+  electric: {
+    text: "text-brand-electric",
+    bg: "bg-brand-electric/10",
+    bgSolid: "bg-brand-electric/15",
+    from: "from-brand-electric/20",
+    to: "to-brand-electric/20"
+  },
+  indigo: {
+    text: "text-brand-indigo",
+    bg: "bg-brand-indigo/10",
+    bgSolid: "bg-brand-indigo/15",
+    from: "from-brand-indigo/20",
+    to: "to-brand-indigo/20"
+  },
+  purple: {
+    text: "text-brand-purple",
+    bg: "bg-brand-purple/10",
+    bgSolid: "bg-brand-purple/15",
+    from: "from-brand-purple/20",
+    to: "to-brand-purple/20"
+  },
   rose: {
     text: "text-brand-rose",
     bg: "bg-brand-rose/10",
@@ -50,6 +64,11 @@ const BRAND = {
     from: "from-brand-orange/20",
     to: "to-brand-orange/20"
   },
+  price: {
+    text: "text-brand-price",
+    bg: "bg-brand-price/10",
+    bgSolid: "bg-brand-price/15"
+  },
   navy: {
     text: "text-brand-navy",
     bg: "bg-brand-navy/10",