@medialane/ui 0.52.0 → 0.53.0

package/dist/components/claim-rail.cjs

@@ -23,9 +23,8 @@ __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");
-const MONO = '"Geist Mono", ui-monospace, SFMono-Regular, monospace';
 function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = import_lucide_react.ShieldCheck }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl border border-border/60 bg-card divide-y divide-border/60 overflow-hidden", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-2xl 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: [
@@ -39,14 +38,7 @@ 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-[13px] font-bold",
-            style: { fontFamily: MONO },
-            children: i + 1
-          }
-        ),
+        /* @__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-[13px] font-bold tabular-nums", children: i + 1 }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm text-foreground/90", children: label })
       ] }, label)) })
     ] }),

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  /** \"What's included\" benefits. Omit to hide that panel (e.g. when a live\n   *  preview is the rail's first panel instead). */\n  included?: { icon: LucideIcon; title: string; desc: string }[];\n  /** \"How it works\" ordered steps. */\n  steps: string[];\n  /** Trust/assurance note: bold lead + the rest of the sentence. */\n  trustLead: string;\n  trust: string;\n  /** Trust glyph — defaults to a shield. */\n  trustIcon?: LucideIcon;\n}\n\nconst MONO = '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace';\n\n/** Right-rail for launchpad/claim pages — one quiet sectioned card\n *  (What's included · How it works · trust). The brand spectrum appears only\n *  as tints: blue benefit chips → purple step numerals → orange trust glyph.\n *  Pure presentation; the consuming app passes the per-surface content. */\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n  return (\n    <div className=\"rounded-2xl border border-border/60 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\n                className=\"h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-[13px] font-bold\"\n                style={{ fontFamily: MONO }}\n              >\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;AA0BU;AA1BV,0BAA6C;AAe7C,MAAM,OAAO;AAMN,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,gCAAY,GAAmB;AACnH,SACE,6CAAC,SAAI,WAAU,yFACZ;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;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,KAAK;AAAA,YAEzB,cAAI;AAAA;AAAA,QACP;AAAA,QACA,4CAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,WAP7C,KAQT,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\";\n\nexport interface ClaimRailProps {\n  /** \"What's included\" benefits. Omit to hide that panel (e.g. when a live\n   *  preview is the rail's first panel instead). */\n  included?: { icon: LucideIcon; title: string; desc: string }[];\n  /** \"How it works\" ordered steps. */\n  steps: string[];\n  /** Trust/assurance note: bold lead + the rest of the sentence. */\n  trustLead: string;\n  trust: string;\n  /** Trust glyph — defaults to a shield. */\n  trustIcon?: LucideIcon;\n}\n\n/** Right-rail for launchpad/claim pages — one quiet borderless sectioned card\n *  (What's included · How it works · trust). The brand spectrum appears only\n *  as tints: blue benefit chips → purple step numerals → orange trust glyph.\n *  Pure presentation; the consuming app passes the per-surface content. */\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n  return (\n    <div className=\"rounded-2xl 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-[13px] 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;AAwBU;AAxBV,0BAA6C;AAmBtC,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,gCAAY,GAAmB;AACnH,SACE,6CAAC,SAAI,WAAU,iEACZ;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,wIACb,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":[]}

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

@@ -17,7 +17,7 @@ interface ClaimRailProps {
     /** Trust glyph — defaults to a shield. */
     trustIcon?: LucideIcon;
 }
-/** Right-rail for launchpad/claim pages — one quiet sectioned card
+/** Right-rail for launchpad/claim pages — one quiet borderless sectioned card
  *  (What's included · How it works · trust). The brand spectrum appears only
  *  as tints: blue benefit chips → purple step numerals → orange trust glyph.
  *  Pure presentation; the consuming app passes the per-surface content. */

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

@@ -17,7 +17,7 @@ interface ClaimRailProps {
     /** Trust glyph — defaults to a shield. */
     trustIcon?: LucideIcon;
 }
-/** Right-rail for launchpad/claim pages — one quiet sectioned card
+/** Right-rail for launchpad/claim pages — one quiet borderless sectioned card
  *  (What's included · How it works · trust). The brand spectrum appears only
  *  as tints: blue benefit chips → purple step numerals → orange trust glyph.
  *  Pure presentation; the consuming app passes the per-surface content. */

package/dist/components/claim-rail.js

