@medialane/ui 0.116.0 → 0.118.0

package/dist/components/dual-price.cjs

@@ -37,15 +37,41 @@ function CoinChip({ symbol, size }) {
     }
   );
 }
+function FiatChip({ size }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: "grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80",
+      style: { width: size + 10, height: size + 10, fontSize: size },
+      children: "$"
+    }
+  );
+}
+function stripDollarSign(usdValue) {
+  return usdValue.replace("$", "");
+}
 const DISPLAY_FACE = "font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums";
 const DUAL_PRICE_SCALES = {
-  /** Full-width hero contexts: AssetMarketplacePanel's main price. Has room
-   *  to spell out the currency ("0.07 ETH"), not just imply it via icon. */
-  hero: { fiat: "text-4xl", crypto: "text-2xl", chip: 16, stableChip: 13, divider: "h-7", showCurrencyLabel: true },
+  /** Full-width hero contexts: AssetMarketplacePanel's main price. */
+  hero: { amount: "text-3xl", chip: 18, stableChip: 14, divider: "h-7", showLabel: true },
   /** Card contexts: ListingCard's full variant — denser, the coin icon
    *  already conveys the currency, a text label would be redundant. */
-  card: { fiat: "text-lg", crypto: "text-sm", chip: 11, stableChip: 9, divider: "h-4", showCurrencyLabel: false }
+  card: { amount: "text-base", chip: 13, stableChip: 10, divider: "h-4", showLabel: false }
 };
+function PriceUnit({
+  chip,
+  amount,
+  label,
+  amountClassName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
+    chip,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-baseline gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: amountClassName, children: amount }),
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold text-muted-foreground/70", children: label })
+    ] })
+  ] });
+}
 function DualPrice({
   amountFormatted,
   currency,
@@ -56,24 +82,45 @@ function DualPrice({
   if (!amountFormatted) return null;
   const s = DUAL_PRICE_SCALES[scale];
   const cryptoDisplay = (0, import_format.formatDisplayPrice)(amountFormatted);
+  const amountClass = `${DISPLAY_FACE} ${s.amount}`;
   if (!usdValue) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `flex items-center gap-2.5 ${DISPLAY_FACE} ${s.fiat}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CoinChip, { symbol: currency, size: s.chip }),
-      cryptoDisplay,
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        PriceUnit,
+        {
+          chip: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CoinChip, { symbol: currency, size: s.chip }),
+          amount: cryptoDisplay,
+          label: s.showLabel ? currency ?? void 0 : void 0,
+          amountClassName: amountClass
+        }
+      ),
       trailing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-0.5", children: trailing })
     ] });
   }
   const stable = (0, import_format.isStableCurrency)(currency);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${DISPLAY_FACE} ${s.fiat}`, children: usdValue }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      PriceUnit,
+      {
+        chip: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FiatChip, { size: s.chip }),
+        amount: stripDollarSign(usdValue),
+        label: s.showLabel ? "USD" : void 0,
+        amountClassName: amountClass
+      }
+    ),
     !stable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${s.divider} w-px bg-border/60 shrink-0` }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CoinChip, { symbol: currency, size: stable ? s.stableChip : s.chip }),
-      stable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold text-muted-foreground", children: currency }) : s.showCurrencyLabel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-baseline gap-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${DISPLAY_FACE} ${s.crypto} text-foreground/90`, children: cryptoDisplay }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold text-muted-foreground/70", children: currency })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `${DISPLAY_FACE} ${s.crypto} text-foreground/90`, children: cryptoDisplay })
-    ] }),
+    stable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CoinChip, { symbol: currency, size: s.stableChip }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm font-semibold text-muted-foreground", children: currency })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      PriceUnit,
+      {
+        chip: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CoinChip, { symbol: currency, size: s.chip }),
+        amount: cryptoDisplay,
+        label: s.showLabel ? currency ?? void 0 : void 0,
+        amountClassName: amountClass
+      }
+    ),
     trailing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "ml-0.5", children: trailing })
   ] });
 }
