kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-DV66AZXI.js

@@ -0,0 +1,368 @@
+"use client";
+import {
+  DepositGeneratedView
+} from "./chunk-AU5ZGWGA.js";
+import {
+  DepositPreGeneration
+} from "./chunk-X3MYWPNO.js";
+import {
+  DepositSuccessScreen
+} from "./chunk-QGWVZ5NG.js";
+import {
+  BtcUnifiedReceive
+} from "./chunk-KDNYIMGR.js";
+import {
+  AccountChoiceChip,
+  MethodChoiceChip,
+  NETWORK_CONFIG
+} from "./chunk-W4G74KFZ.js";
+import {
+  ScrollArea
+} from "./chunk-DCUAE6PX.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  ArrowBack,
+  ProgressActivity
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/deposit-invoice-generation.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ACCOUNT_TITLES = {
+  RGB: "RGB & Lightning",
+  SPARK: "Spark",
+  ARKADE: "Arkade",
+  LIQUID: "Liquid"
+};
+function getAssetFamily(assetId, ticker) {
+  if (assetId === "BTC") return "BTC";
+  const normalized = (ticker || "").trim().toUpperCase();
+  if (normalized.startsWith("SPARK")) return "SPARK";
+  if (normalized.startsWith("ARK")) return "ARKADE";
+  return "RGB";
+}
+function resolveReceiveAccounts({
+  assetFamily,
+  accounts
+}) {
+  if (assetFamily === "RGB") return accounts.RGB ? ["RGB"] : [];
+  if (assetFamily === "SPARK") return accounts.SPARK ? ["SPARK"] : [];
+  if (assetFamily === "ARKADE") return accounts.ARKADE ? ["ARKADE"] : [];
+  return ["RGB", "SPARK", "ARKADE"].filter((account) => accounts[account]);
+}
+function resolveReceiveMethodOptions({
+  account,
+  assetFamily,
+  accounts,
+  isLightningAvailable
+}) {
+  const options = [];
+  if (account === "RGB") {
+    options.push({ method: "bitcoin_l1", enabled: accounts.RGB });
+    if (assetFamily === "BTC" || assetFamily === "RGB") {
+      options.push({
+        method: "lightning",
+        enabled: accounts.RGB && isLightningAvailable,
+        disabledReason: isLightningAvailable ? void 0 : "unavailable"
+      });
+    }
+  }
+  if (account === "SPARK") {
+    options.push({ method: "spark", enabled: accounts.SPARK });
+  }
+  if (account === "ARKADE") {
+    options.push({ method: "arkade", enabled: accounts.ARKADE });
+    if (assetFamily === "BTC") options.push({ method: "boarding", enabled: accounts.ARKADE });
+  }
+  return options;
+}
+function DepositInvoiceGeneration({
+  handleBack,
+  handleDone,
+  selectedAsset,
+  selectedAssetId,
+  isNewAsset,
+  channelsLoading,
+  channels,
+  network,
+  setNetwork,
+  isLightningAvailable,
+  isRgbConnected,
+  isSparkConnected,
+  isArkadeConnected,
+  isSparkLightning,
+  maxDepositAmount,
+  usePrivacy,
+  setUsePrivacy,
+  walletChoice,
+  setWalletChoice,
+  arkSubMode,
+  setArkSubMode,
+  btcSelectedAccount,
+  gen,
+  needsColorableUtxos,
+  onOpenCreateUtxos
+}) {
+  const {
+    amount,
+    address,
+    recipientId,
+    loading,
+    depositDetected,
+    invoiceStatus,
+    isInvoicePending,
+    isInvoicePaid,
+    isInvoiceFailedOrExpired,
+    accountReceiveResult,
+    copied,
+    handleAmountChange,
+    generateInvoice,
+    copyToClipboard,
+    getUnitLabel,
+    setAddress,
+    setRecipientId,
+    setAmount,
+    setInvoiceStatus,
+    setAccountReceiveResult
+  } = gen;
+  const isBtc = selectedAssetId === "BTC";
+  const assetFamily = getAssetFamily(selectedAssetId, selectedAsset?.ticker);
+  const displayTicker = selectedAsset?.ticker ?? (isBtc ? "BTC" : "RGB");
+  const selectedAccount = network === "spark" ? "SPARK" : network === "arkade" ? "ARKADE" : network === "lightning" && isBtc && walletChoice === "SPARK" ? "SPARK" : "RGB";
+  const currentMethod = network === "spark" ? "spark" : network === "arkade" ? arkSubMode === "boarding" ? "boarding" : "arkade" : network === "lightning" ? "lightning" : "bitcoin_l1";
+  const routeAccounts = {
+    RGB: isRgbConnected,
+    SPARK: isSparkConnected,
+    ARKADE: isArkadeConnected,
+    // Liquid isn't offered by kaleido-ui's own DepositInvoiceGeneration; the
+    // KaleidoSwap extension uses its own component for the Liquid receive path.
+    LIQUID: false
+  };
+  const availableAccounts = resolveReceiveAccounts({ assetFamily, accounts: routeAccounts });
+  const methodOptions = resolveReceiveMethodOptions({
+    account: selectedAccount,
+    assetFamily,
+    accounts: routeAccounts,
+    isLightningAvailable
+  });
+  const applyMethodSelection = (account, method) => {
+    if (account === "SPARK") setWalletChoice("SPARK");
+    else if (account === "RGB") setWalletChoice("RGB");
+    switch (method) {
+      case "bitcoin_l1":
+        setNetwork("onchain");
+        setWalletChoice("RGB");
+        break;
+      case "lightning":
+        setNetwork("lightning");
+        setWalletChoice(account === "SPARK" ? "SPARK" : "RGB");
+        break;
+      case "spark":
+        setNetwork("spark");
+        setWalletChoice("SPARK");
+        break;
+      case "arkade":
+        setNetwork("arkade");
+        setArkSubMode("ark");
+        break;
+      case "boarding":
+        setNetwork("arkade");
+        setArkSubMode("boarding");
+        break;
+      case "submarine_swap":
+        setNetwork("lightning");
+        setWalletChoice("RGB");
+        break;
+    }
+  };
+  const handleAccountSelect = (account) => {
+    const nextOptions = resolveReceiveMethodOptions({
+      account,
+      assetFamily,
+      accounts: routeAccounts,
+      isLightningAvailable
+    }).filter((option) => option.enabled).map((option) => option.method);
+    const nextMethod = nextOptions.includes(currentMethod) ? currentMethod : nextOptions[0];
+    if (nextMethod) applyMethodSelection(account, nextMethod);
+  };
+  if (depositDetected) {
+    return /* @__PURE__ */ jsx(
+      DepositSuccessScreen,
+      {
+        handleDone,
+        displayTicker,
+        selectedAsset,
+        network,
+        arkSubMode
+      }
+    );
+  }
+  const net = NETWORK_CONFIG[network];
+  const isAutoGenerate = network === "onchain" && isBtc || network === "spark" || network === "arkade" || network === "lightning";
+  const addressLabel = network === "spark" ? "Spark Address" : network === "arkade" ? arkSubMode === "boarding" ? "Boarding Address" : "Arkade Address" : network === "lightning" ? "Lightning Invoice" : "Deposit Address";
+  const showChannelWarning = selectedAccount === "RGB" && network === "lightning" && !channelsLoading && channels.length === 0 && !isSparkConnected;
+  const showLiquidityWarning = !isSparkLightning && network === "lightning" && maxDepositAmount === 0 && !channelsLoading && !isBtc;
+  const isNewRgbAsset = isNewAsset && assetFamily === "RGB";
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex h-screen flex-col overflow-hidden bg-background bg-page-radial pt-16 font-display text-foreground", children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute left-4 top-4 z-30", children: /* @__PURE__ */ jsx(GlyphButton, { icon: ArrowBack, label: "Go back", size: "lg", onClick: handleBack }) }),
+    (() => {
+      const hideDestinationRail = isNewAsset && (network === "spark" || network === "arkade");
+      if (hideDestinationRail) return null;
+      return /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 px-4 py-2", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: "Destination Account" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: availableAccounts.map((account) => /* @__PURE__ */ jsx(
+            AccountChoiceChip,
+            {
+              account,
+              active: isBtc ? btcSelectedAccount === account : selectedAccount === account,
+              onClick: () => {
+                if (isBtc) {
+                  if (account === "SPARK") {
+                    setWalletChoice("SPARK");
+                    setNetwork("spark");
+                  } else if (account === "ARKADE") {
+                    setNetwork("arkade");
+                    setWalletChoice("RGB");
+                  } else {
+                    setWalletChoice("RGB");
+                    setNetwork("onchain");
+                  }
+                } else {
+                  handleAccountSelect(account);
+                }
+              }
+            },
+            account
+          )) })
+        ] }),
+        !isBtc && !(isNewAsset && (network === "spark" || network === "arkade")) && /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: cn("text-muted-foreground", eyebrow), children: "Transfer Method" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex gap-1.5 overflow-x-auto no-scrollbar", children: methodOptions.map(({ method, enabled, disabledReason }) => /* @__PURE__ */ jsx(
+            MethodChoiceChip,
+            {
+              method,
+              active: currentMethod === method,
+              enabled,
+              disabledReason,
+              onClick: () => enabled && applyMethodSelection(selectedAccount, method)
+            },
+            method
+          )) })
+        ] })
+      ] }) });
+    })(),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", viewportAs: "main", viewportClassName: "space-y-2.5 px-4 py-2.5", children: isBtc && accountReceiveResult ? /* @__PURE__ */ jsx(
+      BtcUnifiedReceive,
+      {
+        btcSelectedAccount,
+        accountReceiveResult,
+        invoiceStatus,
+        isInvoicePending,
+        isInvoicePaid,
+        isInvoiceFailedOrExpired,
+        amount,
+        handleAmountChange,
+        loading,
+        copied,
+        copyToClipboard,
+        setAddress,
+        setAmount,
+        setInvoiceStatus,
+        setAccountReceiveResult,
+        handleDone
+      }
+    ) : isBtc && !accountReceiveResult && loading ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4 py-10", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex size-16 items-center justify-center rounded-2xl shadow-raised",
+            NETWORK_CONFIG[btcSelectedAccount === "SPARK" ? "spark" : btcSelectedAccount === "ARKADE" ? "arkade" : "onchain"].bg
+          ),
+          children: /* @__PURE__ */ jsx(
+            IconGlyph,
+            {
+              glyph: ProgressActivity,
+              className: cn(
+                "animate-spin text-icon-4xl",
+                NETWORK_CONFIG[btcSelectedAccount === "SPARK" ? "spark" : btcSelectedAccount === "ARKADE" ? "arkade" : "onchain"].text
+              )
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-center", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-caption font-bold text-muted-foreground", children: "Generating addresses..." }),
+        /* @__PURE__ */ jsx("p", { className: "text-caption text-foreground/55", children: ACCOUNT_TITLES[btcSelectedAccount] })
+      ] })
+    ] }) : !address ? /* @__PURE__ */ jsx(
+      DepositPreGeneration,
+      {
+        selectedAsset,
+        isBtc,
+        network,
+        net,
+        selectedAccount,
+        currentMethod,
+        channelsLoading,
+        showChannelWarning,
+        showLiquidityWarning,
+        isAutoGenerate,
+        loading,
+        usePrivacy,
+        setUsePrivacy,
+        amount,
+        handleAmountChange,
+        getUnitLabel,
+        generateInvoice,
+        needsColorableUtxos,
+        onOpenCreateUtxos,
+        showReceiveSummary: !isNewRgbAsset
+      }
+    ) : /* @__PURE__ */ jsx(
+      DepositGeneratedView,
+      {
+        network,
+        net,
+        isBtc,
+        address,
+        addressLabel,
+        recipientId,
+        arkSubMode,
+        invoiceStatus,
+        isInvoicePending,
+        isInvoicePaid,
+        isInvoiceFailedOrExpired,
+        amount,
+        handleAmountChange,
+        loading,
+        copied,
+        copyToClipboard,
+        getUnitLabel,
+        selectedAsset,
+        maxDepositAmount,
+        setAddress,
+        setRecipientId,
+        setAmount,
+        setInvoiceStatus,
+        handleDone,
+        showQrNetworkBadge: false
+      }
+    ) })
+  ] });
+}
+
+export {
+  DepositInvoiceGeneration
+};