@@ -1,8 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ShieldCheck } from "lucide-react";
-const MONO = '"Geist Mono", ui-monospace, SFMono-Regular, monospace';
 function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }) {
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl border border-border/60 bg-card divide-y divide-border/60 overflow-hidden", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-2xl 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: [
@@ -16,14 +15,7 @@ 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-[13px] font-bold",
-            style: { fontFamily: MONO },
-            children: i + 1
-          }
-        ),
+        /* @__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-[13px] font-bold tabular-nums", children: i + 1 }),
         /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground/90", children: label })
       ] }, label)) })
     ] }),

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  /** \"What's included\" benefits. Omit to hide that panel (e.g. when a live\n   *  preview is the rail's first panel instead). */\n  included?: { icon: LucideIcon; title: string; desc: string }[];\n  /** \"How it works\" ordered steps. */\n  steps: string[];\n  /** Trust/assurance note: bold lead + the rest of the sentence. */\n  trustLead: string;\n  trust: string;\n  /** Trust glyph — defaults to a shield. */\n  trustIcon?: LucideIcon;\n}\n\nconst MONO = '\"Geist Mono\", ui-monospace, SFMono-Regular, monospace';\n\n/** Right-rail for launchpad/claim pages — one quiet sectioned card\n *  (What's included · How it works · trust). The brand spectrum appears only\n *  as tints: blue benefit chips → purple step numerals → orange trust glyph.\n *  Pure presentation; the consuming app passes the per-surface content. */\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n  return (\n    <div className=\"rounded-2xl border border-border/60 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\n                className=\"h-8 w-8 rounded-lg bg-brand-purple/10 text-brand-purple flex items-center justify-center shrink-0 text-[13px] font-bold\"\n                style={{ fontFamily: MONO }}\n              >\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":"AA0BU,cAOM,YAPN;AA1BV,SAAS,mBAAoC;AAe7C,MAAM,OAAO;AAMN,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,YAAY,GAAmB;AACnH,SACE,qBAAC,SAAI,WAAU,yFACZ;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;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO,EAAE,YAAY,KAAK;AAAA,YAEzB,cAAI;AAAA;AAAA,QACP;AAAA,QACA,oBAAC,UAAK,WAAU,8BAA8B,iBAAM;AAAA,WAP7C,KAQT,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\";\n\nexport interface ClaimRailProps {\n  /** \"What's included\" benefits. Omit to hide that panel (e.g. when a live\n   *  preview is the rail's first panel instead). */\n  included?: { icon: LucideIcon; title: string; desc: string }[];\n  /** \"How it works\" ordered steps. */\n  steps: string[];\n  /** Trust/assurance note: bold lead + the rest of the sentence. */\n  trustLead: string;\n  trust: string;\n  /** Trust glyph — defaults to a shield. */\n  trustIcon?: LucideIcon;\n}\n\n/** Right-rail for launchpad/claim pages — one quiet borderless sectioned card\n *  (What's included · How it works · trust). The brand spectrum appears only\n *  as tints: blue benefit chips → purple step numerals → orange trust glyph.\n *  Pure presentation; the consuming app passes the per-surface content. */\nexport function ClaimRail({ included, steps, trustLead, trust, trustIcon: TrustIcon = ShieldCheck }: ClaimRailProps) {\n  return (\n    <div className=\"rounded-2xl 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-[13px] 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":"AAwBU,cAOM,YAPN;AAxBV,SAAS,mBAAoC;AAmBtC,SAAS,UAAU,EAAE,UAAU,OAAO,WAAW,OAAO,WAAW,YAAY,YAAY,GAAmB;AACnH,SACE,qBAAC,SAAI,WAAU,iEACZ;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,wIACb,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":[]}

package/dist/components/service-form-shell.cjs

@@ -26,7 +26,7 @@ var import_cn = require("../utils/cn.js");
 var import_service_header = require("./service-header.js");
 function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }) {
   const header = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_service_header.ServiceHeader, { bare: true, icon, title, subtitle, headerAccessory });