@@ -101,7 +148,8 @@ function PriceChipContent({
   }
   const t = CHIP_TONES[tone];
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    usdValue,
+    stripDollarSign(usdValue),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `font-semibold ${t.text}`, children: "USD" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: t.dot, children: "\xB7" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `inline-flex items-center gap-1 font-semibold ${t.text}`, children: [
       currency && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyIcon, { symbol: currency, size: 12 }),

package/dist/components/dual-price.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n *  reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n      style={{ width: size + 10, height: size + 10 }}\n    >\n      <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n    </span>\n  );\n}\n\nconst DISPLAY_FACE = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n  /** Full-width hero contexts: AssetMarketplacePanel's main price. Has room\n   *  to spell out the currency (\"0.07 ETH\"), not just imply it via icon. */\n  hero: { fiat: \"text-4xl\", crypto: \"text-2xl\", chip: 16, stableChip: 13, divider: \"h-7\", showCurrencyLabel: true },\n  /** Card contexts: ListingCard's full variant — denser, the coin icon\n   *  already conveys the currency, a text label would be redundant. */\n  card: { fiat: \"text-lg\", crypto: \"text-sm\", chip: 11, stableChip: 9, divider: \"h-4\", showCurrencyLabel: false },\n} as const;\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as peers,\n * not primary/afterthought — this platform's audience spans non-crypto\n * newcomers who read fiat and crypto-native buyers who read the token\n * amount. Both use the brand display face at a real step-down in scale so\n * the pairing reads as \"two related numbers,\" not one dominant + one\n * caption. Falls back to crypto-only when no USD rate is available. When\n * the currency is itself a USD-pegged stablecoin, the crypto amount\n * collapses to a small currency badge — showing \"$12.00\" beside \"12.00\n * USDC\" would just be the same number twice.\n */\nexport function DualPrice({\n  amountFormatted,\n  currency,\n  usdValue,\n  scale,\n  trailing,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  scale: keyof typeof DUAL_PRICE_SCALES;\n  trailing?: ReactNode;\n}) {\n  if (!amountFormatted) return null;\n  const s = DUAL_PRICE_SCALES[scale];\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n\n  if (!usdValue) {\n    return (\n      <div className={`flex items-center gap-2.5 ${DISPLAY_FACE} ${s.fiat}`}>\n        <CoinChip symbol={currency} size={s.chip} />\n        {cryptoDisplay}\n        {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n      </div>\n    );\n  }\n\n  const stable = isStableCurrency(currency);\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <span className={`${DISPLAY_FACE} ${s.fiat}`}>{usdValue}</span>\n      {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n      <span className=\"inline-flex items-center gap-1.5\">\n        <CoinChip symbol={currency} size={stable ? s.stableChip : s.chip} />\n        {stable ? (\n          <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n        ) : s.showCurrencyLabel ? (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className={`${DISPLAY_FACE} ${s.crypto} text-foreground/90`}>{cryptoDisplay}</span>\n            <span className=\"text-sm font-semibold text-muted-foreground/70\">{currency}</span>\n          </span>\n        ) : (\n          <span className={`${DISPLAY_FACE} ${s.crypto} text-foreground/90`}>{cryptoDisplay}</span>\n        )}\n      </span>\n      {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n    </div>\n  );\n}\n\nconst CHIP_TONES = {\n  /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n   *  readable regardless of the artwork or the viewer's theme. */\n  \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n  /** Theme-aware card backgrounds (TokenCard). */\n  card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails dimmer, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment.\n */\nexport function PriceChipContent({\n  amountFormatted,\n  currency,\n  usdValue,\n  tone,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  tone: keyof typeof CHIP_TONES;\n}) {\n  if (!amountFormatted) return null;\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const stable = isStableCurrency(currency);\n\n  if (!usdValue) {\n    return (\n      <>\n        {currency && <CurrencyIcon symbol={currency} size={13} />}\n        {cryptoDisplay}\n      </>\n    );\n  }\n\n  const t = CHIP_TONES[tone];\n  return (\n    <>\n      {usdValue}\n      <span className={t.dot}>·</span>\n      <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n        {currency && <CurrencyIcon symbol={currency} size={12} />}\n        {stable ? currency : cryptoDisplay}\n      </span>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n *  reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n      style={{ width: size + 10, height: size + 10 }}\n    >\n      <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n    </span>\n  );\n}\n\n/** Same circular chip as CoinChip, for fiat. Sized 1:1 with the crypto\n *  icon (fontSize === size, not a fraction of it) so the \"$\" reads with\n *  the same visual weight as the coin icon sitting next to it — a smaller,\n *  thinner glyph in an identically-sized circle looked like an afterthought\n *  next to a solid icon, even though the circles measured the same. */\nfunction FiatChip({ size }: { size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80\"\n      style={{ width: size + 10, height: size + 10, fontSize: size }}\n    >\n      $\n    </span>\n  );\n}\n\n/** usdValue arrives pre-formatted (\"$13.14\", \"<$0.01\") — the chip already\n *  carries the \"$\", so strip it from the number to avoid showing it twice. */\nfunction stripDollarSign(usdValue: string): string {\n  return usdValue.replace(\"$\", \"\");\n}\n\nconst DISPLAY_FACE = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n  /** Full-width hero contexts: AssetMarketplacePanel's main price. */\n  hero: { amount: \"text-3xl\", chip: 18, stableChip: 14, divider: \"h-7\", showLabel: true },\n  /** Card contexts: ListingCard's full variant — denser, the coin icon\n   *  already conveys the currency, a text label would be redundant. */\n  card: { amount: \"text-base\", chip: 13, stableChip: 10, divider: \"h-4\", showLabel: false },\n} as const;\n\n/**\n * One currency's [chip] [amount] [optional code label] unit. Fiat and\n * crypto both render through this exact function — the previous version\n * had two separately-hand-coded branches (one baseline-aligned, one\n * center-aligned; one full-opacity, one dimmed) that drifted out of sync\n * with each other. Routing both through one function makes that class of\n * bug structurally impossible: there is only one place font, size,\n * opacity, and alignment for a price unit can be defined.\n */\nfunction PriceUnit({\n  chip,\n  amount,\n  label,\n  amountClassName,\n}: {\n  chip: ReactNode;\n  amount: string;\n  label?: string;\n  amountClassName: string;\n}) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5\">\n      {chip}\n      <span className=\"flex items-baseline gap-1.5\">\n        <span className={amountClassName}>{amount}</span>\n        {label && <span className=\"text-sm font-semibold text-muted-foreground/70\">{label}</span>}\n      </span>\n    </span>\n  );\n}\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as true\n * peers — same font, same size, same icon treatment, same label\n * alignment — not one dominant number with a secondary afterthought.\n * This platform's audience spans non-crypto newcomers who read fiat and\n * crypto-native buyers who read the token amount; neither should look\n * like the \"real\" price and the other a footnote. Falls back to\n * crypto-only when no USD rate is available. When the currency is itself\n * a USD-pegged stablecoin, the crypto side collapses to a chip + code\n * badge — showing \"13.14 USD\" beside \"13.14 USDC\" would just be the same\n * number twice.\n */\nexport function DualPrice({\n  amountFormatted,\n  currency,\n  usdValue,\n  scale,\n  trailing,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  scale: keyof typeof DUAL_PRICE_SCALES;\n  trailing?: ReactNode;\n}) {\n  if (!amountFormatted) return null;\n  const s = DUAL_PRICE_SCALES[scale];\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const amountClass = `${DISPLAY_FACE} ${s.amount}`;\n\n  if (!usdValue) {\n    return (\n      <div className=\"flex items-center gap-2.5\">\n        <PriceUnit\n          chip={<CoinChip symbol={currency} size={s.chip} />}\n          amount={cryptoDisplay}\n          label={s.showLabel ? (currency ?? undefined) : undefined}\n          amountClassName={amountClass}\n        />\n        {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n      </div>\n    );\n  }\n\n  const stable = isStableCurrency(currency);\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <PriceUnit\n        chip={<FiatChip size={s.chip} />}\n        amount={stripDollarSign(usdValue)}\n        label={s.showLabel ? \"USD\" : undefined}\n        amountClassName={amountClass}\n      />\n      {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n      {stable ? (\n        <span className=\"inline-flex items-center gap-1.5\">\n          <CoinChip symbol={currency} size={s.stableChip} />\n          <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n        </span>\n      ) : (\n        <PriceUnit\n          chip={<CoinChip symbol={currency} size={s.chip} />}\n          amount={cryptoDisplay}\n          label={s.showLabel ? (currency ?? undefined) : undefined}\n          amountClassName={amountClass}\n        />\n      )}\n      {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n    </div>\n  );\n}\n\nconst CHIP_TONES = {\n  /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n   *  readable regardless of the artwork or the viewer's theme. */\n  \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n  /** Theme-aware card backgrounds (TokenCard). */\n  card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment. Smaller\n * scale than DualPrice (compact artwork overlay), so no fiat/crypto icon\n * chips here — the middot + dimmer trailing color is what marks the\n * crypto side as secondary in this tighter context.\n */\nexport function PriceChipContent({\n  amountFormatted,\n  currency,\n  usdValue,\n  tone,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  tone: keyof typeof CHIP_TONES;\n}) {\n  if (!amountFormatted) return null;\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const stable = isStableCurrency(currency);\n\n  if (!usdValue) {\n    return (\n      <>\n        {currency && <CurrencyIcon symbol={currency} size={13} />}\n        {cryptoDisplay}\n      </>\n    );\n  }\n\n  const t = CHIP_TONES[tone];\n  return (\n    <>\n      {stripDollarSign(usdValue)}\n      <span className={`font-semibold ${t.text}`}>USD</span>\n      <span className={t.dot}>·</span>\n      <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n        {currency && <CurrencyIcon symbol={currency} size={12} />}\n        {stable ? currency : cryptoDisplay}\n      </span>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/dual-price.d.cts

@@ -8,37 +8,35 @@ declare function CoinChip({ symbol, size }: {
     size: number;
 }): react_jsx_runtime.JSX.Element;
 declare const DUAL_PRICE_SCALES: {
-    /** Full-width hero contexts: AssetMarketplacePanel's main price. Has room
-     *  to spell out the currency ("0.07 ETH"), not just imply it via icon. */
+    /** Full-width hero contexts: AssetMarketplacePanel's main price. */
     readonly hero: {
-        readonly fiat: "text-4xl";
-        readonly crypto: "text-2xl";
-        readonly chip: 16;
-        readonly stableChip: 13;
+        readonly amount: "text-3xl";
+        readonly chip: 18;
+        readonly stableChip: 14;
         readonly divider: "h-7";
-        readonly showCurrencyLabel: true;
+        readonly showLabel: true;
     };
     /** Card contexts: ListingCard's full variant — denser, the coin icon
      *  already conveys the currency, a text label would be redundant. */
     readonly card: {
-        readonly fiat: "text-lg";
-        readonly crypto: "text-sm";
-        readonly chip: 11;
-        readonly stableChip: 9;
+        readonly amount: "text-base";
+        readonly chip: 13;
+        readonly stableChip: 10;
         readonly divider: "h-4";
-        readonly showCurrencyLabel: false;
+        readonly showLabel: false;
     };
 };
 /**
- * Equal-weight dual price: fiat and the on-chain currency shown as peers,
- * not primary/afterthought — this platform's audience spans non-crypto
- * newcomers who read fiat and crypto-native buyers who read the token
- * amount. Both use the brand display face at a real step-down in scale so
- * the pairing reads as "two related numbers," not one dominant + one
- * caption. Falls back to crypto-only when no USD rate is available. When
- * the currency is itself a USD-pegged stablecoin, the crypto amount
- * collapses to a small currency badge — showing "$12.00" beside "12.00
- * USDC" would just be the same number twice.
+ * Equal-weight dual price: fiat and the on-chain currency shown as true
+ * peers — same font, same size, same icon treatment, same label
+ * alignment — not one dominant number with a secondary afterthought.
+ * This platform's audience spans non-crypto newcomers who read fiat and
+ * crypto-native buyers who read the token amount; neither should look
+ * like the "real" price and the other a footnote. Falls back to
+ * crypto-only when no USD rate is available. When the currency is itself
+ * a USD-pegged stablecoin, the crypto side collapses to a chip + code
+ * badge — showing "13.14 USD" beside "13.14 USDC" would just be the same
+ * number twice.
  */
 declare function DualPrice({ amountFormatted, currency, usdValue, scale, trailing, }: {
     amountFormatted: string | null | undefined;
@@ -61,11 +59,14 @@ declare const CHIP_TONES: {
     };
 };
 /**
- * Overlay/pill price content — fiat leads, crypto trails dimmer, middot-
+ * Overlay/pill price content — fiat leads, crypto trails, middot-
  * separated; stablecoins collapse to fiat + symbol alone. Renders only the
  * inner fragment: callers own their own pill container (background, blur,
  * border, padding), which intentionally differs between hosts (see
- * `tone`) rather than being forced into one visual treatment.
+ * `tone`) rather than being forced into one visual treatment. Smaller
+ * scale than DualPrice (compact artwork overlay), so no fiat/crypto icon
+ * chips here — the middot + dimmer trailing color is what marks the
+ * crypto side as secondary in this tighter context.
  */
 declare function PriceChipContent({ amountFormatted, currency, usdValue, tone, }: {
     amountFormatted: string | null | undefined;

package/dist/components/dual-price.d.ts

@@ -8,37 +8,35 @@ declare function CoinChip({ symbol, size }: {
     size: number;
 }): react_jsx_runtime.JSX.Element;
 declare const DUAL_PRICE_SCALES: {
-    /** Full-width hero contexts: AssetMarketplacePanel's main price. Has room
-     *  to spell out the currency ("0.07 ETH"), not just imply it via icon. */
+    /** Full-width hero contexts: AssetMarketplacePanel's main price. */
     readonly hero: {
-        readonly fiat: "text-4xl";
-        readonly crypto: "text-2xl";
-        readonly chip: 16;
-        readonly stableChip: 13;
+        readonly amount: "text-3xl";
+        readonly chip: 18;
+        readonly stableChip: 14;
         readonly divider: "h-7";
-        readonly showCurrencyLabel: true;
+        readonly showLabel: true;
     };
     /** Card contexts: ListingCard's full variant — denser, the coin icon
      *  already conveys the currency, a text label would be redundant. */
     readonly card: {
-        readonly fiat: "text-lg";
-        readonly crypto: "text-sm";
-        readonly chip: 11;
-        readonly stableChip: 9;
+        readonly amount: "text-base";
+        readonly chip: 13;
+        readonly stableChip: 10;
         readonly divider: "h-4";
-        readonly showCurrencyLabel: false;
+        readonly showLabel: false;
     };
 };
 /**
- * Equal-weight dual price: fiat and the on-chain currency shown as peers,
- * not primary/afterthought — this platform's audience spans non-crypto
- * newcomers who read fiat and crypto-native buyers who read the token
- * amount. Both use the brand display face at a real step-down in scale so
- * the pairing reads as "two related numbers," not one dominant + one
- * caption. Falls back to crypto-only when no USD rate is available. When
- * the currency is itself a USD-pegged stablecoin, the crypto amount
- * collapses to a small currency badge — showing "$12.00" beside "12.00
- * USDC" would just be the same number twice.
+ * Equal-weight dual price: fiat and the on-chain currency shown as true
+ * peers — same font, same size, same icon treatment, same label
+ * alignment — not one dominant number with a secondary afterthought.
+ * This platform's audience spans non-crypto newcomers who read fiat and
+ * crypto-native buyers who read the token amount; neither should look
+ * like the "real" price and the other a footnote. Falls back to
+ * crypto-only when no USD rate is available. When the currency is itself
+ * a USD-pegged stablecoin, the crypto side collapses to a chip + code
+ * badge — showing "13.14 USD" beside "13.14 USDC" would just be the same
+ * number twice.
  */
 declare function DualPrice({ amountFormatted, currency, usdValue, scale, trailing, }: {
     amountFormatted: string | null | undefined;
@@ -61,11 +59,14 @@ declare const CHIP_TONES: {
     };
 };
 /**
- * Overlay/pill price content — fiat leads, crypto trails dimmer, middot-
+ * Overlay/pill price content — fiat leads, crypto trails, middot-
  * separated; stablecoins collapse to fiat + symbol alone. Renders only the
  * inner fragment: callers own their own pill container (background, blur,
  * border, padding), which intentionally differs between hosts (see
- * `tone`) rather than being forced into one visual treatment.
+ * `tone`) rather than being forced into one visual treatment. Smaller
+ * scale than DualPrice (compact artwork overlay), so no fiat/crypto icon
+ * chips here — the middot + dimmer trailing color is what marks the
+ * crypto side as secondary in this tighter context.
  */
 declare function PriceChipContent({ amountFormatted, currency, usdValue, tone, }: {
     amountFormatted: string | null | undefined;

package/dist/components/dual-price.js

@@ -12,15 +12,41 @@ function CoinChip({ symbol, size }) {
     }
   );
 }
+function FiatChip({ size }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80",
+      style: { width: size + 10, height: size + 10, fontSize: size },
+      children: "$"
+    }
+  );
+}
+function stripDollarSign(usdValue) {
+  return usdValue.replace("$", "");
+}
 const DISPLAY_FACE = "font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums";
 const DUAL_PRICE_SCALES = {
-  /** Full-width hero contexts: AssetMarketplacePanel's main price. Has room
-   *  to spell out the currency ("0.07 ETH"), not just imply it via icon. */
-  hero: { fiat: "text-4xl", crypto: "text-2xl", chip: 16, stableChip: 13, divider: "h-7", showCurrencyLabel: true },
+  /** Full-width hero contexts: AssetMarketplacePanel's main price. */
+  hero: { amount: "text-3xl", chip: 18, stableChip: 14, divider: "h-7", showLabel: true },
   /** Card contexts: ListingCard's full variant — denser, the coin icon
    *  already conveys the currency, a text label would be redundant. */
-  card: { fiat: "text-lg", crypto: "text-sm", chip: 11, stableChip: 9, divider: "h-4", showCurrencyLabel: false }
+  card: { amount: "text-base", chip: 13, stableChip: 10, divider: "h-4", showLabel: false }
 };
+function PriceUnit({
+  chip,
+  amount,
+  label,
+  amountClassName
+}) {
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+    chip,
+    /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: amountClassName, children: amount }),
+      label && /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-muted-foreground/70", children: label })
+    ] })
+  ] });
+}
 function DualPrice({
   amountFormatted,
   currency,
@@ -31,24 +57,45 @@ function DualPrice({
   if (!amountFormatted) return null;
   const s = DUAL_PRICE_SCALES[scale];
   const cryptoDisplay = formatDisplayPrice(amountFormatted);
+  const amountClass = `${DISPLAY_FACE} ${s.amount}`;
   if (!usdValue) {
-    return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2.5 ${DISPLAY_FACE} ${s.fiat}`, children: [
-      /* @__PURE__ */ jsx(CoinChip, { symbol: currency, size: s.chip }),
-      cryptoDisplay,
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+      /* @__PURE__ */ jsx(
+        PriceUnit,
+        {
+          chip: /* @__PURE__ */ jsx(CoinChip, { symbol: currency, size: s.chip }),
+          amount: cryptoDisplay,
+          label: s.showLabel ? currency ?? void 0 : void 0,
+          amountClassName: amountClass
+        }
+      ),
       trailing && /* @__PURE__ */ jsx("span", { className: "ml-0.5", children: trailing })
     ] });
   }
   const stable = isStableCurrency(currency);
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-    /* @__PURE__ */ jsx("span", { className: `${DISPLAY_FACE} ${s.fiat}`, children: usdValue }),
+    /* @__PURE__ */ jsx(
+      PriceUnit,
+      {
+        chip: /* @__PURE__ */ jsx(FiatChip, { size: s.chip }),
+        amount: stripDollarSign(usdValue),
+        label: s.showLabel ? "USD" : void 0,
+        amountClassName: amountClass
+      }
+    ),
     !stable && /* @__PURE__ */ jsx("span", { className: `${s.divider} w-px bg-border/60 shrink-0` }),
-    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
-      /* @__PURE__ */ jsx(CoinChip, { symbol: currency, size: stable ? s.stableChip : s.chip }),
-      stable ? /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-muted-foreground", children: currency }) : s.showCurrencyLabel ? /* @__PURE__ */ jsxs("span", { className: "flex items-baseline gap-1.5", children: [
-        /* @__PURE__ */ jsx("span", { className: `${DISPLAY_FACE} ${s.crypto} text-foreground/90`, children: cryptoDisplay }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-muted-foreground/70", children: currency })
-      ] }) : /* @__PURE__ */ jsx("span", { className: `${DISPLAY_FACE} ${s.crypto} text-foreground/90`, children: cryptoDisplay })
-    ] }),
+    stable ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(CoinChip, { symbol: currency, size: s.stableChip }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-muted-foreground", children: currency })
+    ] }) : /* @__PURE__ */ jsx(
+      PriceUnit,
+      {
+        chip: /* @__PURE__ */ jsx(CoinChip, { symbol: currency, size: s.chip }),
+        amount: cryptoDisplay,
+        label: s.showLabel ? currency ?? void 0 : void 0,
+        amountClassName: amountClass
+      }
+    ),
     trailing && /* @__PURE__ */ jsx("span", { className: "ml-0.5", children: trailing })
   ] });
 }
@@ -76,7 +123,8 @@ function PriceChipContent({
   }
   const t = CHIP_TONES[tone];
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    usdValue,
+    stripDollarSign(usdValue),
+    /* @__PURE__ */ jsx("span", { className: `font-semibold ${t.text}`, children: "USD" }),
     /* @__PURE__ */ jsx("span", { className: t.dot, children: "\xB7" }),
     /* @__PURE__ */ jsxs("span", { className: `inline-flex items-center gap-1 font-semibold ${t.text}`, children: [
       currency && /* @__PURE__ */ jsx(CurrencyIcon, { symbol: currency, size: 12 }),

package/dist/components/dual-price.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n *  reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n      style={{ width: size + 10, height: size + 10 }}\n    >\n      <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n    </span>\n  );\n}\n\nconst DISPLAY_FACE = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n  /** Full-width hero contexts: AssetMarketplacePanel's main price. Has room\n   *  to spell out the currency (\"0.07 ETH\"), not just imply it via icon. */\n  hero: { fiat: \"text-4xl\", crypto: \"text-2xl\", chip: 16, stableChip: 13, divider: \"h-7\", showCurrencyLabel: true },\n  /** Card contexts: ListingCard's full variant — denser, the coin icon\n   *  already conveys the currency, a text label would be redundant. */\n  card: { fiat: \"text-lg\", crypto: \"text-sm\", chip: 11, stableChip: 9, divider: \"h-4\", showCurrencyLabel: false },\n} as const;\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as peers,\n * not primary/afterthought — this platform's audience spans non-crypto\n * newcomers who read fiat and crypto-native buyers who read the token\n * amount. Both use the brand display face at a real step-down in scale so\n * the pairing reads as \"two related numbers,\" not one dominant + one\n * caption. Falls back to crypto-only when no USD rate is available. When\n * the currency is itself a USD-pegged stablecoin, the crypto amount\n * collapses to a small currency badge — showing \"$12.00\" beside \"12.00\n * USDC\" would just be the same number twice.\n */\nexport function DualPrice({\n  amountFormatted,\n  currency,\n  usdValue,\n  scale,\n  trailing,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  scale: keyof typeof DUAL_PRICE_SCALES;\n  trailing?: ReactNode;\n}) {\n  if (!amountFormatted) return null;\n  const s = DUAL_PRICE_SCALES[scale];\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n\n  if (!usdValue) {\n    return (\n      <div className={`flex items-center gap-2.5 ${DISPLAY_FACE} ${s.fiat}`}>\n        <CoinChip symbol={currency} size={s.chip} />\n        {cryptoDisplay}\n        {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n      </div>\n    );\n  }\n\n  const stable = isStableCurrency(currency);\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <span className={`${DISPLAY_FACE} ${s.fiat}`}>{usdValue}</span>\n      {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n      <span className=\"inline-flex items-center gap-1.5\">\n        <CoinChip symbol={currency} size={stable ? s.stableChip : s.chip} />\n        {stable ? (\n          <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n        ) : s.showCurrencyLabel ? (\n          <span className=\"flex items-baseline gap-1.5\">\n            <span className={`${DISPLAY_FACE} ${s.crypto} text-foreground/90`}>{cryptoDisplay}</span>\n            <span className=\"text-sm font-semibold text-muted-foreground/70\">{currency}</span>\n          </span>\n        ) : (\n          <span className={`${DISPLAY_FACE} ${s.crypto} text-foreground/90`}>{cryptoDisplay}</span>\n        )}\n      </span>\n      {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n    </div>\n  );\n}\n\nconst CHIP_TONES = {\n  /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n   *  readable regardless of the artwork or the viewer's theme. */\n  \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n  /** Theme-aware card backgrounds (TokenCard). */\n  card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails dimmer, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment.\n */\nexport function PriceChipContent({\n  amountFormatted,\n  currency,\n  usdValue,\n  tone,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  tone: keyof typeof CHIP_TONES;\n}) {\n  if (!amountFormatted) return null;\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const stable = isStableCurrency(currency);\n\n  if (!usdValue) {\n    return (\n      <>\n        {currency && <CurrencyIcon symbol={currency} size={13} />}\n        {cryptoDisplay}\n      </>\n    );\n  }\n\n  const t = CHIP_TONES[tone];\n  return (\n    <>\n      {usdValue}\n      <span className={t.dot}>·</span>\n      <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n        {currency && <CurrencyIcon symbol={currency} size={12} />}\n        {stable ? currency : cryptoDisplay}\n      </span>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/dual-price.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ReactNode } from \"react\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\n\n/** Currency icon in the soft circular chip used throughout the wallet UI —\n *  reads as a coin, not a stray glyph floating next to text. */\nexport function CoinChip({ symbol, size }: { symbol: string | null | undefined; size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06]\"\n      style={{ width: size + 10, height: size + 10 }}\n    >\n      <CurrencyIcon symbol={symbol ?? \"\"} size={size} />\n    </span>\n  );\n}\n\n/** Same circular chip as CoinChip, for fiat. Sized 1:1 with the crypto\n *  icon (fontSize === size, not a fraction of it) so the \"$\" reads with\n *  the same visual weight as the coin icon sitting next to it — a smaller,\n *  thinner glyph in an identically-sized circle looked like an afterthought\n *  next to a solid icon, even though the circles measured the same. */\nfunction FiatChip({ size }: { size: number }) {\n  return (\n    <span\n      className=\"grid shrink-0 place-items-center rounded-full bg-foreground/[0.06] font-extrabold leading-none text-foreground/80\"\n      style={{ width: size + 10, height: size + 10, fontSize: size }}\n    >\n      $\n    </span>\n  );\n}\n\n/** usdValue arrives pre-formatted (\"$13.14\", \"<$0.01\") — the chip already\n *  carries the \"$\", so strip it from the number to avoid showing it twice. */\nfunction stripDollarSign(usdValue: string): string {\n  return usdValue.replace(\"$\", \"\");\n}\n\nconst DISPLAY_FACE = \"font-[family-name:var(--font-display)] font-extrabold tracking-tight tabular-nums\";\n\nconst DUAL_PRICE_SCALES = {\n  /** Full-width hero contexts: AssetMarketplacePanel's main price. */\n  hero: { amount: \"text-3xl\", chip: 18, stableChip: 14, divider: \"h-7\", showLabel: true },\n  /** Card contexts: ListingCard's full variant — denser, the coin icon\n   *  already conveys the currency, a text label would be redundant. */\n  card: { amount: \"text-base\", chip: 13, stableChip: 10, divider: \"h-4\", showLabel: false },\n} as const;\n\n/**\n * One currency's [chip] [amount] [optional code label] unit. Fiat and\n * crypto both render through this exact function — the previous version\n * had two separately-hand-coded branches (one baseline-aligned, one\n * center-aligned; one full-opacity, one dimmed) that drifted out of sync\n * with each other. Routing both through one function makes that class of\n * bug structurally impossible: there is only one place font, size,\n * opacity, and alignment for a price unit can be defined.\n */\nfunction PriceUnit({\n  chip,\n  amount,\n  label,\n  amountClassName,\n}: {\n  chip: ReactNode;\n  amount: string;\n  label?: string;\n  amountClassName: string;\n}) {\n  return (\n    <span className=\"inline-flex items-center gap-1.5\">\n      {chip}\n      <span className=\"flex items-baseline gap-1.5\">\n        <span className={amountClassName}>{amount}</span>\n        {label && <span className=\"text-sm font-semibold text-muted-foreground/70\">{label}</span>}\n      </span>\n    </span>\n  );\n}\n\n/**\n * Equal-weight dual price: fiat and the on-chain currency shown as true\n * peers — same font, same size, same icon treatment, same label\n * alignment — not one dominant number with a secondary afterthought.\n * This platform's audience spans non-crypto newcomers who read fiat and\n * crypto-native buyers who read the token amount; neither should look\n * like the \"real\" price and the other a footnote. Falls back to\n * crypto-only when no USD rate is available. When the currency is itself\n * a USD-pegged stablecoin, the crypto side collapses to a chip + code\n * badge — showing \"13.14 USD\" beside \"13.14 USDC\" would just be the same\n * number twice.\n */\nexport function DualPrice({\n  amountFormatted,\n  currency,\n  usdValue,\n  scale,\n  trailing,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  scale: keyof typeof DUAL_PRICE_SCALES;\n  trailing?: ReactNode;\n}) {\n  if (!amountFormatted) return null;\n  const s = DUAL_PRICE_SCALES[scale];\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const amountClass = `${DISPLAY_FACE} ${s.amount}`;\n\n  if (!usdValue) {\n    return (\n      <div className=\"flex items-center gap-2.5\">\n        <PriceUnit\n          chip={<CoinChip symbol={currency} size={s.chip} />}\n          amount={cryptoDisplay}\n          label={s.showLabel ? (currency ?? undefined) : undefined}\n          amountClassName={amountClass}\n        />\n        {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n      </div>\n    );\n  }\n\n  const stable = isStableCurrency(currency);\n  return (\n    <div className=\"flex items-center gap-2.5\">\n      <PriceUnit\n        chip={<FiatChip size={s.chip} />}\n        amount={stripDollarSign(usdValue)}\n        label={s.showLabel ? \"USD\" : undefined}\n        amountClassName={amountClass}\n      />\n      {!stable && <span className={`${s.divider} w-px bg-border/60 shrink-0`} />}\n      {stable ? (\n        <span className=\"inline-flex items-center gap-1.5\">\n          <CoinChip symbol={currency} size={s.stableChip} />\n          <span className=\"text-sm font-semibold text-muted-foreground\">{currency}</span>\n        </span>\n      ) : (\n        <PriceUnit\n          chip={<CoinChip symbol={currency} size={s.chip} />}\n          amount={cryptoDisplay}\n          label={s.showLabel ? (currency ?? undefined) : undefined}\n          amountClassName={amountClass}\n        />\n      )}\n      {trailing && <span className=\"ml-0.5\">{trailing}</span>}\n    </div>\n  );\n}\n\nconst CHIP_TONES = {\n  /** Full-bleed image overlays (AssetCard) — fixed dark glass, guaranteed\n   *  readable regardless of the artwork or the viewer's theme. */\n  \"overlay-dark\": { dot: \"text-white/30\", text: \"text-white/65\" },\n  /** Theme-aware card backgrounds (TokenCard). */\n  card: { dot: \"text-muted-foreground/50\", text: \"text-muted-foreground\" },\n} as const;\n\n/**\n * Overlay/pill price content — fiat leads, crypto trails, middot-\n * separated; stablecoins collapse to fiat + symbol alone. Renders only the\n * inner fragment: callers own their own pill container (background, blur,\n * border, padding), which intentionally differs between hosts (see\n * `tone`) rather than being forced into one visual treatment. Smaller\n * scale than DualPrice (compact artwork overlay), so no fiat/crypto icon\n * chips here — the middot + dimmer trailing color is what marks the\n * crypto side as secondary in this tighter context.\n */\nexport function PriceChipContent({\n  amountFormatted,\n  currency,\n  usdValue,\n  tone,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n  tone: keyof typeof CHIP_TONES;\n}) {\n  if (!amountFormatted) return null;\n  const cryptoDisplay = formatDisplayPrice(amountFormatted);\n  const stable = isStableCurrency(currency);\n\n  if (!usdValue) {\n    return (\n      <>\n        {currency && <CurrencyIcon symbol={currency} size={13} />}\n        {cryptoDisplay}\n      </>\n    );\n  }\n\n  const t = CHIP_TONES[tone];\n  return (\n    <>\n      {stripDollarSign(usdValue)}\n      <span className={`font-semibold ${t.text}`}>USD</span>\n      <span className={t.dot}>·</span>\n      <span className={`inline-flex items-center gap-1 font-semibold ${t.text}`}>\n        {currency && <CurrencyIcon symbol={currency} size={12} />}\n        {stable ? currency : cryptoDisplay}\n      </span>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

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