package/dist/web/chunk-DY72P3EE.js

@@ -0,0 +1,86 @@
+"use client";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  GlyphButton
+} from "./chunk-JY3H7ZAI.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  ChevronRight
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/record-list.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var RecordList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "ul",
+  {
+    ref,
+    "data-slot": "record-list",
+    className: cn("m-0 list-none space-y-2 p-0", className),
+    ...props
+  }
+));
+RecordList.displayName = "RecordList";
+var RecordItem = React.forwardRef(
+  ({ identifier, status, summary, children, actions, onOpen, openLabel = "record", selected = false, className, ...props }, ref) => {
+    const stop = (event) => event.stopPropagation();
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref,
+        "data-slot": "record-item",
+        "aria-current": selected ? "true" : void 0,
+        onClick: onOpen,
+        className: cn(
+          "space-y-3 rounded-xl kui-well px-4 py-3 transition-all duration-200",
+          onOpen && "cursor-pointer shadow-raised hover-gradient-violet",
+          selected && "bg-primary/10 bg-gradient-active shadow-glow-primary-soft ring-1 ring-inset ring-primary/40 hover:bg-primary/10",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsx("div", { className: cn("truncate text-body font-semibold", selected ? "text-brand" : "text-foreground"), children: identifier }),
+              summary && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-caption text-muted-foreground", children: summary })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+              status,
+              onOpen && /* @__PURE__ */ jsx(
+                GlyphButton,
+                {
+                  icon: ChevronRight,
+                  label: `Open ${openLabel}`,
+                  size: "sm",
+                  onClick: (event) => {
+                    stop(event);
+                    onOpen();
+                  }
+                }
+              )
+            ] })
+          ] }),
+          children && /* @__PURE__ */ jsx("dl", { className: "m-0 grid grid-cols-2 gap-x-4 gap-y-2", children }),
+          actions && /* @__PURE__ */ jsx("div", { className: "mt-3 flex justify-start gap-2", onClick: stop, children: actions })
+        ]
+      }
+    );
+  }
+);
+RecordItem.displayName = "RecordItem";
+function RecordField({ label, children, wide = false, className }) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "record-field", className: cn("min-w-0", wide && "col-span-2", className), children: [
+    /* @__PURE__ */ jsx("dt", { className: cn("text-muted-foreground", eyebrow), children: label }),
+    /* @__PURE__ */ jsx("dd", { className: "m-0 mt-0.5 break-words text-caption text-foreground", children })
+  ] });
+}
+
+export {
+  RecordList,
+  RecordItem,
+  RecordField
+};

