kaleido-ui 0.1.84 → 0.1.86

package/dist/native/index.cjs

@@ -157,6 +157,25 @@ var colors = {
     thumbHover: "rgba(43, 238, 121, 0.55)",
     track: "transparent"
   },
+  /** External bridge chains — third-party brand colors for network tags.
+   * Keyed by the lowercase chain id the bridge API uses. */
+  bridgeChain: {
+    ethereum: "#627EEA",
+    base: "#0052FF",
+    arbitrum: "#28A0F0",
+    optimism: "#FF0420",
+    polygon: "#8247E5",
+    solana: "#9945FF",
+    tron: "#FF4B4B",
+    bitcoin: "#F7931A",
+    lightning: "#F6C343",
+    spark: "#FF6D00",
+    avalanche: "#E84142",
+    bsc: "#F0B90B",
+    litecoin: "#4A7BD4",
+    ton: "#0098EA",
+    monad: "#836EF9"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",

package/dist/native/index.d.cts

@@ -459,6 +459,25 @@ declare const colors: {
         readonly thumbHover: "rgba(43, 238, 121, 0.55)";
         readonly track: "transparent";
     };
+    /** External bridge chains — third-party brand colors for network tags.
+     * Keyed by the lowercase chain id the bridge API uses. */
+    readonly bridgeChain: {
+        readonly ethereum: "#627EEA";
+        readonly base: "#0052FF";
+        readonly arbitrum: "#28A0F0";
+        readonly optimism: "#FF0420";
+        readonly polygon: "#8247E5";
+        readonly solana: "#9945FF";
+        readonly tron: "#FF4B4B";
+        readonly bitcoin: "#F7931A";
+        readonly lightning: "#F6C343";
+        readonly spark: "#FF6D00";
+        readonly avalanche: "#E84142";
+        readonly bsc: "#F0B90B";
+        readonly litecoin: "#4A7BD4";
+        readonly ton: "#0098EA";
+        readonly monad: "#836EF9";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";

package/dist/native/index.d.ts

@@ -459,6 +459,25 @@ declare const colors: {
         readonly thumbHover: "rgba(43, 238, 121, 0.55)";
         readonly track: "transparent";
     };
+    /** External bridge chains — third-party brand colors for network tags.
+     * Keyed by the lowercase chain id the bridge API uses. */
+    readonly bridgeChain: {
+        readonly ethereum: "#627EEA";
+        readonly base: "#0052FF";
+        readonly arbitrum: "#28A0F0";
+        readonly optimism: "#FF0420";
+        readonly polygon: "#8247E5";
+        readonly solana: "#9945FF";
+        readonly tron: "#FF4B4B";
+        readonly bitcoin: "#F7931A";
+        readonly lightning: "#F6C343";
+        readonly spark: "#FF6D00";
+        readonly avalanche: "#E84142";
+        readonly bsc: "#F0B90B";
+        readonly litecoin: "#4A7BD4";
+        readonly ton: "#0098EA";
+        readonly monad: "#836EF9";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";

package/dist/native/index.js

@@ -79,6 +79,25 @@ var colors = {
     thumbHover: "rgba(43, 238, 121, 0.55)",
     track: "transparent"
   },
+  /** External bridge chains — third-party brand colors for network tags.
+   * Keyed by the lowercase chain id the bridge API uses. */
+  bridgeChain: {
+    ethereum: "#627EEA",
+    base: "#0052FF",
+    arbitrum: "#28A0F0",
+    optimism: "#FF0420",
+    polygon: "#8247E5",
+    solana: "#9945FF",
+    tron: "#FF4B4B",
+    bitcoin: "#F7931A",
+    lightning: "#F6C343",
+    spark: "#FF6D00",
+    avalanche: "#E84142",
+    bsc: "#F0B90B",
+    litecoin: "#4A7BD4",
+    ton: "#0098EA",
+    monad: "#836EF9"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",

package/dist/tokens/index.cjs

@@ -158,6 +158,25 @@ var colors = {
     thumbHover: "rgba(43, 238, 121, 0.55)",
     track: "transparent"
   },
+  /** External bridge chains — third-party brand colors for network tags.
+   * Keyed by the lowercase chain id the bridge API uses. */
+  bridgeChain: {
+    ethereum: "#627EEA",
+    base: "#0052FF",
+    arbitrum: "#28A0F0",
+    optimism: "#FF0420",
+    polygon: "#8247E5",
+    solana: "#9945FF",
+    tron: "#FF4B4B",
+    bitcoin: "#F7931A",
+    lightning: "#F6C343",
+    spark: "#FF6D00",
+    avalanche: "#E84142",
+    bsc: "#F0B90B",
+    litecoin: "#4A7BD4",
+    ton: "#0098EA",
+    monad: "#836EF9"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",

package/dist/tokens/index.d.cts

@@ -70,6 +70,25 @@ declare const colors: {
         readonly thumbHover: "rgba(43, 238, 121, 0.55)";
         readonly track: "transparent";
     };
+    /** External bridge chains — third-party brand colors for network tags.
+     * Keyed by the lowercase chain id the bridge API uses. */
+    readonly bridgeChain: {
+        readonly ethereum: "#627EEA";
+        readonly base: "#0052FF";
+        readonly arbitrum: "#28A0F0";
+        readonly optimism: "#FF0420";
+        readonly polygon: "#8247E5";
+        readonly solana: "#9945FF";
+        readonly tron: "#FF4B4B";
+        readonly bitcoin: "#F7931A";
+        readonly lightning: "#F6C343";
+        readonly spark: "#FF6D00";
+        readonly avalanche: "#E84142";
+        readonly bsc: "#F0B90B";
+        readonly litecoin: "#4A7BD4";
+        readonly ton: "#0098EA";
+        readonly monad: "#836EF9";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";

package/dist/tokens/index.d.ts

@@ -70,6 +70,25 @@ declare const colors: {
         readonly thumbHover: "rgba(43, 238, 121, 0.55)";
         readonly track: "transparent";
     };
+    /** External bridge chains — third-party brand colors for network tags.
+     * Keyed by the lowercase chain id the bridge API uses. */
+    readonly bridgeChain: {
+        readonly ethereum: "#627EEA";
+        readonly base: "#0052FF";
+        readonly arbitrum: "#28A0F0";
+        readonly optimism: "#FF0420";
+        readonly polygon: "#8247E5";
+        readonly solana: "#9945FF";
+        readonly tron: "#FF4B4B";
+        readonly bitcoin: "#F7931A";
+        readonly lightning: "#F6C343";
+        readonly spark: "#FF6D00";
+        readonly avalanche: "#E84142";
+        readonly bsc: "#F0B90B";
+        readonly litecoin: "#4A7BD4";
+        readonly ton: "#0098EA";
+        readonly monad: "#836EF9";
+    };
     /** Network / Layer */
     readonly network: {
         readonly bitcoin: "#F7931A";

package/dist/tokens/index.js

@@ -110,6 +110,25 @@ var colors = {
     thumbHover: "rgba(43, 238, 121, 0.55)",
     track: "transparent"
   },
+  /** External bridge chains — third-party brand colors for network tags.
+   * Keyed by the lowercase chain id the bridge API uses. */
+  bridgeChain: {
+    ethereum: "#627EEA",
+    base: "#0052FF",
+    arbitrum: "#28A0F0",
+    optimism: "#FF0420",
+    polygon: "#8247E5",
+    solana: "#9945FF",
+    tron: "#FF4B4B",
+    bitcoin: "#F7931A",
+    lightning: "#F6C343",
+    spark: "#FF6D00",
+    avalanche: "#E84142",
+    bsc: "#F0B90B",
+    litecoin: "#4A7BD4",
+    ton: "#0098EA",
+    monad: "#836EF9"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",

package/dist/web/index.cjs

@@ -1413,22 +1413,12 @@ var STATUS_UI = {
   pending: { icon: "schedule", className: "bg-warning text-background" }
 };
 var FALLBACK_UI = { icon: "remove", className: "bg-muted text-muted-foreground" };
+var iconBadgeOverlayClass = "absolute -bottom-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full ring-2 ring-card";
 function StatusIconBadge({ icon, status, className }) {
   const ui = status ? STATUS_UI[status] ?? FALLBACK_UI : null;
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cn("relative shrink-0", className), children: [
     icon,
-    ui && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-      "span",
-      {
-        className: cn(
-          // ring-card masks the badge edge against the card surface,
-          // exactly like the network badge on asset icons.
-          "absolute -bottom-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full ring-2 ring-card",
-          ui.className
-        ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: ui.icon, className: "size-3" })
-      }
-    )
+    ui && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: cn(iconBadgeOverlayClass, ui.className), children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: ui.icon, className: "size-3" }) })
   ] });
 }
 
