kaleido-ui 0.2.2 → 0.2.5

package/dist/web/chunk-VYQHGSK6.js

@@ -0,0 +1,244 @@
+"use client";
+import {
+  AccountBalanceWalletFilled,
+  CheckCircleFilled,
+  HistoryFilled,
+  SettingsFilled,
+  SwapHorizFilled
+} from "./chunk-OI7WX7NE.js";
+import {
+  AccountBalanceWallet,
+  Add,
+  AddCircle,
+  Apps,
+  AreaChart,
+  ArrowBack,
+  ArrowCircleUp,
+  ArrowDownward,
+  ArrowForward,
+  ArrowOutward,
+  ArrowUpward,
+  Autorenew,
+  BarChart,
+  Bolt,
+  BugReport,
+  CallReceived,
+  Cancel,
+  ChatBubble,
+  Check,
+  CheckCircle,
+  ChevronLeft,
+  ChevronRight,
+  Close,
+  CloudUpload,
+  Code,
+  ContentCopy,
+  ContentPaste,
+  CurrencyBitcoin,
+  DarkMode,
+  Delete,
+  DeleteSweep,
+  Description,
+  Download,
+  Edit,
+  Error,
+  Event,
+  ExpandLess,
+  ExpandMore,
+  Fingerprint,
+  FolderZip,
+  GridView,
+  Help,
+  Hexagon,
+  History,
+  HistoryToggleOff,
+  HourglassTop,
+  Hub,
+  Info,
+  Inventory_2,
+  IosShare,
+  Key,
+  KeyboardArrowDown,
+  KeyboardArrowUp,
+  Language,
+  Layers,
+  LightMode,
+  Link,
+  Lock,
+  LockOpen,
+  Menu,
+  NorthEast,
+  Notifications,
+  OpenInNew,
+  Palette,
+  Payments,
+  Person,
+  PlayArrow,
+  PowerSettingsNew,
+  ProgressActivity,
+  Psychology,
+  QrCodeScanner,
+  QrCode_2,
+  RadioButtonUnchecked,
+  ReceiptLong,
+  Refresh,
+  Remove,
+  RemoveCircle,
+  Restore,
+  RocketLaunch,
+  ScatterPlot,
+  Schedule,
+  Science,
+  Search,
+  Settings,
+  Shield,
+  ShowChart,
+  SmartToy,
+  SouthWest,
+  StackedBarChart,
+  SwapCalls,
+  SwapHoriz,
+  SwapVert,
+  Sync,
+  SyncAlt,
+  TableRows,
+  Timer,
+  TimerOff,
+  Token,
+  Toll,
+  TouchApp,
+  TrendingUp,
+  Tune,
+  Upload,
+  UploadFile,
+  Verified,
+  Visibility,
+  VisibilityOff,
+  Warning
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/icons/index.ts
+var outlinedMap = {
+  "account_balance_wallet": AccountBalanceWallet,
+  "add": Add,
+  "add_circle": AddCircle,
+  "apps": Apps,
+  "arrow_back": ArrowBack,
+  "arrow_circle_up": ArrowCircleUp,
+  "arrow_downward": ArrowDownward,
+  "arrow_forward": ArrowForward,
+  "arrow_outward": ArrowOutward,
+  "arrow_upward": ArrowUpward,
+  "autorenew": Autorenew,
+  "bar_chart": BarChart,
+  "stacked_bar_chart": StackedBarChart,
+  "show_chart": ShowChart,
+  "area_chart": AreaChart,
+  "scatter_plot": ScatterPlot,
+  "bolt": Bolt,
+  "bug_report": BugReport,
+  "call_received": CallReceived,
+  "cancel": Cancel,
+  "check": Check,
+  "check_circle": CheckCircle,
+  "chevron_left": ChevronLeft,
+  "chevron_right": ChevronRight,
+  "close": Close,
+  "cloud_upload": CloudUpload,
+  "code": Code,
+  "content_copy": ContentCopy,
+  "content_paste": ContentPaste,
+  "currency_bitcoin": CurrencyBitcoin,
+  "delete": Delete,
+  "delete_sweep": DeleteSweep,
+  "description": Description,
+  "download": Download,
+  "edit": Edit,
+  "error": Error,
+  "expand_less": ExpandLess,
+  "expand_more": ExpandMore,
+  "fingerprint": Fingerprint,
+  "folder_zip": FolderZip,
+  "grid_view": GridView,
+  "help": Help,
+  "hexagon": Hexagon,
+  "history": History,
+  "hourglass_top": HourglassTop,
+  "hub": Hub,
+  "info": Info,
+  "inventory_2": Inventory_2,
+  "ios_share": IosShare,
+  "key": Key,
+  "layers": Layers,
+  "link": Link,
+  "lock": Lock,
+  "lock_open": LockOpen,
+  "menu": Menu,
+  "north_east": NorthEast,
+  "open_in_new": OpenInNew,
+  "person": Person,
+  "power_settings_new": PowerSettingsNew,
+  "qr_code_2": QrCode_2,
+  "qr_code_scanner": QrCodeScanner,
+  "radio_button_unchecked": RadioButtonUnchecked,
+  "receipt_long": ReceiptLong,
+  "refresh": Refresh,
+  "remove": Remove,
+  "remove_circle": RemoveCircle,
+  "restore": Restore,
+  "rocket_launch": RocketLaunch,
+  "schedule": Schedule,
+  "science": Science,
+  "chat_bubble": ChatBubble,
+  "event": Event,
+  "play_arrow": PlayArrow,
+  "psychology": Psychology,
+  "search": Search,
+  "settings": Settings,
+  "shield": Shield,
+  "smart_toy": SmartToy,
+  "south_west": SouthWest,
+  "swap_horiz": SwapHoriz,
+  "swap_vert": SwapVert,
+  "sync": Sync,
+  "sync_alt": SyncAlt,
+  "table_rows": TableRows,
+  "language": Language,
+  "notifications": Notifications,
+  "timer": Timer,
+  "timer_off": TimerOff,
+  "token": Token,
+  "tune": Tune,
+  "upload": Upload,
+  "upload_file": UploadFile,
+  "verified": Verified,
+  "visibility": Visibility,
+  "visibility_off": VisibilityOff,
+  "warning": Warning,
+  "history_toggle_off": HistoryToggleOff,
+  "payments": Payments,
+  "toll": Toll,
+  "trending_up": TrendingUp,
+  "touch_app": TouchApp,
+  "dark_mode": DarkMode,
+  "light_mode": LightMode,
+  "palette": Palette,
+  "keyboard_arrow_up": KeyboardArrowUp,
+  "keyboard_arrow_down": KeyboardArrowDown,
+  "swap_calls": SwapCalls,
+  "progress_activity": ProgressActivity
+};
+var isIconName = (value) => typeof value === "string" && Object.prototype.hasOwnProperty.call(outlinedMap, value);
+var filledMap = {
+  "account_balance_wallet": AccountBalanceWalletFilled,
+  "check_circle": CheckCircleFilled,
+  "history": HistoryFilled,
+  "settings": SettingsFilled,
+  "swap_horiz": SwapHorizFilled
+};
+
+export {
+  outlinedMap,
+  isIconName,
+  filledMap
+};

package/dist/web/chunk-W4E2N3UN.js

@@ -0,0 +1,58 @@
+"use client";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+
+// src/web/primitives/avatar.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
+var avatarVariants = cva(
+  "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full font-bold text-secondary-foreground",
+  {
+    variants: {
+      size: {
+        sm: "size-8 text-tiny",
+        lg: "size-10 text-caption"
+      }
+    },
+    defaultVariants: { size: "sm" }
+  }
+);
+var Avatar = React.forwardRef(
+  ({ className, size, src, alt, initials, ...props }, ref) => {
+    const [failed, setFailed] = React.useState(false);
+    React.useEffect(() => setFailed(false), [src]);
+    const showImage = Boolean(src) && !failed;
+    const meaningful = Boolean(alt) && showImage;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "data-slot": "avatar",
+        "aria-hidden": meaningful ? void 0 : true,
+        className: cn(
+          avatarVariants({ size }),
+          showImage ? "shadow-raised ring-1 ring-secondary/25" : "bg-secondary bg-gradient-to-br from-secondary to-info shadow-button-violet",
+          className
+        ),
+        ...props,
+        children: showImage ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src,
+            alt: alt ?? "",
+            className: "size-full object-cover",
+            onError: () => setFailed(true)
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "uppercase", children: initials.slice(0, 2) })
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+
+export {
+  avatarVariants,
+  Avatar
+};

package/dist/web/chunk-W4G74KFZ.js

@@ -0,0 +1,362 @@
+"use client";
+import {
+  colors
+} from "./chunk-A7MPRLJL.js";
+import {
+  DisclosureCard
+} from "./chunk-PIXLIWSO.js";
+import {
+  eyebrow
+} from "./chunk-MTQOAMDW.js";
+import {
+  LiquidNetworkIcon,
+  OnchainNetworkIcon,
+  RgbNetworkIcon
+} from "./chunk-WBW5E6LC.js";
+import {
+  IconGlyph
+} from "./chunk-YQQ7GDLZ.js";
+import {
+  cn
+} from "./chunk-PMGIJMRO.js";
+import {
+  Cancel,
+  Check,
+  CheckCircle,
+  ContentCopy,
+  Info,
+  ProgressActivity,
+  SwapHoriz
+} from "./chunk-XXH4TYKZ.js";
+
+// src/web/components/deposit-ui-shared.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var GLOW_ALPHA = "26";
+function qrGlowStyle(hex) {
+  return { boxShadow: `0 0 30px ${hex}${GLOW_ALPHA}` };
+}
+var NETWORK_CONFIG = {
+  onchain: {
+    label: "On-chain",
+    color: colors.network.bitcoin,
+    bg: "bg-network-bitcoin/15",
+    text: "text-network-bitcoin-fg",
+    border: "border-network-bitcoin/40",
+    qrBorder: "border-network-bitcoin/30",
+    qrGlow: qrGlowStyle(colors.network.bitcoin),
+    // On-chain uses the chain mark (as in NetworkBadge) rather than the ₿ coin — the coin reads
+    // as "the BTC asset", whereas this row is specifically the *on-chain* (L1)
+    // receive rail alongside Lightning/Spark/Arkade, so a chain mark disambiguates.
+    icon: /* @__PURE__ */ jsx(OnchainNetworkIcon, { className: "size-3" })
+  },
+  lightning: {
+    label: "Lightning",
+    color: colors.network.lightning,
+    bg: "bg-network-lightning/15",
+    text: "text-network-lightning-fg",
+    border: "border-network-lightning/40",
+    qrBorder: "border-network-lightning/30",
+    qrGlow: qrGlowStyle(colors.network.lightning),
+    icon: /* @__PURE__ */ jsx("img", { src: "/icons/lightning/lightning.svg", className: "size-3", alt: "" })
+  },
+  spark: {
+    label: "Spark",
+    color: colors.info,
+    bg: "bg-info/15",
+    text: "text-info-fg",
+    border: "border-info/40",
+    qrBorder: "border-info/30",
+    qrGlow: qrGlowStyle(colors.info),
+    icon: /* @__PURE__ */ jsx("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", className: "kui-mono-icon h-3 w-3", alt: "" })
+  },
+  arkade: {
+    label: "Arkade",
+    color: colors.network.arkade,
+    bg: "bg-network-arkade/15",
+    text: "text-network-arkade-fg",
+    border: "border-network-arkade/40",
+    qrBorder: "border-network-arkade/30",
+    qrGlow: qrGlowStyle(colors.network.arkade),
+    icon: /* @__PURE__ */ jsx("img", { src: "/icons/arkade/arkade-icon.svg", className: "h-3 w-3 rounded-sm", alt: "" })
+  },
+  liquid: {
+    label: "Liquid",
+    color: colors.network.liquid,
+    bg: "bg-network-liquid/15",
+    text: "text-network-liquid-fg",
+    border: "border-network-liquid/40",
+    qrBorder: "border-network-liquid/30",
+    qrGlow: qrGlowStyle(colors.network.liquid),
+    icon: /* @__PURE__ */ jsx(LiquidNetworkIcon, { className: "h-3 w-3" })
+  }
+};
+var ACCOUNT_META = {
+  RGB: {
+    shortLabel: "RGB",
+    accentBg: "bg-primary/10",
+    accentText: "text-brand",
+    accentBorder: "border-primary/30",
+    // Bundled RGB mark (protocolIcons) — a host-served /icons/rgb/... path
+    // renders as a broken box in consumers that don't ship that asset.
+    icon: /* @__PURE__ */ jsx(RgbNetworkIcon, { className: "h-2.5 w-2.5" })
+  },
+  SPARK: {
+    shortLabel: "Spark",
+    accentBg: "bg-network-spark/10",
+    accentText: "text-network-spark-fg",
+    accentBorder: "border-network-spark/30",
+    icon: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: "/icons/spark/Asterisk/Spark Asterisk White.svg",
+        alt: "",
+        className: "kui-mono-icon h-2.5 w-2.5 object-contain"
+      }
+    )
+  },
+  ARKADE: {
+    shortLabel: "Arkade",
+    accentBg: "bg-network-arkade/10",
+    accentText: "text-network-arkade-fg",
+    accentBorder: "border-network-arkade/30",
+    icon: /* @__PURE__ */ jsx("img", { src: "/icons/arkade/arkade-icon.svg", alt: "", className: "h-2.5 w-2.5 rounded-[1px] object-contain" })
+  },
+  LIQUID: {
+    shortLabel: "Liquid",
+    accentBg: "bg-network-liquid/10",
+    accentText: "text-network-liquid-fg",
+    accentBorder: "border-network-liquid/30",
+    icon: /* @__PURE__ */ jsx(LiquidNetworkIcon, { className: "h-2.5 w-2.5" })
+  }
+};
+var METHOD_META = {
+  bitcoin_l1: { label: "On-chain", icon: /* @__PURE__ */ jsx(OnchainNetworkIcon, { className: "size-3" }) },
+  lightning: { label: "Lightning", icon: /* @__PURE__ */ jsx("img", { src: "/icons/lightning/lightning.svg", className: "size-3", alt: "" }) },
+  spark: {
+    label: "Spark",
+    icon: /* @__PURE__ */ jsx("img", { src: "/icons/spark/Asterisk/Spark Asterisk White.svg", className: "kui-mono-icon size-3 object-contain", alt: "" })
+  },
+  arkade: { label: "Arkade", icon: /* @__PURE__ */ jsx("img", { src: "/icons/arkade/arkade-icon.svg", className: "size-3 rounded-sm object-contain", alt: "" }) },
+  // Boarding is on-chain BTC joining Arkade; a submarine swap is a swap between rails.
+  boarding: { label: "Boarding", icon: /* @__PURE__ */ jsx(OnchainNetworkIcon, { className: "size-3" }) },
+  submarine_swap: { label: "Submarine Swap", icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: SwapHoriz, className: "text-icon-xs" }) }
+};
+function InvoiceStatusBanner({
+  isInvoicePending,
+  isInvoicePaid,
+  isInvoiceFailedOrExpired,
+  invoiceStatus
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center gap-2 rounded-xl px-3 py-1.5 text-caption font-bold",
+        isInvoicePaid ? "bg-primary/10 text-brand shadow-glow-primary-soft" : isInvoiceFailedOrExpired ? "bg-danger/10 text-danger-fg" : "bg-warning/10 text-warning-fg"
+      ),
+      children: [
+        isInvoicePending && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(IconGlyph, { glyph: ProgressActivity, className: "animate-spin text-icon-sm" }),
+          /* @__PURE__ */ jsx("span", { children: "Waiting for payment..." })
+        ] }),
+        isInvoicePaid && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(IconGlyph, { glyph: CheckCircle, className: "text-icon-sm" }),
+          /* @__PURE__ */ jsx("span", { children: "Payment received!" })
+        ] }),
+        isInvoiceFailedOrExpired && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(IconGlyph, { glyph: Cancel, className: "text-icon-sm" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Invoice ",
+            invoiceStatus?.toLowerCase() === "expired" ? "expired" : "failed"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function PaidOverlay() {
+  return (
+    // Reaches 3px past the QR card, its radius concentric with the card's
+    // rounded-2xl, so neither the card's anti-aliased white edge nor a frame
+    // of up to 3px shows at the corners.
+    /* @__PURE__ */ jsx("div", { className: "absolute -inset-[3px] flex items-center justify-center rounded-[calc(var(--radius-2xl)+3px)] bg-background/95 bg-gradient-card-hero", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex size-14 items-center justify-center rounded-full bg-primary bg-gradient-primary shadow-glow-brand", children: /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, className: "text-icon-4xl text-background" }) }),
+      /* @__PURE__ */ jsx("span", { className: "text-body font-bold text-gradient-brand", children: "Received!" })
+    ] }) })
+  );
+}
+function CopyIcon({ copied, variant = "tile", className }) {
+  if (variant === "bare") {
+    return /* @__PURE__ */ jsx(
+      IconGlyph,
+      {
+        glyph: copied ? Check : ContentCopy,
+        "aria-hidden": "true",
+        className: cn("text-icon-sm", copied && "text-brand", className)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex-shrink-0 rounded-lg p-2 transition-all",
+        copied ? "bg-primary/15 text-brand shadow-glow-primary-soft" : "bg-secondary/15 text-secondary-content group-hover:bg-secondary group-hover:bg-gradient-violet group-hover:text-white"
+      ),
+      children: copied ? /* @__PURE__ */ jsx(IconGlyph, { glyph: Check, size: "sm" }) : /* @__PURE__ */ jsx(IconGlyph, { glyph: ContentCopy, size: "sm" })
+    }
+  );
+}
+function AccountChoiceChip({
+  account,
+  active,
+  onClick,
+  label
+}) {
+  const meta = ACCOUNT_META[account];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "data-testid": `deposit-account-${account.toLowerCase()}`,
+      className: cn(
+        "flex flex-shrink-0 items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-1.5 text-icon-xxs font-bold transition-all",
+        active ? cn(meta.accentText, "bg-primary/10 bg-gradient-active ring-1 ring-inset ring-primary/40 shadow-glow-primary-faint") : "bg-foreground/5 text-muted-foreground hover-gradient-violet hover:text-foreground/80"
+      ),
+      children: [
+        meta.icon,
+        /* @__PURE__ */ jsx("span", { children: label ?? meta.shortLabel })
+      ]
+    }
+  );
+}
+var NETWORK_INFO = {
+  onchain: {
+    title: "On-chain (Bitcoin L1)",
+    detail: "Standard Bitcoin transaction. Anyone can pay you from any Bitcoin wallet.",
+    bullets: [
+      "Settles in about 10 minutes per confirmation",
+      "Pays Bitcoin miner fees, which vary with network load",
+      "Spark deposits are auto-claimed once confirmed"
+    ]
+  },
+  lightning: {
+    title: "Lightning",
+    detail: "Instant Bitcoin payments off-chain. Best for small amounts, near-zero fees.",
+    bullets: [
+      "Settles in seconds, very low fees",
+      "Sender needs a Lightning wallet with outbound liquidity",
+      "Invoice expires, so generate a fresh one if needed"
+    ]
+  },
+  spark: {
+    title: "Spark",
+    detail: "Native Spark transfer between Spark wallets. Instant and effectively free.",
+    bullets: [
+      "Settles instantly between Spark wallets",
+      "Sender must use a Spark-compatible wallet",
+      "Cannot receive from a regular Bitcoin or Lightning wallet directly"
+    ]
+  },
+  arkade: {
+    title: "Arkade",
+    detail: "Off-chain VTXO on the Ark protocol. Instant receive, with periodic on-chain settlement.",
+    bullets: [
+      "Settles instantly between Arkade wallets",
+      "Boarding address accepts on-chain Bitcoin and joins the next round",
+      "VTXOs require periodic refresh to stay valid"
+    ]
+  },
+  liquid: {
+    title: "Liquid",
+    detail: "Bitcoin sidechain transaction (L-BTC or Liquid assets). One confidential address receives any Liquid asset.",
+    bullets: [
+      "Blocks every minute; ~2 confirmations to settle",
+      "Amounts are confidential on-chain by default",
+      "Sender needs a Liquid wallet (L-BTC or Liquid assets)"
+    ]
+  }
+};
+var NETWORK_INFO_MARK = {
+  onchain: { src: "/logos/protocols/bitcoin.svg", text: "text-network-bitcoin-fg" },
+  lightning: { src: "/logos/protocols/lightning.svg", text: "text-network-lightning-fg" },
+  spark: { src: "/logos/protocols/spark-asterisk-white.svg", text: "text-network-spark-fg", mono: true },
+  arkade: { src: "/logos/protocols/arkade.svg", text: "text-network-arkade-fg" },
+  liquid: { src: "/logos/protocols/liquid.svg", text: "text-network-liquid-fg" }
+};
+function NetworkInfoDisclosure({
+  networks,
+  className
+}) {
+  if (networks.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    DisclosureCard,
+    {
+      className,
+      triggerClassName: "px-2.5 py-1.5",
+      contentClassName: "space-y-2 px-2.5 pb-2.5 pt-1",
+      icon: /* @__PURE__ */ jsx(IconGlyph, { glyph: Info, size: "xs", className: "text-secondary-content" }),
+      title: /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", eyebrow), children: "What are these networks?" }),
+      children: networks.map((network) => {
+        const info = NETWORK_INFO[network];
+        const mark = NETWORK_INFO_MARK[network];
+        return /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            network === "onchain" ? /* @__PURE__ */ jsx(OnchainNetworkIcon, {}) : /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: mark.src,
+                alt: "",
+                className: cn("size-3.5 flex-shrink-0 object-contain", mark.mono && "kui-mono-icon")
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: cn(eyebrow, mark.text), children: info.title })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "pl-5 text-tiny leading-snug text-muted-foreground", children: info.detail }),
+          /* @__PURE__ */ jsx("ul", { className: "space-y-0.5 pl-5", children: info.bullets.map((bullet) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-1.5 text-xxs leading-snug text-foreground/50", children: [
+            /* @__PURE__ */ jsx("span", { className: "mt-[1px] text-foreground/55", children: "-" }),
+            /* @__PURE__ */ jsx("span", { children: bullet })
+          ] }, bullet)) })
+        ] }, network);
+      })
+    }
+  );
+}
+function MethodChoiceChip({
+  method,
+  active,
+  enabled,
+  disabledReason,
+  onClick
+}) {
+  const meta = METHOD_META[method];
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled: !enabled,
+      "data-testid": `deposit-method-${method}`,
+      className: cn(
+        "flex flex-shrink-0 items-center gap-1 whitespace-nowrap rounded-full px-2.5 py-1.5 text-icon-xxs font-bold transition-all",
+        active ? "bg-primary bg-gradient-primary text-primary-foreground shadow-button-primary" : enabled ? "bg-foreground/5 text-muted-foreground hover-gradient-violet hover:text-foreground/80" : "cursor-not-allowed bg-foreground/3 text-foreground/20"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("flex shrink-0 items-center", !enabled && "opacity-40 grayscale"), children: meta.icon }),
+        meta.label,
+        !enabled && disabledReason && /* @__PURE__ */ jsx("span", { className: "text-xxs font-normal opacity-60", children: disabledReason })
+      ]
+    }
+  );
+}
+
+export {
+  NETWORK_CONFIG,
+  InvoiceStatusBanner,
+  PaidOverlay,
+  CopyIcon,
+  AccountChoiceChip,
+  NetworkInfoDisclosure,
+  MethodChoiceChip
+};