package/dist/web/chunk-DZMOH67F.js

@@ -0,0 +1,43 @@
+"use client";
+import {
+  CopyButton
+} from "./chunk-GEXPB5CG.js";
+import {
+  Collapsible,
+  CollapsibleChevron,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-Q2IXLUSM.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/components/value-list.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ValueList({ values, singular, plural, emptyLabel = "None", defaultOpen = false, className }) {
+  if (values.length === 0) {
+    return /* @__PURE__ */ jsx("span", { className: cn("text-caption text-muted-foreground", className), children: emptyLabel });
+  }
+  const summary = `${values.length} ${values.length === 1 ? singular : plural}`;
+  return /* @__PURE__ */ jsxs(Collapsible, { defaultOpen, "data-slot": "value-list", className: cn("min-w-0", className), children: [
+    /* @__PURE__ */ jsxs(
+      CollapsibleTrigger,
+      {
+        type: "button",
+        className: "inline-flex items-center gap-1 rounded-lg text-caption font-semibold text-foreground transition-colors hover:text-secondary-content data-[state=open]:text-secondary-content",
+        children: [
+          summary,
+          /* @__PURE__ */ jsx(CollapsibleChevron, {})
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("ul", { className: "m-0 mt-2 list-none space-y-1 p-0", children: values.map((value, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1 rounded-xl kui-well px-3 py-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 select-all break-all font-mono text-caption text-foreground", children: value }),
+      /* @__PURE__ */ jsx(CopyButton, { value, label: singular })
+    ] }, `${index}-${value}`)) }) })
+  ] });
+}
+
+export {
+  ValueList
+};