-  const form = aside ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-2xl border border-border/60 bg-card p-5 sm:p-6", children }) : children;
+  const form = aside ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "rounded-2xl bg-card p-5 sm:p-6", children }) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_cn.cn)("container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20", aside ? "max-w-5xl" : "max-w-3xl"), children: [
     backSlot,
     aside ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "grid gap-4 lg:grid-cols-12 lg:items-start", children: [

package/dist/components/service-form-shell.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/service-form-shell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ServiceHeader } from \"./service-header.js\";\n\nexport interface ServiceFormShellProps {\n  /** Rendered icon element for the header, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n  icon: ReactNode;\n  title: string;\n  subtitle: string;\n  /** Optional element under the header subtitle (e.g. a URL pill). */\n  headerAccessory?: ReactNode;\n  /** Rendered above the header — the app's own back button (router-specific). */\n  backSlot?: ReactNode;\n  /** Right-rail panels (e.g. <ClaimRail/>). When present, lays out an 8/4 bento. */\n  aside?: ReactNode;\n  /** Rendered in the left column between the header and the form — e.g. a\n   *  <StepNav/> for multi-step flows. Only used in the aside (8/4) layout. */\n  aboveForm?: ReactNode;\n  /** The form. **Already gated by the app** — wrap it in your own auth/wallet\n   *  gate before passing. This component stays presentation-only (no auth,\n   *  no router) so both apps can share it. */\n  children: ReactNode;\n}\n\n/** Shared launchpad/claim form layout: back slot + bare header (no card), then\n *  the form in a quiet hairline card. With an `aside` it lays out an 8/4 bento\n *  (form left, rail right); without, a single centered column. The brand\n *  gradient belongs to the form's action button, not to any container. */\nexport function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps) {\n  // Bare header: the form card is the page's only panel.\n  const header = <ServiceHeader bare icon={icon} title={title} subtitle={subtitle} headerAccessory={headerAccessory} />;\n\n  const form = aside ? (\n    <div className=\"rounded-2xl border border-border/60 bg-card p-5 sm:p-6\">{children}</div>\n  ) : (\n    children\n  );\n\n  return (\n    <div className={cn(\"container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20\", aside ? \"max-w-5xl\" : \"max-w-3xl\")}>\n      {backSlot}\n      {aside ? (\n        <div className=\"grid gap-4 lg:grid-cols-12 lg:items-start\">\n          <div className=\"space-y-4 lg:col-span-8\">\n            {header}\n            {aboveForm}\n            {form}\n          </div>\n          <div className=\"space-y-4 lg:col-span-4 lg:sticky lg:top-24\">{aside}</div>\n        </div>\n      ) : (\n        <div className=\"space-y-6\">\n          {header}\n          {form}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BiB;AA7BjB,gBAAmB;AACnB,4BAA8B;AA0BvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,WAAW,SAAS,GAA0B;AAExI,QAAM,SAAS,4CAAC,uCAAc,MAAI,MAAC,MAAY,OAAc,UAAoB,iBAAkC;AAEnH,QAAM,OAAO,QACX,4CAAC,SAAI,WAAU,0DAA0D,UAAS,IAElF;AAGF,SACE,6CAAC,SAAI,eAAW,cAAG,wDAAwD,QAAQ,cAAc,WAAW,GACzG;AAAA;AAAA,IACA,QACC,6CAAC,SAAI,WAAU,6CACb;AAAA,mDAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,QACA;AAAA,QACA;AAAA,SACH;AAAA,MACA,4CAAC,SAAI,WAAU,+CAA+C,iBAAM;AAAA,OACtE,IAEA,6CAAC,SAAI,WAAU,aACZ;AAAA;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/service-form-shell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ServiceHeader } from \"./service-header.js\";\n\nexport interface ServiceFormShellProps {\n  /** Rendered icon element for the header, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n  icon: ReactNode;\n  title: string;\n  subtitle: string;\n  /** Optional element under the header subtitle (e.g. a URL pill). */\n  headerAccessory?: ReactNode;\n  /** Rendered above the header — the app's own back button (router-specific). */\n  backSlot?: ReactNode;\n  /** Right-rail panels (e.g. <ClaimRail/>). When present, lays out an 8/4 bento. */\n  aside?: ReactNode;\n  /** Rendered in the left column between the header and the form — e.g. a\n   *  <StepNav/> for multi-step flows. Only used in the aside (8/4) layout. */\n  aboveForm?: ReactNode;\n  /** The form. **Already gated by the app** — wrap it in your own auth/wallet\n   *  gate before passing. This component stays presentation-only (no auth,\n   *  no router) so both apps can share it. */\n  children: ReactNode;\n}\n\n/** Shared launchpad/claim form layout: back slot + bare header (no card), then\n *  the form in a quiet borderless card — the surface color alone separates it\n *  from the page. With an `aside` it lays out an 8/4 bento (form left, rail\n *  right); without, a single centered column. The brand gradient belongs to\n *  the form's action button, not to any container. */\nexport function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps) {\n  // Bare header: the form card is the page's only panel.\n  const header = <ServiceHeader bare icon={icon} title={title} subtitle={subtitle} headerAccessory={headerAccessory} />;\n\n  const form = aside ? (\n    <div className=\"rounded-2xl bg-card p-5 sm:p-6\">{children}</div>\n  ) : (\n    children\n  );\n\n  return (\n    <div className={cn(\"container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20\", aside ? \"max-w-5xl\" : \"max-w-3xl\")}>\n      {backSlot}\n      {aside ? (\n        <div className=\"grid gap-4 lg:grid-cols-12 lg:items-start\">\n          <div className=\"space-y-4 lg:col-span-8\">\n            {header}\n            {aboveForm}\n            {form}\n          </div>\n          <div className=\"space-y-4 lg:col-span-4 lg:sticky lg:top-24\">{aside}</div>\n        </div>\n      ) : (\n        <div className=\"space-y-6\">\n          {header}\n          {form}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BiB;AA9BjB,gBAAmB;AACnB,4BAA8B;AA2BvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,WAAW,SAAS,GAA0B;AAExI,QAAM,SAAS,4CAAC,uCAAc,MAAI,MAAC,MAAY,OAAc,UAAoB,iBAAkC;AAEnH,QAAM,OAAO,QACX,4CAAC,SAAI,WAAU,kCAAkC,UAAS,IAE1D;AAGF,SACE,6CAAC,SAAI,eAAW,cAAG,wDAAwD,QAAQ,cAAc,WAAW,GACzG;AAAA;AAAA,IACA,QACC,6CAAC,SAAI,WAAU,6CACb;AAAA,mDAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,QACA;AAAA,QACA;AAAA,SACH;AAAA,MACA,4CAAC,SAAI,WAAU,+CAA+C,iBAAM;AAAA,OACtE,IAEA,6CAAC,SAAI,WAAU,aACZ;AAAA;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/service-form-shell.d.cts

@@ -21,9 +21,10 @@ interface ServiceFormShellProps {
     children: ReactNode;
 }
 /** Shared launchpad/claim form layout: back slot + bare header (no card), then
- *  the form in a quiet hairline card. With an `aside` it lays out an 8/4 bento
- *  (form left, rail right); without, a single centered column. The brand
- *  gradient belongs to the form's action button, not to any container. */
+ *  the form in a quiet borderless card — the surface color alone separates it
+ *  from the page. With an `aside` it lays out an 8/4 bento (form left, rail
+ *  right); without, a single centered column. The brand gradient belongs to
+ *  the form's action button, not to any container. */
 declare function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps): react_jsx_runtime.JSX.Element;
 
 export { ServiceFormShell, type ServiceFormShellProps };