@@ -3756,6 +3746,9 @@ function NetworkRow({
 var import_react11 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime38 = require("react/jsx-runtime");
+function NetworkMiniBadge({ iconUrl, label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn(iconBadgeOverlayClass, "overflow-hidden"), children: iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("img", { src: iconUrl, alt: label ?? "", className: "h-full w-full object-cover" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex h-full w-full items-center justify-center bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: label?.charAt(0) }) });
+}
 function AssetSelector({
   label,
   selectedTicker,
@@ -3789,7 +3782,7 @@ function AssetSelector({
     if (!matchesCategory || !matchesNetwork || !matchesVenue) return false;
     if (!search) return true;
     const searchValue = search.toLowerCase();
-    const matchesSearch = option.ticker.toLowerCase().includes(searchValue) || (option.name?.toLowerCase().includes(searchValue) ?? false) || (option.assetId?.toLowerCase().includes(searchValue) ?? false) || (option.network?.toLowerCase().includes(searchValue) ?? false) || (option.category?.toLowerCase().includes(searchValue) ?? false);
+    const matchesSearch = option.ticker.toLowerCase().includes(searchValue) || (option.name?.toLowerCase().includes(searchValue) ?? false) || (option.assetId?.toLowerCase().includes(searchValue) ?? false) || (option.network?.toLowerCase().includes(searchValue) ?? false) || (option.networkTag?.label.toLowerCase().includes(searchValue) ?? false) || (option.category?.toLowerCase().includes(searchValue) ?? false);
     return matchesSearch;
   }).sort((a, b) => {
     if (a.id === selectedOptionId) return -1;
@@ -3805,19 +3798,29 @@ function AssetSelector({
   const categoryLabelById = new Map(categories.map((category) => [category.id, category.label]));
   const renderAssetOption = (option, optionSelected, optionDisabled) => {
     const optionCategoryLabel = option.categoryLabel || (option.category ? categoryLabelById.get(option.category) : void 0);
+    const hasNetworkBadge = Boolean(option.networkIconUrl || option.networkTag);
     return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "group flex w-full items-center gap-3 text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-        AssetIcon,
-        {
-          ticker: option.ticker,
-          logoUri: option.icon,
-          size: 38,
-          className: cn(
-            "shrink-0 transition-transform duration-200",
-            !optionDisabled && "group-hover:scale-[1.04]"
-          )
-        }
-      ),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "relative shrink-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          AssetIcon,
+          {
+            ticker: option.ticker,
+            logoUri: option.icon,
+            size: 38,
+            className: cn(
+              "shrink-0 transition-transform duration-200",
+              !optionDisabled && "group-hover:scale-[1.04]"
+            )
+          }
+        ),
+        hasNetworkBadge && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          NetworkMiniBadge,
+          {
+            iconUrl: option.networkIconUrl,
+            label: option.networkTag?.label
+          }
+        )
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-3 text-left", children: [
         /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "min-w-0 flex flex-col leading-tight", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "span",
@@ -3828,11 +3831,27 @@ function AssetSelector({
           }
         ) }),
         /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "flex shrink-0 flex-col items-end gap-0.5", children: [
-          optionSelected ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "rounded-full border border-primary/25 bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : optionCategoryLabel && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "rounded-full bg-surface-card px-2 py-0.5 text-tiny font-bold uppercase tracking-wide text-text-dimmed shadow-inner", children: optionCategoryLabel }),
+          optionSelected ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "rounded-full border border-primary/25 bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : option.networkTag ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            "span",
+            {
+              className: cn(
+                "rounded-full px-2 py-0.5 text-xxs font-bold uppercase tracking-wide",
+                !option.networkTag.color && "bg-white/[0.08] text-muted-foreground"
+              ),
+              style: option.networkTag.color ? {
+                backgroundColor: `color-mix(in srgb, ${option.networkTag.color} 15%, transparent)`,
+                color: option.networkTag.color
+              } : void 0,
+              children: option.networkTag.label
+            }
+          ) : optionCategoryLabel && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "rounded-full bg-surface-card px-2 py-0.5 text-tiny font-bold uppercase tracking-wide text-text-dimmed shadow-inner", children: optionCategoryLabel }),
           /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             "span",
             {
-              className: "max-w-24 truncate text-tiny font-medium uppercase tracking-wide text-white/35",
+              className: cn(
+                "max-w-24 truncate",
+                option.networkTag ? "text-xs text-muted-foreground" : "text-tiny font-medium uppercase tracking-wide text-white/35"
+              ),
               title: optionDisabled ? "In use" : option.ticker,
               children: optionDisabled ? "In use" : option.ticker
             }
@@ -3860,7 +3879,13 @@ function AssetSelector({
           children: selected ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "relative shrink-0", children: [
               /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 38 }),
-              selected.network && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+              selected.networkIconUrl || selected.networkTag ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+                NetworkMiniBadge,
+                {
+                  iconUrl: selected.networkIconUrl,
+                  label: selected.networkTag?.label
+                }
+              ) : selected.network && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
                 NetworkBadge,
                 {
                   network: selected.network,
@@ -4174,7 +4199,7 @@ function SwapInputCard({
     unit: receiveDisplayUnit
   }) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_jsx_runtime39.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "relative mb-3 flex flex-col rounded-3xl bg-white/[0.03] shadow-2xl shadow-black/40 backdrop-blur-2xl transition-all duration-300", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "relative mb-3 flex flex-col rounded-2xl bg-white/[0.03] shadow-2xl shadow-black/40 backdrop-blur-2xl transition-all duration-300", children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "p-3.5 pb-4", children: [
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "text-xs font-bold uppercase tracking-widest text-white/60", children: "You Pay" }),
@@ -4255,7 +4280,7 @@ function SwapInputCard({
           children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: "swap_vert", size: "md" })
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "rounded-b-3xl bg-gradient-to-br from-white/[0.01] to-primary/[0.04] p-3.5 pt-4 transition-all duration-300", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "rounded-b-2xl bg-gradient-to-br from-white/[0.01] to-primary/[0.04] p-3.5 pt-4 transition-all duration-300", children: [
         /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { className: "mb-2 text-xs font-bold uppercase tracking-widest text-primary/70", children: "You Receive" }),
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
@@ -7315,6 +7340,25 @@ var colors = {
     thumbHover: "rgba(43, 238, 121, 0.55)",
     track: "transparent"
   },
+  /** External bridge chains — third-party brand colors for network tags.
+   * Keyed by the lowercase chain id the bridge API uses. */
+  bridgeChain: {
+    ethereum: "#627EEA",
+    base: "#0052FF",
+    arbitrum: "#28A0F0",
+    optimism: "#FF0420",
+    polygon: "#8247E5",
+    solana: "#9945FF",
+    tron: "#FF4B4B",
+    bitcoin: "#F7931A",
+    lightning: "#F6C343",
+    spark: "#FF6D00",
+    avalanche: "#E84142",
+    bsc: "#F0B90B",
+    litecoin: "#4A7BD4",
+    ton: "#0098EA",
+    monad: "#836EF9"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",

package/dist/web/index.d.cts

@@ -707,6 +707,13 @@ interface AssetSelectorOption {
     assetId?: string;
     category?: string | null;
     categoryLabel?: string;
+    /** URL of the network mark rendered as a mini-badge over the asset icon. */
+    networkIconUrl?: string;
+    /** Right-aligned network tag: label pill tinted with `color`, ticker beneath. */
+    networkTag?: {
+        label: string;
+        color?: string;
+    };
 }
 interface AssetSelectorCategory {
     id: string;

package/dist/web/index.d.ts

@@ -707,6 +707,13 @@ interface AssetSelectorOption {
     assetId?: string;
     category?: string | null;
     categoryLabel?: string;
+    /** URL of the network mark rendered as a mini-badge over the asset icon. */
+    networkIconUrl?: string;
+    /** Right-aligned network tag: label pill tinted with `color`, ticker beneath. */
+    networkTag?: {
+        label: string;
+        color?: string;
+    };
 }
 interface AssetSelectorCategory {
     id: string;

package/dist/web/index.js

@@ -1226,22 +1226,12 @@ var STATUS_UI = {
   pending: { icon: "schedule", className: "bg-warning text-background" }
 };
 var FALLBACK_UI = { icon: "remove", className: "bg-muted text-muted-foreground" };
+var iconBadgeOverlayClass = "absolute -bottom-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full ring-2 ring-card";
 function StatusIconBadge({ icon, status, className }) {
   const ui = status ? STATUS_UI[status] ?? FALLBACK_UI : null;
   return /* @__PURE__ */ jsxs7("div", { className: cn("relative shrink-0", className), children: [
     icon,
-    ui && /* @__PURE__ */ jsx17(
-      "span",
-      {
-        className: cn(
-          // ring-card masks the badge edge against the card surface,
-          // exactly like the network badge on asset icons.
-          "absolute -bottom-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full ring-2 ring-card",
-          ui.className
-        ),
-        children: /* @__PURE__ */ jsx17(Icon, { name: ui.icon, className: "size-3" })
-      }
-    )
+    ui && /* @__PURE__ */ jsx17("span", { className: cn(iconBadgeOverlayClass, ui.className), children: /* @__PURE__ */ jsx17(Icon, { name: ui.icon, className: "size-3" }) })
   ] });
 }
 
@@ -3575,6 +3565,9 @@ function NetworkRow({
 import { useState as useState11 } from "react";
 import { createPortal } from "react-dom";
 import { Fragment as Fragment6, jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+function NetworkMiniBadge({ iconUrl, label }) {
+  return /* @__PURE__ */ jsx38("span", { className: cn(iconBadgeOverlayClass, "overflow-hidden"), children: iconUrl ? /* @__PURE__ */ jsx38("img", { src: iconUrl, alt: label ?? "", className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsx38("span", { className: "flex h-full w-full items-center justify-center bg-muted text-xxs font-bold uppercase leading-none text-muted-foreground", children: label?.charAt(0) }) });
+}
 function AssetSelector({
   label,
   selectedTicker,
@@ -3608,7 +3601,7 @@ function AssetSelector({
     if (!matchesCategory || !matchesNetwork || !matchesVenue) return false;
     if (!search) return true;
     const searchValue = search.toLowerCase();
-    const matchesSearch = option.ticker.toLowerCase().includes(searchValue) || (option.name?.toLowerCase().includes(searchValue) ?? false) || (option.assetId?.toLowerCase().includes(searchValue) ?? false) || (option.network?.toLowerCase().includes(searchValue) ?? false) || (option.category?.toLowerCase().includes(searchValue) ?? false);
+    const matchesSearch = option.ticker.toLowerCase().includes(searchValue) || (option.name?.toLowerCase().includes(searchValue) ?? false) || (option.assetId?.toLowerCase().includes(searchValue) ?? false) || (option.network?.toLowerCase().includes(searchValue) ?? false) || (option.networkTag?.label.toLowerCase().includes(searchValue) ?? false) || (option.category?.toLowerCase().includes(searchValue) ?? false);
     return matchesSearch;
   }).sort((a, b) => {
     if (a.id === selectedOptionId) return -1;
@@ -3624,19 +3617,29 @@ function AssetSelector({
   const categoryLabelById = new Map(categories.map((category) => [category.id, category.label]));
   const renderAssetOption = (option, optionSelected, optionDisabled) => {
     const optionCategoryLabel = option.categoryLabel || (option.category ? categoryLabelById.get(option.category) : void 0);
+    const hasNetworkBadge = Boolean(option.networkIconUrl || option.networkTag);
     return /* @__PURE__ */ jsxs25("span", { className: "group flex w-full items-center gap-3 text-sm", children: [
-      /* @__PURE__ */ jsx38(
-        AssetIcon,
-        {
-          ticker: option.ticker,
-          logoUri: option.icon,
-          size: 38,
-          className: cn(
-            "shrink-0 transition-transform duration-200",
-            !optionDisabled && "group-hover:scale-[1.04]"
-          )
-        }
-      ),
+      /* @__PURE__ */ jsxs25("span", { className: "relative shrink-0", children: [
+        /* @__PURE__ */ jsx38(
+          AssetIcon,
+          {
+            ticker: option.ticker,
+            logoUri: option.icon,
+            size: 38,
+            className: cn(
+              "shrink-0 transition-transform duration-200",
+              !optionDisabled && "group-hover:scale-[1.04]"
+            )
+          }
+        ),
+        hasNetworkBadge && /* @__PURE__ */ jsx38(
+          NetworkMiniBadge,
+          {
+            iconUrl: option.networkIconUrl,
+            label: option.networkTag?.label
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxs25("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-3 text-left", children: [
         /* @__PURE__ */ jsx38("span", { className: "min-w-0 flex flex-col leading-tight", children: /* @__PURE__ */ jsx38(
           "span",
@@ -3647,11 +3650,27 @@ function AssetSelector({
           }
         ) }),
         /* @__PURE__ */ jsxs25("span", { className: "flex shrink-0 flex-col items-end gap-0.5", children: [
-          optionSelected ? /* @__PURE__ */ jsx38("span", { className: "rounded-full border border-primary/25 bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : optionCategoryLabel && /* @__PURE__ */ jsx38("span", { className: "rounded-full bg-surface-card px-2 py-0.5 text-tiny font-bold uppercase tracking-wide text-text-dimmed shadow-inner", children: optionCategoryLabel }),
+          optionSelected ? /* @__PURE__ */ jsx38("span", { className: "rounded-full border border-primary/25 bg-primary/[0.14] px-2 py-0.5 text-xxs font-bold uppercase tracking-wide text-primary", children: "Current" }) : option.networkTag ? /* @__PURE__ */ jsx38(
+            "span",
+            {
+              className: cn(
+                "rounded-full px-2 py-0.5 text-xxs font-bold uppercase tracking-wide",
+                !option.networkTag.color && "bg-white/[0.08] text-muted-foreground"
+              ),
+              style: option.networkTag.color ? {
+                backgroundColor: `color-mix(in srgb, ${option.networkTag.color} 15%, transparent)`,
+                color: option.networkTag.color
+              } : void 0,
+              children: option.networkTag.label
+            }
+          ) : optionCategoryLabel && /* @__PURE__ */ jsx38("span", { className: "rounded-full bg-surface-card px-2 py-0.5 text-tiny font-bold uppercase tracking-wide text-text-dimmed shadow-inner", children: optionCategoryLabel }),
           /* @__PURE__ */ jsx38(
             "span",
             {
-              className: "max-w-24 truncate text-tiny font-medium uppercase tracking-wide text-white/35",
+              className: cn(
+                "max-w-24 truncate",
+                option.networkTag ? "text-xs text-muted-foreground" : "text-tiny font-medium uppercase tracking-wide text-white/35"
+              ),
               title: optionDisabled ? "In use" : option.ticker,
               children: optionDisabled ? "In use" : option.ticker
             }
@@ -3679,7 +3698,13 @@ function AssetSelector({
           children: selected ? /* @__PURE__ */ jsxs25(Fragment6, { children: [
             /* @__PURE__ */ jsxs25("span", { className: "relative shrink-0", children: [
               /* @__PURE__ */ jsx38(AssetIcon, { ticker: selected.ticker, logoUri: selected.icon, size: 38 }),
-              selected.network && /* @__PURE__ */ jsx38(
+              selected.networkIconUrl || selected.networkTag ? /* @__PURE__ */ jsx38(
+                NetworkMiniBadge,
+                {
+                  iconUrl: selected.networkIconUrl,
+                  label: selected.networkTag?.label
+                }
+              ) : selected.network && /* @__PURE__ */ jsx38(
                 NetworkBadge,
                 {
                   network: selected.network,
@@ -3993,7 +4018,7 @@ function SwapInputCard({
     unit: receiveDisplayUnit
   }) : null;
   return /* @__PURE__ */ jsxs26(Fragment7, { children: [
-    /* @__PURE__ */ jsxs26("div", { className: "relative mb-3 flex flex-col rounded-3xl bg-white/[0.03] shadow-2xl shadow-black/40 backdrop-blur-2xl transition-all duration-300", children: [
+    /* @__PURE__ */ jsxs26("div", { className: "relative mb-3 flex flex-col rounded-2xl bg-white/[0.03] shadow-2xl shadow-black/40 backdrop-blur-2xl transition-all duration-300", children: [
       /* @__PURE__ */ jsxs26("div", { className: "p-3.5 pb-4", children: [
         /* @__PURE__ */ jsxs26("div", { className: "mb-2 flex items-center justify-between gap-2", children: [
           /* @__PURE__ */ jsx39("p", { className: "text-xs font-bold uppercase tracking-widest text-white/60", children: "You Pay" }),
@@ -4074,7 +4099,7 @@ function SwapInputCard({
           children: /* @__PURE__ */ jsx39(Icon, { name: "swap_vert", size: "md" })
         }
       ) }) }),
-      /* @__PURE__ */ jsxs26("div", { className: "rounded-b-3xl bg-gradient-to-br from-white/[0.01] to-primary/[0.04] p-3.5 pt-4 transition-all duration-300", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "rounded-b-2xl bg-gradient-to-br from-white/[0.01] to-primary/[0.04] p-3.5 pt-4 transition-all duration-300", children: [
         /* @__PURE__ */ jsx39("p", { className: "mb-2 text-xs font-bold uppercase tracking-widest text-primary/70", children: "You Receive" }),
         /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx39(
@@ -7134,6 +7159,25 @@ var colors = {
     thumbHover: "rgba(43, 238, 121, 0.55)",
     track: "transparent"
   },
+  /** External bridge chains — third-party brand colors for network tags.
+   * Keyed by the lowercase chain id the bridge API uses. */
+  bridgeChain: {
+    ethereum: "#627EEA",
+    base: "#0052FF",
+    arbitrum: "#28A0F0",
+    optimism: "#FF0420",
+    polygon: "#8247E5",
+    solana: "#9945FF",
+    tron: "#FF4B4B",
+    bitcoin: "#F7931A",
+    lightning: "#F6C343",
+    spark: "#FF6D00",
+    avalanche: "#E84142",
+    bsc: "#F0B90B",
+    litecoin: "#4A7BD4",
+    ton: "#0098EA",
+    monad: "#836EF9"
+  },
   /** Network / Layer */
   network: {
     bitcoin: "#F7931A",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kaleido-ui",
-  "version": "0.1.84",
+  "version": "0.1.86",
   "description": "KaleidoSwap shared UI library — design tokens, web components (Tailwind + Radix), and React Native components extending WDK UI Kit",
   "license": "MIT",
   "type": "module",