package/dist/web/chunk-EBQ35SOM.js

@@ -0,0 +1,177 @@
+"use client";
+import {
+  OnchainNetworkIcon
+} from "./chunk-WBW5E6LC.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  protocolIcons
+} from "./chunk-WEPSTI3Z.js";
+
+// src/web/components/network-badge.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var networkConfig = {
+  L1: {
+    chipVar: "--color-network-bitcoin-chip",
+    accentVar: "--color-network-bitcoin",
+    textVar: "--color-network-bitcoin-text",
+    border: "border-network-bitcoin/20",
+    label: "L1",
+    iconSuffix: "bitcoin/bitcoin-logo.svg"
+  },
+  LN: {
+    chipVar: "--color-network-lightning-chip",
+    accentVar: "--color-network-lightning",
+    textVar: "--color-network-lightning-text",
+    border: "border-network-lightning/20",
+    label: "LN",
+    iconSuffix: "lightning/lightning.svg"
+  },
+  RGB20: {
+    chipVar: "--color-network-rgb-chip",
+    accentVar: "--color-network-rgb",
+    textVar: "--color-network-rgb-text",
+    border: "border-danger/20",
+    label: "RGB",
+    iconSuffix: "rgb/rgb-logo.svg"
+  },
+  RGB21: {
+    chipVar: "--color-network-rgb-chip",
+    accentVar: "--color-network-rgb",
+    textVar: "--color-network-rgb-text",
+    border: "border-danger/20",
+    label: "RGB21",
+    iconSuffix: "rgb/rgb-logo.svg"
+  },
+  "RGB-L1": {
+    chipVar: "--color-network-rgb-chip",
+    accentVar: "--color-network-rgb",
+    textVar: "--color-network-rgb-text",
+    border: "border-danger/20",
+    label: "RGB L1",
+    iconSuffix: "rgb/rgb-logo.svg"
+  },
+  "RGB-LN": {
+    chipVar: "--color-network-rgb-chip",
+    accentVar: "--color-network-rgb",
+    textVar: "--color-network-rgb-text",
+    border: "border-danger/20",
+    label: "RGB LN",
+    iconSuffix: "rgb/rgb-logo.svg"
+  },
+  Spark: {
+    chipVar: "--color-network-spark-chip",
+    accentVar: "--color-network-spark",
+    textVar: "--color-network-spark-text",
+    border: "border-black/20 dark:border-foreground/20",
+    label: "Spark",
+    iconSuffix: "spark/Asterisk/Spark Asterisk White.svg",
+    // The asterisk is white: drawn black on the light theme, like the label.
+    defaultIconClassName: "kui-mono-icon"
+  },
+  Arkade: {
+    chipVar: "--color-network-arkade-chip",
+    accentVar: "--color-network-arkade",
+    textVar: "--color-network-arkade-text",
+    border: "border-network-arkade/20",
+    label: "Arkade",
+    iconSuffix: "arkade/arkade-icon.svg"
+  },
+  Bitcoin: {
+    chipVar: "--color-network-bitcoin-chip",
+    accentVar: "--color-network-bitcoin",
+    textVar: "--color-network-bitcoin-text",
+    border: "border-network-bitcoin/20",
+    label: "Bitcoin",
+    iconSuffix: "bitcoin/bitcoin-logo.svg"
+  },
+  Liquid: {
+    chipVar: "--color-network-liquid-chip",
+    accentVar: "--color-network-liquid",
+    textVar: "--color-network-liquid-text",
+    border: "border-network-liquid/20",
+    label: "Liquid",
+    iconSuffix: "liquid/logo-liquid.svg"
+  },
+  Taproot: {
+    chipVar: "--color-network-taproot-chip",
+    accentVar: "--color-network-taproot",
+    textVar: "--color-network-taproot-text",
+    border: "border-network-taproot/20",
+    label: "Taproot",
+    iconSuffix: "taproot-assets/tapass-logo.svg"
+  }
+};
+function networkChipStyle(network) {
+  const { chipVar, textVar } = networkConfig[network];
+  return { backgroundColor: `var(${chipVar})`, color: `var(${textVar})` };
+}
+function networkChipVars(network) {
+  const { chipVar, textVar, accentVar } = networkConfig[network];
+  return {
+    "--kui-network-chip": `var(${chipVar})`,
+    "--kui-network-text": `var(${textVar})`,
+    "--kui-network-accent": `var(${accentVar})`
+  };
+}
+function NetworkBadge({
+  network,
+  iconBasePath,
+  showLabel,
+  children,
+  size = "md",
+  className,
+  iconClassName
+}) {
+  const { label, iconSuffix, defaultIconClassName } = networkConfig[network];
+  const icon = iconBasePath ? `${iconBasePath}/${iconSuffix}` : protocolIcons[network] ?? `${iconSuffix}`;
+  const shouldShowLabel = showLabel ?? false;
+  const content = children ?? (shouldShowLabel ? label : null);
+  const chipSize = size === "sm" ? "size-6" : size === "lg" ? "size-14" : "size-8";
+  const imageSize = size === "sm" ? "size-3.5" : size === "lg" ? "size-7" : "size-icon-lg";
+  const chipStyle = networkChipStyle(network);
+  const renderGlyph = (className2) => network === "L1" ? /* @__PURE__ */ jsx(OnchainNetworkIcon, { className: className2 }) : /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: icon,
+      alt: network,
+      className: cn(className2, "object-contain", defaultIconClassName, iconClassName)
+    }
+  );
+  if (!content) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "flex items-center justify-center rounded-full shadow-inner",
+          chipSize,
+          className
+        ),
+        style: chipStyle,
+        children: renderGlyph(imageSize)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "flex w-max items-center justify-center gap-1 rounded-full font-bold shadow-inner",
+        size === "sm" ? "px-2 py-1 text-xxs" : size === "lg" ? "gap-2 px-4 py-3 text-body" : "px-2.5 py-1 text-caption",
+        className
+      ),
+      style: chipStyle,
+      children: [
+        renderGlyph(size === "sm" ? "size-3" : size === "lg" ? "size-6" : "size-3.5"),
+        content
+      ]
+    }
+  );
+}
+
+export {
+  networkChipStyle,
+  networkChipVars,
+  NetworkBadge
+};