package/dist/components/service-form-shell.d.ts

@@ -21,9 +21,10 @@ interface ServiceFormShellProps {
     children: ReactNode;
 }
 /** Shared launchpad/claim form layout: back slot + bare header (no card), then
- *  the form in a quiet hairline card. With an `aside` it lays out an 8/4 bento
- *  (form left, rail right); without, a single centered column. The brand
- *  gradient belongs to the form's action button, not to any container. */
+ *  the form in a quiet borderless card — the surface color alone separates it
+ *  from the page. With an `aside` it lays out an 8/4 bento (form left, rail
+ *  right); without, a single centered column. The brand gradient belongs to
+ *  the form's action button, not to any container. */
 declare function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps): react_jsx_runtime.JSX.Element;
 
 export { ServiceFormShell, type ServiceFormShellProps };

package/dist/components/service-form-shell.js

@@ -3,7 +3,7 @@ import { cn } from "../utils/cn.js";
 import { ServiceHeader } from "./service-header.js";
 function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }) {
   const header = /* @__PURE__ */ jsx(ServiceHeader, { bare: true, icon, title, subtitle, headerAccessory });
-  const form = aside ? /* @__PURE__ */ jsx("div", { className: "rounded-2xl border border-border/60 bg-card p-5 sm:p-6", children }) : children;
+  const form = aside ? /* @__PURE__ */ jsx("div", { className: "rounded-2xl bg-card p-5 sm:p-6", children }) : children;
   return /* @__PURE__ */ jsxs("div", { className: cn("container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20", aside ? "max-w-5xl" : "max-w-3xl"), children: [
     backSlot,
     aside ? /* @__PURE__ */ jsxs("div", { className: "grid gap-4 lg:grid-cols-12 lg:items-start", children: [

package/dist/components/service-form-shell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/service-form-shell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ServiceHeader } from \"./service-header.js\";\n\nexport interface ServiceFormShellProps {\n  /** Rendered icon element for the header, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n  icon: ReactNode;\n  title: string;\n  subtitle: string;\n  /** Optional element under the header subtitle (e.g. a URL pill). */\n  headerAccessory?: ReactNode;\n  /** Rendered above the header — the app's own back button (router-specific). */\n  backSlot?: ReactNode;\n  /** Right-rail panels (e.g. <ClaimRail/>). When present, lays out an 8/4 bento. */\n  aside?: ReactNode;\n  /** Rendered in the left column between the header and the form — e.g. a\n   *  <StepNav/> for multi-step flows. Only used in the aside (8/4) layout. */\n  aboveForm?: ReactNode;\n  /** The form. **Already gated by the app** — wrap it in your own auth/wallet\n   *  gate before passing. This component stays presentation-only (no auth,\n   *  no router) so both apps can share it. */\n  children: ReactNode;\n}\n\n/** Shared launchpad/claim form layout: back slot + bare header (no card), then\n *  the form in a quiet hairline card. With an `aside` it lays out an 8/4 bento\n *  (form left, rail right); without, a single centered column. The brand\n *  gradient belongs to the form's action button, not to any container. */\nexport function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps) {\n  // Bare header: the form card is the page's only panel.\n  const header = <ServiceHeader bare icon={icon} title={title} subtitle={subtitle} headerAccessory={headerAccessory} />;\n\n  const form = aside ? (\n    <div className=\"rounded-2xl border border-border/60 bg-card p-5 sm:p-6\">{children}</div>\n  ) : (\n    children\n  );\n\n  return (\n    <div className={cn(\"container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20\", aside ? \"max-w-5xl\" : \"max-w-3xl\")}>\n      {backSlot}\n      {aside ? (\n        <div className=\"grid gap-4 lg:grid-cols-12 lg:items-start\">\n          <div className=\"space-y-4 lg:col-span-8\">\n            {header}\n            {aboveForm}\n            {form}\n          </div>\n          <div className=\"space-y-4 lg:col-span-4 lg:sticky lg:top-24\">{aside}</div>\n        </div>\n      ) : (\n        <div className=\"space-y-6\">\n          {header}\n          {form}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA8BiB,cAaP,YAbO;AA7BjB,SAAS,UAAU;AACnB,SAAS,qBAAqB;AA0BvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,WAAW,SAAS,GAA0B;AAExI,QAAM,SAAS,oBAAC,iBAAc,MAAI,MAAC,MAAY,OAAc,UAAoB,iBAAkC;AAEnH,QAAM,OAAO,QACX,oBAAC,SAAI,WAAU,0DAA0D,UAAS,IAElF;AAGF,SACE,qBAAC,SAAI,WAAW,GAAG,wDAAwD,QAAQ,cAAc,WAAW,GACzG;AAAA;AAAA,IACA,QACC,qBAAC,SAAI,WAAU,6CACb;AAAA,2BAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,QACA;AAAA,QACA;AAAA,SACH;AAAA,MACA,oBAAC,SAAI,WAAU,+CAA+C,iBAAM;AAAA,OACtE,IAEA,qBAAC,SAAI,WAAU,aACZ;AAAA;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/service-form-shell.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../utils/cn.js\";\nimport { ServiceHeader } from \"./service-header.js\";\n\nexport interface ServiceFormShellProps {\n  /** Rendered icon element for the header, e.g. <Coins className=\"h-4 w-4 text-white\" />. */\n  icon: ReactNode;\n  title: string;\n  subtitle: string;\n  /** Optional element under the header subtitle (e.g. a URL pill). */\n  headerAccessory?: ReactNode;\n  /** Rendered above the header — the app's own back button (router-specific). */\n  backSlot?: ReactNode;\n  /** Right-rail panels (e.g. <ClaimRail/>). When present, lays out an 8/4 bento. */\n  aside?: ReactNode;\n  /** Rendered in the left column between the header and the form — e.g. a\n   *  <StepNav/> for multi-step flows. Only used in the aside (8/4) layout. */\n  aboveForm?: ReactNode;\n  /** The form. **Already gated by the app** — wrap it in your own auth/wallet\n   *  gate before passing. This component stays presentation-only (no auth,\n   *  no router) so both apps can share it. */\n  children: ReactNode;\n}\n\n/** Shared launchpad/claim form layout: back slot + bare header (no card), then\n *  the form in a quiet borderless card — the surface color alone separates it\n *  from the page. With an `aside` it lays out an 8/4 bento (form left, rail\n *  right); without, a single centered column. The brand gradient belongs to\n *  the form's action button, not to any container. */\nexport function ServiceFormShell({ icon, title, subtitle, headerAccessory, backSlot, aside, aboveForm, children }: ServiceFormShellProps) {\n  // Bare header: the form card is the page's only panel.\n  const header = <ServiceHeader bare icon={icon} title={title} subtitle={subtitle} headerAccessory={headerAccessory} />;\n\n  const form = aside ? (\n    <div className=\"rounded-2xl bg-card p-5 sm:p-6\">{children}</div>\n  ) : (\n    children\n  );\n\n  return (\n    <div className={cn(\"container mx-auto px-4 sm:px-6 py-10 space-y-6 pb-20\", aside ? \"max-w-5xl\" : \"max-w-3xl\")}>\n      {backSlot}\n      {aside ? (\n        <div className=\"grid gap-4 lg:grid-cols-12 lg:items-start\">\n          <div className=\"space-y-4 lg:col-span-8\">\n            {header}\n            {aboveForm}\n            {form}\n          </div>\n          <div className=\"space-y-4 lg:col-span-4 lg:sticky lg:top-24\">{aside}</div>\n        </div>\n      ) : (\n        <div className=\"space-y-6\">\n          {header}\n          {form}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AA+BiB,cAaP,YAbO;AA9BjB,SAAS,UAAU;AACnB,SAAS,qBAAqB;AA2BvB,SAAS,iBAAiB,EAAE,MAAM,OAAO,UAAU,iBAAiB,UAAU,OAAO,WAAW,SAAS,GAA0B;AAExI,QAAM,SAAS,oBAAC,iBAAc,MAAI,MAAC,MAAY,OAAc,UAAoB,iBAAkC;AAEnH,QAAM,OAAO,QACX,oBAAC,SAAI,WAAU,kCAAkC,UAAS,IAE1D;AAGF,SACE,qBAAC,SAAI,WAAW,GAAG,wDAAwD,QAAQ,cAAc,WAAW,GACzG;AAAA;AAAA,IACA,QACC,qBAAC,SAAI,WAAU,6CACb;AAAA,2BAAC,SAAI,WAAU,2BACZ;AAAA;AAAA,QACA;AAAA,QACA;AAAA,SACH;AAAA,MACA,oBAAC,SAAI,WAAU,+CAA+C,iBAAM;AAAA,OACtE,IAEA,qBAAC,SAAI,WAAU,aACZ;AAAA;AAAA,MACA;AAAA,OACH;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/components/stat-tile.cjs

@@ -43,10 +43,9 @@ function StatTile({
         value != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
-            className: "font-semibold leading-none tracking-tight",
+            className: "font-semibold leading-none tracking-tight tabular-nums",
             style: {
               fontSize: big ? 22 : 16,
-              fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, monospace',
               color: accent
             },
             children: value
@@ -64,14 +63,7 @@ function StatPill({ value, label, className }) {
     {
       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-[15px] font-bold text-foreground tabular-nums", children: value }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[13px] text-muted-foreground", children: label })
       ]
     }

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

@@ -1 +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":[]}
+{"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 tabular-nums\"\n          style={{\n            fontSize: big ? 22 : 16,\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 className=\"text-[15px] font-bold text-foreground tabular-nums\">\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,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,oDAAC,UAAK,WAAU,sDACb,iBACH;AAAA,QACA,4CAAC,UAAK,WAAU,qCAAqC,iBAAM;AAAA;AAAA;AAAA,EAC7D;AAEJ;","names":[]}

package/dist/components/stat-tile.js

@@ -19,10 +19,9 @@ function StatTile({
         value != null && /* @__PURE__ */ jsx(
           "span",
           {
-            className: "font-semibold leading-none tracking-tight",
+            className: "font-semibold leading-none tracking-tight tabular-nums",
             style: {
               fontSize: big ? 22 : 16,
-              fontFamily: '"Geist Mono", ui-monospace, SFMono-Regular, monospace',
               color: accent
             },
             children: value
@@ -40,14 +39,7 @@ function StatPill({ value, label, className }) {
     {
       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-[15px] font-bold text-foreground tabular-nums", children: value }),
         /* @__PURE__ */ jsx("span", { className: "text-[13px] text-muted-foreground", children: label })
       ]
     }

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

@@ -1 +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":[]}
+{"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 tabular-nums\"\n          style={{\n            fontSize: big ? 22 : 16,\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 className=\"text-[15px] font-bold text-foreground tabular-nums\">\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,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,4BAAC,UAAK,WAAU,sDACb,iBACH;AAAA,QACA,oBAAC,UAAK,WAAU,qCAAqC,iBAAM;AAAA;AAAA;AAAA,EAC7D;AAEJ;","names":[]}

package/dist/components/token-glyph.cjs

@@ -23,7 +23,6 @@ __export(token_glyph_exports, {
 });
 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) {
@@ -74,7 +73,7 @@ function TokenAmount({
       "span",
       {
         style: {
-          fontFamily: PRICE_FONT,
+          fontVariantNumeric: "tabular-nums",
           fontWeight: bold ? 700 : 500,
           fontSize: size * 0.92,
           color: color ?? "#f97316",

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

@@ -1 +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":[]}
+{"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\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          fontVariantNumeric: 'tabular-nums',\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;AAgBQ;AAND,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,oBAAoB;AAAA,UACpB,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.js

@@ -1,5 +1,4 @@
 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) {
@@ -50,7 +49,7 @@ function TokenAmount({
       "span",
       {
         style: {
-          fontFamily: PRICE_FONT,
+          fontVariantNumeric: "tabular-nums",
           fontWeight: bold ? 700 : 500,
           fontSize: size * 0.92,
           color: color ?? "#f97316",

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

@@ -1 +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":[]}
+{"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\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          fontVariantNumeric: 'tabular-nums',\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":"AAgBQ,SACE,KADF;AAND,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,oBAAoB;AAAA,UACpB,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/medialane.css

@@ -26,6 +26,13 @@
   border: 1px solid rgba(255, 255, 255, 0.5);
 }
 
+/* ── Display face ─────────────────────────────────────────────────────── */
+/* Headings render in the brand display face (Urbanist). Apps set
+   --font-display via next/font; unset, headings inherit the body face. */
+h1, h2, h3 {
+  font-family: var(--font-display, inherit);
+}
+
 /* ── Typography gradients ─────────────────────────────────────────────── */
 .gradient-text {
   background: linear-gradient(135deg, #8a5cf6 0%, #5b4ce6 40%, #3b7bff 100%);

package/dist/preset/tailwind.cjs

@@ -36,6 +36,11 @@ const medialanePreset = {
       },
       borderRadius: {
         brand: "11px"
+      },
+      fontFamily: {
+        // Brand display face (headings). Apps define --font-display via
+        // next/font (Urbanist); falls back to the body face when unset.
+        display: ["var(--font-display)", "Urbanist", "Inter", "system-ui", "sans-serif"]
       }
     }
   }

package/dist/preset/tailwind.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/preset/tailwind.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst medialanePreset: Partial<Config> = {\n  theme: {\n    extend: {\n      colors: {\n        \"brand-blue\":     \"#3b7bff\",\n        \"brand-electric\": \"#1a17ff\",\n        \"brand-indigo\":   \"#5b4ce6\",\n        \"brand-purple\":   \"#8a5cf6\",\n        \"brand-rose\":     \"#f6608f\",\n        \"brand-orange\":   \"#fb8b46\",\n        \"brand-price\":    \"#f97316\",\n        \"brand-navy\":     \"#0a0e1f\",\n      },\n      borderRadius: {\n        brand: \"11px\",\n      },\n    },\n  },\n};\n\nexport default medialanePreset;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,MAAM,kBAAmC;AAAA,EACvC,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,cAAkB;AAAA,QAClB,kBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,cAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,eAAkB;AAAA,QAClB,cAAkB;AAAA,MACpB;AAAA,MACA,cAAc;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,mBAAQ;","names":[]}
+{"version":3,"sources":["../../src/preset/tailwind.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst medialanePreset: Partial<Config> = {\n  theme: {\n    extend: {\n      colors: {\n        \"brand-blue\":     \"#3b7bff\",\n        \"brand-electric\": \"#1a17ff\",\n        \"brand-indigo\":   \"#5b4ce6\",\n        \"brand-purple\":   \"#8a5cf6\",\n        \"brand-rose\":     \"#f6608f\",\n        \"brand-orange\":   \"#fb8b46\",\n        \"brand-price\":    \"#f97316\",\n        \"brand-navy\":     \"#0a0e1f\",\n      },\n      borderRadius: {\n        brand: \"11px\",\n      },\n      fontFamily: {\n        // Brand display face (headings). Apps define --font-display via\n        // next/font (Urbanist); falls back to the body face when unset.\n        display: [\"var(--font-display)\", \"Urbanist\", \"Inter\", \"system-ui\", \"sans-serif\"],\n      },\n    },\n  },\n};\n\nexport default medialanePreset;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,MAAM,kBAAmC;AAAA,EACvC,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,cAAkB;AAAA,QAClB,kBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,cAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,eAAkB;AAAA,QAClB,cAAkB;AAAA,MACpB;AAAA,MACA,cAAc;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA;AAAA;AAAA,QAGV,SAAS,CAAC,uBAAuB,YAAY,SAAS,aAAa,YAAY;AAAA,MACjF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,mBAAQ;","names":[]}

package/dist/preset/tailwind.js

@@ -13,6 +13,11 @@ const medialanePreset = {
       },
       borderRadius: {
         brand: "11px"
+      },
+      fontFamily: {
+        // Brand display face (headings). Apps define --font-display via
+        // next/font (Urbanist); falls back to the body face when unset.
+        display: ["var(--font-display)", "Urbanist", "Inter", "system-ui", "sans-serif"]
       }
     }
   }

package/dist/preset/tailwind.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/preset/tailwind.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst medialanePreset: Partial<Config> = {\n  theme: {\n    extend: {\n      colors: {\n        \"brand-blue\":     \"#3b7bff\",\n        \"brand-electric\": \"#1a17ff\",\n        \"brand-indigo\":   \"#5b4ce6\",\n        \"brand-purple\":   \"#8a5cf6\",\n        \"brand-rose\":     \"#f6608f\",\n        \"brand-orange\":   \"#fb8b46\",\n        \"brand-price\":    \"#f97316\",\n        \"brand-navy\":     \"#0a0e1f\",\n      },\n      borderRadius: {\n        brand: \"11px\",\n      },\n    },\n  },\n};\n\nexport default medialanePreset;\n"],"mappings":"AAEA,MAAM,kBAAmC;AAAA,EACvC,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,cAAkB;AAAA,QAClB,kBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,cAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,eAAkB;AAAA,QAClB,cAAkB;AAAA,MACpB;AAAA,MACA,cAAc;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,mBAAQ;","names":[]}
+{"version":3,"sources":["../../src/preset/tailwind.ts"],"sourcesContent":["import type { Config } from \"tailwindcss\";\n\nconst medialanePreset: Partial<Config> = {\n  theme: {\n    extend: {\n      colors: {\n        \"brand-blue\":     \"#3b7bff\",\n        \"brand-electric\": \"#1a17ff\",\n        \"brand-indigo\":   \"#5b4ce6\",\n        \"brand-purple\":   \"#8a5cf6\",\n        \"brand-rose\":     \"#f6608f\",\n        \"brand-orange\":   \"#fb8b46\",\n        \"brand-price\":    \"#f97316\",\n        \"brand-navy\":     \"#0a0e1f\",\n      },\n      borderRadius: {\n        brand: \"11px\",\n      },\n      fontFamily: {\n        // Brand display face (headings). Apps define --font-display via\n        // next/font (Urbanist); falls back to the body face when unset.\n        display: [\"var(--font-display)\", \"Urbanist\", \"Inter\", \"system-ui\", \"sans-serif\"],\n      },\n    },\n  },\n};\n\nexport default medialanePreset;\n"],"mappings":"AAEA,MAAM,kBAAmC;AAAA,EACvC,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,cAAkB;AAAA,QAClB,kBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,cAAkB;AAAA,QAClB,gBAAkB;AAAA,QAClB,eAAkB;AAAA,QAClB,cAAkB;AAAA,MACpB;AAAA,MACA,cAAc;AAAA,QACZ,OAAO;AAAA,MACT;AAAA,MACA,YAAY;AAAA;AAAA;AAAA,QAGV,SAAS,CAAC,uBAAuB,YAAY,SAAS,aAAa,YAAY;AAAA,MACjF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,mBAAQ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medialane/ui",
-  "version": "0.52.0",
+  "version": "0.53.0",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "main": "./dist/index.cjs",